985 PDF

HTML5 CSS3.
.
.
.
.
.
.
32.988.02-018
004.738.5
68
.
HTML5 CSS3. - . .: , 2012. 272 .: .
ISBN 978-5-459-00592-9
HTML5 CSS3 -, ,
. , HTML5 CSS3.
HTML5 CSS3 , , -.
HTML5,
, , , -
Flash. , - , CSS3. , .
Pragmatic Bookshelf. .

.
, , ,
. , ,

, .
ISBN 978-1934356685 .
ISBN 978-5-459-00592-9
Pragmatic Programmers, LLC, 2010

, 2012
,
, 2012
, 198206, -, , 73, . 29.

005-93, 2; 95 3005 .
14.10.11. 70100/16. . . . 21,930. 2000. 0000.
CtP ,
. 197110, -, ., 15.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
HTML5: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1. HTML5 CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
14
1.1. - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
1.3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
I

2. . . . . . . . . . . . . . . . . . . . . . .
1.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
doctype . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
! . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
27
.
.
.
.
.
.
.
.
.
.
.
30
31
32
33
34
35
35
37
38
39
42
6
2.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
, onclick .
! . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
3. - . . . . . . . . . . . . . . . . . . . . . . . . . . .
3. . . . . . . . . . . . . . . . . .
AwesomeCo . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4. . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.
CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
44
44
46
47
47
49
52
52
52
53
57
60
60
62
62
64
69
70
71
72
75
77
7. . . . 79
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
(:nth-of-type) . . . . . . . . . . . . . . . . . . . . . . . . . . 81
(:nth-child) . . . . . . . . . . . . . . . . . . . . . . . . 83
(:last-child) . . . . . . . . . . . . . . . . . . . . . . . . . 84
(:nth-last-child) . . . . . . . . . . . . . . . . . . . . 85
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
8. (:after) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
9. . . . . . . . . . . . . . . . . . . . . . . . . 93
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
10. . . . . . . . . . . . . . . . . . . . . . . 99
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
7
5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
102
11. ARIA . . . . . . . . . . . . . . . . . . . . . . . 104

12. . . 109
II

6. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
117
13. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
14. RGraph . . . . . . . . . . . . . . . . . . 126
7. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.1.
7.2.
. . . .
.
15. . . .
16. .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
135
.
.
.
.
8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
136
137
142
146
154
17. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
18. , . . . . . . . . . . . . . . . . . . . . . . 164
19. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
III
HTML5
9. . . . . . . . . . . . . . . . . . . .
183
20. localStorage . . . . . . . . . . 186

21.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
22. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
10. API . . . . . . . . . . . . . . . . . . . . . . . . .
23.
24.
25.
26.
. . . . . . . . . . . . . . . . . .
. . .
Web Sockets . . . . . . . . . . . . . . .
: Geolocation
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
11. ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
209
.
.
.
.
211
215
222
230
235
11.1. CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236

11.2. Web Workers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
8
11.3. . . . .
11.4. WebGL . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
11.5. Indexed Database API . . . . . . . . . . . . . . . . . .
11.6. .
11.7. ! . . . . . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
240
246
246
247
248
IV
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
.1. . . . . . . . . . . . . . . . . . . . . . .
.2. . . . . . . . . . . . . . . . . . . . . . . . . . . .
.3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
.4. . . . . . . . . . . . . . . . . . .
.5. . . . . . . . . . . . . . . . . . . . . . . . . .
.6. . . . . . . . . . . . . . . . . . . . . . . . .
.7. CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
.8. . . . . . .
.9. API . . . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
253
............
............
............
............
............
............
............
............
............
. jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
.1.
.2.
.3.
.4.
.5.
.6.
jQuery . . . . . . . . . . .
jQuery . . . . . . . . . . . .
.
. . . . . . .
. . . . . . . . . . . . . . . .
document.ready . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
. . . . . . . . . . . . . . . . . . . . . . .
253
254
254
255
256
256
257
259
259
261
.
.
.
.
.
.
261
262
262
265
265
267
268
.1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
.2 Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
270
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
272
-
.
- : - . HTML5 CSS3
,
, (Google Chrome, Safari, Firefox
Opera) .
HTML
5
CSS
3 -. , ,
. HTML5
, . CSS3
, ,
, JavaScript
. Ajax
,
, .
, HTML5 CSS3
,
.
HTML5 .
10
HTML5:
HTML
5 , , Javascript API,
. , HTML
5 HTML5,
, .
CSS3 (, ,
)
HTML
. , HTML5. :
HTML5, ?

HTML
5
CSS
3 . , - HTML5,
. Web SQL
Databases, Geolocation Web Sockets.
HTML5, HTML5 CSS3
.

,
HTML5 CSS3.
, ,
.
, ,
. .
(HTML5 CSS3),
.
,
, ,
HTML
5
CSS
3. ,
11
jQuery.
.
,
.
,
. HTML5 CSS3
. 11.

HTML5 CSS3.
,
. ;
, .
CSS3,
, .

(canvas) . ,
, CSS3, .
HTML5 Web
Storage
,
Web
SQL
Databases
, . Web
Sockets
, , HTML
5 .
Geoloca
tion API .
, ,
.
HTML
5, , ,
.
jQuery
, . HTML5.
12

- HTML CSS. ,
,
Designing with Web Standards [Zel09] Web Design
for Developers [Hog09]. ,
JavaScript jQuery1 ( .
jQuery, ,
.
, ,
Firefox 3.6, Google Chrome 5, Opera 10.6 Safari 5.
, .
Internet
Explorer .

Internet
Explorer
, IETester for Windows IE 6, 7 8
.
Windows
, (, VirtualBox VMWare)
CrossBrowserTesting2 MogoTest3.

4 , .
,
.
, , , . ,
.
, 5. , .
? ! HTML5 CSS3 .
http://www.jquery.com/
http://crossbrowsertesting.com/
3
http://www.mogotest.com/
4
http://www.pragprog.com/titles/bhh5/
5
http://www.beyondhtml5andcss3.com/
1
2
13

, , comp@piter.com ( ,
).
!
, , : http://www.piter.com.
HTML5 CSS3
HTML51 CSS32 , W3C (World Wide Web Consortium) .

,
, . HTML5 CSS3,
HTML5 CSS3,
,
.
1.1. -
HTML
-. HTML5
,

.

HTML ,
, .
HTML5 http://www.w3.org/TR/html5/

CSS3
http://www.w3.org/Style/CSS/current-work
1
2
HTML5 CSS5 15
, ,
, 2.
,
.

,

Flash

Silverlight
. Flash
,
Apple. ,
,
Flash
. 7 , - HTML5 .

, - ,
ActiveX
Flash
.
HTML
5 ,
.

. ,
.
,
, . HTML5
. , , 24 . 213.
Web Sockets
HTML5 Web Sockets,
.
16 1 HTML5 CSS3
- ,
.
25, Web Sockets
(.220).

HTML5 -,
(
API
) Web
Storage
Web
SQL
Database
,
. API
9, .

-.
, , .
,
JavaScript
, . HTML5 CSS3
.

HTML
5 .
JavaScript CSS ,
.
HTML
5 , , .
3, -.
, ,
-. , JavaScript,
.
,
.
HTML5 CSS5 17

HTML
5 , .
, ,
nav div .
,
. ,
. ,

. 5, , ,
.

CSS3
, .
.
4 , .

, , -
, .
CSS
3
.
, .
8.
1.2.
HTML
,
. HTML5 ,
Internet Explorer 6, .
W3C (, ,
).
18 1 HTML5 CSS3
, - HTML XML, doctype.

,
. doctype
,
. doctype
.
XHTML 1.0
Transitional, :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
doctype HTML5 :
html5_why/index.html
<!DOCTYPE html>

HTML5.
,
HTML5, ,
HTML5.
1.3.
HTML
5 CSS
3 . , .

. , , .
.
-, , JavaScript .
. , .
, . .
, , JavaScript.
. .
HTML5 CSS5 19
/
XHTML. ?
, ! XHTML -
.
XHTML
,
, , World Wide Web.
HTML5 ,
. HTML5
HTML5, XHTML,
.
, - HTML MIME text/
html
,
Internet
Explorer

application/xml+xhtml MIME, XHTML.
,

HTML

HTML
5. , script div:
<script language="javascript" src="application.js" />
<h2>Help</h2>
,
, h2 c script!
script ,
XHTML.
HTML5,

MIME
text
/
html
. http://www.webdevout.
net/articles/beware-of-xhtml#myths.
Internet Explorer
Internet
Explorer
, 8
HTML
5
CSS
3. IE
9 , . ,
HTML5 CSS3 .
Internet Explorer, ,
, Chrome Firefox.
, .
20 1 HTML5 CSS3
,
-
,
. HTML5
audio, video canvas. ,
canvas .
HTML JavaScript.
, 5% , JavaScript
1.
.

HTML
5 , Internet Explorer.

HTML5 ,
,
-2. ,
.
.
, ! CSS:
basefont;
big;
center;
font;
s;
strike;
tt;
u.
http://visualrevenue.com/blog/2007/08/eu-and-us-javascript-disabled-index.html
http://www.w3.org/TR/html5-diff/
1
2
HTML5 CSS5 21
,
font center ,
Dreamweaver.
, . :
PeopleSoft
,
Microsoft
Outlook
Web
Access
. ,
,
. ,
:
frame;
frameset;
noframes.

, CSS Java
Script
. , ,
, , -.
-
:
acronym abbr;
applet object;
dir ul.
,
. :
align;
link, vlink, alink text body;
bgcolor;
height width;
scrolling iframe;
valign;
hspace vspace;
cellpadding, cellspacing border table.
22 1 HTML5 CSS3
target :
<a href="http://www.google.com" target="_blank">
JavaScript, target
.
profile head .
, WordPress.
, longdesc img iframe. ,
, , longdesc
.
HTML5 ,
,
.
W3C Validator1 .

Internet Explorer ,
HTML5 CSS3. Google, Apple Mozilla
, .
- ,
. ,
audio Safari MP3,
OGG . , Firefox OGG
MP3.
.
, ,

, .
, .
7.
HTML5 CSS3
, ,
. Firefox, Chrome Safari
HTML5,
http://validator.w3.org/
HTML5 CSS5 23
; ,
.
box-shadow CSS3
, Web
Sockets - .
HTML
4
CSS
3 , . , , .
-,
, JavaScript

Flash
. , , JavaScript
.
,
HTML5.
,
.
2. . . 27
3. - . . . . . . . 49
4.
CSS3 . . . . . . 7 7
5. . . . . . . . . . . 10 2
,
HTML
5 CSS
, . ,
,
.

contenteditable. ,

HTML5.
,
- .
, div banner, sidebar,
article, footer .. . ,
div ,
.
:
<div id="navbar_wrapper">
<div id="navbar">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">Home</a></li>
</ul>
</div>
</div>
28 2
, 1, div, . id - ,
,
. , .
, . HTML5
,
.
, / ,
HTML5 ,
.
. HTML5,
.
meter
HTML5,
.
2:
<header>
. [C5, F3.6, IE8,

S4, O10]
<footer>
. [C5, F3.6, IE8,

S4, O10]
<nav>
. [C5, F3.6,
IE8, S4, O10]
<section>
. [C5, F3.6, IE8, S4, O10]

, , (inline) .
2
. C: Google Chrome, F: Firefox, IE:
Internet Explorer, O: Opera, S: Safari, IOS: iOS Mobile Safari, A: Android
Browser.
1
29
<article>
( ).
[C5, F3.6, IE8, S4, O10]
<aside>
. [C5, F3.6, IE8,

S4, O10]

data-. [
JavaScript getAttribute()]
<meter>
, . [C5,
F3.5, S4, O10]
<progress>

. [ .]
30 2
1.

, ,
. , (,
(), ) , ,
. HTML
AwesomeCo.
. 2.1. HTML5
1. 31
. 2.1 .
:
.
. (pull
quotes). .
.
, ,
div HTML5.
. 2.2.
doctype
HTML5,
.
index.html
HTML5:
html5newtags/index.html
1 <!DOCTYPE html>
2 <html lang="en-US">
3
<head>
4
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
5
<title>AwesomeCo Blog</title>
6
</head>
7
8
<body>
9
</body>
10 </html>
doctype 1 ,
HTML5.
-, ,
doctype XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
32 2
HTML5:
<!DOCTYPE html>
.
doctype . -, ,
. -, Internet Explorer
68
, . doctype HTML5 ,
Internet Explorer 6.
. 2.2.
(, h1,
h2 ..) ,
. .
1 <header id="page_header">
2
<h1>AwesomeCo Blog!</h1>
3 </header>
1. 33

. ,
id ( 1).
CSS JavaScript.

. -, ,
(, , ..),

.
,
, , .
HTML5 , section, header nav
.
footer . , .
,
; ,
.
.
, ,
.
.
<footer id="page_footer">
<p>© 2010 AwesomeCo.</p>
</footer>

. , ,
, .
34 2

.
,
,
HTML.
.
, ,
.
1 <header id="page_header">
<nav>
<ul>
5
<li><a href="/">Latest Posts</a></li>
<li><a href="archives">Archives</a></li>
<li><a href="contributors">Contributors</a></li>
<li><a href="contact">Contact Us</a></li>
</ul>
10
</nav>
- </header>
,
.
, ;
.
AwesomeCo,
,
. footer .
<footer id="page_footer">
<nav>
<ul>
<li><a href="http://awesomeco.com/">Home</a></li>
<li><a href="about">About</a></li>
1. 35
<li><a href="terms.html">Terms of Service</a></li>

<li><a href="privacy.html">Privacy</a></li>
</ul>
</nav>
</footer>

CSS, .
,
.

(section) .
div,
, section.
<section id="posts">
</section>
, .
!
.

.
article -.
(, , , ,
, , ) , .
article .
,
. :
36 2
<article class="post">
<header>
<h2>How Many Should We Put You Down For?</h2>
<p>Posted by Brian on
<time datetime="2010-10-01T14:39">October 1st, 2010 at
2:39PM</time>
</p>
</header>
<p>
The first big rule in sales is that if the person leaves
empty-handed, they're likely not going to come back. That's
why you have to be somewhat aggressive when you're working
with a customer, but you have to make sure you don't overdo
it and scare them away.
</p>
<p>
One way you can keep a conversation going is to avoid asking
questions that have yes or no answers. For example, if
you're selling a service plan, don't ever ask "Are you
interested in our 3 or 5 year service plan?" Instead,
ask "Are you interested in the 3 year service plan or
the 5 year plan, which is a better value?"
At first glance, they appear to be asking the same thing, and
while a customer can still opt out, it's harder for them to
opt out of the second question because they have to say more
than just "no."
</p>
<footer>
<p><a href="comments"><i>25 Comments</i></a> ...</p>
</footer>
</article>
header footer, .
section.
/
?
,
(, , ..).
. , .
1. 37
: , , ,
. (, ) . ,
.
.

,
, , ,
. aside.
<aside>
<p>
"Never give someone a chance to say no when
selling your product."
</p>
</aside>
aside. , .
<section id="posts">
<article class="post">
<header>
<h2>How Many Should We Put You Down For?</h2>
<p>Posted by Brian on
<time datetime="2010-10-01T14:39">October 1st, 2010 at
2:39PM</time>
</p>
</header>
<aside>
<p>
"Never give someone a chance to say no when
selling your product."
38 2
</p>
</aside>
<p>
The first big rule in sales is that if the person leaves
empty-handed, they're likely not going to come back.
That's why you have to be somewhat aggressive when you're
working with a customer, but you have to make sure you
don't overdo it and scare them away.
</p>
<p>
One way you can keep a conversation going is to avoid
asking questions that have yes or no answers. For example,
if you're selling a service plan, don't ever ask "Are
you interested in our 3 or 5 year service plan?"
Instead, ask "Are you interested in the 3 year
service plan or the 5 year plan, which is a better
value?"
At first glance, they appear to be asking the same thing,
and while a customer can still opt out, it's harder for
them to opt out of the second question because they have
to say more than just "no."
</p>
<footer>
<p><a href="comments"><i>25 Comments</i></a> ...</p>
</footer>
</article>
</section>
!

. ,
aside , .
, . aside , . ,
, .
( )
section nav.
1. 39
<section id="sidebar">
<nav>
<h3>Archives</h3>
<ul>
<li><a href="2010/10">October 2010</a></li>
<li><a href="2010/09">September 2010</a></li>
<li><a href="2010/08">August 2010</a></li>
<li><a href="2010/07">July 2010</a></li>
<li><a href="2010/06">June 2010</a></li>
<li><a href="2010/05">May 2010</a></li>
<li><a href="2010/04">April 2010</a></li>
<li><a href="2010/03">March 2010</a></li>
<li><a href="2010/02">February 2010</a></li>
<li><a href="2010/01">January 2010</a></li>
</ul>
</nav>
</section>
.
.

, div.
style.css HTML
, .
<link rel="stylesheet" href="style.css" type="text/css">
,
.
html5newtags/style.css
body{
width:960px;
margin:15px auto;
font-family: Arial, "MS Trebuchet", sans-serif;
}
40 2
p{
}
margin:0 0 20px 0;
p, li{
line-height:20px;
}
.
header#page_header{
width:100%;
}

