Web Önyüzü Nasıl Olmalı? <Markup> : İskelet {css} : Görünüm JavaScript() : Etkileşim
Bu üç öğe olabildiğince esnek bağlı olmalı Kötü Örnek / İyi Örnek
 
 
 
 
 
Standartlara uygun olmalı!
Standartlara uygun olmalı! <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org...
Dinamik sayfalarda DTD'ye nasıl uyacağız? <ul><li>Arka tarafın işi!
HTML Tidy : http://tidy.sf.net/
Düzenli ifadeler </li></ul>
Geçerlilik kontrolü <ul><li>Markup için
http://validator.w3.org/
CSS için
http://jigsaw.w3.org/css-validator/
JavaScript için
http://www.jslint.com/ </li></ul>
Güncel tarayıcıların tümünde sorunsuz çalışmalı! <ul><li>Tarayıcıların yorumlama farkı </li><ul><li>reset.css </li></ul><...
Yine de standartın dışına çıkacaksak </li><ul><li>style.ie6.css </li></ul><li>Test, test, test! </li></ul>
Geliştirme aşamasında anlaşılabilir olmalı! <ul><li>Mümkün olduğunca ayrı dosyalar </li><ul><li>genel.css //Tüm sayfalard...
anaSayfa.css //Sadece ana sayfaya özel stiller
iletisim.js //Sadece iletişim sayfasına özel JavaScript </li></ul><li>Yorum satırları
Scope başlangıç ve bitişleri
(bkz: kötü örnek, iyi örnek) </li></ul>
Ne kazandırdı? <ul><li>Kodun iş yapan bölümleri ayrıldı </li><ul><li>HTML yazan kişi sadece HTML
Görsel işler ile ilgilenen kişi sadece CSS
Etkileşimi sağlayan programcı sadece JavaScript </li></ul><li>HTML dinamik üretilince içeriği önbelleğe alınamaz. Statik d...
Gururumuz okşandı! </li></ul>
Gerçek ortamda az trafik harcamalı, hızlı olmalı! <ul><li>Http Request sayısını azaltın </li><ul><li>İlk giriş yapan kulla...
İlk giriş yapan kullanıcıyı “mutlu” etmek gerekir </li></ul><li>Dosyaları birleştirin </li><ul><li>echo genel.css anasayfa...
JavaScript : noktalı virgül sorunsalı </li></ul></ul>
Gerçek ortamda az trafik harcamalı, hızlı olmalı! <ul><li>Dosyaları sıkıştırın </li><ul><li>JavaScript </li><ul><li>YUICom...
Google Closure Compiler http://code.google.com/intl/tr/closure/compiler/docs/gettingstarted_ui.html </li></ul><li>CSS </li...
Upcoming SlideShare
Loading in …5
×

Web Onyuzu Nasil Olmali

2,245 views

Published on

"Özgür Web Teknolojileri Günleri" için hazırladığım sunum

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
no profile picture user

  • Be the first to comment

No Downloads
Views
Total views
2,245
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
23
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Web Onyuzu Nasil Olmali

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

×