0% нашли этот документ полезным (0 голосов)

68 просмотров196 страниц

HTML5

Загружено:

Helen Rett

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

Мы серьезно относимся к защите прав на контент. Если вы подозреваете, что это ваш контент, заявите об этом здесь.

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

Скачать в формате PDF, TXT или читать онлайн в Scribd

0% нашли этот документ полезным (0 голосов)

68 просмотров196 страниц

HTML5

Загружено:

Helen Rett

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

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

Скачать в формате PDF, TXT или читать онлайн в Scribd

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

1. ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10
2. HTML5 . . . . . . . . . . . . . . 25
3. ?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
4. () . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
6. !. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
7. : , ,
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
8. , !. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
9. - . . . . . . . . . . . . . . . . . . . . . . 155
10. . . . . . . . . . . . . . . 167
.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195

1. ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
MIME-. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
, . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
HTML 19972004. . . . . . . . . . . . . .
, XHTML, . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
WHAT? ?!. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
W3C. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

.
.
.
.
.
.
.
.
.
.
.

. .
..
. .
. .
. .
. .
. .
. .
. .
. .
. .

10
10
11
17
18
20
21
22
23
24
24

2. HTML5 . . . . . . . . . . . . . . 25
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
Modernizr: HTML5- . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

.
.
.
.

25
25
26
26

. . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . .
. . . . . . . . .
- . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . .
. . . . . . .
. . . .
. . . . . . . . . . . . . .
. . . .

.
.
.
.
.
.
.
.
.
.
.
.

28
28
29
31
33
33
34
35
36
37
38
39

.
.
.
.
.
.
.
.
.
.
.
.

3. ?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
HEAD. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
HTML5. . . . . . . . . . . . . . .
,
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .

.
.
.
.
.

42
43
44
45
50

.
.
.
.
.
.
.

51
54
57
59
61
62
64

4. () . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
. . . . . . . . . .
. .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . .
IE?. . . . . . . . . . . . . . .
. . . . . . . . . . . .
. .

.
.
.
.
.
.
.
.
.

67
69
70
72
75
78
81
82
87

5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
. . . . . . . . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . . . . . .
H.264. . . . . . . . . . . . . . .
Theora . . . . . . . . . . . . . .
VP8. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
MPEG-1 Audio Layer3 . . .
Advanced Audio Coding . .
Vorbis. . . . . . . . . . . . . . .
? . . . .

.
.
.
.
.
.
.
.
.
.
.

88
88
90
91
91
92
92
93
94
95
95

H.264. . . . . . . . . . . . . . . . . . . . . . . . . .
Ogg- Firefogg . . . . . . . . . . . . . . . . . . . . . .
Ogg- ffmpeg2theora . . . . . . . . . .
H.264- HandBrake. . . . . . . . . . . . . . . . . . .
H.264- HandBrake. . . . . . . . . . . .
WebM- ffmpeg. . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
IE?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. 97
. 98
104
107
113
115
117
121
122
123

6. !. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
. . . . . . . . . . . . . . .
API . . . . . . . . . . .
. . . . . . . . .
. . . . . . . . .
!. . . . . . . . . . .
IE?. . . . . . . . . . . . . . .
geo.js. . . .
. . . . . . . . . . . .
. .

.
.
.
.
.
.
.
.
.

124
124
125
127
128
130
130
132
133

7. : , , . . . 134
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
HTML5 . .
HTML5-: . . . . . . . . . . . . . . . . . . . . . . . . .
HTML5-. . . . . . . . . . . . . . . . . . . . . . . .
HTML5-. . . . . . . . . . . . .
. . . . . . . . . . . . . . .
HTML5- . . . . . . . . . . . . . . . . . . . . . . . . . . .
: . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

.
.
.
.
.
.
.
.
.

134
135
136
137
138
139
139
141
143

8. , !. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
. . . . . . . . . . . . .
. . . . . . . . .
NETWORK. .
FALLBACK . .

.
.
.
.

145
146
147
148

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
!, .
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

.
.
.
.

149
151
153
154

9. - . . . . . . . . . . . . . . . . . . . . . . 155
. . . . . . . . . . . . . . .
. . . . .
. . .
. .
- . . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . . . .
. . . . . . . . . . . .
. . . . . . . . .
. . . . . . .
. .

.
.
.
.
.
.
.
.
.
.
.
.

. . . .
. . . .
. . . .
....
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .

.
.
.
.
.
.
.
.
.
.
.
.

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
....................
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .

155
155
156
158
160
160
162
163
164
165
165
166

10. . . . . . . . . . . . . . . 167
. . . . . . . . . . . . . . . . . . .
?. . . . . . . .
. . . . . . . . .
. . . . .
. .
. . . . . .
. . . .
. . . . . .

.
.
.
.
.
.
.
.

167
168
169
172
180
184
190
193

.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200