.
header#page_header nav ul, #page_footer nav ul{
list-style: none;
margin: 0;
padding: 0;
}
#page_header nav ul li, footer#page_footer nav ul li{
padding:0;
margin: 0 20px 0 0;
display:inline;
}
posts , ; .
, .
section#posts{
float: left;
width: 74%;
}
section#posts aside{
float: right;
width: 35%;
1. 41
margin-left: 5%;
font-size: 20px;
line-height: 40px;

-
-, meter progress, HTML5.
meter
.
, meter
, (, , ). ,
. ,
$5000, :
<section id="pledge">
<header>
<h3>Our Fundraising Goal</h3>
</header>
<meter title="USD" id="pledge_goal"
value="2500" min="0" max="5000">
$2500.00
</meter>
<p>Help us reach our goal of $5000!</p>
</section>
,
,
. , , , , .
:
html5_meter/progress.html
<progress id="progressbar" max=100><span>0</span>%</
progress>
42 2
section#sidebar{
float: left;
width: 25%;
}

meter progress, JavaScript
,
meter progress . meter.
.
clear, .
footer#page_footer{
clear: both;
width: 100%;
display: block;
text-align: center;
}
. , , .

Firefox, Chrome Safari,

Internet
Explorer
. , IE
, ,
, 1990- .
IE ? JavaScript . .
head ,
- .
, Internet Explorer.
1. 43


Internet Explorer 9.0. , .
, JavaScript. : ,
.
, ,
JavaScript.
,
.
HTMLshiv1 ; ,

.
http://code.google.com/p/html5shiv/
44 2
2.

, -
JavaScript
, ,
.
rel class.
.
data-;
HTML5. ,
, ,
, .
,
JavaScript.
,
onclick
,
. ,
,
, ,
, .
, .
, . ,
.
,
. Aweso
meCo ,
. :
2. 45
html5_popups_with_custom_data/original_example_1.html
<a href='#'
onclick="window.open(holiday_pay.html,WinName,width=300,heig
ht=300);">
Holiday pay
</a>
, ,
. , JavaScript
. , , .

!
JavaScript, .
, . href
. ,
.
Download html5_popups_with_custom_data/original_example_2.html
<a href='holiday_pay.html'
onclick="window.open(this.href,WinName,width=300,heig ht=300);">
Holiday pay
</a>
JavaScript href
.
,
, JavaScript.
onclick
,

