HTML5 Multimedia Development Cookbook

HTML5 Multimedia Development Cookbook will show you exactly how to use the latest
front-end web technologies like a pro. You’ll learn how HTML5 is a quantum leap
difference from all previous versions and why it matters. Whether you’re a seasoned pro
or a total newbie, this book gives you the roadmap to what’s next.

Starting with an overview of what’s new in HTML5, we quickly move on to practical
examples. From there, we continue our exploration, all the way to the most cutting-edge
experiments. There’s much to know about the new HTML5 specification. This book
examines spec excerpts and relates them to examples currently in use. Woven with a rich
tapestry of theory, practicality, code samples, screenshots, business wisdom, and links to
additional resources, this book will have eager developers coming back to it again and
again. HTML5 Multimedia Development Cookbook is the essential guide to the latest
front-end web development technologies.

What This Book Covers

In Chapter 1, Structuring for Rich Media Applications, we’ll begin by examining
HTML5′s state of readiness by analyzing browser support. Then we’ll lay the groundwork
for how to use HTML5′s new elements successfully.

Chapter 2, Supporting the Content, makes us rethink the approach the developers used to
create generic containers to house various types of content.

Chapter 3, Styling with CSS, demonstrates how to use CSS3 to support HTML5. We’ll
also look at styling in modern vs. legacy browsers and what to expect.

Chapter 4, Creating Accessible Experiences, is not a typical regurgitation of Section 508.
Instead, we’ll employ some of the freshest technologies to support our online experiences.

Chapter 5, Learning to Love Forms, we’ll closely examine the new HTML5 input types.
Also included is an analysis of which browsers support each new type.

Chapter 6, Developing Rich Media Applications Using Canvas, is the most forwardthinking
chapter of the entire book. The discussion will center on how to develop for this
new type of interactivity and includes some surprising browser support statistics.

Chapter 7, Interactivity using JavaScript, is jam packed with recipes to extend the new
HTML5 audio and video elements. Roll up your sleeves for this one!

Chapter 8, Embracing Audio and Video, we dig into the core HTML audio and video
experiences. We will construct our own player while still supporting accessibility.

Chapter 9, Data Storage, takes a detailed look at a unique aspect of HTML5 and how to
wield it. Recipes include working with JSON, SQL, and GeoLocation.

Supporting the Content
In this chapter, we will cover:

  • Structuring a blog article
  • Highlighting text using the mark element
  • Using the time element
  • Specifying the pubdate of an article
  • Displaying comment blocks using the article element
  • Adding fonts dynamically with @font-face
  • Adding drop shadow effect to fonts
  • Applying gradient effects to fonts
  • Annotating visual elements using the figure tag

Introduction

“On the web, a man should not be judged by the color of his skin but by the content
of his content.” – Internet meme

One of the most significant differences between HTML5 and all previous versions of HTML
is that before we built generic <div>s and other such generic containers without much
knowledge of what content would go in them. With the advent of HTML5, that comes to an end.
To be correct according to the specification semantically, we need to know what the content
is so we can wrap it with the most appropriate new element tag. While this may mean we
developers have to think differently, a new challenge is exactly why we’re here. In this chapter
we’ll look at some examples of how to do just that using several of HTML5′s new elements.

“In case of confl ict, consider users over authors over implementers over specifiers
over theoretical purity.” – Priority of Constituencies

Throughout this chapter, we’ll show you how to use the new <article> element to mark up
both blog posts and comments, add a meaningful publication date to an <article>, use
the new <mark> element to highlight text, and how to note visual elements using the new
<figure> element. We’ll then turn our attention to some new methods of styling text with
font replacement techniques, as well as adding drop shadows and gradients to our text.

Structuring a blog article

“The <article> element represents a self-contained composition in a document,
page, application, or site and that is, in principle, independently distributable or
reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper
article, a blog entry, a user-submitted comment, an interactive widget or gadget,
or any other independent item of content.” – WHATWG’s HTML5 Draft Standard -

