├── .gitignore ├── .htaccess ├── Chunkfive.eot ├── Chunkfive.otf ├── Chunkfive.svg ├── Chunkfive.ttf ├── bg.png ├── book_m.jpg ├── cover.png ├── errata ├── ch01.html ├── ch02.html ├── ch04.html └── ch12.html ├── examples ├── .htaccess ├── ch02 │ ├── figure.html │ └── welcome.jpg ├── ch03 │ ├── form-checkValidate.html │ ├── input-support.html │ ├── novalidate.html │ ├── onforminput.html │ ├── overriding-defaults.html │ ├── pattern.html │ ├── polyfilling.html │ └── validity.html ├── ch04 │ ├── ch4-full-fallback.html │ ├── custom-controls.html │ ├── custom-controls.html- │ ├── figure1.html │ ├── figure3.html │ ├── leverage-a-synergy.mp4 │ ├── leverage-a-synergy.ogv │ ├── video-event-order.html │ └── video-onevent-order.html ├── ch05 │ ├── animate-with-video.html │ ├── animate.html │ ├── animate2.html │ ├── authors.jpg │ ├── bruce-ball.png │ ├── drawimage-split.html │ ├── drawimage.html │ ├── getimagedata.html │ ├── glass-balls.psd │ ├── gradients.html │ ├── hello-world.html │ ├── invert-dropped-images.html │ ├── leverage-a-synergy.mp4 │ ├── leverage-a-synergy.ogv │ ├── path-stickman.html │ ├── pattern-fill-img.html │ ├── pattern-fill.html │ ├── pulsate.html │ ├── radial-gradients.html │ ├── remy-ball.png │ ├── remysharp_avatar.jpg │ ├── rotate.html │ ├── todataurl.html │ ├── tranlate-rotate-scale.html │ └── translate.html ├── ch06 │ └── html5-tweet-time-range.html ├── ch07 │ └── time │ │ ├── fallback-server-time.js │ │ ├── index.html │ │ ├── server-time.js │ │ ├── time.css │ │ ├── time.js │ │ └── time.manifest ├── ch08 │ ├── aria-support.html │ ├── brucel.jpg │ ├── content-types.html │ ├── custom-drag-icon.html │ ├── drag-anything.html │ ├── dropEffect.html │ ├── events.html │ ├── interrogate.html │ ├── rem.jpg │ ├── simple-ie.html │ └── simple.html └── ch10 │ ├── chat-socket.js │ ├── echo.html │ ├── echo.js │ ├── message-recv.html │ ├── message-send.html │ ├── passing-data.html │ ├── passing-data.js │ ├── prime.html │ ├── prime.js │ ├── shared-worker-inner.html │ ├── shared-worker.html │ ├── shared-worker.js │ ├── subworkers.js │ ├── time.html │ ├── web-sockets.js │ └── worker-time.js ├── ih5.css ├── index.html ├── index.php └── links ├── ch01.html ├── ch02.html ├── ch03.html ├── ch04.html ├── ch05.html ├── ch06.html ├── ch07.html ├── ch08.html ├── ch09.html ├── ch10.html └── intro.html /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /.htaccess: -------------------------------------------------------------------------------- 1 | 2 | RewriteEngine On 3 | RewriteBase / 4 | Options +Indexes 5 | 6 | # no-www.org 7 | RewriteCond %{HTTP_HOST} ^www\.introducinghtml5\.com$ [NC] 8 | RewriteRule ^(.*)$ http://introducinghtml5.com/$1 [R=301,L] 9 | 10 | -------------------------------------------------------------------------------- /Chunkfive.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/introducinghtml5/f8407b70c1bfb27fa00d7f2270fba7d9703081a9/Chunkfive.eot -------------------------------------------------------------------------------- /Chunkfive.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/introducinghtml5/f8407b70c1bfb27fa00d7f2270fba7d9703081a9/Chunkfive.otf -------------------------------------------------------------------------------- /Chunkfive.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 21 | 22 | 24 | 26 | 27 | 29 | 31 | 32 | 34 | 36 | 38 | 39 | 40 | 42 | 43 | 45 | 47 | 48 | 49 | 50 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 61 | 63 | 65 | 67 | 69 | 70 | 71 | 72 | 74 | 75 | 76 | 77 | 79 | 80 | 82 | 84 | 86 | 88 | 90 | 91 | 93 | 95 | 96 | 98 | 99 | 100 | 102 | 104 | 106 | 108 | 110 | 111 | 113 | 115 | 117 | 118 | 120 | 121 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /Chunkfive.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/introducinghtml5/f8407b70c1bfb27fa00d7f2270fba7d9703081a9/Chunkfive.ttf -------------------------------------------------------------------------------- /bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/introducinghtml5/f8407b70c1bfb27fa00d7f2270fba7d9703081a9/bg.png -------------------------------------------------------------------------------- /book_m.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/introducinghtml5/f8407b70c1bfb27fa00d7f2270fba7d9703081a9/book_m.jpg -------------------------------------------------------------------------------- /cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/introducinghtml5/f8407b70c1bfb27fa00d7f2270fba7d9703081a9/cover.png -------------------------------------------------------------------------------- /errata/ch01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Introducing HTML5: chapter 1 errata 4 | 5 |

Errata for Chapter 1

6 |
7 |
1,2 editions, Page 2
8 |

The link to regarding the utf-7 security risk doesn't work any more. See http://blog.php-security.org/archives/38-Wikipedia-UTF-7-XSSCross-Site-Scripting-Hole-Plugged.html instead.[January 2012]

9 |
10 | 11 |
2nd edition, Page 10, sidebar "why oh why is there no <content> element?
12 |

Now there is! It's called <main>. Use it once per page (like ARIA's role="main" to surround your main content, eg don't include header, footer, main nav etc.) The spec says:

13 |

The main content area of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms (unless the document or applications main function is that of a search form) …

14 |

Authors are advised to use ARIA role="main" attribute on the main element until user agents implement the required role mapping.

15 |
16 |
17 | 18 |
19 | 20 | -------------------------------------------------------------------------------- /errata/ch02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Introducing HTML5: chapter 2 errata 4 | 5 |

Errata for Chapter 2

6 |
7 |
1,2 editions, Page 26 - 27
8 |

The <time> element was removed, and restored. It's not fully specified yet, but the good news is that the new incarnation is more powerful than it was before.

9 |

Previously, you could only mark up precise dates. So, 13 November 1905 could be expressed in HTML <time datetime="1905-11-13"> but November 1905 couldn't be. This is a problem for historians where sometimes the precise date isn't known.

10 | 11 |

Now, "fuzzy dates" are possible:

12 | 17 | 18 |