. onclick ,
, , onclick - .
46 2
JavaScript .
- , Java
Script
, HTML .
.
<a href="holiday_pay" class="popup">Holiday Pay</a>
var links = $("a.popup");
links.click(function(event){
event.preventDefault();
window.open($(this).attr(href'));
});
jQuery
popup, click. , click, , . preventDefault
. .
-
,
. ,
JavaScript,
.
!

JavaScript. ,
, onclick . .
.
html5_popups_with_custom_data/popup.html
<a href="help/holiday_pay.html"
data-width="600"
2. 47
data-height="400"
title="Holiday Pay"
class="popup">Holiday pay</a>
click ,

window.open.
html5_popups_with_custom_data/popup.html
$(function(){
$(".popup").click(function(event){
var href = $(this).attr("href");
var width = $(this).attr("data-width");
var height = $(this).attr("data-height");
var popup = window.open (href,"popup",
"height=" + height +",width=" + width + "");
});
});
! .
, . . ,
, ,
, JavaScript.

( ,
JavaScript).
,
doctype HTML5, , data-,
.
,
. ,
48 2

.
nav, article>footer{display:none}

. ,
JavaScript.
, . 6
. ,
JavaScript ,
Ajax form
data-remote=true ( Ruby on
Rails).
: ,

.
HTML- UTC
.
, ; . ,
.
!
,
, , HTML
. , , ,
, (
Ctrl, , Mac,
Cmd).
, , Prototype jQuery
HTML, CSS JavaScript. ,
, , , , ,
. , , ,

JavaScript
. , , Prototype,
jQuery $().
jQuery() noConflict(), -
, .
? , ,
. ? , .
. -
, .
, contenteditable HTML
50 3 -
1:
<input type="email">
. [O10.1, IOS]
<input type="url">
URL-. [O10.1, IOS]

<input type="tel">
. [O10.1, IOS]
<input type="search">
. [C5, S4, O10.1, IOS]

<input type="range">
. [C5, S4, O10.1]

<input type="number">
, -.
[C5, S5, O10.1, IOS]
<input type="date">
. date, month week.

[C5, S5, O10.1]
<input type="datetime">
. datetime,
datetime-local time. [C5, S5, O10.1]
<input type="color">
. [C5, S5] (Chrome 5 Safari 5

Color, .)
<input type="text" autofocus>
. [C5,
S4]
<input type="email" placeholder="me@example.com">

Browser.
- 51
. [C5,
S4, F4]
<p contenteditable>lorem ipsum</p>
. [C4,
S3.2, IE6, O10.1]
, .
52 3 -
3.

HTML5 ,
.
( , ),
, ,
, , (spinboxes) .
, JavaScript.
,
. , iPhone URL email
Mobile Safari
@ , . , : /.
AwesomeCo

AwesomeCo
-, .
,
. ,
URL
-,
. ,
. ,
,
.
HTML5.

HTML
, POST.
,
text.
3. 53
html5forms/index.html
<form method="post" action="/projects/1">
<fieldset id="personal_information">
<legend>Project Information</legend>
<ol>
<li>
<label for="name">Name</label>
<input type="text" name="name" autofocus id="name">
</li>
<li>
<input type="submit" value="Submit">
</li>
</ol>
</fieldset>
</form>
: ( label).
. for
; .

div. ,
, , ,
.

(
sliders
) .
. range.
<label for="priority">Priority</label>
<input type="range" min="0" max="10"
name="priority" value="0" id="priority">
54 3 -
li ( ). Chrome Opera Slider,

:

min max. , .

. , (spinboxes)
. ,

.

.
.
<label for="estimated_hours">Estimated Hours</label>
<input type="number" name="estimated_hours"
min="0" max="1000"
id="estimated_hours">
Opera -, :
.
,
.
, .
, step.
1, .
3. 55
,
.
date.
<label for="start_date">Start date</label>
<input type="date" name="start_date" id="start_date"
value="2010-12-01">

Opera.
.
Safari 5.0 , ,
. ,
"1582".
.

HTML5 , email
,
. , .
<label for="email">Email contact</label>
<input type="email" name="email" id="email">

,
.
56 3 -
URL-
URL-.
,
iPhone
- (
, URL-
Mobile
Safari
). URL
-, :
<label for="url">Staging URL</label>
<input type="url" name="url" id="url">
. 3.1. Opera
3. 57

. color.
<label for="project_color">Project color</label>
<input type="color" name="project_color" id="project_color">

, . ,
.
Opera (. 3.1),
Firefox, Safari Google Chrome
. - .

, , ,
. jQuery UI
YUI.
, JavaScript .

jQuery CSS3. input
color jQuery SimpleColor.
if (!hasColorSupport()){
$('input[type=color]').simpleColor();
}
,

. HTML5.
58 3 -
,
,
JavaScript , input color.
1 function hasColorSupport(){
input = document.createElement("input");
input.setAttribute("type", "color");
var hasColorType = (input.type !== "text");
5
// Safari/Chrome
if(hasColorType){
var testString = "foo";
input.value=testString;
hasColorType = (input.value != testString);
10 }
return(hasColorType);
- }
JavaScript
type color. type ,
.
color, , ,
.
6 . Safari 5 Google Chrome5
color : ,
. .

, . , , ,
.
, , :
if (!hasColorSupport()){
$('input[type=color]').simpleColor();
}
, :
. ,
. , .
3. 59
Modernizr
Modernizr1
HTML5 CSS3. ,
, , .
Modernizr
, , .
, ,
- . Modernizr

Safari. , Chrome Firefox

, Modernizr!
, .
jQuery UI2.
jQuery UI , ,
, JavaScript.

JavaScript .
- , ,
Modernizr .
, ,
.
, HTML5
. ,
.
http://www.modernizr.com/
http://jqueryui.com/
1
2
60 3 -
4.

,
.
JavaScript, HTML5
.
, autofocus ,
(. 50).
<input type="text" name="name" autofocus id="name">
,
autofocus. , .

,
autofocus JavaScript, jQuery
. ,
.
html5forms/autofocus.js
function hasAutofocus() {
var element = document.createElement('input');
return 'autofocus' in element;
}
$(function(){
if(!hasAutofocus()){
$('input[autofocus=true]').focus();
}
});
JavaScript
, , .
4. 61

. ,
,
. placeholder.
62 3 -
5.
, .
. 3.2. , .
. 3.2. ,

AwesomeCo
.
,
.
.
.
, place
holder:
html5placeholdertext/index.html
<input id="email" type="email"
name="email" placeholder="user@example.com">
5. 63
.
<form id="create_account" action="/signup" method="post">
<fieldset id="signup">
<legend>Create New Account</legend>
<ol>
<li>
<label for="first_name">First Name</label>
<input id="first_name" type="text"
autofocus="true"
name="first_name" placeholder="John">
</li>
<li>
<label for="last_name">Last Name</label>
<input id="last_name" type="text"
name="last_name" placeholder="Smith">
</li>
<li>
<label for="email">Email</label>
<input id="email" type="email"
name="email" placeholder="user@example.com">
</li>
<li>
<label for="password">Password</label>
<input id="password" type="password" name="password"
value=""
autocomplete="off" placeholder="8-10
characters" />
</li>
<li>
<label for="password_confirmation">Password Confirmation</
label>
<input id="password_confirmation" type="password"
name="password_confirmation" value=""
autocomplete="off" placeholder="Type your
password again" />
</li>
<li><input type="submit" value="Sign Up"></li>
</ol>
</fieldset>
</form>
64 3 -

, , password
autocomplete. HTML5 autocomplete,

,
. ,
; ,
.
, CSS
.
html5placeholdertext/style.css
fieldset{
width: 216px;
}
fieldset ol{
list-style: none;
padding:0;
margin:2px;
}
fieldset ol li{
margin:0 0 9px 0;
padding:0;
}
/* */
fieldset input{
display:block;
}
Safari, Opera Chrome

. Firefox Internet Explorer.

JavaScript
. ,
value .
, .
5. 65
, ,
.
,
.
function hasPlaceholderSupport() {
var i = document.createElement('input');
return 'placeholder' in i;
}

JavaScript
. 1 .
, placeholder. , ,
. jQuery,
. , ,
. 66.
html5placeholdertext/jquery.placeholder.js
1 (function($){
$.fn.placeholder = function(){
5
function valueIsPlaceholder(input){
return ($(input).val() == $(input).
attr("placeholder"));
}
return this.each(function() {
10
$(this).find(":input").each(function(){
if($(this).attr("type") == "password"){
var new_field = $("<input type=text>");
15
new_field.attr("rel", $(this).attr("id"));
new_field.attr("value", $(this).
attr("placeholder"));
$(this).parent().append(new_field);
http://www.morethannothing.co.uk/wp-content/
uploads/2010/01/placeholder.js, IE.
66 3 -
20
25
30
35
40
45
50
55
-
new_field.hide();
function showPasswordPlaceHolder(input){
if( $(input).val() == "" ||
valueIsPlaceholder(input) ){
$(input).hide();
$(input[rel= + $(input).attr("id") + ']').
show();
};
};
new_field.focus(function(){
$(this).hide();
$(input# + $(this).attr("rel")).show().focus();
});
$(this).blur(function(){
showPasswordPlaceHolder(this, false);
});
showPasswordPlaceHolder(this);
}else{
// .
// reload
// FF IE.
function showPlaceholder(input, reload){
if( $(input).val() == "" ||
( reload && valueIsPlaceholder(input) ) ){
$(input).val($(input).attr("placeholder"));
}
};
$(this).focus(function(){
if($(this).val() == $(this).attr("placeholder")){
$(this).val("");
};
});
$(this).blur(function(){
showPlaceholder($(this), false)
});
5. 67
60
showPlaceholder(this, true);
};
});
65
//
$(this).submit(function(){
$(this).find(":input").each(function(){
if($(this).val() == $(this).attr("placeholder")){
$(this).val("");
70
}
});
});
});
75
};
- })(jQuery);
, .
45 ,
, .
Firefox , .
value , , , , ,
.
true ( 61).

, .
12:
, .
, ,
.
; ,
.
JavaScript, JavaScript
,
( 66).
68 3 -
JQUERY
jQuery .
jQuery,
, .
JavaScript.
jQuery.fn.debug = function() {
return this.each(function(){
alert(this.html());
});
,
:
$("p").debug();
jQuery jQuery,
. , debug
jQuery, jQuery css
.
$("p").debug().css("color", "red");
jQuery
.
jQuery1.
, , .
$(function(){
function hasPlaceholderSupport() {
var i = document.createElement('input');
return 'placeholder' in i;
}
if(!hasPlaceholderSupport()){
$("#create_account").placeholder();
//END placeholder_fallback
$('input[autofocus=true]').focus();
};
});
, ,
-
.
http://docs.jquery.com/Plugins/Authoring
6. 69
6.
-
. ,

.
, , .
Ajax. HTML5 contenteditable .
JavaScript
, ,
.
AwesomeCo
. ,
, , .

, ,
. 3.3.
. 3.3.
, ,
JavaScript -. ,
contenteditable,
. , ! , JavaScript,
, . , ,

.
70 3 -

HTML5 contenteditable,
. .
html5_content_editable/show.html
<h1>User information</h1>
<div id="status"></div>
<ul>
<li>
<b>Name</b>
<span id="name" contenteditable="true">Hugh Mann</span>
</li>
<li>
<b>City</b>
<span id="city" contenteditable="true">Anytown</span>
</li>
<li>
<b>State</b>
<span id="state" contenteditable="true">OH</span>
</li>
<li>
<b>Postal Code</b>
<span id="postal_code" contenteditable="true">92110</span>
</li>
<li>
<b>Email</b>
<span id="email" contenteditable="true">boss@awesomecompany.
com</span>
</li>
</ul>
CSS.
CSS3
,
.
1 ul{list-style:none;}
- li{clear:both;}
6. 71
5
10
15
20
-
li>b, li>span{
display: block;
float: left;
width: 100px;
li>span{
width:500px;
margin-left: 20px;
}
li>span[contenteditable=true]:hover{
background-color: #ffc;
}
li>span[contenteditable=true]:focus{
background-color: #ffa;
border: 1px shaded #000;
}
.
;
.

, .
;

jQuery
. -
c
Ajax
, .
$(function(){
var status = $("#status");
$("span[contenteditable=true]").blur(function(){
var field = $(this).attr("id");
var value = $(this).text();
$.post("http://localhost:4567/users/1",
field + "=" + value,
72 3 -
function(data){
status.text(data);
}
);
});
});
span
, contenteditable true.
.

. -,
JavaScript .
-, focus,
, IE.
,
.

,
, . ,
, ,
:
JavaScript, Internet Ex
plorer7.
HTML5.
Firefox
HTML5,
JavaScript
-
JavaScript ( ,
).
, POST-
, Ajax.
,
6. 73
accept, , POST- XMLHttpRequest.

contenteditable JavaScript, .
edit.html. , ,
Ajax-.
html5_content_editable/edit.html
<!DOCTYPE html>
<html lang="en-US">
<head>
charset=utf-8" />
<title>Editing Profile</title>
<link href="style.css" rel="stylesheet" media="screen">
</head>
<body>
<form action="/users/1" method="post" acceptcharset="utf-8">
<fieldset id="your_information">
<legend>Your Information</legend>
<ol>
<li>
<label for="name">Your Name</label>
<input type="text" name="name" value="" id="name">
</li>
<li>
<label for="city">City</label>
<input type="text" name="city" value="" id="city">
</li>
<li>
<label for="state">State</label>
<input type="text" name="state" value="" id="state">
</li>
<li>
<label for="postal_code">Postal Code</label>
<input type="text" name="postal_code" value=""
id="postal_code">
</li>
<li>
<input type="email" name="email" value=""
id="email">
74 3 -
</li>
</ol>
</fieldset>
<p><input type="submit" value="Save"></p>
</form>
</body>
</html>
show.html.
<h1>User information</h1>
<section id="edit_profile_link">
<p><a href="edit.html">Edit Your Profile</a></p>
</section>
<div id="status"></div>
. ,
Ajax
.
if(document.getElementById("edit_profile_link").contentEditable
!= null){
:
$(function(){
if(document.getElementById("edit_profile_link").contentEditable
!= null){
$("#edit_profile_link").hide();
var status = $("#status");
$("span[contenteditable=true]").blur(function(){
var field = $(this).attr("id");
var value = $(this).text();
$.post("http://localhost:4567/users/1",
field + "=" + value,
6. 75
);
});
function(data){
status.text(data);
}
});

. , ,
, ,
. ,
, .
Java
Script, , .
, -
, , .

.
, date HTML5, .
, , .

. , .
, ,

,
,
.
76 3 -
,
.
, - , .
HTML5 ,
.

CSS3

CSS.
JavaScript
, .
class , , 50
.
! CSS
3 , .
: ,
HTML
.
. CSS3
.
CSS1:
:nth-of-type [p:nth-of-type(2n+1){color: red;}]
n . [C2, F3.5, S3, IE9,

O9.5, IOS3, A2]

. C
:
Google
Chrome
,
F
:
Firefox
,
IE
:
Internet Explorer, O: Opera, S: Safari, IOS: iOS Mobile Safari, A: Android Browser.
78 4
:rst-child [p:rst-child{color:blue;}]
. [C2, F3.5, S3, IE9, O9.5,

IOS3, A2]
:nth-child [p:nth-child(2n+1){color: red;}]
(
). [C2, F3.5, S3, IE9, O9.5, IOS3, A2]
:last-child [p:last-child{color:blue;}]
. [C2, F3.5, S3, IE9, O9.5,

IOS3, A2]
:nth-last-child [p:nth-last-child(2){color: red;}]
. [C2,
F3.5, S3, IE9, O9.5, IOS3, A2]
:rst-of-type [p:rst-of-type{color:blue;}]
. [C2, F3.5, S3, IE9, O9.5,

IOS3, A2]
:last-of-type [p:last-of-type{color:blue;}]
. [C2, F3.5, S3, IE9, O9.5,

IOS3, A2]
:
[#content{ column-count: 2; column-gap: 20px; column-rule: 1px
solid #ddccb5; }]
. [C2, F3.5, S3,

O9.5, IOS3, A2]
:after [span.weight:after { content: "lbs"; color: #bbb; }]
content
. [C2, F3.5, S3, IE8, O9.5, IOS3, A2]
[media="only all and (max-width: 480)"]
. [C3,
F3.5, S4, IE9, O10.1, IOS3, A2]
7. 79
7.

CSS
, , ,
. , , :hover
, .
CSS
3 ,
.

AwesomeCo
. AwesomeCo
, , , .
.
HTML,
. 4.1.
. 4.1. HTML
,
, , .
,
. ,
.
. , .
80 4
css3advancedselectors/table.html
<table >
<tr>
<th>Item</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr>
<td>Coffee mug</td>
<td>$10.00</td>
<td>5</td>
<td>$50.00</td>
</tr>
<tr>
<td>Polo shirt</td>
<td>$20.00</td>
<td>5</td>
<td>$100.00</td>
</tr>
<tr>
<td>Red stapler</td>
<td>$9.00</td>
<td>4</td>
<td>$36.00</td>
</tr>
<tr>
<td colspan="3">Subtotal</td>
<td>$186.00</td>
</tr>
<tr>
<td colspan="3">Shipping</td>
<td>$12.00</td>
</tr>
<tr>
<td colspan="3">Total Due</td>
<td>$198.00</td>
</tr>
</table>
7. 81
table{
width: 600px;
border-collapse: collapse;
}
th, td{
border: none;
}
:
.
th{
background-color: #000;
color: #fff;
}

. .
(:nth-of-type)

(): ,
.
, CSS.

(, odd even ).
82 4
, HTML5
.
, .
nth-of-type n- ,
.
,
, .
,

. . CSS
3 even odd,
.
tr:nth-of-type(even){
background-color: #F3F3F3;
}
tr:nth-of-type(odd) {
background-color:#ddd;
}
:
. .

.
:
7. 83
(:nth-child)

. , ,
.
nth-child, ,
.
nth-child ;
nth-of-type,
.
an+b, a , b . ;
.

table tr:nth-child(n)
, .
, ( ),
:
table tr:nth-child(n+2)
2n:
table tr:nth-child(2n)
3n.
,
, .
, :
table tr:nth-child(2n+4)
, , ,
:
td:nth-child(n+2){
text-align: right;
}
84 4
(:last-child)
, , .
last-child, .
-
.
.
, ,
,
. last-child
.
p{ margin-bottom: 20px }
#sidebar p:last-child{ margin-bottom: 0; }

.
tr:last-child{
font-weight: bolder;
}
,
:
7. 85
td:last-child{
font-weight: bolder;
}
, last-child
. .
tr:last-child td:last-child{
font-size:24px;
}
. - .
(:nth-last-child)
, .
nth-last-child.
, nth-child an+b
(.
(:nth-child) ). nth-last-child
, ,
, . , , ,
.
, :
86 4
tr:nth-last-child(2){
color: green;
}
.
.
, .
,
. .
nth-last-child
.
tr:nth-last-child(-n+3) td{
text-align: right;
}
.
3, nth-last-child
.
nth-child, .
(. 4.2) , . ,
, Internet
Explorer; .
. 4.2. ,
CSS3
7. 87

, , Opera, Firefox, Safari Chrome, Internet Explorer8.0
. ,
.
HTML
, ,
. , CSS.
;
CSS3.
, .
JavaScript
jQuery CSS3,
, .
IE-css31, CSS3 Internet Explorer.
.
IE-CSS3 jQuery, Prototype , DOMAssistant2,
.
.
IE,
, IE.

Internet Explorer. . 4.3.
. 4.3. Internet Explorer
JavaScript,
. , .
CSS
3 , HTML.
,
.
8. (:after) 89
8. (:after)

CSS
,
. CSS
;
URL
- , . ,
, . , .
AwesomeCo
.
. ,
, ,
.
CSS; IE8,
Firefox, Safari Chrome. JavaScript
IE6 7.
.
.
css3_print_links/index.html
<ul>
<li>
<a href="travel/index.html">Travel Authorization Form</
a>
</li>
<li>
<a href="travel/expenses.html">Travel Reimbursement
Form</a>
</li>
<li>
<a href="travel/guidelines.html">Travel Guidelines</a>
</li>
</ul>
</body>
,
. .
90 4
CSS
,
. screen ,
print ,
(
).
<link rel="stylesheet" href="print.css" type="text/css"
media="print">
print.css .
css3_print_links/print.css
a:after {
content: " (" attr(href) ") ";
}

href .
:
, ,
, .
.
, Internet Explorer 6 7.
, ?
8. (:after) 91

Internet Explorer JavaScript,
: onbeforeprint onafterprint.
.
, - 1.
print.js :
css3_print_links/print.js
1 $(function() {
if (window.onbeforeprint !== undefined) {
window.onbeforeprint = ShowLinks;
window.onafterprint = HideLinks;
5
}
- });
- function ShowLinks() {
$("a").each(function() {
10
$(this).data("linkText", $(this).text());
$(this).append(" (" + $(this).attr("href") + ")");
});
- }
15 function HideLinks() {
$("a").each(function() {
$(this).text($(this).data("linkText"));
});
- }
. IE6 7,
. jQuery,
.
<script
charset="utf-8"
src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/
jquery.min.js'
http://beckelman.net/post/2009/02/16/Use-jQuery-toShow-a-Linke28099s-Address-After-its-Text-When-Printing-In-IE6-and-IE7.aspx
92 4
type='text/javascript'>
</script>

</head>
<body>
<h1>Forms and Policies</h1>
<ul>
<li>
<a href="travel/index.html">Travel Authorization Form</a>
</li>
<li>
<a href="travel/expenses.html">Travel Reimbursement
Form</a>
</li>
<li>
<a href="travel/guidelines.html">Travel Guidelines</a>
</li>
</ul>
JavaScript
URL
- .
, . ,
( ,
).
9. 93
9.
;
- .
,

. ,
, . ,
, CSS3.

AwesomeCo
. -. , ,
.
, .
. 4.4.
. 4.4. -
94 4
. , ,
,
.
- div float, ,
. , .
(, InDesign) ,
. - ,
,
.
.
. HTML-. ,
. , (,
section)? ,
Internet Explorer.
css3columns/condensed_newsletter.html
<body>
<div id="header">
<h1>AwesomeCo Newsletter</h1>
<p>Volume 3, Issue 12</p>
</div>
<div id="newsletter">
<div id="director_news">
<div>
<h2>News From The Director</h2>
</div>
<div>
<p>
Lorem ipsum dolor...
</p>
<div class="callout">
<h4>Being Awesome</h4>
<p>
"Lorem ipsum dolor sit amet..."
</p>
9. 95
</div>
<p>
Duis aute irure...
</p>
</div>
</div>
<div id="awesome_bits">
<div>
<h2>Quick Bits of Awesome</h2>
</div>
<div>
<p>
Lorem ipsum...
</p>
<p>
Duis aute irure...
</p>
</div>
</div>
<div id="birthdays">
<div>
<h2>Birthdays</h2>
</div>
<div>
<p>
Lorem ipsum dolor...
</p>
<p>
Duis aute irure...
</p>
</div>
</div>
</div>
<div id="footer">
<h6>Send newsworthy things to
<a href="mailto:news@aweseomco.com">news@awesomeco.com</a>.
</h6>
</div>
</body>
96 4
,
:
css3columns/newsletter.html
#newsletter{
-moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-moz-column-rule: 1px solid #ddccb5;
-webkit-column-rule: 1px solid #ddccb5;
}
/
?
, . .
, .
.
, , , .
, , .
, .
. 4.5.
9. 97
(. 4.5) .
,
. ,
float .

CSS3 Internet Explorer 8 ,
, jQuery Columnizer1. Columnizer
:
$("#newsletter").columnize({ columns: 2 });

JavaScript
. ,
, . JavaScript ,
. CSS
, . null,
, .
<script
charset="utf-8"
src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/
jquery.
min.js'
</script>
<script
charset="utf-8"
src="javascripts/autocolumn.js"
</script>
<script type="text/javascript">
function hasColumnSupport(){
var element = document.documentElement;
http://welcome.totheinter.net/columnizer-jquery-plugin/
98 4
var style = element.style;

if (style){
return typeof style.columnCount == "string" ||
typeof style.MozColumnCount == "string" ||
typeof style.WebkitColumnCount == "string" ||
typeof style.KhtmlColumnCount == "string";
}
return null;
$(function(){
if(!hasColumnSupport()){
$("#newsletter").columnize({ columns: 2 });
}
});
</script>
, ,
.
Internet Explorer,
. , ( . 4.6)
CSS JavaScript
;
.
Internet Explorer, 7 .77.
. ,
.
.
10. 99
10.

, (
8 .87). CSS31 . JavaScript
;
.
:
.
( ).
.
.
, .
, AwesomeCo
BlackBerry iPhone.
,
.28, iPhone. .
.
iPhone, float-.
,
.
/
Handheld?
Handheld
.
,
screen.
http://www.w3.org/TR/css3-mediaqueries/
100 4
,
:
css3mediaquery/style.css
@media only screen and (max-device-width: 480px) {
body{
width:460px;
}
section#sidebar, section#posts{
float: none;
width: 100%;
}
, . ,
.
, ,
:
<link rel="stylesheet" type="text/css"
href="CSS/mobile.css" media="only screen and (max-devicewidth: 480px)">

iPhone.
, , ..,
.

Firefox, Chrome, Safari, Opera

Internet
Explorer
9.
JavaScript.
iPhone,
.
10. 101

,
jQuery
, 1. ,

min-width max-width .
.
, ,
. ,
; ,
;
, . ,
, JavaScript
.
, Internet Explorer. ,
IE
( ).
moz webkit- . ,
.
http://plugins.jquery.com/project/MediaQueries
HTML5
. ,
. , ,
,
.
,
.
, -. , Ajax
.
, .
WIA-ARIA1 (Accessibility for Rich Internet Applica
tions) - -.
JavaScript Ajax.
WIA-ARIA HTML5, HTML5.
WIA-ARIA , JAWS, WindowEyes Apple
VoiceOver. WIA-ARIA ,
http://www.w3.org/WAI/intro/aria.php
103
. , HTML5 . ,
, ,
, .
1:
role [<div role="document">]
. [C3,
F3.6, S4, IE8, O9.6]
aria-live [<div aria-live="polite">]
(, Ajax) . [F3.6 (Windows), S4, IE8]
aria-atomic [<div aria-live="polite" aria-atomic="true">]
. [F3.6 (Windows), S4, IE8]

Browser.
104 5
11. ARIA
: , , .
, .
, ,
.
,
.
,
; -
.
,
( ), .
HTML5 role
. . ,
navigation
.
WIA-ARIA1

HTML
5. : .

(, , ..), .
banner
search
navigation
main
http://www.w3.org/WAI/PF/aria/roles
11. ARIA 105
contentinfo
: , ..
complementary
, ,
application
, - ( )
AwesomeCo,
. 28.
banner:
html5_aria/blog/index.html
<header id="page_header" role="banner">
</header>

role="banner" .
.
<nav role="navigation">
<ul>
<li><a href="/">Latest Posts</a></li>
<li><a href="/archives">Archives</a></li>
<li><a href="/contributors">Contributors</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>
</nav>

HTML
5 , , .
nav navigation,
.
, ARIA.
:
<section id="posts" role="main">
</section>
106 5
<section id="sidebar" role="complementary">
<nav>
<h3>Archives</h3>
<ul>
<li><a href="2010/10">October 2010</a></li>
<li><a href="2010/09">September 2010</a></li>
<li><a href="2010/08">August 2010</a></li>
<li><a href="2010/07">July 2010</a></li>
<li><a href="2010/06">June 2010</a></li>
<li><a href="2010/05">May 2010</a></li>
<li><a href="2010/04">April 2010</a></li>
<li><a href="2010/03">March 2010</a></li>
<li><a href="2010/02">February 2010</a></li>
<li><a href="2010/01">January 2010</a></li>
</ul>
</nav>
</section> 

contentinfo.
<footer id="page_footer" role="contentinfo">
</footer> 
,
.
, .
.

.
(, ) HTML. document ,
,
. , ,
. ,
11. ARIA 107
.
, ,
-.

.
/
, ,
nav header?
, ,
, .
search
, , ,
,
(
).
,
.
document
( )
article
definition
directory
(, ).

heading
img
, .
,
list
listitem
math
note
presentation
, ;

row
rowheader
108 5
document body.
<body role="document">

, .
, ; , ,
.
12. 109
12.

Ajax -.
, .
, , .
WIA-ARIA
,
IE
, Firefox
Safari
.
AwesomeCo
.
(Service), (Contacts)
(About Us). , , .
,
.
, aria-live ,
,
, .
. 5.1.
; JavaScript
, , .
, jQuery
, .
JavaScript ,
, JavaScript .
. 5.1. jQuery
110 5

HTML5.
, .
:
html5_aria/homepage/index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
charset=utf-8" />
<title>AwesomeCo</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<header id="header">
<h1>AwesomeCo </h1>
<nav>
<ul>
<li><a href="#welcome">Welcome</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<section id="content"
role="document" aria-live="assertive" ariaatomic="true">
<section id="welcome">
<header>
<h2>Welcome</h2>
</header>
<p>The welcome section</p>
</section>
</section>
<footer id="footer">
<nav>
<ul>
<li><a href="http://awesomeco.com/">Home</a></li>
12. 111
<li><a href="about">About</a></li>
<li><a href="terms.html">Terms of Service</a></li>
<li><a href="privacy.html">Privacy</a></li>
</ul>
</nav>
</footer>
</body>
</html>
welcome, .
.
<section id="services">
<header>
<h2>Services</h2>
</header>
<p>The services section</p>
</section>
<section id="contact">
<header>
<h2>Contact</h2>
</header>
<p>The contact section</p>
</section>
<section id="about">
<header>
<h2>About</h2>
</header>
<p>The about section</p>
</section>
:
<section id="content"
role="document" aria-live="assertive" ariaatomic="true">
,
.
112 5

aria-live. polite
. , ,
polite, .
, assertive ,
.
. assertive . assertive
. ,
.

, aria-atomic=true,
. false,
. ,
.
Ajax,
false.

, JavaScript
. application.js
jQuery .
charset="utf-8"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.
min.js">
</script>
charset="utf-8"
src="javascripts/application.js">
</script>
12. 113
application.js :
html5_aria/homepage/javascripts/application.js
1
// HTML5 IE6, 7 8
document.createElement("header");
document.createElement("footer");
5
document.createElement("aside");
document.createElement("article");
document.createElement("nav");
- $(function(){
10
$("#services, #about, #contact").hide().addClass("hidden");
$("#welcome").addClass("visible");
$("nav ul").click(function(event){
15
target = $(event.target);
if(target.is("a")){
if ( $(target.attr("href")).hasClass("hidden") ){
20
$(".visible").removeClass("visible")
.addClass("hidden")
.hide();
$(target.attr("href"))
.removeClass("hidden")
25
.addClass("visible")
.show();
};
};
30
});
- });
11 services, about contact.

"hidden" ,
"welcome" "visible".

.
14 ,
17 , .
114 5
, , . href , ,

jQuery ( 19).
, ,
. , ,
.

, , . ,
( JavaScript)
. ,
.
HTML5 WIA-ARIA
Web.
JavaScript
, .
II
II

6. . . . . . . . . 11 2
7. . . . . . . 13 5
8. . . . . . . . . . 15 4
HTML
5 CSS
3 , .
HTML5
canvas.
-, - ,
img. , Flash.
HTML5 canvas
,
JavaScript.
, Flash .
1.
<canvas> [<canvas id="my_canvas" width="150" height="150">]
JavaScript. [C4, F3, IE9, S3.2,

O10.1, IOS3.2, A2]
JavaScript canvas
AwesomeCo
. ,

. C
:
Google
Chrome
,
F
:
Firefox
,
IE
:
Internet Explorer, O: Opera, S: Safari, IOS: iOS Mobile Safari, A: Android Browser.
118 6
canvas,
. , ,
canvas ,
.
13. 119
13.
canvas ( script). , .
.
html5canvasgraph/canvas_simple_drawing.html
<canvas id="my_canvas" width="150" height="150">
Fallback content here
</canvas>
,
canvas CSS ,
.
JavaScript.
,
canvas, JavaScript. canvas
, getContext.
var canvas = document.getElementById('my_canvas');
if (canvas.getContext){
var context = canvas.getContext('2d');
}else{
// -
// <canvas>.
}
getContext , 2D-
. ,
.
,
. , ,
, .
context.fillStyle = "rgb(200,0,0)";
context.fillRect (10, 10, 100, 100);
120 6
2D-
. X Y, .
;
, 10
.
13. 121
,
, AwesomeCo. ,
. 6.1, .
. 6.1. AwesomeCo

, , . HTML5,
canvas, JavaScript .
2D-.
html5canvasgraph/logo.html
var drawLogo = function(){
var canvas = document.getElementById('logo');
var context = canvas.getContext('2d');
};

canvas.
$(function(){
var canvas = document.getElementById('logo');
drawLogo();
}
});
logo,
canvas .
<canvas id="logo" width="900" height="80">
<h1>AwesomeCo</h1>
</canvas>
AwesomeCo.
122 6

,
, .
AwesomeCo :
context.font = 'italic 40px sans-serif';
context.textBaseline = 'top';
context.fillText('AwesomeCo', 60, 0);
( ).
fillText , 60 . ,
.

. ,
. .
beginPath() , lineTo:
context.lineWidth = 2;
context.beginPath();
13. 123
context.moveTo(0, 40);
context.lineTo(30, 0);
context.lineTo(60, 40 );
context.stroke();
context.closePath();
stroke
, closePath .

.

. X
Y ,
,
.

.
context.save();
context.translate(20,20);
context.fillRect(0,0,20,20);
save()
: . save() , . save()
. ,
restore() .
, stroke fill
, .
context.fillStyle = '#fff';
context.strokeStyle = '#fff';
context.lineWidth = 2;
124 6
context.beginPath();
context.moveTo(0, 20);
context.lineTo(10, 0);
context.fill();
context.closePath();
context.restore();

(#fff). , ,
.
; .

.
,
:
context.fillStyle = "#f00";
context.strokeStyle = "#f00";
.
.
html5canvasgraph/logo_gradient.html
// context.fillStyle = "#f00";
// context.strokeStyle = "#f00";
var gradient = context.createLinearGradient(0, 0, 0, 40);
gradient.addColorStop(0, '#a00'); //
gradient.addColorStop(1, '#f00'); //
context.fillStyle = gradient;
context.strokeStyle = gradient;
. ,
1.
, !
13. 125
:
.
,
. Internet Explorer 9 canvas . .

Google ExplorerCanvas1,

Canvas
API
Internet Explorer.
.
html5canvasgraph/logo_gradient.html

Internet Explorer,
.
, Subversion2
. ,
.
, (, canvas PNG)
canvas. ,
,
- ,
.
http://code.google.com/p/explorercanvas/
http://explorercanvas.googlecode.com/svn/trunk/excanvas.js
1
2
126 6
14.
RGraph

AwesomeCo
, -. , ,
. ,
, . . 6.2.
. 6.2.
canvas
-. Flash,
:
(, iPad iPhone).
,
.
(, canvas),
. ,
JavaScript.
.
, HTML5 , RGraph1. RGraph
http://www.rgraph.net/
14. RGraph 127
HTML
5 . , JavaScript,

JavaScript, , , canvas. .
Download html5canvasgraph/rgraph_bar_example.html
<canvas width="500" height="250" id="test">[no canvas support]</
canvas>
<script type="text/javascript" charset="utf-8">
var bar = new RGraph.Bar('test', [50,25,15,10]);
bar.Set('chart.gutter', 50);
bar.Set('chart.colors', ['red']);
bar.Set('chart.title', "A bar graph of my favorite pies");
bar.Set('chart.labels', ["Banana Creme", "Pumpkin", "Apple",
"Cherry"]);
bar.Draw();
</script>
JavaScript
, .
HTML
, ,
JavaScript,
JavaScript.
.

JavaScript
.
html5canvasgraph/canvas_graph.html
<div id="graph_data">
<h1>Browser share for this site</h1>
<ul>
<li>
<p data-name="Safari 4" data-percent="15">
Safari 4 - 15%
</p>
</li>
<li>
<p data-name="Internet Explorer" data-percent="55">
128 6
Internet Explorer - 55%

</p>
</li>
<li>
<p data-name="Firefox" data-percent="14">
Firefox - 14%
</p>
</li>
<li>
<p data-name="Google Chrome" data-percent="16">
Google Chrome - 16%
</p>
</li>
</ul>
</div>
HTML
5 . ,
,
.
. 6.3, ,
.
,
canvas JavaScript.
. 6.3. HTML
14. RGraph 129
HTML
, RGraph, RGraph Bar graph.

jQuery.
HTML.
charset="utf-8"
min.js">
</script>
<script src="javascripts/RGraph.common.js" ></script>
<script src="javascripts/RGraph.bar.js" ></script>
, HTML-
,
RGraph. , RGraph .
jQuery.
1 function canvasGraph(){
var title = $('#graph_data h1').text();
var labels = $("#graph_data>ul>li>p[data-name]").
map(function(){
5
return $(this).attr("data-name");
});
var percents = $("#graph_data>ul>li>p[data-percent]").
map(function(){
return parseInt($(this).attr("data-percent"));
10
});
var bar = new RGraph.Bar('browsers', percents);
bar.Set('chart.gutter', 50);
bar.Set('chart.colors', ['red']);
15
bar.Set('chart.title', title);
bar.Set('chart.labels', labels);
bar.Draw();
- }
130 6
2 . , 4
data-name.
jQuery map.
8
.
, RGraph

14 canvas. ,
canvas, , . canvas,
JavaScript, .
JQUERY CSS CSS
jQuery
. (,
) , .
, , .
canvas,
jQuery
canvas.
var canvas = document.getElementById('browsers');
$('#graph_data').hide();
canvasGraph();
}
, ,
canvas.

JavaScript.
14. RGraph 131
,
canvas,
JavaScript.
,
.
,
, .
1 function divGraph(barColor, textColor, width, spacer,
lblHeight){
$('#graph_data ul').hide();
var container = $("#graph_data");
5
container.css( {
"display" : "block",
"position" : "relative",
"height": "300px"}
);
10
$("#graph_data>ul>li>p").each(function(i){
var bar = $("<div>" + $(this).attr("data-percent") +
"%</ div>");
var label = $("<div>" + $(this).attr("data-name") +
"</ div>");
15
var commonCSS = {
"width": width + "px",
"position" : "absolute",
"left" : i * (width + spacer) + "px"};
20
var barCSS = {
"background-color" : barColor,
"color" : textColor,
"bottom" : lblHeight + "px",
25
"height" : $(this).attr("data-percent") + "%"
};
var labelCSS = {"bottom" : "0", "text-align" : "center"};
bar.css( $.extend(barCSS, commonCSS) );
30
label.css( $.extend(labelCSS,commonCSS) );
-
132 6
container.append(bar);
container.append(label);
});
35
- }
2 .
, ,
CSS. 7 relative,
.
( 11)
.
div, , .
,
jQuery . ,
,
.
canvas.
var canvas = document.getElementById('browsers');
$('#graph_data').hide();
canvasGraph();
}
else{
divGraph("#f00", "#fff", 140, 10, 20);
}
. 6.4. JavaScript, HTML CSS,

,
. canvas :
( - ). ,
.
.
,
14. RGraph 133
,
.
/
ExplorerCanvas?
ExplorerCanvas (. 13) RGraph

. RGraph ExplorerCanvas.
Internet Explorer 8. Internet
Explorer 7
.
ExplorerCanvas, . ,
.
, canvas, . ,
canvas , . , JavaScript
.
Flash canvas,
. HTML5
, canvas ;
2
D
- . canvas
134 6
, Flash ( Linux OS X). ,

2D- canvas ,
Flash . canvas ,
canvas. ,

.
canvas 2D-.
canvas 3D-,
.
- ,
JavaScript.
- . ,
, . HTML5
- .
,
- ,
.
1:
<audio> [<audio src="drums.mp3"></audio>]
. [C4,
F3.6, IE9, S3.2, O10.1, IOS3, A2]
<video> [<video src="tutorial.m4v"></video>]
. [C4,
F3.6, IE9, S3.2, O10.5, IOS3, A2]

Web. , , , ,
.

Browser.
136 7
7.1.
- . MIDI-
, embed .
<embed src="awesome.mp3" autostart="true"
loop="true" controller="true"></embed>
embed , object , W3C.

, object,
embed object:
<object>
<param name="src" value="simpsons.mp3">
<param name="autoplay" value="false">
<param name="controller" value="true">
<embed src="awesome.mp3" autostart="false"
loop="false" controller="true"></embed>
</object>
,
.
Web. - Web ,
RealPlayer Windows Media QuickTime.
; , .
Macromedia ( Adobe) ,
Flash Player -
- . Flash 97 % . ,

, Flash
.
2007 Apple iPhone iPod Touch.
, Apple Flash .
, Mobile Safari. , h>264,
Flash Player,
137
, , .
HTML5 ,
, , HTML.
HTML5:
-.
/
Flash ,
?
, , .
CSS JavaScript,
Flash-.
.
7.2.
Web
. , - , (, ). - ; .
,
HTML5 .
. , ,
, .
,

.
, , .
HTML5 video, : H.264,
Theora VP8.
138 7

H.264
[IE9, S4, C3, IOS]
Theora
[F3.5, C4, O10]
VP8
[IE9 ( ), F4, C5, O10.7]
H.264
H
.264 ,
MPEG
2003 .
(, ) H.264 .
, . , iPhone
Flash Player ,
H.264, iPhone
, Flash Player
.
.
H.264
Microsoft Apple, .
, Google YouTube H.264,
iPhone; , H.264 Flash Player Adobe. . , .

H.264, ,
1.
,

.
.
http://www.reelseo.com/mpeg-la-announces-avc-h264-free-license-lifetime/
139
Theora
Theora , Xiph.Org Foundation.
Theora
, H.264,
. Firefox, Chrome Opera

Theora
, Internet Explorer, Safari iOS
. Apple Microsoft
,
. ,
.
VP8
VP
8 Google
, H.264. Mozilla, Google Chrome
Opera
,
Microsoft
VP
8
Internet
Ex
plorer 9 , .
,
Adobe
Flash
Player
, . , Safari
iOS; , ,

iPhone
iPad
H.264.

.

AAC
[S4, C3, IOS]
MP3
[IE9, S4, C3, IOS]
Vorbis (OGG)
[F3, C4, O10]
140 7
AAC (Advanced Audio Coding)

Apple iTunes
Store.
,
MP
3, ,
H.264. , H.264,
.
AAC Apple, Adobe
Flash Player VLC.
Vorbis (OGG)
,
;
Firefox
,
Opera
Chrome
. Theora VP8. Vorbis

, .
MP3

MP
3, , Firefox Opera - .
, Safari Google Chrome.
. ,
?
:
,
- .
, .
, - .

, Web
:
OGG Theora Vorbis Firefox,
Chrome Opera.
MP4 H.264 AAC Safari
Chrome. Adobe Flash Player, iPhone, iPod iPad.
141
WebM VP8 Vorbis Firefox,

Chrome, Opera Adobe Flash Player.
Google Mozilla VP8 WebM,
Theora .
,

Apple
( ,
) Firefox Opera,
H.2641.
, .
- .
http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2009-June/020620.html
142 7
15.
AwesomeCo .

. , .

MP3 OGG.

.

: drums, organ, bass guitar.
HTML
. drums :
html5_audio/audio.html
<article class="sample">
<header><h2>Drums</h2></header>
<audio id="drums" controls>
<source src="sounds/ogg/drums.ogg" type="audio/ogg">
<source src="sounds/mp3/drums.mp3" type="audio/mpeg">
<a href="sounds/mp3/drums.mp3">Download drums.mp3</a>
</audio>
</article>
audio ,
.
-:
MP3- OGG- ,
MP3 ,
audio.
Chrome, Safari Fi
refox
. HTML5 .
html5_audio/audio.html
15. 143

</audio>
</article>
<header><h2>Guitar</h2></header>
<audio id="guitar" controls>
<source src="sounds/ogg/guitar.ogg" type="audio/ogg">
<source src="sounds/mp3/guitar.mp3" type="audio/mpeg">
<a href="sounds/mp3/guitar.mp3">Download guitar.mp3</a>
</audio>
</article>
<header><h2>Organ</h2></header>
<audio id="organ" controls>
<source src="sounds/ogg/organ.ogg" type="audio/ogg">
<source src="sounds/mp3/organ.mp3" type="audio/mpeg">
<a href="sounds/mp3/organ.mp3">Download organ.mp3</a>
</audio>
</article>
<header><h2>Bass</h2></header>
<audio id="bass" controls>
<source src="sounds/ogg/bass.ogg" type="audio/ogg">
<source src="sounds/mp3/bass.mp3" type="audio/mpeg">
<a href="sounds/mp3/bass.mp3">Download bass.mp3</a>
</audio>
</article>
</body>
</html>
HTML5- ,

(. 7.1).
Play.
Internet Explorer,
, audio.
, -
?
144 7
. 7.1. Safari

audio .
source,
.
audio, . Flash
.
. , audio, . , , ,
. ,

HTML
5 ,
, .

audio JavaScript.
html5_audio/advanced_audio.html
15. 145

</audio>
</article>

. JavaScript
audio ,
canPlayType().
var canPlayAudioFiles = !!(document.createElement('audio').
canPlayType);
, ,
, .
$(function(){
var canPlayAudioFiles = !!(document.createElement('audio').
canPlayType);
if(canPlayAudioFiles){
$(".sample a").hide();
};
});

. ,
.

. HTML5
JavaScript API (. .148).
146 7
16.

AwesomeCo
,
, iPad.

Photoshop
, . , H.264, Theora
VP8, 1.
video audio.
, Chrome, Firefox, Safari, iPhone,
iPad Internet Explorer 9 - . 01_blur
:
html5video/index.html
<article>
<header>
<h2>Saturate with Blur</h2>
</header>
<video controls>
<source src="video/h264/01_blur.mp4">
<source src="video/theora/01_blur.ogv">
<source src="video/webm/01_blur.webm">
<p>Your browser does not support the video tag.</p>
</video>
</article>
video . autoplay ,
.
, - ,
.htaccess- , -,
MIME- .
Download html5video/.htaccess
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
.
16. 147
- , ,
. . 7.2.
Internet Explorer 8 . Flash.
. 7.2. HTML5- Safari

Flash
HTML5, Flash video.

Video For Everybody1 , .
Flowplayer2 Flash, H.264. , flowplayer-x.x.x.swf
flowplayer-controls-x.x.x.swf swf .
video,
source.
http://videoforeverybody
http://flowplayer.org/download/index.html
1
2
148 7
<object width="640" height="480"
type="application/x-shockwave-flash"
data="swf/flowplayer-3.2.2.swf">
<param name="movie" value="swf/flowplayer-3.2.2.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars"
value='config={"clip":{"url":"../video/h264/01_blur.mp4",
"autoPlay":false,
"autoBuffering":true
}
}' />
<img src="video/thumbs/01_blur.png"
width="640" height="264" alt="Poster Image"
title="No video playback capabilities." />
</object>
:
<param name="flashvars"
value='config={"clip":{"url":"../video/h264/01_blur.mp4",
"autoPlay":false,
"autoBuffering":true
}
}' />
Flowplayer. Flowplayer
swf, ../video/h264/01_
blur.mp4.
. ,
,
HTML5, <img> <source>, , source, ,
.
source .
Internet
Explorer
, Flowplayer
. Internet
Explorer
, . 7.3.
16. 149
, , video
Flash.
,
.
. 7.3. Internet Explorer Flowplayer
<section class="downloads">
<header>
<h3>Downloads</h3>
</header>
<ul>
<li><a href="video/h264/01_blur.mp4">H264, playable on most
platforms</a></li>
<li><a href="video/theora/01_blur.ogv">OGG format</a></li>
<li><a href="video/webm/01_blur.webm">WebM format</a></li>
</ul>
</section>
HTML5 ,
JavaScript.
150 7
function canPlayVideo() {
return !!document.createElement('video').canPlayType;
}
if(canPlayVideo()){
$(#videos .downloads).hide();
}
, , ,
15, (.140).
iPod iPad .
MEDIA CONTENT JAVASCRIPT API
JavaScript API
audio
video
. API
, , audio.
15,
. JavaScript API,
() .
:
Download html5_audio/advanced_audio.html
var element = $("<p><input type='button' value='Play all'/></
p>")
element.click(function(){
$("audio").each(function(){
this.play();
})
});
$("body").append(element);
Play All audio
play() .
.
API
.
, JavaScript API
. , 1.
http://www.w3.org/TR/html5/video.html#media-elements
16. 151
HTML5

HTML
5 .
-, HTML5
. .
Flash (
,
Adobe
Flash
).
HTML5
(, , ).
-, . , Hulu1, , HTML5. Flash
.
- ( ),
.
HTML5.
H.264
,
iPod iPad, HTML5 video Flash.
HTML5 ,
, Flash
HTML5 .

-, Flash2,
HTML53. , iPhone
iPad
, , ,
Flash .

Flash
HTML
5 H
.264. , HTML5.
. , HTML5.
http://www.hulu.com
http://chicagopressrelease.com/news/in-tech-world-porn-quietly-leads-the-way
3
http://news.avn.com/articles/Joone-Points-to-HTML-5-as-Future-of-Web-Content-Deli
very-401434.html
1
2
152 7
,

. ,
HTML5.
,
, . ,
. - , . ,

, .
,
.
<section class="transcript">
<h2>Transcript</h2>
<p>We'll drag the existing layer to the new button on the
bottom of the Layers palette to create a new copy.</p>
<p>Next we'll go to the Filter menu and choose "Gaussian
Blur". We'll change the blur amount just enough so that we
lose a little bit of the detail of the image.</p>
<p>Now we'll double-click on the layer to edit the layer and
change the blending mode to "Overlay". We can then adjust
the amount of the effect by changing the opacity slider.</p>
<p>Now we have a slightly enhanced image.</p>
</section>

.
, .

. - JavaScript
-
16. 153
Flash.
, iPhone,
, Java
Script. , -
, .
- . CSS3
.
; ; , ,
. Photoshop
; , .
, . - ,
, , .
CSS3 @font-face, .
CSS31:
border-radius [border-radius: 10px;]
. [C4, F3, IE9, S3.2, O10.5]
RGBa [background-color: rgba(255,0,0,0.5);]
RGB
(-) [C4, F3.5, IE9, S3.2, O10.1]
Browser.
155
box-shadow [box-shadow: 10px 10px 5px #333;]
, .[C3, F3.5, IE9, S3.2,

O10.5]
[transform: rotate(7.5deg);]
. [C3, F3.5, IE9, S3.2, O10.5]
[linear-gradient(top, #fff, #efefef);]

. [C4, F3.5, S4]
@font-face [ @font-face { font-family: AwesomeFont; ] src:
url(http://example.com/awesomeco.ttf); font-weight: bold; }]
CSS. [C4,
F3.5, IE5+, S3.2, O10.1]
156 8
17.
Web .
, - , . , . CSS3
,
Firefox Safari. , Internet Explorer
, .

, ,
. CSS3. , ,
. 8.1.
. 8.1.
HTML.
css3roughedges/rounded_corners.html
<form action="/login" method="post">
<fieldset id="login">
<legend>Log in</legend>
<ol>
<li>
<input id="email" type="email" name="email">
</li>
<li>
17. 157
<label for="password">Password</label>
<input id="password" type="password"
name="password" value="" autocomplete="off"/>
</li>
<li><input type="submit" value="Log in"></li>
</ol>
</fieldset>
</form>
.
css3roughedges/style.css
fieldset{
width: 216px;
border: none;
background-color: #ddd;
}
fieldset legend{
padding: 0 64px 0 2px;
}
fieldset>ol{list-style: none;
padding:0;
margin: 2px;
}
fieldset>ol>li{
margin: 0 0 9px 0;
padding: 0;
}
/* */
fieldset input{
display:block;
}
input{
width: 200px;
background-color: #fff;
border: 1px solid #bbb;
}
158 8
input[type="submit"]{
width: 202px;
padding: 0;
background-color: #bbb;
}

. ,
.
,
CSS3 , . ;

, .
,
. CSS,
.
,
.
Firefox :
-moz-border-radius: 5px;
WebKit (, Safari Chrome)

.
-webkit-border-radius: 5px;

CSS
input, fieldset, legend{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
17. 159
style.css,
.

Firefox, Safari Google Chrome,
, Internet Explorer , ,
.
-
, .
JavaScript,
.
jQuery, jQuery Corner Corner
.

,
9. jQuery , ,
, .
CSS border-radius (,
webkit moz).
corner.js :
css3roughedges/corner.js
function hasBorderRadius(){
var element = document.documentElement;
var style = element.style;
if (style){
return typeof style.borderRadius == "string" ||
typeof style.MozBorderRadius == "string" ||
typeof style.WebkitBorderRadius == "string" ||
typeof style.KhtmlBorderRadius == "string";
}
return null;
}
, ,
, .
, ,
.
160 8
!
,
.
. - , , , CSS.
Safari Firefox, ,

.
jQuery Corners
jQuery Corners1
. div, ,
. , jQuery
.
jQuery Corners HTML.
corner.js.
<script src="jquery.corner.js" charset="utf-8" type='text/
javascript'></script>
<script src="corner.js" charset="utf-8" type='text/
javascript'></script>
, .
formCorners

jQuery
, . jQuery
5 (. 60). , , 2.
http://www.malsup.com/jquery/corner/
http://www.tonyamoyal.com/2009/06/23/text-inputs-with-rounded-corners-using-jquerywithout-image/
1
2
17. 161
corners.js :
(function($){
$.fn.formCorner = function(){
return this.each(function() {
var input = $(this);
var input_background = input.css("background-color");
var input_border = input.css("border-color");
input.css("border", "none");
var wrap_width = parseInt(input.css("width")) + 4;
var wrapper = input.wrap("<div></div>").parent();
var border = wrapper.wrap("<div></div>").parent();
wrapper.css("background-color", input_background)
.css("padding", "1px");
border.css("background-color",input_border)
.css("width", wrap_width + "px")
.css('padding', '1px');
wrapper.corner("round 5px");
border.corner("round 5px");
});
};
})(jQuery);
jQuery,
, div, . div
,
. ,
,
(
padding
). . 10 7 . ,
.
.

,
. corners.js :
162 8
1 $(function(){
2
if(!hasBorderRadius()){
3
$("input").formCorner();
4
$("fieldset").corner("round 5px");
5
$("legend").corner("round top 5px cc:#fff");
6
}
7 });
(
fieldset
); 5 ,
. , .
border-radius,
. CSS.

IE
. IE,
, , Firefox Chrome.
<link rel="stylesheet" href="style.css" type="text/css"
media="screen">

;
Internet Explorer . 8.2.
17. 163
,
. ,
(, , ).
164 8
18. ,
, ,
CSS3. ,
; ;
.
AwesomeConf -
, AwesomeCo.
- PSD-, . 8.3.
,
CSS.
: .
. 8.3. , CSS3

HTML.
css3banner/index.html
<div id="conference">
<section id="badge">
<h3>Hi, My Name Is</h3>
<h2>Barney</h2>
</section>
<section id="info">
</section>
</div>
18. , 165
css3banner/style.css
#conference{
background-color: #000;
width: 960px;
float:left;
background-image: url('images/awesomeconf.jpg');
background-position: center;
height: 240px;
}
#badge{
text-align: center;
width: 200px;
border: 2px solid blue;
}
#info{
margin: 20px;
padding: 20px;
width: 660px;
height: 160px;
}
#badge, #info{
float: left;
}
#badge h2{
margin: 0;
color: red;
font-size: 40px;
}
#badge h3{
margin: 0;
background-color: blue;
color: #fff;
}
(. 8.4).
.
166 8
. 8.4.

, , -.
Firefox, Safari Chrome, Firefox
. Chrome Safari
WebKit, , Firefox
, W
3
C
. , 1 (.
17, . 154).
#badge{
background-image: -moz-linear-gradient(
top, #fff, #efefef
);
background-image: -webkit-gradient(
linear,left top, left bottom,
color-stop(0, #fff),
color-stop(1, #efefef)
);
background-image: linear-gradient(
top, #fff, #efefef
);
Firefox -moz-linear-gradient ,
,
.
http://dev.w3.org/csswg/css3-images/#linear-gradients
18. , 167
WebKit .
, .

, ,
. Photoshop ,
. CSS3 box-shadow 1.
:
#badge{
-moz-box-shadow: 5px 5px 5px #333;
-webkit-box-shadow: 5px 5px 5px #333;
-o-box-shadow: 5px 5px 5px #333;
box-shadow: 5px 5px 5px #333;
}
box-shadow .
.
, .
. ,
.

, .
, box-shadow:
h1{text-shadow: 2px 2px 2px #bbbbbb;}

X Y, . IE 6, 7 8
Shadow:
filter: Shadow(Color=#bbbbbb,
Direction=135,
Strength=3);
, , , .
http://www.w3.org/TR/css3-background/#the-box-shadow
168 8
. 0
, . .
, ,
, ,
. . -
, .
, (
).

.

CSS
3 , , (, Flash, Illustrator
Inkscape)1. , -
.
, .
#badge{
-moz-transform: rotate(-7.5deg);
-o-transform: rotate(-7.5deg);
-webkit-transform: rotate(-7.5deg);
-ms-transform: rotate(-7.5deg);
transform: rotate(-7.5deg);
}

CSS
3 . , .
.
, ,
. , ,
. , , ,
!
http://www.w3.org/TR/css3-2d-transforms/#transform-property
18. , 169

- .

Photoshop
, PNG CSS. CSS3
,
.
-
. ,
: 00 , FF
. , FF0000, , ,
.
CSS3 rgb rgba. rgb
,
0 255. , rgb(255,0,0).
rgba , , ( 0 1).
0, ,
. , :
#info{
background-color: rgba(255,255,255,0.95);
}
,
, ; ,
.
, .
#info{
moz-border-radius: 12px;
webkit-border-radius: 12px;
o-border-radius: 12px;
border-radius: 12px;
}
170 8
Safari, Firefox
Chrome. Internet Explorer.

, , IE9,
Internet Explorer 6, 7 8!
Microsoft DirectX, ,

, IE.
section, CSS,
JavaScript, IE
.
css3banner/index.html

</head>
<body>
<div id="conference">
<section id="badge">
<h3>Hi, My Name Is</h3>
<h2>Barney</h2>
</section>
<section id="info">
</section>
</div>
</body>
</html>
DirectX IE6, 7 8, IE8

,
.
, .
18. , 171
,
. , Matrix
. , ,
, 1:
css3banner/filters.css
filter: progid:DXImageTransform.Microsoft.Matrix(
sizingMethod='auto expand',
M11=0.9914448613738104,
M12=0.13052619222005157,
M21=-0.13052619222005157,
M22=0.9914448613738104
);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(
M11=0.9914448613738104,
M12=0.13052619222005157,
M21=-0.13052619222005157,
M22=0.9914448613738104
)";
? , , . , 7,5
. ,
,
.
.
Gradient IE , , ,
. , .
filter: progid:DXImageTransform.Microsoft.gradient(
startColorStr=#FFFFFF, endColorStr=#EFEFEF
);
22.
172 8
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(
)";
, , background-image.
info.
Gradient
;
. , , .
background: none;
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorStr=#BBFFFFFF, endColorStr=#BBFFFFFF
);
startColorStr='#BBFFFFFF', EndColorStr='#BBFFFFFF'
)";

rgba, , .
, , ,
.
IE7,
. ,
, ,
, .

IE ,
.
, ,
.
IE.
18. , 173
css3banner/ie.css
#info{
background: none;
filter:
startColorStr=#BBFFFFFF, endColorStr=#BBFFFFFF
);
startColorStr='#BBFFFFFF', EndColorStr='#BBFFFFFF'
)";
}
#badge{
filter:
progid:DXImageTransform.Microsoft.Matrix(
M11=0.9914448613738104,
M12=0.13052619222005157,
M21=-0.13052619222005157,
M22=0.9914448613738104
),
),
progid:DXImageTransform.Microsoft.Shadow(
color=#333333, Direction=135, Strength=3
);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(
M11=0.9914448613738104,
M12=0.13052619222005157,
M21=-0.13052619224147205157,
M22=0.99144486137384
),
),
progid:DXImageTransform.Microsoft.Shadow(
color=#333333, Direction=135, Strength=3
)";
174 8
, ,
. .8.5 .
info; , , . 154.
. 8.5. AwesomeCo Internet Explorer 8
,
,
IE.
, , . ,
, , CSS3.
19. 175
19.
. , ,
, ,
, .
-.
, ,
.
, .
,
.
, , . -
, .

