Downloaded 24 times
Web Onyuzu Nasil Olmali
- 1. Web Önyüzü NasılOlmalı? <Markup> : İskelet {css} : Görünüm JavaScript() : Etkileşim
- 2. Bu üç öğeolabildiğince esnek bağlı olmalı Kötü Örnek / İyi Örnek
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9. Standartlara uygun olmalı!<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> veya <!DOCTYPE html>
- 10. Dinamik sayfalarda DTD'ye nasıl uyacağız? Arka tarafın işi!
- 11. HTML Tidy :http://tidy.sf.net/
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19. Güncel tarayıcıların tümünde sorunsuz çalışmalı! Tarayıcıların yorumlama farkı reset.css Standartın dışına çıkmadan markup ve css
- 20. Yine de standartındışına çıkacaksak style.ie6.css Test, test, test!
- 21. Geliştirme aşamasında anlaşılabilir olmalı! Mümkün olduğunca ayrı dosyalar genel.css //Tüm sayfalarda kullanılan stiller
- 22. anaSayfa.css //Sadece anasayfaya özel stiller
- 23. iletisim.js //Sadece iletişimsayfasına özel JavaScript Yorum satırları
- 24. Scope başlangıç vebitişleri
- 25. (bkz: kötü örnek,iyi örnek)
- 26. Ne kazandırdı? Koduniş yapan bölümleri ayrıldı HTML yazan kişi sadece HTML
- 27. Görsel işler ileilgilenen kişi sadece CSS
- 28. Etkileşimi sağlayan programcısadece JavaScript HTML dinamik üretilince içeriği önbelleğe alınamaz. Statik dosyalar önbelleğe alınabilir.
- 29.
- 30. Gerçek ortamda aztrafik harcamalı, hızlı olmalı! Http Request sayısını azaltın İlk giriş yapan kullanıcıların %40-%60'ı temiz bir önbellek ile geliyor
- 31. İlk giriş yapankullanıcıyı “mutlu” etmek gerekir Dosyaları birleştirin echo genel.css anasayfa.css > tum.css
- 32. JavaScript : noktalıvirgül sorunsalı
- 33. Gerçek ortamda aztrafik harcamalı, hızlı olmalı! Dosyaları sıkıştırın JavaScript YUICompressor http://developer.yahoo.com/yui/compressor/
- 34. Google Closure Compilerhttp://code.google.com/intl/tr/closure/compiler/docs/gettingstarted_ui.html CSS CSS Optimiser : http://www.cssoptimiser.com/ Markup
- 35.
- 36. Gerçek ortamda aztrafik harcamalı, hızlı olmalı! Resimleri birleştirin CSS Sprite : background-position CSS dosyalarını <head> etiketi arasına koyun HTML Spesikifasyonu JavaScript dosyalarını </body>'den önce koyun DOM ready
- 37. Gerçek ortamda aztrafik harcamalı, hızlı olmalı! Resimleri optimize edin PNGCrush : http://pmt.sourceforge.net/pngcrush/
- 38. JPEGTran : http://jpegclub.org/jpegtran/
- 39. Yahoo! Smush.it : http://developer.yahoo.com/yslow/smushit/
- 40. Gerçek ortamda aztrafik harcamalı, hızlı olmalı! DOM öğelerini olabildiğince azaltın DOM'da gezinmek masraflıdır, özellikle Explorer'da
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47. Gerçek ortamda aztrafik harcamalı, hızlı olmalı! Sunucu tarafında yapılacak optimizasyonlar Statik içeriği farklı hostname ile sunun HTTP/1.1 spesifikasyonu, aynı hostname'den 2'den fazla paralel indirmeye izin vermiyor
- 48. Aynı hostname'de cookieher istekte taşınır!
- 49. 4'den fazla hostnameile sunmayın, DNS çözümleme masraflıdır CDN kullanın : %20-%30 daha hızlı cevaplar
- 50. İçeriği Expires, Cache-Controlveya ETags başlıkları ile ve Gzip'lenmiş olarak sunun
- 51. Gerçek ortamda aztrafik harcamalı, hızlı olmalı! Araçlar YSlow http://developer.yahoo.com/yslow/
- 52. Page Speed http://code.google.com/intl/tr/speed/page-speed/
- 53.
- 54. Kod anlamlı olmalı<div>'e click event'ı atamak yerine <a>'ya atamak daha “anlamlı”dır.
- 55. Bir listeyi <ul>,<ol>,<li>,<dl>,<dt>,<dd>ile listelemek daha “anlamlı”dır.
- 56. Bir başlığı <h1>,<h6> ile göstermek “anlamlı”dır.
- 57. Tablo verisini <table>ile listelemek daha “anlamlı” iken sayfayı <table> ile tasarlamak “anlamsız”dır.
- 58. Kod anlamlı olmalıHTML5 Semantic etiketler <header>,<nav>,<figure>,<footer>,<aside>,
- 59.
- 60. Mümkün olduğunca JavaScript bağımsız olabilmeli İşlemler “Sadece JavaScript ile” çalışmamalı, JavaScript desteklemeyen tarayıcılar için de destek vermeli
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.