BĠLĠġĠM TEKNOLOJĠLERĠ TASARIMIN TEMEL ĠLKELERĠ

1 M LL E T M BAKANLI I B L M TEKNOLOJ LER TASARIMIN TEMEL LKELER 482BK0171 Ankara, 2011 i Bu mod l, mesleki ve teknik e itim okul/kurumlar nda uygulanan er eve retim Programlar nda yer alan yeterlikleri kazand rmaya y nelik olarak rencilere rehberlik etmek amac yla haz rlanm bireysel renme materyalidir. Mill E itim Bakanl nca cretsiz olarak verilmi tir. PARA LE SATILMAZ. i A IKLAMALAR .. iii G R .. 1 RENME FAAL YET 1 .. 3 1. WEB TASARIMINDA TEMEL LKELER .. 3 Web Tasar m nda TEMEL lkeler .. 3 erik .. 3 Tasar m .. 3 levsellik .. 5 Kullan labilirlik .. 5 Web Taray c lar ile Uyumluluk .. 6 Hedef Kitle Beklentileri .. 7 M terinin Web Projesi htiya lar .. 7 M terinin Sundu u Hizmetlerin Web Projesi ile Tan t lmas .. 7 M terinin Sundu u r nlerin Web Projesi ile Tan t lmas.

2 8 M terinin Ki isel Web Projesinin Tan t lmas .. 8 Bi imsel zellikler .. 9 Renk Dengesi .. 9 Okunabilirlik .. 11 Hizalama .. 11 Metin ve Nesne Aras Bo luklar .. 12 Ses ve G r nt Ekleme Prensipleri .. 12 Projede Kullan lacak Yaz l mlar n Belirlenmesi .. 13 Maliyet .. 13 UYGULAMA FAAL YET .. 15 L ME VE DE ERLEND RME .. 17 RENME FAAL YET 2 .. 18 2. WEB S TES TASLA I OLU TURMA .. 18 Web Sitesi Tasla .. 18 B t nl k .. 18 G venirlik .. 18 G ncellik .. 18 Ba lant H z .. 19 Sunulacak erik Kategorilerini Olu turma .. 20 Tutarl Sayfa Haz rlama .. 20 Ana Sayfa D zeni .. 20 Sayfa i Yerle im Plan .. 20 Sayfa z n rl .. 21 Reklam Alanlar n Belirleme .. 22 Dil Deste inin Belirlenmesi .. 24 Mobil Cihazlarla Uyumluluk .. 25 Yard m Sayfalar .. 25 Site Haritas .. 26 UYGULAMA FAAL YET .. 27 L ME VE DE ERLEND RME .. 29 NDEK LER ii MOD L DE ERLEND RME.

3 30 CEVAP ANAHTARLARI .. 31 KAYNAK A .. 32 iii A IKLAMALAR KOD 482BK0171 ALAN Bili im Teknolojileri DAL/MESLEK Web Programc l MOD L N ADI Tasar m n TEMEL lkeleri MOD L N TANIMI rencinin web sitesi tasla olu turmak i in gerekli web sitesi analizi yapma al kanl ve tasar m ilkelerinin kazand r ld bir renme materyalidir. S RE 40/8 NKO UL Bu mod l n n ko ulu yoktur YETERL K Web projesinin analizini ger ekle tirerek tasar m ilkelerine uygun haz rl klar yapmak MOD L N AMACI Genel Ama Bu mod lle gerekli ortam sa land nda web projesinin analizini ger ekle tirerek tasar m ilkelerine uygun haz rl klar yapabileceksiniz. Ama lar 1. Web tasar m nda TEMEL ilkeleri uygulayabileceksiniz. 2. Web sitesi tasla olu turabileceksiniz. E T M RET M ORTAMLARI VE DONANIMLARI Ortam: Bili im teknolojileri laboratuvar , i letme ortam Donan m: Projeksiyon, bilgisayar, web tasar m edit r program L ME VE DE ERLEND RME Mod l i inde yer alan her renme faaliyetinden sonra verilen l me ara lar ile kendinizi de erlendireceksiniz.

