diff --git a/about.html b/about.html index 8636341..fc64e61 100644 --- a/about.html +++ b/about.html @@ -13,7 +13,7 @@ -

You are here: Home ” Dive Into HTML5 ” +

You are here: Home Dive Into HTML5

About The Book

diff --git a/canvas.html b/canvas.html index 2f23b87..3f2fbd6 100644 --- a/canvas.html +++ b/canvas.html @@ -9,10 +9,10 @@ -

You are here: Home ” Dive Into HTML5 ” +

You are here: Home Dive Into HTML5


Let’s Call It A
Draw(ing Surface)

  -

❧ +

Diving In

@@ -31,7 +31,7 @@

Diving In

So what does a canvas look like? Nothing, really. A <canvas> element has no content and no border of its own.

-

 ↜ Invisible canvas +

Invisible canvas

The markup looks like this: @@ -40,7 +40,7 @@

Diving In

Let’s add a dotted border so we can see what we’re dealing with.

-

 ↜ Canvas with border +

Canvas with border

You can have more than one <canvas> element on the same page. Each canvas will show up in the DOM, and each canvas maintains its own state. If you give each canvas an id attribute, you can access them just like any other element. @@ -52,7 +52,7 @@

Diving In

var a_canvas = document.getElementById("a");
-

❧ +

Simple Shapes

@@ -68,7 +68,7 @@

Simple Shapes

Every canvas starts out blank. That’s boring! Let’s draw something.

-

 ⇜ Click to draw on this canvas

+

Click to draw on this canvas

The onclick handler called this function: @@ -80,7 +80,7 @@

Simple Shapes

The 1st line of the function is nothing special; it just finds the <canvas> element in the DOM. -

And then there’s this ⇝ 

+

And then there’s this  

function draw_b() {
   var b_canvas = document.getElementById("b");
   var b_context = b_canvas.getContext("2d");
@@ -92,7 +92,7 @@ 
Simple Shapes

 
Every canvas has a drawing context, which is where all the fun stuff happens. Once you’ve found a <canvas> element in the DOM (by using document.getElementById() or any other method you like), you call its getContext() method. You must pass the string "2d" to the getContext() method.
 
 

-
☞Q: Is there a 3-D canvas?

+
Q: Is there a 3-D canvas?

 A: Not yet. Individual vendors have experimented with their own three-dimensional canvas APIs, but none of them have been standardized. The HTML5 specification notes, “A future version of this specification will probably define a 3d context.”
 

 
@@ -110,7 +110,7 @@ 
Simple Shapes

 
Ask Professor Markup

 

 

-
☞Q: Can I “reset” a canvas?

+
Q: Can I “reset” a canvas?

 A: Yes. Setting the width or height of a <canvas> element will erase its contents and reset all the properties of its drawing context to their default values. You don’t even need to change the width; you can simply set it to its current value, like this:
 
var b_canvas = document.getElementById("b");
 b_canvas.width = b_canvas.width;

@@ -119,20 +119,20 @@ 
Ask Professor Markup

 

 
 
Getting back to that code sample in the previous example…
-
Draw a rectangle ⇝ 

+
Draw a rectangle 

 
var b_canvas = document.getElementById("b");
 var b_context = b_canvas.getContext("2d");
 b_context.fillRect(50, 25, 150, 100);

 
 
Calling the fillRect() method draws the rectangle and fills it with the current fill style, which is black until you change it. The rectangle is bounded by its upper-left corner (50, 25), its width (150), and its height (100). To get a better picture of how that works, let’s look at the canvas coordinate system.
 
-
❧
+

 
 
Canvas Coordinates

 
 
The canvas is a two-dimensional grid. The coordinate (0, 0) is at the upper-left corner of the canvas. Along the X-axis, values increase towards the right edge of the canvas. Along the Y-axis, values increase towards the bottom edge of the canvas.
 
-
Canvas coordinates diagram ↷

+
Canvas coordinates diagram 

 
 
 
That coordinate diagram was drawn with a <canvas> element. It comprises
@@ -162,7 +162,7 @@ 
Canvas Coordinates

 
 
Now we can start drawing lines.
 
-
❧
+

 
 
Paths

 
@@ -196,13 +196,13 @@ 
Paths

   context.moveTo(x, 0);
   context.lineTo(x, 375);
 }
-

 ⇜ Draw vertical lines

+

Draw vertical lines

for (var y = 0.5; y < 375; y += 10) {
   context.moveTo(0, y);
   context.lineTo(500, y);
 }
-

 ⇜ Draw horizontal lines

+

Draw horizontal lines

Those were all “pencil” methods. Nothing has actually been drawn on the canvas yet. We need an “ink” method to make it permanent. @@ -217,7 +217,7 @@

Paths

Ask Professor Markup

-

☞Q: Why did you start x and y at 0.5? Why not 0?
+

Q: Why did you start x and y at 0.5? Why not 0?
A: Imagine each pixel as a large square. The whole-number coordinates (0, 1, 2…) are the edges of the squares. If you draw a one-unit-wide line between whole-number coordinates, it will overlap opposite sides of the pixel square, and the resulting line will be drawn two pixels wide. To draw a line that is only one pixel wide, you need to shift the coordinates by 0.5 perpendicular to the line's direction.

For example, if you try to draw a line from (1, 0) to (1, 3), the browser will draw a line covering 0.5 screen pixels on either side of x=1. The screen can’t display half a pixel, so it expands the line to cover a total of two pixels:

A line from (1,0) to (1,3) is drawn 2 pixels wide @@ -230,7 +230,7 @@

Ask Professor Markup

Now let’s draw the horizontal arrow. All the lines and curves on a path are drawn in the same color (or gradient — yes, we’ll get to those soon). We want to draw the arrow in a different color ink — black instead of off-white — so we need to start a new path. -

A new path ↷

+

A new path 

context.beginPath();
 context.moveTo(0, 40);
 context.lineTo(240, 40);
@@ -249,7 +249,7 @@ 
Ask Professor Markup

 context.moveTo(65, 370);
 context.lineTo(60, 375);
 context.lineTo(55, 370);
-

 ↜ Not a new path

+

Not a new path

I said these arrows were going to be black, but the strokeStyle is still off-white. (The fillStyle and strokeStyle don’t get reset when you start a new path.) That’s OK, because we’ve just run a series of “pencil” methods. But before we draw it for real, in “ink,” we need to set the strokeStyle to black. Otherwise, these two arrows will be off-white, and we’ll hardly be able to see them! The following lines change the color to black and draw the lines on the canvas: @@ -260,7 +260,7 @@

Ask Professor Markup

-

❧ +

Text

@@ -298,20 +298,20 @@

Text

context.font = "bold 12px sans-serif";
 context.fillText("x", 248, 43);
 context.fillText("y", 58, 165);
-

 ↜ Change the font style

+

Change the font style

The fillText() method draws the actual text.

context.font = "bold 12px sans-serif";
 context.fillText("x", 248, 43);
 context.fillText("y", 58, 165);
-

 ⇜ Draw the text

+

Draw the text

Ask Professor Markup

-

☞Q: Can I use relative font sizes to draw text on a canvas?
+

Q: Can I use relative font sizes to draw text on a canvas?
A: Yes. Like every other HTML element on your page, the <canvas> element itself has a computed font size based on your page’s CSS rules. If you set the context.font property to a relative font size like 1.5em or 150%, your browser multiplies this by the computed font size of the <canvas> element itself.

@@ -336,13 +336,13 @@

Ask Professor Markup

context.fillRect(0, 0, 3, 3);
 context.fillRect(497, 372, 3, 3);
-

 ⇜ Draw two “dots”

+

Draw two “dots”

And that’s all she wrote! Here is the final product:

-

❧ +

Gradients

@@ -383,7 +383,7 @@

Gradients

Let’s make a linear gradient. Gradients can be any size, but I’ll make this gradient be 300 pixels wide, like the canvas. -

Create a gradient object ↷

+

Create a gradient object 

var my_gradient = context.createLinearGradient(0, 0, 300, 0);

Because the y values (the 2nd and 4th parameters) are both 0, this gradient will shade evenly from left to right. @@ -397,7 +397,7 @@

Gradients

Defining a gradient doesn’t draw anything on the canvas. It’s just an object tucked away in memory somewhere. To draw a gradient, you set your fillStyle to the gradient and draw a shape, like a rectangle or a line. -

Fill style is a gradient ↷

+

Fill style is a gradient 

context.fillStyle = my_gradient;
 context.fillRect(0, 0, 300, 225);
@@ -407,7 +407,7 @@

Gradients

Suppose you want a gradient that shades from top to bottom. When you create the gradient object, keep the x values (1st and 3rd parameters) constant, and make the y values (2nd and 4th parameters) range from 0 to the height of the canvas. -

x values are 0, y values vary ↷

+

x values are 0, y values vary 

var my_gradient = context.createLinearGradient(0, 0, 0, 225);
 my_gradient.addColorStop(0, "black");
 my_gradient.addColorStop(1, "white");
@@ -420,7 +420,7 @@ 
Gradients

 
 
You can also create gradients along a diagonal.
 
-
both x and y values vary ↷

+
both x and y values vary 

 
var my_gradient = context.createLinearGradient(0, 0, 300, 225);
 my_gradient.addColorStop(0, "black");
 my_gradient.addColorStop(1, "white");
@@ -431,7 +431,7 @@ 
Gradients

 
 
 
-
❧
+

 
 
Images

 
@@ -447,12 +447,12 @@ 
Images

 
Here is a cat:
 
 
sleeping cat
-
 ⇜ An <img> element

+
 An <img> element

 
 
Here is the same cat, drawn on a canvas:
 
 

-
A <canvas> element ⇝ 

+
A <canvas> element 

 
 

 
@@ -475,7 +475,7 @@ 
Images

 
To draw an image on a canvas, you need an image. The image can be an existing <img> element, or you can create an Image() object with JavaScript. Either way, you need to ensure that the image is fully loaded before you can draw it on the canvas.
 
 
If you’re using an existing <img> element, you can safely draw it on the canvas during the window.onload event.
-
↶ using an <img> element

+
 using an <img> element

 
<img id="cat" src="images/cat.png" alt="sleeping cat" width="177" height="113">
 <canvas id="e" width="177" height="113"></canvas>
 <script>
@@ -489,7 +489,7 @@ 
Images

 
 
If you’re creating the image object entirely in JavaScript, you can safely draw the image on the canvas during the Image.onload event.
 
-
using an Image() object ↷

+
using an Image() object 

 
<canvas id="e" width="177" height="113"></canvas>
 <script>
   var canvas = document.getElementById("e");
@@ -515,13 +515,13 @@ 
Images

   }
 };
 

-
 ⇜ Scale the image

+
 Scale the image

 
 
All this effort raises a legitimate question: why would you want to draw an image on a canvas in the first place? What does the extra complexity of image-on-a-canvas buy you over an <img> element and some CSS rules? Even the “multicat” effect could be replicated with 10 overlapping <img> elements.
 
 
The simple answer is, for the same reason you might want to draw text on a canvas. The canvas coordinates diagram included text, lines, and shapes; the text-on-a-canvas was just one part of a larger work. A more complex diagram could easily use drawImage() to include icons, sprites, or other graphics.
 
-
❧
+

 
 
What About IE?

 
@@ -562,7 +562,7 @@ 
What About IE?

 
 
The easiest solution to this is to defer all of your canvas-related manipulation until after the onload event fires. This may be a while — if your page has a lot of images or videos, they will delay the onload event — but it will give ExplorerCanvas time to work its magic.
 
