Modern Web Development

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 speciﬁcation 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>

<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

<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 conﬁguration

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 superﬂuous metadata

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_deﬂate • 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

Yahoo! • Best Practices for Speeding Up Your Web Site

Firebug

HTML Validator

Inline Code Finder

Fireﬁnder

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.ﬂickr.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.ﬁ/doctype/ie8-mode.png http://www.stalepopcorn.co.uk/competitions/win-stuff-the-neverending-story-on-dvd/

http://www.techgig.com	19
http://www.valtechlabs.se	12
https://intranet.valtech.se	9
http://www.slideshare.net	9
http://localhost	1
http://lanyrd.com	1

Modern Web Development

by Robert Nyman on Nov 09, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 51

Statistics

Modern Web Development — Presentation Transcript