Web Programming Step by Step

Lecture 23
The Future: HTML 5, CSS 3, ECMAScript 5

References: html5rocks.com, alistapart.com, w3schools, Dive Into HTML 5, W3C Draft HTML 5 Spec, Chrome Experiments

Except where otherwise noted, the contents of this presentation are Copyright 2010 Marty Stepp and Jessica Miller.

What is HTML 5?

• a new W3C standard version of the HTML markup language
• successor to HTML 4.01 and XHTML 1.1
• balance between too-loose-ness of HTML 4 and too-strict-ness of XHTML
• reduces the browser's need for plugins to display content, e.g. multimedia
• make web content more rich, semantically meaningful, descriptive, accessible
• more easily enable the web as an application platform (Web 2.0)

What's new in HTML 5?

• semantic tags: nav, aside, header, footer, section, aside, article
• Forms 2.0: sliders, search bars, color/number/email/url/date/time, placeholders, ...
  
• audio and video tags for embedding multimedia
  
• canvas tag for drawing 2D shapes in HTML/JS (like DrawingPanel) (ref 1, 2, 3)
  

What's new, continued

• semantic web / microdata attributes: rel="...", itemscope, itemtype, itemprop
  
• accessibility features ("ARIA")
• embedding of rich XML-like formats such as SVG vector graphics
• other stuff: offline apps, geolocation, cross-document messaging, MIME type registration, history management, ...

The old way

• web pages often have to give semantic meaning to content through class and id attributes, rather than through the tag elements themselves

HTML 5 semantically meaningful tags

HTML 4 / XHTML embedding a video

<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" id="player" width="340" height="280">
  <param name="url" value="http://www.domain.com/path/to/winmovie.wmv" />
  <param name="src" value="http://www.domain.com/path/to/winmovie.wmv" />
  <param name="showcontrols" value="true" />
  <param name="autostart" value="true" />
  <!--[if !IE]>-->
  <object type="video/x-ms-wmv" data="http://www.domain.com/path/to/winmovie.wmv" width="340" height="280">
    <param name="src" value="http://www.domain.com/path/to/winmovie.wmv" />
    <param name="controller" value="true" />
    <param name="autostart" value="true" />
  </object>
  <!--<![endif]-->
</object>

• Yuck!

HTML 5 embedding a video

<video src="video.ogv" width="425" height="350"></video>

• yes, please
• it'll also be easy to manipulate (play/pause/stop/etc.) the video via the JS DOM
• one drawback: drama over codecs such as MPEG 4 / H.264, Ogg Theora / VP3, WebM, AVI

CSS 3 new features

• new selectors: nth-child, inline-block, :not, +
• ability to embed fonts in a page (yay)
• easy built-in support for multi-column layouts
  
• transparency/opacity, color gradients, shadows
• rounded corners/borders
• animations and transitions (like Scriptaculous)
• affine transformations (scaling, rotation, perspective)

JavaScript DOM new features

• DOM selectors: getElementsByClassName, querySelectorAll (like Prototype's $$)
• graphics 'context' object to draw on the HTML Canvas (like Graphics g in Java)
• in-browser storage (window.localStorage) and databases (window.openDatabase)
• web workers (threads) and web sockets (2-way communication channels to server)
• drag-and-drop of elements (like Scriptaculous)
• standardizes features that were already in browsers but were non-standard (e.g. innerHTML)

JavaScript (ECMAScript) 5 features (1, 2)

• "strict mode" with more error checking to avoid bad constructs (JSLint)
• object properties with easy getter and setter methods (better than public fields)
• library support for the JSON data format (JSON.parse)
• fixed for-each loop (yessssss)
• objects: getPrototypeOf, create, defineProperty, seal, freeze, keys
• arrays: indexOf, lastIndexOf, every, some, map, filter, reduce
• strings: trim, toJSON; better Unicode (internationalization) support
• function binding (attaching a function to an object and calling it on that object)

Browser support (1, 2, 3, 4)

• Chrome 6 / Safari 5: almost all features (except some of Forms 2.0)
  • for some CSS3 props, must use temporary names (e.g. -webkit-border-radius)
• Firefox 4: supports many features (not most of Forms 2.0; not some video codecs; no local databases; no CSS animations)
  • for some CSS3 props, must use temporary names (-moz-border-radius)
• Opera 10: good; many features supported, almost as much as Chrome/FF
• IE 9: pretty crappy. Some video support; pseudo-canvas through Explorercanvas library; embedding fonts; drag-and-drop
  • ongoing drama with video tag / codecs
• HTML 5 Readiness, caniuse.com