-
❧
+

 
 
A Complete, Live Example

 
@@ -694,7 +694,7 @@ 
A Complete, Live Example

 
 
And that’s… well, that’s pretty much it. The rest of the program is game-specific logic — distinguishing between valid and invalid moves, keeping track of the number of moves, detecting whether the game is over. With 9 circles, a few straight lines, and 1 onclick handler, we’ve created an entire game in <canvas>. Huzzah!
 
-
❧
+

 
 
Further Reading

 
@@ -706,7 +706,7 @@ 
Further Reading

 
  • Internet Explorer 9 Guide for Developers: HTML5 canvas element
 
 
-
    ❧
+
    
 
 
    This has been “Let’s Call It A Draw(ing Surface).” The full table of contents has more if you’d like to keep reading.
 
diff --git a/detect.html b/detect.html
index 534a3ab..e976381 100644
--- a/detect.html
+++ b/detect.html
@@ -9,15 +9,15 @@
 
 
 
-
    You are here: Home ” Dive Into HTML5 ”
+
    You are here: Home  Dive Into HTML5 
 

    Detecting HTML5 Features
    
 
     
-
    ❧
+
    
 
    Diving In
    
 
 
    You may well ask: “How can I start using HTML5 if older browsers don’t support it?” But the question itself is misleading. HTML5 is not one big thing; it is a collection of individual features. So you can’t detect “HTML5 support,” because that doesn’t make any sense. But you can detect support for individual features, like canvas, video, or geolocation.
 
-
    ❧
+
    
 
 
    Detection Techniques
    
 
@@ -44,7 +44,7 @@ 
    Detection Techniques
    
 
    Example: testing which <input> types are supported
 
 
-
    ❧
+
    
 
 
    Modernizr, an HTML5 Detection Library
    
 
@@ -62,7 +62,7 @@ 
    Modernizr, an HTML5 Detection Library
    
 </body>
 </html>
 
    • 
-
     ↜ It goes to your <head>
+
     It goes to your <head>
 
 
    Modernizr runs automatically. There is no modernizr_init() function to call. When it runs, it creates a global object called Modernizr, that contains a set of Boolean properties for each feature it can detect. For example, if your browser supports the canvas API, the Modernizr.canvas property will be true. If your browser does not support the canvas API, the Modernizr.canvas property will be false.
 
@@ -72,7 +72,7 @@ 
    Modernizr, an HTML5 Detection Library
    
   // no native canvas support available :(
 }
    
 
-
    ❧
+
    
 
 
    Canvas
    
 
@@ -103,7 +103,7 @@ 
    Canvas
    
 
 
    Instead of writing this function yourself, you can use Modernizr to detect support for the canvas API.
 
-
    ↶ check for canvas support
