Вы находитесь на странице: 1из 272

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 ..) ,
. .
html5newtags/index.html
1 <header id="page_header">
2
<h1>AwesomeCo Blog!</h1>
3 </header>

1. 33


. ,
id ( 1).
CSS JavaScript.

. -, ,
(, , ..),

.
,
, , .
HTML5 , section, header nav
.

footer . , .
,
; ,
.
.
, ,
.
.
html5newtags/index.html
<footer id="page_footer">
<p>&copy; 2010 AwesomeCo.</p>
</footer>


. , ,
, .

34 2


.
,
,
HTML.
.
, ,
.
html5newtags/index.html
1 <header id="page_header">
<h1>AwesomeCo Blog!</h1>
<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 .
html5newtags/index.html
<footer id="page_footer">
<p>&copy; 2010 AwesomeCo.</p>
<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.
html5newtags/index.html
<section id="posts">
</section>

, .
!
.

.

article -.
(, , , ,
, , ) , .
article .
,
. :

36 2

html5newtags/index.html
<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 &quot;Are you
interested in our 3 or 5 year service plan?&quot; Instead,
ask &quot;Are you interested in the 3 year service plan or
the 5 year plan, which is a better value?&quot;
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 &quot;no.&quot;
</p>
<footer>
<p><a href="comments"><i>25 Comments</i></a> ...</p>
</footer>
</article>

header footer, .
section.
/
?

,
(, , ..).
. , .

1. 37

: , , ,
. (, ) . ,
.
.


,
, , ,
. aside.
html5newtags/index.html
<aside>
<p>
&quot;Never give someone a chance to say no when
selling your product.&quot;
</p>
</aside>

aside. , .
html5newtags/index.html
<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>
&quot;Never give someone a chance to say no when
selling your product.&quot;

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 &quot;Are
you interested in our 3 or 5 year service plan?&quot;
Instead, ask &quot;Are you interested in the 3 year
service plan or the 5 year plan, which is a better
value?&quot;
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 &quot;no.&quot;
</p>
<footer>
<p><a href="comments"><i>25 Comments</i></a> ...</p>
</footer>
</article>
</section>

!

. ,
aside , .
, . aside , . ,
, .
( )
section nav.

1. 39

html5newtags/index.html
<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

, .
html5newtags/index.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;
}

.
html5newtags/style.css
header#page_header{
width:100%;
}


.
html5newtags/style.css
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 , ; .
, .
html5newtags/style.css
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, :

html5newtags/index.html
<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

html5newtags/style.css
section#sidebar{
float: left;
width: 25%;
}


meter progress, JavaScript

,
meter progress . meter.
.
clear, .
html5newtags/style.css
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

html5newtags/index.html
<!--[if lt IE 9]>
<script type="text/javascript">
document.createElement("nav");
document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("aside");
document.createElement("article");
</script>
<![endif]-->


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 .
.
html5_popups_with_custom_data/original_example_3.html
<a href="holiday_pay" class="popup">Holiday Pay</a>
html5_popups_with_custom_data/original_example_3.html
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){
event.preventDefault();
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">

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


Internet Explorer, O: Opera, S: Safari, IOS: iOS Mobile Safari, A: Android
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.
html5forms/index.html
<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)
. ,

.

.
.
html5forms/index.html
<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.
html5forms/index.html
<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
,
. , .
html5forms/index.html
<label for="email">Email contact</label>
<input type="email" name="email" id="email">


,
.

56 3 -

URL-
URL-.
,

iPhone
- (
, URL-
Mobile

Safari
). URL

-, :
html5forms/index.html
<label for="url">Staging URL</label>
<input type="url" name="url" id="url">

. 3.1. Opera

3. 57


. color.
html5forms/index.html
<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.
html5forms/index.html
if (!hasColorSupport()){
$('input[type=color]').simpleColor();
}

,

. HTML5.

58 3 -

,
,
JavaScript , input color.
html5forms/index.html
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 : ,
. .

, . , , ,
.
, , :
html5forms/index.html
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).
html5forms/index.html
<label for="name">Name</label>
<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