As before, times are expressed using the 24 hour clock. Now, you can separate the date and time with a space rather than a "T" (but you don't have to). So both of these are valid:

19 | 20 | 24 | 25 |

You can localise times, as before. Appending "Z" to the timezone indicates UTC (a way of saying "GMT" without it being comprehensible to normal people). Otherwise, use an offset:

26 | 31 | 32 | 33 |

Durations

34 | 35 |

In New! Improved! HTML5 <time>, you can represent durations, with the prefix "P" for "period".

36 | 37 |

The datetime attribute "D" for days, "H" for hours, "M" for minutes and "XQ" for seconds. Just kidding - that's "S".

38 | 39 |

You can separate them with spaces (but you don't have to). So <time datetime="P4D"> is a duration of 4 days, as is <time datetime="P 4 D">.

40 | 41 |

Using a "T" after the "P" marker allows you to be more precise: <time datetime="PT23H 9M 2.343S"> is a duration of 23 hours, 9 minutes and 2.345 seconds.

42 | 43 |

Alternatively, you can use a duration time component.

44 | 45 |

Whichever you choose, it's represented internally as a number of seconds. Because of this, you can't specify a duration in terms of months, because a month isn't a precise number of seconds; a month can last from 28 to 31 days. Similarly, a year isn't a precise number of seconds; it's 12 months and February sometimes has an extra day.

46 | 47 |

You still can't represent dates before the Christian era, as years can't be negative. Neither can you indicate date ranges. To mark up From "21/02/2012 to 25/02/2012", use two separate <time> elements.

48 | 49 |

pubdate

50 | 51 |

The pubdate attribute (a boolean that indicates that this particular date is the publication date of the parent <article> (or, if there is none, the whole document) has gone. However (hat-tip @mathias and @moddular) you can use HTML5 microdata's equivalent itemprop=datePublished for appropriate itemtypes. In this example, we use schema.org's Blog schema:

52 | 

 53 | <article itemscope itemtype="http://schema.org/Blog">
 54 |   <header>
 55 |     <h1>Blog post</h1>
 56 |     <time datetime="2012-07-30" itemprop="datePublished">Published 30th July 2012</time>
 57 |   </header>
 58 | …
 59 | </article>
 60 |
61 |
62 |
1 edition, Page 28; 2 edition, Page 29 (Using <blockquote> <footer>s) 63 |
64 |

After discussion on the mailing list, using <footer> inside a <blockquote> to attribute the quotation is wrong and evil (the attribution isn't actually part of the quotation.)

65 |

A pattern might be

66 | 
 67 | <figure>
 68 | <blockquote>
 69 | Lawks-a-lawdy, my bottom's on fire!
 70 | </blockquote>
 71 | <figcaption>Joan of Arc</figcaption>
 72 | </figure>
 73 | 
 74 |
75 |

Hixie writes

76 |
I expect we will eventually create a <credit> element that goes inside 77 | <blockquote>, <figure> or <figcaption>, <caption>, and maybe other 78 | contexts as well. At the moment, I'm deferring adding it so that we can 79 | see how <figure> and the other new elements do in the wild.
80 |

81 |
82 | 83 |
1 edition page 33, 2 edition page 35: <hgroup>
84 |

The <hgroup> element has been removed. So how do you now mark up taglines and subheaders? Simply: as you always have. The spec now discusses this in the Common idioms without dedicated elements section.

85 | 86 |

Three methods are suggested. The simplest is simply with punctuation:

87 | 88 | 
<h1>The Lord of the Rings: The Two Towers</h1>
 89 | 
 90 |
91 | 92 |

The second is by using a <span> inside a heading element that allows you to style the secondary part, for example with h1 span {display:block; font-style:italic;}:

93 | 94 | 
<h1>The Mothers 
 95 |    <span>Fillmore East - June 1971</span> 
 96 | </h1>
 97 | 
 98 |
99 | 100 |

The third (and the one I generally use)

101 | 102 | 
<header>
103 | <h1>The Mothers</h1>
104 | <p>Fillmore East - June 1971</p>
105 | </header>
106 | 
107 |
108 |
109 |
1 edition, Page 50 (first paragraph)
110 |

"Some of these obviously match HTML5 elements such as <article>, <form>, <heading> …"

111 |

<heading> should read <header>. What a numpty, eh?

112 |
1 edition, Page 53, <figure> section
113 |
114 |

See the example, coded:

115 | 

116 | <figure>
117 | <img src=welcome.jpg 
118 |   alt=""> 
119 | <figcaption>
120 | Bruce and Remy welcome questions
121 | <small>Photo © Bruce's mum</small>
122 | </figcaption>
123 | </figure>
124 |
125 |

Since the book went to press, Steve Faulkner of The Paciello Group pointed out a problem with the alt text in this example.

126 |

In figures where the figcaption text tells you all you need to know ("Angelina Jolie and Remy Sharp pose on the red carpet at the premier of 'HTML5! the musical'"), don't duplicate this in alt text.

127 |

This is what I've done above, except that I've made a mistake: if an image has empty alt text (eg alt="") it is regarded as being presentational only, and having an implied ARIA role=presentation which would remove the element from the page's accessibility tree (no user agent does this, yet, but that's the general plan).

128 |

As the image is not purely presentational (if it were, we wouldn't be marking it up as a figure and giving it a caption) we shouldn't have empty alt, we should use no alternate text at all, e.g.

129 | <img src=welcome.jpg> 130 |

Steve has written a very useful document HTML5: Techniques for providing useful text alternatives (that is a First Public Working Draft, therefore very, very susceptible to change) in which he writes

131 |
132 | Circumstances in which it is not appropriate to use an empty or null alt attribute: 133 | An image is contained within a figure element and has an associated caption provided using the figcaption element. 134 | 135 |
136 |

On the other hand, you may think that the example above needs alt text 137 | <img src=welcome.jpg alt="Bruce and Remy glower menacingly into the camera"> because otherwise the joke isn't communicated to a screenreader user.

138 | 139 |

As an accessibility filip, it's useful to add ARIA attributes to associate the image with the caption until browsers "understand" the figure element and do this automatically.

140 |

When there is no alt text, use aria-labelledby to associate the id of the figcaption to the img:

141 | 

<figure>
142 | <img src=welcome.jpg aria-labelledby=figcap219>
143 | <figcaption id=figcap219>
144 | Angelina Jolie and Remy Sharp pose on the red carpet at the premier of 'HTML5! the musical'
145 | </figcaption>
146 | </figure>
147 |

If there is alt text, use aria-describedby:

148 | 
<figure>
149 | <img src=welcome.jpg 
150 | alt="Bruce and Remy glower menacingly into the camera"
151 | aria-describedby=figcap219>
152 | <figcaption id=figcap219>
153 | Bruce and Remy welcome questions
154 | <small>Photo © Bruce's mum</small>
155 | </figcaption>
156 | </figure>
157 |

158 |
159 |
160 | 161 | -------------------------------------------------------------------------------- /errata/ch04.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Introducing HTML5: chapter 4 errata 4 | 5 |

Errata for Chapter 4

6 |
7 |
Edition 1: Page 99 Code Sample
8 |

Not our error, but Steve Jobs'. The iPad (or some iPads) has a bug whereby they can only see the first <source>> element. To get around this, simply ensure that your .mp4 movie appears before your nourishing royalty-free Ogg Theora or WebM movies, so reverse lines 2 and 3.

9 |
10 |
11 |
Edition 1: Page 140 - "Video conferencing, augmented reality"
12 |
13 |

Our margin note saying that Opera will implement getUserMedia on the opera object is incorrect. In its Lab builds, it's on the navigator object as specified.

14 |

The API has slightly changed; it now uses JSON rather than string for options, eg navigator.getUserMedia({'video': true, 'audio': false}, successcallbackFunction, errorcallbackFunction) .

15 |

The spec has been split out from HTML5; it's now part of WebRTC. [January 2012]

16 |
17 | -------------------------------------------------------------------------------- /errata/ch12.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Introducing HTML5: chapter 12 errata 4 | 5 |

Errata for Chapter 12

6 |
7 |
2 edition, Page 279
8 |

We reference diveintohtml5.org which has been removed by Mark Pilgrim, its author. We've mirrored it at html5doctor.com [January 2012].

9 |
10 |
2nd edition, page 278
11 |

The code example: if (!'open' in document.createElement('details')) should read: if (!('open' in document.createElement('details')) (ensuring the ! after the in test) [February 2012]

12 |
13 | 14 | -------------------------------------------------------------------------------- /examples/.htaccess: -------------------------------------------------------------------------------- 1 | 2 | Options +FollowSymLinks +ExecCGI 3 | Options +Indexes 4 | RewriteEngine On 5 | RewriteBase /examples/ 6 | 7 | RewriteCond "%{REQUEST_FILENAME}.html" -f 8 | RewriteRule ^(.*)$ $1.html [L] 9 | -------------------------------------------------------------------------------- /examples/ch02/figure.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Figure example: Introducing HTML5, chapter 2, p53 6 | 26 | 27 | 28 |

Example of <figure> from p53

29 |
30 | 32 |
33 | Bruce and Remy welcome questions 34 | Photo © Bruce's mum 35 |
36 |
37 |

See errata for this example. 38 | 39 | -------------------------------------------------------------------------------- /examples/ch02/welcome.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/introducinghtml5/f8407b70c1bfb27fa00d7f2270fba7d9703081a9/examples/ch02/welcome.jpg -------------------------------------------------------------------------------- /examples/ch03/form-checkValidate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JavaScript checkValidate on form elements 6 | 24 | 25 | 26 |

27 |
28 | Round one 29 |
30 |
31 | 32 |
33 | 34 |
35 | Round two 36 |
37 |
38 | 39 |
40 | 41 |
42 |
43 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /examples/ch03/input-support.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Testing input support 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 | 23 | 24 | -------------------------------------------------------------------------------- /examples/ch03/novalidate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | formnovalidate 6 | 23 | 24 | 25 |
    26 |
    27 | Some bits about you 28 |
    29 |
    30 |
    31 |
    won't validate the form
    32 |
    33 |

    Now imagine there's lots more to this form that you'd want to save as you go along...and then finally: submit

    34 |
    I will validate the form
    35 |
    36 | 37 | 38 | -------------------------------------------------------------------------------- /examples/ch03/onforminput.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | onforminput colour picker 6 | 28 | 29 | 30 |
    31 |
    32 | Colour picker 33 |
    360°
    34 |
    %
    35 |
    %
    36 |
    0-1
    37 |
    0
    38 |
    0
    39 |
    40 |
    41 |
    42 | 65 | 66 | -------------------------------------------------------------------------------- /examples/ch03/overriding-defaults.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Over riding default validation 6 | 11 | 12 | 13 |
    14 |
    15 | Typical validation 16 | 17 | 18 |
    19 |
    20 | 21 |
    22 |
    23 | Pirate speak validation 24 | 25 | 26 |
    27 |
    28 | 29 | 35 | 36 | -------------------------------------------------------------------------------- /examples/ch03/pattern.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | pattern 6 | 7 | 8 |
    9 | 10 | 11 |
    12 | 13 | -------------------------------------------------------------------------------- /examples/ch03/polyfilling.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | placeholder and autofocus pollyfilling 6 | 9 | 10 | 11 |

    Example of placeholder & autofocus

    12 | 13 | 14 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /examples/ch03/validity.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JavaScript validity on form fields 6 | 24 | 25 | 26 |
    27 |
    28 | Some bits about you 29 |
    30 |
    31 |
    32 |
    33 | 34 |
    35 | 52 | 73 | 74 | -------------------------------------------------------------------------------- /examples/ch04/ch4-full-fallback.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Introducing HTML5: Chapter 4 - full fallback example 4 | -------------------------------------------------------------------------------- /examples/ch04/custom-controls.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Video custom controls 6 | 146 | 147 | 148 |
    149 |
    150 |
    151 | 152 |
    0:00
    153 |
    0:00
    154 |
    155 |
    156 | 162 |
    163 | 167 | 329 | 330 | -------------------------------------------------------------------------------- /examples/ch04/custom-controls.html-: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Video custom controls 6 | 146 | 147 | 148 |
    149 |
    150 |
    151 | 152 |
    0:00
    153 |
    0:00
    154 |
    155 |
    156 | 162 |
    163 | 167 | 335 | 336 | 337 | -------------------------------------------------------------------------------- /examples/ch04/figure1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Introducing HTML5: Chapter 4 - figure 1 example 4 |

    Video and legacy browser fallback

    5 | -------------------------------------------------------------------------------- /examples/ch04/figure3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Introducing HTML5: Chapter 4 - figure 1 example 4 |

    Video and legacy browser fallback

    5 | -------------------------------------------------------------------------------- /examples/ch04/leverage-a-synergy.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/introducinghtml5/f8407b70c1bfb27fa00d7f2270fba7d9703081a9/examples/ch04/leverage-a-synergy.mp4 -------------------------------------------------------------------------------- /examples/ch04/leverage-a-synergy.ogv: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/introducinghtml5/f8407b70c1bfb27fa00d7f2270fba7d9703081a9/examples/ch04/leverage-a-synergy.ogv -------------------------------------------------------------------------------- /examples/ch04/video-event-order.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Video events 6 | 10 | 11 | 12 |
      13 | 19 | 20 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /examples/ch04/video-onevent-order.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Video [on]events test 6 | 10 | 11 | 12 |
        13 | 19 | 20 | 34 |

        In this version of the script, the JavaScript is using video.onevent = fn to bind the events. This doesn't work well in Webkit based browses (Chrome & Safari), in that it doesn't bind the events at all.

        35 | 36 | -------------------------------------------------------------------------------- /examples/ch05/animate-with-video.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | simple animation 5 | 10 | 11 | 12 | 13 | 17 | 113 | 114 | -------------------------------------------------------------------------------- /examples/ch05/animate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | simple animation 5 | 9 | 10 | 11 | 12 | 89 | 90 | -------------------------------------------------------------------------------- /examples/ch05/animate2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | simple animation 5 | 9 | 10 | 11 | 12 | 63 | 64 | -------------------------------------------------------------------------------- /examples/ch05/authors.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/introducinghtml5/f8407b70c1bfb27fa00d7f2270fba7d9703081a9/examples/ch05/authors.jpg -------------------------------------------------------------------------------- /examples/ch05/bruce-ball.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/introducinghtml5/f8407b70c1bfb27fa00d7f2270fba7d9703081a9/examples/ch05/bruce-ball.png -------------------------------------------------------------------------------- /examples/ch05/drawimage-split.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | drawImage with video 5 | 11 | 12 | 13 | 14 | 18 | 57 | 58 | -------------------------------------------------------------------------------- /examples/ch05/drawimage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | drawImage with video 5 | 11 | 12 | 13 | 14 | 18 |
        19 |

        Leverage Mallets

        20 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        21 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        22 |
        23 | 69 | 70 | -------------------------------------------------------------------------------- /examples/ch05/getimagedata.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | getImageData to invert image colours 5 | 9 | 10 | 11 | 12 | 33 | 34 | -------------------------------------------------------------------------------- /examples/ch05/glass-balls.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/introducinghtml5/f8407b70c1bfb27fa00d7f2270fba7d9703081a9/examples/ch05/glass-balls.psd -------------------------------------------------------------------------------- /examples/ch05/gradients.html: -------------------------------------------------------------------------------- 1 | 2 | gradient fills 3 | 8 | 9 | -------------------------------------------------------------------------------- /examples/ch05/hello-world.html: -------------------------------------------------------------------------------- 1 | 2 | canvas hello world 3 | 4 | 5 | -------------------------------------------------------------------------------- /examples/ch05/invert-dropped-images.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Drop images and invert them 5 | 9 | 10 | 11 | 12 | 33 | 34 | -------------------------------------------------------------------------------- /examples/ch05/leverage-a-synergy.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/introducinghtml5/f8407b70c1bfb27fa00d7f2270fba7d9703081a9/examples/ch05/leverage-a-synergy.mp4 -------------------------------------------------------------------------------- /examples/ch05/leverage-a-synergy.ogv: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/introducinghtml5/f8407b70c1bfb27fa00d7f2270fba7d9703081a9/examples/ch05/leverage-a-synergy.ogv -------------------------------------------------------------------------------- /examples/ch05/path-stickman.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | path API example: stickman 5 | 6 | 7 | 8 | 9 | 58 | 59 | -------------------------------------------------------------------------------- /examples/ch05/pattern-fill-img.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | pattern fill with an image 5 | 10 | 11 | 12 | 13 | 29 | 30 | -------------------------------------------------------------------------------- /examples/ch05/pattern-fill.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | pattern fill with video 5 | 6 | 7 | 8 | 24 | 25 | 26 | 30 | 64 | 65 | -------------------------------------------------------------------------------- /examples/ch05/pulsate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Pulsate - Canvas version 7 | 8 | 9 | 10 | 11 | 21 | 22 | 23 |
        24 | HTML5 version of Pulsate using Canvas & <audio>, by @delphiki
        25 | Piano sounds by @Geoffrey_C
        26 | Flash original version: http://lab.andre-michelle.com/pulsate
        27 | Easily modified pulsate using @rem & @brucel by rem
        28 |
        29 | 30 |
        31 | 32 | Your browser does not support Canvas. 33 | 34 | 159 | 160 | -------------------------------------------------------------------------------- /examples/ch05/radial-gradients.html: -------------------------------------------------------------------------------- 1 | 2 | gradient fills 3 | 8 | 9 | -------------------------------------------------------------------------------- /examples/ch05/remy-ball.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/introducinghtml5/f8407b70c1bfb27fa00d7f2270fba7d9703081a9/examples/ch05/remy-ball.png -------------------------------------------------------------------------------- /examples/ch05/remysharp_avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/introducinghtml5/f8407b70c1bfb27fa00d7f2270fba7d9703081a9/examples/ch05/remysharp_avatar.jpg -------------------------------------------------------------------------------- /examples/ch05/rotate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | canvas hello world 5 | 9 | 10 | 11 | 12 | 68 | 69 | -------------------------------------------------------------------------------- /examples/ch05/todataurl.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | canvas toDataURL 5 | 6 | 7 | 8 | 9 | 24 | 25 | -------------------------------------------------------------------------------- /examples/ch05/tranlate-rotate-scale.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | pattern fill with video 5 | 11 | 12 | 13 | 14 |

        See me move?

        15 | 50 | 51 | -------------------------------------------------------------------------------- /examples/ch05/translate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | translate canvas helper 5 | 8 | 9 | 10 | 11 | 36 | 37 | -------------------------------------------------------------------------------- /examples/ch06/html5-tweet-time-range.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML5 tweet time range 6 | 9 | 10 | 11 |
        12 |
        13 | Select a time range of recent HTML5 tweets 14 | 15 | 16 | 17 | 18 |
        19 |
        20 | 21 | 77 | 78 | -------------------------------------------------------------------------------- /examples/ch07/time/fallback-server-time.js: -------------------------------------------------------------------------------- 1 | var servertime = "unavailable, you need to be connected to get the server time"; -------------------------------------------------------------------------------- /examples/ch07/time/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Your clock and mine 6 | 7 | 8 | 9 |

        The time on your computer is coming and the time on the server is being got

        10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/ch07/time/server-time.js: -------------------------------------------------------------------------------- 1 | var servertime = 1267435767529; -------------------------------------------------------------------------------- /examples/ch07/time/time.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: helvetica, arial; 3 | padding: 20px; 4 | } 5 | 6 | span { 7 | font-weight: bold; 8 | } 9 | 10 | -------------------------------------------------------------------------------- /examples/ch07/time/time.js: -------------------------------------------------------------------------------- 1 | var yourtimeEl = document.getElementById('yourtime'), 2 | servertimeEl = document.getElementById('servertime'), 3 | startTime = new Date().getTime(), 4 | liveServerTime = typeof servertime == "number"; 5 | 6 | (function () { 7 | var t = new Date(), 8 | d = t.getTime() - startTime; 9 | 10 | yourtimeEl.innerHTML = niceTime(t); 11 | servertimeEl.innerHTML = liveServerTime ? niceTime(new Date(servertime + d)) : servertime; 12 | 13 | setTimeout(arguments.callee, 1000); 14 | })(); 15 | 16 | function niceTime(t) { 17 | return t.getHours() + ':' + two(t.getMinutes()) + ':' + two(t.getSeconds()); 18 | } 19 | 20 | function two(s) { 21 | return (s+'').length == 2 ? s : '0' + s; 22 | } 23 | -------------------------------------------------------------------------------- /examples/ch07/time/time.manifest: -------------------------------------------------------------------------------- 1 | CACHE MANIFEST 2 | 3 | # version 10 4 | 5 | CACHE: 6 | index.html 7 | time.js 8 | time.css 9 | 10 | FALLBACK: 11 | server-time.js fallback-server-time.js -------------------------------------------------------------------------------- /examples/ch08/aria-support.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Drag and Drop with ARIA support 6 | 21 | 22 | 23 |

        Drag the images below over the grey drop zone to capture their drop data: the backgroundColor.

        24 |
        25 |
        26 |
        27 |
        28 |
        29 |
        30 | 74 | 75 | -------------------------------------------------------------------------------- /examples/ch08/brucel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/introducinghtml5/f8407b70c1bfb27fa00d7f2270fba7d9703081a9/examples/ch08/brucel.jpg -------------------------------------------------------------------------------- /examples/ch08/content-types.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Simple Drag and Drop 6 | 13 | 14 | 15 |

        Drag the images below over the grey drop zone to capture their drop data: the src.

        16 |
        17 | Remy Sharp 18 | Bruce Lawson 19 |
        20 |
        21 |

        I'll show you Twitter screen names

        22 |
        23 |
        24 |

        I'll copy text

        25 |
        26 |
        27 |

        I accept png images from your desktop (or somewhere on your computer) - but I only work in Firefox

        28 |
        29 | 82 | 83 | -------------------------------------------------------------------------------- /examples/ch08/custom-drag-icon.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Custom Drag and Drop Icon 6 | 17 | 18 | 19 |

        Drag our avatars to see a custom drag and drop icon against the mouse.

        20 |
        21 |
        22 |
        23 | 56 | 57 | -------------------------------------------------------------------------------- /examples/ch08/drag-anything.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Simple Drag and Drop 6 | 21 | 22 | 23 |

        Drag the images below over the grey drop zone to capture their drop data: the backgroundColor.

        24 |
        25 |
        26 |
        27 |
        28 |
        29 |
        30 | 57 | 58 | -------------------------------------------------------------------------------- /examples/ch08/dropEffect.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Simple Drag and Drop 6 | 16 | 17 | 18 |

        Drag any part of the text below to the textarea below to see it being moved from the current position to the textarea element.

        19 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        20 | 21 | 47 | 48 | -------------------------------------------------------------------------------- /examples/ch08/events.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Simple Drag and Drop 6 | 14 | 15 | 16 |

        Drag the images below over the grey drop zone to capture their drop data: the src.

        17 | @rem 18 | @brucel 19 |
        20 |
        21 | 57 | 58 | -------------------------------------------------------------------------------- /examples/ch08/interrogate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Interrogate content types 6 | 12 | 13 | 14 |

        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        15 |
          16 | 48 | 49 | -------------------------------------------------------------------------------- /examples/ch08/rem.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/introducinghtml5/f8407b70c1bfb27fa00d7f2270fba7d9703081a9/examples/ch08/rem.jpg -------------------------------------------------------------------------------- /examples/ch08/simple-ie.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Simple Drag and Drop 6 | 13 | 14 | 15 |

          Drag the images below over the grey drop zone to capture their drop data: the src.

          16 | @rem 17 | @brucel 18 |
          19 | 34 | 35 | -------------------------------------------------------------------------------- /examples/ch08/simple.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Simple Drag and Drop 6 | 13 | 14 | 15 |

          Drag the images below over the grey drop zone to capture their drop data: the src.

          16 | @rem 17 | @brucel 18 |
          19 | 34 | 35 | -------------------------------------------------------------------------------- /examples/ch10/chat-socket.js: -------------------------------------------------------------------------------- 1 | var socket = new WebSocket("ws://my-chat-server.com:8080/"), 2 | me = getUsername(); 3 | 4 | socket.onmessage = function(event) { 5 | var data = JSON.parse(event.data); 6 | 7 | if (data.action == 'joined') { 8 | initiliseChat(); 9 | } else { 10 | showNewMessage(data.who, data.text); 11 | } 12 | }; 13 | 14 | socket.onclose = function () { 15 | socket.send(JSON.stringify({ 16 | action: 'logoff', 17 | username: me 18 | })); 19 | showDisconnectMsg(); 20 | }; 21 | 22 | socket.onopen = function() { 23 | socket.send(JSON.stringify({ 24 | action: 'join', 25 | username: me 26 | })); 27 | }; 28 | -------------------------------------------------------------------------------- /examples/ch10/echo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Worker sandbox 6 | 20 | 21 | 22 |
          23 |

          console to inspect the contents of a worker

          24 | 25 |
          26 |
          27 | 28 |
          29 | 30 | 31 | 93 | 94 | -------------------------------------------------------------------------------- /examples/ch10/echo.js: -------------------------------------------------------------------------------- 1 | (function (worker) { 2 | 3 | worker.onmessage = function (event) { 4 | var rawoutput = exec(event.data); 5 | 6 | worker.postMessage(stringify({ 7 | html: '
        1. ' + event.data + '
          ' + stringify(rawoutput).replace(/[<>&]/g, function (m) { return {'&':'&','>':'>','<':'<'}[m];}) + '
          2. ' 8 | })); 9 | }; 10 | 11 | // custom because I want to be able to introspect private objects and functions 12 | function stringify(o, simple) { 13 | var json = '', i, type = ({}).toString.call(o), parts = []; 14 | 15 | if (type == '[object String]') { 16 | json = '"' + o.replace(/"/g, '\\"') + '"'; 17 | } else if (type == '[object Array]') { 18 | json = '['; 19 | for (i = 0; i < o.length; i++) { 20 | parts.push(stringify(o[i])); 21 | } 22 | json += parts.join(', ') + ']'; 23 | json; 24 | } else if (type == '[object Object]') { 25 | json = '{'; 26 | for (i in o) { 27 | parts.push(stringify(i) + ': ' + stringify(o[i])); 28 | } 29 | json += parts.join(', ') + '}'; 30 | } else if (type == '[object Number]') { 31 | json = o+''; 32 | } else if (type == '[object Boolean]') { 33 | json = o ? 'true' : 'false'; 34 | } else if (type == '[object Function]') { 35 | json = o.toString(); 36 | } else if (o == null) { 37 | json = 'null'; 38 | } else if (o == undefined) { 39 | json = 'undefined'; 40 | } else if (simple == undefined) { 41 | json = o.toString() + '{\n'; 42 | for (i in o) { 43 | parts.push(i + ': ' + stringify(o[i], true)); 44 | } 45 | json += parts.join(',\n') + '\n}'; 46 | } else { 47 | json = '"' + o + '"'; 48 | } 49 | return json.replace(/\n/g, '\\n'); 50 | } 51 | 52 | function exec(string) { 53 | try { 54 | string = eval(string); 55 | } catch (e) { 56 | string = e.message; 57 | } 58 | 59 | return string; 60 | } 61 | 62 | var console = { 63 | log: function (s) { 64 | return s; 65 | }, 66 | dir: function (o) { 67 | var result = [o.toString() + '{']; 68 | for (var k in o) { 69 | result.push('"' + k + '": "' + o[k] + '"'); 70 | } 71 | result.push('}'); 72 | return result.join("\n"); 73 | } 74 | }; 75 | 76 | })(this); -------------------------------------------------------------------------------- /examples/ch10/message-recv.html: -------------------------------------------------------------------------------- 1 | 2 | Fav intruments 3 | -------------------------------------------------------------------------------- /examples/ch10/message-send.html: -------------------------------------------------------------------------------- 1 | 2 | Messaging API 3 | 4 | 5 | -------------------------------------------------------------------------------- /examples/ch10/passing-data.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Passing data back and forth 6 | 7 | 8 |

          Testing passing of data and having it internally use JSON

          9 | 18 | 19 | -------------------------------------------------------------------------------- /examples/ch10/passing-data.js: -------------------------------------------------------------------------------- 1 | onmessage = function (event) { 2 | postMessage(JSON.stringify(JSON.parse(event.data))); 3 | } 4 | 5 | onconnect = function () { 6 | postMessage('Hello!'); 7 | } -------------------------------------------------------------------------------- /examples/ch10/prime.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Searching for a prime using workers 5 | 6 | 7 | 8 |

          9 | 10 | 51 | 52 | -------------------------------------------------------------------------------- /examples/ch10/prime.js: -------------------------------------------------------------------------------- 1 | onmessage = function (event) { 2 | // doesn't matter what the message is, just start the job 3 | run(); 4 | }; 5 | 6 | function run() { 7 | var n = 1; 8 | search: while (true) { 9 | n += 1; 10 | for (var i = 2; i <= Math.sqrt(n); i += 1) 11 | if (n % i == 0) 12 | continue search; 13 | // found a prime! 14 | postMessage(n); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/ch10/shared-worker-inner.html: -------------------------------------------------------------------------------- 1 | 2 | Shared workers: demo 3 inner frame 3 | 
          Inner log:
          4 | -------------------------------------------------------------------------------- /examples/ch10/shared-worker.html: -------------------------------------------------------------------------------- 1 | 2 | Shared workers: demo 3 3 | 
          Log:
          4 | 13 | -------------------------------------------------------------------------------- /examples/ch10/shared-worker.js: -------------------------------------------------------------------------------- 1 | var count = 0, 2 | connected = []; 3 | 4 | onconnect = function(e) { 5 | count += 1; 6 | var port = e.ports[0]; 7 | connected.push(port); 8 | port.postMessage('Hello World! You are connection #' + count + ' - ' + JSON.stringify(e.ports)); 9 | port.onmessage = function(e) { 10 | port.postMessage('pong'); 11 | } 12 | } 13 | 14 | setTimeout(function () { 15 | var i = connected.length; 16 | while (i--) { 17 | connected[i].postMessage('via the timer, id: ' + i); 18 | } 19 | }, 1000); -------------------------------------------------------------------------------- /examples/ch10/subworkers.js: -------------------------------------------------------------------------------- 1 | var pendingWorkers = 0, 2 | results = {}, 3 | workingWidth = 100; 4 | 5 | onmessage = function (event) { 6 | var imageData = JSON.parse(event.data), 7 | worker = null; 8 | 9 | pendingWorkers = parseInt(imageData.width / workingWidth); 10 | // add an addtional worker for the left over width 11 | if (imageData.width % workingWidth > 0) pendingWorkers++; 12 | 13 | // reset any old results 14 | results = {}; 15 | 16 | for (var i = 0; i < pendingWorkers; i++) { 17 | worker = new Worker('photofilter.js'); 18 | worker.postMessage(JSON.stringify({ 19 | imageData: imageData, 20 | x: i * workingWidth, 21 | width: workingWidth 22 | })); 23 | worker.onmessage = storeResult; 24 | } 25 | }; 26 | 27 | function storeResult(event) { 28 | var result = JSON.parse(event.data); 29 | 30 | results[result.x] = result.imageData; 31 | 32 | pendingWorkers--; 33 | if (pendingWorkers <= 0) { 34 | postMessage(JSON.stringify(results)); 35 | } 36 | } 37 | 38 | 39 | onmessage = function (event) { 40 | var data = JSON.parse(event.data); 41 | 42 | // perform some amazing feat of image processing 43 | var imageData = amazingImageProcess(data.imageData, data.x, data.width); 44 | postMesage(JSON.stringify({ 45 | imageData: imageData, 46 | x: data.x 47 | })); 48 | 49 | // self close 50 | close(); 51 | }; -------------------------------------------------------------------------------- /examples/ch10/time.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Getting the time to the exact minute via a worker 6 | 7 | 8 |

          This will update to the exact minute

          9 | 17 | 18 | -------------------------------------------------------------------------------- /examples/ch10/web-sockets.js: -------------------------------------------------------------------------------- 1 | ws = new WebSocket("ws://173.203.209.115:8080/"); 2 | ws.onmessage = function(evt) { 3 | console.log(evt.data); 4 | var data = JSON.parse(evt.data); 5 | var p = $(twitterlib.render(data)); 6 | if( $('#tweets > li').length > 15) { 7 | $('#tweets >li:last').slideDown(100, function() { 8 | $(this).remove(); 9 | }); 10 | } 11 | 12 | $('#tweets').prepend(p); 13 | p.slideDown(140); 14 | }; 15 | ws.onclose = function() { 16 | alert("socket closed"); 17 | }; 18 | ws.onopen = function() { 19 | //alert("connected..."); 20 | }; 21 | -------------------------------------------------------------------------------- /examples/ch10/worker-time.js: -------------------------------------------------------------------------------- 1 | setInterval(function () { 2 | var d = new Date(); 3 | if ((d.getSeconds() % 5) == 0) { 4 | postMessage('Exactly: ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds()); 5 | } 6 | }, 10); -------------------------------------------------------------------------------- /ih5.css: -------------------------------------------------------------------------------- 1 | html { font-size: 100%; height: 100%; } 2 | 3 | section, article, footer { display: block; } 4 | 5 | body { 6 | /* height: 100%; */ 7 | background: #332314 url(bg.png) repeat-x top center; 8 | width: 560px; 9 | width: 570px; 10 | /* width: 52em;*/ 11 | margin: 0 auto; 12 | color: #FDFFE9; 13 | text-shadow: 2px 1px 0px #332314; 14 | font-family: sans-serif; 15 | font-size: 67.5%; 16 | padding: 0 35px; 17 | } 18 | 19 | body > :last-child { 20 | padding-bottom: 20px; 21 | } 22 | 23 | @font-face { 24 | font-family: 'ChunkFiveRegular'; 25 | src: url('Chunkfive.eot'); 26 | src: local('ChunkFive Regular'), local('ChunkFive'), url('Chunkfive.otf') format('opentype'), url('Chunkfive.svg#ChunkFive') format('svg'); 27 | } 28 | 29 | h1, h2 { 30 | line-height: normal; 31 | font-weight: normal; 32 | font-family: 'ChunkFiveRegular', sans-serif 33 | } 34 | 35 | header h1, header h2 { 36 | margin: 0; 37 | } 38 | 39 | h1 { 40 | margin-top: 0; 41 | padding-top: 30px; 42 | font-size: 4em; 43 | } 44 | 45 | header h1 { 46 | font-size: 2em; 47 | } 48 | 49 | p, a { 50 | font-family: "helvetica neue", helvetica, arial; 51 | text-align: justify; 52 | font-weight: light; 53 | } 54 | 55 | thead { display: none; } 56 | 57 | p,li,td,th,dt,pre,blockquote { 58 | line-height: 1.8em; 59 | font-size: 1.4em; 60 | } 61 | 62 | table { 63 | width: 52em; 64 | border-collapse:collapse; 65 | } 66 | 67 | tbody { 68 | counter-reset: position -1; 69 | } 70 | 71 | tbody tr td { 72 | padding: 2px 10px 2px 0; 73 | } 74 | 75 | tbody tr:hover td { 76 | background: #4D3319; 77 | } 78 | 79 | tbody tr td:first-child { 80 | width: 32em; 81 | } 82 | 83 | tbody tr td:first-child:before { 84 | content: counter(position) '. '; 85 | counter-increment: position; 86 | } 87 | 88 | h1 { text-transform: uppercase; } 89 | h2 { font-size: 3em; color: #CAA273; clear: left; } 90 | span.introducing { font-size: 3.4em; display: block; } 91 | span.html5 { font-size: 7em; display: block; color: #FDFFE9; } 92 | span.html5 span { color: #d37422; } 93 | 94 | a img { 95 | border: 0; 96 | } 97 | 98 | .bookinfo { 99 | min-height: 180px; 100 | } 101 | 102 | .bookinfo > * { 103 | margin-left: 260px; 104 | } 105 | 106 | .bookinfo p { 107 | margin-bottom: 0; 108 | } 109 | 110 | .bookinfo img { 111 | float: left; 112 | border: 5px solid rgb(51,35,20); 113 | margin: 0; 114 | } 115 | 116 | a { 117 | color: #CAA273; 118 | font-weight: bold; 119 | text-decoration: none; 120 | } 121 | 122 | a:hover { 123 | border-bottom: 3px solid #E4AE6D; 124 | color: #E4AE6D; 125 | text-shadow: 3px 3px 3px #332314; 126 | } 127 | 128 | .bookinfo > a:hover { 129 | border: 0; 130 | } 131 | 132 | ul { 133 | margin: 0; 134 | padding-left: 16px; 135 | list-style: square; 136 | } 137 | 138 | mark { 139 | text-shadow: none; 140 | color:black; 141 | background-color:yellow; 142 | } 143 | 144 | .update { 145 | padding: 10px; 146 | background: hsla(0, 100%, 100%, 0.05); 147 | box-shadow: 0 0 20px #000; 148 | line-height: 1.5em; 149 | } 150 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Introducing HTML5: Bruce Lawson and Remy Sharp 8 | 9 | 10 | 11 |
          12 |
          13 |

          Introducing HTML5

          14 |

          By Bruce Lawson and Remy Sharp

          15 |
          16 |
          17 |

          The second edition is out, swollen from 223 pages to a tumescent 295 pages! The multimedia chapter has added information on <track>, getUserMedia, webRTC. There's even more detail about how to get more out of geolocation; more storage methods and techniques, including the new IndexedDB storage API; 18 | we now have full examples on how to use Server Sent Events, and updated detail on offline applications, gotchas and debugging tips. There's a brand new full chapter on polyfills, what they are, how they work and how to use them!

          19 |

          We’re not one of the HTML 5 spec writers, and we’re not here to persuade you to use it. Our take is that it’s going to happen, so we need to get acquainted. But we’re going to point out (perhaps rant) about the good parts as well as the bad. It’s as far as possible a practical book, showing you how to use the language but some areas of the spec will be discussed theoretically as they’re not yet implemented anywhere.

          20 |
          21 | Buy Introducing HTML5 by Bruce Lawson and Remy Sharp 22 |

          Order the book now on:

          23 | 32 |

          Follow the authors: @brucel & @rem

          33 |
          34 | 35 |

          Chapters and Resources

          36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 |
          ChapterExamplesLinksErrata
          Introduction: why HTML5 existslinks
          Structuring a pagelinkserrata
          Marking up a blog & the outlining algorithmexampleslinkserrata
          Formsexampleslinks
          Multimedia (video, audio) markup and APIsexampleslinks
          Canvasexampleslinks
          Storageexampleslinks
          Working Offlineexampleslinks
          Drag & Dropexampleslinks
          Geolocationlinks
          Messages, Web Workers & Web Socketsexampleslinks
          115 | 116 | 117 | 118 | -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /links/ch01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Introducing HTML5: Chapter 1 links 4 | 5 |

          Chapter 1: Main Structure

          6 |
            7 |
          1. security risk of not setting charset
            2. 8 |
          2. Opera Dragonfly
            3. 9 |
          3. HTML5 validator
            4. 10 |
          4. Hickson/ Google analysis of 1bn web pages
            5. 12 |
          5. Opera MAMA
            6. 13 |
          6. Opera MAMA id list
            7. 15 |
          7. Opera MAMA class list
            8. 17 |
          8. W3C: Sample browser default stylesheet
            9. 18 |
          9. Conditional Comments article
            10. 20 |
          10. Remy's HTML5 enabling script
            11. 21 |
          11. IE Print Protector
            12. 22 |
          12. Styling HTML5 markup in IE without script
            13. 23 |
          13. How to get HTML5 working in IE and Firefox 2
            14. 24 |
          14. Matt Wilcox: "you must explicitly set such anchors to be display:block"
            15. 25 |
          15. John Resig: A Web Developers Responsibility
            16. 26 |
          16. www.thaicookery.co.uk (not HTML5)
            17. 27 |
          17. Taming Lists (A List Apart)
            18. 29 |
          18. www.brucelawson.co.uk
            19. 30 |
          19. Spec for the aside element
            20. 31 |
          20. www.thecssdiv.co.uk (not HTML5)
            21. 32 |
          21. Scooby Doo
            22. 33 |
          34 |

          Extra links

          35 | -------------------------------------------------------------------------------- /links/ch02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Introducing HTML5: Chapter 2 links 4 | 5 |

          Chapter 2: Text

          6 |
            7 |
          1. An Event Apart 2008 survey
            2. 9 |
          2. Online HTML5 outliner tool
            3. 11 |
          3. JavaScript implementation of the HTML5 outlining algorithm
            4. 12 |
          4. :-moz-any() selector grouping mechanism
            5. 13 |
          5. Video: Importance 14 | of HTML Headings for Accessibility (YouTube)
            6. 15 |
          6. WebAIM screenreader users' survey
            7. 16 |
          7. html5doctor.com
            8. 17 |
          8. Matt Wilcox: HTML5 wrapping anchor behaviour
            9. 18 |
          9. Remy Sharp: Firefox vomit bug
            10. 19 |
          10. Estelle Weyl: section/article analogy (lots of other goodies, too)
            11. 20 |
          11. The Guardian
            12. 21 |
          12. html5.validator.nu (HTML5 validator)
            13. 22 |
          13. cross-reference in the spec of HTML5 and ARIA
            14. 24 |
          14. Steve Faulkner: list of ARIA information that is not built-in to HTML5
            15. 25 |
          15. Jason Kiss: A note on screenreaders: recent test
            16. 26 | 27 |
          16. NVDA screen reader
            17. 28 |
          17. Gez Lemon: Introduction to WAI-ARIA
            18. 30 | 31 |
          18. The Paciello Group blog
            19. 32 | 33 |
          19. ARIA spec
            20. 34 | 35 |
          20. <details>: Remy's clever faking script
            21. 36 | 37 |
          21. HTML5 element categories and content models: HTML5 shiv
            22. 38 | 39 |
          22. Stuart Langridge: Searchhi script (and my HTML5 version)
            23. 40 |
          23. Daniel Davis: The HTML5 <ruby> element in words of one syllable or less
            24. 42 |
          24. <cite>: Jeremy Keith's 24 Ways article
            25. 43 |
          25. tabindex="-1": Juicy Studio article with more information
            26. 45 |
          26. <embed> used for Flash, statistics
            27. 46 |
          27. <keygen>: http://en.wikipedia.org/wiki/Public_key
            28. 47 |
          -------------------------------------------------------------------------------- /links/ch03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Introducing HTML5: Chapter 3 links 4 | 5 |

          Chapter 3: Forms

          6 |

          Here's a general HTML5 Forms demo page.

          7 |
            8 |
          1. Firefox Contacts addon
            2. 9 |
          2. draft W3C Contacts API.
            3. 10 |
          3. <datalist> replicating Google Suggest functionality
            4. 11 |
          4. When browsers need a helping hand: polyfilling script
            5. 12 |
          5. placeholder in Firefox 3.7a
            6. 13 |
          6. Steven Levithan's 14 | regular expressions blog
            7. 15 |
          7. Modernizr
            8. 16 |
          8. CSS Basic User Interface module
            9. 17 |
          9. Styling forms can lead to madness
            10. 19 |
          -------------------------------------------------------------------------------- /links/ch04.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Introducing HTML5: Chapter 4 links 4 | 5 |

          Chapter 4: Video and Audio

          6 |
            7 |
          1. Anne van Kesteren's email proposing <video> (historical interest only)
            2. 8 |
          2. Leverage a Synergy video (Ogg)
            3. 9 |
          3. Kroc Camen: Video for Everybody!
            4. 10 |
          4. html5media library to hijack the video element and automagically add necessary fallback
            5. 11 |
          5. Encoding royalty-free audio: Audacity
            6. 12 |
          6. Encoding royalty-free video: WebM tools
            7. 13 | 14 |
          7. Encoding royalty-free video: evom
            8. 15 |
          8. Encoding royalty-free video: Miro Video Converter
            9. 16 |
          9. Encoding royalty-free video: VLC
            10. 17 |
          10. Encoding royalty-free video: OggConvert
            11. 18 |
          11. Encoding royalty-free video: Firefogg
            12. 19 |
          12. Encoding royalty-free video: TinyOgg
            13. 20 |
          13. Encoding royalty-free video: ffmpeg library
            14. 21 |
          14. Encoding royalty-free video: Internet Archive
            15. 22 |
          15. CSS3 Media Queries specification
            16. 23 |
          16. WebSRT specification
            17. 25 |
          17. Bruce's interim hacky accessible captioned HTML5 video (Ogg-only demo)
            18. 26 |
          18. data-* attributes (custom data attributes) specification
            19. 27 |
          19. BBC video accessibility experiment (and subtitles file)
            20. 29 |
          20. Silvia Pfeiffer's accessbible video demos (NB: these don't validate)
            21. 30 |
          21. Kaltura video player
            22. 31 |
          22. jPlayer audio player
            23. 33 |
          34 |

          Bonus demos, resources

          35 | -------------------------------------------------------------------------------- /links/ch05.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Introducing HTML5: Chapter 5 links 4 | 5 |

          Chapter 5: Canvas

          6 |
            7 |
          1. Canvas Paint (MS Paint clone)
            2. 8 |
          2. Mugtug Sketchpad
            3. 9 |
          3. Harmony
            4. 10 |
          4. HTML5 Canvas - silverlight based canvas shim for IE
            5. 11 |
          5. excanvas.js - JavaScript based canvas shim for IE
            6. 12 |
          6. Raphaël - SVG JavaScript library
            7. 13 |
          7. Paul Rouget's dynamic content injection demo
            8. 14 |
          8. Processing.js - a processing library that uses canvas to draw
            9. 15 |
          9. Bespin
            10. 16 |
          -------------------------------------------------------------------------------- /links/ch06.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Introducing HTML5: Chapter 6 links 4 | 5 |

          Chapter 6: Storage

          6 |
            7 |
          1. PPK's cookie code
            2. 8 |
          2. JSON specification & json2.js to support JSON stringify and parsing in the browser
            3. 9 |
          3. SQLite the SQL database that Web SQL Databases is based on
            4. 10 |
          4. Native forEach in JavaScript 1.5
            5. 11 |
          -------------------------------------------------------------------------------- /links/ch07.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Introducing HTML5: Chapter 7 links 4 | 5 |

          Chapter 7: Offline

          6 |
            7 |
          1. Offline Webapps spec - events and navigator.onLine
            2. 8 |
          2. Offline appcache, manifest, etc
            3. 9 |
          3. Server time example
            4. 10 |
          -------------------------------------------------------------------------------- /links/ch08.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Introducing HTML5: Chapter 8 links 4 | 5 |

          Chapter 8: Drag and Drop

          6 |
            7 |
          1. Drag and Drop specification
            2. 8 |
          2. Ian Hickson's account of reverse engineering the Microsoft drag and drop API
            3. 9 |
          3. 280 slides Drag and Drop demo - moving objects from one window to another
            4. 10 |
          4. Article on Opera.dev by Gez Lemon on implementing accessible drag and drop (not using the native API)
            5. 11 |
          5. Article attempting to add accessibility to native drag and drop
            6. 12 |
          -------------------------------------------------------------------------------- /links/ch09.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Introducing HTML5: Chapter 9 links 4 | 5 |

          Chapter 9: Geolocation

          6 |
            7 |
          1. Google maps includes a "locate me" button if geolocation is available
            2. 8 |
          2. Is geolocation part of HTML5? (single serving web site)
            3. 9 |
          3. Owls near you - redirects if geolocation is enabled and available
            4. 10 |
          -------------------------------------------------------------------------------- /links/ch10.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Introducing HTML5: Chapter 10 links 4 | 5 |

          Chapter 10: Messaging, Workers and Sockets

          6 |
            7 | 8 |
          -------------------------------------------------------------------------------- /links/intro.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Introducing HTML5: Intro links 5 |
            6 |
          1. WHATWG (Web Hypertext Application Technology 7 | Working Group
            2. 8 |
          2. Tim Berners-Lee quote
            3. 9 |
          3. HTML5 spec: Official W3C snapshot
            4. 10 |
          4. HTML5 spec: W3C Editor's Draft (very fluid)
            5. 11 |
          5. Web Applications 1.0 spec: 1-page WHATWG version (warning: may kill your browser)
            6. 13 |
          6. What are the various versions of the spec?
            7. 14 |
          7. Geolocation specification
            8. 15 |
          8. Ian Hickson interviewed by Bruce, Web Standards Project
            9. 18 |
          9. HTML5 Design Principles
            10. 19 |
          10. HTML5 spec: cut-down spec for HTML authors
            11. 21 |
          --------------------------------------------------------------------------------