,
: CSS sIFR1
c Flash.
CSS3 Fonts .
http://www.mikeindustries.com/blog/sifr
176 8
@font-face
, @font-face CSS2
Internet Explorer 5.
Microsoft EOT (Embedded OpenType),
TrueType
OpenType.
OpenType TrueType.

. , ,
,
. ,
( ). @
font
-
face
.
-, ; ,
. ,
, , .
Typekit1 ,
, . , ,
.
Google Google Font API2, Typekit,
.
JavaScript . ,
, JavaScript.
, , , .
AwesomeCo ,
. Garogier
, .
,
1,
. 28, ,
.
http://www.typekit.com/
http://code.google.com/apis/webfonts/
1
2
19. 177
\
?
,
, FontSquirrel1. ,
@
font
-
face
. , .

. ,
, .
:
Embedded OpenType (EOT) [IE58]
TrueType (TTF) [IE9, F3.5, C4, S4]
OpenType (OTF) [IE9, F3.5, C4, S4, O10.5]
Scalable Vector Graphics (SVG) [IOS]
Web Open Font (WOFF) [IE9, F3.6]

Internet
Explorer
9 , EOT (Embedded OpenType).

TrueType OpenType.
Microsoft, Opera Mozilla Web Open Font
Format, .
,
.

FontSquirrel2 True
Type, WOFF, SVG EOT , .
:
.
:
http://www.fontsquirrel.com/fontface/generator
http://www.fontsquirrel.com/fonts/Garogier
.
1
2
178 8
css3fonts/style.css
@font-face {
font-family: 'GarogierRegular';
src: url('fonts/Garogier_unhinted-webfont.eot');
src: url('fonts/Garogier_unhinted-webfont.woff')
format(woff'),
url('fonts/Garogier_unhinted-webfont.ttf')
format(truetype'),
url('fonts/Garogier_unhinted-webfont.
svg#webfontew0qE0O9') format(svg');
font-weight: normal;
}
, . EOT ,
IE ,
. ,
.
.
.
css3fonts/style.css
body{
font-family: "GarogierRegular";
}

, . 8.6.
. 8.6.
19. 179
,
, .

IE
, ,
@fontface.
Garogier,
.
, Garogier,
. .
(font stack) ,
. ,
,
.
, .
, . UnitInterac
tive1.
:
css3fonts/style.css
font-family: "GarogierRegular", Georgia,
"Palatino", "Palatino Linotype",
"Times", "Times New Roman", serif;
. , ,
,
.
,
.
. ,
.
http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
180 8
- CSS. ,
. CSS3
3
D
- ; , JavaScript
CSS3 ( :hover).
,
.
,
/
.
, CSS3 ( )
, .
!
III
III
HTML5
9. 18 3
10. API . . . . . 20 9
11. ? . . . . . . . . . . . . . . . . . . 235
HTML5 CSS3.
,
HTML
5. ,
,
(offline) .
, Web Storage, Web SQL Databases

Web
Sockets

HTML
5. (,
Geolocation
) , Geolocation HTML5,
.
.
,
. .
Web Storage Web SQL Storage ,
.
cookie? . cookie
, , .
cookie, .

JavaScript
, , , ,
, :
184 9
html5_localstorage/setcookie.js
// http://www.javascripter.net/faq/settinga.htm
function SetCookie(cookieName,cookieValue,nDays) {
var today = new Date();
var expire = new Date();
if (nDays==null || nDays==0) nDays=1;
expire.setTime(today.getTime() + 3600000*24*nDays);
document.cookie = cookieName+"="+escape(cookieValue)
+ ;expires="+expire.toGMTString();
}
, . cookie
, cookie.
HTML5 : Web Storage ( localStorage ses
sionStorage )1 Web SQL Databases2. ,
. ,
, Mobile Safari (iOS) Android 2.0.

HTML5, .
localStorage, sessionStorage Web SQL Databases
cookie, ( -, cookie
),
, (,
).
, . -
,
.
, .
HTML5 , ,
http://www.whatwg.org/specs/web-apps/2007-10-26/#storage
http://www.whatwg.org/specs/web-apps/2007-10-26/#sql
1
2
185
iPad Android.
.
1:
localStorage
/ . [C5, F3.5, S4, IE8, O10.5,

IOS, A]
sessionStorage
/ . [C5, F3.5, S4,

IE8, O10.5, IOS, A]
Web SQL Databases

, , , , , . [C5, S3.2,
O10.5, IOS3.2, A2]
Ofine Web Applications
;
. [C4, S4, F3.5,
O10.6, IOS3.2, A2]

Browser.
186 9
20.
localStorage
localStorage . ,
/, .
, localStorage,
, 1.
AwesomeCo
, ,
.
localStorage,
. ,
. 9.1.
. 9.1.
localStorage

HTML
5 , 3. , ,
.
. ,
localhost, !
20. localStorage 187
html5_localstorage/index.html
<p><strong>Preferences</strong></p>
<form id="preferences" action="save_prefs"
method="post" accept-charset="utf-8">
<fieldset id="colors" class="">
<legend>Colors</legend>
<ol>
<li>
<label for="background_color">Background color</label>
<input type="color" name="background_color"
value="" id="background_color">
</li>
<li>
<label for="text_color">Text color</label>
<input type="color" name="text_color"
value="" id="text_color">
</li>
<li>
<label for="text_size">Text size</label>
<select name="text_size" id="text_size">
<option value="16">16px</option>
</select>
</ol>
</fieldset>
<input type="submit" value="Save changes">
</form>
HTML.

localStorage
window.localStorage() JavaScript. /
.
localStorage.setItem("background_color",
$("#background_color").val());
188 9
.
var bgcolor = localStorage.getItem("background_color");

.
function save_settings(){
localStorage.setItem("background_color",
$("#background_color").val());
localStorage.setItem("text_color", $("#text_color").val());
localStorage.setItem("text_size", $("#text_size").val());
apply_preferences_to_page();
}
localStorage .
function load_settings(){
var bgcolor = localStorage.getItem("background_color");
var text_color = localStorage.getItem("text_color");
var text_size = localStorage.getItem("text_size");
$("#background_color").val(bgcolor);
$("#text_color").val(text_color);
$("#text_size").val(text_size);
}
apply_preferences_to_page();
apply_preferences_to_
page(), .

, localStorage, .
CSS,
jQuery.
function apply_preferences_to_page(){
$("body").css("backgroundColor", $("#background_color").
val());
$("body").css("color", $("#text_color").val());
$("body").css("fontSize", $("#text_size").val() + "px");
}
.
$(function(){
load_settings();
$('form#preferences').submit(function(event){
save_settings();
});
});

localStorage Internet Explorer, Firefox, Chrome Safari,
. :
cookie.

,

. , , , , .
.
,
Java
Script.
JavaScript
, ,
190 9
,
, localStorage. ,
, 4 ( ,
cookie).
Cookie JavaScript
cookie/
JavaScript. cookie
Quirksmode1,
localStorage.
localStorage . localStorage
indow.
w
if (!window.localStorage){
}
cookie,
Quirksmode. Java
Script :
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var result = ""
var nameEQ = name + "=";
var ca = document.cookie.split(';');
http://www.quirksmode.org/js/cookies.html
for(var i=0;i < ca.length;i++) {

var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0){
result = c.substring(nameEQ.length,c.length);
}else{
result = "";
}
}
return(result);
, localStorage , cookie
.
1 localStorage = (function () {
return {
setItem: function (key, value) {
createCookie(key, value, 3000)
5
},
getItem: function (key) {
return(readCookie(key));
}
10
};
- })();
SESSIONSTORAGE
localStorage ,
.
. sessionStorage.
localStorage
,
sessionStorage .

localStorage
ses
sionStorage:
sessionStorage.setItem('name', 'Brian
Hogan');
var name = sessionStorage.getItem('name');
sessionStorage cookie
.
192 9
4: cookie
3000. cookie
, .
localStorage
. , .
,
localStorage().
21. 193
21.

localStorage sessionStorage
/ ,
.

HTML
5. , Web SQL Storage1. ,
, SQL,
. ,
, Web SQL Storage ,
, ,
.

, , .

AwesomeCo
. ,
.
.

SQL.
INSERT INTO notes (title, note)

VALUES("Test", "This is a note");
SELECT id, title, note FROM notes;
SELECT id, title, note FROM notes where

id = 1;
UPDATE notes set title = "bar",

note = "Changed" where id = 1;
DELETE FROM notes where id = 1;
http://dev.w3.org/html5/webdatabase/
194 9
/
Web SQL Database ?
2010 ,
, , ,
IndexedDB. Web SQL
Database
, Webkit, iOS Android, Safari Google
Chrome. IndexedDB,
, Web SQL Databases
. ,
.

. ,
, . 9.2.
.
html5sql/index.html
<!doctype html>
<html>
<head>
<title>AwesomeNotes</title>
<link rel="stylesheet" href="style.css">
charset="utf-8"
src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/
jquery.min.js">
</script>
charset="utf-8" src="javascripts/notes.js">
</script>
</head>
<body>
21. 195
<section id="sidebar">
<input type="button" id="new_button" value="New note">
<ul id="notes">
</ul>
</section>
<section id="main">
<form>
<ol>
<li>
<input type="submit" id="save_button" value="Save">
<input type="submit" id="delete_button"
value="Delete">
</li>
<li>
<label for="title">Title</label>
<input type="text" id="title">
</li>
<li>
<label for="note">Note</label>
<textarea id="note"></textarea>
</li>
</ol>
</form>
</section>
</body>
</html>
. 9.2.
196 9

section. (, Save) ;
.
. 9.2, . style.css .
html5sql/style.css
#sidebar, #main{
display: block;
float: left;
}
#sidebar{
width: 25%;
}
#main{
width: 75%;
}
form ol{
list-style: none;
margin: 0;
padding: 0;
}
form li{
padding: 0;
margin: 0;
}
form li label{
display:block;
}
#title, #note{
width: 100%;
font-size: 20px;
border: 1px solid #000;
}
#title{
height: 20px;
}
21. 197
#note{
height: 40px;
}
, . ,
JavaScript