http://whatwg.org/html5

Getting ready

Blog entries are perfect candidates for the new <article> element, which is designed for
syndicated content.

For this recipe, let’s start by identifying the major elements of a blog <article>: There’s
usually a headline in the form of a heading tag, the blog entry itself consisting of several
paragraphs and perhaps one or more images, and some information that usually includes the
author’s name and other related metadata. Notice this is all self-contained related content.

How to do it…

We’re going to continue using the new HTML5 <header> and <footer> elements. The
headline, entry and meta-information should be wrapped in their own unique tags, like <h2>,
multiple <p>s and the new <footer>.

Let’s start with a foundation very similar to what we used in the last chapter, and add our new
<article> element twice:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Blog Title</title> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>[endif]--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <article> <header> <h2>Headline</h2> </header> <p>First paragraph</p> <p>Second paragraph</p> <footer>Meta information.</footer> </article> <article> <header> <h2>Headline</h2> </header> <p>First paragraph</p> <p>Second paragraph</p> <footer>Meta information.</footer> </article> </body> </html> 

Put your code on a diet?

Ready for a shocker? Want to have your mind blown? The <html> and <head> and <body>
tags (as well as their closing tags) are now optional in the HTML5 specification. Sure, you
could leave them in there, and your pages will validate just fine, but why should we? If remove
them from the previous code, we are left with the spartan:

 <!DOCTYPE html> <meta charset="UTF-8"> <title>Blog Title</title> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>[endif]--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <article> <header> <h2>Headline</h2> </header> <p>First paragraph</p> <p>Second paragraph</p> <footer>Meta information.</footer> </article> <article> <header> <h2>Headline</h2> </header> <p>First paragraph</p> <p>Second paragraph</p> <footer>Meta information.</footer> </article> 

Don’t believe me? Run that code through the World Wide Web Consortium’s validator at:
http://validator.w3.org, and you’ll see it displays correctly in the browser.

Well, not so fast buster. The problem is that removing those elements breaks our code
for screen readers. Uh oh. Strike one. Also, removing the <body> tag breaks our new
HTML5-enabling JavaScript for Internet Explorer. Strike two. And guess what? You can see it
coming, can’t you? Yes, removing the <html> tag removes the language of the page. There it
is: Strike three.

So let’s add those elements back in, shall we?

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Blog Title</title> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>[endif]--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <article> <header> <h2>Headline</h2> </header> <p>First paragraph</p> <p>Second paragraph</p> <footer>Meta information.</footer> </article> <article> <header> <h2>Headline</h2> </header> <p>First paragraph</p> <p>Second paragraph</p> <footer>Meta information.</footer> </article> </body> </html> 

There, that’s better.

How it works…

Remember, the new <article> element is a collection of related information intended for
syndication via RSS or another means.

There’s more…

Richer, more meaningful semantics is perhaps the most significant goal for HTML5. It’s better
for machines, better for authors, and most importantly, better for our audiences.

Validation as an aid, not a crutch

As we saw previously, removing the <html> and <head> and <body> tags render a still valid
page. So that begs the question of how valid validators are. Unlike the XML world, HTML5 can
use incorrect syntax and still render just fine.

The author makes every effort to validate his code whenever possible. It’s not necessary
to be slavish to the validator, but it’s always a good quality control check. And the closer you
get to valid code, the better chance browsers will display your work in as consistent a manner
as possible.

Eric Meyer’s funny

The author loves how CSS guru Eric Meyer thinks about validators:

Where to find validators

You can make good use of code validators at:

  • http://validator.nu
  • http://validator.w3.org

See also

Kristina Halvorson’s book “Content Strategy For The Web” (http://contentstrategy.
com) was an instant classic from the time of its release. In it, Halvorson, CEO of Minneapolisbased
company Brain Traffic, clearly defines the process of how to create and deliver useful
and usable content for online audiences.

Comments

comments

Pages: 1 2 3 4

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*