WEB TASARIM TEKNİKLERİ

1. WEB TASARIM TEKNİKLERİ Ok. Suat ONUR Enformatik Bölümü

2. WEB SAYFASININ ÖĞELERİ • Text • Grafik • Video, Animasyon • Ses • HTML, JavaScript, DHTML Kodları vb.

3. Web sayfası hazırlanırken dikkat edilecekler ! • Hiyerarşik Düzen • Web Sayfası Öğelerinin Kullanımı • Ekran Boyutu • Sayfanın Yazdırılabilirliği • Döküman Uzunluğu ve Ekran • Tarayıcı (Browser) Uyumluluğu

4. Hiyerarşik Düzen • Psikologlara göre çoğu insanlar, kısa bir zaman diliminde 4-7 farklı yoğunlukta bilgileri hatırlayabiliyorlar fakat zaman uzadıkça konuya hakimiyetleri de azalıyor. Şematik görüntülerin hedefleri ise ana başlıklar altında kısa, öz, anlaşılabilir bilgiler vererek insanların aradıklarını kolayca bulmalarını ve belleklerinde belli bir süre de olsa yer edinebilmeyi sağlamaktır.

5. Hiyerarşik Düzen Bu nedenle web sayfaları; • Uygun bölümlere ayrılmalı • Önem ve genelliğe bağlı olarak bir hiyerarşi içinde olmalı, • Hiyerarşi bölümler arasındaki ilişkiyi yapılandırmada kullanılmalıdır.

6. Hiyerarşik Düzen • Sayfanızda ilk olarak öncelikli bilgileri sunarsanız, en önemliden veya en genel başlıklardan daha ilgili veya daha ayrıntılı bilgilere doğru bir hiyerarşik düzen kurabilirsiniz. Web' de hiyerarşik organizasyonlar gereklidir. Çünkü çoğu ana sayfa ve bağlantı şemaları hiyerarşik bir düzene sahiptirler. Yandaki sayfada da görüldüğü gibi ana sayfayı alt sayfalar ve içeriksel sayfalar izler.

7. Hiyerarşik Düzen

8. Hiyerarşik Düzen

9. Hiyerarşik Düzen • İyi dengelenmiş hiyerarşik bir ağaç yapısı oluşturmada amaç, okuyucunun sayfa yapısını kolay idrak edebilmesini ve sayfalar arasında kaybolmamasını sağlamaktır. Eğer menülerimiz 4-5 bağlantıdan az bağlantı içeriyorsa değerlerini kaybederler. • Web sayfalarının düzenli ve tutarlı bir sistemle hazırlanmasındaki amaç, hedef kitlenin kısa sürede sayfa düzenine adapte olarak aradıkları bilgiye kolayca erişmelerini sağlamaktır.

10. Örnek Bir Web Sayfası • Sayfanın hangi siteye ait olduğu, belgelerin içeriği, konu başlıkları gibi temel bilgiler burada sabit bir düzen içinde verilerek aynı zamanda "ileri" "geri" düğmeleri eklenerek bir önceki ve bir sonraki sayfaya geçiş kolaylığı sağlanmıştır. • Sayfanın sol yanında ayrılan bölüm ana sayfaya ve konunun alt başlıklarına bağlantı için kullanılmıştır. Okuyuculara sunulan bilgi bu sınırlandırma içinde, düzgün ve orantılı başlıklar altında metin ve grafik olarak gösterilmiştir. Belgelerin bütün sayfaları bu standart formata uygun halde hazırlanmıştır. Böylece, kullanıcılar ilk sayfayı inceledikten sonra diğer sayfalarda aradıkları bilgilerin nerede olduğunu tahmin edebileceklerdir.

11. Web Sayfası Öğelerinin Kullanımı • Resim ve Grafik Kullanımı; • ,jpg, gif, .png uzantıya sahip resim dosya formatları kullanılmalı. • Kullanıcı bilgisayarlarının standart çözünürlük ve renk derinliği dikkate alınmalı. • Türkiye de modem bağlantı hızı dikkate alınarak resim dosya boyutları iyi optimize edilmeli. • Büyük boyutlu resim kullanmak gerekiyorsa o resmin küçük boyutlu resmine link verilerek ayrı bir sayfada büyük resmin görüntülenmesi sağlanabilir. • Sayfa içeriğine uygun resim ve grafikler gerekiyorsa kullanılmalı. • Telif hakları dikkate alınmalı.

