Book Image

HTML5 Multimedia Development Cookbook

Book Image

HTML5 Multimedia Development Cookbook

Overview of this book

HTML5 is the most significant new advancement the web has seen in many years. HTML5 adds many new features including the video, audio, and canvas elements, as well as the integration of SVG. This cookbook is packed full of recipes that will help you harness HTML5’s next generation multimedia features. HTML5 is the future.Whether you’re a seasoned pro or a total newbie, this book gives you the recipes that will serve as your practical guide to creating semantically rich websites and apps using HTML5. Get ready to perform a quantum leap harnessing HTML5 to create powerful, real world applications. Many of the new key features of HTML5 are covered, with self-contained practical recipes for each topic. Forget hello world. These are practical recipes you can utilize straight away to create immersive, interactive multimedia applications. Create a stylish promo page in HTML5. Use SVG to replace text dynamically. Use CSS3 to control background size and appearance. Use the Canvas to process images dynamically. Apply custom playback controls to your video.
Table of Contents (16 chapters)
HTML5 Multimedia Development Cookbook
Credits
Foreword
About the Authors
About the Reviewers
www.PacktPub.com
Preface

Applying the outline algorithm


Luckily for us, HTML5 now has a method of assembling an outline of our pages in browsers, so search engines as well as accessibility technologies can make better sense of them. We're going to make use of the HTML5 Outliner at: http://gsnedders.html5.org/outliner

Getting ready

To use the HTML5 Outliner, we can use HTML stored on our local computer or code visible via a URL. Make sure to save the code we've been creating locally or upload it to a publicly accessible web server for this step.

How to do it...

Let's make sure to save this document either on a local hard drive or remote server. We'll visit http://gsnedders.html5.org/outliner to create our outline.

Using our previous code example, we can generate the following code outline:

  1. 1. Roxane is my name.

  2. 2. Untitled Section

  3. 3. About

  4. 4. Work

  5. 5. Contact

  6. 6. What I'm Reading

  7. 7. Elsewhere

  8. 8. All rights reserved. Copyright Roxane.

How it works...

"It is defined in terms of a walk over the nodes of a DOM tree, in tree order, with each node being visited when it is entered and when it is exited during the walk." - WHATWG

There's more...

It's assumed that content following any heading is related to that heading. Therefore we can use many of the new HTML5 tags like <section> to explicitly demonstrate the beginning and ending of related content.

Are you sure?

If the HTML5 Outliner tool displays messages like "Untitled Section" you should rethink how you're using each of your tags and ensure your approach matches the intent of the specification.

An exception

"Untitled Section" messages should be treated as warnings instead of errors. While <section> and other new HTML5 tags require a heading tag, it's perfectly valid not to have one for <nav> areas.

Remember accessibility

The outline created ensures us that the code we've created is compliant with the W3C's standards for markup, as well as advanced technologies like WAI-ARIA for accessibility requirements.

Note

Good accessibility design is good web design.

See also

The http://html5doctor.com site is a terrific interactive reference written by seven thought leaders including Rich Clark, Bruce Lawson, Jack Osborne, Mike Robinson, Remy Sharp, Tom Leadbetter, and Oli Studholme.