Deep Dive into “HTML5”
How do I develop using Canvas, SVG, CSS3? What’s new in JavaScript? In this deep dive you will learn how to use HTML5 and how new web standards help solve existing challenges on the web. Expect a lot of code, demos, and best practices!
Video, Slides, and Links
- Recorded session: Watch here
- Slides: Download here
- Source Code: Download here (https://bit.ly/H5pack)
- Live Demo: Try here (https://bit.ly/h5demos)
- Links:
- W3C HTML5 Specification
- Modernizr
- AI2Canvas Exporter (by MIX Online Team)
Covered in the session…
HTML5 Markup
How do you start an HTML5 page? Actually HTML5 is evolutionary, not revolutionary. Any page built yesterday with HTML 4.1 will be an HTML5 page automatically tomorrow. However, the HTML5 specification provides a few optional changes that can simplify your markup. For example, the following code is what I use as a template for my new pages.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
HTML5 also provides a set of new tags (for example, <article>, <nav>, and <figcaption>) that adds more semantic meaning to the content, and helps accessibility tools (such as screen readers) and search engines to better understand the page.
<video>
The <video> tag is probably one of the most interesting (and most discussed) new tags in the HTML5 markup language. It allows you to embed a video on the page without using a plug-in. The samples I provide explain how to use its properties (for example, poster to define the initial frame, or controls to show the control buttons, or preload to set the pre-fetching rules). As we’ve seen, the current specification doesn’t allow the player to go full-screen. If you need this scenario, you can change the size of the control dynamically and bring it on top of the page using the zIndex. Through its events loadedmetadata, canplay, and timeupdate you can monitor when the video is ready to play and track its progress. Lastly, the canPlayType property allows you to test whether the UA supports a specific codec or container; remember, the return values are either “”, “maybe”, or “probably”. 
<canvas>
Drawing on a page has never been so easy. You have a brush that you can move across the screen to draw images – that’s all you need in order to create amazing drawings or animations! If you are drawing an image, remember to wait for it to be loaded. When you develop an animation, you will need to decide the best strategy to serve your purpose. Use time-based animation if you need a precise, smooth, and predictable result. Use frame-based animation if you need to develop quickly and are comfortable with losing some cycles (timer resolution is not perfect!).
With a little bit of creativity, you can achieve quite interesting scenarios – for instance, drawing a video on a canvas and dynamically appending its mirrored shadow.
ctx.translate(0, 200);
ctx.scale(1, -1); // Flip video
// Prepare gradient
var gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, "rgba(255,255,255,255)");
gradient.addColorStop(1, "rgba(255,255,255,0)");
ctx.fillStyle = gradient;
myVideo.addEventListener('canplay', function () {
setInterval(function () {
ctx.drawImage(myVideo, 0, 0, 300, 200); // Draw video frame
ctx.fillRect(0, 0, 640, 360); // Draw fading
}, 60);
}, false);
If you are looking for a tool to design on canvas or to design prototype animations, check out the AI2Canvas Exporter plug-in built by our own Mike Swanson. You can achieve great results with it – for instance, take a look at what Joshua Davis did!
In this group of demos, you will also find a little game I built on the plane while I was flying to Berlin. I’ll get back to this in a future post.
SVG
SVG (Scalable Vector Graphics) adds even more capabilities to what you can achieve with the Canvas. This time you are dealing with objects, which have their own properties, events, and programmability. You can embed your SVG snippets inline in an HTML page (did you know Internet Explorer 9 is the first browser to support this?), or embed in an XHTML document, as well as standalone files or files that are referenced inside an <img> tag.
SVG is intrinsically designed to work with the rest of the standards. You can program it using JavaScript and the APIs that you already know; and you can style it using CSS!
<body>
<svg xmlns="https://www.w3.org/2000/svg" width="600" height="300">
<rect width="200" height="300" fill="#009246" />
<rect width="200" height="300" x="200" fill="#fff" />
<rect width="200" height="300" x="400" fill="#ce2b37" />
</svg>
</body>
The last demo (Gradients) is a prototype of SVG+CSS+HTML5+JavaScript in action. Using a few tricks, you can use SVG to build a color gradient dynamically and use CSS properties to apply it to any HTML element on the page. I had some interesting conversations with Jonathan and Robert about this approach – I think it might be interesting to explore it further. eCSStender from Aaron Gustafson seems to be the natural evolution of the prototype; please ping me if you are interested in further exploring this approach with me!
CSS3
What about news for web designers? CSS3 brings a lot of new and interesting modules to the table. Of all of them, text/border shadows, colors (rgba, opacity), multiple backgrounds, border radius, media queries, and WOFF are the ones I believe to be the most stable today.
<style type="text/css" media="screen">
@font-face
{
font-family: '3DumbRegular';
src: local('☺'), url('WOFF/3Dumb-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.fontface
{
font: 60px/68px '3DumbRegular' , Arial, sans-serif;
letter-spacing: 0;
}
</style>
Run the demo, “1. Media Queries” to understand how CSS allows you to pick specific rules depending on the screen resolution. Plus, you can have some fun with my hand (seriously – that’s my hand, copyright at Giorgio Sardo 
).
ECMA
Last but not least, JavaScript has some very neat new features for developers! For example, it includes a native JSON object that allows you to accomplish serialization/deserialization operations very quickly, that in the past you probably did with external libraries.
var result;
var myArray = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
//NEW! forEach
var multiply = function (value, index, array) { array[index] = value * this };
/* No Return! */ myArray.forEach(multiply, 3);
//result= 3, 6, 9, 12, 15, 18, 21, 24, 27, 30
There are a lot of new Array methods that simplify common tasks such as looping through the Array and performing a particular operation. I personally love the ability to do “kind of lambda expression” using forEach().
The object model has also evolved. With the new syntax, Object.create can more easily define new and cleaner prototypes.
Lastly, you finally have access to some helper functions, such as Date.Parse() and String.Trim().
Conclusion
This is not an extensive coverage of all the new features of HTML5 and related web standards. There is much more in the pipeline (Robert talked more about this)! What I covered in this session is probably the most mature content in the specification. It is (or soon will be) available across all the major browsers. It’s interoperable and it doesn’t apply only to Internet Explorer 9…but to any browser. In other words, it’s ready! 
You can download all the source code here. Please feel free to contact me if you have any feedback or questions – I’m sure somebody out there knows how to improve this!
Comments
Anonymous
November 22, 2010
Hi Giorgo, Thanks a lot for your entertaining presentation at the TechEd! I'm definately going to play around with the code samples. Kind regards, WouterAnonymous
November 24, 2010
Good samples for starting with Html5Anonymous
November 27, 2010
Amazing session and funny demos! It's a good video to understand the capabilities of html5 and ie9. MarcoAnonymous
December 09, 2010
Hi Giorgo, Will Html5 be supported as a HTA (Html Application) Best rgds, Wong