4 Retmen mod l sonunda l me arac ( oktan se meli test, do ru-yanl testi, bo luk doldurma, e le tirme vb.) kullanarak mod l uygulamalar ile kazand n z bilgi ve becerileri l erek sizi de erlendirecektir. A IKLAMALAR iv 1 G R Sevgili renci, yi bir web sitesi haz rlamak uzmanl k gerektiren bir i tir. Uzmanl k gerektiren her i gibi web sitesi haz rlamak i in de baz zel bilgileri renmemiz gereklidir. Web sitesi haz rlamaya ba lamadan nce baz al malar yapmak, web sitesini zihnimizde ve ka t zerinde tasarlamak zorunday z. Planlama al kanl kazand ktan sonra i lerimizi daha h zl ve do ru yapabiliriz. E er web sitemizi nceden tasarlamazsak daha sonra bir de i iklik yapmak zorunda oldu umuzda ok fazla zaman kaybederiz. Bu mod lde bir web sitesi haz rlamak i in gerekli olan n haz rl klar n neler oldu unu, nas l yap laca n ve web sitesi tasar m yaparken hangi TEMEL ilkelere dikkat etmemiz gerekti ini renece iz.

5 G R 2 3 RENME FAAL YET 1 Web tasar m nda TEMEL ilkeleri uygulayabileceksiniz. Tasar m kelimesinin ne anlama geldi ini ara t r n z. Web tasar m yap l rken kullan lan program ve ara lar ara t r n z. 1. WEB TASARIMINDA TEMEL LKELER Web Tasar m nda TEMEL lkeler Web tasar m yap l rken dikkat edilmesi gereken baz ilkeler vard r. Bu ilkeler bizim haz rlayaca m z web sitesinin alt yap s n d zg n kurmam z , siteyi haz rlarken daha az hata yapmam z , web sitesi kullan c lar n n sitemizde daha fazla ilgi g stermesini ve h zl al mam z sa layacakt r. erik Web sitesi tasar m yaparken kullanaca m z en nemli ey i eriktir. nk web sitelerinin haz rlanma amac , bilgilere ba kalar n n ula mas n n sa lanmas d r. Onun i in web sitesi tasar m na ba larken sitede ne yay nlayaca m z yani i erikleri bilmemiz ve tasar m m z ona g re yapmam z gerekir.

6 Erikleri nceden bilmemiz tasar m haz rlamam zda bize y n verecektir. erik hakk nda dikkat etmemiz gereken bir di er unsur da uzun c mleler yerine basit ve sade anlat mlar kullanmakt r. Tasar m ok g zel olan bir sitede i erik yok ise o siteyi kimse ziyaret etmez ama tasar m zay f olan bir sitede i erik iyi ise o siteye her zaman ziyaret i gelir. Sitede kulland m z i erikler, site ziyaret ilerinin beklentileri d nda olmamal d r. Tasar m Web sitesi i eriklerinin haz rlayaca m z web sayfas n n neresinde ve nas l g r nmesini planlad m z b l m tasar m a amas d r. Tasar m a amas nda web sayfas n n logosu nerede olacak, yaz lar nerede olacak, men ler nerede olacak gibi sorular n cevaplar n ka t zerine ( ekil ) ya da bilgisayara ( ekil ) izeriz. Bu b l mde yapt m z asl nda bir aray z (kullan c n n siteyi kullan rken bilgisayar ekran nda g rd b l m) olu turmakt r.

