DERS 13
Transparan GIF'ler
Internet üzerinde gezinirken, resimlerin arka plan ve arka renkler ile uyum içinde olduğunu, resmin kare olmasına rağmen arka planın resmin boşluklarından görünebildiğine şahit olursunuz. Eğer web sayfanızda bir resim kullanıyor ve resmin boş taraflarından arkaplanın görünmemesinden ve resmin sayfa üzerinde yama gibi görünmesinden yakınıyorsanız bu bölümü dikkatle okuyun.
Bu bölümde resmi transparan hale getirirken en çok kullanılan shareware grafik editörlerinden biri olan Paint Shop Pro'nun 3.12 sürümünü kullanacağız. PSP 4.0 sahipleri de yaptıklarımızı aynen kendi programlarında uygulayabilirler. Öncelikle Paint Shop'u açın ve transparan yapmak istediğiniz GIF dosyasını yükleyin, unutmayın transparan dosyalar sadece GIF formatında ve 256 renkte olabilirler.
"Select" araç kutusundan aşağıdaki resimde de seçili olan "Color Picker"ı seçin ve resim üzerinde transparan yapmak istediğiniz, yani yaprak ve dünyanın dışında kalan alanın üzerine götürün. Fareyi bu bölgeden ayırmadan durum çubuğunun sağ bölmesinde I: değerinin yanındaki değeri aklınızın bir kenarına kaydedin. "File" menüsünden "Save As..." komutunu çalıştırın ve format olarak GIF89a - Interlaced'i seçin. Diyalog kutusunun sağ tarafında bulunan Options butonuna bastığınızda GIF Transparency Options Diyalog kutusu karşınıza gelecektir. Bu kutucukta "Set Transparency Value to:" seçeneğini işaretleyip karşısındaki metin kutusuna "I:"nın karşısında okuduğunuz değeri (yani yalnız bu resim için 215'i) yazarsanız GIF dosyasının
renk seçici ile seçtiğiniz rengi transparan olacak böylece arkaplanlar bu bölgeden görülebilecektir. Resimler her zaman başarılı olarak transparan yapılamazlar, bunun sebebi bazen resmin istemediğiniz alanlarında transparan yaptığınız renge ait parçacıkların kalmasıdır. Bunu önlemek için resmi yüksek renge getirdikten sonra resim ile alakası olmayan bir renk seçip transparan yapmak istediğiniz alanı bu renk ile boyamalı ve resmi tekrar 256 renge getirerek bu rengin indeksini okuyup transparan hale getirmelisiniz. Bir transparan GIF'in hikayesi kısaca böyle, "Benim işim gücüm var, bu kadar işle uğraşamam" diyorsanız, Internet üzerinde yüzlerce GIF dönüştürme seti bulabilirsiniz, hızlı olmalarına rağmen insan elinin yerini tutmaz ama olsun
_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
DERS 14
JPEG Mİ GIF Mİ?
Web sayfalarında resim kullanırken en çok sorulan sorulardan biri şudur:
' Madem JPEG dosyaları aynı ölçülerdeki GIF'lerden daha az yer tutuyor neden GIF dosyalarını kullanayım?'
Bu sorunun cevabı çok basit, GIF dosyaları sayfa üzerinde JPEG dosyalarından daha keskin ve canlı görünürler, bunun sebebi JPEG formatının ' kayıplı' bir grafik formatı olmasıdır. JPEG dosyalarının kullanılması ayrıca, sade beyaz alanlarda yüksek renk çözünürlüğünde görülmeyen fakat 256 renkte göze batan küçük noktacıkların oluşmasına neden olur. JPEG formatı, daha çok büyük ve az bir beyaz alana sahip grafik dosyaları üzerine uygulanmalıdır.
_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
DERS 15
Web Sayfalarında Grafik Kullanımı
Başarılı bir Web sitesine sahip olmak için sayfa tasarımını iyi bilmeniz, kısacası sanatsal görüş açısına sahip olmanız gerekir. İşte bu işin püf noktaları...
PEK çok şirket ve kurum Internet'te yeralmak için yarışıyor. Rakiplerinin Web sitelerinin olması kaygısı, modaya uymak gibi nedenlerle kendi Web sitelerini hazırlıyorlar veya hazırlatıyorlar. Şundan emin olun ki, bir süre sonra şöyle diyecekler: ' İyi, güzel bir Web sitemiz var ama bunun bize getirisi ne oldu? Pek uğrayan yok. bir Web adresi edinmek için ödediğimiz paraya değiyor mu?
Yoksa sadece kartvizitlerimize bir Web adresi eklemek için mi yaptık tüm bunları?' Bu sorular neden sorulur? Çünkü Web üzerine bir stratejiniz yoktur, amaçlar belirlenmemeştir, siteniz pek kimsenin ilgisini çekmeyen kuru bilgiyle doludur, sektördeki gelişmeler yansıtılmıyordur, grafik ara yüzey değiştirilmiyordur, web teknolojisindeki gelişmeler izlenmiyordur. Bu tür pek çok neden sayabiliriz. Kısacası, kullanıcının bir daha buraya uğramaması için herşey yapılmıştır. Web tasarımı şu anda teknik bir konu. Çoğunlukla servis sağlayıcıların kendi içlerinde kurdukları birimler aracılığıyla yürütülüyor ve genel olarak HTML bilgisi, biraz da Photoshop yeterli görünüyor. Kendi Web sayfalarını tasarlayan amatör kullanıcılar ise her ay yayınladığımız Web Okulu sayfalarından ve diğer kaynaklardan edindikleri, HTML ve grafik programları konusundaki bilgileri çerçevesinde uyguluyorlar. Bu ay bunun dışına çıkalım ve başarılı bir Web site si hazırlamak için profesyonellere yönelik püf noktaları verelim istedik.
-----------------------------------------------------------------------
KAĞIT ÜZERİNDE HERŞEY BİTMİŞ OLSUN
WEB sitesi tasarımı klasik sayfa tasarımından oldukça farklıdır. Artık A4 sayfa, santimetre, megabytelar büyüklüğündeTIFF dosyaları, CMYK modu yoktur. Bunların yerini yüklenme zamanı, bant genişliği, transparan GIF, piksel, Java gibi kavramlar almıştır. Ölçütler ve öncelikler değişmiştir. Bu ortamı anlayabilmek için çok fazla site gezmek gerekir. Ancak belli bir doygunluğa ve deneyime erişince iyi bir site tasarlanabilir. İşte size profesyonel bir Web sitesi tasarımına yönelik ipuçları:
• Çok iyi bulduğunuz siteleri ayrıntılı olarak gezin, neden başarılı olduğunu anlamaya çalışın. Aynı biçimde çok kötü hazırlanmış siteleri de dolaşarak buralardan nelerden kaçınmak gerektiği görülebilir.
• Profesyonel Web tasarımı büyük bir ekibin işidir. Editör, grafiker, yönetmen, animatör, programcı, webmaster gibi farklı niteliklere sahip insanların ortak çalışmasıyla iyi bir site hazırlanabilir. Yalnızca uyum yetmez, bunun ötesinde bu kişilerin tek tek diğer alanlarda da bir miktar bilgiye sahip olmaları gerekir. Programcının resim formatları üzerine ya da içeriğin zenginleştirilmesi üzerine bilgisi ekip çalışmasını daha verimli kılar. Aynı biçimde editörün de yeni teknolojiler konusundaki bilgisi, içeriğin sunumu konusunda daha zengin seçenekler sunar.
• Ekipte hangi durumda olursanız olun diğer konularda yeterli bilgiye sahip olmaya çalışın. Bir Web sitesi kurmaya girişmeden önce ayrıntılı bir haritasını çıkarın. Hangi sayfada hangi bilgilerin yeralacağı burada görülsün. Yine grafik olarak da hangi bölümün nasıl olacağı burada yeralsın. Her sayfa için bir ' storyboard' hazırlayın, bu size ya da operatöre ne yapacağını açık olarak anlatsın. Bundan sonrası sizin grafik programlardaki becerinize kalmıştır.
• Bazen büyükçe bir sitenin içinde gezerken hala aynı sitenin içinre olup olmadığımızı bilemeyiz, kendi içinde bütünlüğü yoktur. Alt bölümlerde her biri ayrı ellerden çıkmış gibidir. Sürekliliği sağlamak için her sayfada tekrarlanan standart bir gezinti çubuğu (' navigasyon bar' ) ya da standart bir zemin resmini kullanmak kısmi bir çözümdür. Renk, font ve resim kullanımı bu konuda yardımcı olabilir. Bu öğelerin başarılı bir biçimde uygulanması hem sürekliliği sağlarken, hem de değişik tasarımlar yapmanıza olanak verir.
• Tüm sayfaların aynı biçime sahip olması oldukça sıkıcı bir durumdur. Sitenin ruhunu koruyarak her sayfada kullanıcıyı şaşırtacak, ilgisini çekecek değişiklikler yapmak gerekir. • Kullanıcıların büyük bölümü AltaVista, Yahoo gibi arama makinaları yardımıyla sitenize gelmektedir, ve büyük olasılıkla ön sayfadada değil, aradıkları bilginin olduğu alt sayfalardan birindedirler. Burada sorun nerede olduğunu ve site içerisinde nerelere gidebileceğini açık bir biçimde göstermektir. Bunun için en basit yöntem bir gezinti çubuğunu her alt sayfaya koymaktır. Çeşitli Web sitelerinde sık sık gördüğümüz, sayfada yatay ya da dikey olarak kullanılan alt bölümlerin yeraldığı bu çubuklar, sitenin içeriği hakkında genel bir fikir vermektedir. Yine bu çubuklar üzerinde, içinde bulunan alt bölüm grafiksel olarak diğerlerinden farklı kılınırsa kullanıcı hangi alt bölümde olduğunu anlayabilecektir.
• Gezinti çubuğu simgeler ile daha kullanışlı olabilir veya dilden bağımsız bir anlatım biçimine sahip olabilir. Ancak herkonuda anlamı herkesçe açık simgeler yaratılamayabilir. Bu durumda zorlayarak simge olşturmak gereksizdir; ayrıca yanlış anlamaya yolaçabilir.
--------------------------------------------------------------------
İÇERİĞE UYGUN TASARIM
• İÇERİK çok sık güncellenecekse buna uygun tasarım yapın. Yeni bir alt bölümü, resmi, metni, ' link'i ekleyip çıkarması son derece kolay olsun. Ön sayfanın tek bir görüntüden (imagemap) ibaret olduğu bir tasarım çok kullanışsızdır böyle bir durumda. Benzer biçimde statik bir atmosfer yaratan derin gölgeler atılmış düğmeler ya da resimler kullanmak da böyle bir içerikle bağdaşmaz. Yoğun olarak metin kullanmak gerekebilir, bu durumda metin renkleriyle oynayın, sayfayı sütunlara ayırın.
• Ön sayfada eğer tek bir nesne resmi, figür ya da portre kullanıyorsanız bunu büyük kullanın. Büyük kullanılmış bir resim herzaman çarpıcıdır.
• Fontlarla deneme yapın, içeriğe en uygun düşecek fontu bulmaya çalışın. Ve gerekmedikçe çok farklı fontlar kullanmayın, çoğu durumda tek bir font ailesi yeterlidir. Gerek grafiklerle gerekse HTML uygulamasını kullanarak birbirleri ile ilişkilerini gözden kaçırmadan yazı büyüklükleriyle oynayın. Canlılık sağlamak ve okunurluğu arttırmak için bold, italik yazı kullanın.
• Aşağıya doğru çok fazla sarkan sayfalardan kaçının. Çok uzun sayfalar hem yüklenme zamanı hem de okunulabilirlik açısından kötü bir uygulamadr. Bunun yerine içeriği fazla sayıda alt sayfalara dağıtın. Böylelikle kullanıcı görmek istemediği sayfa için beklemek zorunda kalmayacaktır.
• Kullanıcıların büyük bölümü 14 inch monitörde 256 renk görebilmektedir. Çalıştığınız bilgisayar ne olursa olsun kullanıcının göreceği koşullarda test edin sayfalarınızı. Farklı işletim sistemlerinde resimler farklı görünmektedir. Bazı durumlarda , özellikle de hareketli GIF görüntülerde, büyük kayıplar görülür. Eğer Macintosh'ta çalışıyorsanız son aşamada grafiklerinizin parlaklığını biraz arttırın. Ayni grafik PC'de, Mac'de olduğundan daha koyu görünmektedir.
• Sayfalarınızı ayrı ayrı tarayıcılarla test edin. Bu hem kullanılan renk paletleri hem de desteklediği HTML özellikleri açısından önemlidir. En yaygın iki tarayıcının da desteklediği özellikleri kullanmaya çalışın. • Sitenizi ortalama kullanıcıyla test edin. Aranılan bir bilgiye ne kadar zamanda ulaşıldığı önemli bir sorundur. Sonuca göre sitenizin hiyerarşisinde değişikliklere gidin. Aranılan bilgi sezgisel olarak ulaşılabilir olsun. En alt bölümlerden bile diğer bir bölüme ulaşmanın kolay ve hızlı olmasına dikkat edin. PC Magazine Online uzunca bir deneme süresinden ve kullanıcı testlerinden sonra hizmete açılmıştır.
-------------------------------------------------
JPG Mİ GIF Mİ?
• DAHA sonra ayrıntılı değineceğiz ama, işte size bir resmi GIF formatında mı yoksa JPG formatında mı kaydedeciğiniz konusunda basit bir çözüm: Resmi hem GIF hem de JPG olarak ayrı ayrı kaydedin. Sonra büyüklüklerine bakın, daha küçük hangisi ise onu kullanın. Bu her zaman olmasa da çoğu zaman hangi formatın kullanılması gerektiği konusunda doğru sonuç verir. Resmi grafik programda değil tarayıcıya yükleyerek görüntü kalitesine bakın. Photoshop ile Internet Explorer ya da Netscape
Navigator'da resimler farklı görünmektedir.
• Siyah ve beyazın Web'de önemli bir avantajı vardır: Tüm işletim sistemlerinde ve bilgisayarlarda siyah ve beyaz bizim istediğimiz biçimdedir. Yani renkte sistem farklılığı ve ayarlardan kaynaklanan kaymalar yoktur, siyah siyahtır beyaz da beyaz. Bu iki rengi sonra nasıl görüneceği endişesine kapılmadan sık sık kullanabilirsiniz. Ayrıca zemin rengi olarak kullanmak etkileyici sonuçlar verebilir. • Son olarak aslolan içeriktir! Tam bir kuru bilgi yığınına dönüşen Internet'te sitenizi bir konu üzerinde odaklayın ve sık sık güncelleyin. CNN'in başarısı yalnızca güncelleme için 160 kişinin çalışmasında olsa gerek.
--------------------------------------------------------------
KİMLİK SAYFASI
Pek çok sitede gormüşsünüzdür: Gezinti çubuğunun yeraldığı indeks sayfasından önce, kimliğin vurgulandığı bir ana sayfa vardır (' splash page' ). Buraya tıklayarak ya da doğrudan indeks sayfasına geçersiniz (' navigation page' ). Bu iki açıdan önemlidir: Birincisi kimliğe, prestije yönelik bir vurgu yapabilirsiniz; ikincisi de çokça kullanılacak indeks sayfasının yükünü azaltabilirsiniz. Ama şu da açık ki, çok fazla hit alan bir site için uygun bir çözüm değildir. Bu uygulama ile indeks sayfasında daha rahat davranma şansınız olur. Hem gezinti çubuğunun hem logonun hemde güncel bilgilerin yeralacağı bir sayfa yerine, yalnızca güncel uygulamalara yönelik bir sayfa tasarlayabilirsiniz. Diğer yandan verdiğimiz iki örnekte de siyah zeminin kullanılmış olması dikkatinizi çekmiştir. Daha önce belirttiğimiz gibi siyah ve beyazın doğru kullanımı gerçekten etkileyici sonuçlar vermektedir.
----------------------------------------------------------------------
_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
DERS 16
WEB SAYFALARINDA FORM KULLANIMI
FORMLAR, Web sayfası tasarlayan kişi veya şirketlerle Internet kullanıcıları arasındaki veri alışverişini sağlamak için ideal bir araçtır. HTML 2.0 standartlarının konmasıyla tanıştığımız formlar bir çok sitede kullanıcıların da bilgi göndermesine olanak tanıyarak etkileşimli bir ortam oluşturmaktadır.
Formlar iki yönlü olarak çalışır; Web tarayıcı tarafından ekranda oluşturulan görüntü, kullanıcı tarafından doldurulduktan sonra gönderilir ve Web tarayıcı bu bilgileri alarak sunucuda çalıştırılan bir programa iletir. Program bilgileri değerlendirdikten sonra gerekli işlemleri yapar.
Bir form oluşturmak için <FORM></FORM> tag"ları arasına istenilen kontroller INPUT tag"ı sayesinde belirtilir. Kontrollerden toplanan bilgilerin nasıl değerlendirileceği FORM tag"ının içinde gösterilir. FORM ve INPUT tag"larının kullanımını inceledikten sonra örnek olarak verdiğimiz kodlara bakarak bu kodların nasıl bir görüntü oluşturduğunu görebilirsiniz.
-----------------------------------------------
FORM TAG'I
Genel kullanım: <FORM ACTION=url METHOD=get-post TARGET=pencere>
ACTION=url
Formun gönderildiğinde hangi program tarafından değerlendirileceğini belirtir.
METHOD=get-post
Bilgilerin sunucuya hangi yolla gönderileceğini belirtir. GET değeri verildiğinde kontrollere girilen içerik o anda bulunulan adrese eklenip değerlendiriciye gönderilir. POST değeri ise form içeriğini direkt olarak derleyici programa yönlendirir. TARGET=window
Netscape tarafından getirilen bu tag form değerlendirici tarafından kullanıcıya geri gönderilen yanıtın hangi pencerede belireceğini gösterir. Pencere isimleri FRAME konumuzu işlerken gösterdiğimiz " _blank" , " _top" gibi değerlerden biri olabilir.
INPUT TAG'I
Genel kullanım: <INPUT ALIGN=tip [CHECKED|] MAXLENGTH=uzunluk
NAME=isim SIZE=boyut SRC=adres TYPE=tip VALUE=değer>
ALIGN=tip:TYPE değeri bir resim olarak atandığında bir sonraki satırın resme göre nasıl yerleştirileceğini belirtir. TOP, MIDDLE veya BOTTOM değerlerinden birini alabilir.
CHECKED:Kontrol olarak bir işaretleme veya seçim kutusu kullanıldığında CHECKED değeri bu kutuların işaretlenmiş olarak karşımıza gelmesini sağlar.
MAXLENGTH=uzunluk: Metin kutusuna kullanıcının maksimum kaç karakter girebileceğini belirler.
NAME=isim: Kontrole bir isim verir
SIZE=boyut: Kontrolün boyutlarını karakter cinsinden belirlemenizi sağlar. TEXTAREA kontrolü kullanıldığında ' en,boy' gibi bir ifade kullanılarak kontrolün hem eni hem de yüksekliği belirtilebilir.
SRC=adres:Kontrol olarak resim seçildiğinde resmin bulunduğu adresi taşır.
TYPE=tip Kontrolün cinsini belirler ve şu değerlerden biri olabilir: CHECKBOX: Bir işaretleme kutusu görüntüler ve sadece doğru veya yanlış değerlerini alabilir.
HIDDEN: Web tarayıcısının penceresinde görünmez fakat içerdiği değer gönderilen form ile web sunucusuna ulaşır.
IMAGE: Bir resmi ifade eder ve üzerine tıklandığında form değerlerini sunucuya yollar. Genellikle bu amaçla kullanılsa da istenilirse kullanıcının resmin hangi x ve y noktalarına dokunduğu öğrenilebilir. Bu tag SRC ile birlikte kullanılır ve SRC komutu resmin bulunduğu URL'yi göstermelidir.
PASSWORD:TEXT kontrolü ile aynı özellikleri taşır fakat kullanıcının girdiği karakterler bu kontrolde yıldız olarak görülür.
RADIO Kullanıcının bir çok seçenek içerisinden bir tanesini seçebilmesine olanak tanır. Grup içindeki RADIO kontolleri her zaman aynı ismi taşımalı kontrollerin değerleri VALUE değerine atanmalıdır.
RESET:Tıklandığında form içeriğini temizler. Kullanıcının form'u tekrar doldurmasını sağlar.
SUBMIT:Form içeriğini sunucuya yollar. VALUE değeri kullanılarak üzerindeki yazı değiştirilebilir.
TEXT:Kullanıcıdan tek satırlık veri alınmasına olanak tanır. SIZE ve MAXLENGTH takıları, bu kontrolle birlikte kullanılabilir