.
html5placeholdertext/index.html
<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

, ,
.
,
.
html5placeholdertext/index.html
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.

, , .
html5placeholdertext/index.html
$(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
,
.
html5_content_editable/show.html
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

, .
html5_content_editable/show.html
$(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>
<meta http-equiv="Content-Type" content="text/html;
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>
<label for="email">Email</label>
<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.
html5_content_editable/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
.
html5_content_editable/show.html
if(document.getElementById("edit_profile_link").contentEditable
!= null){

:
html5_content_editable/show.html
$(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

css3advancedselectors/table.html
table{
width: 600px;
border-collapse: collapse;
}
th, td{
border: none;
}

:
.
css3advancedselectors/table.html
th{
background-color: #000;
color: #fff;
}



. .

(:nth-of-type)

(): ,
.
, CSS.

(, odd even ).

82 4

, HTML5
.
, .
nth-of-type n- ,
.
,
, .
,

. . CSS

3 even odd,
.
css3advancedselectors/table.html
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)

, , ,
:
css3advancedselectors/table.html
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; }


.
css3advancedselectors/table.html
tr:last-child{
font-weight: bolder;
}

,
:

7. 85

css3advancedselectors/table.html
td:last-child{
font-weight: bolder;
}

, last-child
. .
css3advancedselectors/table.html
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

css3advancedselectors/table.html
tr:nth-last-child(2){
color: green;
}

.
.
, .
,
. .
nth-last-child
.
css3advancedselectors/table.html
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.
css3advancedselectors/table.html
<!--[if (gte IE 5.5)&(lte IE 8)]>
<script type="text/javascript"
http://www.keithclark.co.uk/labs/ie-css3/
http://www.domassistant.com/

1
2

88 4

src="js/DOMAssistantCompressed-2.8.js"></script>
<script type="text/javascript"
src="js/ie-css3.js"></script>
<![endif]-->

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 ,
(
).
css3_print_links/index.html
<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,
.
css3_print_links/index.html
<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>
<!--[if lte IE 7]>
<script type="text/javascript" src="print.js"></script>
<![endif]-->
</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>
&quot;Lorem ipsum dolor sit amet...&quot;
</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
:
css3columns/newsletter.html
$("#newsletter").columnize({ columns: 2 });


JavaScript
. ,
, . JavaScript ,
. CSS
, . null,
, .
css3columns/newsletter.html
<script
charset="utf-8"
src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/
jquery.
min.js'
type='text/javascript'>
</script>
<script
charset="utf-8"
src="javascripts/autocolumn.js"
type='text/javascript'>
</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]

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


Internet Explorer, O: Opera, S: Safari, IOS: iOS Mobile Safari, A: Android
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">
<h1>AwesomeCo Blog!</h1>
</header>


role="banner" .

.
html5_aria/blog/index.html
<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.
:
html5_aria/blog/index.html
<section id="posts" role="main">
</section>

106 5

html5_aria/blog/index.html
<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> <!-- sidebar -->


contentinfo.
html5_aria/blog/index.html
<footer id="page_footer" role="contentinfo">
<p>&copy; 2010 AwesomeCo.</p>
</footer> <!-- 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.
html5_aria/blog/index.html
<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>
<meta http-equiv="Content-Type" content="text/html;
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">
<p>&copy; 2010 AwesomeCo.</p>
<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, .
.
html5_aria/homepage/index.html
<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>

:
html5_aria/homepage/index.html
<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 .
html5_aria/homepage/index.html
<script type="text/javascript"
charset="utf-8"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.
min.js">
</script>
<script type="text/javascript"
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");
document.createElement("section");
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")){
event.preventDefault();
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.
html5canvasgraph/canvas_simple_drawing.html
var canvas = document.getElementById('my_canvas');
if (canvas.getContext){
var context = canvas.getContext('2d');
}else{
// -
// <canvas>.
}

getContext , 2D-
. ,
.
,
. , ,
, .
html5canvasgraph/canvas_simple_drawing.html
context.fillStyle = "rgb(200,0,0)";
context.fillRect (10, 10, 100, 100);

120 6

2D-
. X Y, .

;
, 10
.
html5canvasgraph/canvas_simple_drawing.html
context.fillStyle = "rgb(200,0,0)";
context.fillRect (10, 10, 100, 100);
context.fillStyle = "rgb(0,200,0)";
context.fillRect (20, 20, 100, 100);
context.fillStyle = "rgb(0,0,200)";
context.fillRect (30, 30, 100, 100);

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.
html5canvasgraph/logo.html
$(function(){
var canvas = document.getElementById('logo');
if (canvas.getContext){
drawLogo();
}
});

logo,
canvas .
html5canvasgraph/logo.html
<canvas id="logo" width="900" height="80">
<h1>AwesomeCo</h1>
</canvas>

AwesomeCo.

122 6


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

( ).
fillText , 60 . ,
.


. ,
. .

beginPath() , lineTo:
html5canvasgraph/logo.html
context.lineWidth = 2;
context.beginPath();

13. 123

context.moveTo(0, 40);
context.lineTo(30, 0);
context.lineTo(60, 40 );
context.lineTo(285, 40 );
context.stroke();
context.closePath();

stroke
, closePath .

.


. X
Y ,
,
.

.
html5canvasgraph/logo.html
context.save();
context.translate(20,20);
context.fillRect(0,0,20,20);

save()
: . save() , . save()
. ,
restore() .
, stroke fill
, .
html5canvasgraph/logo.html
context.fillStyle = '#fff';
context.strokeStyle = '#fff';
context.lineWidth = 2;

124 6

context.beginPath();
context.moveTo(0, 20);
context.lineTo(10, 0);
context.lineTo(20, 20 );
context.lineTo(0, 20 );
context.fill();
context.closePath();
context.restore();


(#fff). , ,
.
; .


.
,
:
html5canvasgraph/logo.html
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
<!--[if lte IE 8]>
<script src="javascripts/excanvas.js"></script>
<![endif]-->

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.
html5canvasgraph/canvas_graph.html
<script type="text/javascript"
charset="utf-8"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.
min.js">
</script>
<script src="javascripts/RGraph.common.js" ></script>
<script src="javascripts/RGraph.bar.js" ></script>

, HTML-
,
RGraph. , RGraph .
jQuery.
html5canvasgraph/canvas_graph.html
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.
html5canvasgraph/canvas_graph.html
var canvas = document.getElementById('browsers');
if (canvas.getContext){
$('#graph_data').hide();
canvasGraph();
}

, ,
canvas.



JavaScript.

14. RGraph 131

,
canvas,
JavaScript.
,
.
,
, .
html5canvasgraph/canvas_graph.html
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.
html5canvasgraph/canvas_graph.html
var canvas = document.getElementById('browsers');
if (canvas.getContext){
$('#graph_data').hide();
canvasGraph();
}
else{
divGraph("#f00", "#fff", 140, 10, 20);
}

. 6.4. JavaScript, HTML CSS,



,
. canvas :
( - ). ,
.
.
,

14. RGraph 133

,
.

. 6.4. Internet Explorer

/
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. , , , ,
.

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


Internet Explorer, O: Opera, S: Safari, IOS: iOS Mobile Safari, A: Android
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
<article class="sample">
<header><h2>Drums</h2></header>
<audio id="drums" controls>
<source src="sounds/ogg/drums.ogg" type="audio/ogg">

15. 143

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


<a href="sounds/mp3/drums.mp3">Download drums.mp3</a>
</audio>
</article>
<article class="sample">
<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>
<article class="sample">
<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>
<article class="sample">
<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
<article class="sample">
<header><h2>Drums</h2></header>

15. 145

<audio id="drums" controls>


<source src="sounds/ogg/drums.ogg" type="audio/ogg">
<source src="sounds/mp3/drums.mp3" type="audio/mpeg">
</audio>
<a href="sounds/mp3/drums.mp3">Download drums.mp3</a>
</article>


. JavaScript
audio ,
canPlayType().
html5_audio/advanced_audio.html
var canPlayAudioFiles = !!(document.createElement('audio').
canPlayType);

, ,
, .
html5_audio/advanced_audio.html
$(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

html5video/index.html
<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>

:
html5video/index.html
<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

html5video/index.html
<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.
,
, . ,
. - , . ,

, .
,
.
html5video/index.html
<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]
. C: Google Chrome, F: Firefox, IE:
Internet Explorer, O: Opera, S: Safari, IOS: iOS Mobile Safari, A: Android
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>
<label for="email">Email</label>
<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{
background-color: #ddd;
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 :
css3roughedges/style.css
-moz-border-radius: 5px;

WebKit (, Safari Chrome)


.
css3roughedges/style.css
-webkit-border-radius: 5px;


CSS
css3roughedges/style.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.
css3roughedges/rounded_corners.html
<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 :
css3roughedges/corner.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

css3roughedges/corner.js
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.
css3roughedges/rounded_corners.html
<link rel="stylesheet" href="style.css" type="text/css"
media="screen">
<!--[if IE]>
<style>
fieldset legend{margin-top: -10px }
</style>
<![endif]-->

;
Internet Explorer . 8.2.

17. 163

. 8.2. Internet Explorer

,
. ,
(, , ).

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;
background-color: #fff;
}
#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).
css3banner/style.css
#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.
:
css3banner/style.css
#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. , -
.
, .
css3banner/style.css
#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, ,
. , :
css3banner/style.css
#info{
background-color: rgba(255,255,255,0.95);
}

,
, ; ,
.
, .
css3banner/style.css
#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
<!--[if lte IE 8]>
<script>
document.createElement("section");
</script>
<link rel="stylesheet" href="ie.css"
type="text/css" media="screen">
<![endif]-->
</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(
sizingMethod='auto expand',
M11=0.9914448613738104,
M12=0.13052619222005157,
M21=-0.13052619222005157,
M22=0.9914448613738104
)";

? , , . , 7,5
. ,
,
.
.

Gradient IE , , ,
. , .
css3banner/filters.css
filter: progid:DXImageTransform.Microsoft.gradient(
startColorStr=#FFFFFF, endColorStr=#EFEFEF
);
22.

172 8

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(
startColorStr=#FFFFFF, endColorStr=#EFEFEF
)";

, , background-image.
info.

Gradient
;
. , , .
css3banner/filters.css
background: none;
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorStr=#BBFFFFFF, endColorStr=#BBFFFFFF
);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(
startColorStr='#BBFFFFFF', EndColorStr='#BBFFFFFF'
)";