Mozilla,
,
(http://lists.w3.org/Archives/Public/public-html/2010Jan/0107.html):
. , , , , ,
, . ,
,
, ,
. . .

, HTML5, .

MIME-
, , HTML5,
HTML XHTML. ,
HTML5 , , - ,
MIME-.
, , ,
, . , - .
, ,
. Content-Type , , :
Content-Type: text/html

text/html , MIME- . ,

, ,
. MIME- ( image/jpeg
JPEG, image/png PNG ..). MIME JavaScript, CSS , -, ,
.
, . , - 1993 , Content-Type, 1994. , , , 1993
, Content-Type. -. ,
, HTML-, , , , PDF- - URL-,
MIME- Content-Type.
, .

,

<img>? ,
. , - . .
HTML, , - - . - , , .
, , , .
, , . , .
<img>, , (W3C), -
. .
25 1993 (Marc Andreessen) 1:
HTML-:
IMG
SRC="url".
(bitmap pixmap). ,
.
1

http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html. ,
, , Next message Previous
message, -. . .

1. ?
:

<IMG SRC="file://foobar.com/foo/bar/blargh.xbm">
( .)
, .
, .
,
. , , Xbm Xpm.
, , (, XMosaic , ).
XMosaic. . ,
,
HTML. , , . ,
,
. :
, ( , -,
MIME-).

. Xbm Xpm
UNIX-; Mosaic . , UNIX-, XMosaic.
1993, Mosaic
Communications Corporation, ,
Mosaic Netscape ( Netscape
Corporation Netscape Navigator ).
MIME- , -,
HTTP . - (
-), (,
image/jpeg),
. 1993 HTTP (1991), . , .
(Tony Johnson) :
Midas2.0 ( SLAC, ) . ,
NAME="name", ,
IMG. :

<ICON name="NoEntry" href="http://note/foo/bar/NoEntry.xbm">

NAME , . , ,
, ,
. , , .

( ,
). , -, , IMG SRC, IMAGE SOURCE. ICON
, , . ,
, ICON .

Midas , XMosaic.
UNIX, VMS. SLAC Stanford Linear Accelerator Center (-
()).
. SLAC
- , .
1993 SLAC ( !) - .
:
, , Midas2.0. :

<INCLUDE HREF="...">
,
. , -.
HTTP2,
.

HTTP2 HTTP 1992.

1993 . , HTTP2, HTTP1.0. HTTP1.0 -
, , - .
:
:

<AHREF="..." INCLUDE>. </A>

<A>. , INCLUDE. ,
INCLUDE, (.
) ,
INCLUDE.

,
, ,
<IMG>.
<img alt="..."> ( Netscape,
- ).

1. ?

(Tim Berners-Lee):
, <aname=fig1 href="fghjkdfghj" REL="EMBED,
PRESENT"></a>. :
EMBED ;
PRESENT , .
, .
- , . , ,
, . ,
, .

, rel
(. HEAD 3).
(Jim Davis) :
, , :

<IMG HREF="http://nsa.gov/pub/sounds/gorby.au" CONTENT-TYPE=audio/basic>

, , ,
.

, Netscape
<embed>.
(Jay C. Weber) :
. ? MIME-. ?

:
MIME-
. , MIME.

:
MIME-, . , ,
, ,
- <AUD SRC="file://foobar.com/foo/bar/blargh.snd">
.
.

, .
, , , HTML5 <video> <audio>.
(Dave Raggett) :
!
.
.

1993, HTML+,
HTML. ; HTML HTML2.0 ,
: , , HTML 1994.
HTML+ HTML3.0.
, ( W3C )
Arena, HTML3.0 . HTML3.2
:
HTML2.0, HTML3.2
: , .
HTML4.0, HTML Tidy, XHTML, XForms, MathML W3C.
1993 :
,
,
, , ..? - ,
Intermedia?

Intermedia .
19851991. Intermedia A/UX UNIX- , Macintosh .
. SVG- (
), <canvas> ( ). , <canvas> WHAT .
(Bill Janssen) :
, , . Intermedia,
, : Andrew Slate. Andrew
. : , , , , , .
,
, . , ,
( ),
( ), (
).

Andrew
Andrew. Andrew Project.

1. ?

(Thomas Fine) :
. MIME-.
Postscript, ,
.
, . , . , Display Postscript. ,
Postscript . -, URL -.
Postscript , .

Display PostScript , Adobe NeXT.

. , ,
, HTML .
2 1993 - :
HTTP2 MIME-, ,
- . . , Postscript . , Display Postscript, ,
Adobe PDF Postscript. ,
Adobe.
, ( HyTime?) (/) ,
.
IMG, INCLUDE, . EMBED, INCLUDE C++ ,
SGML-, (
).

HyTime ,
SGML. HTML XML 1990-
.
<INCLUDE> ,
<object>, <embed> <iframe>.
12 1993 :
. Mosaicv0.10,
GIF XBM . [...]
INCLUDE/EMBED . [...] ,
<IMG SRC="url"> ( ICON, , , ).
; , MIME- .
,
.

,
HTML-, 18,
. .
HTTP. , 0.9,
1.0, 1.1, (http://www.ietf.org/
dyn/wg/charter/httpbis-charter.html).
HTML. ,
(!), 2.0,
3.2 4.0. HTML, , ,
. ,
, ,
. (2011) , 1990, .
Android
. ,
.
HTML , ( ), - (
-), . HTML , , ,
. - ,
HTML (, ,
, -, ), :
. HTML ,
, .
, 1993,
. Netscape Navigator 1998.
, Mozilla Suite, Firefox. Internet
Explorer Microsoft Plus!
Windows95,
.
, 1993, .
- Windows 2000 ,
Macintosh - Mac OSX, -
Linux, iPhone. ,
1993 3.1 Windows OS/2, Macintosh

1. ?

System7, Linux Usenet.

Trumpet Winsock MacPPP,
-.
, -, (
20!) 1993.
1980- , HTML.
-, ,
HTML (
) 19801990- .
, Andrew Intermedia?
HyTime? HyTime -
. ISO- ,
, ,
http://www.sgmlsource.com/history/hthist.htm.

: <img>?
<icon> <include> ?
include - ?
<img>? : , <img>, .
, . Andrew, Intermedia
HyTime .
, . ,
,
. , <img>
; ;
. , 18 , ,
.
25 1993, : , MIME- - .

HTML
19972004
1997 (W3C) HTML4.0, ,
HTML, .
XML1.0.

HTML 19972004

, W3C
HTML, :
W3C HTML?
:
, HTML4.0,
XML-. ,
HTML XML.

XML- W3C
HTML. 1998 , HTML XML;
. XHTML1.0.
MIME- XHTML: application/xhtml+xml.
(HTML4)
C, -,
, XHTML- , HTML. C,
, XHTML-, MIME- text/html.
HTML . 1999 XHTML Extended Forms. (http://www.
w3.org/TR/1999/WD-xhtml-forms-req-19990830#intro) ,
.
HTML ,
- ,
HTML. ( XHTML XHTML Extended Forms),
. , ,
.
XHTML Extended Forms Xforms . HTML
XForms1.0
2003.
XML , HTML
, .
2001 XHTML1.1, XHTML1.0
-, C. XHTML,
1.1, MIME- application/xhtml+xml.

1. ?

, XHTML,
MIME-? ? .
HTML-. , , HTML- <title>, , , HTML
<title> .
, , , , - , .
, , HTML- , -
. . , 99%
HTML- .

HTML- .
, W3C . 1997
XML .
, XML
. ,
,
, ( :
). . HTML
XML-, , MIME- application/xhtml+xml .
, XHTML- -
,
( ) .
. , 99% -
application/xhtml+xml ,
.
XHTML1.0 1.1 , - application/xhtml+xml. , , ,
XHTML. . C XHTML1.0 ,
. , - :
XHTML, MIME- text/html.
: XHTML-, - text/html.
-
XHTML, , , -

, <br />, <hr />. MIME- application/xhtml+xml,

XML, . MIME- text/html,
, , HTML, . ,
, -.
, XHTML1.0, XHTML1.1 .
XHTML2.0
.
XHTML1.0 ,
XHTML1.1 XHTML2.0 - -.
: XHTML? MIME ( , MIME- ,
, text/html). XHTML
XML- , -
application/xhtml+xml.

2004 W3C - . , ,
, -, W3C.
(
Mozilla Foundation Opera Software)
: HTML4
- (http://www.w3.
org/2004/04/webapps-cdf-ws/papers/opera.html).
, ,
.
,
- - , HTML,
CSS, DOM JavaScript. -
IE6, -.
- , ( ) , .

- , [ ]
.

. ,
CSS, , XML.

, -, . , , :

1. ?
. , .

, , .
, , (, XBL).

-
.

. ,
. ,
.

,
: W3C HTML, CSS DOM - ( ,
API )? 8 11 .
(http://www.w3.org/2004/04/webapps-cdf-ws/summary), W3C :
W3C ,
: HTML CSS
-. ,
W3C.
, HTML -,
: , W3C.
, 2004, whatwg.org, WHAT.

WHAT? ?!
WHAT? (http://www.
whatwg.org/news/start).
- (Web Hypertext
Applications Technology) , ,
.
, HTML , -. ,
HTML .
-. , HTML4- .
,
.

W3C

.
XHTML ( , C)
, , HTML
MIME-. , , . XForms
HTML-, XForms MIME- (, , ). MIME-.
WHAT , HTML.
99% . . HTML-, -
, . Netscape
,
NCSA Mosaic. Internet Explorer, , Netscape; Opera Firefox Internet Explorer;
Safari Firefox .. .
,
.
, , .
WHAT (
) HTML,
-. ,
.
WHAT
. , Web Forms2.0,
- ( - 9).
Web Applications1.0 -
,
(.4) , ,
(.5).

W3C
W3C WHAT . WHAT -
HTML, W3C HTML
2.0 XHTML. , 2006
, WHAT , XHTML2
.
-, W3C,
W3C WHAT HTML (http://dig.
csail.mit.edu/breadcrumbs/node/166).

1. ?
. HTML .
XML , . HTML , . ,
, . HTML , , ,
.
HTML. , HTML XHTML.
. HTML XHTML
. ,
.
-. , HTML-, Xforms. HTML- , XForms . HTML-
Web Forms. HTML.

W3C HTML Web Applications1.0 HTML5.

, HTML5.

2009 XHTML2. (http://www.w3.org/2009/06/xhtml-faq.

html):
2007 W3C HTML XHTML2,
, XHTML2.
W3C ,
HTML. ,
XHTML2, W3C 2009 .

, , .

(http://hixie.ch/commentary/web/history)

(Ian Hickson).
HTML/ (http://www.w3.org/html/wg/wiki/History) -

(Michael Smith), (Henri Sivonen) .

HTML (http://atendesigngroup.com/blog/brief-history-html)
(Scott Reynen).

HTML5

, , : HTML5,
? . HTML5 ,
, HTML5 : . ,
: , , .

(DOM)
, HTML- .
<p>, <div>, <span> .. DOM- ( ,
HTML-).
DOM- , ,
. , , HTML5-,
- .
, , DOM.
HTML5. , .
1. , ,
window navigator.
. ,
.
2. , .
. .
3. , , , .

2. HTML5

. .
4. , - ,
, .
. .

Modernizr:
HTML5-
Modernizr (http://www.modernizr.com) JavaScript-,
MIT .
HTML5 CSS3 ,
. Modernizr
1.11. .
Modernizr <script>:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<script src="modernizr.min.js"></script>
</head>
<body>
...
</body>
</html>

Modernizr ,
modernizr_init(), . Modernizr

, . , , API
(.4), Modernizr.canvas true, false:
if (Modernizr.canvas) {
// !
} else {
// <canvas> , :(
}

HTML5 <canvas> (http://bit.ly/9JHzOf)

, 1

2011 1.6 - 2.0. .

, .
,
JavaScript. HTML5 API ,
, , .
API 2 (. ). <canvas> , DOM-, <canvas>,
getContext() (. 4). , . <canvas>, :
function supports_canvas() {
return !!document.createElement('canvas').getContext;
}

<canvas>:
return !!document.createElement('canvas').getContext;

-
. ,
.
<canvas> ,
getContext(). , API :
return !!document.createElement('canvas').getContext;

,
(true false).
return !!document.createElement(canvas).getContext;

, API : (. 4),
(. 4), (. 4) . ,
ExplorerCanvas (. IE? 4), API
Internet Explorer.
,
API , Modernizr (. ):
if (Modernizr.canvas) {
// !
} else {
// <canvas> :(
}

API , .

2. HTML5

<canvas> API ,
API . , , ,
API .
API 2
(. ).
, DOM-,
<canvas>, getContext() (. 4), , DOM- , . ,
, :
function supports_canvas_text() {
if (!supports_canvas()) { return false; }
var dummy_canvas = document.createElement('canvas');
var context = dummy_canvas.getContext('2d');
return typeof context.fillText == 'function';
}

supports_canvas(), API :
if (!supports_canvas()) { return false; }

, , <canvas>,
.
<canvas> .
, supports_canvas()
, getContext() -:
var dummy_canvas = document.createElement('canvas');
var context = dummy_canvas.getContext(2d);

, , fillText().
, API :
return typeof context.fillText == 'function';

, Modernizr:
if (Modernizr.canvastext) {
// !
} else {
// :(
}

HTML5 <video>,
-.
, Apple QuickTime Adobe Flash.

<video> , . , HTML5- , , 1.
, HTML5-,
<video>.
. (Kroc Camen). Video for Everybody! (
, http://camendesign.com/code/video_for_everybody) HTML5- , ,
QuickTime Flash.
JavaScript , , ,
.
- ,
, JavaScript. 2 (.
). HTML5-,
DOM-, <video>, canPlayType(),
HTML5- DOM-
. , ,
:
function supports_video() {
return !!document.createElement('video').canPlayType;
}

, Modernizr (. Modernizr: HTML5- ):

if (Modernizr.video) {
// !
} else {
// ,
// QuickTime Flash
}

, . .

.
, , , ( ). : ,
.
1

: 1 (http://diveintomark.org/archives/2008/12/18/givepart-1-container-formats) 2 , (http://
diveintomark.org/archives/2008/12/19/give-part-2-lossy-video-codecs). . .

2. HTML5

. , .
. ? HTML5 ,
. ,
: .
( ), Safari iPhone ( Adobe Flash,
). ,
, Chromium Mozilla
Firefox.
3 (. ).
HTML5-, DOM-, <video>,
canPlayType(), ,
.
,
Macintosh iPhone:
function supports_h264_baseline_video() {
if (!supports_video()) { return false; }
var v= document.createElement("video");
return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}

supports_video()
, HTML5-:
if (!supports_video()) { return false; }

HTML5-, , , .
<video> ( ,
) canPlayType().
, supports_
video().
var v= document.createElement("video");
return v.canPlayType(video/mp4; codecs=avc1.42E01E, mp4a.40.2);

, , .
, ,
H.264 AAC
MPEG-41.
canPlayType() true false. ,
, :
1

, 5. , (http://diveintomark.org/
tag/give). . .

"probably" , ;
"maybe" , , , -

;
"" ( ) ,

.
,
Mozilla Firefox , .
. , canPlayType()
, .
, Theora Vorbis Ogg-:
function supports_ogg_theora_video() {
if (!supports_video()) { return false; }
var v= document.createElement("video");
return v.canPlayType(video/ogg; codecs=theora, vorbis);
}

WebM (http://www.webmproject.org), , . ,
Chrome, Firefox Opera. WebM-
:
function supports_webm_video() {
if (!supports_video()) { return false; }
var v= document.createElement("video");
return v.canPlayType(video/webm; codecs=vp8, vorbis);
}

, Modernizr
( , WebM
):
if (Modernizr.video) {
// , ?
if (Modernizr.video.ogg) {
// Ogg Theora + Vorbis Ogg-
} else if (Modernizr.video.h264){
// H.264 + AAC MP4-
}
}

HTML5 (http://dev.w3.org/html5/webstorage/)
,
. cookies,

2. HTML5

. Cookies , -,
. HTML5 ,
JavaScript.

:
HTML5? ?
: , :
HTML5. :

HTML5,
HTML5 ,
. , , ,
,
.

HTML5 1 (. ). HTML5 , window

localStorage. ,
, .
:
function supports_local_storage() {
return (localStorage in window) && window[localStorage] !== null;
}

, Modernizr:
if (Modernizr.localstorage) {
// !
} else {
// ,
// Gears
}

, JavaScript . Modernizr
localstorage ( ), DOM- window.localStorage
( S).

:
HTML5? -
?
:
, -

.
,

, , . (http://bit.ly/9YyPpj).

(http://bit.ly/9jheof) HTML5 JavaScript . ,
( , ,
).
, - ,
:
, , .
1 (. ). (Web Worker API),
window Worker. ,
API , .
:
function supports_web_workers() {
return !!window.Worker;
}

, Modernizr (. Modernizr: HTML5- ):

if (Modernizr.webworkers) {
// !
} else {
// ,
// Gears
}

, JavaScript . Modernizr
webworkers ( ), DOM- window.Worker (
W).

-
-, , : , , , . (.
.) -, Gmail
Google Docs, . HTML5
-, , ,
Google.
. , , - ,

2. HTML5

, .
: HTML, JavaScript, (. ). ,
, : , ,
, . , .
1 (. ). , window applica
tionCache. ,
, . :
function supports_offline() {
return !!window.applicationCache;
}

, Modernizr:
if (Modernizr.applicationcache) {
// !
} else {
// ,
// Gears
}

, JavaScript . Modernizr
applicationcache ( ), DOM- window.
applicationCache ( C).

,
. : IP-, , ,
, GPS-,
.

: HTML5?
?
: . ,

(http://www.w3.org/2008/geolocation/),
HTML5.
:
.

1 (.
). API , navigator geolocation.
, ,
. :
function supports_geolocation() {
return !!navigator.geolocation;
}

, Modernizr (.Modernizr: HTML5- ):

if (Modernizr.geolocation) {
// !
} else {
// ,
// Gears
}

API ,
. Gears (http://tools.google.com/gears/) Google
, Windows, Mac, Linux, Windows Mobile Android,
, . , Gears API . navigator.geolocation, .
API ,
BlackBerry, Nokia, Palm OMTP BONDI.
, 6.

- , ? , :
<form>, <input type="text">, ,
<input type="password"> <input
type="submit">.
, . HTML5
, .
<input type="search"> (http://bit.ly/9mQt5C).
<input type="number"> (http://bit.ly/aPZHjD).
<input type="range"> (http://bit.ly/dmLiRr).
<input type="color"> (http://bit.ly/bwRcMO).
<input type="tel"> (http://bit.ly/amkWLq).
<input type="url"> - (http://bit.ly/cjKb3a).

2. HTML5

<input type="email"> (http://bit.ly/aaDrgS).

<input type="date"> (http://bit.ly/c8hL58).
<input type="month"> (http://bit.ly/cDgHRI).
<input type="week"> (http://bit.ly/bR3r58).
<input type="time"> (http://bit.ly/bfMCMn).
<input type="datetime"> (http://
bit.ly/c46zVW).
<input type="datetime-local"> (http://bit.ly/aziNkE).

4 (. ).
<input>:
var i= document.createElement("input");

"text";
.
type <input> ,
, , :
i.setAttribute("type", "color");

,
type . ,
"text":
return i.type !== "text";

13 ,
HTML5- , , , Modernizr. 13
Modernizr <input>.
Modernizr.inputtypes 13 (HTML5- ) 13 ( true, false):
if (!Modernizr.inputtypes.date) {
// <input type="date"> ,
// Dojo jQueryUI
}

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

2 (. ). , DOM-, <input>, placeholder ( HTML- ).

, . :
function supports_input_placeholder() {
var i= document.createElement('input');
return placeholder in i;
}

, Modernizr (.Modernizr: HTML5- ):

if (Modernizr.input.placeholder) {
// !
} else {
// ,
//
}

JavaScript
-. , Google.com
, , .
, . ,
, ;
. :
, ,
, . ,
, .

JavaScript. , , .
HTML5 autofocus,
-. , .
, HTML-, , . , , , .
2 (. ). , DOM-, <input>,
autofocus ( HTML- ). ,
. :

2. HTML5

function supports_input_autofocus() {
var i= document.createElement('input');
return autofocus in i;
}

, Modernizr
(.Modernizr: HTML5-
):
if (Modernizr.input.autofocus) {
// !
} else {
// ,
//
}

(http://bit.ly/ckt9Rj) -. , , ,
Creative
Commons. 10,
. , HTML5-
vCard . ,
.
HTML5 HTML
( ) DOM- (
). - ,

. , , . DOM, , DOM API .
API HTML5- 1 (. ).
API, window getItems().
, ,
. :
function supports_microdata_api() {
return !!document.getItems;
}

, ,
Modernizr. , Modernizr
API , - .

:
<canvas> (http://bit.ly/9JHzOf);
<video> (http://bit.ly/a3kpiq);
(http://bit.ly/akweH4);
<input placeholder> (http://bit.ly/caGl8N);
<input autofocus> (http://bit.ly/db1Fj4);
HTML5 (http://dev.w3.org/html5/webstorage/);
(http://bit.ly/9jheof);
- (http://bit.ly/d8ZgzX);
API (http://www.w3.org/TR/geolocation-API/).

JavaScript-:
Modernizr (http://www.modernizr.com/) HTML5;
geo.js (http://code.google.com/p/geo-location-javascript/) API .
:
Video for Everybody! (http://camendesign.com/code/video_for_everybody);
(http://diveintomark.org/
tag/give);
(http://wiki.whatwg.org/wiki/Video_type_parameters);
.

- HTML
. ,
, ,
. , .
http://diveintohtml5.org/examples/blogoriginal.html. , , , . .
.

, :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

().
. Internet Explorer5 Macintosh Microsoft .
,
. , (
), , .
(2000), Netscape4 Internet Explorer4.
, IE5/Mac.
Microsoft . IE5/Mac ,
, , ,
<html>. , , . -

IE5/Mac , .
,
<html> .
.
: (quirks mode) (standards
mode). - ,
. Mozilla 1.1 , ,
,
. , Mozilla ,
.
(almost standards mode) , , .
(Henri Sivonen) (http://hsivonen.iki.fi/doctype/) .

, , 1990-.

,
(, , ,
). HTML5 (no quirks mode).

Firefox, Safari, Google Chrome, Opera ( 7.5) IE8
, CSS2,
. HTML5 (limited
quirks mode).

. - ,
. IE5/Mac , ( ) . , ,
. , ,
, , 73,
. , -
. (!) IE8 .
, : http://hsivonen.iki.fi/
doctype/ie8-mode.png. : .

? , , :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3. ?

15, . . , ,
HTML5. .
:
<!DOCTYPE html>

, 15. ,
.

HTML-.
- , -
, , ,
, .

. HTML

, .

!

HTML- (), . .
, ,
,
(: , , ,
). , , , ,
, . HTML HTML ( <html>).
, (http://diveintohtml5.
org/examples/blog-original.html), :
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en">

. ,
HTML5. HTML5
, ; .
, -, xmlns XHTML1.0. , XHTML, http://www.w3.org/1999/xhtml. HTML5;

HEAD

. xmlns , HTML5,
.
xmlns :
<html lang="en" xml:lang="en">

, lang xml:lang. HTML-1. ?

XHTML. HTML5 lang,
xml:lang, ,
.
XHTML ( ) HTML- , "xml:lang", .
, xml:lang lang,
( ASCII ).
"xml:lang"
.

? , !
:
<html lang="en">

HEAD
<html> <head>. <head>
, , (, , <body>). <head>
HTML5 - , , ,
. -:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Weblog</title>
<link rel="stylesheet" type="text/css" href="style-original.css" />
<link rel="alternate" type="application/atom+xml"
title="My Weblog feed"
href="/feed/" />
<link rel="search" type="application/opensearchdescription+xml"
title="My Weblog search"
href="opensearch.xml" />
1

en (English). ru.
http://www.w3.org/International/
questions/qa-choosing-language-tags.

3. ?

<link rel="shortcut icon" href="/favicon.ico" />

</head>

<meta>.

, -,
, .
, . , -
, .
.
(, , ), . , , , , .
. , ,
. , ,
. , . , ( , - ), .
, -
? ,
. HTTP, , ,
:
Content-Type: text/html; charset="utf-8"

: - , HTML UTF-8.
,
- HTTP-. , , , http://www.blogger.com, , Google. HTML4
.
:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

: - ,
UTF-8.
HTML5 .
HTTP, ( ) <meta>.
HTTP ,
<meta>. HTML5 ; :
<meta charset="utf-8" />

HEAD

.
, (http://lists.w3.org/Archives/Public/
public-html/2007Jul/0550.html):
<meta charset=""> ,
, , :

<META HTTP-EQUIV=Content-Type CONTENT=text/html; charset=ISO-8859-1>

<meta charset> (http://simon.html5.org/

test/html/parsing/encoding), , ,
.

:
. -
?

: , , ,
HTML-! ,
(http://code.
google.com/p/doctype/wiki/ArticleUtf7).

. ,
, -, ,
. , , HTML-.
HTTP- Content-Type, <meta
http-equiv>, <meta charset>. , , . .

(<ahref>) .
,
. , , :
... , CSS-, -

;
... RSS- , ,

;
... ;
... , PDF;
... , , ..

HTML5 (http://bit.
ly/d2cbiR):

3. ?
LINK .
, , . [...]
, .

(rel="stylesheet") , .
, :
. <link> <head>. rel
<a>, . HTML5 <area>, ,
HTML4 .
(http://bit.ly/a3nsqi) , rel.

: ?
: ;

. ,
WHAT rel (http://wiki.whatwg.org/wiki/RelExtensions)
(http://bit.ly/
da3pse).

rel=stylesheet
:
<link rel="stylesheet" href="style-original.css" type="text/css" />

, , .
<link rel="stylesheet"> CSS.
HTML5 : type,

CSS.
:
<link rel="stylesheet" href="style-original.css" />

( -
, type).

rel=alternate
-:
<link rel="alternate"
type="application/atom+xml"
title="My Weblog feed"
href="/feed/" />

HEAD

. <link
rel="alternate"> type, RSS
Atom, . , Google Reader, ,
, .
:
, URL-
(, rel="stylesheet", type . !).
HTML4 rel="alternate"
. HTML5
-. , rel="alternate" type="application/atom+xml"
Atom, .
rel="alternate" type,
, PDF.
HTML5, , : -.
HTML4
rel="alternate" lang, .
(Errata) HTML4 , ,
. , rel="alternate". ,
HTML5, ,
hreflang (,
HTML4,
W3C HTML).

HTML5
.
rel="archives" (http://bit.ly/clzlyG) , ,
, , ,
.
rel="archives".
rel="author" .
, , .
.
rel="external" (http://bit.ly/dBVO09) , ,
, .
, , WordPress, , .
rel="start", rel="prev" rel="next" (http://www.w3.org/TR/html401/types.html#typelinks) , ,
,
.
rel="next". rel="prev" rel="previous",

3. ?

rel="start" rel="begin" rel="first", rel="last" rel="end". ,

-
rel="up".
HTML5 rel="first" (
rel="start"
). HTML4, rel="prev" rel="next" (, , rel="previous"). rel="last" ( ) rel="up".
rel="up", .
, .
rel="up" .
rel="icon" (http://bit.ly/diAJUP) rel="stylesheet"
(http://code.google.com/webstats/2005-12/linkrels.html). , , :
<link rel="shortcut icon" href="/favicon.ico">

. favicon.ico URL, , . HTML5

: rel="icon" sizes, , (http://bit.ly/diAJUP).
rel="license" (http://bit.ly/9n9Xfv) . , , , , .
rel="nofollow" (http://bit.ly/cGjSPi) , ,
,
. rel="nofollow" Google; . , PageRank
"nofollow", .
, rel="nofollow" . -
rel="nofollow" , .
rel="noreferrer" (http://bit.ly/cQMSJg) , . ,
WebKit,
, - rel="noreferrer"

HEAD

Safari, Google Chrome WebKit.

rel="noreferrer" , http://wearehugh.com/
public/2009/04/rel-noreferrer.html.
rel="pingback" (http://bit.ly/cIAGXB) -. (http://hixie.ch/specs/pingback/pingback-1.0),
. [...] ,
, , .
, WordPress,
, .
rel="prefetch" (http://bit.ly/9o0nMS) , , ,
. , -
, :
<link rel="prefetch" href="<emphasis>URL- </
emphasis>">. , Firefox Google CNN, prefetch. Mozilla
Firefox rel="prefetch".
rel="search" (http://bit.ly/aApkaP) , ,

,
. rel="search" ,
OpenSearch, , URL- . OpenSearch rel="search", OpenSearch-, Internet Explorer
( 7) Mozilla Firefox (2).
rel="sidebar" (http://bit.ly/azTA9D) , , , ( )
, . Opera Mozilla
Firefox : , , ,
, (sidebar,
Opera panel). Internet Explorer, Safari Chrome
rel="sidebar" .
rel="sidebar" http://wearehugh.
com/public/2009/04/rel-sidebar.html.
rel="tag" (http://bit.ly/9bYlfa) , , ,
. (, )
rel Technorati, .
, Technorati (, :
,

3. ?

!). rel="tag".
,
, rel="tag".
,
.

HTML5
HTML5 .
. , HTML5.
<section> . -

, , , .
, ,
. : , , .
<nav> ,
, . <nav>

; . ,
: , , <footer>,
<nav> .
<article> , , , -

, (, ).
, , , , ,
.
<aside> , -

. .
<aside> ,
, (), <nav>
.
<hgroup> . <hgroup> <h1><h6>, :

, , , .
<header> .

. , , <header>

<h1><h6> <hgroup>. , <header>

, (-).
<footer> : . , , ..
, .
, , , ,
, ,
.
<time> 24-
,
.
<mark> - , , , .
, , . .

,

, HTML-
. , Mozilla Firefox nsElementTable.cpp (http://mxr.mozilla.org/seamonkey/source/parser/
htmlparser/src/nsElementTable.cpp). , , .
.

?
, , <p>
, <blockquote> ,
<h1> ,
.
DOM?
nsElementTable.cpp Mozilla Firefox
, -

. <p><p>
,
: -
( ).
<p><span>, <span> ,
( Firefox) <p> ,
<span> . , DOM-
<span>
<p>.

- (
).
Internet Explorer.
. - ,

3. ?

, CSS- .
Internet Explorer 6, 7 8 . , :
<style type="text/css">
article { display: block; border: 1px solid red }
</style>
...
<article>
<h1> 1</h1>
<p> <span> </span>.</p>
</article>

Internet Explorer ( IE8 ) ARTICLE

. , Internet Explorer9 -, Microsoft , 9-
( ).
DOM-. Internet Explorer
. IE
, DOM ,
, -, , .
. DOM-,
HTML5:
article
|
+h1 ( article)
| |
| + " "
|
+p( article, h1)
|
+ " "
|
+span
| |
| + " "
|
+ "."

DOM-, Internet Explorer:

article ( )
h1 ( article)
|
+ " "
p( h1)
1

Initech , . . .

|
+ " "
|
+span
| |
| + " "
|
+ "."

.
JavaScript <article>, , , Internet Explorer <article> . DOM- , ( ), IE
. :
<html>
<head>
<style>
article { display: block; border: 1px solid red }
</style>
<script>document.createElement(article);</script>
</head>
<body>
<article>
<h1> </h1>
<p> <span> </span>.</p>
</article>
</body>
</html>

Internet Explorer,
IE6.
, HTML5.
DOM, , ,
HTML5. (Remy
Sharp) (http://remysharp.com/2009/01/07/html5-enabling-script). , :

3. ?

. Internet Explorer : Internet Explorer 8-,

. , HTML-. Internet Explorer 8- , , .
JavaScript, , . e "abbr", "article" ..
( HTML5-) document.createElement() .
, DOM.
Internet Explorer : , .
: . <head>, .
, Internet Explorer . , :
Internet Explorer DOM-. .

Google Code (http://code.google.com/p/html5shiv/).
MIT ,
. , Google:
<head>
<meta charset="utf-8" />
<title> </title>

</head>

HTML5.

, ,
1:
<div id="header">
<h1> </h1>
1

- .
. .

<pclass="tagline"> .</p>
</div>
...
<div class="entry">
<h2> </h2>
</div>
...
<div class="entry">
<h2> !</h2>
</div>

. , , HTML5. HTML5, , .
<div id="header">. ,
. <div> , id (, , ,
id).
<div id="preved">
.
HTML5 <header>. <header>
. :
<header>
<h1> </h1>
<pclass="tagline"> .</p>
...
</header>

, ? , .
-, , ( ) .
: , , .
, <h1> <h2>, . , , .
, , . - (http://gsnedders.html5.org/
outliner/) (http://chrispederick.com/work/web-developer/), .
HTML4 <h1><h6>. - :
(h1)
|
+ (h2)
|
+ ! (h2)

3. ?

, . <h2>,
:
(h1)
|
+ . (h2)
|
+ (h2)
|
+ ! (h2)

. : , . <h2>, <h3>? ,
:
(h1)
|
+ . (h2)
|
+ (h3)
|
+ ! (h3)

- ,
, .
: HTML4 , , , . ,
.
<p class="tagline">
.
, HTML5, <hgroup>.
. , , . :
<header>
<hgroup>
<h1> </h1>
<h2> .</h2>
</hgroup>
...
</header>
...
<div class="entry">
<h2> </h2>
</div>
...
<div class="entry">

:
(h1 hgroup)
|
+ (h2)
|
+ ! (h2)

, , HTML5 Outliner.

, :
<div class="entry">
<pclass="post-date">22 2009 .</p>
<h2>
<ahref="#"
rel="bookmark"
title=" ">

</a>
</h2>
...
</div>

HTML5. HTML5 <article>, ( )

:
<article>
<pclass="post-date">22 2009 .</p>
<h2>
<ahref="#"
rel="bookmark"
title=" ">

</a>
</h2>
...
</article>

, ,
, :
<article>
<header>
<pclass="post-date">22 2009 .</p>

3. ?

? <h2> <h1> <header>. <header>,

. ( ). , <h1>?
? . , .
HTML 4 <h1><h6>.
- ,
<h1>.
HTML5 . , <article> , .
HTML5 <h1>.
, , , .
, - :
- , ( ) -. : HTML-,
. ,
; ?
, , : HTML-. , -,
,
.
HTML 4 , <h1> <h6>: .
, , , ,
( ), .
HTML5 , , -.
, :
<article>
<header>
<h1> </h1>
</header>
<p>Lorem ipsum ( -"")</p>
</article>

,
. <h1> , <article>. <article> , <h1> ;
,
, , .

, . ,
<h1> <article>,
(
<h1><h6>).

, . -
, HTML5
Outliner,
.

, ? , ,
, , . - :
<div class="entry">
<pclass=post-date>22 2009 .</p>
<h2> </h2>
</div>

, ? ,
class. HTML5 -
, - .
HTML5 <time>:
<time datetime="2009-10-22" pubdate>22 2009 .</time>

<time> :
;
, -;
pubdate.
datetime ,
. --:
<time datetime="2009-10-22" pubdate>22 2009 .</time>

, T,
24- (::) , ,
:

3. ?

<time datetime="2009-10-22T13:59:47-04:00" pubdate>

22 2009 . 13:59 EDT1
</time>

. HTML5
date
time.
, , , , <time> </time>, .
: ( datetime),
<time> . HTML5
:
<time datetime="2009-10-22"> </time>

:
<time datetime="2009-10-22"></time>

pubdate. ,
. :
<time datetime="2009-10-22" pubdate>22 2009 .</time>

, () :
<time datetime="2009-10-22" pubdate=pubdate>22 2009 .</time>

pubdate . <time> <article>, pubdate

. <time> <article>,
pubdate .
HTML5
:
<article>
<header>
<time datetime="2009-10-22" pubdate>
22 2009 .
</time>
<h1>
<ahref="#"
rel="bookmark"
title=" ">

</a>
</h1>
</header>
<p>Lorem ipsum ( -"")</p>
</article>
1

EDT (Eastern Daylight Time) . .

. ,
CNN.com
: , , .. Google , Google: , ,
. , ,
: , , .
:
<div id="nav">
<ul>
<li><ahref="#"> </a></li>
<li><ahref="#"></a></li>
<li><ahref="#"></a></li>
<li><ahref="#"> </a></li>
</ul>
</div>

, , HTML5. , .
( ) ,
.
? (http://diveintoaccessibility.org). . , , . , -,
, . : ,
, ,
, -.
( ) . , , ,
( ) ,
. , , .
, <div id="nav"> ,
. HTML5
<nav>:
<nav>
<ul>
<li><ahref="#"> </a></li>
<li><ahref="#"></a></li>

3. ?

: skip- (skip links)
<nav>? HTML5?
: Skip-
. ,
- , skip . ,
,
http://www.webaim.org/techniques/skipnav.

<nav>, skip- : - ,
<nav>. , ,

HTML5-, <nav>-
skip-.

.
, . :
<div id="footer">
<p>§</p>
<p>© 2001–9 <ahref="#"> </a></p>
</div>

HTML5, , HTML5
<footer>:
<footer>
<p>§</p>
<p>© 2001–9 <ahref="#"> </a></p>
</footer>

<footer>? , , - <div id="footer">.

. HTML5, :
, , :
, , ..
:
. ,
, , .
CNN ,
, , -

, , .
<footer>.
Google, , , Google, .
<footer>.
(http://diveintomark.org) <footer>.
, <nav>,
,
.
(http://ui-patterns.com/pattern/FatFooter)
. , , W3C (http://www.w3.org). : Navigation (),
Contact W3C ( W3C) W3C Updates ( W3C). ( ):
<div id="w3c_footer">
<div class="w3c_footer-nav">
<h3></h3>
<ul>
<li><ahref="/"> </a></li>
<li><ahref="/standards/"></a></li>
<li><ahref="/participate/"></a></li>
<li><ahref="/Consortium/membership"></a></li>
<li><ahref="/Consortium/"></a></li>
</ul>
</div>
<div class="w3c_footer-nav">
<h3> W3C</h3>
<ul>
<li><ahref="/Consortium/contact"></a></li>
<li><ahref="/Help/"> </a></li>
<li><ahref="/Consortium/sup"> </a></li>
<li><ahref="/Consortium/siteindex"> </a></li>
</ul>
</div>
<div class="w3c_footer-nav">
<h3> W3C</h3>
<ul>
<li><ahref="http://twitter.com/W3C"> Twitter</a></li>
<li><ahref="http://identi.ca/w3c"> Identi.ca</a></li>
</ul>
</div>
<pclass="copyright">Copyright 2009 W3C</p>
</div>

HTML5 , ,
.
1. <div id="w3c_footer">
<footer>.

3. ?

2. <div class="w3c_footer-nav"> <nav>,

<section>.
3. <h3> <h1>, -

(
<article>, <nav>: . ).
:
<footer>
<nav>
<h1></h1>
<ul>
<li><ahref="/"> </a></li>
<li><ahref="/standards/"></a></li>
<li><ahref="/participate/"></a></li>
<li><ahref="/Consortium/membership"></a></li>
<li><ahref="/Consortium/"></a></li>
</ul>
</nav>
<nav>
<h1> W3C</h1>
<ul>
<li><ahref="/Consortium/contact"></a></li>
<li><ahref="/Help/"> </a></li>
<li><ahref="/Consortium/sup"> </a></li>
<li><ahref="/Consortium/siteindex"> </a></li>
</ul>
</nav>
<section>
<h1> W3C</h1>
<ul>
<li><ahref="http://twitter.com/W3C"> Twitter</a></li>
<li><ahref="http://identi.ca/w3c"> Identi.ca</a></li>
</ul>
</section>
<pclass="copyright">Copyright 2009 W3C</p>
</footer>

-:
( HTML 4): http://diveintohtml5.org/examples/blog-original.html;
(HTML5-): http://diveintohtml5.org/examples/blog-html5.html.

:
,
Unicode (http://www.joelonsoftware.com/articles/Unicode.
html) (Joel Spolsky);

Unicode (http://www.tbray.org/ongoing/When/200x/2003/04/06/Unicode),
(http://www.tbray.org/ongoing/When/200x/2003/04/13/
Strings), (http://www.tbray.org/ongoing/When/200x/2003/04/26/
UTF) (Tim Bray).

, HTML5- Internet Explorer:

, IE (http://xopus.
com/devblog/2008/style-unknown-elements.html) (Sjoerd
Visscher);
HTML5 shiv (http://ejohn.org/blog/html5-shiv/) (John
Resig);
, HTML5 (http://remysharp.com/2009/01/07/
html5-enabling-script/), (Remy Sharp).
: (http://hsivonen.iki.fi/doctype/) .
.
, , .
(X)HTML5 http://html5.validator.nu.

()

HTML5 <canvas> (http://bit.ly/9JHzOf)

, , .
, JavaScript.

, .4.1.
4.1. ,
IE
7.0+
*

Firefox
3.0+

Safari
3.0+

Chrome
3.0+

Opera
10.0+

iPhone
1.0+

Android
1.0+

Internet Explorer ExplorerCanvas.

? , . <canvas> . :
<canvas width="300" height="225"></canvas>

.4.1. , .
<canvas>.
DOM-, . id, JavaScript
.
id :
<canvas id="a" width="300" height="225"></canvas>

<canvas> DOM:
var a_canvas = document.getElementById("a");

.4.1.

.4.2 , .
4.2.
IE
7.0+
*

Firefox
3.0+

Safari
3.0+

Chrome
3.0+

Opera
10.0+

iPhone
1.0+

Android
1.0+

Internet Explorer ExplorerCanvas.

. - ?
onclick , , ,
(
http://diveintohtml5.org/canvas.html):
function draw_b() {
var b_canvas = document.getElementById("b");
var b_context = b_canvas.getContext("2d");
b_context.fillRect(50, 25, 150, 100);
}

<canvas> DOM. . ,
. <canvas>
DOM ( document.getElementById() - ), getContext(), "2d":
function draw_b() {
var b_canvas = document.getElementById("b");
var b_context = b_canvas.getContext(2d);
b_context.fillRect(50, 25, 150, 100);
}

4. ()

: ?
: . API -

, . HTML5 :
, ,
3d.

, <canvas> .
, . , .
fillStyle CSS-, ( ). fillStyle . .
fillRect(x, y, width, height)
.
strokeStyle, fillStyle, CSS-, . .
strokeRect(x, y, width, height) . strokeRect .
clearRect(x, y, width, height) .
, - .

: ?
: .
<canvas>, ,
. ,

, ,
:
var b_canvas = document.getElement
ById("b");
b_canvas.width = b_canvas.width;

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

fillRect(),
. ,
. (50, 25),
(150) (100).
.

, (0, 0)
. (x) , (y)
.
.4.2 <canvas>.
:
;
;
;
, ;
;
;
x;
y;
(0, 0) ;
(500, 375) ;
.

.4.2.

, .
<canvas>.
, id:
<canvas id="c" width="500" height="375"></canvas>

4. ()

DOM <canvas> :
var c_canvas = document.getElementById("c");
var context = c_canvas.getContext("2d");

.4.3 , .
4.3.
IE
7.0+
*

Firefox
3.0+

Safari
3.0+

Chrome
3.0+

Opera
10.0+

iPhone
1.0+

Android
1.0+

Internet Explorer ExplorerCanvas.

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

. , :
context.strokeStyle = "#eee";
context.stroke();

stroke() .
, moveTo() lineTo(), -

. strokeStyle. .4.3.

.4.3.

: xy 0,5, 0?
:
.
(0, 1, 2...) . -

,

.
1 , 0,5
,
.

.
( ,
). : ,
-. :
context.beginPath();
context.moveTo(0, 40);
context.lineTo(240, 40);
context.moveTo(260, 40);
context.lineTo(500, 40);
context.moveTo(495, 35);
context.lineTo(500, 40);
context.lineTo(495, 45);

. ,
, .
:

72
context.moveTo(60,
context.lineTo(60,
context.moveTo(60,
context.lineTo(60,
context.moveTo(65,
context.lineTo(60,
context.lineTo(55,

4. ()

0);
153);
173);
375);
370);
375);
370);

, , strokeStyle
- ( fillStyle
strokeStyle ). ,
. -, , strokeStyle , :
context.strokeStyle = "#000";
context.stroke();

.4.4.

.4.4. ( )

, (.4.4).
-,
, CSS-:
, , ( ,
). ,
.

4.4. ,
IE*
7.0+
*

Firefox**
3.0+

Safari
3.0+

Chrome
3.0+

Opera
10.0+

iPhone
1.0+

Android
1.0+

Internet Explorer ExplorerCanvas.

Mozilla Firefox3.0 .

(. )
:
font , CSS-: , ,
, , ;
textAlign , CSS- text-align,
; : start, end, left, right,
center;
textBaseline ;
: top, hanging, middle, alphabetic, ideographic,
bottom.
textBaseline , (
, , ,
Unicode, ). HTML5
1:
em- .
. , ; , ,
, f ; ,
. ,
em- (.4.5),
.

.4.5.

, ,
top, middle bottom textBaseline.
1

http://bit.ly/aHCdDO. . .

4. ()

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

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

: ?
: . <canvas>,
HTML- ,

. context.font
, 1.5em 150%,
,
<canvas>.

, , ,
y=5. , , textBaseline
top -
, :
context.textBaseline = "top";
context.fillText("( 0 , 0 )", 8, 5);

. , , ,
, ,
(492, 370),
. . textAlign right textBaseline bottom, fillText(), , :
context.textAlign = "right";
context.textBaseline = "bottom";
context.fillText("( 500 , 375 )", 492, 370);

.4.6.
?
, (. ):
context.fillRect(0, 0, 3, 3);
context.fillRect(497, 372, 3, 3);

! .4.7.

.4.6.

.4.7. ,

.4.5 , .
4.5.

*

IE*
7.0+

Firefox
3.0+

Safari
3.0+

Chrome
3.0+

Opera
10.0+

iPhone
1.0+

Android
1.0+

3.0+

10.0+

1.0+

Internet Explorer ExplorerCanvas.

4. ()

(. ),
(. ).
. ,
. .4.8.
, :
<canvas id="d" width="300" height="225"></canvas>

<canvas> :
var d_canvas = document.getElementById("d");
var context = d_canvas.getContext("2d");

.4.8.

, .
.
HTML5- .
createLinearGradient(x0, y0, x1, y1)
(x0, y0) (x1, y1).
createRadialGradient(x0, y0, r0, x1, y1, r1) -

, .
(x0, y0) r0.
: (x1, y1) r1.
. ;
300, :
var my_gradient = context.createLinearGradient(0, 0, 300, 0);

( ) 0, .
-, .
,

. , ,
0 1.
:
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");

, :
. , fillStyle , :
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);

, .4.8.
? ( ), 0 :
var my_gradient = context.createLinearGradient(0, 0, 0, 225);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);

.4.9.
, :
var my_gradient = context.createLinearGradient(0, 0, 300, 225);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);

.4.10.

.4.9.

.4.10.

4. ()

.4.6 .
4.6. ,
IE
7.0+
*

Firefox
3.0+

Safari
3.0+

Chrome
3.0+

Opera
10.0+

iPhone
1.0+

Android
1.0+

Internet Explorer ExplorerCanvas.

.4.11 , <img>.
.4.12 , HTML5-.

.4.11. <img>

.4.12. <canvas>

:
drawImage(image, dx, dy) ;
(dx, dy) , (0, 0),
;
drawImage(image, dx, dy, dw, dh) , , dw dh,
(dx, dy);
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) ,
(sx, sy, sw, sh), (dw, dh)
(dx, dy).
drawImage() HTML5 (http://
bit.ly/9WTZAp):
(source) [ ],
(sx, sy), (sx+sw, sy), (sx+sw, sy+sh), (sx, sy+sh).
(destination) [ ],
(dx, dy), (dx+dw, dy), (dx+dw, dy+dh), (dx, dy+dh).

.4.13.
, ,
<img> JavaScript-
Image. , , , .

.4.13. drawImage()

<img>
window.onload:
<img id=cat src="images/cat.png" alt=" " width="177" height="113">
<canvas id="e" width="177" height="113"></canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("e");
var context = canvas.getContext("2d");
var cat = document.getElementById("cat");
context.drawImage(cat, 0, 0);
};
</script>

JavaScript, Image.onload:
<canvas id="e" width="177" height="113"></canvas>
<script>
var canvas = document.getElementById("e");
var context = canvas.getContext("2d");
var cat = new Image();

4. ()

cat.src = "images/cat.png";
cat.onload = function() {
context.drawImage(cat, 0, 0);
};
</script>

drawImage()
. .4.14 ,

.

.4.14. !

, :
cat.onload = function() {
for (var x= 0, y= 0;
x< 500 && y< 375;
x+= 50, y+= 37) {
context.drawImage(cat, x, y, 88, 56);
}
};

:
? ( )
- <img> CSS-?
10 <img>.
, ? ,
(. ). (. ) , : .

IE?

, , drawImage().

IE?
Internet Explorer 8 (
) API . IE, , Microsoft VML,
<canvas>. excanvas.js.
ExplorerCanvas (http://code.google.com/p/explorercanvas/), excanvas.js,
JavaScript- , Apache. API Internet Explorer, ,
<script>:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>

</head>
<body>

</body>
</html>

, Internet Explorer : Internet

Explorer , .
, HTML. Internet Explorer
excanvas.js, (
). API .
excanvas.js <head>,
Internet Explorer .
<canvas> , JavaScript. , , , , .
. excanvas.js.
(. ) .
.
.

4. ()

.
, - -

.
. , , ,
JavaScript- Internet Explorer , . IE
,
JavaScript-,
. ,
.., .
excanvas.js , .
- excanvas.js HTML-, ExplorerCanvas
, , , , Internet
Explorer . ,
(faux-canvas) , .
<canvas>,
, Internet Explorer :
( ).
onload. , : onload , ExplorerCanvas .

(Halma) ,
. ( )
99.
33 .
, 33 .
.
, . , .
,
( , : , - -;
: , - -).
, .
, , , ,
,

. ,
, , .
.4.15.
(http://diveintohtml5.org/examples/canvas-halma.html)
.
? , .
(. http://diveintohtml5.org/examples/
halma.js). ,
, ,
<canvas>.

.4.15.

:
:
gCanvasElement.width = kPixelWidth;
gCanvasElement.height = kPixelHeight;
gDrawingContext = gCanvasElement.getContext("2d");

4. ()

, :
<canvas> , :
gCanvasElement.addEventListener(click, halmaOnClick, false);

, halmaOnClick() , - , .
MouseEvent
:
function halmaOnClick(e) {
var cell = getCursorPosition(e);
// the rest of this is just gameplay logic
for (var i= 0; i< gNumPieces; i++) {
if ((gPieces[i].row == cell.row) &&
(gPieces[i].column == cell.column)) {
clickOnPiece(i);
return;
}
}
clickOnEmptyCell(cell);
}

MouseEvent ,
. ,
. ,
. ,
-:
function getCursorPosition(e) {
var x;
var y;
if (e.pageX || e.pageY) {
x= e.pageX;
y= e.pageY;
}
else {
x= e.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y= e.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}

xy, , HTML-.
, :
x-= gCanvasElement.offsetLeft;
y-= gCanvasElement.offsetTop;

x y,
(. ). , xy
0, ,
.
, ,
:
var cell = new Cell(Math.floor(y/kPieceWidth),
Math.floor(x/kPieceHeight));
return cell;
}

, . , , -
. : .
.
,
. ,
: , ( ). -
, ( -),
: , , .
.
, :
gDrawingContext.clearRect(0, 0, kPixelWidth, kPixelHeight);

, , : (. ):
gDrawingContext.beginPath();
/* */
for (var x= 0; x<= kPixelWidth; x+= kPieceWidth) {
gDrawingContext.moveTo(0.5 + x, 0);
gDrawingContext.lineTo(0.5 + x, kPixelHeight);
}
/* */
for (var y= 0; y<= kPixelHeight; y+= kPieceHeight) {
gDrawingContext.moveTo(0, 0.5 + y);
gDrawingContext.lineTo(kPixelWidth, 0.5 + y);
}
/* ! */
gDrawingContext.strokeStyle = "#ccc";
gDrawingContext.stroke();

4. ()

- , . , . , , ,
. p
(piece) row column,
. , ,
(x, y),
, , ,
:
function drawPiece(p, selected) {
var column = p.column;
var row = p.row;
var x= (column * kPieceWidth) + (kPieceWidth/2);
var y= (row * kPieceHeight) + (kPieceHeight/2);
var radius = (kPieceWidth/2) - (kPieceWidth/10);

. (x, y) , ,
. API circle(),
arc(). ? ,
. arc()
(x, y) , ,
(), (false
, true ). JavaScript- Math:
gDrawingContext.beginPath();
gDrawingContext.arc(x, y, radius, 0, Math.PI * 2, false);
gDrawingContext.closePath();

: . arc(), moveTo()
lineTo(), (. ).
strokeStyle stroke():
gDrawingContext.strokeStyle = "#000";
gDrawingContext.stroke();

? ,
:
if (selected) {
gDrawingContext.fillStyle = "#000";
gDrawingContext.fill();
}

, , . , . , ,
.
, , onclick HTML5 .

(https://developer.mozilla.org/en/Canvas_tutorial)

Mozilla -.
HTML5: (http://dev.opera.com/articles/view/html-5-canvas-thebasics/) (Mihai Sucan).
HTML- <canvas>, (http://
www.canvasdemos.com).
<canvas> (http://bit.ly/9JHzOf) HTML5.

,
YouTube.com, , - . HTML5 .
, - ,
: QuickTime, RealPlayer Flash ( YouTube,
, Flash). , ,
. - ,
, .
HTML5 -
<video>. <video> , , , , , . : .
.5.1 ,
<video>.
5.1. <video>
IE9

IE8

IE7

Firefox 3.5

Firefox 3.0

Safari 4

Safari 3

Chrome

Opera

<video> . HTML5, (
, ? ).

, AVI-, MP4- ..
AVI MP4 . ZIP-
1

.

. . .

, , ( : , ).
: ( )
( ). , , ; . , ()
(). : , ,
.. .
. .
MPEG-4 MP4 M4V. MPEG-4
Apple QuickTime ( MOV).
Apple , iTunes MPEG-4.
Flash Video FLV. , ,
Adobe Flash. Flash, , 9.0.60.184 (Flash Player9
3), .
MPEG-4.
Ogg OGV. ,
- open-source-.
Ogg, Ogg- Theora
Vorbis Firefox3.5, Chrome4 Opera10.5.
Linux Ogg ,
Mac Windows QuickTime
DirectShow . Ogg
VLC (http://www.videolan.org/vlc/).
WebM WEBM. , ,
Matroska (). WebM
Google I/O2010.
VP8 Vorbis ( ). WebM-
Chromium, Google Chrome, Mozilla Firefox Opera. Adobe , Flash WebM.
Audio Video Interleave ( )
AVI. AVI Microsoft ,
.
AVI ,
, - ( ) - . AVI
( , ). ,

MEncoder (http://www.mplayerhq.hu/DOCS/HTML/en/encoding-guide.html), AVI-.

,
.
, , , AVI MP4. , , ZIP,
. - .
,
. .
1. , -
, , , , .
2. ,
.
3. , .
,
2 ( ). ,
() .
, . , , , ( ),
. ,
, , .
. ,
, , , . , .
, , , ,
.
, , ,
( ), , (
,
). , , , , ,
, , .
,
: H.264, Theora VP8.

H.264
H.264 (http://ru.wikipedia.org/wiki/H.264) , MPEG-4
part 10, MPEG-4 AVC, MPEG-4 Advanced Video Coding. MPEG, H.264 2003.
( );
( )
. H.264
, ;
, . ,

, ,

.
, , iPhone (Baseline) , AppleTV (Main), Adobe Flash PC
H.264- , (High) .
YouTube, Google, H.264
, Adobe Flash. , YouTube H.264-
: Apple iPhone Google Android. H.264 , Blu-ray. Blu-ray,
,
.
PC- , H.264- (
iPhone Blu-ray), , ,
, H.264 . H.264 . H.264 ,
x264 . H.264
; MPEG
LA. H.264 (. ), MP4, - Apple iTunes, MKV,
.

Theora
Theora (http://ru.wikipedia.org/wiki/Theora),
VP3, Xiph.org. Theora , .
,
VP3, . 2004 ,
Theora,

, 1.0 2008, 1.1 2009.

Theora ;
Ogg. Theora Linux. Mozilla Firefox 3.5
Theora Ogg- (
,
). - Xiph.org
Theora Windows Mac OSX.

VP8
VP8 (http://ru.wikipedia.org/wiki/VP8) On2,
VP3 ( Theora). H.264 , .
2010 Google On2,
VP8
. , , , On2 VP8.

, .
, ,
, .

, 2010 VP8 ,
, ,
Google .

, 1927,
. , , , ( )
. , ,
. - , .
, , .
, , ;
, . , -: ,

. Asterisk PBX1,
, , .
,
; - .
.
,
.
1. .
2. .
3. .
3.
, . ,
. , . , :
, .
, :
. . ? , :
. : , ( ).
, .
. : ,
,
.
?.. , .
. .
,
. ,
. , .
, , ? .
. , ,
, : MP3, AAC, Vorbis.

MPEG-1 Audio Layer3

MPEG-1 Audio Layer 3 (http://ru.wikipedia.org/wiki/MP3)
MP3. MP3, , .
1

-. . .

MP3- .
MP3 . : 64/,
128/, 192/ ( 32 320). ,
,
( 128/ ,
64/, 256/
128/). , MP3, 1991,
, . , , , , .
MP3 .
MP3 MP3- (
), . ,
. MP3- ( , , ) LAME.
MP3 , - MP3
Linux . MP3-
, MP3- . Adobe Flash MP3-, MP3- MP4.

Advanced Audio Coding

Advanced Audio Coding (http://ru.wikipedia.org/wiki/Advanced_Audio_Coding)
AAC. 1997
, Apple
- iTunes Store. AAC-,
iTunes Store, DRM-
Apple FairPlay. iTunes Store AAC-. Apple iTunes
Plus, iTunes Minus - . AAC ; .
AAC ,
MP3 . MP3,
( 320/), AAC
. 48 ,
. AAC MP3 , , H.264,
. AAC-
.
, ( )
-.

Apple, iPod, AppleTV QuickTime, AAC-

MP4. Adobe Flash
Mplayer VLC AAC MP4. FAAC,
( ) mencoder ffmpeg.

Vorbis
Vorbis (http://ru.wikipedia.org/wiki/Vorbis) Ogg Vorbis, , Ogg (. ), , , Vorbis
. Vorbis ,
Linux, Rock box. Mozilla Firefox3.5
Ogg- Vorbis. Android
Vorbis. Vorbis Ogg WebM,
MP4, MKV (
) AVI.
.
Vorbis :
OggConvert, aoTuV, ffmpeg libvorbis. QuickTime Mac OSX DirectShow Windows.

?
, ,
. , , ,
. ! , , , HTML5. , HTML5 <video>.
,
. <video> ;
, . ,
, .
HTML5- .
Mozilla Firefox (3.5 ) Theora
Vorbis Ogg.
Opera (10.5 ) Theora Vorbis
Ogg.
Google Chrome (3.0 ) Theora
Vorbis Ogg, H.264 ( ) AAC
( ) MP4.

9 2010 Google Chrome ,

Chromium, Mozilla Firefox Opera

VP8 Vorbis WebM1.
Safari Mac Windows PC (3.0 ) , QuickTime.
QuickTime,
- . , QuickTime .
Theora, Vorbis Ogg. QuickTime, ,
H.264 ( ) AAC MP4.
, iPhone Google
Android, H.264 ( ) AAC ( ) MP4.
Adobe Flash (9.0.60.184 ) H.264 (
) AAC ( ) MP4.
Internet Explorer9, , -
H.264 AAC MP4.
Internet Explorer8 HTML5-,
Adobe Flash. , Flash HTML5-.
.5.2 .
5.2.
/
Theora+Vorbis+Ogg
H.264+AAC+MP4
WebM

Firefox
3.5+

Safari

3.0+

Chrome
5.0+
5.0+

Opera
10.5+

iPhone

3.0+

Android

2.0+

: WebM
. , ,
.5.3.
5.3.
/
Theora+Vorbis+Ogg
H.264+AAC+MP4
WebM

9.0+*

Firefox
3.5+

4.0+

Safari

3.0+

Chrome
5.0+
5.0+
6.0+

Opera
10.5+

11.0+

iPhone

3.0+

Android

2.0+
**

Internet Explorer9 WebM ,

VP8; Microsoft , IE9
.
**
Google WebM Android ,
.
*

webmproject.org,
, WebM. . .

H.264

,
HTML5,
.
-, .

,
.

, .
1. : Theora Vorbis Ogg-.
2. : WebM-, VP8 Vorbis.
3. : H.264 , AAC
MP4.
4. <video>.
Flash.

H.264
, ,
.
,
. : H.264.
H.264 (.H.264
), ,
MPEG LA. ,
, , H.264 Licensing
Labyrinth, (Tim Siglin)1:
H.264 MPEG LA : -, , . [...]
, ( , ) , ;
( -) , . [...]
.
$2500 AVC-,
AVC-,
AVC- . , , . , ,
, , ( ).
1

http://www.streamingmedia.com/Articles/Editorial/Featured-Articles/The-H.264-LicensingLabyrinth-65403.aspx. . .

5.
. [...]
:
yy $2500 100000499999;
yy $5000 500000999999;
yy $10000 1000000 .
[...] , , ? ,
. , [ ], MPEG LA
-, AVC- ,
. , [ ,] ,
. [...]
- , ,
, , . , , MPEG LA
, 31 2010. , , ,
.

, -, . MPEG LA ,
31 2015. , .

Ogg-
Firefogg1
Firefogg Firefox ,
GPL. Ogg-.
Firefogg Mozilla Firefox 3.5 , . .5.1.
Install Firefogg ( Firefogg). , . Allow () (.5.2).
Firefox. ,
Install Now ( ) (.5.3).
Restart Firefox ( Firefox)
(.5.4).
, Firefogg ,
(.5.5).
, Make web video
( -) (.5.6), ,
Select file ( ) (.5.7).
1

Ogg- Theora Vorbis Ogg. Mozilla Firefox Google Chrome . . .

Ogg- Firefogg

.5.1. Firefogg

.5.2. Firefogg

100

.5.3. Firefogg

.5.4. Firefox

Ogg- Firefogg

.5.5.

.5.6. ?

101

102

.5.7.

Firefogg (.5.8).
Presets () Web-video (-),
.
Encoding range ( ). . (, 30), .
Basic quality and resolution control ( )
, .
Metadata () , ,
: , ..
, , iTunes -;
.
Advanced video encoding controls ( ) , . Firefogg.
, i .

Ogg- Firefogg

103

Advanced audio encoding controls ( -

) .

.5.8. Firefogg

Basic quality and resolution control (

) (.5.9), .
Video quality ( ) 0 ( )
10 ( ). ,
.
, .
Audio quality ( ) 0 ( )
10 ( ). , ,
.
Video codec () Theora.
Audio codec () Vorbis.
Video width ( ) Video height ( ) .

104

, . Firefogg ,
, .

.5.9.

.5.10 , . , Firefogg .
Encode to File (
), (.5.11). Firefogg .
Firefogg (.5.12).
.

Ogg-
ffmpeg2theora
- Ogg-.

, ffmpeg2theora (http://v2v.cc/~j/
ffmpeg2theora/).

Ogg- ffmpeg2theora

.5.10.

.5.11.

105

106

.5.12. ...

ffmpeg2theora Ogg-
, GPL.
Mac OSX, Windows Linux.
,
(DV), .
ffmpeg2theora, . Win
dows . Mac OS X
.
ffmpeg2theora (). , ffmpeg2theora --help,
.
--video-quality Q, Q 0 10.
--audio-quality Q, Q 2 10.
--max_size WH, WH
, (, x, ). ffmpeg2theora ,
, ,

H.264- HandBrake

107

WH. , 720480
--max_size 320240, 320 213 .
,
:
you@localhost$ ffmpeg2theora --videoquality 5
--audioquality 1
--max_size 320x240
pr6.dv

OGV ,
. , ffmpeg2theora
--output=/___.

H.264-
HandBrake1
(. H.264 ), H.264- HandBrake (http://handbrake.fr). HandBrake
H.264- ,
GPL ( ,
, H.264-). MacOSX,
Windows Linux (http://handbrake.fr/downloads.php).
HandBrake : . , , .
HandBrake, (.5.13).
Source () , Video File (), . HandBrake
, (DV), .
HandBrake , , (.5.14). , ( Tools
()) .
1

H.264 video H.264

AAC MPEG-4. Safari, Adobe Flash,
iPhone Google Android . . .

108

.5.13.

.5.14.

H.264- HandBrake

109

. iPhone
& iPod Touch, .5.15,
.
- ( Web optimized). , .5.16, ,
, ,
. .
, .

.5.15. iPhone

Picture () (.5.17)
. HandBrake
, Keep
Aspect Ratio ( ).
Video (), .5.18,
.
Video Codec () , H.264 (x264).
2-Pass Encoding ( ) ,
HandBrake .
: , ,

110

. ,
, .
, ,
. H.264-
, , , YouTube
24 .
Turbo first Pass ( ) .
, , , , . ,
, .
Quality ()
. , HandBrake
, .
, , (
,
). , ,
0 100%. , .
, .

.5.16. -

H.264- HandBrake

.5.17.

.5.18.

111

112

: Ogg-
?
: , .
H.264- ,
Ogg-

(,
, ,
- ).
Ogg-
, .

600/, 320240. .
Audio (), .5.19,
- , . -,
, , , ,
. -,
, ,
96/ . , iPhone, .

.5.19.

H.264- HandBrake

113

Browse () (.5.20), .

.5.20.

, Start () (.5.21).
HandBrake - (.5.22).

H.264-
HandBrake
HandBrake .
http://handbrake.fr/downloads2.
php.
HandBrake , ffmpeg2theora (. Ogg- ffmpeg2theora ),
. ,
HandBrakeCLI --help ,
.

114

.5.21. , ?

.5.22. , ...

--preset "X", X HandBrake (

). H.264-
iPhone & iPod Touch.
--width W, W . HandBrake

, .
--vb Q, Q (/).
--two-pass , .
--turbo ,
.
--input F, F .
--output E, E () .

WebM- ffmpeg

115

, , , HandBrake
,
:
you@localhost$ HandBrakeCLI --preset iPhone & iPod Touch
--width 320
--vb 600
--two-pass
--turbo
--input pr6.dv
--output pr6.mp4

. HandBrake
iPhone & iPod Touch, 320240, 600/,
. pr6.dv pr6.mp4. !

WebM-
ffmpeg
20 2010. WebM ( ), - , . , ( ), WebM
,
.
libvp8 ffmpeg ( libvp8),
ffmpeg:
yy Linux (http://lardbucket.org/blog/archives/2010/05/19/vp8-webm-andffmpeg/) Ubuntu Lucid 10.04;
yy Windows (http://www.ioncannon.net/meta/1128/compiling-webmffmpeg-windows/) .
mkclean (http://www.matroska.org/downloads/mkclean.html).
? ffmpeg , VP8:
you@localhost$ ffmpeg
FFmpeg version SVN-r23197, Copyright (c) 2000-2010 the FFmpeg developers
built on May 19201022:32:20 with gcc 4.4.3
configuration: --enable-gpl --enable-version3 --enable-nonfree
--enable-postproc --enable-pthreads --enable-libfaac --enable-libfaad
--enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrwb
--enable-libtheora --enable-libx264 --enable-libxvid --enable-x11grab
--enable-libvpx-vp8

116

--enable-libvpx-vp8 ,
ffmpeg, . ,
, ,
. ffmpeg, , ,
, VP8.
, (.
H.264- HandBrake ). (-ipr6.dv) -
, pr6.dv-0.log. -vcodec :
you@localhost$ ffmpeg -pass 1 -passlogfile pr6.dv -threads 16
-token_partitions 4 -altref 1 -lag 16 -keyint_min 0
-g250 -mb_static_threshold 0 -skip_threshold 0 -qmin 1 -qmax 51
-ipr6.dv -vcodec libvpx_vp8 an -frawvideo -yNUL

VP8 WebM.
libvp8 , VP8, ffmpeg , , .
, .
ffmpeg , , - . MKV-, WebM (
ffmpeg WebM- , ,
, ).
:
you you@localhost$ ffmpeg -pass 2 -passlogfile pr6.dv -threads 16
-token_partitions 4 -altref 1 -lag 16 -keyint_min 0
-g250 -mb_static_threshold 0 -skip_threshold 0
-qmin 1 -qmax 51 -ipr6.dv -vcodec libvpx_vp8
-b614400 -s320x240 -aspect 4:3 -acodec vorbis -ypr6.mkv

:
-vcodec libvpx_vp8 , VP8, -

WebM-;
-b614400 . , libvp8 -

, ( ). ,
600/ 600 1024=614400;
-s320x240 ( );
-aspect 4:3 . -

, , 4:3, 16:9
16:10. , , ffmpeg ;

117

-acodec vorbis , Vorbis, -

WebM-.
MKV- VP8 Vorbis.
: WebM
MKV, , . WebM-,
mkclean:
you@localhost$ mkclean --doctype 4 pr6.mkv pr6.webm

HTML, ? .
HTML5 -, <video>. , src.
<img src="...">.
<video src=pr6.webm></video>

, . , <img>,
<video> width height. , ,
:
<video src="pr6.webm" width=320 height=240></video>

, .
, <video>,
, .
<video> , . HTML, CSS
JavaScript. <video> , play() pause(), currentTime; ,
volume muted. , , .
,
. <video> controls:
<video src="pr6.webm" width="320" height="240" controls></video>

, : preload
autoplay. , .
preload ,
. ,

118

.
, ,
preload none. .
-, ( )
:
<video src="pr6.webm" width="320" height="240" preload></video>

:
<video src="pr6.webm" width="320" height="240" preload=none></video>

autoplay, , ,
, . , , . HTML5
. , , , .
HTML5 ,
JavaScript, play()
window.onload. . , (, ,
) ,
autoplay.
-, ,
, :
<video src="pr6.webm" width="320" height="240" autoplay></video>

Greasemonkey (http://www.greasespot.net), Firefox.

HTML5-. HTML5
DOM- autoplay. JavaScript- autoplay,
HTML-:
// ==UserScript==
// @name
Disable video autoplay
// @namespace http://diveintomark.org/projects/greasemonkey/
// @description Ensures that HTML5 video elements do not autoplay
// @include
*
// ==/UserScript==
var arVideos = document.getElementsByTagName('video');
for (var i= arVideos.length - 1; i>= 0; i--) {
var elmVideo = arVideos[i];
elmVideo.autoplay = false;
}

. ,
, , . OGV-, Firefogg (. Ogg Firefogg ) ffmpeg2theora (.

119

Ogg- ffmpeg2theora ).
MP4-, HandBrake (. H.264- HandBrake ). WEBM-, ffmpeg (. WebM-
ffmpeg ).
HTML5 <source>.
<video> <source>, . , -, ,
.
: , ? . , , .
, .
type <source>.
:
<video width="320" height="240" controls>
<source src=pr6.mp4 type=video/mp4; codecs="avc1.42E01E, mp4a.40.2">
<source src=pr6.webm type=video/webm; codecs="vp8, vorbis">
<source src=pr6.ogv type=video/ogg; codecs="theora, vorbis">
</video>

. <video>
, . <video>
<source>, src
type . type , , , . : (. ),
(. ) (.
).
. OGV
Ogg, video/ogg ( , MIME- Ogg). Theora Vorbis.
, .
, , type
:
<source src="pr6.ogv" type=video/ogg; codecs=theora, vorbis>

<source>, WebM, , MIME- (video/webm, video/ogg) (VP8, Theora):

<source>, H.264, .
, , H.264- (.H.264 ) AAC (.Advanced Audio Coding ) . H.264

120

AAC, -
MPEG-4. type:
<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

, ,
type, , .

, ,
. , : ,
, .
, type . type.

(20 2010 )
iPad, - -,

. , , , MP4-
,
.

MIME-. - , . , , , -.
: , , . , , MIME-.
1 MIME- (.MIME-), ,
, . ,
:

MIME-!

MIME-, : type <source>.

type HTML- . ,
- MIME- HTTP- Content-Type.
- Apache , AddType httpd.conf,
, .htaccess
.

.
, HTTP- Content-Type .

IE?

121

AddType :
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Ogg, MPEG-4, WebM-. , MIME- .

, MIME- type .
- Mozilla -
Ogg (https://developer.mozilla.org/
en/Configuring_servers_for_Ogg_media). MP4 WebM.

IE?
Microsoft Internet Explorer9
(developer preview).
HTML5- <video>, Microsoft (http://blogs.

msdn.com/ie/archive/2010/03/16/html5-hardware-accelerated-first-ie9-platform-preview-availablefor-developers.aspx), IE9 H.264

AAC MPEG-4, Safari Macintosh Mobile Safari iOS.

Internet Explorer, ? Internet
Explorer Adobe Flash, ( 9.0.60.184) H.264 AAC MPEG-4. , H.264-, Safari
(. H.264- HandBrake ), Flash,
, HTML5-
.
Flowplayer (http://flowplayer.org) Flash , GPL (
, http://flowplayer.org/
download/). <video> Flowplayer , <video> Flash- . HTML5, <video> <object>.
HTML5- <video> <object>, , Flash, Flowplayer. HTML5- - , <object>
.

122

. HTML5
<video>, <source>, . HTML5-,
, Flash. JavaScript .
http://camendesign.com/code/video_for_
everybody .

, . ,
WebM. :
## Theora/Vorbis/Ogg
you@localhost$ ffmpeg2theora --videobitrate 200 --max_size 320x240
--output pr6.ogv pr6.dv
## H.264/AAC/MP4
you@localhost$ HandBrakeCLI --preset iPhone & iPod Touch --vb 200 --width 320
--two-pass --turbo --optimize --input pr6.dv --output pr6.mp4
## VP8/Vorbis/WebM
you@localhost$ ffmpeg -pass 1 -passlogfile pr6.dv -threads 16
-token_partitions 4 -altref 1 -lag 16 -keyint_min 0 -g250
-mb_static_threshold 0 -skip_threshold 0 -qmin 1 -qmax 51
-ipr6.dv -vcodec libvpx_vp8 -an -frawvideo -yNULffmpeg
--videobitrate 200
you@localhost$ ffmpeg -pass 2 -passlogfile pr6.dv -threads 16
-token_partitions 4 -altref 1 -lag 16 -keyint_min 0 -g250
-mb_static_threshold 0 -skip_threshold 0 -qmin 1 -qmax 51
-ipr6.dv -vcodec libvpx_vp8 -b204800 -s320x240 -aspect 4:3
-acodec vorbis -ac 2 -ypr6.mkv
you@localhost$ mkclean --doctype 4 pr6.mkv pr6.webm

<video> HTML5-,
<object> Flash:
<video id="movie" width="320" height="240" preload controls>
<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' />
<object width="320" height="240" type="application/x-shockwave-flash"
data="flowplayer-3.2.1.swf">
<param name="movie" value="flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={
"clip": {"url": "http://wearehugh.com/dih5/good/bbb_480p.mp4",
"autoPlay":false, "autoBuffering":true}}' />
<p> <ahref="pr6.mp4">MP4</a>,
<ahref="pr6.webm">WebM</a>, or

123

<ahref="pr6.ogv">Ogg</a>.</p>
</object>
</video>

HTML5 Flash
.

<video> HTML5 (http://bit.ly/a3kpiq).
(http://camendesign.com/code/video_for_everybody).
(http://diveintomark.org/
tag/give).
Theora 1.1 (http://hacks.mozilla.org/2009/09/
theora-1-1-released/) (Christopher Blizzard).
Ogg (https://developer.mozilla.
org/en/Configuring_servers_for_Ogg_media).
x264 (http://www.mplayerhq.hu/DOCS/HTML/en/
menc-feat-x264.html).
(http://wiki.whatwg.org/wiki/Video_type_parameters).
Zencoder Video JS (http://videojs.com)

HTML5-.
, HTML5 (http://dev.opera.com/
articles/view/everything-you-need-to-know-about-html5-video-and-audio/) (Simon Pieters).

, .
: IP-, , ,
, GPS-, .

: . ?
: ,
. API

(http://www.w3.org/TR/geolocationAPI/#security):

. , , .

API
API . JavaScript,
-, , , -
: , ,
, ..
.6.1, API .
,
.
6.1. API
IE

Firefox
3.5+

Safari
5.0+

Chrome
5.0+

Opera

iPhone
3.0+

Android
2.0+

125

API , API. .

API navigator.
geolocation navigator.
API :
function get_location() {
navigator.geolocation.getCurrentPosition(show_map);
}

API, . -
.
API (. 2) Modernizr:
function get_location() {
if (Modernizr.geolocation) {
navigator.geolocation.getCurrentPosition(show_map);
} else {
// , Gears
}
}

, , -.
Gears , ,
, getCurrentPosition(). , .
-
. getCurrentPosition() API
-, . , Mozilla
Firefox . ,
.6.1.

.6.1.

:
;
.

:
Mozilla http://www.mozilla.com/en-US/firefox/
geolocation/, ;

126

6. !

;
;
(/),

.
, :
,
;
,
, ,
;
, ;
, , ,
.
JavaScript,
. , show_map(). getCurrentPosition() , . ,
. :
function show_map(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// - !
}

,
: coords timestamp. timestamp
.

, . - , ; GPS-
..

coords : latitude (), longitude

() . . .
position .6.2.
6.2. position

coords.latitude
coords.longitude

double
double

127

coords.altitude

double null

coords.accuracy
coords.altitudeAccuracy
coords.heading

double
double null
double null

coords.speed
timestamp

double null
DOMTimeStamp

Date()

: coords.latitude,
coords.longitude coords.accuracy. (null, ) , . heading speed
, .

, - . .
, , , .
?
getCurrentPosition() :
navigator.geolocation.getCurrentPosition(show_map, handle_error)

- , PositionError. .6.3.
6.3. PositionError

code

short

( )

message

DOMString

code :
PERMISSION_DENIED (1) Don'tShare ( -

)
;
POSITION_UNAVAILABLE (2)

;
TIMEOUT (3) , -

( , );
UNKNOWN_ERROR (0) - .

128

6. !

:
function handle_error(err) {
if (err.code == 1) {
// !
}
}

: API
, , ?
: (http://www.w3.org/TR/geolo
cation-API/#coordinates_interface) :
,
, -

[WGS84] .
.
, (http://twitter.com/Astro_TJ) , . , ,

.

!
, iPhone Android,
. ,
- . ,
GPS-, .
, , ( ) -
( ).
, GPS-
GPS-
. , GPS
. GPS-. , , . GPS-
.
- Google iPhone
, .
( -), ( ) (, GPS-).
, - . , , ,
,
,

129

. ,
. : 20, ..
getCurrentPosition()
PositionOptions. (.6.4).
PositionOptions .
6.4. PositionOptions

enableHighAccuracy

boolean

false

timeout
maximumAge

long
long

( )
0

true

,
, ,
enableHighAccuracy true. iPhone
Android ,
, getCurrentPosition() enableHighAccuracy:true
, enableHighAccuracy:false .
timeout (), - .
, . , , .
maximumAge . , , getCurrentPosition()
, ( )
, 10:00 .
, , 10:01, getCurrentPosition(),
maximumAge 75000:
navigator.geolocation.getCurrentPosition(
success_callback, error_callback, {maximumAge: 75000});

, , ; , 75
(75000) . ,
60 (60000) :
getCurrentPosition(). , ,
, : , , ,
(10:00 ).
, , , , , ,
enableHighAccuracy.

130

6. !

,
maximumAge. ,
, getCurrentPosition() . watchPosition().
watchPosition() , getCurrentPosition().
:
( ) ( ), PositionOptions, . ,
, . :

, . watchPosition()
, ..
.
watchPosition() , , ,
- . , clearWatch() . .
- setInterval() clearInterval()
JavaScript, , .

IE?
API , W3C (.API ), Internet Explorer. ! Gears
(http://tools.google.com/gears/) Google , Windows, Mac OSX,
Linux, Windows Mobile Android.
, API .
W3C, .
, ,
, BlackBerry, Nokia, Palm OMTP
BONDI, API . , Gears, , ,
W3C API . ?..

geo.js
geo.js (http://code.google.com/p/geo-location-javascript/) JavaScript, MIT .
W3C API , API
Gears API . geo.js,

geo.js

131

( ,
, <head>, , ).
gears_init.js (http://code.google.com/apis/gears/
gears_init.js), Gears, .
geo.js (http://geo-location-javascript.googlecode.com/svn/trunk/js/geo.js).
:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
...
<script src=gears_init.js></script>
<script src=geo.js></script>
</body>
</html>

API :
if (geo_position_js.init()) {
geo_position_js.getCurrentPosition(geo_success, geo_error);
}

.
init(). API ,
true:
if (geo_position_js.init()) {

init(), ,
, . ,
getCurrentPosition():
geo_position_js.getCurrentPosition(geo_success, geo_error);

getCurrentPosition() , . , Gears , Gears. API

(, Firefox3.5, , ).
getCurrentPosition()
. getCurrentPosition() ( API ),
. geo_success:
geo_position_js.getCurrentPosition(geo_success, geo_error);

132

6. !

, , :
function geo_success(p) {
alert(" " + p.coords.latitude +
" " + p.coords.longitude);
}

getCurrentPosition() (- , - - API
), , . , ,
geo_error:
geo_position_js.getCurrentPosition(geo_success, geo_error);

:
function geo_error() {
alert(" !");
}

watchPosition() geo.js .
,
, getCurrentPosition().

geo.js
, .
geo_position_js.init(), ,
,
geo.js. API , , , .
lookup_location() :
function lookup_location() {
geo_position_js.getCurrentPosition(show_map, show_map_error);
}

, , geo.js show_map() loc. coords

loc , (
). show_map() API Google :
function show_map(loc) {
$("#geo-wrapper").css({'width':'320px','height':'350px'});
var map = new GMap2(document.getElementById("geo-wrapper"));
var center = new GLatLng(loc.coords.latitude, loc.coords.longitude);

133

map.setCenter(center, 14);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addOverlay(new GMarker(center, {draggable: false, title: "
"}));
}

geo.js ,
show_map_error():
function show_map_error() {
$("#live-geolocation").html(' !');
}

API W3C (http://www.w3.org/TR/geolocation-API/).
Gears (http://tools.google.com/gears/).
API BlackBerry (http://www.tonybunce.com/2008/05/08/
Blackberry-Browser-Amp-GPS.aspx).
API Nokia (http://wiki.forum.nokia.com/index.php/Bondi_
Widget_porting_example_-_geolocation_API).
API Palm (http://developer.palm.com/index.php?option=com_
content&view=article&id=1673#GPS-getCurrentPosition).
API OMTP BONDI ( http://bondi.omtp.org/1.0/apis/
geolocation.html).
geo.js - API (http://code.google.
com/p/geo-location-javascript/).

:
, ,

,
-.
, , , (, ) . , INI-, XML- -
.
, , () ,
- .
- . Cookies
,
, , . .
Cookies HTTP-
-, .
cookies HTTP-, ( -
SSL).
cookies 4. , (. ), ,
- .
, :

.

HTML5

135

, -
.

HTML5
, Internet Explorer. Microsoft
, . Microsoft:
,
- Internet Explorer.
DHTML Behaviors;
UserData.
UserData - 64
XML. ( ,
-, . -, , 640 !) IE , .
2002 Adobe Flash6 , Flash-cookies. Flash Local Shared Objects ( , LSO).
, LSO Flash- 100
. 2005 (Brad Neuberg)
Flash JavaScript, AMASS
(AJAX Massive Storage System). Flash
AMASS, 2006, ExternalInterface
Flash8, LSO JavaScript . , AMASS, Dojo Toolkit dojox.storage. dojox.storage
Flash 100
. ,
( 1, 10 ..).
2007 Google Gears
, (
API Internet Explorer, Gears: . IE?
6). Gears API SQLite.
, Gears SQL.
dojox.
storage.
API. 2009 dojox.storage ( ) Adobe Flash,
Gears, Adobe AIR HTML5,
Firefox.

136

7. : , ,

, :
- . dojox.storage
, ,
- . , HTML5 : API,
.

HTML5-:
HTML5-, Web Storage,
HTML5, ( , ). DOM-.
, ;
.
HTML5-? ,
- ,
, . , cookies, , ,
. , cookies,
-, .
, ,
.
: HTML5-?
.7.1 , .
Internet Explorer!
7.1. HTML5-
IE
8.0+

Firefox
3.5+

Safari
4.0+

Chrome
4.0+

Opera
10.5+

iPhone
2.0+

Android
2.0+

JavaScript HTML5- localStorage

window. , ,
(. 2):
function supports_html5_storage() {
return ('localStorage' in window) && window['localStorage'] !== null;
}

HTML5, Modernizr (.Modernizr:

HTML5- 2):

HTML5-

137

if (Modernizr.localstorage) {
// !
} else {
// ,
// dojox.storage
}

HTML5-
HTML5- . ,
:
interface Storage {
getter any getItem(in DOMString key);
setter creator void setItem(in DOMString key, in any data);
};

. , , , JavaScript: , , , .
. ,
JavaScript- parseInt(), parseFloat() .
setItem() , - , . getItem()
, , null.
localStorage, JavaScript,
. , getItem()
setItem() . , , :
var foo = localStorage.getItem("bar");
//
localStorage.setItem("bar", foo);

,
:
var foo = localStorage[bar];
//
localStorage[bar] = foo;

, ( ):
interface Storage {
deleter void removeItem(in DOMString key);
void clear();
}

138

7. : , ,

removeItem() , .
, ,
(
):
interface Storage {
readonly attribute unsigned long length;
getter DOMString key(in unsigned long index);
};

key() 0 length-1,
null.

HTML5-
,
storage. storage window , setItem(), removeItem() clear() -
. ,
clear() , , storage ,
.
storage , localStorage,
Internet Explorer8. IE8 W3C addEventListener
(, , - IE9). , storage, , 1. :
if (window.addEventListener) {
window.addEventListener("storage", handle_storage, false);
} else {
window.attachEvent("onstorage", handle_storage);
};

handle_storage StorageEvent,
Internet Explorer window.event:
function handle_storage(e) {
if (!e) { e= window.event; }
}

e Storage
Event. .7.2.

, , , . storage .
, jQuery
- JavaScript,
storage. . .

HTML5-

139

7.2. StorageEvent

key
oldValue

newValue

url*

, ,
( , ) null
( )
( , ) null
( )
, ,

url uri. ,
. , , url. , ,
uri.

storage ,
handle_storage .

: - . ,
.

(. HTML5 ),
, , : .. HTML5-, .
5 . , ,
HTML5 . ,
, . , .
, .
QUOTA_EXCEEDED_ERR. ,
, .
- , -
. (, Opera) .
-
-.

HTML5-
HTML5-.
,

140

7. : , ,

4. : , . HTML5 .
http://diveintohtml5.org/examples/
localstorage-halma.html, , ,
. HTML5-,
:
, ,
( , ).
? :
function saveGameState() {
if (!supportsLocalStorage()) { return false; }
localStorage["halma.game.in.progress"] = gGameInProgress;
for (var i= 0; i< kNumPieces; i++) {
localStorage["halma.piece." + i+ ".row"] = gPieces[i].row;
localStorage["halma.piece." + i+ ".column"] = gPieces[i].column;
}
localStorage["halma.selectedpiece"] = gSelectedPieceIndex;
localStorage["halma.selectedpiecehasmoved"] = gSelectedPieceHasMoved;
localStorage["halma.movecount"] = gMoveCount;
return true;
}

, localStorage , ( gGameInProgress ). , (gPieces, JavaScript)

, .
:
(gSelectedPieceIndex, ),
(gSelectedPieceHasMoved ),
(gMoveCount, ).
newGame(),
,
resumeGame(). HTML5-, resumeGame()
, . ,
localStorage:
function resumeGame() {
if (!supportsLocalStorage()) { return false; }
gGameInProgress = (localStorage["halma.game.in.progress"] == "true");
if (!gGameInProgress) { return false; }
gPieces = new Array(kNumPieces);
for (var i= 0; i< kNumPieces; i++) {
var row = parseInt(localStorage["halma.piece." + i+ ".row"]);
var column = parseInt(localStorage["halma.piece." + i+ ".column"]);
gPieces[i] = new Cell(row, column);
}

141

gNumPieces = kNumPieces;
gSelectedPieceIndex = parseInt(localStorage["halma.selectedpiece"]);
gSelectedPieceHasMoved = localStorage["halma.selectedpiecehasmoved"] == "true";
gMoveCount = parseInt(localStorage["halma.movecount"]);
drawBoard();
return true;
}

,
: ; , . , ,
(gGameInProgress) . saveGameState()
, :
localStorage["halma.game.in.progress"] = gGameInProgress;

resumeGame() ,
, . :
gGameInProgress = (localStorage["halma.game.in.progress"] == "true");

(gMoveCount) saveGameState()
:
localStorage["halma.movecount"] = gMoveCount;

resumeGame()
, JavaScript parseInt():
gMoveCount = parseInt(localStorage["halma.movecount"]);

HTML5-
(. HTML5
), . API
,
. - , ? 5
. .

: SQL. Google 2007 Gears
SQLite.
Web SQL Database. Web SQL (
WebDB) SQL.
JavaScript , , :

142

7. : , ,

openDatabase('documents', '1.0', 'Local document storage', 510241024,

function (db) {
db.changeVersion('', '1.0', function (t) {
t.executeSql('CREATE TABLE docids (id, name)');
}, error);
});

,
ExecuteSQL. SQL- SELECT, UPDATE, INSERT DELETE. ,

JavaScript!
.7.3 , Web SQL
Database.
7.3. Web SQL Database
IE

Firefox

Safari
4.0+

Chrome
4.0+

Opera
10.5+

iPhone
3.0+

Android

, ,
, SQL , ( HTML5, ).
SQL, SQL-92;
. SQL Oracle, SQL Microsoft,
SQL MySQL, SQL PostgreSQL, SQL SQLite. , SQL ,
SQL SQLite . : SQL,
SQLite X.Y.Z.
,
Web SQL:
.
SQL (, SQLite), ,
, .
, ,
SQL Sqlite.
.

, . - Indexed Database API,

WebSimpleDB. IndexedDB.
Indexed Database API .
SQL-. ,
.
, . .
.
SQL, ,
, . ,

143

.
"SELECT * from USERS where ACTIVE = 'Y'" .
, USERS, , , , -.
IndexedDB (http://hacks.mozilla.org/2010/06/comparing-indexeddband-webdatabase/) IndexedDB.
IndexedDB Web SQL.
IndexedDB
. 2010 Mozilla ,
IndexedDB, , Firefox4. Mozilla , Web SQL. Google
IndexedDB Chromium Google Chrome. Microsoft , IndexedDB
-.
, - IndexedDB? . ? , - .
IndexedDB.

HTML5-:
HTML5- (http://dev.w3.org/html5/webstorage/);
DOM- (http://msdn.microsoft.com/en-us/library/cc197062
(VS.85).aspx) MSDN;
-:
(http://dev.opera.com/articles/view/web-storage/), (Shwetank
Dixit);
DOM- (https://developer.mozilla.org/en/dom/storage)
Mozilla -;

Firefox
globalStorage, localStorage. localStorage Mozilla Firefox 3.5.

HTML5 - (http://www.
ibm.com/developerworks/xml/library/x-html5mobile2/), IBM

.
HTML5 :
Internet Explorer ?!?! (http://codinginparadise.org/weblog/2005/08/ajax-internet-explorer-has-native.
html), userData IE;

144

7. : , ,

Dojo ( http://docs.google.com/View?docid=dhkhksk4_8gdp9gr#dojo_
storage)

Dojo Offline ( );
dojox.storage.manager (http://api.dojotoolkit.
org/jsdoc/HEAD/dojox.storage.manager);
SVN- dojox.storage (http://svn.dojotoolkit.org/src/dojox/trunk/storage/).
Web SQL:
Web SQL Database (http://dev.w3.org/html5/webdatabase/);
Web SQL (http://html5doctor.com/introducing-websql-databases/) ;
Web Database (http://html5demos.com/database);
persistence.js (http://zef.me/2774/persistence-js-an-asynchronous-javascriptorm-for-html5gears) ORM JavaScript,
Web SQL Gears.
IndexedDB:
Indexed Database API (http://dev.w3.org/2006/webapi/IndexedDB/).
HTML5: API IndexedDB (http://hacks.mozilla.
org/2010/06/beyond-html5-database-apis-and-the-road-to-indexeddb/)
(Arun Ranganathan) (Shawn Wilsher);
Firefox4 IndexedDB: (http://hacks.mozilla.org/2010/
06/comparing-indexeddb-and-webdatabase/)
.

,
!

-? . - , , . ,
? , . ,
. HTML5.
-
HTML-, CSS-, JavaScript,
. ,
, - -, -. , HTML5, URL- ,
,
.
-, , .
-. DOM ,
, . (, ,
) . . - ,
(.7), ,
. ,
HTML5 ,
-.
.8.1 , .
8.1.
IE

Firefox

Safari

Chrome

Opera

iPhone

Android

146

8. , !

- .
, , - , . , manifest
<html>.
<!DOCTYPE HTML>
<html manifest=/cache.manifest>
<body>

</body>
</html>

-,
MIME- text/cache-manifest.
- Apache, AddType .htaccess :
AddType text/cache-manifest .manifest

,
.manifest. - -

Apache,
Content-Type.

: -
. manifest

?

: - manifest
-.

, : HTML-
, Content-Type. , .
:
CACHE MANIFEST

:
(explicit), (fallback) (NETWORK, online whitelist ).
. , ,
. , .

147

.
: CSS-, JavaScript JPEG:
CACHE MANIFEST
/clock.css
/clock.js
/clock-face.jpg

. ,
, ,
. , - clock.css, clock.js
clock-face.jpg. ,
-.

:
HTML-?
: .
- ,
, manifest. ,

HTML- manifest,
-,
. , , .
, HTML- (
), .

NETWORK
. , , tracking.cgi, <img src>. ,
. ,
. :
CACHE MANIFEST
NETWORK:
/tracking.cgi
CACHE:
/clock.css
/clock.js
/clock-face.jp

. NETWORK: . (
). CACHE:
, .
.

148

8. , !

FALLBACK
. -,
( ) . HTML5 :
CACHE MANIFEST
FALLBACK:
/ /offline.html
NETWORK:
*

? . -, , . ,
. , ? : , , . ,
, - ,
(
) ( ).
. HTML ( , ,
) .
: -,
. ?
, , , , .
,
, . , . : , -, . , HTML-
.
FALLBACK:,
.
URL-, URL-. (/)
, .
. ( , ,
),
. , /offline.html,
.

149

, NETWORK:.
,
(*). . : ,
, , . -
. , : , , , , ,
. ,
, -: HTML-
,
(CDN) .

: ,
.
? . HTML-.
CSS, JavaScript . CACHE:
, . ,
,
, .

, -, , , , .
- , - , .
-, ,
.
, DOM-. , , window.
applicationCache . ,
, , ,
.
.
1. manifest <html>, checking window.applicationCache ( ,
, window.applicationCache).
checking , , ,
.

150

8. , !

2. :

yy downloading,
, ;

yy , progress
,
;

yy , ,
, cached,
; , , - .
.
3. ,

, ,
, ,
.
, , .

yy , ,
noupdate .

yy , ,
downloading .
, progress
, .
, , , updateready, . , , -
.
.
,
window.applicationCache.swapCache().
- , error . ,
, :
HTTP- 404 ( ) 410
( );
, HTML-, -

, ;
,

, .

151

!,

. , ,
, . :
, , ,
. error , . -
.
, , ,
;
, , , .
, ,
. . , ,
.
1. HTTP-, ,
. , ,
HTTP, - HTTP- .
HTTP- (Expires Cache-Control), , , . -;
HTML-, , , .
2. , HTTP-, ,
, . , . HTTP-
,
HTTP-, . - ,
, 304 ( ).
-,
.
3. - , ,
, HTTP- 200 (OK), CacheControl ,
1 2 . ( HTTP! -
. , - , , .) ,
. , , , .

152

8. , !

.
, - ,
, .
? . . , manifest , checking ,
. ,
. , , : -
, ( HTTP-, Cache-Control). ,
. -, , , , , - .
? - ( Cache-Control)
. , , .
, . , .
- ( -)
, . , ,
. ( :
, !
, !)
,
: - ,
HTTP. -
Apache, .htaccess:
ExpiresActive On
ExpiresDefault "access"

. , - .
<Files>,
, ,
.htaccess . , ,
- ,
, HTTP- .
HTTP-
. , , , , URL- - .
. , , , .
:
CACHE MANIFEST
# rev 42
clock.js
clock.css

153

clock.css, :
. , -,
. , . ,
. , . - , , , , , , :
CACHE MANIFEST
# rev 43
clock.js
clock.css

,
4 , (.HTML5- 7)? . ,
. HTML-, JavaScript
! , API , CSS-
<style> . , :
CACHE MANIFEST
halma.html
../halma-localstorage.js

. examples/
offline/, . HTML- -

, ( ),
HTML-, offline/.
, JavaScript ,
(.HTML5- 7), JS, examples/. :
/examples/localstorage-halma.html
/examples/halma-localstorage.js
/examples/offline/halma.manifest
/examples/offline/halma.html

(/examples/offline/halma.manifest)
: -, HTML- (/examples/offline/halma.
html), , , -,
JavaScript (/examples/halma-localstorage.js).
: ../halma-localstorage.js.
src <img>.
,

154

8. , !

( , )
URL- ( , ).
HTML- manifest,
:
<!DOCTYPE html>
<html lang="en" manifest=halma.manifest>

! HTML-, , .
. , , .

: - HTML5 (http://bit.ly/
cCkWZa).

:
Firefox (https://developer.mozilla.org/En/Offline_resources_
in_Firefox) Mozilla -;
HTML5 ( http://developer.apple.com/safari/
library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/
OfflineApplicationCache.html)
Safari (http://
developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/
Introduction/Introduction.html).

:
HTML5 Gmail .
. 1 (http://googlecode.
blogspot.com/2009/04/gmail-for-mobile-html5-series-using.html) (Andrew Grieve);
HTML5 Gmail . . 2 (http://googlecode.blogspot.
com/2009/05/gmail-for-mobile-html5-series-part-2.html) ;
HTML5 Gmail . . 3 (http://googlecode.blogspot.
com/2009/05/gmail-for-mobile-html5-series-part-3.html) ;
HTML5 (http://jonathanstark.com/
blog/2009/09/27/debugging-html-5-offline-application-cache/)
(Jonathan Stark);
HTML5- (http://hacks.mozilla.org/2010/02/an-html5-offline-image-editor-and-uploaderapplication/) (Paul Rouget).

- , ? , :
<form>, <input type="text">, ,
<input type="password"> <input
type="submit">.
, . HTML5
, . ,
- . : ,
. .
- ,
. , IE6, - .

, HTML5- , . , .
, .
, , . ,
Mozilla Firefox (.9.1).

.9.1. Firefox

,
(.9.2).

156

9. -

.9.2.

, Firefox3.5 -
. , . ,
.9.1.
9.1.
IE

Firefox
3.7+

Safari
4.0+

Chrome
4.0+

Opera

iPhone

Android

-:
<form>
<input name="q" placeholder=" ">
<input type="submit" value="">
</form>

placeholder .

: HTML-
placeholder?
, , ?
: placeholder
HTML-.

CSS (http://trac.webkit.org/
export/37527/trunk/LayoutTests/fast/forms/placeholderpseudo-style.html).

JavaScript
-. , Google.com
, , .
, . ,
, ;
. :
, ,
, . ,
, .

JavaScript. , , .

157

HTML5 autofocus,
-.
,
. , HTML-, ,
. ,
, , .
.9.2 , .
9.2.
IE

Firefox

Safari
4.0+

Chrome
3.0+

Opera
10.0+

iPhone

Android

:
<form>
<input name="q" autofocus>
<input type="submit" value="">
</form>

, autofocus, .
, , HTML5? , .
1. autofocus HTML-.
2. autofocus (. -

2). ,
autofocus .
<form name="f">
<input id="q" autofocus>
<script>
if (!(autofocus in document.createElement(input))) {
document.getElementById("q").focus();
}
</script>
<input type="submit" value="">
</form>
...

http://diveintohtml5.org/examples/input-autofocus-with-fallback.html
() .

- window.onload. ,

. , ,

158

9. -

,
(

).
, .

,
. , ,

, $(document).ready() jQuery, window.onload.

- , .9.3.
9.3. HTML 4

HTML-
<input type="checkbox">
<input type="radio">

, ,

type

HTML5. HTML5 (,
, ,
3) -
. !
, HTML5 ,
( , ) .
. :
<form>
<input type="email">
<input type="submit" value="Go">
</form>

, : , type="email" ? , type="email". type="email" .

159

(
), , type="email", type="text" .
. , ,
<input type="text">.
, .
HTML5, type="email". ? ? . , IE6, type type="text".
-, type="email", .
, , type="email"?
, . HTML5 - . Opera type="email" . HTML5, Safari Chrome, ,
, type="text". , , .
iPhone. iPhone , , ,
-. iPhone :
HTML5- ,
, .
, ,
, ? ,
. @
(.), . , iPhone <input type="email">,

, . @, .9.3.
, ,
,
type="email" .
, , , iPhone. , , ,
.9.3. ,
-

.

160

9. -

-
-, URL, URI,
.
-. - -, , - http://www.google.
com/, , 38. ,
. -
: .com, .org .
,
( , ) <input type="url">! iPhone
,
.9.4.
,
iPhone , -.
: (/), (.) .com. .com, : .org, .net ..
HTML5 type="url" ,
type="text",
.

.9.4. ,

URL-

. ,
-.
. - . 1? ,
1 10. 7 1/2? , , , . ?
, .
, . (, ,
; - , , 10) . HTML5.
:
<input type=number
min="0"
max="10"
step="2"
value="6">

161

( ,
).
type="number" , .
min="0" , .
max="10" , .
step="2" min
: 0, 2, 4 .. max.
value="6" . :
,
. ( , HTML5 HTML.
,
.)
HTML- . , . -
, , min max. ,
step , .
, value
.
HTML5 . :
JavaScript:
input.stepUp(n)
n;
input.stepDown(n)
n;
input.valueAsNumber
( input.value, , ).
? ,
-. iPhone,
, ,
, .9.5.
Opera
type="number" ,
. ,
.9.5. ,
(.9.6).

162

9. -

Opera min, max step,

.
(.9.7).
, , ,
type="number": ,
, type="text".
( value), min, max
. . , JavaScript-, .

HTML5 (.
2), , :

.9.6.

.9.7.

if (!Modernizr.inputtypes.number) {
// type="number" ,
// Dojo
// JavaScript-
}

, ,
. , ,
, .9.8.
-.
HTML- :
<input type=range
min="0"
max="10"
step="2"
value="6">

.9.8.

, type="number": min, max, step,

value. . . ,
type="range" .
Safari, Chrome Opera. , iPhone
.
type="text". , ,
-.

163

HTML4 . JavaScript- (Dojo, jQuery UI, YUI Closure), , , ,
.
HTML5
, .
: , , , , + +
.
.9.4 , ,
, .
9.4.

type="date"
type="month"
type="week"
type="time"
type="datetime"
type="datetime-local"

Opera
9.0+
9.0+
9.0+
9.0+
9.0+
9.0+

Opera <input type="date">, .9.9.

.9.9.

.9.10.

.9.11.

, , Opera
<input type="datetime"> , .9.10.

( , , ,
), Opera <input
type="month">, .9.11.
, .
<input type="week"> (.9.12).

164

9. -

, , <input type="time"> (.9.13).

,
. , type="date" ,
, type="email" (. ) , .
, <input type="date">
: Opera,
.
, , <input type="date">,
, (. 2),
:

.9.12.

.9.13.
<form>
<input type="date">
</form>

. , . .
Google Yahoo! ( ).
. Amazon, Newegg, .. ? , ,
<input type="text">. HTML5 :
<form>
<input name="q" type=search>
<input type="submit" value="Find">
</form>

.
Safari Mac OSX ,
.9.14.

165

? ! , ,
, : !
type="search", Safari .
(Google Chrome,
Safari, ).
iTunes Mac OS X(.9.15).

.9.14.

.9.15. ,

Apple <input type="search"> , Macintosh.

Macintosh . ,
. .
, type="search", ,
, type="text".
type="search" .

HTML5 <input type="color">,
.
, , .
Mac OS. , - - .

, , , <input type="search">. Safari
CSS- (

: ,
, , .).
!..

,
. , , , HTML5-: () .

166

9. -

-. , , , JavaScript,
PHP, Python . JavaScript :
, JavaScript (,
, 10%);
.
, . , - ,
(http://www.regular-expressions.info/email.html). ,
(http://www.ex-parrot.com/pdw/Mail-RFC822-Address.html).
, - (http://haacked.com/archive/2007/08/21/iknew-how-to-validate-an-email-address-until-i.aspx)?
?
.9.16 Opera10, Opera9. : type email (. ).
<input type="email">, Opera
RFC.
Opera -, <input
type="url">, <input type="number">.
min max, Opera , (.9.17).

.9.16. Opera type="email"

.9.17. Opera type="number"

, HTML5- , , -
.

:
<input> (http://bit.ly/akweH4);
<input placeholder> (http://bit.ly/caGl8N);
<input autofocus> (http://bit.ly/db1Fj4).
JavaScript-: Modernizr (http://www.modernizr.com)
HTML5-.

HTML5 100 (http://simon.html5.org/html5-elements).

(.3), API
(.4). HTML (
1) , , . HTML <figure>? <person>?
<rant> (- )? , , .
, HTML , .
. , HTML5 <person> <rant>.
<person> -, . , (. , 3) , ,
HTML, <person>.
- , ?
HTML.
(http://microformats.org), class rel, HTML4. RDFa (http://www.w3.org/TR/
rdfa-syntax/), XHTML (. 1), HTML. , RDFa. : -
, HTML.
( <rant>!).
, HTML5 . .

168

10.

?
: .

DOM ,
.

? , .
.
HTML5 ,
, (.
HTML5 3), ,
. , . . , ,
- .
, , . . , Person, , name, photo
.. - ,
. ,
, - ( ).
,
, (scope). , ,

DOM. <html> (. 3) : <head> (. HEAD 3) <body>.
<body>, , ,
. , , <h1>
<hgroup>, <header> (. 3) <body>. <td>
<tr> <table> ( <body>). DOM : - .
.
:
DOM ( ).
DOM, . , -.
, HTML.
, ,
HTML , HTML -

169

. ,
, DOM.
, DOM ,
, .
,
? , . .

.
, URL-.
, URL -.
, , ,
. , , data-vocabulary.org.
URL- http://datavocabulary.org/Person. , URL , .
.
:
name ;
photo ;
url , ,
Google-.
, URL. , ,
, .
, - .
, , , <h1>
. , ,
<img>, URL- , . ,
<section>
. 1:
<section>
<h1> </h1>
<p><img src="http://www.example.com/photo.jpg" alt="[ ]"></p>
<p><ahref="http://diveintomark.org/"> </a></p>
</section>

() .
( name, photo url)
1

, . .
.

170

10.

HTML-. DOM . HTML

. , , , .10.1.
10.1.

content
src

href

data
datetime

HTML-. ,
. itemtype.
, ,
itemscope. , , <section>, , <section>
: itemtype itemscope:
<section itemscope itemtype=http://data-vocabulary.org/Person>

, <section>.
<h1>, .10.1.
- (
<p>, <div> <span>, ):
<h1 itemprop=name> </h1>

- : name http://
data-vocabulary.org/Person. .
photo. , URL-. .10.1, <img> src.
, <img src>, URL ! ,
, photo <img>:
<p><img itemprop=photo
src="http://www.example.com/photo.jpg"
alt="[ ]"></p>

171

- : photo http://datavocabulary.org/Person. http://www.example.com/photo.jpg.

, url URL-. .10.1,
<a> href.
. ,
<a> url:
<aitemprop=url href="http://diveintomark.org/"> </a>

- : url http://datavocabulary.org/Person. http://diveintomark.org/.

, , ,
. HTML, XX, ,
, .
- , , . , :
<TABLE>
<TR><TD><TD>
<TR><TD><TD>
<Ahref=# onclick=goExternalLink()>http://diveintomark.org/</A>
</TABLE>

name itemprop
, . ,
, :
<TR><TD><TD itemprop="name">

url. HTML-
<a> . href
, - , URL-
JavaScript- onclick (
). , ,
goExternalLink(), ,
( , ,
!).
, . <a>
. , , href, <a> href
. -
url
:

172

10.

<TABLE itemscope itemtype="http://data-vocabulary.org/Person">

<TR><TD><TD>
<TR><TD><TD>
<span itemprop=url>
<Ahref=# onclick=goExternalLink()>http://diveintomark.org/</A>
</span>
</TABLE>

<span> ,
: .
( , , DOM- innerHTML).
. http://diveintomark.org/ <a>,
<span>.
. .
HTML , , , , .

, , .
,
. .
, . , ? ,
, (http://diveintohtml5.
org/examples/person.html) . : http://diveintohtml5.org/examples/person-plus-microdata.html.
HTML-, -
:
<section>
<img width="204" height="250"
src="http://diveintohtml5.org/examples/2000_05_mark.jpg"
alt="[ , . 2000 .]">
<h1> </h1>
<dl>
<dt></dt>
<dd> </dd>
<dt></dt>
<dd> , Google, Inc.</dd>
<dt> </dt>
<dd>
100 Main Street<br>
Anytown, PA 19999<br>

</dd>
</dl>
<h1></h1>

173

<ul>
<li><ahref="http://diveintomark.org/"> </a></li>
<li><ahref="http://www.google.com/profiles/pilgrim"> Google</a></
li>
<li><ahref="http://www.reddit.com/user/MarkPilgrim"> Reddit.com</
a></li>
<li><ahref="http://www.twitter.com/diveintomark"> Twitter</a></li>
</ul>
</section>

, ,
. itemtype itemscope, ,
, .
<section>:
<section itemscope itemtype="http://data-vocabulary.org/Person">

, , . : http://diveintohtml5.org/examples/person.html; : http://
diveintohtml5.org/examples/person-plus-microdata.html.

http://datavocabulary.org/Person. ? ,
http://data-vocabulary.org/Person. , , , . ,
-,
. , URL ?
.10.2 Person.
10.2. Person

name
nickname
photo
title
role
url
affiliation
friend
contact
acquaintance
address

(, )
(, )
- (, )
, (, -)
-

-
-
( street-address, locality,
region, postal-code country-name)

174

10.

. , <img>. , <img> , ; itemprop="photo":

photo? src. .10.1 , <img> src. <img>

src ( ),
URL-. ? HTML ,
.
, <img>. <section> , itemscope.
-: . : <section> .
, <section>, ,
. <section> ( ) . itemprop -
.., :
[ <section itemscope itemtype="...">]
[ <img itemprop="photo">]
http://diveintohtml5.org/examples/2000_05_mark.jpg [
<img src>]

, <section>
itemscope itemtype. itemprop="photo"
<img>. - ,
.10.1 : <img>
, src.
, <h1>
<dl>. <h1>, <dl> .
HTML- .
,
, . <h1> , . <dt> , .
<h1> </h1>
<dl>
<dt></dt>
<dd> </dd>

<dd>,
itemprop. name;

175

, <dd>. - ?
.10.1 : <dd> ,
.
, :
<dd itemprop="name"> </dd>

- -: . , .
. HTML- :
<dt></dt>
<dd> , Google, Inc.</dd>

Person, , ,
Google, Inc. , , : title ( ) affiliation (Google, Inc.). ? , .
. : 18
, 12
.
. , , ,
, Google, Inc.? CSS .
, <span>, CSS-.
.
, ,
, title affiliation, <span> <span> :
<dt>Position</dt>
<dd><span itemprop=title> </span> for
<span itemprop=affiliation>Google, Inc.<span></dd>

! : . Google, Inc..
. ,
.
.
Person address, . address (http://data-vocabulary.
org/Address). : street-address, locality,
region, postal-code country-name.
, , , ,
. :
Person;
Person.address;
Person.address.street-address;

176

10.

Person.address.locality;
Person.address.region;
Person.address.postal-code;
Person.address.country-name.

<dd> (,
<dt> ,
). , address
, itemprop <dd>:
<dt> </dt>
<dd itemprop="address">

, address
. itemscope itemtype:
<dt> </dt>
<dd itemprop="address" itemscope
itemtype=http://data-vocabulary.org/Address>

,
. itemtype itemscope <section>, <section>, ,
Person. : itemtype itemscope ( <dd>) ( <section>).
, HTML DOM. <dd> - ,
, <dd>. <dd>
</dd>, , ( <section>).
Address , title affiliation. ,
.
<span> <span> :
<dd itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
<span itemprop=street-address>100 Main Street</span><br>
<span itemprop=locality>Anytown</span>,
<span itemprop=region>PA</span>
<span itemprop=postal-code>19999</span>
<span itemprop=country-name>USA</span>
</dd>
</dl>

, -: . , , 100 Main Street. Anytown. PA ( ). 19999, . .

177

: ?
: . Address
.

, . , ,
, -
; . ,
,
, -

, streetaddress:
<pitemprop="address" itemscope
itemtype="http://data-vocabulary.
org/Address">
<span itemprop="street-address">
100 Main Street
Suite 415
</span>
...
</p>

, ,
URL-. Person url. , , - ( , ). , url . URL-,
: , ,
, Facebook Twitter.
, url. ,
.
, . , ,
( photo) URL- . URL-: , Google,
Reddit.com Twitter
. HTML- : <a>,
<li>. <a>
itemprop="url":
<h1></h1>
<ul>
<li><ahref="http://diveintomark.org/"
itemprop=url> </a></li>
<li><ahref="http://www.google.com/profiles/pilgrim"
itemprop=url> Google</a></li>
<li><ahref="http://www.reddit.com/user/MarkPilgrim"
itemprop=url> Reddit.com</a></li>
<li><ahref="http://www.twitter.com/diveintomark"
itemprop=url> Twitter</a></li>
</ul>

.10.1, <a> : href,

178

10.

. ,
, ( )
: URL- http://diveintomark.org/. URL- http://www.google.com/profiles/pilgrim, URL http://www.reddit.com/user/MarkPilgrim URL- http://www.twitter.com/
diveintomark.
Google Rich Snippets. ,
. , ? , . ,
. ? ,
HTML5:
;
.
HTML5 DOM API,
- ,
.
API. . , , ,
, API .
HTML- . , ?
,
- ? ,
, , , , , ,
, .
? .
Google Rich Snippets (http://
www.google.com/support/webmasters/bin/answer.py?hl=en&answer=99170 ).
- Google , http://data-vocabulary.org/Person,
. Google
, . , (http://diveintohtml5.org/examples/person-plus-microdata.html),
:
Item
Type: http://data-vocabulary.org/person
photo = http://diveintohtml5.org/examples/2000_05_mark.jpg
name =
title =
affiliation = Google, Inc.
address = Item( 1 )
url = http://diveintomark.org/
url = http://www.google.com/profiles/pilgrim

179

url = http://www.reddit.com/user/MarkPilgrim
url = http://www.twitter.com/diveintomark
Item 1
Type: http://data-vocabulary.org/address
street-address = 100 Main Street
locality = Anytown
region = PA
postal-code = 19999
country-name = USA

: photo <img src>, URL- <ahref> (

Item 1) .
Google ? . , ,
, . Google ,

Mark Pilgrim, ,
, , .10.1.

.10.1. , ,

, <title>.
Google . , . Anytown
PA , http://
data-vocabulary.org/Address . Developer advocate Google, Inc.
http://data-vocabulary.org/Person (title affiliation ).
,
, , .
- HTML- ,
.

: , , Google . ?

: Google ,
, -

180

10.

, (http://www.google.com/support/webmasters/
bin/answer.py?hl= en&answer=99170).
Google , . , -

HTML5,
, .
, , , ,
. , !

- . , , , , , .
? .
(http://diveintohtml5.
org/examples/organization.html). HTML- , :
<article>
<h1>Google, Inc.</h1>
<p>
1600 Amphitheatre Parkway<br>
Mountain View, CA 94043<br>

</p>
<p>650-253-0000</p>
<p><ahref="http://www.google.com/">Google.com</a></p>
</article>

, ,
. : http://diveintohtml5.org/examples/organization.html; : http://
diveintohtml5.org/examples/organization-plus-microdata.html.

. <article>,
:
<article itemscope itemtype=http://data-vocabulary.org/Organization>

, itemscope
itemtype , <article>.
itemtype (
http://data-vocabulary.org/Organization). itemscope ,
, - <article>, .
Organization? . . .10.3.

181

10.3. Organization

name
url
address
tel
geo

( street-address,
locality, region, postal-code, country-name)

( :
latitude longitude)

<article>
<h1>. <h1> ,
itemprop="name":
<h1 itemprop=name>Google, Inc.</h1>

.10.1, <h1>
, , . - : Google,
Inc..
( ). , .
itemprop="address" ,
( <p>).
address Organization.
itemtype itemscope, ,
, Address,
:
<pitemprop=address itemscope
itemtype=http://data-vocabulary.org/Address>

, , Address (street-address, locality, region, postal-code,

country-name), <span> :
<pitemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
<span itemprop=street-address>1600 Amphitheatre Parkway</span><br>
<span itemprop=locality>Mountain View</span>,
<span itemprop=region>CA</span>
<span itemprop=postal-code>94043</span><br>
<span itemprop=country-name>USA</span>
</p>

- : , . 1600
Amphitheatre Parkway. Mountain View.
CA ( ). 94043, .

182

10.

. ,
. - , .
, :
<pitemprop="tel">650-253-0000</p>

, Address
<p>.
Organization.
, , ,
. , HTML-,
:
<p>
: <span itemprop="tel">650-253-0000</span><br>
: <span itemprop="tel">00 + 1* + 6502530000</span>
</p>

.10.1, <p> <span> . tel, ,

. Organization ; tel . ,
, , .
, .
, url, . , URL- (Person), , ,
. URL- , , ..
( ) itemprop="url":
<p><aitemprop=url href="http://www.google.com/">Google.com</a></p>

.10.1, <a> : href,

. -: - URL http://www.google.com/. ; Google.com .
, W3C API ( .
6), , .
, . , , <h1> , <h1> itemprop,
: () . : <img> ,

183

itemprop, :
.
. ( !) . -
. Google,
URL- (, , , Google).
- ,
URL- , . , URL-
, , .
, , HTML5 . . - ,
.
. , , , , ,
( ,
, , ).
.
, , , , .
. ,
,
. , ,
, , , .
<article>, , <span>
:
<span itemprop=geo itemscope
itemtype=http://data-vocabulary.org/Geo>
<meta itemprop="latitude" content="37.4149" />
<meta itemprop="longitude" content="-122.078" />
</span>
</article>

, , , . <span> :
itemprop="geo" , geo;
itemtype="http://data-vocabulary.org/Geo" ,
;

184

10.

itemscope ,
, itemtype. , , Geo (http://data-vocabulary.org/Geo),
Organization (http://data-vocabulary.org/Organization).

, :
? <meta>.
HTML <meta> <head> (. HEAD 3). HTML5 <meta> . :
<meta itemprop="latitude" content="37.4149" />

.10.1, <meta> :
content.
,
.
.
.
Google Rich Snippets
Organization, . , , , Google Rich Snippets.

. . ,

-? .
(http://
diveintohtml5.org/examples/event.html):
<article>
<h1> Google (2009)</h1>
<img width="300" height="200"
src="http://diveintohtml5.org/examples/gdd-2009-prague-pilgrim.jpg"
alt="[ ]">
<p>
Google (Google Developer Day)
Google , ,
.
" ", -, Google
Maps, OpenSocial, Android, AJAX API, Chrome Google Web Toolkit.
</p>
<p>
<time datetime="2009-11-06T08:30+01:00">6 2009 ., 8:30</time>
–
<time datetime="2009-11-06T20:30+01:00">20:30</time>

185

</p>
<p>
-<br>
5th kvtna 65<br>
14021 4<br>

</p>
<p>
<ahref="http://code.google.com/intl/cs/events/developerday/2009/home.html">
GDD </a></p>
</article>

, , . : http://diveintohtml5.org/examples/event.html; : http://
diveintohtml5.org/examples/event-plus-microdata.html.

<article>,
itemtype itemscope:
<article itemscope itemtype=http://data-vocabulary.org/Event>

Event URL- http://data-vocabulary.org/

Event.
. (.10.4).
10.4. Event

summary
url
location

description
startDate
endDate
duration
eventType
geo
photo

, , . ,
Organization (. ) Address (. )

(ISO-)
(ISO-)
(ISO- )
(, ).
,
( : latitude longitude)
, ,

<h1>. .10.1,
<h1> ,
, . ,
itemprop, ,
<h1> :
<h1 itemprop=summary> Google (2009)</h1>

186

10.

-: Google (2009).
, photo. , <img>. photo Person (. ), photo Event URL-. .10.1
, , <img>, src, <img> itemprop:
<img itemprop=photo width="300" height="200"
src="http://diveintohtml5.org/examples/gdd-2009-prague-pilgrim.jpg"
alt="[ ]">

-: http://diveintohtml5.org/
examples/gdd-2009-prague-pilgrim.jpg.

:
<pitemprop=description>
Google (Google Developer Day)
Google , ,
.
" ", -, Google
Maps, OpenSocial, Android, AJAX API, Chrome Google Web Toolkit.</p>

.
, . HTML5, ,
<time> (.
3), . :
<time> ?
.10.1, , <time> .
, <time>, datetime. startDate endDate Event
ISO- , datetime <time>.
HTML () . , , , -, HTML ( <time>), -,
<time> itemprop:
<p>
<time itemprop=startDate datetime="2009-11-06T08:30+01:00">6 2009 .,
8:30</time>
–
<time itemprop=endDate datetime="2009-11-06T20:30+01:00">20:30</time>
</p>

-: 6 2009 8:30
20:30 ( , GMT+1).
location. Event ,
Organization Address.

187

-, . , , .
, <p> location
,
http://data-vocabulary.org/Organization:
<pitemprop=location itemscope
itemtype=http://data-vocabulary.org/Organization>

<span>
itemprop:
<span itemprop=name>-</span><br>

"name" Organization, Event. <p> Organization, </p> .

, .
. , , , Organization.
, : (Address)
(Organization), (Event):
<span itemprop=address itemscope
itemtype=http://data-vocabulary.org/Address>

, , <span>, itemprop ( ,

,
).
<span
<span
<span
<span

itemprop=street-address>5th kvtna 65</span><br>

itemprop=postal-code>14021</span>
itemprop=locality> 4</span><br>
itemprop=country-name></span>

. <span> ( Address), :
</span>

, <p> ( Organization)
:
</p>

(Event). , geo, . Geo,

188

10.

( ). <span> ,
itemtype itemscope. <span>
<meta>, ( latitude) ( longitude):
<span itemprop=geo itemscope itemtype=http://data-vocabulary.org/Geo>
<meta itemprop=latitude content="50.047893" />
<meta itemprop=longitude content="14.4491" />
</span>

<span> Geo, Event.

: url. URL- ,
(. ) (. ).
HTML, <a href>,
itemprop="url":
<p>
<aitemprop=url
href="http://code.google.com/intl/cs/events/developerday/2009/home.html">
GDD
</a>
</p>
</article>

, (http://diveintohtml5.org/examples/event.html),
: ConFoo . ,
: ( Event) (
Geo) (Address). , :
,
.
Google Rich Snippets. Google Rich Snippets
, (http://diveintohtml5.org/examples/eventplus-microdata.html) Google :
Item
Type: http://data-vocabulary.org/Event
summary = Google (2009)
eventType =
photo = http://diveintohtml5.org/examples/gdd-2009-prague-pilgrim.jpg
description = Google (Google Developer Day)
Google
, , .
" ",
-
startDate = 2009-11-06T08:30+01:00
endDate = 2009-11-06T20:30+01:00

189

location = Item(__1)
geo = Item(__3)
url = http://code.google.com/intl/cs/events/developerday/2009/home.html
Item
Id: __1
Type: http://data-vocabulary.org/Organization
name = -
address = Item(__2)
Item
Id: __2
Type: http://data-vocabulary.org/Address
street-address = 5th kvtna 65
postal-code = 14021
locality = 4
country-name =
Item
Id: __3
Type: http://data-vocabulary.org/Geo
latitude = 50.047893
longitude = 14.4491

, . , ,
(Item(__1), Item(__2) ..), .
Google
: .
Google -? , : Google
, . .10.2.

.10.2. , ,

, , Google
. : Fri, Nov 6. - HTML-
.
ISO: 2009-11-06T08:30+01:00 2009-11-06T20:30+01:00. Google,
, , ,
, .

190

10.

. Google : + + (
). , : name, street-address, region, locality countryname. Google , . , HTML- ,
;
. -
,
.

- (, ,
) . .
, ,
. .
, , , . (http://diveintohtml5.org/examples/review.html):
<article>
<h1>Anna'sPizzeria</h1>
<p> (4 5 )</p>
<p> - </p>
<p>
. "
". ,
.
, : .
.
</p>
<p>
100 North Salem Street<br>
Apex, NC 27502<br>
USA
</p>
<p> , 31 2010 .</p>
</article>

, , . : http://diveintohtml5.org/examples/review.html; : http://
diveintohtml5.org/examples/review-plus-microdata.html.

<article>, itemtype itemscope. URL- :

191

Review? .10.5.
10.5. Review

itemreviewed
rating
reviewer
dtreviewed
summary
description

, , ..,
1 5; Rating (http://data-vocabulary.org/Rating)
,
(ISO-),

: itemreviewed , <h1>.
itemprop :
<h1 itemprop="itemreviewed">Anna'sPizzeria</h1>

; .
: summary
, , description :
<pitemprop="summary"> - </p>
<pitemprop=description>
. "
". ,
.
, : .
.</p>

location geo , ,
( , , ,
, ):
<pitemprop=location itemscope
itemtype=http://data-vocabulary.org/Address>
<span itemprop=street-address>100 North Salem Street</span><br>
<span itemprop=locality>Apex</span>,
<span itemprop=region>NC</span>
<span itemprop=postal-code>27502</span><br>
<span itemprop=country-name>USA</span>
</p>
<span itemprop=geo itemscope
itemtype=http://data-vocabulary.org/Geo>
<meta itemprop=latitude content="35.730796" />
<meta itemprop=longitude content="-78.851426" />
</span>

:
. , ,

192

10.

, , , 31 2010. ? , (. ),
itemprop. ,
<time>, , itemprop. ,
, <span>:
<p>
<span itemprop="reviewer"> </span>,
<time itemprop=dtreviewed datetime=2010-03-31>
31 2010 .
</time>
</p>
</article>

. . Review 1 5, 1 , 5 . , , , ,
, :
<p> (<span itemprop=rating>4</span> 5 )</p>

, itemprop="rating"
( 4) .
? . , 0 10 itemprop="rating"
, , Rating (http://data-vocabulary.org/
Rating), :
<pitemprop=rating itemscope
itemtype=http://data-vocabulary.org/Rating>

(<span itemprop=value>9</span>
<span itemprop=worst>0</span>
<span itemprop=best>10</span>)
</p>

- :
9 10- .
, ? , .
, Google Rich
Snippets , (http://www.google.

com/webmasters/tools/richsnippets?url=//diveintohtml5.org/examples/review-plus-microdata.
html):

193

Item
Type: http://data-vocabulary.org/Review
itemreviewed = Anna'sPizzeria
rating = 4
summary = -
description = .
address = Item(__1)
geo = Item(__2)
reviewer =
dtreviewed = 2010-03-31
Item
Id: __1
Type: http://data-vocabulary.org/Organization
street-address = 100 North Salem Street
locality = Apex
region = NC
postal-code = 27502
country-name = USA
Item
Id: __2
Type: http://data-vocabulary.org/Geo
latitude = 35.730796
longitude = -78.851426

, , ( Google, ..) ,
.10.3.

.10.3. , ,

:
Live microdata playground (http://foolip.org/microdatajs/live/);
HTML5 (http://bit.ly/ckt9Rj).
Google Rich Snippets:
(http://www.
google.com/support/webmasters/bin/answer.py?hl=en&answer=99170);
(http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=
146646);

194

10.

(http://www.google.com/support/webmasters/bin/answer.
py?hl=en&answer=146861);
(http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=
164506);
(http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=
146645);
(http://www.google.com/support/webmasters/bin/answer.py?hl=
en&answer=172705);
Google Rich Snippets (http://www.google.com/
webmasters/tools/richsnippets);
Google Rich Snippets (http://knol.google.com/k/google-richsnippets-tips-and-tricks).

, ? 2, HTML5-.
Modernizr (http://www.modernizr.com).

<audio> (http://bit.ly/cZxI7K):
return !!document.createElement(audio).canPlayType;
<audio> MP3 (http://ru.wikipedia.org/wiki/MP3):
var a= document.createElement('audio');
return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
<audio> Vorbis (http://ru.wikipedia.org/wiki/Vorbis):
var a= document.createElement('audio');
return !!(a.canPlayType && a.canPlayType('audio/ogg;
codecs="vorbis"').replace(/no/, ''));
<audio> WAV (http://en.wikipedia.org/wiki/WAV):
var a= document.createElement('audio');
return !!(a.canPlayType && a.canPlayType('audio/wav;
codecs="1"').replace(/no/, ''));
<audio> AAC (http://ru.wikipedia.org/wiki/Advanced_Audio_Coding):
var a= document.createElement('audio');
return !!(a.canPlayType && a.canPlayType('audio/mp4;
codecs="mp4a.40.2"').replace(/no/, ''));

196

<canvas> (. 4):
return !!document.createElement('canvas').getContext;
<canvas>, API (. 4):
var c= document.createElement('canvas');
return c.getContext && typeof c.getContext('2d').fillText == 'function';
<command> (http://bit.ly/aQt2Fn):
return type in document.createElement(command);
<datalist> (http://bit.ly/9WVz5p):
return options in document.createElement(datalist);
<details> (http://bit.ly/cO8mQy):
return open in document.createElement(details);
<device> (http://bit.ly/aaBeUy):
return type in document.createElement(device);
<form>, (http://bit.ly/cb9Wmj):
return 'noValidate' in document.createElement('form');
<iframe sandbox> (http://blog.whatwg.org/whats-next-in-html-episode-2-sandbox):
return sandbox in document.createElement(iframe);
<iframe srcdoc> (http://blog.whatwg.org/whats-next-in-html-episode-2-sandbox):
return srcdoc in document.createElement(iframe);
<input autofocus> (. . 148):
return 'autofocus' in document.createElement('input');
<input placeholder> (. . 147):
return 'placeholder' in document.createElement('input');
<input type="color"> (http://bit.ly/9HkeNn):
var i= document.createElement(input);
i.setAttribute(type, color);
return i.type !== text;
<input type="email"> (. 9):
var i= document.createElement('input');
i.setAttribute('type', 'email');
return i.type !== 'text';
<input type="number"> (. 9):
var i= document.createElement('input');

i.setAttribute('type', 'number');
return i.type !== 'text';
<input type="range"> (. 9):
var i= document.createElement('input');
i.setAttribute('type', 'range');
return i.type !== 'text';
<input type="search"> (. 9):
var i= document.createElement('input');
i.setAttribute('type', 'search');
return i.type !== 'text';
<input type="tel"> (http://bit.ly/bZm0Q5):
var i= document.createElement(input);
i.setAttribute(type, tel);
return i.type !== text;
<input type="url"> (.- 9):
var i= document.createElement('input');
i.setAttribute('type', 'url');
return i.type !== 'text';
<input type="date"> (. 9):
var i= document.createElement('input');
i.setAttribute('type', 'date');
return i.type !== 'text';
<input type="time"> (. 9):
var i= document.createElement('input');
i.setAttribute('type', 'time');
return i.type !== 'text';
<input type="datetime"> (. 9):
var i= document.createElement('input');
i.setAttribute('type', 'datetime');
return i.type !== 'text';
<input type="datetime-local"> (. 9):
var i= document.createElement('input');
i.setAttribute('type', 'datetime-local);

197

198

return i.type !== 'text';

<input type="month"> (. 9):
var i= document.createElement('input');
i.setAttribute('type', 'month');
return i.type !== 'text';
<input type="week"> (. 9):
var i= document.createElement('input');
i.setAttribute('type', 'week');
return i.type !== 'text';
<meter> (http://bit.ly/c0pX0l):
return value in document.createElement(meter);
<output> (http://bit.ly/asJaqH):
return value in document.createElement(output);
<progress> (http://bit.ly/bjDMy6):
return value in document.createElement(progress);
<time> (http://bit.ly/bI62jp):
return valueAsDate in document.createElement(time);
<video> (. 5):
return !!document.createElement('video').canPlayType;
<video>, (http://bit.ly/9mLiRr):
return 'track' in document.createElement('track');
<video poster> (http://bit.ly/b6RhzT):
return poster in document.createElement(video);
<video> WebM (http://www.webmproject.org):
var v= document.createElement('video');
return !!(v.canPlayType && v.canPlayType('video/webm; codecs="vp8,
vorbis"').replace(/no/, ''));
<video> H.264 (. 5):
var v= document.createElement('video');
return !!(v.canPlayType && v.canPlayType('video/mp4; codecs="avc1.42E01E,
mp4a.40.2"').replace(/no/, ''));
<video> Theora (. 5):
var v= document.createElement('video');

199

return !!(v.canPlayType && v.canPlayType('video/ogg; codecs="theora,

vorbis"').replace(/no/, ''));
contentEditable (http://bit.ly/aLivbS):
return isContentEditable in document.createElement(span);
Drag-and-drop (http://bit.ly/aN0RFQ):
return draggable in document.createElement(span);
SVG (http://www.w3.org/TR/SVG/):
return !!(document.createElementNS && document.createElementNS
(http://www.w3.org/2000/svg, svg).createSVGRect);
SVG text/html (http://hacks.mozilla.org/2010/05/firefox-4-the-html5-parser-inline-svgspeed-and-more/):
var e= document.createElement(div);
e.innerHTML = <svg></svg>;
return !!(window.SVGSVGElement && e.firstChild instanceof
window.SVGSVGElement);
WebSimpleDB (http://dev.w3.org/2006/webapi/WebSimpleDB/):
return !!window.indexedDB;
Web Sockets (http://dev.w3.org/html5/websockets/):
return !!window.WebSocket;
Web SQL (http://dev.w3.org/html5/webdatabase/):
return !!window.openDatabase;
(. 6):
return !!navigator.geolocation;
(http://bit.ly/9JGAGB):
return !!(window.history && window.history.pushState &&
window.history.popState);
(http://dev.w3.org/html5/webstorage/):
return ('localStorage' in window) && window['localStorage'] !== null;
(http://bit.ly/dBGnqr):
return !!document.getItems;
(cross-document messaging) (http://bit.
ly/cUOqXd):
return !!window.postMessage;

200

- (. 8):
return !!window.applicationCache;
(http://dev.w3.org/html5/webstorage/):
try {
return ('sessionStorage' in window) && window['sessionStorage'] !== null;
} catch(e) {
return false;
}
, (server-sent events) ( http://dev.w3.org/html5/
eventsource/):
return typeof EventSource !== 'undefined';
API (http://dev.w3.org/2006/webapi/FileAPI/):
return typeof FileReader != 'undefined';
(Web Workers) (http://bit.ly/9jheof):
return !!window.Worker;
Undo (http://bit.ly/bs6JFR):
return typeof UndoManager !== undefined;

:
HTML5 (http://bit.ly/bYiOQp);
(http://www.w3.org/TR/geolocation-API/);
Server-Sent Events (http://dev.w3.org/html5/eventsource/);
WebSimpleDB (http://dev.w3.org/2006/webapi/WebSimpleDB/);
Web Sockets (http://dev.w3.org/html5/websockets/);
Web SQL Database (http://dev.w3.org/html5/webdatabase/);
(http://dev.w3.org/html5/webstorage/);
(http://bit.ly/9jheof).
JavaScript- Modernizr (http://www.modernizr.com)
HTML5-.

HTML5

Загружено:

HTML5

Загружено:

1. ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

<ICON name="NoEntry" href="http://note/foo/bar/NoEntry.xbm">

HTTP2 HTTP 1992.

<AHREF="..." INCLUDE>. </A>

<IMG HREF="http://nsa.gov/pub/sounds/gorby.au" CONTENT-TYPE=audio/basic>

Display PostScript , Adobe NeXT.

System7, Linux Usenet.

, <br />, <hr />. MIME- application/xhtml+xml,

W3C HTML Web Applications1.0 HTML5.

2009 XHTML2. (http://www.w3.org/2009/06/xhtml-faq.

(Michael Smith), (Henri Sivonen) .

HTML5 <canvas> (http://bit.ly/9JHzOf)

2011 1.6 - 2.0. .

, Modernizr (. Modernizr: HTML5- ):

HTML5 1 (. ). HTML5 , window

, Modernizr (. Modernizr: HTML5- ):

, Modernizr (.Modernizr: HTML5- ):

<input type="email"> (http://bit.ly/aaDrgS).

2 (. ). , DOM-, <input>, placeholder ( HTML- ).

, Modernizr (.Modernizr: HTML5- ):

, lang xml:lang. HTML-1. ?

<link rel="shortcut icon" href="/favicon.ico" />

<META HTTP-EQUIV=Content-Type CONTENT=text/html; charset=ISO-8859-1>

<meta charset> (http://simon.html5.org/

rel="start" rel="begin" rel="first", rel="last" rel="end". ,

. favicon.ico URL, , . HTML5

Safari, Google Chrome WebKit.

<h1><h6> <hgroup>. , <header>

Internet Explorer ( IE8 ) ARTICLE

DOM-, Internet Explorer:

. Internet Explorer : Internet Explorer 8-,

HTML5. HTML5 <article>, ( )

? <h2> <h1> <header>. <header>,

<time datetime="2009-10-22T13:59:47-04:00" pubdate>

pubdate . <time> <article>, pubdate

EDT (Eastern Daylight Time) . .

<footer>? , , - <div id="footer">.

2. <div class="w3c_footer-nav"> <nav>,

, HTML5- Internet Explorer:

HTML5 <canvas> (http://bit.ly/9JHzOf)

Internet Explorer ExplorerCanvas.

Internet Explorer ExplorerCanvas.

Internet Explorer ExplorerCanvas.

Internet Explorer ExplorerCanvas.

Internet Explorer ExplorerCanvas.

Internet Explorer ExplorerCanvas.

, Internet Explorer : Internet

MEncoder (http://www.mplayerhq.hu/DOCS/HTML/en/encoding-guide.html), AVI-.

, 1.0 2008, 1.1 2009.

MPEG-1 Audio Layer3

Advanced Audio Coding

Apple, iPod, AppleTV QuickTime, AAC-

9 2010 Google Chrome ,

Chromium, Mozilla Firefox Opera

Internet Explorer9 WebM ,

Ogg- Theora Vorbis Ogg. Mozilla Firefox Google Chrome . . .

Advanced audio encoding controls ( -

Basic quality and resolution control (

H.264 video H.264

--preset "X", X HandBrake (

-acodec vorbis , Vorbis, -

Greasemonkey (http://www.greasespot.net), Firefox.

<source>, WebM, , MIME- (video/webm, video/ogg) (VP8, Theora):

MIME-, : type <source>.

Ogg, MPEG-4, WebM-. , MIME- .

msdn.com/ie/archive/2010/03/16/html5-hardware-accelerated-first-ie9-platform-preview-availablefor-developers.aspx), IE9 H.264

AAC MPEG-4, Safari Macintosh Mobile Safari iOS.

coords : latitude (), longitude

getCurrentPosition() , . , Gears , Gears. API

, , geo.js show_map() loc. coords

JavaScript HTML5- localStorage

HTML5, Modernizr (.Modernizr:

, localStorage , ( gGameInProgress ). , (gPieces, JavaScript)

openDatabase('documents', '1.0', 'Local document storage', 5*1024*1024,

, . - Indexed Database API,

, : , type="email" ? , type="email". type="email" .

openDatabase('documents', '1.0', 'Local document storage', 510241024,