+
     check for canvas support
 
    if (Modernizr.canvas) {
   // let's draw some shapes!
 } else {
@@ -112,7 +112,7 @@ 
    Canvas
    
 
 
    There is a separate test for the canvas text API, which I will demonstrate next.
 
-
    ❧
+
    
 
 
    Canvas Text
    
 
@@ -144,14 +144,14 @@ 
    Canvas Text
    
 
 
    Instead of writing this function yourself, you can use Modernizr to detect support for the canvas text API.
 
-
    ↶ check for canvas text support
+
     check for canvas text support
 
    if (Modernizr.canvastext) {
   // let's draw some text!
 } else {
   // no native canvas text support available :(
 }
    
 
-
    ❧
+
    
 
 
    Video
    
 
@@ -171,7 +171,7 @@ 
    Video
    
 
 
    Instead of writing this function yourself, you can use Modernizr to detect support for HTML5 video.
 
-
    ↶ check for HTML5 video support
+
     check for HTML5 video support
 
    if (Modernizr.video) {
   // let's play some video!
 } else {
@@ -183,7 +183,7 @@ 
    Video
    
 
 
    There is a separate test for detecting which video formats your browser can play, which I will demonstrate next.
 
-
    ❧
+
    
 
 
    Video Formats
    
 
@@ -241,7 +241,7 @@ 
    Video Formats
    
 
 
    Instead of writing this function yourself, you can use Modernizr (1.5 or later) to detect support for different HTML5 video formats.
 
-
    ↶ check for HTML5 video formats
+
     check for HTML5 video formats
 
    if (Modernizr.video) {
   // let's play some video! but what kind?
   if (Modernizr.video.webm) {
@@ -253,7 +253,7 @@ 
    Video Formats
    
   }
 }
    
 
-
    ❧
+
    
 
 
    Local Storage
    
 
@@ -265,7 +265,7 @@ 
    Local Storage
    
 
    Ask Professor Markup
    
 
    
 
    
-
    ☞Q: Is local storage really part of HTML5? Why is it in a separate specification?
    
+
    Q: Is local storage really part of HTML5? Why is it in a separate specification?
    
 A: The short answer is yes, local storage is part of HTML5. The slightly longer answer is that local storage used to be part of the main HTML5 specification, but it was split out into a separate specification because some people in the HTML5 Working Group complained that HTML5 was too big. If that sounds like slicing a pie into more pieces to reduce the total number of calories… well, welcome to the wacky world of standards.
 
    
 
    
@@ -283,7 +283,7 @@ 
    Ask Professor Markup
    
 
 
    Instead of writing this function yourself, you can use Modernizr (1.1 or later) to detect support for HTML5 local storage.
 
-
    ↶ check for HTML5 local storage
+
     check for HTML5 local storage
 
    if (Modernizr.localstorage) {
   // window.localStorage is available!
 } else {
@@ -297,13 +297,13 @@ 
    Ask Professor Markup
    
 
    Ask Professor Markup
    
 
    
 
    
-
    ☞Q: How secure is my HTML5 storage database? Can anyone read it?
    
+
    Q: How secure is my HTML5 storage database? Can anyone read it?
    
 A: Anyone who has physical access to your computer can probably look at (or even change) your HTML5 storage database. Within your browser, any web site can read and modify its own values, but sites can’t access values stored by other sites. This is called a same-origin restriction.
    -

    ❧ +

    Web Workers

    @@ -319,7 +319,7 @@

    Web Workers

    Instead of writing this function yourself, you can use Modernizr (1.1 or later) to detect support for web workers. -

    ↶ check for web workers +

    check for web workers 

    if (Modernizr.webworkers) {
   // window.Worker is available!
 } else {
@@ -329,7 +329,7 @@ 
    Web Workers
    
 
 
    Note that JavaScript is case-sensitive. The Modernizr attribute is called webworkers (all lowercase), but the DOM object is called window.Worker (with a capital “W” in “Worker”).
 
-
    ❧
+
    
 
 
    Offline Web Applications
    
 
@@ -347,7 +347,7 @@ 
    Offline Web Applications
    
 
 
    Instead of writing this function yourself, you can use Modernizr (1.1 or later) to detect support for offline web applications.
 
-
    ↶ check for offline support
+
     check for offline support
 
    if (Modernizr.applicationcache) {
   // window.applicationCache is available!
 } else {
@@ -357,7 +357,7 @@ 
    Offline Web Applications
    
 
 
    Note that JavaScript is case-sensitive. The Modernizr attribute is called applicationcache (all lowercase), but the DOM object is called window.applicationCache (mixed case).
 
-
    ❧
+
    
 
 
    Geolocation
    
 
@@ -369,7 +369,7 @@ 
    Geolocation
    
 
    Ask Professor Markup
    
 
    
 
    
-
    ☞Q: Is geolocation part of HTML5? Why are you talking about it?
    
+
    Q: Is geolocation part of HTML5? Why are you talking about it?
    
 A: Geolocation support is being added to browsers right now, along with support for new HTML5 features. Strictly speaking, geolocation is being standardized by the Geolocation Working Group, which is separate from the HTML5 Working Group. But I’m going to talk about geolocation in this book anyway, because it’s part of the evolution of the web that’s happening now.
 
    
 
    
@@ -383,7 +383,7 @@ 
    Ask Professor Markup
    
 
 
    Instead of writing this function yourself, you can use Modernizr to detect support for the geolocation API.
 
-
    ↶ check for geolocation support
+
     check for geolocation support
 
    if (Modernizr.geolocation) {
   // let's find out where you are!
 } else {
@@ -397,7 +397,7 @@ 
    Ask Professor Markup
    
 
 
    The chapter on geolocation will go into excruciating detail about how to use all of these different APIs.
 
-
    ❧
+
    
 
 
    Input Types
    
 
@@ -437,13 +437,13 @@ 
    Input Types
    
 
 
    Instead of writing 13 separate functions yourself, you can use Modernizr to detect support for all the new input types defined in HTML5. Modernizr reuses a single <input> element to efficiently detect support for all 13 input types. Then it builds a hash called Modernizr.inputtypes, that contains 13 keys (the HTML5 type attributes) and 13 Boolean values (true if supported, false if not).
 
-
    ↶ check for native date picker
+
     check for native date picker
 
    if (!Modernizr.inputtypes.date) {
   // no native support for <input type="date"> :(
   // maybe build one yourself with Dojo or jQueryUI
 }
    
 
-
    ❧
+
    
 
 
    Placeholder Text
    
 
@@ -460,7 +460,7 @@ 
    Placeholder Text
    
 
 
    Instead of writing this function yourself, you can use Modernizr (1.1 or later) to detect support for placeholder text.
 
-
    ↶ check for placeholder text
+
     check for placeholder text
 
    if (Modernizr.input.placeholder) {
   // your placeholder text should already be visible!
 } else {
@@ -468,7 +468,7 @@ 
    Placeholder Text
    
   // fall back to a scripted solution
 }
    
 
-
    ❧
+
    
 
 
    Form Autofocus
    
 
@@ -489,7 +489,7 @@ 
    Form Autofocus
    
 
 
    Instead of writing this function yourself, you can use Modernizr (1.1 or later) to detect support for autofocused form fields.
 
-
    ↶ check for autofocus support
+
     check for autofocus support
 
    if (Modernizr.input.autofocus) {
   // autofocus works!
 } else {
@@ -497,7 +497,7 @@ 
    Form Autofocus
    
   // fall back to a scripted solution
 }
    
 
-
    ❧
+
    
 
 
    Microdata
    
 
@@ -515,7 +515,7 @@ 
    Microdata
    
 
 
    Modernizr does not yet support checking for the microdata API, so you’ll need to use the function like the one listed above.
 
-
    ❧
+
    
 
 
    History API
    
 
@@ -531,7 +531,7 @@ 
    History API
    
 
 
    Instead of writing this function yourself, you can use Modernizr (1.6 or later) to detect support for the HTML5 history API.
 
-
    ↶ check for history API support
+
     check for history API support
 
    if (Modernizr.history) {
   // history management works!
 } else {
@@ -539,7 +539,7 @@ 
    History API
    
   // fall back to a scripted solution like History.js
 }
    
 
-
    ❧
+
    
 
 
    Further Reading
    
 
@@ -576,7 +576,7 @@ 
    Further Reading
    
 
  • Internet Explorer 9 Guide for Developers
 
 
-
    ❧
+
    
 
 
    This has been “Detecting HTML5 Features.” The full table of contents has more if you’d like to keep reading.
 
diff --git a/everything.html b/everything.html
index 7e65ba4..9ab6494 100644
--- a/everything.html
+++ b/everything.html
@@ -13,9 +13,9 @@
 
 
 
-
    You are here: Home ” Dive Into HTML5 ”
+
    You are here: Home  Dive Into HTML5 
 

    The All-In-One
    Almost-Alphabetical
    No-Bullshit Guide to
    Detecting Everything
    
-
    ❧
+
    
 
 
    (Confused? Read Detecting HTML5 Features for a conceptual introduction. Want an all-in-one library instead? Try Modernizr.)
 
@@ -249,7 +249,7 @@ 

    The All-In-One
    Almost-Alphabetical
    No-Bullshit Guide to
    Detecti
 
    return "upload" in new XMLHttpRequest;
 
 
-
    ❧
+
    
 
 
    Further Reading
    
 
@@ -275,7 +275,7 @@ 
    Further Reading
    
 
  • Modernizr, an HTML5 detection library
 
 
-
    ❧
+
    
 
 
    This has been “The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything.” The full table of contents has more if you’d like to keep reading.
 
diff --git a/extensibility.html b/extensibility.html
index d436a24..cfb418c 100644
--- a/extensibility.html
+++ b/extensibility.html
@@ -22,10 +22,10 @@
 
 
 
-
    You are here: Home ” Dive Into HTML5 ”
+
    You are here: Home  Dive Into HTML5 
 

    “Distributed,”
    “Extensibility,”
    &
    Other Fancy Words
    
 
     
-
    ❧
+
    
 
    Diving In
    
 
 
    There are over 100 elements in HTML5. Some are purely semantic, others are just containers for scripted APIs. Throughout the history of HTML, standards wonks have argued about which elements should be included in the language. Should HTML include a <figure> element? A <person> element? How about a <rant> element? Decisions are made, specs are written, authors author, implementors implement, and the web lurches ever forward.
@@ -36,7 +36,7 @@ 
    Diving In
    
 
 
    Microformats and RDFa each have their strengths and weaknesses. They take radically different approaches towards the same goal: extending web pages with additional semantics that are not part of the core HTML language. I don’t intend to turn this chapter into a format flamewar. (That would definitely require a <rant> element!) Instead, I want to focus on a third option developed using lessons learned from microformats and RDFa, and designed to be integrated into HTML5 itself: microdata.
 
-
    ❧
+
    
 
 
    What is Microdata?
    
 
@@ -61,7 +61,7 @@ 
    Professor Markup Says
    
 
 
    Does this sentence make more sense now? “Microdata annotates the DOM with scoped name/value pairs from custom vocabularies.” I hope so. Let’s see it in action.
 
-
    ❧
+
    
 
 
    The Microdata Data Model
    
 
@@ -77,7 +77,7 @@ 
    The Microdata Data Model
    
 
 
    Some of these properties are URLs, others are plain text. Each of them lends itself to a natural form of markup, even before you start thinking about microdata or vocabularies or whatnot. Imagine that you have a profile page or an “about” page. Your name is probably marked up as a heading, like an <h1> element. Your photo is probably an <img> element, since you want people to see it. And any URLs associated your profile are probably already marked up as hyperlinks, because you want people to be able to click them. For the sake of discussion, let’s say your entire profile is also wrapped in a <section> element to separate it from the rest of the page content. Thus:
 
-
    ↶ It’s all about me
+
     It’s all about me
 
    <section>
   <h1>Mark Pilgrim</h1>
   <p><img src="http://www.example.com/photo.jpg" alt="[me smiling]"></p>
@@ -123,7 +123,7 @@ 
    The Microdata Data Model
    
 
 
    Of course, if your markup looks a little different, that’s not a problem. You can add microdata properties and values to any HTML markup, even really gnarly 20th-century-era, tables-for-layout, Oh-God-why-did-I-agree-to-maintain-this markup. While I don’t recommend this kind of markup, it is still common, and you can still add microdata to it.
 
-
    ↶ For the love of God, don’t do this
+
     For the love of God, don’t do this
 
    <TABLE>
   <TR><TD>Name<TD>Mark Pilgrim
   <TR><TD>Link<TD>
@@ -138,7 +138,7 @@ 
    The Microdata Data Model
    
 
 
    Anyway, you can still convert this into a microdata property, you just need to be a little creative. Using the <a> element directly is out of the question. The link target isn’t in the href attribute, and there’s no way to override the rule that says “in an <a> element, look for the microdata property value in the href attribute.” But you can add a wrapper element around the entire mess, and use that to add the url microdata property.
 
-
    ↶ This is what you get for subverting HTML
+
     This is what you get for subverting HTML
 
    <TABLE itemscope itemtype="http://data-vocabulary.org/Person">
   <TR><TD>Name<TD>Mark Pilgrim
   <TR><TD>Link<TD>
@@ -151,7 +151,7 @@ 
    The Microdata Data Model
    
 
 
    To sum up: you can add microdata properties to any markup. If you’re using HTML correctly, you’ll find it easier to add microdata than if your HTML markup sucks, but it can always be done.
 
-
    ❧
+
    
 
 
    Marking Up People
    
 
@@ -237,8 +237,8 @@ 
    Marking Up People
    
 
 
    Moving on to the next bit of markup, we see an <h1> header and the beginnings of a <dl> list. Neither the <h1> nor the <dl> need to be marked up with microdata. Not every piece of HTML needs to be a microdata property. Microdata is about the properties themselves, not the markup or headers surrounding the properties. This <h1> isn’t a property; it’s just a header. Similarly, the <dt> that says “Name” isn’t a property; it’s just a label.
 
-
    ↶ Boring
-
    Boring ⇝ 
    
+
     Boring
+
    Boring  
    
 
      <h1>Contact Information</h1>
   <dl>
     <dt>Name</dt>
@@ -246,7 +246,7 @@ 
    Marking Up People
    
 
 
    So where is the real information? It’s in the <dd> element, so that’s where we need to put the itemprop attribute. Which property is it? It’s the name property. Where is the property value? It’s the text within the <dd> element. Does that need to be marked up? the HTML5 microdata data model says no, <dd> elements have no special processing, so the property value is just the text within the element.
 
-
    ↶ That’s my name, don’t wear it out 
    
+
     That’s my name, don’t wear it out 
    
 
        <dd itemprop="name">Mark Pilgrim</dd>
    
 
 
    Marking Up People
    
 
    Ask Professor Markup
    
 
    
 
    
-
    ☞Q: Is this mailing address format US-specific?
    
+
    Q: Is this mailing address format US-specific?
    
 A: No. The properties of the Address vocabulary are generic enough that they can describe most mailing addresses in the world. Not all addresses will have values for every property, but that’s OK. Some addresses might require fitting more than one “line” into a single property, but that’s OK too. For example, if your mailing address has a street address and a suite number, they would both go into the street-address subproperty:
 
    <p itemprop="address" itemscope
     itemtype="http://data-vocabulary.org/Address">
@@ -410,13 +410,13 @@ 
    Introducing Google Rich Snippets
    
 
    Ask Professor Markup
    
 
    
 
    
-
    ☞Q: I did everything you said, but my Google search result listing doesn’t look any different. What gives?
    
+
    Q: I did everything you said, but my Google search result listing doesn’t look any different. What gives?
    
 A: “Google does not guarantee that markup on any given page or site will be used in search results.” But even if Google decides not to use your microdata annotations, another search engine might. Like the rest of HTML5, microdata is an open standard that anyone can implement. It’s your job to provide as much data as possible. Let the rest of the world decide what to do with it. They might surprise you!
 
    
 
    
 
    
 
-
    ❧
+
    
 
 
    Marking Up Organizations
    
 
@@ -542,7 +542,7 @@ 
    Marking Up Organizations
    
 
 
    There is no direct support for the Organization vocabulary in Google Rich Snippets, so I don’t have any pretty sample search result listings to show you. But organizations feature heavily in the next two case studies: events and reviews, and those are supported by Google Rich Snippets.
 
-
    ❧
+
    
 
 
    Marking Up Events
    
 
@@ -754,7 +754,7 @@ 
    The Return of Google Rich Snippets
    
 
 
    Now look at the physical addresses. Google chose to display just the venue name + locality + country, not the exact street address. This is made possible by the fact that we split up the address into five subproperties — name, street-address, region, locality, and country-name — and marked up each part of the address as a different microdata property. Google takes advantage of that to show an abbreviated address. Other consumers of the same microdata markup might make different choices about what to display or how to display it. There’s no right or wrong choice here. It’s up to you to provide as much data as possible, as accurately as possible. It’s up to the rest of the world to interpret it.
 
-
    ❧
+
    
 
 
    Marking Up Reviews
    
 
@@ -905,7 +905,7 @@ 
    Marking Up Reviews
    
 
 
    Angle brackets don’t impress me much, but I have to admit, that’s pretty cool.
 
-
    ❧
+
    
 
 
    Further Reading
    
 
@@ -929,7 +929,7 @@ 
    Further Reading
    
 
  • Google Rich Snippets Tips and Tricks
 
 
-
    ❧
+
    
 
 
    This has been ‘“Distributed,” “Extensibility,” & Other Fancy Words.’ The full table of contents has more if you’d like to keep reading.
 
diff --git a/forms.html b/forms.html
index d1d361e..4685e5b 100644
--- a/forms.html
+++ b/forms.html
@@ -9,17 +9,17 @@
 
 
 
-
    You are here: Home ” Dive Into HTML5 ”
+
    You are here: Home  Dive Into HTML5 
 

    A Form of Madness
    
 
     
-
    ❧
+
    
 
    Diving In
    
 
 
    Everybody knows about web forms, right? Make a <form>, a few <input type="text"> elements, maybe an <input type="password">, finish it off with an <input type="submit"> button, and you’re done.
 
 
    You don’t know the half of it. HTML5 defines over a dozen new input types that you can use in your forms. And when I say “use,” I mean you can use them right now — without any shims, hacks, or workarounds. Now don’t get too excited; I don’t mean to say that all of these exciting new features are actually supported in every browser. Oh goodness no, I don’t mean that at all. In modern browsers, yes, your forms will kick all kinds of ass. But in legacy browsers, your forms will still work, albeit with less ass kicking. Which is to say, all of these features degrade gracefully in every browser. Even IE 6.
 
-
    ❧
+
    
 
 
    Placeholder Text
    
 
@@ -54,13 +54,13 @@ 
    Placeholder Text
    
 
    Ask Professor Markup
    
 
    
 
    
-
    ☞Q: Can I use HTML markup in the placeholder attribute? I want to insert an image, or maybe change the colors.
    
+
    Q: Can I use HTML markup in the placeholder attribute? I want to insert an image, or maybe change the colors.
    
 A: The placeholder attribute can only contain text, not HTML markup. However, there are some vendor-specific CSS extensions that allow you to style the placeholder text in some browsers.
    • -

    ❧ +

    Autofocus Fields

    @@ -96,7 +96,7 @@

    Autofocus Fields

  • Detect whether the browser supports the autofocus attribute, and only run your own autofocus script if the browser doesn’t support autofocus natively. -

    ↶ Autofocus with fallback +

    Autofocus with fallback 

    <form name="f">
   <input id="q" autofocus>
   <script>
@@ -116,7 +116,7 @@ 
    Setting focus as early as possible
    
 
 
    The example in the previous section placed the auto-focus script immediately after the form field that it references. This is the optimal solution, but it may offend your sensibilities to put a block of JavaScript code in the middle of your page. (Or, more mundanely, your back-end systems may just not be that flexible.) If you can’t insert a script in the middle of your page, you should set focus during a custom event like jQuery’s $(document).ready() instead of window.onload.
 
-
    ↶ Autofocus with jQuery fallback
+
     Autofocus with jQuery fallback
 
    <head>
 <script src="jquery.min.js"></script>
 <script>
@@ -140,7 +140,7 @@ 
    Setting focus as early as possible
    
 
 
    If you are willing and able to insert a single script statement in your page markup, there is a middle ground that is less offensive than the first option and more optimal than the second. You can use jQuery’s custom events to define your own event, say autofocus_ready. Then you can trigger this event manually, immediately after the autofocus form field is available. Thanks to E. M. Sternberg for teaching me about this technique.
 
-
    ↶ Autofocus with a custom event fallback
+
     Autofocus with a custom event fallback
 
    <head>
 <script src="jquery.min.js"></script>
 <script>
@@ -173,7 +173,7 @@ 
    Setting focus as early as possible
    
 
  • Under no circumstances should you wait until window.onload to set focus.
 
 
-
    ❧
+
    
 
 
    Email Addresses
    
 
@@ -217,7 +217,7 @@ 
    Email Addresses
    
 
 
    To sum up: there’s no downside to converting all your email address form fields to type="email" immediately. Virtually no one will even notice, except iPhone users, who probably won’t notice either. But the ones who do notice will smile quietly and thank you for making their web experience just a little easier.
 
-
    ❧
+
    
 
 
    Web Addresses
    
 
@@ -231,7 +231,7 @@ 
    Web Addresses
    
 
 
    Most modern desktop browsers simply render type="url" like a regular text box, so users won’t even notice until they submit the form. Browsers that don’t support HTML5 will treat type="url" exactly like type="text", so there’s no downside to using it for all your web-address-inputting needs.
 
-
    ❧
+
    
 
 
    Numbers as Spinboxes
    
 
@@ -239,7 +239,7 @@ 
    Numbers as Spinboxes
    
 
 
    My point is, you don’t often ask for “just a number.” It’s more likely that you’ll ask for a number in a particular range. You may only want certain kinds of numbers within that range — maybe whole numbers but not fractions or decimals, or something more esoteric like numbers divisible by 10. HTML5 has you covered.
 
-
    ↶ Pick a number, (almost) any number
+
     Pick a number, (almost) any number
 
    <input type="number"
        min="0"
        max="10"
@@ -285,7 +285,7 @@ 
    Numbers as Spinboxes
    
   // maybe try Dojo or some other JavaScript framework
 }
    
 
-
    ❧
+
    
 
 
    Numbers as Sliders
    
 
@@ -295,7 +295,7 @@ 
    Numbers as Sliders
    
 
 
    You can now have slider controls in your web forms, too. The markup looks eerily similar to spinbox controls:
 
-
    ↶ The spitting image
+
     The spitting image
 
    <input type="range"
        min="0"
        max="10"
@@ -304,7 +304,7 @@ 
    Numbers as Sliders
    
 
 
    All the available attributes are the same as type="number" — min, max, step, value — and they mean the same thing. The only difference is the user interface. Instead of a field for typing, browsers are expected to render type="range" as a slider control. Safari, Chrome, Opera, Internet Explorer 10, and the iPhone running iOS 5 all do this. (Sadly, the iPhone running older versions of iOS renders it as a simple text box. It doesn’t even optimize its on-screen keyboard for numeric input.) All other browsers simply treat the field as type="text", so there’s no reason you can’t start using it immediately.
 
-
    ❧
+
    
 
 
    Date Pickers
    
 
@@ -423,7 +423,7 @@ 
    Date Pickers
    
 
 
    It’s likely that other browsers will eventually support these input types. But just like type="email" and the other input types, these form fields will be rendered as plain text boxes in browsers that don’t recognize type="date" and the other variants. If you like, you can simply use <input type="date"> and friends, make Opera and iOS users happy, and wait for other browsers to catch up. More realistically, you can use <input type="date">, detect whether the browser has native support for date pickers, and fall back to a scripted solution of your choice (Dojo, jQuery UI, YUI, Closure Library, or some other solution).
 
-
    ↶ Date picker with fallback
+
     Date picker with fallback
 
    <form>
   <input type="date">
 </form>
@@ -438,7 +438,7 @@ 
    Date Pickers
    
   }
 </script>
    
 
-
    ❧
+
    
 
 
    
 
@@ -450,7 +450,7 @@ 
   <input name="q" type="search">
   <input type="submit" value="Find">
 </form>
    
-
     ⇜ New-age search box
+
     New-age search box
 
 
    Test <input type="search"> in your own browser. In some browsers, you won’t notice any difference from a regular text box. But if you’re using Safari on Mac OS X, it will look like this:
 
@@ -475,7 +475,7 @@ 
    Professor Markup Says
    
 
 
 
-
    ❧
+
    
 
 
    Color Pickers
    
 
@@ -485,7 +485,7 @@ 
    Color Pickers
    
 
 
    Thanks to Patrick Lauke and Chris Mills for relicensing this image for inclusion in this book. You should read their article about the new form features in Opera 11.
 
-
    ❧
+
    
 
 
    Form Validation
    
 
@@ -508,7 +508,7 @@ 
    Form Validation
    
 
 
    Seriously, you’ll get it wrong. Determining whether a random string of characters is a valid email address is unbelievably complicated. The harder you look, the more complicated it gets. Did I mention it’s really, really complicated? Wouldn’t it be easier to offload the entire headache to your browser?
 
-
    Most modern browsers validate type=“email” ↷
    
+
    Most modern browsers validate type=“email” 
    
 
    error message on invalid type="email" field
 
 
    That screenshot is from Opera 11, although the functionality has been present since Opera 9. Firefox 4 and Chrome 10 provide similar functionality. The only markup involved is setting the type attribute to "email". When the user tries to submit a form with an <input type="email"> field, the browser automatically offers RFC-compliant email validation, even if scripting is disabled.
@@ -519,13 +519,13 @@ 
    Form Validation
    
 
 
    There is no markup required to activate HTML5 form validation; it is on by default. To turn it off, use the novalidate attribute.
 
-
    Don’t validate me, bro ↷
    
+
    Don’t validate me, bro 
    
 
    <form novalidate>
   <input type="email" id="addr">
   <input type="submit" value="Subscribe">
 </form>
    
 
-
    ❧
+
    
 
 
    Required Fields
    
 
@@ -552,7 +552,7 @@ 
    Required Fields
    
 
 
    Furthermore, if you attempt to submit the form without filling in the required value, Firefox will pop up an infobar telling you that the field is mandatory and can not be left blank.
 
-
    ❧
+
    
 
 
    Further Reading
    
 
@@ -582,7 +582,7 @@ 
    Further Reading
    
 
  • Internet Explorer 10 Guide for Developers: HTML5 Forms
 
 
-
    ❧
+
    
 
 
    This has been “A Form of Madness.” The full table of contents has more if you’d like to keep reading.
 
diff --git a/geolocation.html b/geolocation.html
index b30c008..54a3d2f 100644
--- a/geolocation.html
+++ b/geolocation.html
@@ -9,10 +9,10 @@
 
 
 
-
    You are here: Home ” Dive Into HTML5 ”
+
    You are here: Home  Dive Into HTML5 
 

    You Are Here
    (And So Is Everybody Else)
    
 
     
-
    ❧
+
    
 
    Diving In
    
 
 
    Geolocation is the art of figuring out where you are in the world and (optionally) sharing that information with people you trust. There is more than one way to figure out where you are — your IP address, your wireless network connection, which cell tower your phone is talking to, or dedicated GPS hardware that calculates latitude and longitude from information sent by satellites in the sky.
@@ -21,13 +21,13 @@ 
    Diving In
    
 
    Ask Professor Markup
    
 
    
 
    
-
    ☞Q: Geolocation sounds scary. Can I turn it off?
    
+
    Q: Geolocation sounds scary. Can I turn it off?
    
 A: Privacy is an obvious concern when you’re talking about sharing your physical location with a remote web server. The geolocation API explicitly states: “User Agents must not send location information to Web sites without the express permission of the user.” In other words, sharing your location is always opt-in. If you don’t want to, you don’t have to.
 
    
 
    
 
 
-
    ❧
+
    
 
 
    The Geolocation API
    
 
@@ -45,7 +45,7 @@ 
    The Geolocation API
    
 
 
    Along with support for the standard geolocation API, there are a plethora of device-specific APIs on other mobile platforms. I’ll cover all that later in this chapter.
 
-
    ❧
+
    
 
 
    Show Me The Code
    
 
@@ -64,7 +64,7 @@ 
    Show Me The Code
    
     // no native support; maybe try a fallback?
   }
 }
    • 
-
     ⇜ I CAN HAS GEO?
+
     I CAN HAS GEO?
 
 
    What you do without geolocation support is up to you. I’ll explain the Javascript fallback option in a minute, but first I want to talk about what happens during that call to getCurrentPosition(). As I mentioned at the beginning of this chapter, geolocation support is opt-in. That means your browser will never force you to reveal your current physical location to a remote server. The user experience differs from browser to browser. In Mozilla Firefox, calling the getCurrentPosition() function of the geolocation API will cause the browser to pop up an “infobar” at the top of the browser window. The infobar looks like this:
 
@@ -117,7 +117,7 @@ 
    Show Me The Code
    
 
 
    Only three of the properties are guaranteed to be there (coords.latitude, coords.longitude, and coords.accuracy). The rest might come back null, depending on the capabilities of your device and the backend positioning server that it talks to. The heading and speed properties are calculated based on the user’s previous position, if possible.
 
-
    ❧
+
    
 
 
    Handling Errors
    
 
@@ -143,7 +143,7 @@ 
    Handling Errors
    
 
  • TIMEOUT (3) if the network is up but it takes too long to calculate the user’s position. How long is “too long”? I’ll show you how to define that in the next section.
 
 
-
    ↶ Be gracious in defeat
+
     Be gracious in defeat
 
    function handle_error(err) {
   if (err.code == 1) {
     // user said no!
@@ -154,13 +154,13 @@ 
    Handling Errors
    
 
    Ask Professor Markup
    
 
    
 
    
-
    ☞Q: Does the geolocation API work on the International Space Station, on the moon, or on other planets?
    
+
    Q: Does the geolocation API work on the International Space Station, on the moon, or on other planets?
    
 A: The geolocation specification states, “The geographic coordinate reference system used by the attributes in this interface is the World Geodetic System (2d) [WGS84]. No other reference system is supported.” The International Space Station is orbiting Earth, so astronauts on the station can describe their location by latitude, longitude, and altitude. However, the World Geodetic System is Earth-centric, so it can’t be used to describe locations on the moon or on other planets.
 
    
 
    
 
 
-
    ❧
+
    
 
 
    Choices! I Demand Choices!
    
 
@@ -201,7 +201,7 @@ 
    Choices! I Demand Choices!
    
 
 
    The watchPosition() function itself returns a number. You should probably store this number somewhere. If you ever want to stop watching the user’s location change, you can call the clearWatch() method and pass it this number, and the device will stop calling your callback function. If you’ve ever used the setInterval() and clearInterval() functions in JavaScript, this works the same way.
 
-
    ❧
+
    
 
 
    What About IE?
    
 
@@ -209,7 +209,7 @@ 
    What About IE?
    
 
 
    While we’re on the subject of legacy platforms, I should point out that many older mobile phone platforms had their own device-specific geolocation APIs. BlackBerry, Nokia, Palm, and OMTP BONDI all provide their own geolocation APIs. Of course, they all work differently which in turn works differently from the W3C geolocation API. Wheeeeee!
 
-
    ❧
+
    
 
 
    geoPosition.js to the Rescue
    
 
@@ -227,7 +227,7 @@ 
    geoPosition.js to the Rescue
    
 </body>
 </html>
 
    
-
     ⇜ Don’t let it go to your <head>
+
     Don’t let it go to your <head>
 
 
    Now you’re ready to use whichever geolocation API is installed.
 
@@ -252,7 +252,7 @@ 
    geoPosition.js to the Rescue
    
 
 
    The success callback function takes a single argument, which contains the position information.
 
-
    ↶ Success callback
+
     Success callback
 
    function geoSuccess(p) {
   alert("Found you at latitude " + p.coords.latitude +
         ", longitude " + p.coords.longitude);
@@ -264,14 +264,14 @@ 
    geoPosition.js to the Rescue
    
 
 
    The failure callback function takes no arguments.
 
-
    ↶ Failure callback
+
     Failure callback
 
    function geoError() {
   alert("Could not find you!");
 }
    
 
 
    geoPosition.js does not currently support the watchPosition() function. If you need continuous location information, you’ll need to actively poll getCurrentPosition() yourself.
 
-
    ❧
+
    
 
 
    A Complete, Live Example
    
 
@@ -303,7 +303,7 @@ 
    A Complete, Live Example
    
   $("#live-geolocation").html('Unable to determine your location.');
 }
    
 
-
    ❧
+
    
 
 
    Further Reading
    
 
@@ -317,7 +317,7 @@ 
    Further Reading
    
 
  • Internet Explorer 9 Guide for Developers: Geolocation
 
 
-
    ❧
+
    
 
 
    This has been “You Are Here (And So Is Everybody Else).” The full table of contents has more if you’d like to keep reading.
 
diff --git a/history.html b/history.html
index 8b1db44..f3331b7 100644
--- a/history.html
+++ b/history.html
@@ -8,17 +8,17 @@
 body{counter-reset:h1 11}
 
 
-
    You are here: Home ” Dive Into HTML5 ”
+
    You are here: Home  Dive Into HTML5 
 

    Manipulating History
    for Fun & Profit
    
 
     
-
    ❧
+
    
 
    Diving In
    
 
 
    The browser location bar is perhaps the geekiest mainstream piece of user interface in the world. There are URLs on billboards, on the sides of trains, and even in street graffiti. Combined with the back button — easily the most important button in the browser — you have a powerful way to go forward and backward through the vast set of intertwingled resources called the Web.
 
 
    The HTML5 history API is a standardized way to manipulate the browser history via script. Part of this API — navigating the history — has been available in previous versions of HTML. The new parts in HTML5 include a way to add entries to the browser history, to visibly change the URL in the browser location bar (without triggering a page refresh), and an event that fires when those entries are removed from the stack by the user pressing the browser’s back button. This means that the URL in the browser location bar can continue to do its job as a unique identifier for the current resource, even in script-heavy applications that don’t ever perform a full page refresh.
 
-
    ❧
+
    
 
 
    The Why
    
 
@@ -44,7 +44,7 @@ 
    The Why
    
 
 
    At the end of this illusion (if you executed it correctly), the browser ends up with a DOM that is identical to page B, just as if you had navigated to page B directly. The browser location bar ends up with a URL that is identical to page B, just as if you had navigated to page B directly. But you never really did navigate to page B, and you never did a full page refresh. That’s the illusion. But because the “compiled” page looks the same as page B and has the same URL as page B, the user should never notice the difference (nor appreciate all your hard work micromanaging their experience).
 
-
    ❧
+
    
 
 
    The How
    
 
@@ -72,7 +72,7 @@ 
    Professor Markup Says
    
 
 
    ↶ The pledge
+
     The pledge
 
    <aside id="gallery">
   <p class="photonav">
     <a id="photonext" href="casey.html">Next &gt;</a>
@@ -103,7 +103,7 @@ 
    Professor Markup Says
    
     e.preventDefault();
   }, false);
 }
    
-
     ↜ Interesting
+
     Interesting
 
 
    The swapPhoto() function performs the first two steps of our three-step illusion. The first half of the swapPhoto() function takes part of the URL of the navigation link itself — casey.html, adagio.html, &c. — and constructs a URL to a hidden page that contains nothing but the markup required by the next photo.
 
@@ -143,7 +143,7 @@ 
    Professor Markup Says
    
 
 
    Now, let’s go back to the addClicker() function. After successfully swapping out the photo, there’s one more step in our three-step illusion: setting the URL in the browser location bar without refreshing the page.
 
-
    ↶ The turn
+
     The turn
 
    history.pushState(null, null, link.href);
    
 
 
    The history.pushState() function takes three parameters:
@@ -158,7 +158,7 @@ 
    Professor Markup Says
    
 
 
    Normally when the user navigates to a new page (with a full page refresh), the browser pushes the new URL onto its history stack and downloads and draws the new page. When the user presses the back button, the browser pops one page off its history stack and redraws the previous page. But what happens now that you’ve short-circuited this navigation to avoid a full page refresh? Well, you’ve faked “moving forward” to a new URL, so now you also need to fake “moving backward” to the previous URL. And the key to faking “moving backwards” is the popstate event.
 
-
    ↶ The prestige
+
     The prestige
 
    window.addEventListener("popstate", function(e) {
     swapPhoto(location.pathname);
 }
    
@@ -184,7 +184,7 @@ 
    Professor Markup Says
    
 
 
    The illusion is complete. All visible evidence (the content of the page, and the URL in the location bar) suggests to the user that they have navigated forward one page and backward one page. But no full page refresh ever occurred — it was all a meticulously executed illusion.
 
-
    ❧
+
    
 
 
    Further Reading
    
 
@@ -198,7 +198,7 @@ 
    Further Reading
    
 
  • History.js, a meta-API for manipulating history in both newer and older browsers
 
 
-
    ❧
+
    
 
 
    This has been “Manipulating History for Fun & Profit.” The full table of contents has more if you’d like to keep reading.
 
diff --git a/index.html b/index.html
index 35e3849..b539df0 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,7 @@ 
    by
    Mark Pilgrim
    
 
    with contributions from the community
    
 
 
-
    ❧
+
    
 
 
    Dive Into HTML5 elaborates on a hand-picked selection of features from the HTML5 specification and other fine standards. We encourage you to buy the printed work — Mark Pilgrim’s artfully titled “HTML5: Up & Running” — published on paper by O’Reilly, under the Google Press imprint. Your kind and sincere feedback is always welcome, and this work shall remain online under the CC-BY-3.0 license.
 
@@ -50,7 +50,7 @@ 
    Table of Contents
    
 
 
 
-
    ❧
+
    
 
 
    “If you’re good at something, never do it for free.” —The Joker
    (but that doesn’t mean you should keep it to yourself)
 
diff --git a/introduction.html b/introduction.html
index f39939f..e4c6746 100644
--- a/introduction.html
+++ b/introduction.html
@@ -10,10 +10,10 @@
 
 
 
-
    You are here: Home ” Dive Into HTML5 ”
+
    You are here: Home  Dive Into HTML5 
 

    Five Things You Should Know About HTML5
    
 
     
-
    ❧
+
    
 
    1. It’s not one big thing
    
 
 
    [mock video player]
@@ -67,7 +67,7 @@ 
    5. It’s here to stay
    
 
 
    HTML5 is here to stay. Let’s dive in.
 
-
    ❧
+
    
 
 
    
 
    Did You Know?
    
diff --git a/legal.html b/legal.html
index c6fe26d..d88af72 100644
--- a/legal.html
+++ b/legal.html
@@ -8,17 +8,17 @@
 
 
 
-
    You are here: Home ” Dive Into HTML5 ”
+
    You are here: Home  Dive Into HTML5 
 
 
    Legal Notices
    
 
     
-
    ❧
+
    
 
 
    Prose
    
 
 
    Dive Into HTML5 comprises original prose written by Mark Pilgrim. The text is Copyright © 2009, O’Reilly Media, but they have graciously allowed me to publish it here under the terms of the Creative Commons Attribution 3.0 Unported license.
 
-
    ❧
+
    
 
 
    Illustrations
    
 
@@ -28,7 +28,7 @@ 
    Illustrations
    
 
 
    The live video example at the end of Video on the Web uses a poster image called From Grandma's Basement: Apple IIe by Paulo Ordoveza. It is licensed under the Creative Commons Attribution License.
 
-
    ❧
+
    
 
 
    jQuery
    
 
@@ -55,7 +55,7 @@ 
    jQuery
    
 OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
    • 
 
-
    ❧
+
    
 
 
    Modernizr
    
 
@@ -93,7 +93,7 @@ 
    Modernizr
    
 OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
    -

    ❧ +

    geo.js

    @@ -120,7 +120,7 @@

    geo.js

    OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -

    ❧ +

    Gears

    @@ -151,7 +151,7 @@

    Gears

    OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -

    ❧ +

    highlighter.js

    @@ -171,7 +171,7 @@

    highlighter.js

    See the License for the specific language governing permissions and limitations under the License. -

    ❧ +

    ExplorerCanvas

    @@ -191,7 +191,7 @@

    ExplorerCanvas

    See the License for the specific language governing permissions and limitations under the License. -

    ❧ +

    Bespin

    @@ -221,7 +221,7 @@

    Bespin

    * * ***** END LICENSE BLOCK ***** -

    ❧ +

    canvas.text.js

    @@ -248,7 +248,7 @@

    canvas.text.js

    OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -

    ❧ +

    Linux Libertine

    @@ -264,7 +264,7 @@

    Linux Libertine

    so. If you do not wish to do so, delete this exception statement from your version. -

    ❧ +

    Essays 1743

    @@ -283,19 +283,19 @@

    Essays 1743

    For the purposes of the LGPL, the source file is Essays1743.sfd (the pfaedit source), which should be included in this archive. -

    ❧ +

    Chunk

    Headers in the HTML5 Peeks, Pokes and Pointers chart are typeset in a subsetted version of Chunk, which is licensed under the SIL Open Font License. -

    ❧ +

    Latin Modern

    Text and code samples in the HTML5 Peeks, Pokes and Pointers chart are typeset in a subsetted version of Latin Modern, which is licensed under the GUST Font License. -

    ❧ +

    Copyright MMIX–MMXI Mark Pilgrim diff --git a/offline.html b/offline.html index ae2468a..e1395a9 100644 --- a/offline.html +++ b/offline.html @@ -9,10 +9,10 @@ -

    You are here: Home ” Dive Into HTML5 ” +

    You are here: Home Dive Into HTML5


    Let’s Take This Offline

      -

    ❧ +

    Diving In

    What is an offline web application? At first glance, it sounds like a contradiction in terms. Web pages are things you download and render. Downloading implies a network connection. How can you download when you’re offline? Of course, you can’t. But you can download when you’re online. And that’s how HTML5 offline applications work. @@ -29,7 +29,7 @@

    Diving In

    ·3.5+4.0+5.0+10.6+2.1+2.0+ -

    ❧ +

    The Cache Manifest

    @@ -52,7 +52,7 @@

    The Cache Manifest

    Ask Professor Markup

    -

    ☞Q: My web application spans more than one page. Do I need a manifest attribute in each page, or can I just put it in the home page? +

    Q: My web application spans more than one page. Do I need a manifest attribute in each page, or can I just put it in the home page?

    A: Every page of your web application needs a manifest attribute that points to the cache manifest for the entire application.

    @@ -79,7 +79,7 @@

    Ask Professor Markup

    Ask Professor Markup

    -

    ☞Q: Do I need to list my HTML pages in my cache manifest?
    +

    Q: Do I need to list my HTML pages in my cache manifest?
    A: Yes and no. If your entire web application is contained in a single page, just make sure that page points to the cache manifest using the manifest attribute. When you navigate to an HTML page with a manifest attribute, the page itself is assumed to be part of the web application, so you don’t need to list it in the manifest file itself. However, if your web application spans multiple pages, you should list all of the HTML pages in the manifest file, otherwise the browser would not know that there are other HTML pages that need to be downloaded and cached.

    @@ -119,7 +119,7 @@

    Fallback Sections

    Is this example complete? No. Wikipedia is more than HTML files. It uses common CSS, JavaScript, and images on each page. Each of these resources would need to be listed explicitly in the CACHE: section of the manifest file, in order for pages to display and behave properly offline. But the point of the fallback section is that you can have an “open-ended” offline web application that extends beyond the resources you’ve listed explicitly in the manifest file. -

    ❧ +

    The Flow of Events

    @@ -190,7 +190,7 @@

    The fine art of debugging, a.k.a. “Kill me! Kill me now clock.js clock.css -

    ❧ +

    Let’s Build One!

    @@ -218,7 +218,7 @@

    Let’s Build One!

    And that’s it! When an offline-capable browser first loads the offline-enabled HTML page, it will download the linked cache manifest file and start downloading all the referenced resources and storing them in the offline application cache. From then on, the offline application algorithm takes over whenever you revisit the page. You can play the game offline, and since it remembers its state locally, you can leave and come back as often as you like. -

    ❧ +

    Further Reading

    @@ -252,7 +252,7 @@

    Further Reading

  • Manifesto, a validation bookmarklet -

    ❧ +

    This has been “Let’s Take This Offline.” The full table of contents has more if you’d like to keep reading. diff --git a/past.html b/past.html index f78e73a..adb88fe 100644 --- a/past.html +++ b/past.html @@ -9,10 +9,10 @@ -

    You are here: Home ” Dive Into HTML5 ” +

    You are here: Home Dive Into HTML5


    How Did We Get Here?

      -

    ❧ +

    Diving In

    Recently, I stumbled across a quote from a Mozilla developer about the tension inherent in creating standards: @@ -25,7 +25,7 @@

    Diving In

    animals on a seesaw -

    ❧ +

    MIME types

    @@ -41,7 +41,7 @@

    MIME types

    Tuck that under your hat. We’ll come back to it. -

    ❧ +

    A long digression into how standards are made

    @@ -211,7 +211,7 @@

    A long digression into how standards are mad

    We’re not prepared to support INCLUDE/EMBED at this point. … So we’re probably going to go with <IMG SRC="url"> (not ICON, since not all inlined images can be meaningfully called icons). For the time being, inlined images won’t be explicitly content-type’d; down the road, we plan to support that (along with the general adaptation of MIME). Actually, the image reading routines we’re currently using figure out the image format on the fly, so the filename extension won’t even be significant. -

    ❧ +

    An unbroken line

    @@ -235,7 +235,7 @@

    An unbroken line

    The ones that win are the ones that ship. -

    ❧ +

    A timeline of HTML development from 1997 to 2004

    @@ -257,7 +257,7 @@

    A timeline of HTML development from 1997 to 2004

    Meanwhile, with the transition to XML complete, the HTML Working Group set their sights on creating “the next generation of HTML.” In May 2001, they published the first edition of XHTML 1.1, that added only a few minor features on top of XHTML 1.0, but also eliminated the “Appendix C” loophole. Starting with version 1.1, all XHTML documents were to be served with a MIME type of application/xhtml+xml. -

    ❧ +

    Everything you know about XHTML is wrong

    @@ -275,7 +275,7 @@

    Everything you know about XHTML is wrong

    XHTML 1.0 included this loophole, but XHTML 1.1 closed it, and the never-finalized XHTML 2.0 continued the tradition of requiring draconian error handling. And that’s why there are billions of pages that claim to be XHTML 1.0, and only a handful that claim to be XHTML 1.1 (or XHTML 2.0). So are you really using XHTML? Check your MIME type. (Actually, if you don’t know what MIME type you’re using, I can pretty much guarantee that you’re still using text/html.) Unless you’re serving your pages with a MIME type of application/xhtml+xml, your so-called “XHTML” is XML in name only. -

    ❧ +

    A competing vision

    @@ -308,7 +308,7 @@

    A competing vision

    Faced with this decision, the people who had proposed evolving HTML and HTML forms had only two choices: give up, or continue their work outside of the W3C. They chose the latter and registered the whatwg.org domain, and in June 2004, the WHAT Working Group was born. -

    ❧ +

    WHAT Working Group?

    @@ -330,7 +330,7 @@

    WHAT Working Group?

    While all that reverse-engineering was going on, the WHAT working group was quietly working on a few other things, too. One of them was a specification, initially dubbed Web Forms 2.0, that added new types of controls to HTML forms. (You’ll learn more about web forms in A Form of Madness.) Another was a draft specification called “Web Applications 1.0,” that included major new features like a direct-mode drawing canvas and native support for audio and video without plugins. -

    ❧ +

    Back to the W3C

    @@ -346,7 +346,7 @@

    Back to the W3C

    One of the first things the newly re-chartered W3C HTML Working Group decided was to rename “Web Applications 1.0” to “HTML5.” And here we are, diving into HTML5. -

    ❧ +

    Postscript

    @@ -359,7 +359,7 @@

    Postscript

    The ones that win are the ones that ship. -

    ❧ +

    Further Reading

    @@ -369,7 +369,7 @@

    Further Reading

  • A Brief History of HTML, by Scott Reynen -

    ❧ +

    This has been “How Did We Get Here?” The full table of contents has more if you’d like to keep reading. diff --git a/screen.css b/screen.css index e545d94..e185016 100644 --- a/screen.css +++ b/screen.css @@ -368,4 +368,21 @@ tfoot { .zebra { background: #eee; -} \ No newline at end of file +} + +/* asterism styles */ + +.rotatedFloralHeartBullet:after { content: '\2767' } + +.triangularBullet:after { content: '\2023' } + +.leftwardsWaveArrow:after { content: ' \219C' } +.rightwardsWaveArrow:after { content: '\219D' } + +.leftwardsSquiggleArrow:after { content: ' \21DC' } +.rightwardsSquiggleArrow:after { content: '\21DD ' } + +.whiteRightPointingIndex:after { content: '\261E' } + +.anticlockwiseTopSemicircleArrow:after { content: '\21B6' } +.clockwiseTopSemicircleArrow:after { content: '\21B7' } \ No newline at end of file diff --git a/semantics.html b/semantics.html index c9ee145..e15c36a 100644 --- a/semantics.html +++ b/semantics.html @@ -12,17 +12,17 @@ -

    You are here: Home ” Dive Into HTML5 ” +

    You are here: Home Dive Into HTML5


    What Does It All Mean?

      -

    ❧ +

    Diving In

    This chapter will take an HTML page that has absolutely nothing wrong with it, and improve it. Parts of it will become shorter. Parts will become longer. All of it will become more semantic. It’ll be awesome.

    Here is the page in question. Learn it. Live it. Love it. Open it in a new tab and don’t come back until you’ve hit “View Source” at least once. -

    ❧ +

    The Doctype

    @@ -67,7 +67,7 @@

    The Doctype

    That’s it. Just 15 characters. It’s so easy, you can type it by hand and not screw it up. -

    ❧ +

    The Root Element

    @@ -101,7 +101,7 @@

    The Root Element

    And that’s all I have to say about that. -

    ❧ +

    The <head> Element

    @@ -124,7 +124,7 @@

    The <head> Element

    First up: the <meta> element. -

    ❧ +

    Character Encoding

    @@ -159,7 +159,7 @@

    Character Encoding

    Ask Professor Markup

    -

    ☞Q: I never use funny characters. Do I still need to declare my character encoding?
    +

    Q: I never use funny characters. Do I still need to declare my character encoding?

    A: Yes! You should always specify a character encoding on every HTML page you serve. Not specifying an encoding can lead to security vulnerabilities.

    @@ -167,7 +167,7 @@

    Ask Professor Markup

    To sum up: character encoding is complicated, and it has not been made any easier by decades of poorly written software used by copy-and-paste–educated authors. You should always specify a character encoding on every HTML document, or bad things will happen. You can do it with the HTTP Content-Type header, the <meta http-equiv> declaration, or the shorter <meta charset> declaration, but please do it. The web thanks you. -

    ❧ +

    @@ -196,7 +196,7 @@

    Ask Professor Markup

    -

    ☞Q: Can I make up my own link relations?
    +

    Q: Can I make up my own link relations?

    A: There seems to be an infinite supply of ideas for new link relations. In an attempt to prevent people from just making shit up, the microformats community maintains a registry of proposed rel values and the HTML specification defines the process for getting them accepted.

    @@ -260,7 +260,7 @@

    Other Link Relations in HTML5

    rel="tag" “indicates that the tag that the referenced document represents applies to the current document.” Marking up “tags” (category keywords) with the rel attribute was invented by Technorati to help them categorize blog posts. Early blogs and tutorials thus referred to them as “Technorati tags.” (You read that right: a commercial company convinced the entire world to add metadata that made the company’s job easier. Nice work if you can get it!) The syntax was later standardized within the microformats community, where it was simply called rel="tag". Most blogging systems that allow associating categories, keywords, or tags with individual posts will mark them up with rel="tag" links. Browsers do not do anything special with them; they’re really designed for search engines to use as a signal of what the page is about. -

    ❧ +

    New Semantic Elements in HTML5

    @@ -289,7 +289,7 @@

    New Semantic Elements in HTML5

    I know you’re anxious to start using these new elements, otherwise you wouldn’t be reading this chapter. But first we need to take a little detour. -

    ❧ +

    A long digression into how browsers handle unknown elements

    @@ -421,7 +421,7 @@

    Professor Markup Says

    Now we’re ready to start using the new semantic elements in HTML5. -

    ❧ +

    Headers

    @@ -528,7 +528,7 @@

    Headers

    You can test your own pages in the HTML5 Outliner to ensure that you’re using the heading elements properly. -

    ❧ +

    Articles

    @@ -601,7 +601,7 @@

    Professor Markup Says

    -

    ❧ +

    Dates and Times

    @@ -674,7 +674,7 @@

    Dates and Times

    <p>Lorem ipsum dolor sit amet…</p> </article> -

    ❧ +

    @@ -712,14 +712,14 @@

    Ask Professor Markup

    -

    ☞Q: Are skip links compatible with the <nav> element? Do I still need skip links in HTML5?
    +

    Q: Are skip links compatible with the <nav> element? Do I still need skip links in HTML5?

    A: Skip links allow readers to skip over navigation sections. They are helpful for disabled users who use third-party software to read a web page aloud and navigate it without a mouse. (Learn how and why to provide skip links.)

    Once screenreaders are updated to recognize the <nav> element, skip links will become obsolete, since the screenreader software will be able to automatically offer to skip over a navigation section marked up with the <nav> element. However, it will be a while before all the disabled users on the web upgrade to HTML5-savvy screenreader software, so you should continue to provide your own skip links to jump over <nav> sections.

    -

    ❧ +

    @@ -817,7 +817,7 @@ <p class="copyright">Copyright © 2009 W3C</p> </footer> -

    ❧ +

    Further Reading

    @@ -856,7 +856,7 @@

    Further Reading

  • html5.validator.nu -

    ❧ +

    This has been “What Does It All Mean?” The full table of contents has more if you’d like to keep reading. diff --git a/storage.html b/storage.html index 450fef0..fb7b9f0 100644 --- a/storage.html +++ b/storage.html @@ -9,10 +9,10 @@ -

    You are here: Home ” Dive Into HTML5 ” +

    You are here: Home Dive Into HTML5


    The Past, Present & Future of Local Storage for Web Applications

      -

    ❧ +

    Diving In

    Persistent local storage is one of the areas where native client applications have held an advantage over web applications. For native applications, the operating system typically provides an abstraction layer for storing and retrieving application-specific data like preferences or runtime state. These values may be stored in the registry, INI files, XML files, or some other place according to platform convention. If your native client application needs local storage beyond key/value pairs, you can embed your own database, invent your own file format, or any number of other solutions. @@ -36,7 +36,7 @@

    Diving In

    Before HTML5, all attempts to achieve this were ultimately unsatisfactory in different ways. -

    ❧ +

    A Brief History of Local Storage Hacks Before HTML5

    @@ -52,7 +52,7 @@

    A Brief History of Local Storage Hacks Before HTML5

    As you survey these solutions, a pattern emerges: all of them are either specific to a single browser, or reliant on a third-party plugin. Despite heroic efforts to paper over the differences (in dojox.storage), they all expose radically different interfaces, have different storage limitations, and present different user experiences. So this is the problem that HTML5 set out to solve: to provide a standardized API, implemented natively and consistently in multiple browsers, without having to rely on third-party plugins. -

    ❧ +

    Introducing HTML5 Storage

    @@ -72,7 +72,7 @@

    Introducing HTML5 Storage

    From your JavaScript code, you’ll access HTML5 Storage through the localStorage object on the global window object. Before you can use it, you should detect whether the browser supports it. -

    ↶ check for HTML5 Storage +

    check for HTML5 Storage 

    function supports_html5_storage() {
   try {
     return 'localStorage' in window && window['localStorage'] !== null;
@@ -90,7 +90,7 @@ 
    Introducing HTML5 Storage
    
   // maybe try dojox.storage or a third-party solution
 }
    -

    ❧ +

    Using HTML5 Storage

    @@ -176,7 +176,7 @@

    Limitations in Current Browsers

    “QUOTA_EXCEEDED_ERR” is the exception that will get thrown if you exceed your storage quota of 5 megabytes. “No” is the answer to the next obvious question, “Can I ask the user for more storage space?” At time of writing (February 2011), no browser supports any mechanism for web developers to request more storage space. Some browsers (like Opera) allow the user to control each site’s storage quota, but it is purely a user-initiated action, not something that you as a web developer can build into your web application. -

    ❧ +

    HTML5 Storage in Action

    @@ -235,7 +235,7 @@

    HTML5 Storage in Action

    gMoveCount = parseInt(localStorage["halma.movecount"]);
    -

    ❧ +

    Beyond Named Key-Value Pairs: Competing Visions

    @@ -243,7 +243,7 @@

    Beyond Named Key-Value Pairs: Competing Visions

    One vision is an acronym that you probably know already: SQL. In 2007, Google launched Gears, an open source cross-browser plugin which included an embedded database based on SQLite. This early prototype later influenced the creation of the Web SQL Database specification. Web SQL Database (formerly known as “WebDB”) provides a thin wrapper around a SQL database, allowing you to do things like this from JavaScript: -

    ↶ actual working code in 4 browsers +

    actual working code in 4 browsers 

    openDatabase('documents', '1.0', 'Local document storage', 5*1024*1024, function (db) {
   db.changeVersion('', '1.0', function (t) {
     t.executeSql('CREATE TABLE docids (id, name)');
@@ -280,7 +280,7 @@ 
    Beyond Named Key-Value Pairs: Competing Visions
    
 
 
    So what can you, as a web developer, do with IndexedDB? At the moment, virtually nothing beyond some technology demos. A year from now? Maybe something. Check the “Further Reading” section for links to some good tutorials to get you started.
 
-
    ❧
+
    
 
 
    Further Reading
    
 
@@ -320,7 +320,7 @@ 
    Further Reading
    
 
  • Firefox 4: An early walk-through of IndexedDB
 
 
-
    ❧
+
    
 
 
    This has been “The Past, Present & Future of Local Storage for Web Applications.” The full table of contents has more if you’d like to keep reading.
 
diff --git a/table-of-contents.html b/table-of-contents.html
index 8a61747..6f0b147 100644
--- a/table-of-contents.html
+++ b/table-of-contents.html
@@ -14,7 +14,7 @@
 
 
 
-
    You are here: Home ” Dive Into HTML5 ”
+
    You are here: Home  Dive Into HTML5 
 
    Table of Contents
    
 
 
@@ -188,7 +188,7 @@ 
    Table of Contents
    
 
 
 
-
    ❧
+
    
 
 
    “If you’re good at something, never do it for free.” —The Joker
    (but that doesn’t mean you should keep it to yourself)
 
diff --git a/video.html b/video.html
index 2498cef..b902abd 100644
--- a/video.html
+++ b/video.html
@@ -9,10 +9,10 @@
 
 
 
-
    You are here: Home ” Dive Into HTML5 ”
+
    You are here: Home  Dive Into HTML5 
 

    Video on the Web
    
 
     
-
    ❧
+
    
 
    Diving In
    
 
 
    Anyone who has visited YouTube.com in the past four years knows that you can embed video in a web page. But prior to HTML5, there was no standards-based way to do this. Virtually all the video you’ve ever watched “on the web” has been funneled through a third-party plugin — maybe QuickTime, maybe RealPlayer, maybe Flash. (YouTube uses Flash.) These plugins integrate with your browser well enough that you may not even be aware that you’re using them. That is, until you try to watch a video on a platform that doesn’t support that plugin.
@@ -29,7 +29,7 @@ 
    Diving In
    
 
 
    But support for the <video> element itself is really only a small part of the story. Before we can talk about HTML5 video, you first need to understand a little about video itself. (If you know about video already, you can skip ahead to What Works on the Web.)
 
-
    ❧
+
    
 
 
    Video Containers
    
 
@@ -47,7 +47,7 @@ 
    Video Containers
    
 
  • Audio Video Interleave, usually with an .avi extension. The AVI container format was invented by Microsoft in a simpler time, when the fact that computers could play video at all was considered pretty amazing. It does not officially support features of more recent container formats like embedded metadata. It does not even officially support most of the modern video and audio codecs in use today. Over time, companies have tried to extend it in generally incompatible ways to support this or that, and it is still the default container format for popular encoders such as MEncoder.
    •  
  
 
-
    ❧
+
    
 
 
    Video Codecs
    
 
@@ -84,7 +84,7 @@ 
    VP8
    
 
 
    In 2010, Google acquired On2 and published the video codec specification and a sample encoder and decoder as open source. As part of this, Google also “opened” all the patents that On2 had filed on VP8, by licensing them royalty-free. (This is the best you can hope for with patents. You can’t actually “release” them or nullify them once they’ve been issued. To make them open source–friendly, you license them royalty-free, and then anyone can use the technologies the patents cover without paying anything or negotiating patent licenses.) As of May 19, 2010, VP8 is a royalty-free, modern codec and is not encumbered by any known patents, other than the patents that On2 (now Google) has already licensed royalty-free.
 
-
    ❧
+
    
 
 
    Audio Codecs
    
 
@@ -132,7 +132,7 @@ 
    Vorbis
    
  
 
    There are open source Vorbis encoders and decoders, including OggConvert (encoder), ffmpeg (decoder), aoTuV (encoder), and libvorbis (decoder). There are also QuickTime components for Mac OS X and DirectShow filters for Windows. 
 
-
    ❧
+
    
 
 
    What Works on the Web
    
 
@@ -208,7 +208,7 @@ 
    Professor Markup Says
    
 
  • Link to all three video files from a single <video> element, and fall back to a Flash-based video player.
 
 
-
    ❧
+
    
 
 
    Licensing Issues with H.264 Video
    
 
@@ -237,7 +237,7 @@ 
    Licensing Issues with H.264 Video
    
 
 
    That last part — about the fee structure for internet broadcasts — has already been amended. The MPEG-LA recently announced that internet streaming would not be charged. That does not mean that H.264 is royalty-free for all users. In particular, encoders (like the one that processes video uploaded to YouTube) and decoders (like the one included in Microsoft Internet Explorer 9) are still subject to licensing fees. See Free as in smokescreen for more information.
 
-
    ❧
+
    
 
 
    Encoding Video With
    Miro Video Converter
    
 
@@ -248,14 +248,14 @@ 
    Encoding Video With
    Miro Video Converter
    
 
    To start, just launch the Miro Video Converter application.
 
 
    
-
    Miro Video Converter main screen ↷
    
+
    Miro Video Converter main screen 
    
 
    Miro Video Converter main screen
 
    
 
 
    Click “Choose file” and select the source video you want to encode.
 
 
    
-
    “Choose file” ↷
    
+
    “Choose file” 
    
 
    Miro Video Converter after choosing a file
 
    
 
@@ -270,55 +270,55 @@ 
    Encoding Video With
    Miro Video Converter
    
 
    Select “WebM” first.
 
 
    
-
    Choosing WebM output ↷
    
+
    Choosing WebM output 
    
 
    Miro Video Converter: choosing WebM output format
 
    
 
 
    Click the “Convert” button and Miro Video Converter will immediately start encoding your video. The output file will be named SOURCEFILE.webm and will be saved in the same directory as the source video.
 
 
    
-
    You’ll be staring at this screen
    for a long time ↷
    
+
    You’ll be staring at this screen
    for a long time 
    
 
    Miro Video Converter: WebM encoding progress
 
    
 
 
    Once the encoding is complete, you’ll be dumped back to the main screen. This time, select “Theora” from the Devices and Formats list.
 
 
    
-
    Time for Theora ↷
    
+
    Time for Theora 
    
 
    Miro Video Encoder: choosing Theora output format
 
    
 
 
    That’s it; press the “Convert” button again to encode your Theora video. The video will be named SOURCEFILE.theora.ogv and will be saved in the same directory as the source video.
 
 
    
-
    Time for a cup of coffee ↷
    
+
    Time for a cup of coffee 
    
 
    Miro Video Encoder: Theora encoding progress
 
    
 
 
    Finally, encode your iPhone-compatible H.264 video by selecting “iPhone” from the Devices and Formats list.
 
 
    
-
    iPhone, not iPhone 4 ↷
    
+
    iPhone, not iPhone 4 
    
 
    Miro Video Encoder: choosing iPhone-compatible output format
 
    
 
 
    For iPhone-compatible video, Miro Video Converter will give you an option to send the encoded file to your iTunes library. I have no opinion on whether you would want to do that, but it’s not necessary for publishing video on the web.
 
 
    
-
    Don’t send to iTunes ↷
    
+
    Don’t send to iTunes 
    
 
    Miro Video Encoder: send to iTunes checkbox
 
    
 
 
    Press the magical “Convert” button and wait. The encoded file will be named SOURCENAME.iphone.mp4 and will be saved in the same directory as the source video.
 
 
    
-
    Do some yoga or something ↷
    
+
    Do some yoga or something 
    
 
    Miro Video Converter: H.264 encoding progress
 
    
 
 
    You should now have three video files alongside your original source video. If you’re satisfied with the video quality, skip ahead to At Last, The Markup to see how to assemble them into a single <video> element that works across browsers. If you’d like to learn more about other tools or video encoding options, read on.
 
-
    ❧
+
    
 
 
    Encoding Ogg Video with Firefogg
    
 
@@ -326,31 +326,31 @@ 
    Encoding Ogg Video with Firefogg
    
 
 
    Firefogg is an open source, GPL-licensed Firefox extension for encoding Ogg video. To use it, you’ll need to install Mozilla Firefox 3.5 or later, then visit firefogg.org.
 
-
    Firefogg home page ↷
    
+
    Firefogg home page 
    
 
    Firefogg home page
 
 
    Click “Install Firefogg.” Firefox will prompt whether you really want to allow the site to install an extension. Click “Allow” to continue.
-
    ↶ Allow Firefogg to install
+
     Allow Firefogg to install
 
    Firefogg: install software
 
 
    Firefox will present the standard software installation window. Click “Install” to continue.
-
    Install Firefogg ↷
    
+
    Install Firefogg 
    
 
    Firefox Software Installation window
 
 
    Click “Restart Firefox” to complete the installation.
-
    ↶ Restart Firefox
+
     Restart Firefox
 
    Firefox Add-ons window after installation
 
 
    After restarting Firefox, firefogg.org will confirm that Firefogg was successfully installed.
-
    Installation successful ↷
    
+
    Installation successful 
    
 
    Firefogg home page after installation
 
 
    Click “Make Ogg Video” to start the encoding process.
-
    ↶ Let’s make some video!
+
     Let’s make some video!
 
    Firefogg: Make Ogg Video
 
 
    Click “Select file” to select your source video.
-
    Select your video file ↷
    
+
    Select your video file 
    
 
    Firefogg: Select file
 
 
    Firefogg has six “tabs”:
@@ -379,18 +379,18 @@ 
    Encoding Ogg Video with Firefogg
    
 
    Firefogg basic quality and resolution control
 
 
    In this example, I’m going to resize the video to half its original width. Notice how Firefogg automatically adjusts the height to match.
-
    Adjust video width and height ↷
    
+
    Adjust video width and height 
    
 
    Firefogg: set video width and height
 
 
    Once you’ve fiddled with all the knobs, click “Save Ogg” to start the actual encoding process. Firefogg will prompt you for a filename for the encoded video.
-
    “Save Ogg” ↷
    
+
    “Save Ogg” 
    
 
    Firefogg: Save Ogg
 
 
    Firefogg will show a nice progress bar as it encodes your video. All you need to do is wait (and wait, and wait)!
-
    ↶ Encoding in progress
+
     Encoding in progress
 
    Firefogg: Encoding progress
 
-
    ❧
+
    
 
 
    Batch Encoding Ogg Video with ffmpeg2theora
    
 
@@ -419,7 +419,7 @@ 
    Batch Encoding Ogg Video with ffmpeg2theora
    
 
 
    The encoded video will be saved in the same directory as the original video, with a .ogv extension added. You can specify a different location and/or filename by passing an --output=/path/to/encoded/video command line flag to ffmpeg2theora.
 
-
    ❧
+
    
 
 
    Encoding H.264 Video with HandBrake
    
 
@@ -430,23 +430,23 @@ 
    Encoding H.264 Video with HandBrake
    
 
    HandBrake comes in two flavors: graphical and command-line. I’ll walk you through the graphical interface first, then we’ll see how my recommended settings translate into the command-line version.
 
 
    After you open the HandBrake application, the first thing to do is select your source video. Click the “Source” dropdown button and choose “Video File” to select a file. HandBrake can take virtually any video file as input, including DV video produced by consumer-level camcorders.
-
    Select your source video ↷
    
+
    Select your source video 
    
 
    HandBrake: select source file
 
 
    HandBrake will complain that you haven’t set a default directory to save your encoded videos. You can safely ignore this warning, or you can open the options window (under the “Tools” menu) and set a default output directory.
-
    ↶ Ignore this
+
     Ignore this
 
    HandBrake: default directory warning
 
 
    On the right-hand side is a list of presets. Selecting the “iPhone & iPod Touch” preset will set most of the options you need.
-
    Select iPhone preset ↷
    
+
    Select iPhone preset 
    
 
    HandBrake: select iPhone preset
 
 
    One important option that is off by default is the “Web optimized” option. Selecting this option reorders some of the metadata within the encoded video so you can watch the start of the video while the rest is downloading in the background. I highly recommend always checking this option. It does not affect the quality or file size of the encoded video, so there’s really no reason not to.
-
    ↶ Always optimize for web
+
     Always optimize for web
 
    HandBrake: select Web Optimized option
 
 
    In the “Picture” tab, you can set the maximum width and height of the encoded video. You should also select the “Keep Aspect Ratio” option to ensure that HandBrake doesn’t smoosh or stretch your video while resizing it.
-
    Set width and height ↷
    
+
    Set width and height 
    
 
    HandBrake: set width, height, and aspect ratio
 
 
    In the “Video” tab, you can set four important options.
@@ -462,33 +462,33 @@ 
    Encoding H.264 Video with HandBrake
    
 
    Ask Professor Markup
    
 
    
 
    
-
    ☞Q: Can I use two-pass encoding on Ogg video too?
    
+
    Q: Can I use two-pass encoding on Ogg video too?
    
 A: Yes, but due to fundamental differences in how the encoder works, you probably don’t need to. Two-pass H.264 encoding almost always results in higher quality video. Two-pass Ogg encoding of Ogg video is only useful if you’re trying to get your encoded video to be a specific file size. (Maybe that is something you’re interested in, but it’s not what these examples show, and it’s probably not worth the extra time for encoding web video.) For best Ogg video quality, use the video quality settings, and don’t worry about two-pass encoding.
 
    
 
    
 
 
 
    In this example, I’ve chosen an average bitrate of 600 kbps, which is quite high for a 320×240 encoded video. (Later in this chapter, I’ll show you a sample video encoded at 200 kbps.) I’ve also chosen 2-pass encoding with a “turbo” first pass.
-
    ↶ Video quality options
+
     Video quality options
 
    HandBrake: set two-pass encoding option
 
 
    In the “Audio” tab, you probably don’t need to change anything. If your source video has multiple audio tracks, you might need to select which one you want in the encoded video. If your video is mostly a person talking (as opposed to music or general ambient sounds), you can probably reduce the audio bitrate to 96 kbps or so. Other than that, the defaults you inherited from the “iPhone” preset should be fine.
-
    Audio quality options ↷
    
+
    Audio quality options 
    
 
    HandBrake: audio codec
 
 
    Next, click the “Browse” button and choose a directory and filename to save your encoded video.
-
    ↶ Set destination filename
+
     Set destination filename
 
    HandBrake: set destination filename
 
 
    Finally, click “Start” to start encoding.
-
    Let’s make some video! ↷
    
+
    Let’s make some video! 
    
 
    HandBrake: start encoding
 
 
    HandBrake will display some progress statistics while it encodes your video.
-
    ↶ Patience, Grasshopper
+
     Patience, Grasshopper
 
    HandBrake: encoding progress
 
-
    ❧
+
    
 
 
    Batch Encoding H.264 Video with HandBrake
    
 
@@ -519,7 +519,7 @@ 
    Batch Encoding H.264 Video with HandBrake
    
 
 
    From top to bottom, this command runs HandBrake with the “iPhone & iPod Touch” preset, resizes the video to 320×240, sets the average bitrate to 600 kbps, enables two-pass encoding with a turbo first pass, reads the file pr6.dv, and encodes it as pr6.mp4. Whew!
 
-
    ❧
+
    
 
 
    Encoding WebM Video with ffmpeg
    
 
@@ -552,7 +552,7 @@ 
    Encoding WebM Video with ffmpeg
    
 
  • -acodec libvorbis specifies that we’re encoding with the Vorbis audio codec. WebM always uses Vorbis audio.
 
 
-
    ❧
+
    
 
 
    At Last, The Markup
    
 
@@ -560,7 +560,7 @@ 
    At Last, The Markup
    
 
 
    HTML5 gives you two ways to include video on your web page. Both of them involve the <video> element. If you only have one video file, you can simply link to it in a src attribute. This is remarkably similar to including an image with an <img src="..."> tag.
 
-
    One video file ↷
    
+
    One video file 
    
 
    <video src="pr6.webm"></video>
    
 
 
    Technically, that’s all you need. But just like an <img> tag, you should always include width and height attributes in your <video> tags. The width and height attributes can be the same as the maximum width and height you specified during the encoding process. Don’t worry if one dimension of the video is a little smaller than that. Your browser will center the video inside the box defined by the <video> tag. It won’t ever be smooshed or stretched out of proportion.
@@ -610,7 +610,7 @@ 
    At Last, The Markup
    
 
 
    Here’s the whole thing:
 
-
    Three (!) video files ↷
    
+
    Three (!) video files 
    
 
    <video width="320" height="240" controls>
   <source src="pr6.mp4"  type="video/mp4; codecs=avc1.42E01E, mp4a.40.2">
   <source src="pr6.webm" type="video/webm; codecs=vp8, vorbis">
@@ -645,7 +645,7 @@ 
    Professor Markup Says
    
 
 
 
-
    ❧
+
    
 
 
    MIME Types Rear Their Ugly Head
    
 
@@ -674,7 +674,7 @@ 
    Professor Markup Shouts
    
 
 
    For even more gory details about configuring your web server, I direct your attention to this excellent article at the Mozilla Developer Center: Configuring servers for Ogg media. (The advice in that article applies to MP4 and WebM video, too.)
 
-
    ❧
+
    
 
 
    What About IE?
    
 
@@ -686,7 +686,7 @@ 
    What About IE?
    
 
 
    That last bit is the key to the whole puzzle: HTML5 specifies that all elements (other than <source> elements) that are children of a <video> element must be ignored altogether. That allows you to use HTML5 video in newer browsers and fall back to Flash gracefully in older browsers, without requiring any fancy JavaScript hacks. You can read more about this technique here: Video For Everybody.
 
-
    ❧
+
    
 
 
    Issues on iPhones and iPads
    
 
@@ -697,7 +697,7 @@ 
    Issues on iPhones and iPads
    
 
  • If you have multiple <source> elements, iOS will not recognize anything but the first one. Since iOS devices only support H.264+AAC+MP4, this effectively means you must always list your MP4 first. This bug is also fixed in iOS 4.0.
 
 
-
    ❧
+
    
 
 
    Issues on Android devices
    
 
@@ -708,7 +708,7 @@ 
    Issues on Android devices
    
 
  • The controls attribute was not supported. There are no ill effects to including it, but Android will not display any user interface controls for a video. You will need to provide your own user interface controls. At a minimum, you should provide a script that starts playing the video when the user clicks the video. This bug is also fixed in Android 2.3.
 
 
-
    ❧
+
    
 
 
    A Complete, Live Example
    
 
@@ -765,7 +765,7 @@ 
    A Complete, Live Example
    
   
 
 
-
    ❧
+
    
 
 
    Further Reading
    
 
@@ -790,7 +790,7 @@ 
    Further Reading
    
 
  • Kaltura HTML5 Video & Media JavaScript Library
 
 
-
    ❧
+
    
 
 
    This has been “Video on the Web.” The full table of contents has more if you’d like to keep reading.
 
diff --git a/workers.html b/workers.html
index 1a4befa..1b8a61c 100644
--- a/workers.html
+++ b/workers.html
@@ -8,15 +8,15 @@
 body{counter-reset:h1 8}
 
 
-
    You are here: Home ” Dive Into HTML5 ”
+
    You are here: Home  Dive Into HTML5 
 

    Thread The Needle,
    Thread The Script
    
 
     
-
    ❧
+
    
 
    Diving In
    
 
 
    GFIXME
 
-
    ❧
+
    
 
 
    Further Reading
    
 
@@ -30,7 +30,7 @@ 
    Further Reading
    
 
  • 
 
 
-
    ❧
+
    
 
 
    This has been “Thread The Needle, Thread The Script.” The full table of contents has more if you’d like to keep reading.