.
html5sql/javascripts/notes.js
//
var db = null;
//
connectToDB = function()
{
db = window.openDatabase('awesome_notes', '1.0',
'AwesomeNotes Database',
1024*1024*3);
};
db.
1.
,
window.openDatabase. ,
, .
id
. , ,

title
Note
.
JavaScript .
198 9
.
createNotesTable = function()
{
db.transaction(function(tx){
tx.executeSql(
"CREATE TABLE notes (id INTEGER \
PRIMARY KEY, title TEXT, note TEXT)", [],
function(){ alert('Notes database created successfully!');
},
function(tx, error){ alert(error.message); } );
});
};
SQL
: . .
: executeSql()
.
SQL . , (prepared
statements) . ,
.
, ;
.

,
( ),
.
// notes
fetchNotes = function(){
db.transaction(function(tx) {
tx.executeSql('SELECT id, title, note FROM notes', [],
function(SQLTransaction, data){
for (var i = 0; i < data.rows.length; ++i) {
var row = data.rows.item(i);
var id = row['id'];
21. 199
var title = row['title'];
});
}
});
addToNotesList(id, title);
};
.
, addNoteToList, :
//

addToNotesList = function(id, title){
var notes = $("#notes");
var item = $("<li>");
item.attr("data-id", id);
item.html(title);
notes.append(item);
};

