Web Tasarımcıları için En İyi CHİPuçları Mükemmel b Sayfaları İçin Sayfanız teknik ve görsel olarak etkileyici olursa düzenli olarak ziyaret edilir. Aşağıdaki temel kurallara dikkat ederseniz hayal kırıklığına uğramaz ve boşa çalışmış olmazsınız. Pazar a Coopffrlj soıuıçl Wch*dcki sörfçı gı bilgiyi hızlı I] pekinde. Bu nedenle V\| nnın programla vana, kousepı, ras :ınr-> firması Pricewa(cr "in c'Idc ettiği araşurma m ııa göre Worid tViıle eriıi yüzde 42'si aradı- ir şekilde bulabilmenin eb'Jeki HTML savlala mia*ı olayın sadece bir içerik ve vinçlilerin ra- ned ir? En iyisi okuyuculara neı bilgilet ve içeriklerle ilgili linkler konusunda lıc-nıcıı bilgilendirmek --portallar da öyle yapıyor; (.İirişte sörlçülcr güncel kısa bilgilerden haberdar edilirler. Linklerinizi büyük Inıagc Map'ier allında gizlemeyin. Ancak belirsiz metinler ola-rak da sıkıştırmayın. En iyi yöntem, Jlılll //ı— tMııo t..W ¦ a.ı—,4 Ultm— lılüı* Bİıİ 34İİ filon*, &ı-.*•*"ı ök* î**ı f İ 4' _ _¦ Du fa* İ.i-* '.-• ;;.l 1 lİ*H* *•*' J .-'it B.J-1^ -•io-^svioor. *~+ Y*hr>*ı Mıil ı. ;• *¦-.'. ..... - "'".' İX-'.IUİT.ıUı M"4" ¦ ' ''.....' İ>>"i"r>ı ¦ -.-.i- - ¦ i'l:'' '¦¦¦¦ ¦-.....:-¦'-'- ¦ '¦¦•¦• :u. ıaıt.:ıicıaj.i(ınx:v.ct>ı"'"-ı.|j-^Jı_-'^i.'iji;-'!ij-^ı. -'¦: '¦*.'';"¦¦İ•• VlhMİ Sftpçp ng.Tıİııiİı'fr.TM mbndrfmU* İM .T-Hlutı ¦'"" '¦ > un O.: .... MI" *-™, V L10U1 .U/ili : ve-(-.İ*¦İ_ N*W* * Mfşlt v ;".. -..',i'ı ,;i .ti jv leplcımc ce#ap ermek ise diğer yarısı. Mala pek çok v eb tasarımcısı tasarımı içerikten üstün t itUVOr. Yavaş yüklenen grafikler ve sayfı açıcılarından vazgeç- mek daha doğru yu bilgi arama oyalar. İçerik: Bilgi olu:'. Bunlar okııyucu-urasıiıda gereksiz yere mrre p-'f^.t:™-. n S'rrn"' ¦:,.,...... . '¦'¦' ¦W-İaıiUiplıK* ¦ V-f.ı .'-fiHı-ıln Hesaplı Grafik: Yahoo.com wwv.''daki en popüler Sayfalar arasındadır anaca uygun tasarımı da bunda önemli bir rol oynuyor. erin başlangıç sayfasında Gösterilmesi Okuvueuiann bilgiyi ararken eğlendikleri düjûııcts ni kafanızdan çıkarın. Hi>, kimse böyle bir ş-cylc zaman harca mak isteme/. Gi fig .sayfanız ile ilgili şu sorulan cevaplayın: Sitem ne sunuyor? Siz kimsini/* Say anr/ı değerli yapan şey linklerı, hangi bağlamının arkasında, neyin bulunduğunu anlatan kısa bilgilen dinci metinlerle açıkla maki ir. Bu şekil de sörfçüler size teşekkür edecek ve siy fanızı ziyaret ermeye devam edeceklerdir. Biçim: Anlaşılır bir sayfa yapısına dikkat edin Web $ayjârn£in aııiaşıİır hir yapıda olmasına dikkat etlin. Bunun içki iki model vardır. Küçük siteler yıldız biçiminde oluşturulur. Tüm alt şayialara giriş sayfası ıi/erinden ulaşılır ve yine ana sayfaya linkleri vardır Bunun avantaj:: Kimse hata yapamaz. Ayrıca bir sayfa eklemek ve kaldırmak tein harcanan elbr bu yöntemle minimuma indirgenebilir. Eğer kapsamlı bilgileri pek çok sayfa halinde vveb'de yayınlamak İstiyorsanız hiyerarşi prensibini kullanmanı/ dalı.: doğrudur; Sabit diskteki klasör ve dosya düzenini anımsatır bîr yapısı vardır: YVcb *>örfçüsü ana şayiadan alt bir saylava ve oradan da yine alı savlalara ulaşır, Bövlecc konuları belirli alanlar halinde bir arada tutmak mümkün olacaktır Okuyucu bilgiden bilgiye geçerek site içinde ilerler, Aynı yapıyı server'ınızuı klasöründe dcnltışnınm. her yeni başlığın kendine ait bir klasörü olmalıdır. Navigatİon'ıu kusursuz olabilmesi için her dokümanın bir üst sayfaya ve ana sayfaya açılan birer linke ihtiyacı vardır. Ana sayfaya giden link ö/.ciliklc önemlidir, şilede yolunu kaybeden okuyucu İÇİn kurtarıcıdır. Ayrıca arama motoru ile bir sayfaya gelen sörtçiiicr için ma sayfaya giden yolu gösterir Her yeni sayfada yeniden bir sayla yapısı deıiemeyiu. Her dokümanı beiü bir şemaya göre oluşturun. Kn önemlisi; Bir ıiavigasyon çubuğu her zaman aynı yerde bulunmalıdır. Böylece .söriçü bir bakışta en önemli eiemanîann yerini bulur. Resimler: İfade gücü yüksek grafikler ekleyin Şayianızda grafik kullanıyorsanız mümkün olduğunca az yer kaplamalarına t>zcn gösterin. Genellikle GIF ve JPEG tormarı kullanılır. GIF formatındakİ navigasyoıı ele manian ve n'im büyük ıck renkli alanlar için idealdir. Seı'eenshoı'lar, organi/as- > Şubat 2C00 ternet Web Tasarımcıları için En İyi CHlPuçlanı m'-a yon şemaları ri. Ancak Lıu Itl 256 renk ile gı kiler ise Jl'l-Xi Hederken sıkıştir Kabul edilebilir az yer kaplayan Grafiklerin b rarlanrnasi i resmî sadece H atar ve bsıradan Test Tabanlı yarctçilcr için I rametreleri öne arkasında nelcrfin bilgi verin: örneğin ı.yi! çü bu şekilde remediğınc ken ile resmin üzeri metresinin içer f.ı/L bilgi alabi n basit SUTlUm resimle miat, resimleri en iâzla leriyor. Bunun dışında-kalıyor, Ciralikleri kayma oranlarını kullanın. kalitede olmak ukk en oram .secin, rdeıı fazla sayfada tek-I durıııııdur, liroİ*ser îr defa alır, Cachc'inc sürekli olarak çağırır, >rowscr"lan kullanan zı-ııage Tag'taki ALT pa-nlidir, Sörrçüyc resmin gizlendiği hakkında ICM" ı ile yola ÇlfcmiS bir söf yüklemek isteyip islisi karar verebilir. Hare gelindiğinde alı paradi belirir \ e bu da daha ek için bir lîısaltır. Yapı: Ana sayfaya en çok iki frame ekleyin l-ranıe icr sayfa üzerinde koşarlar. I'rame oluşturma rînce esnek olu sız oldu. Bunu manı/- Öneririz Navigasyon . (çerçeve} çoğunlukla ana navigasyon yardımına yardımı ile rarine laynur dene neleri bu tekniğin yete iması vü/ünden başan- ı verine tablolar kııilan- nı/. savlayı dar en fa/la İSO p yüksekliğe de içerik itin h lir. Büyüklüğü mide şöyle gön ilecektir :. Riaçll frame kullanırsa eya basık bîr fhınıc ile \el en vcva 100 piksel bolu ûş olursunuz. Bu şekil ı yeterince alanınız ka- sabirlcvin. Kavnak me- a>?.,ılıaı- llı,l.İ.lj.lı..—ğ..ğ¦!..-—. |-H", % -ı •1 *,"*l2u l'D CHIP İ7.ıırfİ-m >hnml> >,,ıoad>>':E^le>Giriç sayfası >/title>>/head> >fraraeset ccis^ldû,"" ' >framc src'frturAînavi.ht-T-' ' name-'navdoc"> İframe src-"£raiBe_weic-htiBİ' ' name1' içeri/ > >/htmi> Böylece biri 100 piksel genişliğinde iki dikey frame tanımlamış olursunuz. ikinci frame kalan alanı kaplar. Frame'lcrle çal ıhtığınızda harici İnik lerlc doğru şekilde çalışmaya dikkat edin. Bunlara daima "ıargei=_ıop" pa rameircsini verin. Başka sumıcularm sayfalarım kendi frame yapınıza ycrlcş-ıi:ıı:ek:eıı kaçının. Bu iyi görünmez ve sörtçüyü kızdırır rranıt'Iere yabancı sayfaları bağlamak da artık her yerde işlemiyor. BâZl web sayfası ileticileri ana aylayı otomatik olarak frame'lerden çözen bir program geliştirdiler. Çapraz linkler: Linklerle çalışırken dikkat edin Linklerle çalisirsaiuZ Wıİ'Ut Wide VVch'in bel kemiği olursunuz. Menıİle re. metinlere Ve resimlerin arkasına linkler çok iyi uyar. Ancak en iyi link bile çalışmıyorsa hiçbir şeye yaramaz- doğal olarak. Bu nedenle, sayfanı/.- eklemeden imce her linki deneyin, l-.n iyisi önceden bnnvser'a adresi girin ve saylanın gelip gelmediğini kontrol edin. İ-.ger lıerşey çalışıyorsa linki adres penceresinden kopyalayın ve kaynak mcıninizt Veya editörünüz Cin hipcrliıık alanına yapıştı- Görünme?: Frame'ler ziyaretçiler onları tanımadıkları zaman iyi görünürler. CHIP şayiasında da bir Navlgatfon Frame'i var. J l- 3 ¦ CHtFffaûtirMe/fcozı ¦ - >İ> "•....... .-I I. ı .1.... .ejM-v—.-e^.v^.,.4-:i; 208 [W:h3 Ih* Sala I ııl HnmuH İMeınr-l E ıpluı it. '¦^V^Bl Nt>/*wİ-**İıİ"Wİı*A^ffİW'İJ*'w**-7"'.ln53 ,-'•>' Olabildiğince uyumlu: Stylesheet'leroe örovvser uyumlu şablon tanımlarına uymalısınız. Bunların neler olduğunu www.webreview.com'dan öğrenebilirsiniz. nn. Bir linkin önüne hrtp:// yazmayı asta unutmayın. Dahili linkler ekliyorsanız klasöıier-deki gibi bir adresleme yapın. Örnek: h t'. p ;//Www. foo. har/info/verı/gc-lir.html dokümanına hrrp://vc\v\v.ıix). baı/iııfo/pazarlama/basili.html'c g; den bir link koyacaksınız. Linkin şövle bir görüntüsü olacaktır: >a hrer- ./pa-Zarlarna/basîtl hrml">Basin>/a>. Y.ınİ Rnmser'a önce bir klasör yukarıya geçmesini ve sonra pazarlama klasörüne bakmasını söylüyorsunuz. Buradan haşin. Iıımi sayfası çağrılacak)ir. Bu biraz karmaşık yöntemin avantajı: Savlaların yapışım ilaha kol.iv değiştirebilmek. Bütün klasör ağaçlan dahili linkleri değiştirilmeden yer değişiiıebilı-yor. Aynısı sitenizi vrni bir server özeri' ne Taşıdığınızda da geçerli. Stylesheet: Browser uyumluluğuna dikkat! ( ascadıng Styıesheeı'ler, web sayılısı oluştururken pek çok sorunu çözerler. Ancak yanlış ycrleşıiriidiklerinde de pek çok yeni soruna neden olurlar. Sorun Internet BxpIorer ile N'etscape Naviua-lor arasındaki uyumsuzluk sorunu. Her iki broveser'ın da stil şablonlarını farklı algılama şekilleri var Bu nedenle stylcs-lıeet'leri kullanmadan önce uyumluluk listesine bir gö/atm: bttp://\vebrevi-ew.eonı/vvr/pııb/guides/styIe/salc>'. rid.hrml. >;SS test savtâsına ila gözat- > Şubat SOD0 mM JJJİ II Web Tasarımcılar1! için En İyi CHİPuçları makta tayda \a '. lıtl.p://\vww.w3.org/ slyle/css/tcsi/ ¦Stylc&hcct ile oluşturulan sayfalan eski bir brovvser le de resi edin. Tasarını bu eski brovvsı r'da güzel görünmeye-eektir ama en a emdan okunabilir olma hdır. Ses: Web sayfalarınızda { CM al* gürültüden VV.ırld Wi( olmak iyin pek uzak durun jVVeb. ses ve muzık aracı ivgim değildir. Internet radyosu ve müzisyenlerin ses örneklen oldukça }ik- An :ak NÖrlUiIer için tahammül edilcmcyet şey 'Sayfama hoşgcldi-niz" \vav ve sürekli baştan çatmaya de vara eden midi dosyalan. Bu arada wa\ dosyalan banı genişliği ııi çok fazla kul aııırlar. Kısa cıngıllar bile yüzlerce KBjtt alaa kaplarlar. Ayrıca istenmeyen sesler kendi başlarına bile . edici. çalışıp telefon etmek İs-is arkadaşlarınız; da dş- MW> 94* *¦ îrt- ^%S "lİ'>ı"l i|("-"tııınİK) Mdv (>"ı1-ıı"'İV I""""ı. ı•••I. ••İ•ıIl.ı. HM MrHI lanı-ıı: 1*ı: kMpi-ukı; Nanm VWi Hınk •VuUcıl İMo. 1ı""ı'. ıİ*rj -f *.-..•;..:ı. ı-ı-i. .İmı don ıa*ı mıı 1ı >fUBl-Wİ|H1.- Mla> 'J.d.ıı {i.ıiıırvıııa, llcMmyMua; ıi'll- E tin*.) Küçük Tablolar: Biçim talimatlarını en iyisi bir tarz şablonuna toplayın. Aksi taktirde tablo çok büyük ve karmaşık olur. M IKjM >1 oldukça nihaisi Huzur içinde leyen bûrodak şimün. lava Appletleri: En iyisi idareli kullanmak Ana sayfaya s k bir lava appkm ve küçük bir shockvavfi animasyonu yerleş-ürmek ilk bakişta oldukla cazip gelecektir. Ancak \. va applcılcri transfer zamanı harcarlar ve şadca* gerçekten bir faydası olacaksa kullanılmalıdırlar. Plağın görevli içerikleri de başka hiçbir yol bulamazsanız, an.: sayfanızda kullanın. Sörlçünün makînasıııda komple plııjv-in donaımnı /.omululuğu yoktur veya sırf sayfanızı görebilmek için megabyte'lar c:a bilgiyi indirmek İslemeyebil ir. HTML Kodu: Kaynak kodunu kısa tutmaya çalışın HTM I programlayanların derletmelerine gerek yok; Kısa ve dolambaçlı ol mayan ki ulu kolayca yazacaklardır. Ancak bu noktada >İ3 sorunlar var. Özellikle tablolarda eeşiıli yazıriplctf kullandığınızda ve özellikle >tbnt> tag'ını kullandığınızda pek çok veri oluşur. Çünkü bu rag'ı her tablo hücresinde göstermek zorunda kallrsinı. örneğin: >5able> >tr>>td>>to:ıt face='ftriai'>Buc- m Kusursuz Site İçin 8 Altın Kural Bir sayfanın ba li detaylar sık s CHİPuçlann doğru yapmışs yorumlarını size 2. Sen değişikli 5. Yazım hatas P1P 323 arı veya başarısızlığı tle İlgile gündeme gelir Eğer bu dikkat ederseniz çoğunu ıız demektir 1. Giriş sayfarıza e-postanıza giden bir link koyun. Böylece okuyucular eleştiri ve lefeb il r fer [elerin yapıldığı tarihî sayfanın altına görü üûr bir yere yazın. 3öylece okuyucu son zi /areliden hu yafta sayfada yeni bir şeyh rin olup olmadığını hemen anlayabilir 3 Yenilikleri gı "Yenilikler" baş) ratmak 4. Okuyucu nur den olacak ger 5 sayfanıza yazın En İyisi ğı altında özel bir alan ya- sayfayı terK etmesine ne-feksiz yere kullanılmış lava scnpt kutulan v: benzetinden kaçının. yapmamaya özen gosle rin ve link!erlni:i en az ayda bir kontrol 6 Kendi şayianızı sık sık ziyaret edin. Genellikle hatalar zaman içinde 'arkedilir. 7 Glnş şayianıza hanci linkler koymayın. Okuyucunuzu hemen kaçırmak istemezsiniz. Diğer tüm dokümanlarda bu linkleri kullanabilirsiniz. 8. Meta Tag'iar kullanın. Bununla arama maklfteJerine yardım etrmş olursunuz En ö'eri.le-ı ş,.n:^: >raeta r.ame=' deşeriotion" content-"İçeriğin Kısaca Tonunla nisası "> >ıneta î5ame=,keywrds" content-"parola 1, ' paroia2,parola.î,' ?arclaS"> >ıceta aaae=" language" ' content-'Tiirfcialı, tiirfcç©, tr"> rel>/font.>>/td>>td>>foııtf ace-Arial">Hacre2>/font>>/td>>/tr> >tr>>td>>fcr.t £ace="&rıal*>rîuc-re3>/iont>>/t!İ>>fnntface= 'Ari-al"> aucre4>/£ont>>,'td>>/tr> >/table> Büyük tablolarda karmaşık bir veri dağı oluşur. Bunun için en İyisi Casca-ding Sytlcshcet'lcri kullanın: >*tylİ Lyp*ı-"l.ext;'css"> td { font-fomily: "Arial"} >/style> >t.d> Huare K/td>>;d>Hucro2>/td> >td>Hucrc3>/td>>td> Hucre4>/td> >/tr>>/table> Bu Stvlcslıcct ile tüm tablo hücreleri uiıı Aria! ile gösterileceğini belirlemiş olursunuz, İstemeni/ sayın: Stylesheet tanımlaması bile ikinci kodda birinci sinden daha kısa. Dezavantajı: 4'ün a! tındaki brovvser sürümleri CSS kodunu tanımıyorlar. Fusion gibi bir liTMLediıörü ile ça lisanlar da sonucu kontrol etmeliler. Pek çok editör föril Kg*1 kullanma eğt" lioÛndedMcn Kaynak kodunıı/aı bu tip tekrarlara karşın kontrol edin ve: gerek siz olanları çıkarırı. Kendinize belli bir disiplin olusnırım ve HTMI/i temiz programlayın. Günkü zamanla ıııhallıklar olmaya baslar; Bir tablo satın >/ıd> layı olmadan sadece bir >td> tagı bulııııılıınır, >p> yer tulu eu.su sadece paragraf sonu için belirir. Gerçi bu da çalışır Jiıeak Cascadjrtg Styİesnect'i olutrurdugıımı/ süreee. Daha sonra başı ve sonu yani >p> ve >/p> olan remi/ vazıîmıs raglara ihtiyaeını/ olacak. Eğer bunu sonradan düzeltmek zorunda kalırsanız çok tazİ3 İş ve hata kaynajuna neden olursunuz. l2İ Şubat 2000
 
 
Cep telefonları | Ekran kartları | Masaüstü | Notebook | Ses kartları | Webcam | Klavye & Fare | Yazıcılar | Tablet Ev Sineması
Mp3 Player | Usb Bellekler | Video kameralar | Fotoğraf Makinesi | Taşınabilir diskler | LED & LCD Tv | Monitörler | OEM | PDA
Navigasyon | Oyun Konsolu