|
Tasarimin Temelleri
Merhaba. </h1> olarak görüntülemek istiyorum.Dikkat ederseniz,<p> yani paragraf basi tag'inin kullanildigi yerlerde
<br> görecek ve web sayfalarinda resim kullanimina giris yapacagiz. |
JPEG MI GIF MI? Web sayfalarinda resim kullanirken en çok sorulan sorulardan biri sudur: ' Madem JPEG dosyalari ayni ölçülerdeki GIF'lerden daha az yer tutuyor neden GIF dosyalarini kullanayim?' Bu sorunun cevabi çok basit, GIF dosyalari sayfa üzerinde JPEG dosyalarindan daha keskin ve canli görünürler, bunun sebebi JPEG formatinin ' kayipli' bir grafik formati olmasidir. JPEG dosyalarinin kullanilmasi ayrica, sade beyaz alanlarda yüksek renk çözünürlügünde görülmeyen fakat 256 renkte göze batan küçük noktaciklarin olusmasina neden olur. JPEG formati, daha çok büyük ve az bir beyaz alana sahip grafik dosyalari üzerine uygulanmalidir. |
|
Web Sayfalarinda Grafik Kullanimi Basarili bir Web sitesine sahip olmak için sayfa tasarimini iyi bilmeniz, kisacasi sanatsal görüs açisina sahip olmaniz gerekir. Iste bu isin püf noktalari... PEK çok sirket ve kurum Internet'te yeralmak için yarisiyor. Rakiplerinin Web sitelerinin olmasi kaygisi, modaya uymak gibi nedenlerle kendi Web sitelerini hazirliyorlar veya hazirlatiyorlar. Sundan emin olun ki, bir süre sonra söyle diyecekler: ' Iyi, güzel bir Web sitemiz var ama bunun bize getirisi ne oldu? Pek ugrayan yok. bir Web adresi edinmek için ödedigimiz paraya degiyor mu? Yoksa sadece kartvizitlerimize bir Web adresi eklemek için mi yaptik tüm bunlari?' Bu sorular neden sorulur? Çünkü Web üzerine bir stratejiniz yoktur, amaçlar belirlenmemestir, siteniz pek kimsenin ilgisini çekmeyen kuru bilgiyle doludur, sektördeki gelismeler yansitilmiyordur, grafik ara yüzey degistirilmiyordur, web teknolojisindeki gelismeler izlenmiyordur. Bu tür pek çok neden sayabiliriz. Kisacasi, kullanicinin bir daha buraya ugramamasi için hersey yapilmistir. Web tasarimi su anda teknik bir konu. Çogunlukla servis saglayicilarin kendi içlerinde kurduklari birimler araciligiyla yürütülüyor ve genel olarak HTML bilgisi, biraz da Photoshop yeterli görünüyor. Kendi Web sayfalarini tasarlayan amatör kullanicilar ise her ay yayinladigimiz Web Okulu sayfalarindan ve diger kaynaklardan edindikleri, HTML ve grafik programlari konusundaki bilgileri çerçevesinde uyguluyorlar. Bu ay bunun disina çikalim ve basarili bir Web site si hazirlamak için profesyonellere yönelik püf noktalari verelim istedik. KAGIT ÜZERINDE HERSEY BITMIS OLSUN WEB sitesi tasarimi klasik sayfa tasarimindan oldukça farklidir. Artik A4 sayfa, santimetre, megabytelar büyüklügündeTIFF dosyalari, CMYK modu yoktur. Bunlarin yerini yüklenme zamani, bant genisligi, transparan GIF, piksel, Java gibi kavramlar almistir. Ölçütler ve öncelikler degismistir. Bu ortami anlayabilmek için çok fazla site gezmek gerekir. Ancak belli bir doygunluga ve deneyime erisince iyi bir site tasarlanabilir. Iste size profesyonel bir Web sitesi tasarimina yönelik ipuçlari: Çok iyi buldugunuz siteleri ayrintili olarak gezin, neden basarili oldugunu anlamaya çalisin. Ayni biçimde çok kötü hazirlanmis siteleri de dolasarak buralardan nelerden kaçinmak gerektigi görülebilir. • Profesyonel Web tasarimi büyük bir ekibin isidir. Editör, grafiker, yönetmen, animatör, programci, webmaster gibi farkli niteliklere sahip insanlarin ortak çalismasiyla iyi bir site hazirlanabilir. Yalnizca uyum yetmez, bunun ötesinde bu kisilerin tek tek diger alanlarda da bir miktar bilgiye sahip olmalari gerekir. Programcinin resim formatlari üzerine ya da içerigin zenginlestirilmesi üzerine bilgisi ekip çalismasini daha verimli kilar. Ayni biçimde editörün de yeni teknolojiler konusundaki bilgisi, içerigin sunumu konusunda daha zengin seçenekler sunar. • Ekipte hangi durumda olursaniz olun diger konularda yeterli bilgiye sahip olmaya çalisin. Bir Web sitesi kurmaya girismeden önce ayrintili bir haritasini çikarin. Hangi sayfada hangi bilgilerin yeralacagi burada görülsün. Yine grafik olarak da hangi bölümün nasil olacagi burada yeralsin. Her sayfa için bir ' storyboard' hazirlayin, bu size ya da operatöre ne yapacagini açik olarak anlatsin. Bundan sonrasi sizin grafik programlardaki becerinize kalmistir. • Bazen büyükçe bir sitenin içinde gezerken hala ayni sitenin içinre olup olmadigimizi bilemeyiz, kendi içinde bütünlügü yoktur. Alt bölümlerde her biri ayri ellerden çikmis gibidir. Sürekliligi saglamak için her sayfada tekrarlanan standart bir gezinti çubugu (' navigasyon bar' ) ya da standart bir zemin resmini kullanmak kismi bir çözümdür. Renk, font ve resim kullanimi bu konuda yardimci olabilir. Bu ögelerin basarili bir biçimde uygulanmasi hem sürekliligi saglarken, hem de degisik tasarimlar yapmaniza olanak verir • Tüm sayfalarin ayni biçime sahip olmasi oldukça sikici bir durumdur. Sitenin ruhunu koruyarak her sayfada kullaniciyi sasirtacak, ilgisini çekecek degisiklikler yapmak gerekir. • Kullanicilarin büyük bölümü AltaVista, Yahoo gibi arama makinalari yardimiyla sitenize gelmektedir, ve büyük olasilikla ön sayfadada degil, aradiklari bilginin oldugu alt sayfalardan birindedirler. Burada sorun nerede oldugunu ve site içerisinde nerelere gidebilecegini açik bir biçimde göstermektir. Bunun için en basit yöntem bir gezinti çubugunu her alt sayfaya koymaktir. Çesitli Web sitelerinde sik sik gördügümüz, sayfada yatay ya da dikey olarak kullanilan alt bölümlerin yeraldigi bu çubuklar, sitenin içerigi hakkinda genel bir fikir vermektedir. Yine bu çubuklar üzerinde, içinde bulunan alt bölüm grafiksel olarak digerlerinden farkli kilinirsa kullanici hangi alt bölümde oldugunu anlayabilecektir. • Gezinti çubugu simgeler ile daha kullanisli olabilir veya dilden bagimsiz bir anlatim biçimine sahip olabilir. Ancak herkonuda anlami herkesçe açik simgeler yaratilamayabilir. Bu durumda zorlayarak simge olsturmak gereksizdir; ayrica yanlis anlamaya yolaçabilir. IGE UYGUN TASARIM • IÇERIK çok sik güncellenecekse buna uygun tasarim yapin. Yeni bir alt bölümü, resmi, metni, ' link'i ekleyip çikarmasi son derece kolay olsun. Ön sayfanin tek bir görüntüden (imagemap) ibaret oldugu bir tasarim çok kullanissizdir böyle bir durumda. Benzer biçimde statik bir atmosfer yaratan derin gölgeler atilmis dügmeler ya da resimler kullanmak da böyle bir içerikle bagdasmaz. Yogun olarak metin kullanmak gerekebilir, bu durumda metin renkleriyle oynayin, sayfayi sütunlara ayirin. • Ön sayfada eger tek bir nesne resmi, figür ya da portre kullaniyorsaniz bunu büyük kullanin. Büyük kullanilmis bir resim herzaman çarpicidir. • Fontlarla deneme yapin, içerige en uygun düsecek fontu bulmaya çalisin. Ve gerekmedikçe çok farkli fontlar kullanmayin, çogu durumda tek bir font ailesi yeterlidir. Gerek grafiklerle gerekse HTML uygulamasini kullanarak birbirleri ile iliskilerini gözden kaçirmadan yazi büyüklükleriyle oynayin. Canlilik saglamak ve okunurlugu arttirmak için bold, italik yazi kullanin. • Asagiya dogru çok fazla sarkan sayfalardan kaçinin. Çok uzun sayfalar hem yüklenme zamani hem de okunulabilirlik açisindan kötü bir uygulamadr. Bunun yerine içerigi fazla sayida alt sayfalara dagitin. Böylelikle kullanici görmek istemedigi sayfa için beklemek zorunda kalmayacaktir. • Kullanicilarin büyük bölümü 14 inch monitörde 256 renk görebilmektedir. Çalistiginiz bilgisayar ne olursa olsun kullanicinin görecegi kosullarda test edin sayfalarinizi. Farkli isletim sistemlerinde resimler farkli görünmektedir. Bazi durumlarda , özellikle de hareketli GIF görüntülerde, büyük kayiplar görülür. Eger Macintosh'ta çalisiyorsaniz son asamada grafiklerinizin parlakligini biraz arttirin. Ayni grafik PC'de, Mac'de oldugundan daha koyu görünmektedir. • Sayfalarinizi ayri ayri tarayicilarla test edin. Bu hem kullanilan renk paletleri hem de destekledigi HTML özellikleri açisindan önemlidir. En yaygin iki tarayicinin da destekledigi özellikleri kullanmaya çalisin. • Sitenizi ortalama kullaniciyla test edin. Aranilan bir bilgiye ne kadar zamanda ulasildigi önemli bir sorundur. Sonuca göre sitenizin hiyerarsisinde degisikliklere gidin. Aranilan bilgi sezgisel olarak ulasilabilir olsun. En alt bölümlerden bile diger bir bölüme ulasmanin kolay ve hizli olmasina dikkat edin. PC World Online uzunca bir deneme süresinden ve kullanici testlerinden sonra hizmete açilmistir. JPG MI GIF MI? • DAHA sonra ayrintili deginecegiz ama, iste size bir resmi GIF formatinda mi yoksa JPG formatinda mi kaydedeciginiz konusunda basit bir çözüm: Resmi hem GIF hem de JPG olarak ayri ayri kaydedin. Sonra büyüklüklerine bakin, daha küçük hangisi ise onu kullanin. Bu her zaman olmasa da çogu zaman hangi formatin kullanilmasi gerektigi konusunda dogru sonuç verir. Resmi grafik programda degil tarayiciya yükleyerek görüntü kalitesine bakin. Photoshop ile Internet Explorer ya da Netscape Navigator'da resimler farkli görünmektedir. • Siyah ve beyazin Web'de önemli bir avantaji vardir: Tüm isletim sistemlerinde ve bilgisayarlarda siyah ve beyaz bizim istedigimiz biçimdedir. Yani renkte sistem farkliligi ve ayarlardan kaynaklanan kaymalar yoktur, siyah siyahtir beyaz da beyaz. Bu iki rengi sonra nasil görünecegi endisesine kapilmadan sik sik kullanabilirsiniz. Ayrica zemin rengi olarak kullanmak etkileyici sonuçlar verebilir. • Son olarak aslolan içeriktir! Tam bir kuru bilgi yiginina dönüsen Internet'te sitenizi bir konu üzerinde odaklayin ve sik sik güncelleyin. CNN'in basarisi yalnizca güncelleme için 160 kisinin çalismasinda olsa gerek KIMLIK SAYFASI Pek çok sitede gormüssünüzdür: Gezinti çubugunun yeraldigi indeks sayfasindan önce, kimligin vurgulandigi bir ana sayfa vardir (' splash page' ). Buraya tiklayarak ya da dogrudan indeks sayfasina geçersiniz (' navigation page' ). Bu iki açidan önemlidir: Birincisi kimlige, prestije yönelik bir vurgu yapabilirsiniz; ikincisi de çokça kullanilacak indeks sayfasinin yükünü azaltabilirsiniz. Ama su da açik ki, çok fazla hit alan bir site için uygun bir çözüm degildir. Bu uygulama ile indeks sayfasinda daha rahat davranma sansiniz olur. Hem gezinti çubugunun hem logonun hemde güncel bilgilerin yeralacagi bir sayfa yerine, yalnizca güncel uygulamalara yönelik bir sayfa tasarlayabilirsiniz. Diger yandan verdigimiz iki örnekte de siyah zeminin kullanilmis olmasi dikkatinizi çekmistir. Daha önce belirttigimiz gibi siyah ve beyazin dogru kullanimi gerçekten etkileyici sonuçlar vermektedir. Soner Demirciler |
Kayan Yazilar KAYAN, yuvarlanan, ters parende atarak ekrandan kaybolan yazilar insanlarin ilgisini daha çok çeker. Microsoft bunu düsünerek, benim vatandaslarim da kayan yazilardan faydalanabilsin demis ve<MARQUEE> tag'ini web tarayicisinin yorumlayicisina eklemis... Netscape ise Explorer 2.0'dan beri var olan bu tag'i web tarayicisina koymayi düsünmüyor. Yine de tag'i kullandiginizda içerisinde var olan yazilarin Netscape kullanicilari tarafindan 'normal yazi' olarak görünecegini belirtelim. <MARQUEE BEHAVÝOR=tip BGCOLOR=renk DIRECTÝON=yön HEIGHT=nHA-SPACE=n LOOP=n SCROLLAMOUNT=n SCROLLDELAY=n VSPACE=n WIDTH=n> BEHAVIOR=tip: Metnin ekranda nasil hareket edecegini belirten bu ek SCROLL, SLIDE, ALTERNATE degerlerinden birini alabilir. Ek kullanilmadiginda SCROLL degeri varsayilan olarak kabul edilir ve yazi, sinirin bir kösesinden belirerek diger köseden kayarak kaybolur. SLIDE eki ise yazinin bir köseden baslayarak diger kösede donmasini saglar. Metnin iki köse arasinda gidip gelmesi ise ALTERNATE ekiyle gerçeklestirilebilir. BGCOLOR=renk: Kayan yazinin arkasindaki rengi belirler. ' renk' degeri 16'lik sayi düzeninde bir deger olabilecegi gibi ' red' ,' blue' gibi renk isimlerinden biri de olabilir. DIRECTION=yön: Yazinin kayma yönünü belirler. DIRECTION eki, LEFT veya RIGHT degerlerinden birini almalidir. LEFT degeri yazinin soldan saga dogru kaymasini, RIGHT ise bunun tersini saglar. HEIGHT=n: Kayan yazinin sinirlarindan ' yüksekligi' saglar. N degeri sabit bir piksel sayisi oldugu gibi ayni zamanda bir pencere orani olabilir. Oran degeri % isareti ile belirtilmelidir. HSPACE=n: Kayan yazinin sinirlara ne oranda yaklasacagini belirler. Bu ek özellikle arka plana bir renk verildiginde daha da belirginlesir. LOOP=n: Yaziya verilen hareketin sinirlar içerisinde kaç kere tekrarlanacagini belirler. N degerine ' -1' veya ' INFINITE' verildiginde hareket sinirsiz olarak tekrarlanir. Tip olarak ' SLIDE' kullanildiginda bu islem tek bir kez gerçekleseceginden LOOP ekini kullanmaya gerek yoktur. SCROLLAMOUNT, Kayan yazinin bir defada kaç piksel hareket edecegini, SCROLLDELAY ise yazinin her bir hareketi arasinda kaç milisaniye bekleyecegini belirler. Yazinin üst ve alt sinirdan ne kadar uzakta kalacagini VSPACE ile, yazinin kayacagi toplam uzunlugu ise WIDTH ile ayarlayabilirsiniz. WIDTH degeri HEIGHT gibi bir yüzde alabilir. Örnek Kullanim: <MARQUEE DIRECTION=RÝGHT BEHAVIOR=SCROLL SCROLLAMOWNT=10 SCROLLDELAY=200> bu kayan bir yazýdýr...)</MARQUEE> Örnegin Görünümü: |
Multimedia Ögeleri HTML etkilesimli ve çarpici dokümanlar olusturmak için mükemmel bir ortamdir. Ses ve video görüntülerinin HTML sayfalarinda kullanilabilmesi bu ortami daha da çekici bir konuma getirir. Bu ögeleri kullanmak sadece 2-3 tane kilit komut bagli. Iste bunlari veriyoruz; Seçiminize göre geri planda WAV, .AU veya MIDI ses dosyalarindan birini çalmak için Internet Explorer'da BGSOUND tag'ini kullanabilirsiniz. <BGSOUND SRC='deneme.mid'LOOP=5> komutunu kullandiginizda ' deneme.mid' adli MIDI dosyasi sayfa yüklendiginde 5 defa tekrarlanacak ve sonra duracaktir. Bir AVI veya MOV dosyasini oynatmak için ise yine sadece Explorer'da ise yarayacak DYNSRC komutunu kullanmalisiniz. Deneme.Avi adli bir video görüntüsünü ekrana yerlestirmek için asagidaki gibi bir komut kullanmalisiniz. Deneme.Gif dosyasi görüntü yüklenene kadar sayfada yer kaplayacaktir. <ÝMG DYNSRC='deneme.avi'SRC='deneme.gif' LOOP=INFÝNÝTE= Daha önce de belirttigimiz gibi yukaridaki komutlar sadece Explorer'da ise yariyor. Peki çokluortam dosyalari Netscape'de nasil gösterilir? Onunda yolu var fakat görsel açidan Explorer'daki kadar basarili olmuyor. EMBED komutuyla Netscape penceresine ' gömülen' dosyalar beraberinde çerçeve kaydirma çubugunu da birlikte getiriyor. Yine de ögrenmek isteyenler için komutumuz söyle <EMBED SRC='deneme.avi'> |