. ,
.
notes.
.

click ,
.
(, ) click.
jQuery :
$("#notes").click(function(event){
if ($(event.target).is('li')) {
200 9
var element = $(event.target);

loadNote(element.attr("data-id"));
});
loadNote, .
loadNote = function(id){
db.transaction(function(tx) {
tx.executeSql('SELECT id, title,
note FROM notes where id = ?', [id],
function(SQLTransaction, data){
var row = data.rows.item(0);
var title = $("#title");
var note = $("#note");
title.val(row["title"]);
title.attr("data-id", row["id"]);
note.val(row["note"]);
$("#delete_button").show();
});
});

fetchNotes(). SQL,
. ( ),
-.
.
Delete
. Save . ,
. , ,
. .
,
Save,
.
21. 201
Save click ,
jQuery:
$("#save_button").click(function(event){
if(title.attr("data-id")){
updateNote(title, note);
}else{
insertNote(title, note);
}
});
data-id title . , , ,
insertNote.
insertNote = function(title, note)
{
tx.executeSql("INSERT INTO notes (title, note) VALUES (?,
?)",
[title.val(), note.val()],
function(tx, result){
var id = result.insertId ;
alert('Record ' + id+ ' saved!');
title.attr("data-id", result.insertId );
addToNotesList(id, title.val());
$("#delete_button").show();
},
function(){
alert('The note could not be saved.');
}
);
});
};
insertNote() insertId
202 9
.
title ,
addToNotesList() .
.
updateNote() , .
updateNote = function(title, note)
{
var id = title.attr("data-id");
tx.executeSql("UPDATE notes set title = ?,
note = ? where id = ?",
[title.val(), note.val(), id],
alert('Record ' + id + ' updated!');
$("#notes>li[data-id=" + id + "]").html(title.val());
},
function(){
alert('The note was not updated!');
}
);
});
};
,
; data-id .
.
delete.
$("#delete_button").click(function(event){
deleteNote(title);
});
delete , .
21. 203
deleteNote = function(title)
{
var id = title.attr("data-id");
tx.executeSql("DELETE from notes where id = ?", [id],
alert('Record ' + id + ' deleted!');
$("#notes>li[data-id=" + id + "]").remove();
},
function(){
alert('The note was not deleted!');
}
);
});
};
,
.

. New,
, .
jQuery
New.
$("#new_button").click(function(event){
newNote();
});
//end:newbutton
newNote();
});
title data-id,
.
Delete.
204 9
newNote = function(){
$(#delete_button").hide();
title.removeAttr("data-id");
title.val("");
note.val("");
}
newForm
jQuery
, .
Delete .
! iPhone, Android
Chrome, Safari Opera. ,
, Firefox, Internet Explorer
.

, , SQL ,
,
Internet Explorer . , ,
,
Google Chrome, ,
. ,

, .
Google Chrome Frame1.
HTML, head.
html5sql/index.html
<meta http-equiv="X-UA-Compatible" content="chrome=1">

Google
Chrome
Frame
.

, , body:
http://code.google.com/chrome/chromeframe/
21. 205
html5sql/index.html
src=
"http://ajax.googleapis.com/ajax/libs/chrome-frame/1/
CFInstall.min.js">
</script>
<script>
window.attachEvent("onload", function() {
CFInstall.check({
mode: "inline", //
node: "prompt"
});
});
</script>

, .
Google Chrome Frame
-, , (
).
IT-, ;
, .
, SQL.
206 9
22.
HTML51
HTML
, .
, .
Firefox, Chrome Safari
,
iOS
Android
2.0. , Internet
Explorer.
AwesomeCo iPad
. , , , .
HTML5 .

-,
. , ,
.
; .
notes.manifest. .
html5offline/notes.manifest
CACHE MANIFEST
# v = 1.0.0
/style.css
/javascripts/notes.js
/javascripts/jquery.min.js
.
, .
,
jQuery Google . ,
http://www.w3.org/TR/html5/ofine.html
22. 207
jQuery script, jQuery

javascripts.
html5offline/index.html
charset="utf-8"
src="javascripts/jquery.min.js">
</script>
HTML.
html :
html5offline/index.html
<html manifest="notes.manifest">
! ,
-, MIME text/cache-manifest. Apache,
MIME .htaccess.
html5offline/.htaccess
AddType text/cache-manifest .manifest
notes , , .
,
.
. ,
. , ,

; .

, - .
- , ,
.
.
208 9
Apache,
.htaccess:
html5offline/.htaccess
ExpiresActive On
ExpiresDefault "access"
,
. ,
.
, , .
, localStorage Web SQL Databases,

, -. iPad
Android, HTML5

,
. ,
;
. , .
Web SQL Storage . Mozilla
Firefox, W3C

IndexedDB
. 11.5, . 244.
Web SQL Storage iOS Android
, , . ,
.

API
10
API,
HTML5, .
HTML
5, ( ) .
API. HTML5 History API
,
Cross-Document Messaging API.
Web Sockets Geolocation

API
, .
API1:
History
. [C5, S4, IE8, F3, O10.1 IOS3.2,
A2]
Cross-Document Messaging
,
. [C5, S5, F4, IOS4.1, A2]

Browser.
210 10 API
Web Sockets

. [C5, S5, F4, IOS4.2]
Geolocation
. [C5, S5, F3.5, O10.6,
IOS3.2, A2]
23. 211
23.
HTML5 API
1. 12, c
(. 107)
AwesomeCo
.
: Back .
, History API
.
API :
html5history/javascripts/application.js
function supportsHistory(){
return !!(window.history && window.history.pushState);
}
, History.

, -,
. ,
.
1
$("nav ul").click(function(event){
target = $(event.target);
if(target.is("a")){
5
if ( $(target.attr("href")).hasClass("hidden") ){
if(supportsHistory()){
var tab = $(target).attr("href");
var stateObject = {tab: tab};
10
window.history.pushState(stateObject, tab);
};
http://www.w3.org/TR/html5/history.html
212 10 API
15
};
};
});
- });
$(".visible").removeClass("visible").
addClass("hidden").hide();
$(target.attr("href")).removeClass("hidden").
addClass("visible").show();
.
pushstate() ,
.
,
. , Services,
#services.
, .
title . .

.
Back, window.onpopstate().
,
.
window.onpopstate = function(event) {
if(event.state){
var tab = (event.state["tab"]);
$(".visible")
.removeClass("visible")
.addClass("hidden")
.hide();
$(tab)
23. 213
}
};
.show();
};
, jQuery
.
. .

, .
window.onpopstate():
window.history.pushState( {tab: "#welcome"}, '#welcome');
window.onpopstate = function(event) {
if(event.state){
var tab = (event.state["tab"]);
$(".visible")
.removeClass("visible")
.addClass("hidden")
.hide();
$(tab)
.show();
}
};
};
, 1.
. .
214 10 API

Firefox 4 Safari 4, Chrome 5,
Internet Explorer . ,
jQuery Address1, ,
, ,
. ,
, API
http://www.asual.com/jquery/address/
24. 215
24.

- .
1. ,
URL. .
HTML5 API Cross
-
Document
Messaging
, , . , http://support.
awesomecompany.com iframe,
http://www.awesomecompany.
com. .
AwesomeCo
. ,
.
(CMS) ,
iframe. , ,
.
,
-. , ,
-.
-.

. .
html5xdomain/contactlist/public/index.html
<ul id="contacts">
<li>
<h2>Sales</h2>
(Same Origin Policy)
https://developer.mozilla.org/en/Same_origin_policy_for_JavaScript.
216 10 API
<p class="name">James Norris</p>

<p class="email">j.norris@awesomeco.com</p>
</li>
<li>
<h2>Operations</h2>
<p class="name">Tony Raymond</p>
<p class="email">t.raymond@awesomeco.com</p>
</li>
<li>
<h2>Accounts Payable</h2>
<p class="name">Clark Greenwood</p>
<p class="email">c.greenwood@awesomeco.com</p>
</li>
<li>
<h2>Accounts Receivable</h2>
<p class="name">Herbert Whitmore</p>
<p class="email">h.whitmore@awesomeco.com</p>
</li>
</ul>
-
Apache
, Ruby,
. Ruby
RUBY_README.txt .
, html5xdomain/contactlist
server.rb :
ruby server.rb
4567. server.rb
html5xdomain/supportpage; 3000.
, server.rb.
jQuery, application.js
. head.
html5xdomain/contactlist/public/index.html
charset="utf-8"
min.js">
</script>
24. 217
src="javascripts/application.js">
</script>
<link rel="stylesheet" href="style.css" type="text/css"
media="screen">
.
html5xdomain/contactlist/public/style.css
ul{
list-style: none;
}
ul h2, ul p{margin: 0;}
ul li{margin-bottom: 20px;}
,
.