7 ARA TIRMA RENME FAAL YET 1 AMA 4 ekil :Elle tasar m al mas ekil : Bilgisayar ortam nda tasar m al mas 5 levsellik Kullan c lar sitenin ana sayfas ndan sitenin i indeki her sayfaya eri mek ister. Ana sayfam z haz rlarken bunu dikkate almam z gereklidir. Di er taraftan internet kullan c lar sitenin i sayfalar ndan da di er sayfalara eri mek ister. Bunun i in m mk n oldu unca sitedeki her sayfadan di er sayfalara ba lant lar olu turma al mal y z. E er bunu sa layam yorsak web sitemizin ok kullan lan sayfalar na her sayfadan mutlaka ba lant vermeliyiz. Her sayfadan ana sayfaya ve sitenin ana b l mlerine ba lant sa lamal y z. rne in bir al veri sitesinde her sayfadan Al veri Sepeti nin oldu u sayfaya, kullan c bilgilerine, sipari lerim b l m ne ba lant sa lamal y z ( ekil ). Kullan labilirlik Web sayfalar m z haz rlarken internet kullan c lar n n kolay kullanaca ekilde tasarlamam z gerekir.

8 Kullan c lar sitemizdeki yaz lar okurken zorlanmamal d r. Bunun i in yaz tipini, rengini, b y kl n iyi se memiz ve uygun bir zemin zerinde g r nt lememiz gerekir. Ayr ca haz rlad m z sayfalar n yaz c dan kar laca n da d nerek yaz renklerini yaz c dan kt nda okunacak ekilde se meliyiz. Web sayfalar n haz rlarken site logosunu, ana sayfaya olan ba lant lar , men leri internet kullan c lar n n al kanl klar na g re konumland rmal y z. Kullan labilirli in iyi olmas i in a a da baz zellikler listelenmi tir: Web sayfalar m z h zl y klenmelidir. Siteyi gezmek i in kulland m z navigasyon (men ) kullan c n n kolayca g r p kullanaca bir yerde bulunmal (Genellikle sayfa ba nda veya sayfan n sol ve sa b l m nde)d r. Sayfadaki site logosundan ana sayfaya ba lant verilmelidir. Her sayfadan ana sayfaya ba lant i in bir Anasayfa yaz s bulunmal d r. Her b l mde o b l m n i sayfalar na ula mam z i in ba lant lar olmal d r.

9 Web sitesinde ileti im kurmak i in ileti im bilgileri ve ileti im formu bulunmal d r. nemli kelimeler kal n olarak veya zel renklerle vurgulanmal d r. erik ok fazla ise arama kutusu bulunmal d r. 6 ekil : levselli i ve kullan labilirli i y ksek bir web sayfas Web Taray c lar ile Uyumluluk nternet kullan c lar haz rlad m z sayfalar g r nt lemek ve kullanmak i in Web Taray c denilen programlara ihtiya duyar ( ekil ). Web taray c programlar temelde ayn g rev i in programlanm sa da web sayfalar n g sterirken ufak farkl l klar g sterebilir. Tasarlad m z web sayfalar n haz rlarken b t n web taray c larda ayn g r nmesini sa lamaya al mal y z. ekil :En ok kullan lan web taray c programlar Web taray c lar neden haz rlad m z web sayfalar n ayn g stermezler? nk web taray c lar farkl firmalar taraf ndan haz rlanan programlard r.

10 Nternet Explorer, Firefox, Chrome, Safari, Opera ( ekil ) gibi ok kullan lan web taray c lar haz rlan rken W3C (Web standartlar n belirleyen topluluk) taraf ndan konulan kurallara g re sayfa kodlar n n istediklerini yaparlar fakat yeni konulan kurallara her web taray c programlayan firma an nda yeni program s r m karamayabilir. Bu da bizim kurallara uygun haz rlad m z sayfan n baz taray c larda d zg n baz lar nda istemedi imiz gibi g r nmesine neden olabilir. 7 ekil : Temmuz 2011 tarihinde d nya genelinde web taray c lar n n kullan m oranlar Biz sayfa kodlamam z yaparken taray c lar n yeteneklerini bilerek sayfa kodlamam z ona g re yapmaya al mal y z. Hedef Kitle Beklentileri Haz rlayaca m z web sitesinin kullan c lar ok nemlidir. nk web siteleri internet kullan c lar i in haz rlan r. Bu y zden web sitesi kullan c lar n n beklentileri ve yetenekleri do rultusunda bir web sitesi haz rlamal y z.