Video, Slides, and Links
- Recorded session: Watch here
- Slides: Download here
- Source Code: Download here (http://bit.ly/H5pack)
- Live Demo: Try here (http://bit.ly/h5demos)
Covered in the session…
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.
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.
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”.
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.
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 (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.
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.
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 ).
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().
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!