,

. postMessage() :
. .
html5xdomain/contactlist/public/javascripts/application.js
$(function(){
$("#contacts li").click(function(event){
var email = ($(this).find(".email").html());
var origin = "http://192.168.1.244:3000/index.html";
window.parent.postMessage(email, origin);
});
});
, URL- 1.
URL, .
218 10 API
,
.

,
(
, -).
, jQuery
application.js.
iframe
.
html5xdomain/supportpage/public/index.html
<div id="form">
<form id="supportform">
<fieldset>
<ol>
<li>
<label for="to">To</label>
<input type="email" name="to" id="to">
</li>
<li>
<label for="from">From</label>
<input type="text" name="from" id="from">
</li>
<li>
<label for="message">Message</label>
<textarea name="message" id="message"></textarea>
</li>
</ol>
<input type="submit" value="Send!">
</fieldset>
</form>
</div>
<div id="contacts">
<iframe src="http://192.168.1.244:4567/index.html"></iframe>
</div>
CSS,
style.css:
24. 219
html5xdomain/supportpage/public/style.css
#form{
width: 400px;
float: left;
}
#contacts{
width: 200px;
float: left;
}
#contacts iframe{
border: none;
height: 400px;
}
fieldset{
width: 400px;
border: none;
}
fieldset legend{
padding: 0 64px 0 2px;
}
fieldset>ol{
list-style: none;
padding: 0;
margin: 2px;
}
fieldset>ol>li{
margin: 0 0 9px 0;
padding: 0;
}
/* */
fieldset input, fieldset textarea{
display:block;
width: 380px;
}
fieldset input[type=submit]{
width: 390px;
}
220 10 API
fieldset textarea{
height: 100px;
}
iframe , -
, . 10.1.
. 10.1.

onmessage
. event. jQuery bind(),
.
html5xdomain/supportpage/public/javascripts/application.js
$(function(){
$(window).bind("message",function(event){
$("#to").val(event.originalEvent.data);
});
});
jQuery bind()
.
originalEvent .
Firefox, Chrome, Safari Internet
Explorer8. IE6 7.
24. 221

IE6 7 jQuery Postback,
. jQuery
getScript() ,
(
postMessage()).
.
if(window.postMessage){
window.parent.postMessage(email, origin);
}else{
$.getScript("javascripts/jquery.postmessage.js", function(){
$.postMessage(email, origin, window.parent);
});
}
jQuery Postmessage postMessage(),

postMessage().
.

receiveMessage().
if(window.postMessage){
$("#to").val(event.originalEvent.data);
});
}else{
$.getScript("javascripts/jquery.postmessage.js", function(){
$.receiveMessage(
function(event){
$("#to").val(event.data);
});
});
}
! . ,
;
. , ; ,
!
222 10 API
25. Web Sockets

-
,

JavaScript
. HTTP ,
, . , , . HTML5
Web
Sockets
, 1.
. ,
Web Sockets,
AwesomeCo.
AwesomeCo
-,
( ). -
Web Sockets.
,
. , /nick brian
- IRC. , -
,
2.

, . 10.2, ,
, , .
HTML5
, div .
Web Sockets ,
http://www.w3.org/TR/websockets/.
2
(.226).
1
25. Web Sockets 223
. 10.2.
html5_websockets/public/index.html
<div id="chat_wrapper">
<h2>AwesomeCo Help!</h2>
<form id="nick_form" action="#" method="post" acceptcharset="utf-8">
<p>
<label>Nickname
<input id="nickname" type="text" value="GuestUser"/>
</label>
<input type="submit" value="Change">
</p>
</form>
<div id="chat">connecting....</div>
<form id="chat_form" action="#" method="post" acceptcharset="utf-8">
<p>
<label>Message
<input id="message" type="text" />
</label>
<input type="submit" value="Send">
</p>
</form>
</div>
Java
Script, Web Sockets.
224 10 API
<script src='chat.js' type='text/javascript'></script>
<link rel="stylesheet" href="style.css" media="screen">
:
html5_websockets/public/style.css
1 #chat_wrapper{
width: 320px;
height: 440px;
5
padding: 10px;
- }
- #chat_wrapper h2{
margin: 0;
- }
10
- #chat{
width: 300px;
height: 300px;
overflow: auto;
15
padding: 10px;
- }
14 overflow , ,
( ).

JavaScript,
-.

Web Socket ,
. ,
.
chat.js Web
Sockets.
html5_websockets/public/chat.js
var webSocket = new WebSocket('ws://localhost:9394/');
25. Web Sockets 225
onopen()
onmessage()
onclose()
,
. onopen() :
webSocket.onopen = function(event){
$('#chat').append('<br>Connected to the server');
};
, . , -.
onmessage():
webSocket.onmessage = function(event){
$('#chat').append("<br>" + event.data);
$('#chat').animate({scrollTop: $('#chat').height()});
};
data event;
.
,
,
.
.
onclose() .
webSocket.onclose = function(event){
$("#chat").append('<br>Connection closed');
};
,
.
226 10 API
$(function(){
$("form#chat_form").submit(function(e){
e.preventDefault();
var textfield = $("#message");
webSocket.send(textfield.val());
textfield.val("");
});
})
submit,
- send().
, /
nick
. - .
$("form#nick_form").submit(function(e){
e.preventDefault();
var textfield = $("#nickname");
webSocket.send("/nick " + textfield.val());
});
! Safari 5 Chrome 5 , . ,
, Web Sockets.
Flash.

, Adobe
Flash
. Flash
,
web-socket-js1 Flash
.
2 . JavaScript.
http://github.com/gimite/web-socket-js/
http://github.com/gimite/web-socket-js/archives/master
1
2
25. Web Sockets 227
<script type="text/javascript" src="websocket_js/swfobject.
js"></script>
<script type="text/javascript" src="websocket_js/FABridge.
js"></script>
<script type="text/javascript" src="websocket_js/web_socket.
js"></script>
<script src='chat.js' type='text/javascript'></script>
<link rel="stylesheet" href="style.css" media="screen">
</head>
<body>
<div id="chat_wrapper">
<h2>AwesomeCo Help!</h2>
<form id="nick_form" action="#" method="post" acceptcharset="utf-8">
<p>
<label>Nickname
<input id="nickname" type="text" value="GuestUser"/>
</label>
<input type="submit" value="Change">
</p>
</form>
<div id="chat">connecting....</div>
<form id="chat_form" action="#" method="post" acceptcharset="utf-8">
<p>
<label>Message
<input id="message" type="text" />
</label>
<input type="submit" value="Send">
</p>
</form>
</div>
</body>
</html>
chat.js :
, WebSocketMain.
228 10 API
WEB_SOCKET_SWF_LOCATION = "websocket_js/WebSocketMain.swf";
, -
, ,
-, Flash.
Flash

Flash
Player
, Flash Player.
Flash Player
843, , . , :
<cross-domain-policy>
<allow-access-from domain="*" to-ports="*" />
</cross-domain-policy>
.
. ,
, Web
Sock
ets, 843.

Flash, Ruby,
.
(. ).
, - . Web Sockets

.
Web Sockets,
. Ruby,
Ruby. Ruby
RUBY_README.txt
.
, , ,
:
ruby server.rb
25. Web Sockets 229
-
. , client.rb,
JavaScript. , flashpolicyserver, Flash
, -. Flash Player
.
Mac Linux

rake start
html5_websockets.
230 10 API
26. :
Geolocation
, . , , ,
.
IP-, MAC-,
WiFi

GPS
, . Geolocation
HTML5, HTML5,
.
Web Storage Geolocation
HTML. , Web Storage,
Firefox, Safari Chrome.
.

AwesomeCo.
,

AwesomeCo
. , .
Google Static Map
API, API,
.
- AwesomeCo , ;
, ; , -. Static Map
API .
img URL.
html5geo/index.html
<img id="map" alt="Map of AwesomeCo Service Center locations"
src="http://maps.google.com/maps/api/staticmap?
&size=900x300
&sensor=false
&maptype=roadmap
&markers=color:green|label:A|1+Davol+square,+Providence,
+RI+02906-3810
26. : Geolocation 231
&markers=color:green|label:B|22+Southwest+3rd+Avenue,
Portland,+OR
&markers=color:green|label:C|77+West+Wacker+Drive+Chicago
+IL">
, Maps
API,
(, GPS-
). .
, , .

.
.
.
html5geo/index.html
navigator.geolocation.getCurrentPosition(function(position) {
showLocation(position.coords.latitude,
position.coords.longitude);
});

. ,
showLocation().
, . .
html5geo/index.html
1 var showLocation = function(lat, lng){
2 var fragment = "&markers=color:red|color:red|label:Y|" + lat
+ "," + lng;
3 var image = $("#map");
4 var source = image.attr("src") + fragment;
5 source = source.replace("sensor=false", "sensor=true");
6 image.attr("src", source);
7 };
232 10 API
,
.
, sensor false true ( replace() 5).
Y.
. 10.3.
. 10.3. Y

AwesomeCo,
JavaScript.
, Geo
location.
html5geo/index.html
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position)
{
showLocation(position.coords.latitude,
position.coords.longitude);
});
}else{
};
Google Ajax API1

