Modern Web Development
Upcoming SlideShare
Loading in...5
×
 

Modern Web Development

on

  • 5,288 views

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

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

Statistics

Views

Total Views
5,288
Views on SlideShare
5,228
Embed Views
60

Actions

Likes
5
Downloads
117
Comments
0

10 Embeds 60

http://www.techgig.com 19
http://www.valtechlabs.se 12
https://intranet.valtech.se 10
http://www.slideshare.net 9
http://www.linkedin.com 3
https://www.linkedin.com 3
http://localhost 1
http://lanyrd.com 1
http://www.scoop.it 1
https://tasks.crowdflower.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Modern Web Development Modern Web Development Presentation Transcript

  • Modern web development
  • • Web standards • Semantics • Separating layers • Unobtrusive JavaScript • Performance
  • Web standards
  • What are web standards?
  • There aren’t any Web Standards, only Recommendations
  • “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
  • • Valid HTML/XHTML code • Semantically correct code • Separation of content, presentation and interaction
  • DOCTYPEs decide rendering mode
  • • 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)
  • • Strict doctypes render Standards Mode • Transitional XHTML doctypes render Almost Standards Mode • Other/No doctypes render Quirks Mode
  • Activating Browser Modes with Doctype
  • Semantics
  • “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
  • • Use meaningful names and elements • Applies to all code
  • <table cellspacing="0" cellpadding="0"> <tr> <td class="heading">SWDC</td> </tr> <tr> <td>Content</td> </tr> </table>
  • <div class="heading">SWDC</div> <div class="content">Content</div>
  • <h1>SWDC</h1> <p>Content</p>
  • <h2 class="h3">News</h2>
  • <h2 class="additional-content">News</h2>
  • <div class="additional-content"> <h2>News</h2> </div>
  • <div class="left"> Navigation </div> <div class="right"> Content </div>
  • <div class="navigation"> Navigation </div> <div class="main-content"> Content </div>
  • Separating layers
  • • HTML (content) • CSS (presentation) • JavaScript (interaction)
  • Why separating layers?
  • • Code maintainability • Overview • Structure • Performance
  • <div style="color: red"> Very important </div>
  • <div class="important"> Very important </div>
  • Unobtrusive JavaScript
  • • No JavaScript code in the HTML code • No inline events on elements • Progressive enhancement
  • <a href="javascript:doStuff()"> Magic </a>
  • <a href="#" onclick="doStuff(); return false"> Magic </a>
  • <a href="stuff.html" onclick="doStuff(); return false"> Magic </a>
  • <a href="stuff.html" class="magic"> Magic </a>
  • window.onload = function () { var magic = getElementsByClassName("magic"); for (var i=0, l=magic.length; i<l; i++) { magic.onclick = function () { doStuff(); return false; }; } };
  • JavaScript-dependent elements should be generated with JavaScript
  • var link = document.createElement("a"); link.innerHTML = "Get more content"; link.onclick = function () { // JavaScript magic }; document.body.appendChild(link);
  • Why it should work without JavaScript
  • A little case study of Sony Ericsson
  • JavaScript available
  • No JavaScript
  • <!-- 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>
  • JavaScript available
  • No JavaScript
  • Google result
  • Performance
  • • CSS sprites • Image optimizing • gzip • Expires headers • ETags • Deployment configuration
  • CSS Sprites
  • • Combine several images into one • Position through CSS
  • .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; }
  • Upload images, get sprite and CSS: CSS Sprite Generator
  • Image optimizing
  • • Combines many open-source optimizers • Lossless compression • Removing superfluous metadata
  • DN.se
  • 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!
  • smusher • Commandline through smush.it API for whole folders
  • Smush.it now part of YSlow for Firebug
  • gzip: • Apache: mod_deflate • IIS 7: HTTP Compression
  • # 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
  • Expires headers: • Apache: mod_expires • IIS 7: HTTP Expires
  • # 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
  • Setting/removing ETags: • Apache: FileETag MTime Size alternatively FileETag none • For IIS: Mdutil.exe
  • JavaScript deployment: • Concatenating • Minifying
  • Concatenating: • cat jquery.js base.js > all.js • Concatenate Text Files using C#
  • Minifying: • JSMin • YUI Compressor
  • Building Web Applications With Apache Ant
  • Autokatalogen.se
  • DN.se
  • Yahoo! • Best Practices for Speeding Up Your Web Site
  • Tools
  • Firebug
  • YSlow
  • HTML Validator
  • Inline Code Finder
  • Firefinder
  • Obstacles
  • Redmond...
  • Acid2 Test
  • • 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
  • Acid3 Test
  • • 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
  • • 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
  • Doctypes & rendering
  • Rendering by voting
  • IE8 and the X-UA-Compatible situation
  • Multiple IE
  • Summary • Web standards • Semantics • Separating layers • Unobtrusive JavaScript • Performance
  • 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/