├── .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 |
13 | <time datetime="1905">
means the year 1905
14 | <time datetime="1905-11">
means November 1905
15 | <time datetime="11-13">
means 13 November (any year)
16 | <time datetime="1905-W21">
means week 21 of 1905
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 |
21 | <time datetime="1905-11-13T09:00">
22 | <time datetime="1905-11-13 09:00">
23 |
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 |
27 | <time datetime="09:00Z">
is 9am, UTC.
28 | <time datetime="09:00-05:00">
is 9am in the timezone 5 hours behind UTC.
29 | <time datetime="09:00+05:45">
is 9am in Nepal , which is UTC + 5 hours and 45 minutes.
30 |
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 itemtype
s. 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 |
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 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/examples/ch03/onforminput.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | onforminput colour picker
6 |
28 |
29 |
30 |
31 |
32 | Colour picker
33 | Hue 360°
34 | Saturation %
35 | Luminance %
36 | Alpha channel 0-1
37 | HSLA: 0
38 | RGBA: 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 | Email:
30 | Homepage:
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 |
5 |
6 |
7 | Your browser doesn't support video.
8 | Please download the video in Ogg or mp4 format.
9 |
--------------------------------------------------------------------------------
/examples/ch04/custom-controls.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Video custom controls
6 |
146 |
147 |
148 |
149 |
150 |
151 |
►
152 |
0:00
153 |
154 |
155 |
156 |
157 |
158 |
159 | Your browser doesn't support video.
160 | Please download the video in Ogg or mp4 format.
161 |
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 |
154 |
155 |
156 |
157 |
158 |
159 | Your browser doesn't support video.
160 | Please download the video in Ogg or mp4 format.
161 |
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 |
6 | Download the How to leverage a synergy video
7 |
--------------------------------------------------------------------------------
/examples/ch04/figure3.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Introducing HTML5: Chapter 4 - figure 1 example
4 | Video and legacy browser fallback
5 |
6 | Download the How to leverage a synergy video
7 |
--------------------------------------------------------------------------------
/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 |
14 |
15 |
16 | Your browser doesn't support video.
17 | Please download the video in Ogg or mp4 format.
18 |
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 |
14 |
15 |
16 | Your browser doesn't support video.
17 | Please download the video in Ogg or mp4 format.
18 |
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 |
14 |
15 |
16 |
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 |
15 |
16 |
17 |
18 |
57 |
58 |
--------------------------------------------------------------------------------
/examples/ch05/drawimage.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | drawImage with video
5 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
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 |
27 |
28 |
29 |
30 |
64 |
65 |
--------------------------------------------------------------------------------
/examples/ch05/pulsate.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Pulsate - Canvas version
7 |
8 |
9 |
10 |
11 |
21 |
22 |
23 |
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 | 5 minutes
15 | 30 minutes
16 | 2 hours
17 | all time
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 |
18 |
19 |
20 |
21 |
I'll show you Twitter screen names
22 |
23 |
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 |
18 |
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 |
17 |
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 |
17 |
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 |
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: '' + event.data + ' ' + stringify(rawoutput).replace(/[<>&]/g, function (m) { return {'&':'&','>':'>','<':'<'}[m];}) + ' '
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 |
22 |
Order the book now on:
23 |
32 |
Follow the authors: @brucel & @rem
33 |
34 |
35 | Chapters and Resources
36 |
37 |
38 |
39 | Chapter
40 | Examples
41 | Links
42 | Errata
43 |
44 |
45 |
46 |
47 | Introduction: why HTML5 exists
48 |
49 | links
50 |
51 |
52 |
53 | Structuring a page
54 |
55 | links
56 | errata
57 |
58 |
59 | Marking up a blog & the outlining algorithm
60 | examples
61 | links
62 | errata
63 |
64 |
65 | Forms
66 | examples
67 | links
68 |
69 |
70 |
71 | Multimedia (video, audio) markup and APIs
72 | examples
73 | links
74 |
75 |
76 |
77 | Canvas
78 | examples
79 | links
80 |
81 |
82 |
83 | Storage
84 | examples
85 | links
86 |
87 |
88 |
89 | Working Offline
90 | examples
91 | links
92 |
93 |
94 |
95 | Drag & Drop
96 | examples
97 | links
98 |
99 |
100 |
101 | Geolocation
102 |
103 | links
104 |
105 |
106 |
107 | Messages, Web Workers & Web Sockets
108 | examples
109 | links
110 |
111 |
112 |
113 |
114 |
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 | security risk of not setting charset
8 | Opera Dragonfly
9 | HTML5 validator
10 | Hickson/ Google analysis of 1bn web pages
12 | Opera MAMA
13 | Opera MAMA id
list
15 | Opera MAMA class
list
17 | W3C: Sample browser default stylesheet
18 | Conditional Comments article
20 | Remy's HTML5 enabling script
21 | IE Print Protector
22 | Styling HTML5 markup in IE without script
23 | How to get HTML5 working in IE and Firefox 2
24 | Matt Wilcox: "you must explicitly set such anchors to be display:block
"
25 | John Resig: A Web Developers Responsibility
26 | www.thaicookery.co.uk (not HTML5)
27 | Taming Lists (A List Apart)
29 | www.brucelawson.co.uk
30 | Spec for the aside
element
31 | www.thecssdiv.co.uk (not HTML5)
32 | Scooby Doo
33 |
34 | Extra links
35 |
--------------------------------------------------------------------------------
/links/ch02.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Introducing HTML5: Chapter 2 links
4 |
5 | Chapter 2: Text
6 |
7 | An Event Apart 2008 survey
9 | Online HTML5 outliner tool
11 | JavaScript implementation of the HTML5 outlining algorithm
12 | :-moz-any()
selector grouping mechanism
13 | Video: Importance
14 | of HTML Headings for Accessibility (YouTube)
15 | WebAIM screenreader users' survey
16 | html5doctor.com
17 | Matt Wilcox: HTML5 wrapping anchor behaviour
18 | Remy Sharp: Firefox vomit bug
19 | Estelle Weyl: section/article analogy (lots of other goodies, too)
20 | The Guardian
21 | html5.validator.nu (HTML5 validator)
22 | cross-reference in the spec of HTML5 and ARIA
24 | Steve Faulkner: list of ARIA information that is not built-in to HTML5
25 | Jason Kiss: A note on screenreaders: recent test
26 |
27 | NVDA screen reader
28 | Gez Lemon: Introduction to WAI-ARIA
30 |
31 | The Paciello Group blog
32 |
33 | ARIA spec
34 |
35 | <details>
: Remy's clever faking script
36 |
37 | HTML5 element categories and content models: HTML5 shiv
38 |
39 | Stuart Langridge: Searchhi script (and my HTML5 version )
40 | Daniel Davis: The HTML5 <ruby>
element in words of one syllable or less
42 | <cite>
: Jeremy Keith's 24 Ways article
43 | tabindex="-1"
: Juicy Studio article with more information
45 | <embed>
used for Flash, statistics
46 | <keygen>
: http://en.wikipedia.org/wiki/Public_key
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 | Firefox Contacts addon
9 | draft W3C Contacts API.
10 | <datalist>
replicating Google Suggest functionality
11 | When browsers need a helping hand: polyfilling script
12 | placeholder
in Firefox 3.7a
13 | Steven Levithan's
14 | regular expressions blog
15 | Modernizr
16 | CSS Basic User Interface module
17 | Styling forms can lead to madness
19 |
--------------------------------------------------------------------------------
/links/ch04.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Introducing HTML5: Chapter 4 links
4 |
5 | Chapter 4: Video and Audio
6 |
7 | Anne van Kesteren's email proposing <video>
(historical interest only)
8 | Leverage a Synergy video (Ogg)
9 | Kroc Camen: Video for Everybody!
10 | html5media library to hijack the video
element and automagically add necessary fallback
11 | Encoding royalty-free audio: Audacity
12 | Encoding royalty-free video: WebM tools
13 |
14 | Encoding royalty-free video: evom
15 | Encoding royalty-free video: Miro Video Converter
16 | Encoding royalty-free video: VLC
17 | Encoding royalty-free video: OggConvert
18 | Encoding royalty-free video: Firefogg
19 | Encoding royalty-free video: TinyOgg
20 | Encoding royalty-free video: ffmpeg library
21 | Encoding royalty-free video: Internet Archive
22 | CSS3 Media Queries specification
23 | WebSRT specification
25 | Bruce's interim hacky accessible captioned HTML5 video (Ogg-only demo )
26 | data-* attributes (custom data attributes) specification
27 | BBC video accessibility experiment (and subtitles file )
29 | Silvia Pfeiffer's accessbible video demos (NB: these don't validate)
30 | Kaltura video player
31 | jPlayer audio player
33 |
34 | Bonus demos, resources
35 |
--------------------------------------------------------------------------------
/links/ch05.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Introducing HTML5: Chapter 5 links
4 |
5 | Chapter 5: Canvas
6 |
7 | Canvas Paint (MS Paint clone)
8 | Mugtug Sketchpad
9 | Harmony
10 | HTML5 Canvas - silverlight based canvas shim for IE
11 | excanvas.js - JavaScript based canvas shim for IE
12 | Raphaël - SVG JavaScript library
13 | Paul Rouget's dynamic content injection demo
14 | Processing.js - a processing library that uses canvas to draw
15 | Bespin
16 |
--------------------------------------------------------------------------------
/links/ch06.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Introducing HTML5: Chapter 6 links
4 |
5 | Chapter 6: Storage
6 |
7 | PPK's cookie code
8 | JSON specification & json2.js to support JSON stringify and parsing in the browser
9 | SQLite the SQL database that Web SQL Databases is based on
10 | Native forEach
in JavaScript 1.5
11 |
--------------------------------------------------------------------------------
/links/ch07.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Introducing HTML5: Chapter 7 links
4 |
5 | Chapter 7: Offline
6 |
7 | Offline Webapps spec - events and navigator.onLine
8 | Offline appcache, manifest, etc
9 | Server time example
10 |
--------------------------------------------------------------------------------
/links/ch08.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Introducing HTML5: Chapter 8 links
4 |
5 | Chapter 8: Drag and Drop
6 |
7 | Drag and Drop specification
8 | Ian Hickson's account of reverse engineering the Microsoft drag and drop API
9 | 280 slides Drag and Drop demo - moving objects from one window to another
10 | Article on Opera.dev by Gez Lemon on implementing accessible drag and drop (not using the native API)
11 | Article attempting to add accessibility to native drag and drop
12 |
--------------------------------------------------------------------------------
/links/ch09.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Introducing HTML5: Chapter 9 links
4 |
5 | Chapter 9: Geolocation
6 |
7 | Google maps includes a "locate me" button if geolocation is available
8 | Is geolocation part of HTML5? (single serving web site)
9 | Owls near you - redirects if geolocation is enabled and available
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 | WHATWG (Web Hypertext Application Technology
7 | Working Group
8 | Tim Berners-Lee quote
9 | HTML5 spec: Official W3C snapshot
10 | HTML5 spec: W3C Editor's Draft (very fluid)
11 | Web Applications 1.0 spec: 1-page WHATWG version (warning: may kill your browser)
13 | What are the various versions of the spec?
14 | Geolocation specification
15 | Ian Hickson interviewed by Bruce, Web Standards Project
18 | HTML5 Design Principles
19 | HTML5 spec: cut-down spec for HTML authors
21 |
--------------------------------------------------------------------------------