rgba, , .

, , ,
.
IE7,
. ,
, ,
, .

IE ,
.
, ,
.
IE.

18. , 173

css3banner/ie.css
#info{
background: none;
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorStr=#BBFFFFFF, endColorStr=#BBFFFFFF
);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(
startColorStr='#BBFFFFFF', EndColorStr='#BBFFFFFF'
)";
}
#badge{
filter:
progid:DXImageTransform.Microsoft.Matrix(
sizingMethod='auto expand',
M11=0.9914448613738104,
M12=0.13052619222005157,
M21=-0.13052619222005157,
M22=0.9914448613738104
),
progid:DXImageTransform.Microsoft.gradient(
startColorStr=#FFFFFF, endColorStr=#EFEFEF
),
progid:DXImageTransform.Microsoft.Shadow(
color=#333333, Direction=135, Strength=3
);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(
sizingMethod='auto expand',
M11=0.9914448613738104,
M12=0.13052619222005157,
M21=-0.13052619224147205157,
M22=0.99144486137384
),
progid:DXImageTransform.Microsoft.gradient(
startColorStr=#FFFFFF, endColorStr=#EFEFEF
),

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]

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


Internet Explorer, O: Opera, S: Safari, IOS: iOS Mobile Safari, A: Android
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>
<option value="20">20px</option>
<option value="24">24px</option>
<option value="32">32px</option>
</select>
</ol>
</fieldset>
<input type="submit" value="Save changes">
</form>

