Modern Web Development

5,193
-1

Published on

Talks about the best practices in web development regarding semantics, accessibility, SEO and performance.

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,193
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
147
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Modern Web Development

  1. Modern web development
  2. • Web standards • Semantics • Separating layers • Unobtrusive JavaScript • Performance
  3. Web standards
  4. What are web standards?
  5. There aren’t any Web Standards, only Recommendations
  6. “A W3C Recommendation is a specification or set of guidelines that, after extensive consensus-building, has received the endorsement of W3C Members and the Director. W3C recommends the wide deployment of its Recommendations.” – W3C
  7. • Valid HTML/XHTML code • Semantically correct code • Separation of content, presentation and interaction
  8. DOCTYPEs decide rendering mode
  9. • Quirks Mode • Standards Mode (HTML 5: No Quirks Mode) • Almost Standards Mode (HTML 5: "Limited Quirks Mode") • IE 7 Mode ("mostly" a frozen copy of the mode that was the standards mode in IE7) • XML Mode For the application/xhtml+xml Content-Type (not available in Internet Explorer)
  10. • Strict doctypes render Standards Mode • Transitional XHTML doctypes render Almost Standards Mode • Other/No doctypes render Quirks Mode
  11. Activating Browser Modes with Doctype
  12. Semantics
  13. “I have a dream for the Web [in which computers] become capable of analyzing all the data on the Web – the content, links, and transactions between people and computers.” – Tim Berners-Lee, 1999
  14. • Use meaningful names and elements • Applies to all code
  15. <table cellspacing="0" cellpadding="0"> <tr> <td class="heading">SWDC</td> </tr> <tr> <td>Content</td> </tr> </table>
  16. <div class="heading">SWDC</div> <div class="content">Content</div>
  17. <h1>SWDC</h1> <p>Content</p>
  18. <h2 class="h3">News</h2>
  19. <h2 class="additional-content">News</h2>
  20. <div class="additional-content"> <h2>News</h2> </div>
  21. <div class="left"> Navigation </div> <div class="right"> Content </div>
  22. <div class="navigation"> Navigation </div> <div class="main-content"> Content </div>
  23. Separating layers
  24. • HTML (content) • CSS (presentation) • JavaScript (interaction)
  25. Why separating layers?
  26. • Code maintainability • Overview • Structure • Performance
  27. <div style="color: red"> Very important </div>
  28. <div class="important"> Very important </div>
  29. Unobtrusive JavaScript
  30. • No JavaScript code in the HTML code • No inline events on elements • Progressive enhancement
  31. <a href="javascript:doStuff()"> Magic </a>
  32. <a href="#" onclick="doStuff(); return false"> Magic </a>
  33. <a href="stuff.html" onclick="doStuff(); return false"> Magic </a>
  34. <a href="stuff.html" class="magic"> Magic </a>
  35. window.onload = function () { var magic = getElementsByClassName("magic"); for (var i=0, l=magic.length; i<l; i++) { magic.onclick = function () { doStuff(); return false; }; } };
  36. JavaScript-dependent elements should be generated with JavaScript
  37. var link = document.createElement("a"); link.innerHTML = "Get more content"; link.onclick = function () { // JavaScript magic }; document.body.appendChild(link);
  38. Why it should work without JavaScript
  39. A little case study of Sony Ericsson
  40. JavaScript available
  41. No JavaScript
  42. <!-- SonyEricsson logo code --> <div id="selogo" class="floatleft" onclick="document.location.href='/cws/ home?lc=sv&cc=se';" style="cursor: pointer;"> <img src="/cws/images/spacer.gif" style="height: 30px; width: 155px;" alt="Sony Ericsson"/> </div>
  43. JavaScript available
  44. No JavaScript
  45. Google result
  46. Performance
  47. • CSS sprites • Image optimizing • gzip • Expires headers • ETags • Deployment configuration
  48. CSS Sprites
  49. • Combine several images into one • Position through CSS
  50. .save { background: url(sprite.png) no-repeat 0 0; } .delete { background: url(sprite.png) no-repeat 0 -100px; } .info { background: url(sprite.png) no-repeat 0 -200px; }
  51. Upload images, get sprite and CSS: CSS Sprite Generator
  52. Image optimizing
  53. • Combines many open-source optimizers • Lossless compression • Removing superfluous metadata
  54. DN.se
  55. DN.se start page: Could save 370 kb/unique page load Has 1 186 730 unique visitors/week 370 * 1 186 730 ≈ 418 GB per week!
  56. smusher • Commandline through smush.it API for whole folders
  57. Smush.it now part of YSlow for Firebug
  58. gzip: • Apache: mod_deflate • IIS 7: HTTP Compression
  59. # Alternative 1 AddOutputFilterByType DEFLATE text/html text/ plain text/css text/javascript application/x- javascript # Alternative 2 SetOutputFilter DEFLATE DeflateFilterNote ratio SetEnvIfNoCase Request_URI .(?:gif|jpe?g|PNG)$ no-gzip dont-vary SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary SetEnvIfNoCase Request_URI .pdf$ no-gzip dont- vary
  60. Expires headers: • Apache: mod_expires • IIS 7: HTTP Expires
  61. # Alternative 1 ExpiresActive On ExpiresByType text/css "access plus 3 days" ExpiresByType application/x-javascript "access plus 3 days" ExpiresByType image/gif "access plus 3 days" ExpiresByType image/png "access plus 3 days" ExpiresByType image/jpeg "access plus 3 days" # Alternative 2 ExpiresActive On ExpiresDefault "access plus 3 days
  62. Setting/removing ETags: • Apache: FileETag MTime Size alternatively FileETag none • For IIS: Mdutil.exe
  63. JavaScript deployment: • Concatenating • Minifying
  64. Concatenating: • cat jquery.js base.js > all.js • Concatenate Text Files using C#
  65. Minifying: • JSMin • YUI Compressor
  66. Building Web Applications With Apache Ant
  67. Autokatalogen.se
  68. DN.se
  69. Yahoo! • Best Practices for Speeding Up Your Web Site
  70. Tools
  71. Firebug
  72. YSlow
  73. HTML Validator
  74. Inline Code Finder
  75. Firefinder
  76. Obstacles
  77. Redmond...
  78. Acid2 Test
  79. • 31 October 2005: Safari 2.0.2 • 28 March 2006: Konqueror 3.5.2 • 20 June 2006: Opera 9.0 • 17 June 2008: Mozilla Firefox 3.0 • 19 March 2009: Internet Explorer 8
  80. Acid3 Test
  81. • DOM Level 2 Traversal (subtests 1-6) • Unicode 5.0 UTF-16 (subtest 68) • DOM Level 2 Range (subtests 7-11) • Unicode 5.0 UTF-8 (subtest 70) • Content-Type: image/png; text/plain (subtest 14, 15) • HTML 4.0 Transitional (subtest 71) • <object> handling and HTTP status codes (subtest 16) • HTML 4.01 Strict • DOM Level 2 Core (subtests 17, 21) • SVG 1.1 (subtests 74, 78) • DOM Level 2 Events (subtests 17, 30-32) • SVG 1.1 Fonts (subtests 77, 79) • CSS Selectors (subtests 33-40) • SMIL 2.1 (subtests 75-76) • DOM Level 2 Style (subtest 45) • ECMAScript Conformance (subtests 81-96) • DOM Level 2 HTML (subtest 60) • Data URI scheme (subtest 97) • DOM Level 2 Views • XHTML 1.0 Strict (subtest 98) • ECMAScript GC (subtests 26-27) • HTTP 1.1 Protocol
  82. • Safari • Firefox 3.2.3: 77/100 3.0.10: 71/100 4 beta: 100/100 3.5 beta: 94/100 • Chrome • Internet Explorer 1.0: 79/100 8: 20/100 2 beta: 100/100 No beta • Opera 9.64: 85/100 10 beta: 100/100
  83. Doctypes & rendering
  84. Rendering by voting
  85. IE8 and the X-UA-Compatible situation
  86. Multiple IE
  87. Summary • Web standards • Semantics • Separating layers • Unobtrusive JavaScript • Performance
  88. Robert Nyman robert@robertnyman.com robertnyman.com Images: http://www.flickr.com/photos/mringlein/316476217/ http://blog.tmcnet.com/blog/tom-keating/movabletype/movable-type-vs-wordpress-war-heats-up.asp http://www.yardbarker.com/other_sports/articles/LIST_BEST_Players_to_ever_wear_the_number/292924 http://jimberkin.wordpress.com/2007/09/19/yet-another-reason-i-hate-lawyers/ http://share-sports.3ds.com/2008/03/31/philippe-fuchs-tunes-workouts-for-better-results-with-heart-rate-variability-monitoring/ http://hsivonen.iki.fi/doctype/ie8-mode.png http://www.stalepopcorn.co.uk/competitions/win-stuff-the-neverending-story-on-dvd/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×