<!--#include virtual="commontop.html" -->
<title>Web Programming Step by Step, Lecture 24a: The Future: HTML 5, CSS 3, ECMAScript 5</title>
</head>
<body>
<div class="layout">
<div id="controls"><!-- DO NOT EDIT --></div>
<div id="currentSlide"><!-- DO NOT EDIT --></div>
<div id="header"></div>
<div id="footer">
<h1><em>Web Programming Step by Step</em>, Lecture 24a</h1>
<h2>The Future: HTML 5, CSS 3, ECMAScript 5</h2>
</div>
</div>
<div class="presentation">
<div class="slide">
<h1><a href="http://www.webstepbook.com/">Web Programming Step by Step</a></h1>
<h3>Lecture 24a <br /> The Future: HTML 5, CSS 3, ECMAScript 5</h3>
<!--<h4>Reading: 11.4 - 11.5; Appendix A</h4>-->
<h4>References:
<a class="popup" href="http://html5rocks.com/">html5rocks.com</a>,
<a class="popup" href="http://www.alistapart.com/articles/previewofhtml5">alistapart.com</a>,
<a class="popup" href="http://www.w3schools.com/html5/html5_reference.asp">w3schools</a>,
<a class="popup" href="http://diveintohtml5.org/">Dive Into HTML 5</a>,
<a class="popup" href="http://dev.w3.org/html5/spec/Overview.html">W3C Draft HTML 5 Spec</a>,
<a class="popup" href="http://www.chromeexperiments.com/">Chrome Experiments</a>
</h4>
<p class="license">
Except where otherwise noted, the contents of this presentation are Copyright 2010 Marty Stepp and Jessica Miller.
</p>
<div class="w3c">
<a href="http://validator.w3.org/check/referer"><img src="images/w3c-xhtml11.png" alt="Valid XHTML 1.1" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="images/w3c-css.png" alt="Valid CSS!" /></a>
</div>
</div>
<div class="slide">
<h1>What is HTML 5?</h1>
<ul>
<li>
a new W3C standard version of the HTML markup language
<img src="images/w3c-logo.png" alt="w3c" style="height: 30px" />
</li>
<li>
successor to HTML 4.01 and XHTML 1.1
</li>
<li>
balance between too-loose-ness of HTML 4 and too-strict-ness of XHTML
</li>
<li>
reduces the browser's need for plugins to display content, e.g. multimedia
</li>
<li>
make web content more rich, semantically meaningful, descriptive, accessible
</li>
<li>
more easily enable the web as an application platform (Web 2.0)
</li>
</ul>
</div>
<div class="slide">
<h1>What's <a class="popup" href="http://slides.html5rocks.com/#slide16">new</a> in HTML 5?</h1>
<ul>
<li>
semantic <a class="popup" href="http://www.w3schools.com/html5/html5_reference.asp"><strong>tags</strong></a>: <code>nav</code>, <code>aside</code>, <code>header</code>, <code>footer</code>, <code>section</code>, <code>article</code>
</li>
<li>
<img src="images/input-type-datetime.png" alt="date/time" style="float: right; margin-left: 1em" />
<strong>Forms</strong> 2.0: sliders, search bars, color/number/email/url/date/time, placeholders, ... <br />
<img src="images/input-type-range.png" alt="slider" />
<img src="images/input-type-search.png" alt="search" style="margin-left: 50px" />
<img src="images/input-type-number.png" alt="number" style="margin-left: 50px" />
</li>
<li>
<strong><code>audio</code></strong> and <strong><code>video</code></strong> tags for embedding multimedia <br />
<img src="images/html5-video.jpg" alt="video" style="width: 200px" />
</li>
<li>
<strong><code>canvas</code></strong> tag for drawing 2D shapes in HTML/JS (like <code>DrawingPanel</code>)
(ref
<a class="popup" href="http://thinkvitamin.com/dev/html-5-dev/how-to-draw-with-html-5-canvas/">1</a>,
<a class="popup" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">2</a>,
<a class="popup" href="https://developer.mozilla.org/en/canvas_tutorial">3</a>) <br />
<img src="images/html5-canvas.png" alt="canvas" />
</li>
</ul>
</div>
<div class="slide">
<h1>What's new, continued</h1>
<ul>
<li>
<a class="popup" href="http://en.wikipedia.org/wiki/Semantic_Web">semantic web</a> / <a class="popup" href="http://diveintohtml5.org/extensibility.html">microdata</a> <strong>attributes</strong>: <code>rel="..."</code>, <code>itemscope</code>, <code>itemtype</code>, <code>itemprop</code> <br />
<img src="images/microdata.png" alt="microdata" />
</li>
<li>
<img src="images/svg-lion.gif" alt="SVG" style="float: right; margin-left: 1em" />
<strong>accessibility</strong> features ("<a href="http://standardssuck.org/aria-in-html5">ARIA</a>")
</li>
<li>
embedding of rich XML-like formats such as <a href="http://en.wikipedia.org/wiki/Svg"><strong>SVG</strong></a> vector graphics
</li>
<li>
other stuff: offline apps, <a class="popup" href="http://diveintohtml5.org/geolocation.html">geolocation</a>, cross-document messaging, MIME type registration, history management, ...
</li>
</ul>
</div>
<div class="slide">
<h1>The old way</h1>
<div class="figure">
<img src="images/html5-bad-tags.gif" alt="bad tags" />
</div>
<ul>
<li>
web pages often have to give semantic meaning to content through <code>class</code> and <code>id</code> attributes, rather than through the tag elements themselves
</li>
</ul>
</div>
<div class="slide">
<h1>HTML 5 semantically meaningful tags</h1>
<div class="figure">
<img src="images/html5-good-tags.gif" alt="good tags" />
</div>
</div>
<div class="slide">
<h1>HTML 4 / XHTML embedding a video</h1>
<pre class="examplecode html">
<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>
</pre>
<ul>
<li>
Yuck!
</li>
</ul>
</div>
<div class="slide">
<h1>HTML 5 embedding a <a class="popup" href="http://diveintohtml5.org/video.html">video</a></h1>
<pre class="examplecode html">
<video src="video.ogv" width="425" height="350"></video>
</pre>
<ul>
<li>
yes, please
</li>
<li>
it'll also be easy to manipulate (play/pause/stop/etc.) the video via the JS DOM
</li>
<li>
one drawback: drama over <a class="popup" href="">codecs</a> such as MPEG 4 / H.264, Ogg Theora / VP3, WebM, AVI
</li>
</ul>
</div>
<div class="slide">
<h1>CSS 3 <a class="popup" href="http://slides.html5rocks.com/#slide29">new features</a></h1>
<ul>
<li>
new <strong>selectors</strong>: <code>nth-child</code>, <code>inline-block</code>, <code>:not</code>, <code>+</code>
</li>
<li>
ability to <strong>embed fonts</strong> in a page <em>(yay)</em>
</li>
<li>
easy built-in support for <strong>multi-column layouts</strong> <br />
<img src="images/css3-columns.png" alt="multi-column layout" />
</li>
<li>
transparency/<strong>opacity</strong>, color <strong>gradients</strong>, <strong>shadows</strong>
<img src="images/css3-gradient.jpg" alt="color gradient" />
</li>
<li>
<strong>rounded corners</strong>/borders
<img src="images/css3-border-radius.png" alt="border-radius" />
</li>
<li>
<strong>animations</strong> and transitions (like Scriptaculous)
</li>
<li>
affine <strong>transformations</strong> (scaling, rotation, perspective)
<img src="images/css3-transformations.png" alt="transformations" />
</li>
</ul>
</div>
<div class="slide">
<h1>JavaScript DOM <a class="popup" href="http://slides.html5rocks.com/#slide1">new features</a></h1>
<ul>
<li>
DOM <strong>selectors</strong>: <code>getElementsByClassName</code>, <code>querySelectorAll</code> (like Prototype's <code>$$</code>)
</li>
<li>
graphics 'context' object to draw on the HTML <strong>Canvas</strong> (like <code>Graphics g</code> in Java)
</li>
<li>
<a class="popup" href="http://diveintohtml5.org/storage.html"><strong>in-browser storage</strong></a> (<code>window.localStorage</code>) and <strong>databases</strong> (<code>window.openDatabase</code>)
</li>
<li>
<strong>web workers</strong> (threads) and <strong>web sockets</strong> (2-way communication channels to server)
</li>
<li>
<strong>drag-and-drop</strong> of elements (like Scriptaculous)
</li>
<li>
standardizes features that were already in browsers but were non-standard (e.g. <code>innerHTML</code>)
</li>
</ul>
</div>
<div class="slide">
<h1>
JavaScript (ECMAScript) 5 features
(<a class="popup" href="http://ejohn.org/blog/ecmascript-5-objects-and-properties/">1</a>,
<a class="popup" href="http://ajaxian.com/archives/ecmascript-5-changes-to-javascript">2</a>)
</h1>
<ul>
<li>
<strong>"strict mode"</strong> with more error checking to avoid bad constructs (JSLint)
</li>
<li>
object <strong>properties</strong> with easy getter and setter methods (better than public fields)
</li>
<li>
library support for the <a href="http://en.wikipedia.org/wiki/Json"><strong>JSON</strong></a> data format (<code>JSON.parse</code>)
</li>
<li>
fixed <strong>for-each</strong> loop <em>(yessssss)</em>
</li>
<li>
objects: <code>getPrototypeOf</code>, <code>create</code>, <code>defineProperty</code>, <code>seal</code>, <code>freeze</code>, <code>keys</code>
</li>
<li>
<strong>arrays</strong>: <code>indexOf</code>, <code>lastIndexOf</code>, <code>every</code>, <code>some</code>, <code>map</code>, <code>filter</code>, <code>reduce</code>
</li>
<li>
<strong>strings</strong>: <code>trim</code>, <code>toJSON</code>; better <strong>Unicode</strong> (internationalization) support
</li>
<li>
function <strong>binding</strong> (attaching a function to an object and calling it on that object)
</li>
</ul>
</div>
<div class="slide">
<h1>
Browser support
(<a class="popup" href="http://findmebyip.com/litmus#target-selector">1</a>,
<a class="popup" href="http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/">2</a>,
<a class="popup" href="http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29">3</a>,
<a class="popup" href="http://www.html5test.com/">4</a>)
</h1>
<ul>
<li>
<a class="popup" href="http://www.chromeexperiments.com/"><strong>Chrome 6</strong></a> / <strong>Safari 5</strong>: almost all features (except some of Forms 2.0)
<ul>
<li>
for some CSS3 props, must use temporary names (e.g. <code>-webkit-border-radius</code>)
</li>
</ul>
</li>
<li>
<strong>Firefox 4</strong>: supports many features (not most of Forms 2.0; not some video codecs; no local databases; no CSS animations)
<ul>
<li>
for some CSS3 props, must use temporary names (<code>-moz-border-radius</code>)
</li>
</ul>
</li>
<li>
<strong>Opera 10</strong>: good; many features supported, almost as much as Chrome/FF
</li>
<li>
<strong>IE 9</strong>: pretty crappy. Some video support; pseudo-canvas through <a class="popup" href="http://code.google.com/p/explorercanvas/">Explorercanvas</a> library; embedding fonts; drag-and-drop
<ul>
<li>
ongoing drama with video tag / codecs
</li>
</ul>
</li>
<li>
<a class="popup" href="http://html5readiness.com/">HTML 5 Readiness</a>,
<a class="popup" href="http://caniuse.com/">caniuse.com</a>
</li>
</ul>
</div>
</div>
<!--
drama about video tag codecs
-->
<!--#include virtual="commonbottom.html" -->