HTML.


localStorage
window.localStorage() JavaScript. /
.
html5_localstorage/index.html
localStorage.setItem("background_color",
$("#background_color").val());

188 9

.
html5_localstorage/index.html
var bgcolor = localStorage.getItem("background_color");


.
html5_localstorage/index.html
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.

20. localStorage 189

html5_localstorage/index.html
function apply_preferences_to_page(){
$("body").css("backgroundColor", $("#background_color").
val());
$("body").css("color", $("#text_color").val());
$("body").css("fontSize", $("#text_size").val() + "px");
}

.
html5_localstorage/index.html
$(function(){
load_settings();
$('form#preferences').submit(function(event){
event.preventDefault();
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
html5_localstorage/index.html
if (!window.localStorage){
}

cookie,
Quirksmode. Java
Script :
html5_localstorage/index.html
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

20. localStorage 191

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

.
html5_localstorage/index.html
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">
<script type="text/javascript"
charset="utf-8"
src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/
jquery.min.js">
</script>
<script type="text/javascript"
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

.
html5sql/javascripts/notes.js
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) . ,
.
, ;
.


,
( ),
.
html5sql/javascripts/notes.js
// 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, :
html5sql/javascripts/notes.js
//

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 :
html5sql/javascripts/notes.js
$("#notes").click(function(event){
if ($(event.target).is('li')) {

200 9

var element = $(event.target);


loadNote(element.attr("data-id"));

});

loadNote, .
html5sql/javascripts/notes.js
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:
html5sql/javascripts/notes.js
$("#save_button").click(function(event){
event.preventDefault();
var title = $("#title");
var note = $("#note");
if(title.attr("data-id")){
updateNote(title, note);
}else{
insertNote(title, note);
}
});

data-id title . , , ,
insertNote.
html5sql/javascripts/notes.js
insertNote = function(title, note)
{
db.transaction(function(tx){
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() , .
html5sql/javascripts/notes.js
updateNote = function(title, note)
{
var id = title.attr("data-id");
db.transaction(function(tx){
tx.executeSql("UPDATE notes set title = ?,
note = ? where id = ?",
[title.val(), note.val(), id],
function(tx, result){
alert('Record ' + id + ' updated!');
$("#notes>li[data-id=" + id + "]").html(title.val());
},
function(){
alert('The note was not updated!');
}
);
});
};

,
; data-id .
.
delete.
html5sql/javascripts/notes.js
$("#delete_button").click(function(event){
event.preventDefault();
var title = $("#title");
deleteNote(title);
});

delete , .

21. 203

html5sql/javascripts/notes.js
deleteNote = function(title)
{
var id = title.attr("data-id");
db.transaction(function(tx){
tx.executeSql("DELETE from notes where id = ?", [id],
function(tx, result){
alert('Record ' + id + ' deleted!');
$("#notes>li[data-id=" + id + "]").remove();
},
function(){
alert('The note was not deleted!');
}
);
});
};

,
.


. New,
, .
jQuery
New.
html5sql/javascripts/notes.js
$("#new_button").click(function(event){
event.preventDefault();
newNote();
});
//end:newbutton
newNote();
});

title data-id,
.
Delete.

204 9

html5sql/javascripts/notes.js
newNote = function(){
$(#delete_button").hide();
var title = $("#title");
title.removeAttr("data-id");
title.val("");
var note = $("#note");
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
<script type="text/javascript"
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
<script type="text/javascript"
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]

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


Internet Explorer, O: Opera, S: Safari, IOS: iOS Mobile Safari, A: Android
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.


, -,
. ,
.
html5history/javascripts/application.js
1
$("nav ul").click(function(event){
target = $(event.target);
if(target.is("a")){
event.preventDefault();
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().
,
.
html5history/javascripts/application.js
if(supportsHistory()){
window.onpopstate = function(event) {
if(event.state){
var tab = (event.state["tab"]);
$(".visible")
.removeClass("visible")
.addClass("hidden")
.hide();
$(tab)

23. 213

}
};

.removeClass("hidden")
.addClass("visible")
.show();

};

, jQuery

.
. .



, .
window.onpopstate():
html5history/javascripts/application.js
if(supportsHistory()){
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)
.removeClass("hidden")
.addClass("visible")
.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
<script type="text/javascript"
charset="utf-8"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.
min.js">
</script>
<script type="text/javascript"

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{
background-color: #ddd;
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()).
.
html5xdomain/contactlist/public/javascripts/application.js
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().
html5xdomain/contactlist/public/javascripts/application.js
if(window.postMessage){
$(window).bind("message",function(event){
$("#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

html5_websockets/public/index.html
<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;
background-color: #ddd;
5
padding: 10px;
- }
- #chat_wrapper h2{
margin: 0;
- }
10
- #chat{
width: 300px;
height: 300px;
overflow: auto;
15
background-color: #fff;
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() :
html5_websockets/public/chat.js
webSocket.onopen = function(event){
$('#chat').append('<br>Connected to the server');
};

, . , -.
onmessage():
html5_websockets/public/chat.js
webSocket.onmessage = function(event){
$('#chat').append("<br>" + event.data);
$('#chat').animate({scrollTop: $('#chat').height()});
};

data event;
.
,
,
.
.
onclose() .
html5_websockets/public/chat.js
webSocket.onclose = function(event){
$("#chat").append('<br>Connection closed');
};

,
.

226 10 API

html5_websockets/public/chat.js
$(function(){
$("form#chat_form").submit(function(e){
e.preventDefault();
var textfield = $("#message");
webSocket.send(textfield.val());
textfield.val("");
});
})

submit,
- send().
, /
nick
. - .
html5_websockets/public/chat.js
$("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

html5_websockets/public/index.html
<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

html5_websockets/public/chat.js
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?
&amp;size=900x300
&amp;sensor=false
&amp;maptype=roadmap
&amp;markers=color:green|label:A|1+Davol+square,+Providence,
+RI+02906-3810

26. : Geolocation 231

&amp;markers=color:green|label:B|22+Southwest+3rd+Avenue,
Portland,+OR
&amp;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{
};

26. : Geolocation 233

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]
. C: Google Chrome, F: Firefox, IE:
Internet Explorer, O: Opera, S: Safari, IOS: iOS Mobile Safari, A: Android
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;
border: 1px solid #000;
text-decoration: none;
}
a.button:hover{
background-color: #bbb;
color: #fff
}

,
, . CSS31
, ,

JavaScript
. , ;
:
css3transitions/style.css
1 a.button{
padding: 10px;
border: 1px solid #000;
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{
background-color: #bbb;
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().
webworkers/application.js
$("#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 ?

webworkers/application.js
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;
background-color: #ddd;
height: 335px;
}

242 11 ?

.hover{
border: 10px solid #000;
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.
html5drag/application.js
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.
html5drag/application.js
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 . .
html5drag/application.js
target.bind('dragover', function(event) {
if (event.preventDefault) event.preventDefault();
return false;
});

,
ondrop. ondragend.
html5drag/application.js
contacts.bind('dragend', function(event) {
if (event.preventDefault) event.preventDefault();
return false;
});

,
,
ondrop.


,
, ondragenter ondragleave.
html5drag/application.js
target.bind('dragenter', function(event) {
$(this).addClass('hover');
if (event.preventDefault) event.preventDefault();
return false;
});

26. : Geolocation 245

target.bind('dragleave', function(event) {
$(this).removeClass('hover');
if (event.preventDefault) event.preventDefault();
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
<label for="name">Name</label>
<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:
<script type="text/javascript"
charset="utf-8"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.
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){
event.preventDefault();
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

event.preventDefault();
window.open(address);
});

jQuery
this. 3
jQuery, attr() .
preventDefault()
, .

jQuery

; bind(). , HTML5
ondragover. bind() .
target = $(#droparea")
target.bind('dragover', function(event) {
if (event.preventDefault) event.preventDefault();
return false;
});

: on
.


jQuery (, bind()
click()) jQuery JavaScript ,
. ,
.
jQuery
originalEvent. data
onmessage :
$(window).bind("message",function(event){
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.

Оценить