12. Web Sayfası Öğelerinin Kullanımı • Text (Yazı) Kullanımı; • Bir çok web sitesi, insanların araştırabileceği küçük bölümlerde referans bilgiler içerirler. Kullanıcılar (okuyucular) uzun ve bitişik belgeleri nadiren bilgisayar ekranından okurlar. . Bu yüzden uzun yazı içeren sayfalar ya parçalanmalı yada isteyen kullanıcılar için yazının devamına link verilmelidir. • Yazılar okunaklı bir yazıtipi ve punto kullanılarak oluşturulmalı ve gerektiğinde vurgu yapmak için renk kullanılmalıdır. • CSS kullanımı ile farklı tarayıcı ve çözünürlüklerde yazının düzgün çıkması sağlanmalıdır. • Paragraf,sütun veya tablo kullanılarak daha okunaklı ve düzenli metinler oluşturulabilir.

13. Dokuman Uzunluğu ve Ekran • Dokuman Uzunluğu ve Ekran; • Çok az web kullanıcıları, ekranda uzun belgeleri okuyarak zaman kaybederler. Çoğu kullanıcılar uzun belgeleri sabit disklerine kaydederler veya kağıttan okumak amacıyla yazıcıya bastırırlar. • Araştırmalara göre uzun dökümanlarda, tarayıcı ekranını aşağıya doğru kaydırmak zorunda kalmak problem yaratmaktadır. Kullanıcılar sayfada aşağı doğru indiklerinde sayfanın üst kısmında verilmiş olan ana başlıkları, diğer sayfalara olan bağlantıları ve konu başlıklarını kaybetmektedir. • Farklı Ekran Çözünürlükleri de dikkate alınarak sayfaların dizaynı önemlidir. Genellikle 800x600 ekran çözünürlüğü çok kullanılmaktadır. Bununla birlikte resimlerde kullanılan renk derinliği de bu çözünürlüğe göre seçilmelidir.

14. Ekran Boyutu • Çözünürlük • Genellikle kullanıcılar 15” monitör ve 800x600 piksel çözünürlük kullanılmaktadır. Ancak sayfa tasarımında sayfada kullanılacak grafiklerin tabloların farklı çözünürlüklerde nasıl görünüceği önceden test edilmelidir. • Özellikle yüksek renk derinliğine sahip grafik ve resimlerin düşük çözünürlüklerde renk kayplarının oluşması söz konusudur. • Text ve grafiklerin tablo içersine alınması ve CSS kullanımı farklı çözünürlüklerdeki sayfa görünüm hatalarını en aza indirmektedir.

15. Sayfanın Yazdırılabilirliği • En küçük ekranlarda bile görülebilen grafikler bazen yazdırılma sırasında standard A-4 sayfasını aşmaktadırlar. Özellikle uzun metinler halinde hazırlanan web sayfalarının yazdırılabilirliliğine çok dikkat edilmelidir. Birçok okuyucu ekrandan okumak yerine bu sayfaları yazdırmayı tercih eder ve sayfalar fazla geniş hazırlanmış ise artan kelimeler yazdırılamayacaktır. • Aşağıda verilen değerler, 640X480 nokta ekran çözünürlüğü baz alınarak hesaplanmış, Internet Explorer ve Netscape Navigator gibi sık kullanılan tarayıcılar ve MacOS ve Windows95 işletim sistemlerinde problemsiz olarak görülüp yazdırılabilecek sayfa boyutlarıdır. Yazdırılabilirlik ===> Maksimum genişlik : 535 pixel Maksimum yükseklik : 295 pixel Ekranda Görüntü ===> Maksimum genişlik : 595 pixel Maksimum yükseklik : 295 pixel

16. Tarayıcı (Browser) Uyumluluğu • Dünya çapında en çok kullanılan browser’lar Microsoft Internet Explorer ve Netscape Communicator’dır. • Hazırlanan sayfalar bu tarayıcılarda test edilmelidir. • Genellikle bu iki tarayıcı arasında JavaScript ve Tablo kullanımlarında uyumsuzluklar vardır. (Özellikle tabloda genişlik belirlemelerinde % değil pixel kullanımı tercih edilmelidir.)

17. Tarayıcı (Browser) Uyumluluğu • Dünya çapında en çok kullanılan browser’lar Microsoft Internet Explorer ve Netscape Communicator’dır. • Hazırlanan sayfalar bu tarayıcılarda test edilmelidir. • Genellikle bu iki tarayıcı arasında JavaScript ve Tablo kullanımlarında uyumsuzluklar vardır. (Özellikle tabloda genişlik belirlemelerinde % değil pixel kullanımı tercih edilmelidir.)