Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,373 views

Published on

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

Published in: Technology, Design
no profile picture user

  • Be the first to comment

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

×