The HTML5 Herald

Produced with That Good ol' Timey HTML5 & CSS3

Vol. MMXI

Video is the final frontier, and now we have conquered it!

I haven't bought many books over the last 10 or 12 years. I've found that there are more free, current articles and tutorials on any subject I'm interested in than I can read. For the most part, books on technical subjects tend towards being out-of-date before they even reach the publisher.

One of the few books I have bought is SitePoint's HTML5 & CSS3 for the Real World. At the rate that web standards and design practices develop, it's not only current now but I expect it will remain so for several years to come.

The book itself is a discussion of the new features of HTML5 and CSS3, with an accompanying demo web site to illustrate them.

A zip archive with the whole demo "site" can be downloaded from SitePoint.

SitePoint has been kind enough to give me permission to document my experience in working through this book and adapting its demo site to MODx.

I've decided to use MODx Revolution for this process, so I've installed the latest (at this time) nightly build of Revo 2.2, 01-19-12. Since templates work the same way for Evo and for Revo, the tutorial will work equally for both systems.

To support the project I've installed a few packages.

  1. Wayfinder - the ubiquitous dynamic menu generating snippet.
  2. Articles - a wonderful new blogging tool utilizing Revo 2.2's Custom Resource Classes.
  3. elRTE - a nice jQuery rich-text editor and accompanying file browser and manager.

I'll be using duplicates of the default Articles templates, with only minor modifications for the main menu, for the chapters, although I'm not at all fond of grid-based templates. This home page and the contact form page will be using the book's demo template as it gets developed.

With all of the necessary elements (and resources!) in place, it's time to get started. For the purposes of this documentation, I'll skip the first chapter, which discusses the background of HTML5 and CSS3, and get right into the action starting with Chapter 2.

Text Shadow is the New Black

How do we do it?

Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.

Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit.

Wai-Aria? HAHA!

Form Accessibility

WAI-ARIA Cat

mouse treat mouse treat mouse treat

Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum.

Nam vestibulum, arcu sodales feugiat.

Modernizr Times

A New Era

Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum.

Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit.

CSS Transitions - The State of Play

The future?

Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.

Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum.

Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.

Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at. vestibulum. Nulla at.

Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.

Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at. vestibulum. Nulla at.