.
, API,
2.
.
html5geo/index.html
1 var key = "your_key";
- var script = "http://www.google.com/jsapi?key=" + key;
- $.getScript(script, function(){
if ((typeof google == 'object') &&
5
google.loader && google.loader.ClientLocation) {
showLocation(google.loader.ClientLocation.latitude,
google.loader.ClientLocation.longitude);
}else{
var message = $("<p>Couldn't find your address.</p>");
10
message.insertAfter(#map");
};
- });
jQuery getScript() Google Ajax

API. ClientLocation() 5 , showLocation() .
, Google IP-
, ,
; ( 9).
, .

, ,
.
, ,
HTML
5, -. http://code.google.com/apis/ajax/documentation/#ClientLocation
http://localhost/.
http://code.google.com/apis/ajaxsearch/signup.html
1
2
234 10 API

. Ajax-
. Web Sockets
. Cross-Document Messaging
-, ,
Geolocation
-, , ,
.
. ,
-.
11
,
.
, ,
3D- canvas WebGL
API , CSS3
.
,
, ( ,
)1:
CSS3
. [C3, S3.2, F4, O10.5,
IOS3.2, A2]
Web Workers
JavaScript. [C3, S4, F3.5, O10.6]
3D- WebGL
3D- . [C5, F4]
IndexedDB
/
NoSQL. [F4]
Browser.
236 11 ?
API . [C3, S4, F3.5, IE6, A2]

. [C5, S5, 10.6]
CSS3 WebKit.
11.1. CSS3
. CSS
:hover . CSS
, .
css3transitions/style.css
a.button{
padding: 10px;
text-decoration: none;
}
a.button:hover{
color: #fff
}
,
, . CSS31
, ,

JavaScript
. , ;
:
css3transitions/style.css
1 a.button{
padding: 10px;
text-decoration: none;
5
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 1s;
http://dev.w3.org/csswg/css3-transitions/
? 237
-webkit-transition-timing-function: ease-out;
- }
10
- a.button:hover{
color: #fff
- }
5 , .
, . 6, ` 7.

transition-timing-function
. ,
. X Y
0 1. (0.0,0.0) (1.0,1.0),
.
,
, 45.
( (0.0, 0.0), (0.0,0.0), (1.0,
1.0), (1.0, 1.0) ), .

( (0.0, 0.0), (0.42,0.0), (1.0, 1.0), (1.0, 1.0) ).
238 11 ?
, .
,
.
((0.0, 0.0), (0.42,0.0), (0.58, 1.0), (1.0, 1.0)).

CSS, ,
. default, ease-in, ease-out, ease-in-out, ease-out-in cubic-bezier
( ).
,
. ease-in
, .
, 1 .
, , , .
,
.
CSS32 CSS
.
11.2. Web Workers

Web Workers3
HTML
5, , ,
, .
http://www.netzgesta.de/dev/cubic-bezier-timing-function.html
http://www.w3.org/TR/css3-animations/
3
http://www.whatwg.org/specs/web-workers/current-work/
1
2
? 239
JavaScript,
. ,
.

Web
Workers
.
, worker.js, ,
:
webworkers/application.js
var worker = new Worker("worker.js");

JavaScript
, , DOM. ,
.

(worker script) postMessage().
$("#button").click(function(event){
$("#output").html("starting...");
worker.postMessage("start");
});

, postmessage().
webworkers/worker.js
onmessage = function(event) {
if(event.data === "start"){
// . - .
for (var x = 1; x <= 100000; x++){
postMessage(x);
}
}
};
onmessage
. ,
, :
240 11 ?
worker.onmessage = function(event){
$("#output").html(event.data);
}
API

API
, . 213. Internet Explorer
Web Workers ,
Google Chrome Frame. ,
,
.
11.3.
JavaScript, W3C

Microsoft
HTML51. Firefox, Safari, Internet Explorer
Chrome, .
: ,
; ,
. ,
. :

.
html5drag/index.html
<div id="images">
<img src="images/red_thumb.jpg"
data-large="images/red.jpg" alt="A red flower">
<img src="images/purple_thumb.jpg"
data-large="images/purple.jpg"
alt="A white and purple flower">
<img src="images/white_thumb.jpg"
data-large="images/white.jpg" alt="A white flower">
</div>
http://dev.w3.org/html5/spec/dnd.html#dnd
? 241
<div id="preview">
<p>Drop images here</p>
</div>
. 11.1.
.
html5drag/style.css
#images img{
-webkit-user-drag
}
#images{
float: left;
width: 240px;
margin-right: 10px;
}
#preview{
float: left;
width: 500px;
height: 335px;
}
242 11 ?
.hover{
background-color: #bbb !important;
}
,
.11.1. .
ondragstart
ondragend
ondragenter
ondragover
ondreagleave
ondrop
ondrag
; ,
X Y
, , . , .

:
html5drag/application.js
var contacts = $('#images img');
contacts.attr('draggable', 'true');
HTML5 draggable.
, JavaScript,
.
.
? 243
ondragstart, -,
jQuery bind()1.
1 contacts.bind('dragstart', function(event) {
2
var data = event.originalEvent.dataTransfer;
3
var src = $(this).attr("data-large");
4
data.setData("Text", src);
5
return true;
6 });
dataStorage
, . jQuery
bind() , originalevent
( 2). URL- setData()
( 4), Text.
, . .

To
. drop.
1 var target = $('#preview');
target.bind('drop', function(event) {
var data = event.originalEvent.dataTransfer;
5
var src = ( data.getData(Text') );
var img = $("<img></img>").attr("src", src);

$(this).html(img);
if (event.preventDefault) event.preventDefault();
10
return(false);
- });
, ,
getData() 5. ,
.
, on .
244 11 ?
ondrop ,
. preventdefault()
false . Internet Explorer false ,
preventDefault().
Chrome Safari
.
ondragover; ondrag . .
target.bind('dragover', function(event) {
return false;
});
,
ondrop. ondragend.
contacts.bind('dragend', function(event) {
return false;
});
,
,
ondrop.

,
, ondragenter ondragleave.
target.bind('dragenter', function(event) {
$(this).addClass('hover');
return false;
});
target.bind('dragleave', function(event) {
$(this).removeClass('hover');
return false;
});
hover .

.
.

. , Google
Gmail Firefox3.6 Chrome5.
1 .
, , . IE8 ,
setData() Text Url .
, , Safari 4,
CSS.
#contents li{
-webkit-user-drag
}
,
;
.
. , .
http://decafbad.com/blog/2009/07/15/html5-drag-and-drop
246 11 ?

JavaScript
, jQuery UI1.
:
. , , . ,
,
JavaScript .
, . , ,
,
.
11.4. WebGL
canvas
2
D
-, , 3D-. WebGL2
HTML5, Apple, Google, Opera
Mozilla;
.
, 3D- . Learning
WebGL3.
11.5. Indexed Database API

: Web Storage Web SQL Storage. Mozilla
Web
SQL
; , SQL.
http://docs.jquery.com/UI/Draggable
https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.
html
3
http://learningwebgl.com/blog/?p=11
1
2
? 247
Indexed Database API, , ,

1.
Indexed Database API
/ ( Web Storage,
localStorage sessionStorage), . ,
,
- , ,
.,
Firefox4 Chrome7.
,

Web
SQL
, Mozilla
, Web SQL Firefox,

SQL,
.
Web
SQL

SQLite
, . ,
Internet Explorer, Microsoft
2.
11.6.
HTML
5 , , , , .
JavaScript, HTML5
.
, , required:
html5validation/index.html
<input type="text" name="name" autofocus required id="name">
http://www.w3.org/TR/IndexedDB/
http://hacks.mozilla.org/2010/06/beyond-html5-database-apis-and-the-road-toindexeddb/
1
2
248 11 ?
,
;
JavaScript. Opera,
. 11.2.
. 11.2. Opera
, , . ,
, .
, ,
CSS ,
.
pattern
.
html5validation/index.html
<input type="text"
name="acctnumber" id="acctnumber"
required
pattern="^[1-9]+[0-9]*$" >

,
JavaScript.
11.7. !
.
-. -
? 249

. ,
,
.
! !
IV
IV

. . . . . . .
. jQuery . . . . . . .
.
. . . . . . . . . . . . . . . .
. . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
25 3
261
26 8
270
27 2

. C: Google Chrome, F: Firefox, IE: Internet Explorer, O: Opera, S:
Safari, IOS: iOS Mobile Safari, A: Android Browser.
.1.
. 1,
, . 28.
<header>
. [C5, F3.6, IE8, S4,

O10]
<footer>
. [C5, F3.6, IE8,

S4, O10]
<nav>
. [C5, F3.6,
IE8, S4, O10]
<section>
. [C5, F3.6, IE8, S4, O10]

<article>
254
( ).
[C5, F3.6, IE8, S4, O10]
<aside>
. [C5, F3.6, IE8,

S4, O10]
<meter>
, . [C5,
F3.5, S4, O10]
<progress>

. [ .]
.2.

data-. [
JavaScript getAttribute()]
. 2,
, . 42.
<p contenteditable>lorem ipsum</p>
. [C4,
S3.2, IE6, O10.1]
. 6, , . 67.
.3.
. 3, , . 50.
<input type="email">
. [O10.1, IOS]
<input type="url">
URL-. [O10.1, IOS]

<input type="tel">
. [O10.1, IOS]
<input type="search">
255
. [C5, S4, O10.1, IOS]

<input type="range">
. [C5, S4, O10.1]

<input type="number">
, -.
[C5, S5, O10.1, IOS]
<input type="date">
. date, month week.

[C5, S5, O10.1]
<input type="datetime">
. datetime,
datetime-local time. [C5, S5, O10.1]

<input type="color">
. [C5, S5] (Chrome 5 Safari 5

Color, ).
.4.
<input type="text" autofocus>
. [C5,
S4]
. 4,
, . 58.
<input type="email" placeholder="me@example.com">
. [C5,
S4, F4]
. 5, , . 60.
required [<input type="email" required > ]
, . [C5, S5,
O10.6]
. 11.6, ,
.245.
pattern [<input type="text" pattern="^[1-9]+[0-9]*$"> ]
. [C5, S5, O10.6]
256
. 11.6, ,
.245.
.5.
role [<div role="document">]
. [C3,
F3.6, S4, IE8, O9.6]
. 11, ARIA , .102.
aria-live [<div aria-live="polite">]
(, Ajax) . [F3.6 (Windows), S4, IE8]
. 12,
, . 107.
aria-atomic [<div aria-live="polite" aria-atomic="true">]
. [F3.6 (Windows), S4, IE8]
. 12,
, . 107.
.6.
<canvas> [<canvas id="my_canvas" width="150" height="150">]
JavaScript. [C4, F3, IE9, S3.2,

O10.1, IOS3.2, A2]
. 13, , . 117.
<audio> [<audio src="drums.mp3"></audio>]
. [C4,
F3.6, IE9, S3.2, O10.1, IOS3, A2]
. 15, , . 140.
<video> [<video src="tutorial.m4v"></video>]
. [C4,
F3.6, IE9, S3.2, O10.5, IOS3, A2]
. 16, , . 144.
257
.7. CSS3
. 11.1, CSS3, . 234.
:nth-of-type [p:nth-of-type(2n+1){color: red;}]
n . [C2, F3.5, S3, IE9,

O9.5, IOS3,A2]
. 7,
, . 77.
:rst-child [p:rst-child{color:blue;}]
. [C2, F3.5, S3, IE9, O9.5, IOS3,

A2]
. 7,
, . 77.
:nth-child [p:nth-child(2n+1){color: red;}]
. [C2,
F3.5, S3, IE9, O9.5, IOS3, A2]
. 7,
, . 77.
:last-child [p:last-child{color:blue;}]
. [C2, F3.5, S3, IE9, O9.5,

IOS3, A2]
. 7,
, . 77.
:nth-last-child [p:nth-last-child(2){color: red;}]
. [C2,
F3.5, S3, IE9, O9.5, IOS3, A2]
. 7,
, . 77.
:rst-of-type [p:rst-of-type{color:blue;}]
. [C2, F3.5, S3, IE9, O9.5,

IOS3, A2]
. 7,
, . 77.
:last-of-type [p:last-of-type{color:blue;}]
. [C2, F3.5, S3, IE9, O9.5,

IOS3, A2]
258
:
[#content{ column-count: 2; column-gap: 20px; column-rule: 1px
solid #ddccb5; }]
. [C2, F3.5, S3,

O9.5, IOS3, A2]
. 9, , . 91.
:after [span.weight:after { content: "lbs"; color: #bbb; }]
content
. [C2, F3.5, S3, IE8, O9.5, IOS3, A2]
. 8, (:after), . 87.
- [media="only all and (max-width: 480)"]
. [C3,
F3.5, S4, IE9, O10.1, IOS3, A2]
. 10, , . 97.
border-radius [border-radius: 10px;]
. [C4, F3, IE9, S3.2, O10.5]
. 17, , . 154.
RGBa [background-color: rgba(255,0,0,0.5);]
RGB
(-). [C4, F3.5, IE9, S3.2, O10.1]
. 18, , , . 162.
box-shadow [box-shadow: 10px 10px 5px #333;]
, . [C3, F3.5, IE9, S3.2,
O10.5]
. 18, , , . 162.
[transform: rotate(7.5deg);]
. [C3, F3.5, IE9, S3.2, O10.5]
. 18, , , . 162.
[linear-gradient(top, #fff, #efefef);]

. [C4, F3.5, S4]
. 18, , , . 162.
@font-face [@font-face { font-family: AwesomeFont; ] src:
url(http://example.com/awesomeco.ttf); font-weight: bold; }]
259
CSS. [C4,
F3.5, IE5+, S3.2, O10.1]
. 19, , . 173.
.8.
localStorage
/ . [C5, F3.5, S4, IE8, O10.5,

IOS, A]
. 20, localStor
age, .184.
sessionStorage
/ . [C5, F3.5, S4,

IE8, O10.5, IOS, A]
. 20, localStor
age, .184.
Web SQL Databases

, , , , , . [C5, S3.2,
O10.5, IOS3.2, A2]
. 21,
, . 191.
.9. API
Ofine Web Applications
;
. [C4, S4, F3.5,
O10.6, IOS3.2, A2]
. 22, , . 204.
History
. [C5, S4, IE8, F3, O10.1 IOS3.2,
A2]
260
. 23, , . 209.
Cross-Document Messaging
,
. [C5, S5, F4, IOS4.1, A2]
. 24, , . 213.
Web Sockets

. [C5, S5, F4, IOS4.2]
. 25, Web Sockets, . 220
Geolocation
. [C5, S5, F3.5, O10.6,
IOS3.2, A2]
. 26, : Geolocation, .228.
Web Workers
JavaScript. [C3, S4, F3.5, O10.6]
. 11.2, 11.2 Web Workers, . 236.
3D- WebGL
3D- . [C5, F4]
. 11.4, 11.4 WebGL, . 244.
API . [C3, S4, F3.5, IE6, A2]

. 11.3, , .238.
jQuery
JavaScript,
, .
, ; jQuery. ,

.

jQuery, . jQuery1
.
.
.1. jQuery
jQuery2 jQuery , jQuery Google:
charset="utf-8"
min.js">
</script>
. ,
http://docs.jquery.com
http://www.jquery.com
1
2
262 jQuery
. Google
jQuery Google,
( , , ,

URL- ). ,
jQuery
, , .
.2. jQuery
jQuery ,
. jQuery
jQuery(); .

CSS
jQuery .
jQuery() $();, .
jQuery.
.
h1
$("h1");
important,
$(".important");
.
CSS
. jQuery

jQuery
JavaScript DOM,
.
.
.
.3.
, HTML .
jOuery 263
hide show
hide() show() .
, :
$("h1").hide();

show(). hide()
, Java
Script (,
).
html, val attr

html()
.
$("message").html("Hello World!");
h1 Hello World.
val() .
, html().
attr() .
append, prepend wrap

append() . , .
<form id="add">
<label for="task">Task</label>
<input type="text" id="task" >
<input type="submit" value="Add">
</form>
<ul id="links">
</ul>
, .
264 jQuery
$(function(){
$("#add").submit(function(event){
var new_element = $("<li>" + $("#email").val() + "</li>");
$("#links").append(new_element);
});
});
prepend() append(),
, .
wrap() ,
jQuery.
var wrapper = $("#message").wrap("<div><h2>Message</h2></div>").
parent();
, .
CSS
css() .
$(label").css(color", #f00");
JavaScript
CSS:
$("h1").css( {"color" : "red",
"text-decoration" : "underline"}
);
,
. jQuery addClass() removeClass()

; .
, jQuery
:
$("input").focus(function(event){
$(this).addClass("focused");
});
$("input").blur(function(event){
$(this).removeClass("focused");
});
jOuery 265
CSS3
:focus, .

jQuery jQuery; ,
.
$("h2").addClass("hidden").removeClass("visible");
,
.
.4.
HTML
.
jQuery().
var input = $("input");
document.create
Element("input");,
jQuery
-
var element = $("<p>Hello World</p>");

element.css("color", "#f00").insertAfter("#header");
,
jQuery
.
.5.
. jQuery
jQuery . , popup
, :
1
2
3
var links = $("#links a");

links.click(function(event){
var address = $(this).attr('href');
266 jQuery
4
5
6
window.open(address);
});
jQuery
this. 3
jQuery, attr() .
preventDefault()
, .
jQuery
; bind(). , HTML5
ondragover. bind() .
target = $(#droparea")
target.bind('dragover', function(event) {
return false;
});
: on
.

jQuery (, bind()
click()) jQuery JavaScript ,
. ,
.
jQuery
originalEvent. data
onmessage :
var message_data = event.originalEvent.data;
});
originalEvent .
jOuery 267
.6. document.ready
JavaScript JavaScript,
. onclick HTML ,
.5. , HTML
, JavaScript.
, JavaScript
. JavaScript
script , .
JavaScript window.
onLoad() , .
, .
DOM, .
jQuery document.ready ,
. :
$(document).ready(function() {
alert("Hi! L am a popup that displays when the page loads");
});
,
.
$(function() {
alert("Hi! L am a popup that displays when the page loads");
});

.
, jQuery. , jQuery
, Ajax
, ,
DOM. , jQuery
.
-
HTML5 audio video , .

, -
.
.1.

, MP3
Vorbis, .
MP3 Lame.
().
.
lame in.wav out.mp3 -V2 --vbr-new -q0 --lowpass 19.7
Vorbis
Oggenc. Vorbis
:
oggenc -q 3 inputfile.wav
MP3 Vorbis Hydrogen Audio1.

Lame http://wiki.hydrogenaudio.org/index.php?title=Lame#Quick_
start_.28short_answer.29; Vorbis http://wiki.hydrogenaudio.org/index.
php?title=Recommended_Ogg_Vorbis.o
269
, , .
.2 Web
HTML5 ,
. H.264, Theora VP8

FFMpeg1, . .
, VP8
WebM:
ffmpeg -i blur.mov
-f webm -vcodec libvpx_vp8 -acodec libvorbis
-ab 160000 -sameq
blur.webm
, -
Zencoder2 , HTML5. Amazon S3

URL
-, -
API. Zencoder , ,
. Zencoder
,
3.
,
: Miro Video Converter4.
.
http://www.ffmpeg.org/
http://www.zencoder.com/
3
, Zencoder,
.
4
http://mirovideoconverter.com/
1
2
AppleHTML5: http://www.apple.com/html5/
Apple HTML5 - Safari5.
CSS3.Info: http://www.css3.info/
CSS3.
Font Squirrel: http://www.fontsquirrel.com
, Web.
HTML5: http://www.w3.org/TR/html5/
HTML5 W3C.
HTML5 Mozilla Developer Center: https://developer.mozilla.org/en/
html/html5
HTML5 Mozilla Developer Center.
Web Sockets Node.js: http://
www.web2media.net/laktek/2010/05/04/implementing-web-socket-serverswith-node-js/
Web Sockets Node.js.
Microsoft IE9 Test-Drive: http://ie.microsoft.com/testdrive/
HTML5 (
) Internet Explorer 9.
Ruby Web Sockets: http://www.igvita.com/2009/12/22/rubywebsockets-tcp-for-the-browser/
em-websocket Ruby
Web Sockets.
271
Flash: http://www.lightsphere.com/dev/
articles/ash_socket_policy.html
Flash.
Typekit: http://www.typekit.com
,
JavaScript API.
Unit Interactive: CSS: http://unitinteractive.com/
blog/2008/06/26/better-css-font-stacks/
.
! http://camendesign.com/code/video_for_everybody
HTML5 .
Video.js: http://videojs.com
JavaScript,
HTML5.
http://caniuse.com/
HTML5, CSS3
.
[Hog09] Brian P. Hogan. Web Design For Developers. The Pragmatic Programmers, LLC, Raleigh, NC, and Dallas, TX, 2009.
[HT00] Andrew Hunt and David Thomas. The Pragmatic Programmer: From
Journeyman to Master. Addison-Wesley, Reading, MA, 2000.
[Zel09] Jeffrey Zeldman. Designing With Web Standards. New Riders Press,
New York, third edition, 2009.

985 PDF

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

985 PDF

Загружено:

Авторское право:

Доступные форматы

HTML5 CSS3.

Pragmatic Programmers, LLC, 2010

, 198206, -, , 73, . 29.

11. ARIA . . . . . . . . . . . . . . . . . . . . . . . 104

20. localStorage . . . . . . . . . . 186

11.1. CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236

HTML51 CSS32 , W3C (World Wide Web Consortium) .

, - HTML XML, doctype.

. [C5, F3.6, IE8,

. [C5, F3.6, IE8,

. [C5, F3.6, IE8, S4, O10]

. [C5, F3.6, IE8,

<li><a href="terms.html">Terms of Service</a></li>

URL-. [O10.1, IOS]

. [C5, S4, O10.1, IOS]

. [C5, S4, O10.1]

. date, month week.

. [C5, S5] (Chrome 5 Safari 5

. C: Google Chrome, F: Firefox, IE:

li ( ). Chrome Opera Slider,

autocomplete. HTML5 autocomplete,

Safari, Opera Chrome

accept, , POST- XMLHttpRequest.

n . [C2, F3.5, S3, IE9,

. [C2, F3.5, S3, IE9, O9.5,

. [C2, F3.5, S3, IE9, O9.5,

. [C2, F3.5, S3, IE9, O9.5,

. [C2, F3.5, S3, IE9, O9.5,

. [C2, F3.5, S3,

Internet Explorer. . 4.3.

. 4.3. Internet Explorer

var style = element.style;

. C: Google Chrome, F: Firefox, IE:

11. ARIA 105

11. ARIA 107

11 services, about contact.

JavaScript. [C4, F3, IE9, S3.2,

14. RGraph 127

Internet Explorer - 55%

14. RGraph 129

14. RGraph 131

. 6.4. JavaScript, HTML CSS,

14. RGraph 133

. 6.4. Internet Explorer

ExplorerCanvas (. 13) RGraph

, Flash ( Linux OS X). ,

. C: Google Chrome, F: Firefox, IE:

embed , object , W3C.

, H.264. Mozilla, Google Chrome

AAC (Advanced Audio Coding)

. Theora VP8. Vorbis

WebM VP8 Vorbis Firefox,

<source src="sounds/mp3/drums.mp3" type="audio/mpeg">

<audio id="drums" controls>

. 7.2. HTML5- Safari

HTML5, Flash video.

. 7.3. Internet Explorer Flowplayer

box-shadow [box-shadow: 10px 10px 5px #333;]

, .[C3, F3.5, IE9, S3.2,

WebKit (, Safari Chrome)

. 8.2. Internet Explorer

h1{text-shadow: 2px 2px 2px #bbbbbb;}

DirectX IE6, 7 8, IE8