HTMI5

CSS3
-


2-
Rooksn

Level Up with Today's Web Technologies

Brian P. Hogan

2nd edition
The Pragmatic Bookshelf
Raleigh, North Carolina

Dallas, Texas

-


2-
[>0-
-
- -

2014

HTML5 CSS3. -
. 2- .

.
A.
.
JI.
B.
.

32.988.02-018
004.76838.5
.

68 HTML5 CSS3. - . 2- .
.: , 2014. 320 .: . ( ).
ISBN 978-5-496-00979-9
HTML5 CSS3 -, ,
. ,
HTML5 CSS3.
HTML5 CSS3 , ,
-.
HTML5,
, , , -
Flash. ,
-
, CSS3.
, .
HTML5 CSS3;
HTML5
, .

12 + ( 12 .
ISBN 978-1937785598 .
ISBN 978-5-496-00979-9

29 2010 . 436-.)

2013 The Pragmatic Programmers, LLC

, 2014
,
, 2014

Pragmatic Bookshelf. .

.
, , ,
. , ,

, .
, 192102, -, . (. ), . 3, , . 7.
005-93, 2; 95 3005 .
10.01.14. 70x100/16. . . . 25,800. 1700. 23.

. 180004, , . , 34.

1. HTML5 CSS3........................................ 19
I.

2. ...........................30
3. -............................

59

4. ..................93
5. ..................................... 119
II.
6. ...................................... 140
7. ...................................162
8. ...................................... 185
III.
9. ................

218

10. A P I ............................. 246

11. ?

........................................... 282

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

298

. jQuery.................................. 307
. ..........................317
...................................................................

.....................................................................................................9
.......................................................................................................11

HTML5: .............................. 12
............................................. 12
............................................. 15
.......................................... 16
JavaScript jQuery.................... 17
1. HTML5 CSS3......................................................................... 19

1.1. -................................. 19
1.2. .................................. 24
I.

2. ............................................30

1.
........................................ 33
2.
<meter>.............................46
3.
........................................... 51
4. F A Q .......... 56
................................................. 57
3. - ...................................................... 59

5. ..................61
6.
73
7. ......................................74
8.
JavaScript................................... 78

9. ............................... 84
.................................................92
4. .......................93

10.
................................................95
11. (:after)................................. 105
12. ..................... 108
13. ...................... 112
................................................ 118
5. ...............................................................119

14. ARIA ....................... 121

15. .. 126
16. ..........................133
................................................ 137
II.
6. ................................................................... 140

17. ....................................141
18. RGraph.................. 150
19. SVG.........................157
................................................ 161
7. .............................................................162

7.1. ......................................... 163

7.2. ...................................... 164
20. ........................................ 169
21. ...................................... 174
22. ..................................... 180
................................................ 184
8. ................................................................... 185

23. .............................. 187

24. , ...................... 192
25. ............................... 200
26. ................................. 206
................................................ 216
III.
9. ....................................... 218

27. Web Storage........221

28.
IndexedDB..................227
29. .....................................242
................................................ 245

10. API.................................................. 246

30. .....................................248
31. ................... 253
32. Web Sockets................................ 260
33. : Geolocation.................269
34. ....................................... 273
................................................281
11. ? .......................

282

11.1. Flexible Box...................283

11.2. ...........................286
11.3. Web Workers............................................ 286
11.4. .............................. 292
11.5. ...................................... 295
11.6. W e b G L ................................................. 297
11.7. !................................................ 297
. ...........................................................298

.1. ......................................... 298

.2. ................................................ 299
.. .................................................. 299
.4. .................
300
.5. ............................................ 301
.6. ............................................ 301
.7. C S S 3 ...........................
302
.8. ....................... 304
A.9. API...............................................305
. j Q u e r y .............................................................307

.1. jQuery.......................................... 307

.2. jQuery.....................
308
.. ............................... 309
.4. ...................................... 311
.5. ................................................ 312
.6. document.ready................................
315
.7. jQuery............................. 316
. ............................................317

B.1. ....................................... 317

.2. Web
......................... 318
.............................................................................................................319

.................................................. 320

. ,
, ,
.
, .
,
.
The Pragmatic Bookshelf

. (Susannah Pfalzer)
, .
,
- ( ,
). (Dave Thomas) (Andy Hunt)
, . !
,
.
,
. , :
(Cheyenne Clark), (Joel Clermont),
(Jon Cooley), - (Chad Dumler-Montplaisir),
(Jeff Holland), (Michael Hunter),
(Karoline Klever), (Stephen Orr), (Dan Reedy),
- (Loren Sands-Ramshaw), (Brian Schau),
(Matthew John Sias), (Tibor Simic),

10

(Charley Stran) (Colin Yates).

, ,
.
(Jessica Janiuk)
Android.
(Chris Warren), (Chris
Johnson), (Mike Weber), (Nick LaMuro),
(Austen Ott), (Erich Tesky), (Kevin
Gisi) (Jon Kinney) .'
, ,
. ,
. , , ,
.

- -
. ,
12 -.
, -, - .
HTML5 CSS3 ,
,
(Chrome, Safari, Firefox, Opera Internet Explorer)
.
HTML5 CSS3 ,
-. ,
,
. HTML5
,
,
. CSS3 ,
,

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

12

HTML5:
HTML5 , , JavaScript API,
. , HTML5
HTML5,
.
CSS3 (, , )
HTML.
HTML5 .
:
HTML5.

HTML5 CSS3
.
,
. Geolocation
Web Sockets. HTML5,
HTML5 CSS3
.

,
HTML5 CSS3.
, ,
.
, ,

. .
(HTML5 CSS3),
.
, CSS3,
, CSS3, .
,
, ,
.
,
JavaScript jQuery.

13

,

.
HTML5 CSS3.
,
. ;

, .
CSS3, ,
.
HTML5
(canvas) . ,
,
CSS3, , .
HTML5 Web Storage,
IndexedDB ,
. Web Sockets
, , HTML5
.
Geolocation API .
,
. HTML5
CSS3 ,
. 11.
HTML5,
, ,
. jQuery,
.
-
HTML5.

HTML,
.

.
: Google Chrome, F: Firefox, IE: Internet Explorer, O: Opera, S: Safari, IOS:
iOS Safari, A: Android Browser.

14

Internet Explorer,
Internet Explorer 8. Microsoft
.
HTML5
CSS3. ,
.
, CSS 1,
, .
, HTML5 CSS
.
HTML CSS,
, , - HTML
CSS.
HTML and CSS: Design and Build Websites [D ucll],
.
Designing with Web Standards [Zel09],
,
JavaScript jQuery2 (
). jQuery,
, ,
,
Pragmatic Guide toJavaScript [ 10],
JavaScript.
JavaScript , ,
.

;
, Internet Explorer 7 .

HTML5, ,
:
2,
<meter>.
1 http://www.w3.org/TR/css3-grid-layout/
2 http://www.jquery.com/

15

4, FAQ.
8,
JavaScript.
16, .
19, SVG.
22, .
26, .
28,
IndexedDB.
34, .
11 CSS Flexible Box,
, (web workers),
CSS.
,
.
- Node.js,
.

, .
,
. .
1,
template/, .
:

<link rel="stylesheet" href="stylesheets/style.css">

, .
, , ,
.
, .

http://pragprog.com /titles/bhh52e/

16

, ,
Firefox 20 , Chrome 20 , Opera 10.6 Safari 6.
,
. Android iOS ,
.
Internet Explorer
Internet
Explorer 8
. Microsoft Windows
VirtualBox1 . Microsoft
-
Modern.IE, VirtualBox, Parallels
VMWare2. ,
.
Node.js
,
HTML CSS -,
.
, .
Node.js ,
Node.js3.
0.10.0.
(Node
Packaged Modules) .
Node.js.
Node.js .
,
( , Windows)
(, $)
:
$ npm install
1 http://virtualbox.org
2 http://modem.ie
3 http://nodejs.org

17

( $):
$ node server

8000.
http://localhost.8000 .
,
IP - ,
. ,
, ,
,
, .

JavaScript jQuery
JavaScript. JavaScript
<head> ,
(, jQuery document. readyQ)
, DOM (Document Object Model)
.
, .
. , jQuery,
,
DOM .
, jQuery , .
,
document.getElementById(),
DOM, Internet
Explorer 8, jQuery.
,
. ,
, ,

. .

1 ,
.
1 http://www.pragprog.com /titles/bhh52e/

18

, ,
, .
,
.
, 1.
, .
? ! HTML5 CSS3 .

, , [email protected] ( , ).
!

1 http://www.beyondhtml5andcss3.com/

 HTML5 CSS3

HTML5 CSS3 ,
W3C (World Wide Web Consortium) .
, ,
-.
HTML5 CSS3,
,
, .

1.1. -
HTML
-. HTML5

,

.

HTML5
,
. HTML5 ,
Internet Explorer 6, .
W3C (, ,
).

20

1 HTML5 CSS3

, - HTML XML,
doctype.
,
. doctype
,
. doctype
.
XHTML 1.0
Transitional, :
1
<!DOCTYPE html PUBLIC
"-//W3C//DTDXHTML 1.0
"http://www.w3.org/TR/xhtmLl/DTD/xhtmLl-transitionaL.dtd">

doctype HTML5 :

<!DOCTYPE html>

HTML5. ,
HTML5, ,
HTML5.

HTML ,
, .
, ,
, 2.
,
.

HTML5 ,
. ,
doctype, . ,
, JavaScript <script>
:
script language="jovoscript" typ

 HTML5 CSS3

21

HTML5 , JavaScript
<script>,
.
, UTF-8,

cmeta charset=,,t/t/-8">

<meta http-equiv="Content-Type" content="text/htmLj
charset=utf-8">

-.
,
, .
,
JavaScript,
. HTML5 CSS3
.
/ ................................................................................................
XHTML.
?

, ! Polyglot Markup1.
XHTML - .
XHTML ,
,
,
World Wide Web. HTML5 ,
. HTML5
HTML5, XHTML,
.
, - HTML MIME text/html,
Internet Explorer application/
xml+xhtml MIME, XHTML.
1 http://w w w .w 3.org/T R /htm l-polyglot/

22

1 HTML5 CSS3

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

,
, 2 script! script
,
XHTML.

HTML5. ,
MIME.
http://www.webdevout.net/
a rticles/bewa re-of-xh tm I#myths.

HTML5
.
JavaScript CSS ,
. HTML5
, ,
. 3,
-.
, ,
-.
, JavaScript,

.

,
.

HTML5
, .
, ,
nav div . -

 HTML5 CSS3

23

,
.
,
. ,

. 5 ,
.

CSS3
,
.
. 4 , .

, , -
, . CSS3

.
, .
8.

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

, -
,
ActiveX Flash. HTML5
,
.

24

1 HTML5 CSS3

.
,

.
,
, .
HTML5
. , , 31,
.
Web Sockets
HTML5 Web Sockets,
.

- ,
.
32, Web Sockets.

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

1.2.
HTML5 CSS3
. , .
Internet Explorer
Internet Explorer
, 8 HTML5
CSS3. IE 10 ,

 HTML5 CSS3

25

,
Windows Vista .
, HTML5 CSS3
. Internet Explorer,
, , Chrome
Firefox. ,
.
.

,
- ,

. HTML5
<audio>, <video> <canvas>. -
, <canvas>
, .
HTML JavaScript.
,
5 % , JavaScript 1.
----------------------------------------------------------------------------------------------------

. , , .
.
-, ,
JavaScript .
. ,
.

, . .
, -,
JavaScript.
.
, .

, .
HTML5
, Internet Explorer.
1 http://visualrevenue.com/blog/2007/08/eu-and-us-javascript-disabled-index.html

26

1 HTML5 CSS3

HTML5 ,
,
-1. ,
.
.
, !
CSS:
basefont;
big;
center;
font;
s;
strike;
tt;
u.

,
<f ont> <center> ,
Dreamweaver.
,
.
: PeopleSoft, Microsoft Outlook Web Access
. ,
,
. ,
:
frame;
frameset;
noframes.

, CSS JavaScript.
, ,

1 http://w w w .w 3.org/TR /htm l5-diff/

 HTML5 CSS3

27

,
, -. ,
C S S position:fixed.
-
:
acronym abbr;
applet object;
dir ul.

,
. :
align;

link, vlink, alink text body;

bgcolor;
height width;

scrolling if rame;
valign;

hspace vspace;
cellpadding, cellspacing border table.
profile head .
, WordPress.
, longdesc <img> <iframe>.
, ,
, longdesc
.
HTML5 ,
,
.
W3C Validator1 .

<

Internet Explorer ,
HTML5 CSS3. Google, Apple Mozilla
1 http://validator.w3.org/

28

1 HTML5 CSS3

, .
- ,
. , <audio>
Safari MP3, OGG
. , Firefox OGG
MP3.
.

, ,

, .
, .
7.
HTML5 CSS3
, ,
. Firefox, Chrome Safari
HTML5,
; ,
. , box-shadow
CSS3 ,
Web Sockets .
HTML5 CSS3
, . HTML5
http://www.w3.org/TR/html5/. CSS3
, http://www.
w3.org/Style/CSS/current-work.
-,
, JavaScript Flash.
, ,
JavaScript
.
,
HTML5.
,
.

,
HTML5 CSS3
, .
, ,

.


contenteditable.

,
- .
,
<div> banner, sidebar, article, footer
. . .
, <div>
,
.
:
<div id="poge">
<div id
="navbar_wrapper">
<div id="navbar">
<ul>
c l i x a href="/">Home</a></li>
c l i x a href="/products">Products</ax/li>
</ul>
</div>
</div>
</div>

, ,
div, .
, ,
(inline) ,

31

<div> . id -

, ,
.
,
.
, . HTML5
,
.
, / ,
HTML5 ,
.
,
<meter> progress,
HTML5, .
, ,
. HTML5,
.

:
header

. [5, F3.6, S4, IE8,

010]
footer

. [5, F3.6, S4, IE8,

010]
<nav>

. [5, F3.6,
S4, IE8, 010]
section

. [5, F3.6, S4, IE8, 010]
article

( ). [5,
F3.6, S4, IE8, 010]
aside

. [5, F3.6, S4,

IE8, 010]

32

(,
). [ ]
<meter>

, . [8,
F16, S6.011]
progress

. [8, F6, S6, IE10, 011]


data-. [
JavaScript getAttribute()]

 1.

33

1.

.
-, ,
(, , . .),

.

, , ,
. HTML5 , <section>, <header>
<nav> .
, ,
.
, (,
(), ) , ,
. HTML
AwesomeCo.
AwesomeCo Blog!
Latest Posts

Archives

Contributors

Contact Us

Archives

How Many Should We Put You Down For?

QctPfrsr 2Q1.3

Posted by Brian on October 1st, 2013 at 2:39PM

The first big rule in sales is that if the person leaves
empty-handed, they're likely not going to come back.
Thats why you have to be somewhat aggressive when
youre working with a customer, but you have to make sure
you don't overdo it and scare them away.

"Never give someone a

chance to say no when
selling your product."

One way you can keep a conversation going Is to avoid asking questions that have yes or no
answers. For example, if youre selling a service plan, don't ever ask "Are you interested in our 3
or 5 year service plan?" Instead, ask "Are you interested in the 3 year service plan or the 5 year
plan, which is a better value?" At first glance, they appear to be asking the same thing, and while
a customer can still opt out, it's harder for them to opt out of the second question because they
have to say more than just "no."

Copyright 2013 AwesomeCo.

Home

About

Terms of Service

Privacy

. 1.

August 2013

July_2Q13
Juris .20.13

. May2

April 2013
March 2013
February 2013
January 2013
More

34

. 2 .
:
.

. (pull quotes).
.

.
, ,
div HTML5.

section
header

!
,
[- .

article

!'........ _

is lll

footer

footer

. 2. HTML5

 1.

35

doctype
HTML5,
.
index.html HTML5:

1 <!DOCTYPE html>
2 <html lang="en-L/S">
3
<head>
4
cmeta chanset="ut/-S" />
5
<title>AwesomeCo Blog</title>
6
</head>
7
8
<body>
9
</body>
10 </html>

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

HTML5:
<!DOCTYPE html>

.
doctype . -,
,
. -, Internet Explorer
6-8
, .
doctype HTML5 .
<meta> 4.
. ,
,
.
, .

36

(, <hl>, <h2>
. .) , .
.

1 header id
="page_header">
2
<hl>AwesomeCo Blog!</hl>
3 </header>

.
,
id ( 1).

CSS JavaScript.

<footer> .
,
(
).
,
; ,
.
.
,
, .

.
html5_new_tags/index.html

<footer id="page_footer">
<p>Copyright 2013 AwesomeCo.</p>
</footer>

. , ,
, .

 1.

37

.
,
,
HTML.
.
, ,
.
.
,
; .
AwesomeCo,
,
.
footer .

footer id
="page_footer">
<p>Copyright 2013 AwesomeCo.</p>
<nav>
<ul>
< l i x a href="#">Home</ax/li>
< l i x a href="#">About</ax/li>
< l i x a href="#">Terms of Service/ax/li>
< l i x a href="#">Privacy/ax/li>
</ul>
</nav>
</footer>

CSS, .
,
; CSS.
.

(section) .
<div>,
, section.

38

html5_new_tags/index.html
<section id="posts">
</section>

, .
!
.

.

<article>
-.
(, , , ,
, ) ,
. <article>
.
?
, (,
, . .).
:
,
. , ,
.
(, )
. ,
.
,
. :

<article class="post">
<header>
<h2>How Many Should We Put You Down For?</h2>
<p>Posted by Brian on
<time datetime=,,2013-10-017"14:39,,>October 1st,
2013 at 2:39PM</time>
</p>
</header>
<P>

 1.

39

The first big rule in sales is that if the person leaves

empty-handed, they're likely not going to come back. That's
why you have to be somewhat aggressive when you're working
with a customer, but you have to make sure you don't overdo
it and scare them away.
</p>
<P>
One way you can keep a conversation going is to avoid asking
questions that have yes or no answers. For example, if
you're selling a service plan, don't ever ask &ldquo;Are you
interested in our 3 or 5 year service planP&rdquo; Instead,
ask &ldquo;Are you interested in the 3 year service plan or
the 5 year plan, which is a better valueP&rdquo;
At first glance, they appear to be asking the same thing, and
while a customer can still opt out, it's harder for them to
opt out of the second question because they have to say more
than just &ldquo;no.&rdquo;
</p>
<footer>
< p x a href="comments"xi>25 Comments</ix/a> ...</p>
</footer>
</article>
<header> <f oot e r >,
.
<s e c t i o n >.

,
, , ,
.
aside.
htmlSjiewjtags/index.html
<aside>
<P>
Sldquo;Never give someone a chance to say no when
selling your product.&rdquo;
</p>
</aside>
<aside>.
, .

40

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

 1.

41

.

. ,
aside, .
, . <aside
, . ,
,
.
( )
section <nav>.

section id
<nav>
<h3Archives/h3>
<ul>
<lixa
<lixa
<lixa
<lixa
<lixa
<lixa
<lixa
<lixa
<lixa
<lixa
</ul>

href = "2013/10"
>October 2013</a/li>
href = "2013/09
>September 2013</ax/li>
href = "2013/08
>August 2013</ax/li>
href ="2013/07"
Duly 2013</ax/li>
href="2013/06">Dune 2013</ax/li>
href ="2013/05"
>May 2013</ax/li>
href ="2013/04"
>April 2013</ax/li>
href ="2013/03">March 2013</ax/li>
href ="2013/02">February 2013</ax/li
href="2013/01">3anuary 2013</ax/li>

</nav>
#

</section>

.
<nav>;
.
.
.

42

,
<div>. stylesheets/style,
css HTML, .

<link

rel="styLesheet"href

="styleshee

a
,
.
css
body{
margin: 15 auto;
font-family: Arial, "MS Trebuchet", sans-serif;
width: 960px;

}
p{ margin: 0 0 20px 0;}
p, li{ line-height: 20px; }

.
_

#page_header{ width:100%; }

.
html5_new_tags/stylesheets/style.css
#page_header > nav > ul, #page_footer > nav > ul{
list-style: none;
margin: 0;
padding: 0;

}
#page_header > nav > ul > li, footer#page_footer nav > ul > li{
margin: 0 20px 0 0;
padding:;
display:inline;

>

 1.

43

<li>,
.
margin --- (
, 12 ).

.
posts , ;
. ,
.

#posts{
float: left;
width: 74%;

}
#posts aside{
float: right;
font-size: 20px;
line-height: 40px;
margin-left: 5%;
width: 35%;

>

.
#sidebar{ ^
float: left;
width: 25%;

*'*

>
, .
clear, .
: float
. clear ,
1.

1 https://developer .m ozilla.org/en-US/docs/W eb/CSS/clear

44

#page_footer{
clear: both;
display: block;
text-align: center;
width: 100%;

}
.
, , .

Internet Explorer 9, Firefox, Chrome, Opera
Safari, Internet
Explorer 8. , Internet
Explorer 8 ,
, ,
1990- .
Internet Explorer 8
?
JavaScript .
.
<head> , -
.
,
Internet Explorer.

O' '

<!--[if lte IE 8]>

<script>
document.createElement("nav");
document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("aside");
document.createElement("articLe");
</script>
<![endif]-->

 1.

45

Internet
Explorer 9.0. ,
.
,
JavaScript.
: ,
.
,
, JavaScript.

,
.
HTMLshiv1 ; ,

.

1 http://code.google.eom/p/html5shiv/

46

2.

<meter>
AwesomeCo
,
$5000. , AwesomeCo
$5000. AwesomeCo
,
, . 3.

Our Fundraising Goal

Help us reach our goal of $5000!

. 3.

, <div>,
CSS,
<meter >, .
<meter> .
,

(, ,
). , <meter>
,
.
,
$5000. ,
<meter> .
HTML5.
,
2500.00.

<h3>Our Fundraising Goal</h3>

cmeter title="USD" id

 2.

47

value="2500.00" min="0" max="5000.00">

</meter>
<p>Help us reach our goal of $5000!</p>

CSS.
stylesheets/style.css :

meter{

width: 280;
}
CSS <head>
HTML:

<link rel="styLesheet" href="styLesheets/styLe.css">

,
<meter> ,
.

<meter>.
jQuery
, <meter>.
javascripts/fallbackjs, JavaScript.
jQuery .
, <meter> ,
, max.
, ,
<meter> .
noMeterSupport():
html5_meter/javascripts/fallback.js
var noMeterSupport = function(){
return(document.createElement( 'meter').max === undefined);

}
jQuery
<meter>.

48

fakeMeter,
; ,
fill;
. .
, <meter> .
1 if (noMeterSupport()) {
var fakeMeter, fill, label, labelText, max, meter, value;
meter =
$("#pLedge_goaL"
;
)
value = meter.attr("va.ue");
5
max = meter.attr("mox")j
labelText =
+ meter.val();
fakeMeter = $("<divx/div>");
fakeMeter.addClass
("meter");
label =
$("<span>"+ labelText + " " ) ;
label. addClass
{"Label")',

10

15

20

fill =
$("<divx/div>);
fill.addClass
("fiLL")-,
fill.css("widttj",(value / max * 100) +
fill.append("<Gfiv
fakeMeter.append(fill);
fakeMeter.append(label);
meter.replaceWith(fakeMeter);

);
styLe='cLear:both; x
;

- ,
jQuery.
JavaScript ,
.
.meter{
border: lpx solid #000;
display: block;
position: relative;
width: 280px;

}
,
(relative) .
:

 2.

49

background-color: #693;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.37, rgb(14,242,30)),
color-stop(0.69, rgb(41,255,57))

);
background-image: -moz-linear-gradient(
center bottom,
rgb(14,242,30) 37%,
rgb(41,255,57) 69%

);
}

8.
.

.label{
position: absolute;
right: 0;
top: 0;
z-index: 1000;

}

. .
. 4.

Our Fundraising Goal

Help us reach our goal of $5000!

. 4.

50

, JavaScript, ,
meter; ,
.


, <progress>, HTML5.
<progress> <meter>,
,
. , ,
,
, .
:

<progress id="progressbar" min="0M max="100" value="0"></

progress>

Ter <progress>, <meter>,

. , JavaScript
.
HTML5-Progress\
(Lea Verou).

1 http://lea.verou.me/polyfills/progress/

 3.

51

3.


, - JavaScript
, ,
.

re l class.
.
data-;
HTML5.
,
, ,
, .

,
JavaScript.
,
onclick
,
. ,
,
, ,
, .
,
.
, .
,
.
,
. AwesomeCo
,
. :

52

html5_popups_with_custom_data/original_example_l.html
< href='#

1ik="

window, open
( ' he Lp/hoLi day_pay
'uidth=300jheight=300') ;">

Holiday pay
</a>

, ,
. ,
JavaScript .
,
, .

!
JavaScript, .
, .
href
. ,
.

< href='

holiday_.html'
onclick="winc/ow.open(this. href}
MinNamej 'width=300}heig
ht=300');">
Holiday pay
</a>

JavaScript href
.
,
, JavaScript.
JavaScript
.
onclick
,

. onclick ,

, Wi,

 3.

53

, ,
onclick - . JavaScript
.
- ,
HTML .

.

<

href=''help/holiday_ .htmlclass="popup">Holiday </>

,
jQuery. ,
<body>, jQuery.

<script
/ / a j a x . g o o g l e a p i s .
/ajax/Libs/jquery/1
/jquery.min.js'>
</script>

<script>
:
$ (". popup").click(function(event){
event.preventDefault();
window.open(this.getAttribute('href'));

;
jQuery
popup, click
.
, click, ,
. preventDef ault
.
.
-
,
. , JavaScript,
.

54

!

JavaScript. ,
, c o n c lic k Q
. .
:

<

href="heLp/hoLiday_pay.htmL
data-width="600"
data-height="400"
titl e="HoLidayPay"
class="popup">Holiday pay</a>

click,

window,open().

$(".")
.click(function(event){
event.preventDefault();
var link = this;
var href = link.getAttribute("hre/");
var height = link.getAttribute(c/ata-height");
var width = link.getAttribute("data-width");
window.open (href,
"popup"}
"height=" + height +"jwidth=" + width +

});
jQuery click( ).
, , -
this. getAttribute(),
.
! .

( ,
JavaScript).
,

 3.

55

doctype H T M L 5 , , data-,

.

dataset.
,
:

var height = link.dataset.height;

var width = link.dataset.width;

, . , Internet Explorer 10
, . -,
data-mobile-imagesize, dataset.mobilelmageSize.
dataset
(camel case).

.

.
, ,
, , JavaScript.

56

4.
FAQ
, , - ,
, FAQ (Frequently Asked
Questions). FAQ ,
;
, . ,
, FAQ,

.
- ,
<div> ,
.
,
<dl>.
HTML <dl>
(Definition List)
. HTML5 <dl> (Description
List). ,
.
, AwesomeCo
FAQ, , .

FAQ . <dl>
, <dt>.
<dd>.
<article>
<hl>AwesomeCo FAQ</hl>
<dl>
<dt>What is it that AwesomeCo actually does?</dt>
<dd>
<P>
AwesomeCo creates innovative solutions for business that
leverage growth and promote synergy, resulting in a better
life for the global community.
</p>

 4. FAQ

57

</dd>
</dl>
</article>

, . 5;
.
AwesomeCo FAQ
What is it that AwesomeCo actually does?
AwesomeCo creates innovative solutions for business that leverage growth and promote synergy, resulting in a bettor life for the global community.

. 5. FAQ

HTML.
FAQ JavaScript,
.
<dl> ; HTML5
.
.

.
,
.
nav, article>footer{display:none}

. ,

JavaScript. ;
, ,
(<dialog>), (<mark>)
.
,
. 6
.

58

, JavaScript ,
Ajax
form data-remote=true. ,
,
.
HTML- UTC
.
, ;
. ,
.
!

,
, , HTML
. , , ,
,
(
Ctrl, , ,
Cmd).
, ,
jQuery UI1
HTML, CSS JavaScript. ,
, , ,
, ,
. ,
, ,
JavaScript .
,
, ,
jQuery,
.
? , ,
. ? , .
. -
, .
.
1 http://jqueryui.com /

60

3 -

, contenteditable
HTML .
:
<input type="email">
. [010.1, IOS, ]
<input type="url">

URL-. [010.1, IOS5, ]

cinput type='Tange">

. [5, S4, F23, IE10, 010.1]

<input type="number">

, -.
[5, S5, 010.1, IOS5, ]
<input type="color">

. [5, O il]
<input type="date">

. date, month week. [5,

S5, 010.1]
cinput type="datetime">

. datetime,
datetim e-local time. [S5, 010.1]
cinput type="search">

. [5, S4, 010.1, IOS]

cinput type="text" autofocus>

. [5, S4]
cinput type="email" placeholder="[email protected]">

. [5,
F4, S4]
cinput type="email" required

, .
[23, F16, IE10, 012]
cinput pattern="/A(\s*|\d+)$/">

,
. [23, F16, IE 10, 012]
contenteditable>lorem ipsumc/p>

. [4,
F3.5, S3.2, IE6, 010.1, iOS5, ]
,
.

 5.

61

5.

HTML5 ,
.
( , ),
, ,
, , (spinboxes) .
,
JavaScript.
,

. , Safari iOS URL
email
@
: /.
AwesomeCo -,
.
,
. ,
URL-,
.
,
. ,

, .

HTML5.
.
Project Information
Name
Priority
Estimated Hours
Start date

12/01/2013 :]

Email contact
Staging URL
Project color
Submit

CD

62

3 -

HTML5 HTML,
POST. ,
- , .
,
text.

<form method="post" action="

<fieldset id="personaL_information">
<legend>Project Information</legend>
<ol>
<li>
<label for="nome">Name</label>
<input typ
xa
t
"
=
e
nm=
edi
m
a
n
"
</li>
<li>
<input typ
t
i
m
b
u
s
"
=
ev
alu
</li>
</ol>

/projects/l">

e="S

</fieldset>
</form>

:
( <label>).
. fo r
;
.

div. , ,
, , .
, CSS
.

(sliders)
.

 5.

63

.
range.

<label for="priority">Priority</label>
<input typ
e="range"min="0"max="10"
nam e="priority"value="0" id="

pr

(
). Chrome, Safari Opera Slider,
.

min max. ,
.

.
, (spinboxes)
. ,

.

. ,
.

<label for="estimatec(_bours">Estimatecl Hours</label>

type="number"name=M
estimated_hours"
cinput
min="0 max="1000"
id="estimated_hours">

Chrome, Safari Opera -,

.
Estimated Hours

64

3 -

.
,
. ,
,
HTML5,
8.

, step. ^
1, .

,
.
date.

<label
for="start_date">Startdate</label>
<input typ
e="date"nam
d
_
r
a
t
s
"
=
ed
i
value="2013-12-01">

date ,

, Chrome.
Start date

/ 01/2013

Email contact

December 2013

Staging URL
Project color

|j J

Wed Thu

Fri

Sat

1 1 ^

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

Chrome Opera,
, .
.

 5.

65

email ,
. ,
.

<label for="e/77ail">Email contact</label>

<input type="emoi/." r\ame="emaiL" id="emaiL">

,
.
@ iPhone Android.

URL-
URL-
.
URL-. URL-,
:

<label for=Mi/r/.">Staging URL</label>

<input type="i/r/." name=,,i/rl" id="urL">

,
iPhone Android

66

3 -

-
( , URL-
).

,
. color.

<label for="project_coLor">Project color</label>

cinput type="cotor" nam
e="project_coLor
id

,
.
,
.

CSS.
stylesheets/style.css
<head> .

clink rel="

styLesheet"

href="sty

, :

1{
list-style: none;
margin: 0;
padding :0;

}
ol li{
clear: both;
margin: 0 0 10px 0;
padding: 0;

>
,
.

 5.

67

.CSS

la b e l{

float: left;
width: 150;

}
in p u t { border: lpx solid #333; }
i n p u t :focus{ background-color: #ffe; }

: focus
, .

-.
. CSS.
Chrome Opera ,
Firefox, Safari Internet Explorer
.

, ,
,
.
. , ,
,
jQuery UI.
,
.
, .


jQuery jQuery-simple-color1. <input>
color jQuery:
$(' input[type=coLor]') .simpleColorQ;

,

. HTML5.
1 http://recursivc-design.corn/projects/jquery-sim ple-color/

68

3 -

, SimpleColor,
, <script>,
JavaScript.
,
,
JavaScript , input
color. , .
, jQuery,
<body>:

<script
src="

http://ajax.

googLeapis.com/ajax/Libs/jquery/1.9.1
query ,min.js">

</script>

javascripts/fallbacks.js,
H T M L <script>;

<script src="javascripts/fallbacks.js"x/script>

javascripts/fallbacks.js ,
color :

1 function hasColorSupport(){
element = document.createElement("input");
element.setAttribute(
"type", ");
var hasColorType = (input.type === "color");
5
//
if(hasColorType){
var testString = "foo";
element.value = testString;
hasColorType = (input.value != testString);
10
return(hasColorType);

>

- }
type
color. type ,
. color, ,
.

 5.

69

6 .
color : ,
. .
,
. , ,
,
.
, .
, , JavaScript
<script>,
.

var applyColorPicker = function(){

$('input[type=coior]').simpleColor();

};
if (!hasColorSupport()){
var script = document.createElement('script');
script.src = "javascripts/jquery.simpLe-coLor.js";
if(script.readyState){ // IE
script.onreadystatechange = function () {
if (this.readyState === 'Loaded' ||
this.readyState === 'compLete'){
script.onreadystatechange = null;
applyColorPicker();

}
}J

}else{
//
script.onload = applyColorPicker;

}
document.getElementsByTagName("head")[0].appendChild(script);

}
Internet Explorer onreadystatechange
readystate.
onload.
, .

70

3 -

.
CSS,
:

.simpleColorContainer, .simpleColorDisplay{
float: left;

t

,
,
JavaScript. JavaScript
, .
, :

. , .
Modernizr
Modernizr1
HTML5 CSS3. ,
,
, .
Modernizr <head>
CSS. Modernizr,
.
, color:
if(Modernizr.inputtypes.color){
// color
}else{
// color

}

. Modernizr
load() ,
. :
1 http://www.modernizr.com/

 5.

71

irnizr/;
var applyColorPicker = function(){
$ ( 'input[type=coLor]').simpleColor()j

};
Modernizr.load(

{
test: Modernizr.inputtypes.color,
nope: "javascripts/jquery.simpLe-coLor.js">
callback: function(url, result){
if (!result){
applyColorPicker();

}
}
}
);
load() JavaScript,
,
.

. ,
.
color; ,
jQuery.
result, true,
, false . , result
.
result ,
.

. ,
color .
,

result.

load() yepnopejs. ,
, yepnope.jsK

1 http://yepnopejs.com /

72

3 -

load(),
Modernizr 1.
Yepnope.
Modernizr ,

Modernizr.
Modernizr ,
, .
, ,
- . , Modernizr
Safari,

Modenizr. ,
Chrome Firefox
,
Modernizr!
- ,
, Modernizr , .
, HTML5
. ,
.

1 http://modernizr .com /download/

 6.

73

6.

,
.
JavaScript, HTML5
.
, autofocus
, .

<label for="nome">Name</label>
<input type="text name="name" autofocus id="name">

autofocus="true" autofocus="autofocus"
. autofocus , .
,
autofocus. ,
.

,
autofocus JavaScript . ,
.
javascripts/fallbacks.js:

if ( !Modernizr.autofocus){
$( 'input[autofocus]')
f
. ocusQ;

>
jQuery.
JavaScript, jQuery

( ).

. ,
,
. placeholder.

74

3 -

7.
,
. <l a b e l >,
.
AwesomeCo
.
,
.

.
.
Create New Account-------------
First Name
Last Name
Smith*

Email
[email protected]

Password
8 -1 0 characters_____

Password Confirmation
Type your password a
I Sign Up |

. 6. ,

,
placeholder :
htmis_piac
cinput id
="emaiL"typ
e="emaiL"
name="emaiL" placeholdier=user@excimpLe. com">

 7.

75

<form id
="create_account"action
="method="post">
<fieldset id
="signup>
<legend>Create New Account</legend>
<ol>
<li>
<label for="/irst_name">First Name</label>
<input id
="f
"ype="text"
e
m
a
n
_
t
s
r
i
autofocus="true"
nam
eplaceholder^' 'John'">
m
a
n
_
t
s
r
i
f
"
=
</li>
<li>
<label
-For="Last_name" >LastName</label>
cinput id
="L
"yp
e
m
n
_
t
s
a
e="
nam
ep
m
n
_
t
s
a
L
"
=
laceholder="
</li>
<li>
<label for="emai/.">Emailc/label>
cinput id
L
i
a
m
e
"
=y
tp
e="emaiL
nam
e = " e m a i L " placeholde
c/li>
cli>
clabel for= "password">Passwordc/label>
cinput id="possword" typ
e
oa
w
s
a
p
"
=
nm
value=''
autocomplete="o//'' placeholder="S-10 characters" />
c/li>
cli>
clabel f
r="password_confirmation">Password Confirmationc/l
cinput id="
pasword_confirmation"typ
nam
e="password_confirmation"value=''
autocomplete="o//" placeholder^'Type your password
again" />
c/li>
cli>cinput typ
e="s
"a
t
i
m
b
u
vlue=''Sign
>c/li>
c/ol>
c/fieldset>
c/form>

, , password
autocomplete. HTML5 autocomplete,
,

76

3 -

. ,
; ,
.

, CSS
.
ts/style.css

,&:

fieldsetf
width: 21;

}
fieldset ol{
list-style: none;
padding:;
margin:2px;

>
fieldset ol li{
margin: 0 9px 0;
padding:;

>
/* */
fieldset input{
display:block;

>
Safari, Opera Chrome
.
Firefox Internet Explorer.

,
;
jQuery Placeholder1. ,
color

. javascripts/fallbacks.js,
.
HTML <script> :
1 https://github.com/mathiasbynens/jquery-placeholder

 7.

77

<script
src='http://ajax.
googLeapis.com/ajax/Libs/.9.1/jquery.
min.js'>
</script>
<script src='javascripts/faLLbacks.js'x/script>

Modernizr , . 70;
, Modernizr <head>
:

<script src= javascripts/modernizr.js'></script>

javascripts/fallbacks.js ,
jQuery Placeholder:

var applyPlaceholders = function(){

$("input").placeholder();

}
Modernizr
, :

Modernizr.load(

{
test: Modernizr.placeholder,
nope: "
javascripts/jquery.pLacehoLder.js",
callback: function(url, result){
if (!result){
applyPlaceholdersQ;

>
}
>
);
, ,
- .
,
.
, .

78

3 -

8.
JavaScript
-, ,

. , .

,
.
,
JavaScript .

, ,
.
,
JavaScript.
, .
HTML5 ,
.
,
JavaScript.
AwesomeCo
.
, .
. ,
.
,
required (
, autofocus). ,
required ,
.

<>

<label for="/irst_nome">First Name</label>

<input id
="first_name"type="text"
autofocus="true"
required

 8. JavaScript

nam
e="first_name"placeholder^'
</li>
<li>
<label for="tast_name">Last Name</label>
<input id
="Last_name"typ
required
nam
e="Last_name"placehold
er="S
'">
h
t
i
m
</li>
<li>
<label for="emoit">Email</label>
<input id
Lt
i
a
m
e
"
=
yp
required
name="emaiL" placehold
</li>

79

e="text"

e="emaiL"
er="[email protected]">

, ,
, .
,
JavaScript. Chrome:
First Name

iio h n ' "

Last Name

'Smith

Email

user@ exam pie.com

------------- 1

Please fill out this field.

, :
,
.
Email
Password
Password Confirmation

[bademail

Please enter an email address.

Type your passw ord a|

Sign Up

,
.

80

3 -

,
,
.

pattern ,
. ,
URL-,
. Password
pattern , ,
8 , ,
.

<li>
<label for="password">Password</label>
<input id="password" type="password" name="password" value=""
autocomplete="off" placeholder="8-10 characters"
pattern=n/4? = . {8j})(?=. *[a-z])(?=.*[A-Z])(?=.*[\d])
(?=.*[\H]).*$U
title="Password must be 8 or more characters with at
Least one numberj an uppercase Letterj and one speciaL
character"

/>
</li>

title
, .
,
, ,
title.
Password
Password Confirmation
Sign Up

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

5j Please m atch th e re q u e ste d fo rm at.

Password must be 8 or more characters with at
least one number, an uppercase letter, and one
special character

 8. JavaScript

81

<li>
clabel
-For="password_confirmation">PasswordConfirmation</label>
cinput id="
password_confirmation"
name="
password_confi.rmati.on"value=""
autocomplete"o//" placeholder="
Typeyour passwor
pattern"(7=.{8,})(?=.
*[a-z])
*[A-Z])(?=. *[\d])(?=. *[\kl]).*$"
.
=
?
(
title="Password confirmation must be 8 or more characters with, at
Least one
, an uppercase Letter, and one speciaL
r
e
b
m
u
n
character"

/>
c/li>

,
, .
J avaScript.

,
,
.
(, Firefox)
.
. CSS
.

:valid : invalid:

input [required]:invalid, input

border-color: #A5340B;

:invalid{

}
input[required]:valid, input
border-color: #0B9900;

[pattern]:valid{

}

.

82

3 -

.
required patter,
. ,
, required pattern

, H5F1.
, H5F
,
.
,
.
Modernizr. H5F
,
, a Modernizr ,
.
load() :

>

Modernizr.load([

{
test: Modernizr.placeholder,
nope: "
javascripts/jquery.pLacehoLde",
callback: function(url, result){
if (!result){
applyPlaceholders();

}
}
}

>
>
>
>
>
>

test: Modernizr.pattern && Modernizr.required

nope: "javascripts/h5f.min.js",
callback: function(url, result){
if (!result) {
configureHSF();

}
>

1 https://github.com /ryanseddon/H 5F

 8. JavaScript

83

H5F :

var configureHSF = function(){

H5F.setup(document.getElementById("creote_occount"));

>;
load() , .
Modernizr .load() .
(
).
document. getElementByld (), H5F
DOM. jQuery
, jQuery Element,
H5F , .

.
,
,
.
-.
,
HTML.

84

3 -

9.
-
. ,

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

User information
Edit Your Profile

Name
City
State
Postal Code
Email

Hugh Mann
Tmytowri
OH

920
boss awesomeconpany .com

. 7.

, ,
JavaScript

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

. , , JavaScript

 9.

85

, JavaScript.
, .

HTML5 contenteditable,
.
. ,
. HTML

show.html:
html5_content_editable/show.html
<!DOCTYPE html>
<html lang
="en-US">
<head>
<meta charset
="utf-8">
<title>Show User</title>
<link rel="styLes/?eet" href=''styLesheets/styLe. css">
</head>
cbody id=
forms" >
</body>
</html>

<body> .

<hl>User information</hl>
<div id="stotus"x/div>
<ul>
<li>
<b>Name</b>
<span id="name" contenteditable="true">Hugh Mann</span>
</li>
<li>
<b>City</b>
<span id="city" contenteditable="true">Anytown</span>
</li>
<li>
<b>State</b>
<span id="state" contenteditable="true>OH</span>
</li>
<li>

86

3 -
<b>Postal Code</b>
<span id
="postaL_code"contenteditable="true">92110</span>

< /li>
<li>
<b>Email</b>
<span id="emaiL" contenteditable="true">boss@awesomecompany.
com</span>

< /li>
</ul>
CSS.
,
CSS3 ,
.
stylesheets/style.css, :

ul{list-style:none;} Line 1

l i > b, l i > span{

display: block;
float: left; 5
width: 100px;

5
-

l i > span{
10

width:500px; 10
margin-left: 20px;

>

l i > span[

contenteditabLe]:hover{
background-color:#ffc; 15

15

}
l i > span[contenteditabLe]:focus{
background-color: #ffa;
border: lpx shaded#000; 20

20

}
l i { c le a r :le f t;}

3 <span>. 14 18
hover focus CSS.

 9.

87

, .
;
.

,
.
;
jQuery. - Ajax,
.
javascripts/edit.js
jQuery HTML,
<body>:

<script
src="http://ajax.googLeapis.eom/ajax/Libs/jquery/l.9.1/jquery.
min.js">
</script>
<script
src="javascripts/edit.js"x/script>

$("#edi t_profi
k
n
i
_
e
L
"). hide (>;
var status =
$("#status")
;
$(s p a n [ c o n t e n t e d i t a b L e ] " ).blur(function(){
var field = $(this) .attr("icT);
var value = $(this).text();
var resourceURL = $(this).closest("ul")
$.ajax({
url: resourceURL,
dataType: "json",
method: "
T
U
P
,
data: field + "=" + value,
success: function(data){
status.html('The record was saved.);

},
error: function(data){
status.htmlC'The record faiLed to save.);

88

3 -

>
});
});
}
span
, contenteditable true.
,
jQuery ajax().
- URL-
data-url <ul>, URL-
.
, .

9.


. ,
JavaScript .
,
,
. ,
, ,
:
contenteditable.
, JavaScript
- JavaScript (
... , ).
,
JavaScript. , ,
, .
, POST-
, Ajax.
,
accept, ,
POST- XMLHttpRequest.
contenteditable JavaScript, .

 9.

89

edit.html.
, ,
Ajax-.
html5_content_editable/edit.html
<!DOCTYPE html>
chtml lang="en-US">
<head>
<meta charset=utf-8" />
<title>Editing Profile</title>
<link hnef="styte.css" rel="stytesheet" media="screen>
</head>
<body>
<form action=M/users/l method="post" accept-charset="ut/-8">
<fieldset id="
your_information">
<legend>Your Information</legend>
<ol>
<li>
<label for="nome">Your Name</label>
<input type="text" name="name" value="" id=,,name,,>
</li>
<li>
<label for="city">City</label>
<input type="text" name="city" value="" id="city">
</li>
<li>
<label for="stote">State</label>
<input type="text" name="stote" value='" id="stote">
</li>
<li>
<label for="postaL_coc/e">Postal Code</label>
<input type="text" name="postot_code" value=""
id
="postaL_code">
</li>
<li>
<label for="emait">Email</label>
<input typ
e
La
i
a
m
"
nme="
value="" id=emoit">
</li>
</ol>
</fieldset>
<pxinput typ

e
ta
i
m
b
u
s
"
=
vlue="

></p>

90

3 -

</form>
</body>
</html>

stylesheets/style, css,
. ,
:
html5_content_editable/stylesheets/style.css
ol{
padding :0;
margin: 0;
list-style: none;
}
ol > li{
padding: 0;
clear: both;
margin: 0 0 10px 0;
}
label{
width: 150px;
float: left;
>
/* EN:edit_styles */

..

^ V

show.html.
html5_content_editable/show.html
<hl>L/ser
informatiorx/hl>
<section
id="edit_profiLe_Link">
< p x a href="
e d it.L
"htm
>Edit Your Profile</ax/p>
</section>
<div id="stotus"x/div>

. ,
Ajax
. ; Modernizr
.
contenteditable.

 9.

91

var hasContentEditableSupport = function(){

return(docufflent.getElementById(,,ec/it_pro/xLe_i.infe").
contentEditable != null)

};

> if(hasContentEditableSupport()){
> $("#edit_profiLe_Link").
hide();
var status = $("#status");
$("s p a n [ c o n t e n t e d i t a b l e ] " b
)
.lur(function(){
var field = $(this).attr("id");
var value = $(this).text()j
var resourceURL = $(this).closest("uL")
$.ajax({
url: resourceURL,
dataType:
"json",
method: "PUT",
data: field + "=" + value,
success: function(data){
status.html
("Therecord was saved.")-,

b
error: function(data){
status.html("77?e record failed to save.");

}
});
});
}


. ,
. , contenteditable,
( HTML5),
.

92

3 -

JavaScript,
, . ,
-
, ,
.

.
,
date HTML5, .
, ,
.

.
, . search
, tel , time
datetime .

, text.
,
.
, ,


, ,
.

,
;
, ,
.

,
.
, -
, .
HTML5 ,
.

CSS. JavaScript
,
.
class ,
, 50
.
! CSS3
, .
: ,
HTML
.
.
CSS3
.
CSS:
:nth-of-type [p:nth-of-type(2n+l){color: red;}]

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

IOS3, 2]
:first -child [:first-child{ color: blue;}]

. [2, F3.5, S3, IE9, 09.5, IOS3, 2]

:nth-child [p:nth-child(2n+l){color: red;}]

94

(
). [2, F3.5, S3, IE9, 0 9 .5 ,10S3, 2]
:last-child [p:last-child{color:blue;}]

. [2, F3.5, S3, IE9,09.5, IOS3,

2]
:nth-last-child [p:nth-last-child(2){color: red;}]

. [2,
F3.5, S3, IE9, 09.5, IOS3, 2]
:first-of-type [p:first-of-type{color:blue;}]

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

I0S3, 2]
:last-of-type [:last-of-type{color:blue;}]

. [2, F3.5, S3, IE 9,09.5,

IOS3, 2]
:
[#content{ column-count: 2; column-gap: 20;
column-rule: lpx solid #ddccb5; }]

. [2, F3.5, S3,

0 9 .5 ,10S3, 2]
:after [span.weight:after { content: "lbs"; color: #bbb; }]
content

. [2, F3.5, S3, IE8, 0 9 .5 ,10S3, 2]

[media="only all and (max-width: 480)"]

. [,
F3.5, S4, IE9, 0 1 0 .1 ,10S3, 2]

 10.

95

10.

CSS
, , ,
. ,
, : hover ,
. CSS3
, .

AwesomeCo
. AwesomeCo
, ,
, .
.
HTML,
. 8.
Item

Price Quantity

Coffee mug $10.00 5

Polo shirt

$20.00 5

Total
$50.00
$100.00

Red stapler $9.00 4

$36.00

Subtotal

$186.00

Shipping

$12.00

Total Due

$198.00

' . 8. HTML

,
, , .
,
. ,
.
. ,
.

96

<table >
<tr>
<th>Item</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr>
<td>Coffee mug</td>
<td>$10.00</td>
<td>5</td>
<td>$50.00</td>
</tr>
<tr>
<td>Polo shirt</td>
<td>$20.00</td>
<td>5</td>
<td>$100.00</td>
</tr>
<tr>
<td>Red stapler</td>
<td>$9.00</td>
<td>4</td>
<td>$36.00</td>
</tr>
<tr>
<td colspan="3">Subtotal</td>
<td>$186.00</td>
</tr>
<tr>
<td colspan=3">Shipping</td>
<td>$12.00</td>
</tr>
<tr>
<td colspan="3">Total Due</td>
<td>$198.00</td>
</tr>
</table>

.
stylesheets/style.css
:

 10.

97

anced selectors,
<link rel="

styLesheet"href

="styLesheets/st

css3_advanced_selectors/styleshe^JHHMMHHMMHHIIHI
table{
border-collapse: collapse;
width: 600px;

>
th, td{ border: none; }

:
.
. ............ .

th{
background-color: #000;
color: #fff;

.
I

Item
Coffee mug
Polo shirt
Red stapler
Subtotal
Shipping
Total Due

Price
$10.00
$20.00
$9.00

Quantity
5
5
4

Total

$50.00
$100.00
$36.00
$186.00
$12.00
$198.00

. .
(:nth-of-type)

(): ,
.
, CSS.

98

(, odd even ):
,
HTML5
.

, .
nth-of-type ,
.
, ,
.
,

. . CSS3
even odd, .
css3_advanced_selectors/stylesheets/style.css
t r :nth-of-type(even){
background-color: #F3F3F3;

}
t r :nth-of-type(odd) {
background-color:#ddd;

>
:
.
.
.
:

Item

Coffee mug
Polo shirt
Red stapler
Subtotal
Shipping
Total Due

Price
$10.00
$20.00
$9.00

Quantity
5
5
4

Total
$50.00
$100.00
$36.00
$186.00
$12.00
$198.00

~~1

 10.

99

(:nth-child)

. , ,
.
nth-child, ,
.
nth-child ;
nth-of-type,
.
+, , ,
0, b .
; .

table tr:nth-child(n)

, .
, ( ),
:
table tr:nth-child(n+2)

0, 2
, .
2:
table tr:nth-child(2n)

.
,
, .
, :
table t r :nth-child(2n+4)

, , ,
:
css3_advanced_selectors/stylesheets/style.css
td:nth-child(n+2), t h :nth-child(n+2){
text-align: right;
}

100

, ,
<th>, <td>.

.

Item

Coffee mug
Pok) shirt
Red stapler
Subtotal
Shipping
Total Due

Price
$10.00
$20.00
$9.00

Quantity
5

4

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

T o ta lH
$50.00
$100.00
$36.00
$186.00
$12.00
$198 XX)

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

.
(:last-child)
, ,
.
last-child,
.
-
.
.
, ,
,
. last-child
.
{ margin-bottom: 20 }
#sidebar p:last-child{ margin-bottom: 0; }

tr:last-child{
font-weight: bolder;
}

 10.

101

,
:

td:last-child{
font-weight: bolder;

>
, last-child
.
.

tr:last-child td:last-child{
font-size:24px;

}
f

Item
Coffee mug
pobshkt
Red staple:
Subtotal
Shipping

Total Due
1'
_____

Price
$10.00
$20.00
$9.00

T '

Quantity
5
5
4

T o ta l!
$50.00
$100j00
$36.00
$186.00
$12.00
$19840

_____

. -
.
(:nth-last-ehild)
,
.
nth-last-child. ,
nth-child +
(. (:nthchild) ). nth-last-child
, ,
, .
, , , .

102

,
:
t r :nth-last-child(2){
color: green;

>
.
.
, .
,
.
.
nth-last-child
.
tr:nth-last-child(-n+3) td{
text-align: rightj

>
.
3, nth-last-child
. nthchild, .
(. 9) ,
.
1----------------------------------------------------------------------------------------------I

Item
Coffee mug
Polo shin
Red stapler

Price
$10.00
$20.00
$9.00

Quantity
5
5
4
Subtotal
Shipping

Totall
$50.00
$100.00
$36.00
$18640
$12.00

Total Due

$198.00

. 9. ,
CSS3

, ,
Internet Explorer; .

 10.

103

, ,
Internet Explorer, Opera, Firefox, Safari Chrome, Internet
Explorer 8.0 .
,
.

.
,
Internet Explorer 8 . ,
, ..
HTML
, ,
.
, CSS.
;
CSS3.
, .
Selectivizr
jQuery CSS3,
,
.
Selectivizr1,
CSS3 Internet Explorer.
.
Selectivizr
jQuery, Prototype , jQuery
.
Selectivizr
<head> .
Internet Explorer, ,
IE.
1 http://selectivizr . /

104

<script
src='

h t t p : / / a j a x . g o o g L e a p i s .
/ajax/
/jquery.min.js'>

</script>
<\--[if (gte IE 5.5)&(Lte IE 8)]>
<script src="javascripts/seLectivizr-min.js"x/script>
<! [endif]
-->

: jQuery,
jQuery <head> .
jQuery , , ,
jQuery .

Internet Explorer. . 10.

^Table
-- --------------- ------------------------

Item
Coffee mug
Polo shirt
Red stapler

Qt - g -

----------

Price
$10.00
$20.00
$9.00

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

Quantity

Total

5
5
4
Subtotal
Shipping

$50.00
$100.00
$36.00
$186.00
SI 2.00

Total Dee

$198.00

. 10. Internet Explorer

JavaScript,
.
,
.
CSS3 ,
HTML.
,

.
CSS - .
, .

 11. (:after)

105

11. (: after)
CSS
,
. : before : a fte r
content. CSS
;
URL- ,
. ,
, .
,
.
AwesomeCo
.
. ,
, ,
.
CSS; Internet
Explorer 8, Firefox, Safari Chrome.
.
.

<ul>
<li>
< href=',trovet/inc/ex.htmt">Travel Authorization Form</a>
</li>
<li>
<a href="travet/expe/ises.btmt">Travel Reimbursement
Form</a>
r
</li>
<li>
<a
Uref="traveL/guideLines.htmL">Jra\/elGuidelines</a>
</li>
</ul>
</body>

,
, .
.

106

CSS
,
.
screen ,
print ,
( ).
css3jprint JLinks/index.html
<link rel="styLesheet href="print.css" tpe="text/css"
media="print">

print.css .
css3_print_links/stylesheets/prii|t.iMHH^^HHHMHi
a rafter {
content: " (" attr(href) ")

}

href .
.

F o rm s a n d P o lic ie s
* Travel Authorization Form (travel/index.html)
* Travel Reimbursement Form (travel/expenses.html)
* Travel Guidelines (travel/guidelines.html)

, ,
,
.
.
,
, Internet Explorer 8,
.

 11. (:after)

107

: before ra fte r CSS2.11.
:
a ::a fte r{
content: " (" a ttr ( h r e f ) ")
}
,

, .
content .
,
.
URL-, .
.
content CSS
, .
, ,
. ,
.

1 http://w w w .w 3.org/T R /C SS21/generate.html#before-after-content

 11. (:after)

107

: before : a fte r CSS2.11.
:
a ::a fte r {
content: " (" a ttr ( h r e f ) ") "j
}
,

, .
content .
,
.
URL-, .
.
content CSS
, .
, ,
. ,
.

1 http://www.w3.org/TR/CSS21/generate.htm l#before-after-content

108

12.

,
(
11). CSS31
. -
JavaScript
;
. -
:

.
( ).
.
.

,
.
-
,
.
,
Bootstrap2.
/ ........................... ..................................................................
Handheld?

Handheld
.
,
screen.

AwesomeCo
, - .
,
1. .
1 http://www.w3.org/TR/css3-mediaqueries/
2 http://twitter.github.com/bootstrap/

 12.

109

.
, float-.
,
.
,
:

@media only screen and (max-device-width: 480px) {

body{ width:480px; }
nav, section, header, footer{ margin: 0 10px 0 10px; }
#sidebar, #posts{
float: none;
width: 100%;

}
}

,
. ,
.

, ,
:
<link rel
="styLesheet"type="
href ="CSS/mobiLe.css"media
width: 480px)">

text/css"
="onLyscreen and (max-device-

. 11 , - .
, .

, , . .,
.
, ,
. ,
.
,
.

110

AwesomeCo Blog
LatestTosis Archives CQntribntors
Contactlls
How Many Should W e Put You Down
For?
Posted by Brian on October 1st, 2013 at
2:39PM
"Never give
The first big rule in sales is
someone a chance
that if the person leaves
to say no when
empty-handed, they're likely selling your
product."
not going to come back.
That's why you have to be
somewhat aggressive when you're working with a
customer, but you have to make sure you don't
overdo it and scare them away.

. 11. iPhone

Firefox, Chrome, Safari, Opera, Internet
Explorer 9 .

JavaScript.
iPhone,
.

, jQuery,
1. ,

min-width max-width .
.
1 http://plugins.jquery.com/project/MediaQueries

111

12.
i

Respond.js1
min- max-width; Internet
Explorer 8, ,
,
Internet Explorer 8 .
,
.

.
. , .

1 https://github.com /scottjehl/Respond

112

13.
;
- .
,

. ,
, ,
.
, ,
CSS3.

AwesomeCo
.
-. , ,
.
,
.
. 12.
AwesomeCo Newsletter
Volume 3, Issue 12

News From The Director

Lorem ipsum dolor sit amet, conscctctur adipisicing elit, scd do eiusmod tempor incididunt ut laborc ct dolorc magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ca commodo conscquat.
Du is autc irure dolor in rcpreliendcrit in voluptaic vclit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaccat cupidatat non proident, sunt in culpa qui officia dcsemnt mollit anim id cst labornm.

Being Awesome

"Lorcm ipsum dolor sit amet,

conscctctur adipisicing clit, scd
do eiusmod tempor incididunt
Lorcm ipsum dolor sit amet, conscctctur adipisicing clit, scd do eiusmod tempor incididunt ut labore ct dolore magna ut laborc et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ca commodo conscquat. aliqua y t cnim ^

Quick Bits Oi Awesome

Duis aute irurc dolor in rcprcbcnderit in voluptate vclit esse cfflum dolore cu fugiat nulla pariatur. Excepteur sint
occaccat cupidatat non proident, sunt in culpa qui officia dcsemnt mollit anim id est labornm.

Birthdays
Lorcm ipsum dolor sit amet, conscctetur adipisicing clit, sed do eiusmod tempor incididunt ut laborc et dolore magna aliqua. Ut enim ad minim veniam.
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ca commodo conscquat.
Duis aute irurc dolor in rcprcbcnderit in voluptate vclit esse cillum dolorc cu fugiat nulla pariatur. Excepteur sint occaccat cupidatat non proidcm, sunt in
culpa qui officia dcserunt mollit anim id est labornm.

. 12.

13.

113

. , ,
, .
-
div float, , , ,
. ,
. (
, In Design) ,

. - ,
, .

.
.
HTML-. ,
.

<body>
<div id
="cont
<header id
="header">
<hl>AwesomeCo Newsletter/hl>
<p>Volume 3, Issue 12</p>
</header>
section id="news/.etter">
article id="director_news">
header
<h2>News From The Director/h2>
/header
<div>
<P>

Lorem ipsum dolor sit amet...

</p>
aside cLass="caLLout">
<h4Being Awesome/h4>
<P>

SquotjLorem ipsum dolor sit amet,

</p>
/aside
<P>

Duis aute irure dolor in ...

</p>

&quot;

114

</div>
</article>
<article id=naMesome_bits''>
<header>
<h2>Quick Bits of Awesome</h2>
</header>
<div>
<P>

Lorem ipsum dolor sit amet...

< /p >

</div>
/article
article id
header
<h2Birthdays/h2>
/header
<div>

="birthdays">

<P>

Lorem ipsum dolor sit amet...

</p>
</div>
/article
/section
footer id="footer"
<h6>
Send newsworthy things to
<a hre-f="maiLto:news@awesomeco.
>[email protected]/a>.
</h6>
/footer
</div>
/body

,
:

#newsletter{
-webkit-column-count: 2;
-webkit-column-gap: 20;
-webkit-column-rule: lpx solid #ddccb5;
-moz-column-count: 2;
-moz-column-gap: 20px;
-moz-column-rule: lpx solid #ddccb5;

 13.

115

column-count: 2;
column-gap: 20;
column-rule: lpx solid #ddccb5;

>
(. 13) .
,
. ,
float .
AwesomeCo Newsletter
Volume 3, Issue 12

News From The Director

veniam, quis nosnud exercitation ullamco laboris nisi ut aliquip ex ea

commodo consequat.

Lorcm ipsum dolor sit amet, conscctctur adipisicing elit, sed do eiusmod
tempor incididunt ut laborc et dolorc magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ca
commodo consequat.
Duis aute irurc dolor in rcprcbcnderit in
voluptate velii esse cillum dolorc eu
fugiat nulla pariatur. Excepteur sint
occaccat cupidatat non proident, sunt in
culpa qui officia dcsemnt mollit anim id
est labornm.

Quick Bits of Awesome

Duis aute irurc dolor in rcprchendcrit in voluptate vclit esse cillum dolorc
eu fugiat nulla pariatur. Excepteur sint occaccat cupidatat non proident,
sunt in culpa qui officia dcsemnt mollit anim id est labornm.

Being Awesome

Birthdays

"Lorem ipsum dolor sit amet,

consectctur adipisicing clit, sed
do eiusmod tempor incididunt
ut laborc ct dolorc magna
aliqua. Ut enim ad minim
veniam."

Lorcm ipsum dolor sit amet, consectctur adipisicing clit, scd do eiusmod
tempor incididunt ut laborc et dolorc magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.

Lorcm ipsum dolor sit amet, consectctur adipisicing clit, scd do eiusmod
tempor incididunt ut laborc ct dolorc magna aliqua. Ut enim ad minim

Duis aute irurc dolor in rcprchendcrit in voluptate vclit esse cillum dolorc
eu fugiat nulla pariatur. Excepteur sint occaccat cupidatat non proident,
sunt in culpa qui officia dcsemnt mollit anim id est labornm.

. 13.

,
,
.

W3C ,
CSS,
, .
,
,
.
, .
,
,

116

.
CSS,
. , , .
:
Firefox -moz-.
Chrome Safari,
Opera -webkit-.
Opera --.
.
,
, CSS. ,
;
, .
Can I Use...1.
/ ................................................................................................
?

, . .
, .

.
, , ,
.
, , .
,
.

CSS3 Internet Explorer 9 .
, ,
.
, CSS3MultiColumn2,
.
1 http://caniuse.com/
2 https://github.com/BetleyWhitehorne/CSS3MultiColumn

 13.

117

,
. Internet
Explorer 9 ,
JavaScript, Internet Explorer 8
HTML5:

<!--[if lte IE 9]>

<script>
// HTML5
document.createElement( "section"
);
document.createElement("header");
document.createElement( "footer"
);
document.createElement("articLe");
document.createElement("aside");
</script>
<script src="javascripts/css3-muLti-coLumn.min.js"x/script>
<![endif]-->

Internet Explorer;
, .

| ** i I ?

&
^ AwesomeCoNewsletter

* 0 - [3 * 9~ Srfety- Took- '

^ "|
AwesomeCo Newsletter
Volume 3 Issue 12

News From The Director

quis nostrud exercitation uflamco laboris nisi ut aliquip ex ea commodo

consequat

Lorem ipsum dolor sit amet, coosectetur adipisiciog ek, sed do eiusmod
tempor ncidKknt ut labore et dolore magna ahqua Ut et
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat
Duis ante kwe dolor in reprebenderit in
voluptate vdi esse crflum dolore eu fugiat
nufla pariatur Excepteur sint occaccat
cupidatat non proident, sunt in cdpa qui
officia desenmt moifet anim id est
labornm

Quick Bits of Awesome

Beiag Awesome
"Lorem ipsum dolor sit amet,
coosectetur adipisicing ek. sed
do eiusmod tempor incididunt ut
laborc et dolore magna aliqua.
Ut enim ad me

Lorem ipsum dolor sit amet, coosectetur adptsicmg eht, sed do eiusmod
tempor incidkknt ut labore et dolore magna aliqua Ut enim ad minim veniam.

Duis aute irure dolor in repreheaderit in voluptate veSr esse cflum dolore eu
fugiat nufla pariatur Excepteur smt occaecat cupidatat non proident. sunt in
culpa qui officia desenmt moflit anim id est labornm

Birthdays
Lorem ipsun dolor sit amet, coosectetur adipisicing elk, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut erum ad minim veniam,
quis nostrud exercitation ullamco laboris mst ut ahqup ex ea commodo
consequat
Duis aute irure dolor m reprehenderit in voluptate velit esse ciflum dolore eu
fugiat nufla pariatur. Excepteur sint occaecat cupidatat non proident, sunt m
culpa qui officia desetunt moflit anim id est laborum

. 14. Internet Explorer ,

118

JavaScript
. ,
, .
. ,

.
.

,
,
.
;
;
, . ,
,
JavaScript .

, Internet Explorer 8 .
, moz
webkit- . ,
.

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

, ,
, .

,
-. ,
Ajax .
,

.
, , ,
, ,
.
WIA-ARIA1(Accessibility for Rich Internet Applications)
- 1 http://www.w3.org/W A I/intro/aria.php

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

, ,
, .

,
-. ,
Ajax .
,

.
, , ,
, ,
.
WIA-ARIA1(Accessibility for Rich Internet Applications)
-
1 http://ww w.w 3.org/W A I/intro/aria.php

120

.
JavaScript Ajax.
WIA-ARIA HTM L51,
HTML5. WIA-ARIA
, JAWS, WindowEyes Apple VoiceOver. WIA-ARIA
,
.
, HTML5 WAI-ARIA
. , ,
, ,
.
:
role [<div role^'document'^]
. [,
F3.6, S4, IE8, 09.6]
aria-live [<div aria-live="polite">]

(,
Ajax) . [F3.6 (Windows), S4, IE8]
aria-hidden [<div aria-hidden="true">]

,
. [F3.6 (Windows), S4, IE8]
aria-atomic [<div aria-live="polite" aria-atomic=,,true">]

. [F3.6 (Windows), S4, IE8]
<scope> [<th scope=,,col">Time</th>]

. [ ]
<caption> [<caption>This is a caption</caption>]

. [ ]
aria-describedby [<table aria-describedby^'summary'^]

. [F3.6 (Windows), S4, IE8]

1 http://www.w3.org/TR/htm l5/dom .htm l#wai-aria

 14. ARIA

121

14. ARIA

: ,
, .
, .
, ,
.
,
.

,
; -
.
, ( ),
.
HTML5 role
.

. , navigation
.
WIA-ARIA1
HTML5.

:

(, , . .),
.

application

, - (
)

banner

complementary

, ,

contentinfo

: , . .

1 http://www.w3.org/TR/wai-aria/roles

122

form

, HTML,

main

navigation

search

AwesomeCo,
1.
banner:
<header id
="page_header"role="
<hl>AwesomeCo Blog!</hl>
</header>

banner">

role="banner" <header>.
.
<nav role="
navigation">
<ul>
< l i x a href="/">Latest Posts</ax/li>
< l i x a href='.'/arcbives">Archives</ax/li>
< l i x a href="/contributors">Contributors</ax/li>
< l i x a href="
/contact">Contact Us</ax/li>
</ul>
</nav>

HTML5 ,
, . nav
navigation, .

, ARIA. ,
.
:
html5_aria/blog/index.html
<section id="posts
</section>

role=M/77air?">

 14. ARIA

<section id

123

="sidebar"role="compLementary">

<nav>
<h3>Archives</h3>
<ul>
clixa href="2013/10">October 2013</ax/li>
c l i x a href
="2013/09"
>September 2013</ax/li>
c l i x a href ="2013/08">August 2013c/a>c/li>
c l i x a href
=
73
/
3
1
0
2
"
>uly 2013c/ax/li>
c l i x a href="2013/06">3une 2013c/ax/li>
cli>ca href="2013/05">May 2013c/ax/li>
d i > c a href="2013/04">April 2013c/a>c/li>
cli>ca href="2013/03">Mah 2013c/a>c/li>
cli>ca href= "2013/02">February 2013c/ax/li>
cli>ca href ="2013/01 ">3anuary 2013c/ax/li>
c/ul>
c/nav>
c/section> c!-- sidebar -->

contentinfo.

cfooter id
="page_footer"role="
cp>&copy; 2013 AwesomeCo.c/p>
c/footer> c!-- footer -->

,
.
, .
.
/ ................................................................................................
,
, nav header?

, ,
,
.
search ,
, ,
,

124

(
).
,
.

article

definition

directory

(, ).

document

( )

group

heading

img

, .
,

list

listitem

math

note ,

presentation

, ;

row

rowheader

toolbar

-.

(, )
HTML. document ,
,

 14. ARIA

125

. ,
,
. ,

.
, ,
-.
.
document <body>.
html5_aria/blog/index.html
<body role="

document">

.


, .
, ,
.
,
.
JAWS
. JAWS ,
- 1.
JAWS Internet Explorer Firefox,
-.
NVDA
. ,
2.

.
.
,
. , .
1 http://www.freedoinscientific.com/downloads/jaws/jaws-downloads.asp
2 http://www.nvda-project.org/

126

15.

JavaScript -.
, Backbone Ember
,

1,2.
, .
, ,
. JavaScript
,
, , WebAIM 2012 , ,
JavaScript.
, ,
, -
3.
WIA-ARIA
, Internet Explorer, Firefox
Safari .
AwesomeCo
.
(Service), (Contacts) (About Us).
, ,
.
,
. ,
aria-live ,
, ,
.
. 15.
; JavaScript ,
, .
, a jQuery
1 http://backbonejs.org/
2 http://emberjs.com/
3 http://webaim.org/projects/screenreadersurvey4/

 15.

127

, .
JavaScript , ,
JavaScript . ,
.
AwesomeCo
Welcome Services

Contact

About

Contact
The contact section
Copyright 2013 AwesomeCo.
Home

About

lerms-oLSfttvifie

Privacy

. 15. jQuery

HTML5.
,
.
:

<!DOCTYPE html> ' ^

^
chtml lang="en-t/S">
<head>
<meta charset="ut/-8">
<title>AwesomeCo</title>
<link rel=MstyLes/7eet" href=style.css type="
</head>
<body>
<header id
="header''>
<hl>AwesomeCo</hl>
<nav>
<ul>
< l i x a href="#wetcome">Welcome</ax/li>
< l i x a href="#services">Services</ax/li>
< l i x a href="#contoct">Contact</ax/li>
<l i x a href="#about">About</ax/li>
</ul>
</nav>

128

5
</header>
<section id="content"
rol

e=" d o c u m e n t " a r
aria-atomic="true">

<section id="wetcome">
<header>
<h2>Welcome</h2>
</header>
<p>The welcome section</p>
</section>
</section>
<footer id=
"footer">
<p>Copyright 2013 AwesomeCo.</p>
<nav>
<ul>
< l i x a href
="http://awesomeco>Home</ax/li>
< l i x a href="obout">About</ax/li>
<lixa
href="terms.htmL">JermsofService</ax/l
c l i x a href ="
privacy.h
>
" Privacy</ax/li>
L
m
t
</ul>
</nav>
</footer>
</body>
</html>

welcome,
.
.

csection id="services">
<header
<h2>Services</h2>
</header>
<p>The services section</p>
</section>
csection id="contact">
cheader>
ch2>Contactc/h2>
c/header>
cp>The contact sectionc/p>

 15.

129

</section>
csection id="obout">
<header>
<h2>About</h2>
</header>
<p>The about section</p>
</section>

csection id="contentM
role="
atomic="true">

document"aria-live="assertive"aria-

,
.
CSS .
CSS AwesomeCo (. ).
stylesheets/style.css :

body{
width: 960px;
margin: 15 auto;

>
{
margin: 0 0 20 0;

>
> {

line-height: 20;
font-family: Arial, "A1S Trebuchet"> sans-serif;

>

:
html5_
#header{
width: 100%;

>

130

#header > nav > ul, #footer > nav > ul{
l i s t - s t y l e : none;
margin: 0;
padding: 0;
}
#header > nav > ul > li, #footer > nav > ul > li{
padding:;
margin: 0 20px 0 0;
d isp la y :in lin e ;
}
,
, .
footer#footer{
c lea r: both;
width: 100%;
display: block;
te x t-a lig n : center;
}
,
.


aria-live. polite
. ,
, po lite,
. ,
a sse rtiv e ,
.
.
a sse rtiv e .
a sse rtiv e .
, .

, aria-atom ic=true,
.

 15.

131

false, .

,
.
Ajax,
false.

, JavaScript
.

jQuery .
html5_aria/homepage/index.html

<script typ
e="text/javascript"
src ="http://ajax.googieapis.com/ajax/Libs/jquery/1
/jquery.min.js">
</script>
<script sr
</script>

c="javascripts/appLication.js">

application.js :

var configureTabSelection = function(){

$("#servicesj
itaboutj#
)
"
a
t
n
o
c
.hide()
$("#wetcome").attr

true);
("aria-hidden"}
false);

$("nav
uL")
c
.lick(function(event){
var target = $(event.target);
if(target.is("o")){
event.preventDefault();
if ( $(target.attr("/7re/"))
activateTab(target.attr(

10

){
));
"

>;
;
-

};

15
- var activateTab = function(selector){
$("[aria-hidden=faise]").hide()

true);

132

$(selector).show().attr("aria-hidden", false);
- >;
20
configureTabSelection()j

2 Services, About Contact.

aria- hidden true.
Welcome ,
false.
,
.
5 ,
7 , .
, ,
. href , ,

jQuery ( 9).
, activateTabQ,
CSS. ,
jQuery show() hide(),
aria-hidden.
, ,
.

, ,
. ,
( JavaScript)
.
- JavaScript
ARIA ,
.
.
, .

 16.

133

16.
HTML
.
.
.
, , CSS
,
.
,
, . ,
- , -
HTML5
ARIA:
<table rol

="presentation">

</table>

,
,
, .
presentation .
,
, . ,


.
,
.
AwesomeCo
AwesomeConf .
HTML.
, ,

. . 16
HTML.

134

Conference Schedule
Time

Room 100

Room 101

Room 152

Room 153

8:00

Opening Remarks and Keynote - Ballroom

AM ---------------------- ,-------------- ------ . - ----- i
Visualizing
Pop Culture And
9:00
Success
You
AM
10:00 Build a Solid Fundraising Print Is Dead Mobile First? Not Proving What
Works
So Fast!
Campaign
AM
Improving
11:00 Making Connections
Clear Content
Marketing Panel
Experiences
AM
Lunch
12:00
Use this grid to find the session you want to attend. Note that the keynote and lunch are in the ballroom.

. 16.

.
html5_accessible_tables/original_index.html
<hl>Conference Schedule</hl>
<table>
<tr>
<th>Time</th>
<th>Room 100</th>
<th>Room 101</th>
<th>Room 152</th>
<th>Room 153</th>
*</tr>
<tr>
<th>8:00 AM</th>
<td colspan="4">Opening Remarks and Keynote - Ballroom</td>
</tr>
<tr>
<th>9:00 AM</th>
<td>Creating Better Marketing Videos</td>
<td>Embracing Social Media</td>
<td>Pop Culture And You</td>
<td>Visualizing Success</td>
</tr>
</table>
<section>
<P>

 16.

135

Use this grid to find the session you want

to attend. Note that the keynote and lunch
are in the ballroom.
</p>
</section>

,
, .
.
,
.

<th> .

.
scope, ,
. :
5sible_index.html
<tr>
> <th
> <th
> <th
> <th
> <th

scope="coL">Time</th>
scope="co(.">Room 100</th>
scope="cot">Room 101</th>
scope="col">Room 152</th>
scope="col">Room 153</th>

</tr>
<tr>
sr>

<th scope="row">8:00 AM</th>

<td colspan="4">0pening Remarks and Keynote - Ballroom</td>
</tr>
<tr>

>

<th scope="row">9:00 AM</th>

<td>Creating Better Marketing Videos</td>
<td>Embracing Social Media</td>

136

<td>Pop Culture And You</td>

<td>Visualizing Success</td>
</tr>

scope=,,col",
scope="rowM.
, ,
.

,
, , .
<caption>,
<caption>
<table>:

> <caption>
> <hl>Conference Schedule</hl>
> </caption>
<tr>
/ .................................... .............
id <headers>?


<headers>:
<table>
<tr>
<th id="name">Name</th>
<th id="email"x/th>
</tr>
<tr>
<td headers="name,,>Ted</td>
<td headens=,,email">[email protected]</td>
</tr>
<tr>
<td headers="name">Barney</td>
<td header s=" email" >barney(8)puzzlesthebar.com</td>
</tr>
</table>

 16.

137

- scope.
(,
).
, ,
.
,
. aria-describedby
, .
<section . id:
<section id
="scheduLe_instructions">
<P>
Use this grid to find the session you want
to attend. Note that the keynote and lunch
are in the ballroom.
</ p>

</section>

id <table>
:
<table aria-describedby="

scheduLe_instructions">

,
. <caption>
, ,
aria-describedby, ,
.

HTML5 WIA-ARIA
Web.
JavaScript
,
. -
JavaScript , Ember, jQuery Mobile
. , ,
.



HTML5 CSS3
,
.
HTML5 <canvas>,
<audio> <video>.
CSS3 ,
, .



-,
-
, <img>.
, Flash.
HTML5 <canvas>
,
JavaScript.

, Flash .
.
JavaScript <canvas>
AwesomeCo
. ,
canvas,
.
, , canvas
, .
,
SVG (Scalable Vector Graphics)
. :
<canvas> [<canvasxp>Alternative content</px/canvas>]

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

010.1, IOS3.2, 2]
<svg> [<svgx!-- XML content --x/svg>]

XML. [4, F3, S3.2, IE9,

010.1, iOS3.2,A2]

 17.

141

17.
HTML5 <canvas>
. - ,
<canvas> . <canvas>
. ,
JavaScript.
.
canv.
<canvas id
="my_canvas"width="150" height="150">
Fallback content here
</canvas>

, <canvas>
CSS ,
(
).
JavaScript.
,
<canvas>,
JavaScript. JavaScript
, <canvas>. :

var canvas = document.getElementById(

if (canvas.getContext){
var context = canvas.getContext(

'my_canvas');
'2d');

}else{
// -
7/ <canvas>

>
<canvas> ,
getContext( ). getContext ,
20- . ,
.
,
, ,
, JavaScript.

142

,
, . ,
:

context.fillStyle =
context.fillRect (10, 10, 100, 100);

"(200,0,0)" ,

, .
2D-
. F,
.

;
10 .
i_drau
context. fillStyle =
;
context.fillRect (10, 10, 100, 100);
context.fillStyle =
context.fillRect (20, 20, 100, 100);
context.fillStyle =
context.fillRect (30, 30, 100, 100);

 17.

143

, , ,
.
AwesomeCo. , . 17,
.

/r^AwesomeCo
. 17. AwesomeCo

, ,
. HTML5.
.
<body> <script>, .

<!DOCTYPE html>
a<html lang="en">
<head>
<meta charset="t/t/-S">
<title>AwesomeCo Logo Test</title>
</head>
<body>
<script>
</script>
</body>
</html>

144

JavaScript .
20-.

var drawLogo = function(){

var canvas = document.getElementById(
var context = canvas.getContext(
);

);

?

canvas.
html5_canvas/logo.I
var canvas = document.getElementById('

Logo');

i f (canvas.getContext){
drawLogoQ;

}

logo,
canvas .
html5_canv;

llLatol

<canvas id=4ogo" width="900" height="80">

<hl>AwesomeCo</hl>
</canvas>

.


. ,
.
,
.

 17.

145

beginPath() ,
lineTo:
context. fillStyle =
context.strokeStyle =
context.lineWidth = 2;
context.beginPath();
context.moveTo(0, 40);
context.lineTo(30, 0);
context.lineTo(60, 40 );
context.lineTo(285, 40 );
context.fill();
context.closePath();

- , .
,
(, . .).
, ,
.
, stroke()
, , closePath
. .

AwesomeCo.

146

, .
AwesomeCo :

context font =
"itaLic40px^Aria ;
context.fillText {"AwesomeCo", 60, 36);

,
( ).
f illText() ,
60 36 ,
,
, .

.

, .
X
Y

, ,
.


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

/sAwesomeCo

 17.

147

save()
:
. save() ,
. save()
. , restore()
.

, stroke fill
, .
html 5_canvas/logo.html
context.fillStyle =
context.strokeStyle = "#FFFFFF" ;

"#FFFFFF";

context.lineWidth = 2;
context.beginPath();
context.moveTo(0., 20);
context.lineTo(10, 0);
context.lineTo(20, 20 );
context.lineTo(0, 20 );
context.fillQ;
context.closePath();
context.restore();

( # f f f ). ,
,
.

/n\AwesomeCo
; .

:
htmlScanvasgraphj
context.fillStyle =
.
context.strokeStyle = "#FF0000";

148

, .
.

var gradient = context.createLinearGradient(0, 0, 0, 40);

gradient.addColorStop(0,
"#M0000")j // -
gradient.addColorStop(l,
"#FF0000"
); //
context.fillStyle = gradient;
context.strokeStyle = gradient;

.
,
(,
!).
:
.
,
.
Internet Explorer 9 canvas .
.

Google ExplorerCanvas',
-Canvas API
Internet Explorer.
3.0 ,
2009 .
Subversion, ,
(
2). ,
<head> .
html5_canvas/logo_gradient.html
<!--[if lte IE 8]>
script src="javascripts/excanvas.js"x/script>
<![endif]-->

:
1 http://code.google.eom/p/explorercanvas/
2 http://explorercanvas.googlecode.com/svn/trunk/excanvas.js

 17.

149

var canvas = document.getElementById("logo");

> var G_vmlCanvasManager; //

> if (G_vmlCanvasManager != undefined) { // IE 8

>
G_vmlCanvasManager.initElement(canvas);

> }
if (canvas.getContext){
drawLogoQ;

}
ExplorerCanvas
canvas.
ExplorerCanvas
DOM , .
jQuery drawLogoQ jQuery
document.ready (), .
Internet Explorer 8.

canvas> PNG. ,
<canvas> , .
.
, - .

150

18.
RGraph
<canvas> ,
JavaScript ,
.
<canvas> .

-.
Flash, :
(, iPad iPhone).
,
.

(, canvas),
. ,

JavaScript.
. RGraph1
HTML5 . ,
JavaScript,
JavaScript, ,
, <canvas>.
.
html5_canvas/rgraph_bar_examplehtml
ccanvas width="500" height="250" id="test">[no canvas support]
</canvas>
<script src="javascripts/RGraph.common.js" ></script>
<script src="javascripts/RGraph.bar.js" ></script>
<script type="
text/javascript"charset="ut/-8">
var bar = new RGraph.Bar('test', [50,25,15,10]);
bar.Set('chart.gutter', 50);
bar.Set('chart.colors', ['red']);
bar.Set('chart.title', "A bar graph of my favorite pies");
bar.Set('chart.labels, ["Banana Creme", "Pumpkin", "Apple",
"Cherry"]);
1 http://www.rgraph.net/

 18. RGraph

151

bar.DrawQ;
</script>

JavaScript,
. ,
, . 18.
A bar graph of my favorite pies

. 18.
canvas

AwesomeCo ,
-. ,
,
. ,
, .

. 18.
HTML

, ,
JavaScript,
JavaScript.
.
JavaScript
.

<div id="graph_data">
<hl>Browser share for this site</hl>
<ul>
<li>
<p data-name="So/ori" data-percent="15">

152

Safari - 10%
</>
</>
<>

<

data-r\ame-"InternetExpLorer"data-percent="55">
Internet Explorer - 30%
</p>
</li>
<li>
<p data-name="Fire/ox" data-percent=14">
Firefox - 15%
</p>
</li>
<li>
<p data-name="Googte Chrome" data-percent="16">
Google Chrome - 45%
</p>
</li>
</ul>
</div>

HTML5
.
,
, .

. 19, , .

, <canvas>
JavaScript.

Browser share for this site

Safari -10%
Internet Explorer - 30%
Firefox -15%
Google Chrome - 45%
. 19. HTML

 18. RGraph

153

HTML
,
RGraph, RGraph Bar-graph.
jQuery.
javascripts/graph.js.

<body>:
html5_eanvas/canvas_graph.html
<script
src="http://aj .Leapis.com/ajax/Libs/jquery / 1 .9.1
/jquery.min.js">
</script>
<script src="javascripts/RGraph.common.js" ></script>
<script src="javascripts/RGraph.bar.js" ></script>
<script src=" javascripts/graph.js" ></script>

, HTML-
, RGraph.
, RGraph .
j Query.
javascripts/graph.js :
html5_canvas/javascripts/graph.js
1 var canvasGraph = function(){
var title = $('#graph_data h i ').text();
var labels = $("#graph_data>uL>Li>p[data-name]").
map(function(){
return this.getAttribute("data-name");

});
var percents = $("#graph_data>uL>Li>p[data-percent]").
map(function(){
return parselnt (this.getAttribute("data-percent"));

});
var bar = new RGraph.Bar(' b r o w s e r s percents);
10bar.Set( 'chart.gutter', 50);
bar.Set('chart.coLors', ['red']);
bar.Set('chart.title', title);
bar.Set('chart.LabeLs', labels);
bar.Draw();
15
$ ( '#graph_data').hide();

154

2 . , 3
data-name.
jQuery map.
6
.
7 .
jQuery data(),
HTML5
.
, RGraph
(. 20).
Browser support
Browser share for this site

. 20. , canvas

HTML
<canvas>.
, <canvas>,
, .
<canvas>, JavaScript,
.
canvas,
j Query canvas.
Modernizr
JavaScript, .

 18. RGraph

JJ _____

155

*1 .

var canvas = document.getElementById('browsers');

if (canvas.getContext){
canvasGraph();

>
, ,
canvas.


JavaScript.
Internet Explorer 8,
canvas.
ExplorerCanvas (. 17) RGraph
. excanvas.js
<head>, Internet Explorer 8.
Internet Explorer 7 ,
.
ExplorerCanvas
<head>,
. ExplorerCanvas
DOM,
, . .
-
. 148, ExplorerCanvas
canvas. -, j Query $( document).
ready () canvasGraph(). ,
.
j Query ,
:

> $(document),ready(function(){
var canvas = document.getElementById(
if (canvas.getContext){
canvasGraphQ;

}
});

);

156

Internet Explorer 8!
canvas
,
- .

; ,
.
, .
.

 19. SVG

157

19. SVG
.
HTML5 SVG (Scalable Vector Graphics).
Javascript,
, , ,
XML. SVG
( )
. ,

( <canvas>).
SVG, XML-
SVG AwesomeCo .
HTML <svg>:
html5_svg/index.html
<!DOCTYPE html>
chtml lang=e n >
<head>
<meta charset="utf-8">
<title>AwesomeCo Logo Test</title>
</head>
<body>
script typ
e="image/svg+xmL">
<svg id
="awesomeco_Logo"width="900" height="80">
</svg>
</script>
</body>
</html>

Ter <svg> <script> image/svg+xml.

, SVG
HTML-. <svg>
SVG. XML, ,
, <svg>.

,
. SVG <<polyline>,
.
:

158

<polyline id="
points
style=
</polyline>

="0,40
3 0 , 0 60j
40 "
fiLL:none;stroke:rgb(255,0,0);stroke-width

<canvas>,
= 0 = 0 .
<polyline>, .
0 40 .
30 0
; .
60 40 , 285
40 .
style .
, :

.

<text>.
, -
.
<text> <tspan>,
. ,
<tspan>.
,
:

<text id=
"Awes
fill
="rgb(255,0,0)"
font-family='7\riai" font-size="40"
font-style="itoLic" font-weight="normat">
<tspan x="60" y="36" fill="rgb(255,0,0)">AwesomeCo</tspan>
</text>

 19. SVG

159

/ \Aw esom eCo

.

SVG ,
. <rect>.
, .

<rect id="square"
="20" ="20" height="20" width="20"
style=
"fiiL:r g b (
2
5
5
,
0,0)" x / r e c t >

,
<polyline> style.
:

/\>4wesomeCo
.

<polygon >,
<path > ,
<canvas> .
,
,
( ).
d.
,
. ,
.

160

<path id="Triangle"
d="M20,40 L30,20 1.40,40 Z M20,40"
fill="rgb(255, 255,255)"></path>

M
. L , Z
(
). ,
: ,
. .
:

/r^AwesomeCo
SVG ,
.
CSS ( ,
).
SVG <canvas>,

. ,
. ,
. SVG
, <canvas >
. , ,
,
.

, SVG,
.
SVG Web1, SVG 1.1.
SVG Web Flash.
SVG Web svg.js svg.swf javascripts.
svg.js - <script>,
<head> :
1 https: //cod e.google.eom /p /svgw eb/

 19. SVG

<script
</script>

161

src="javascripts/svg.js"data-path

, .

, <canvas>,
. ,
<canvas> ,
Impact1 Crafty2,
. ,
JavaScript .

.
<canvas> 2-.
<canvas> -,
.
-
,
JavaScript. Three.js
, 3.
SVG, , Raphael4,
,
. , (
, Adobe Illustrator)
SVG -.
SVG
, . ,

,
, ,
.

'

http://impactjs.com/

2 http://craftyjs.com/
3 http://threejs.org/
4 http://raphaeljs.com

- .
,
,
(, Flash). HTML5
- .
,
- ,
.
:
<audio> [<audio src="drums.mp3"x/audio>]

. [4, F3.6,
S3.2.IE9, 010.1, IOS3, 2]
<video> [<video src="tutorial.m4v"x/video>]

. [4, F3.6,
S3.2, IE9, 010.5, IOS3, 2]
<source> [<source src="video/h264/01_blur .mp4" type='video/mp4'>]

- ;
. [4, F3.6, S3.2, IE9, 010.5, IOS3, 2]
<track>

,
. [18, S6.1, IE10]

Web. , , , ,
.

 19. SVG

163

7.1.
-
. MIDI- -
<embed> .
<embed src
="awesome.m
"
3
p
autostart="true"
loop="
true"controller="
"
e
u
r
t>
</embed>

Ter <embed> ,
<object>, W3C.
, <object>,
<embed> <object>:
<object>
<param name="src" value="
simpsons.mp3">
<param nam
e="autoplay''valu
e=faLse">
<param nam
e='controller"value="true">
<embed src="
awesome.mp3"
autostart
=fal.re
loop = false"controller="true"x/embed>
</object>

,
.
Web. - Web ,
RealPlayer Windows Media QuickTime.
; ,
.
,
.
Macromedia ( Adobe) ,
Flash Player -
- . Flash
97 % . ,

, Flash
.
2007 Apple iPhone iPod Touch.
, Apple Flash
( iPad). , Youtube,
, -

164

Safari iOS. ,
.264,
Flash Player, , ,

.
HTML5 ,
, ,
HTML.
- (
).
- ,
.

7.2.
Web
. , ,
AVI MPEG,
.
, - ,
(, ). -
- ; .
,
HTML5 .

.
, ,
, .
,

.
, ,
.
HTML5 video, : .264, Theora
VP8. , ,
.

 19. SVG

165

.264
[, F21 (Windows 7+), S4, IE9, iOS]
Theora
[F3.5, 4.0 ]
VP8
[5, F4, S6 IE9 ( ), 010.7]
.264
.264 , MPEG
2003 .
(, )
.264
.
,
. , iPhone Flash Player
, .264,
iPhone ,
Flash Player .

.
.264
Microsoft Apple, . ,
Google YouTube
.264, iPhone;
, .264 Flash Player Adobe.
. ,
.

.264,
, 1.
,

.
.
1 http://www.reelseo.com/mpeg-la-announces-avc-h264-ffee-license-lifetime/

166

Theora
Theora , Xiph.Org Foundation.
Theora
, .264,
. Firefox, Chrome Opera
Theora
, Internet Explorer, Safari iOS
. Apple Microsoft *

, .
,

. Theora
VP8.
VP8
VP8 Google ,
.264. Mozilla, Chrome Opera, a Microsoft
VP8 Internet Explorer 9 ,
. ,
Adobe Flash Player, .
, Safari iOS;
, ,
iPhone iPad .264.
, VP8 , .2641.

[S4, , IOS]
MP3.
[, S4, IE9, IOS]
1 http://www.fosspatents.com/2013/03/nokia-comments-on-vp8-patent.htm

 19. SVG

167

Vorbis (OGG)
[F3, 4.10]
AAC (Advanced Audio Coding)
Apple iTunes Store.
, MP3,
,
.264. , .264,
.
Apple, Adobe
Flash Player VLC.
MP3
MP3, ,
Firefox Opera - .
, Safari Google Chrome.
Vorbis (OGG)
,
; Firefox, Opera Chrome.
Theora VP8. Vorbis
,
.
-
. ,
?
:
,
- .
, .
, - .

, Web
:
OGG Theora Vorbis Firefox,
Chrome Opera.

168

MP4 .264 Safari Chrome,

Internet Explorer 9 . Adobe
Flash Player, iPhone, iPod iPad.
WebM VP8 Vorbis Firefox, Chrome,
Opera Adobe Flash Player.
Google Mozilla VP8 WebM,
Theora .
,
.264 Safari,
iOS Internet Explorer 9 VP8 Firefox Opera,
.2641.
,
.
- .

1 http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2009-June/020620.html

 20.

169

20.
AwesomeCo .

.
, .

MP3 OGG.

.

: drums, organ, bass guitar.

HTML.
drums :

article class
="sampLe">
header ><h2>Drums</h2x/header>
audio id ="drums"controls
source src="sounds/ogg/drums.ogg" type="
source
src="sounds/mp3/drums.mp3"
type="
<a hre-f="sounds/mp3/drums.mp3">Dovir\load drums.mp3</a>
/audio
/article

audio ,
.
audio source: MP3- OGG-
. type ; ,
;
.
,
, source.
, MP3 ,
audio.
Chrome, Safari Firefox.
HTML5 .

">

170

html5_audio/audio.html
<article
class="sample">
<headerxh2>Drums</h2x/header>
<audio id
="drums c
ontrols>
<source src="
sounds/ogg/drums.ogg"typ
<source
src="sounds/mp3/drums.mp3"
typ
<a href
="sounds/mp3/drums.m
>
"Download drums.mp3</a>
3
p
</audio>
</article>
<article
class="sample">
<headerxh2>Guitar</h2x/header>
<audio id ="guitar"controls>
<source src="
sounds/ogg/guitar.ogg"type="
<source
src="sounds/mp3/guitar.mp3" type="
<a href
="sounds/mp3/guitar.m
"
3
p
>Download guitar.mp3</a>
</audio>
</article>
<article class="sample">
<headerxh2>0rgan</h2x/header>
<audio id ="organ" controls>
<source src
="sounds/ogg/organ.ogg"type-"audio/ogg">
<source src
="sounds/mp3/organ.mp3"type="
<a href
="sounds/mp3/organ.m
"
3
p
>Download organ .mp3</a>
</audio>
</article>
<article class="sample">
<headerxh2>Bass</h2x/header>
<audio id="boss" controls>
<source src
="sounds/ogg/bass.ogg"type="audio/ogg">
<source src
="sounds/mp3/bass.mp3"typ
<a href
="sounds/mp3/bass.m
"
3
p
>Download bass.mp3</a>
</audio>
</article>
</body>
</html>

5- ,

(. 21).
Play.

 20.

171

Internet Explorer,
, audio.
, -
?

Samples:
Drums

0.0 )

Guitar

Organ

0:0 )

Bass

. 21. Chrome

audio.
<source>,
.
<audio>, .
Flash
.
. ,
<audio>,
. , , ,
. ,
HTML5 ,
,
.

<audio> JavaScript.

172

<article class="sampLe">
<headerxh2>Drums</h2x/header>
<audio id="drums" controls>
<source src="sounds/ogg/drums.ogg" type="audio/ogg">
<source src="sounds/mp3/drums.mp3" type="audio/mpeg">
</audio>
<a href="sounds/mp3/drums.mp3">Download drums.mp3</a>
</article>

. ,
,
.
- ,
.
audio JavaScript
1():
var canPlayAudioFiles =
!!(document.createElement( 'audio').canPlayType);

,
1() audio:
var audio = document.createElement('audio');
if(audio.canPlayType('audio/ogg')){
// ogg

canPlayType() . true
false :
"probably" , .
"maybe" , .

, .
,
false, JavaScript true.

Modernizr
. ,
canPlayTypeQ :

 20.

173

if(Modernizr.audio.ogg){
// ogg

>
if(Modernizr.audio.mp3){
// MP3

}
, ,
Modernizr
HTML5.

. HTML5
JavaScript API (. . 183).
, , ,
, .

174

21.
AwesomeCo
,
, iPad.

Photoshop,
. , .264, Theora
VP8, (

).
<video> <audio>.
, Chrome, Firefox, Safari iOS Internet
Explorer 9 - .

0 1_
:

<article>
<header>
<h2>Saturate with Blur</h2>
</header>
<video id
="video_bLur"preload="ot/to" controls
width="640" height="480">
source
src="video/h264/01_bLur.mp4"type='
source src="video/theora/01_bLur.ogv" type='
source src
="video/Mebm/01_bLur.webm"type='
<p>Your browser does not support the video tag./p>
</video>
/article

video
. preload
, autoplay
, .
video source
. ,
,
; MP4, ,
video, MP4,
.
- , ,
MIME.

 21.

175

, Apache
, -,

MIME- .

AddType video/ogg .ogv

AddType video/mp4 .mp4
AddType video/webm .webm

Amazon S3, contenttype . Microsoft Internet

Information Server, MIME
.
- MIME
, ,
. . 22.
Internet Explorer 8
.
Flash.

. 22.
Chrome

176

Flash
HTML5, Flash <video>.
Video For Everybody1 ,

.
Video.js2
. , <video>,

Flash HTML.
.
Video.js
. Video.js
,
. <head> :

<link
hre-f="http://vjs.zencdn.n
/video-js. css"
.
4
/
t
e
rel="styLesheet">
<script src="
http://vjs.zencdn.net/4.j's"x/script>

<video> :
<video i
d="video_bLur
preload="outo" controls
width="640" height="480"
class =video-jsvjs-defauit-skin"
data-setup="{7">

class Video.js ,
.
data-setup ,
JSON (JavaScript Object Notation).
,
.
Internet Explorer
,
Flash.
Internet Explorer , . 23.
1 http://camendesign.com/code/video_for_everybody
2 http://www.videojs.com/

 21.

177

, Flash
, HTML -. URL f i l e : .
,
,
Flash.
, .
r0

Video - Windows Internet Explorer

http://19216812:8000/htmt5_video/videojs_index.html

Favorites

&
r Video

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

:^

. 23. Internet Explorer Video.js

html5_video/index.html

<section class=down Loads">

<header>
<h3>Downloads</h3>
</header>
<ul>

178

< l i x a h ef="vdeo/h264/01_blur.mp4">
264, playable on most platforms</ax/li>
<lixa
href="video/theora/01_blur.ogv">OGGformat</ax/li>
<lixa
href="video/uebm/01_blur.web/n" >WebM format</ax/li>
</ul>
</section>

Modernizr
, 20.

,
. ,
,
.
Flash
Video.js Flash
, video. , -
, Flash
HTML5. ,
<video>, Flash.
, ,
Flash .
MP4
? , Flash MP4.

Video.js, Video.js
Flash, MP4.
<video> ,
, MP4:

<script>
var videoElement = document.createElement("
if(videoElement.canPlayType){
if (videoElement.canPlayType("vic/eo/mp4") === ""){
videojs("video_blur", {"techOrder": ["flash",

};
}
</script>

]>);

 21.

179

video ,
, 1(). 1()
, , ;
video js, Video.js,
.
video js
<video>, ,
.
Firefox,
MP4, Flash. ,
;
.
, .
,
,
? !

180

22.

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

, .
.

<section class
<h2>Transcript</h2>
<P>

We'll drag the existing layer to the new button

on the bottom of the Layers palette to create a new copy.
</p>
<P>

Next we'll go to the Filter menu and choose Gaussian Blur.

We'll change the blur amount just enough so that we lose
a little bit of the detail of the image.
</p>
<P>

Now we'll double-click on the layer to edit the layer and

change the blending mode to "Overlay". We can then adjust
the amount of the effect by changing the opacity slider.
</p>
<p>Now we have a slightly enhanced image.</p>
</section>

.
, .
,
. , .

 22.

181

, - .
HTML5
<track>.
, Video.js
. , Web VTT (Web Video Text Tracks).
VTT Internet Explorer 10, Chrome, Opera Safari.
.
captions video.
Ol blur.vtt. ,
.
, .
html5_video/video/captions/01_blur.vtt

WEBVTT
00:00.000 --> 00:08.906
We'll drag the existing layer to the New button on the
bottom of the layers panel to create a new copy.
00:08.906 --> 00:14.167
Now we'll go to the Filter menu and choose Gaussian Blur.
00:14.167 --> 00:22.907
We'll change the blur amount just enough so we lose a
little detail of the image.
00:22.907 --> 00:33.670
Now we'll double-click on the layer to edit the layer.
00:33.670 --> 00:41.928
And we'll change the blending mode to overlay. This allows
the original layer underneath to show through.
00:41.928 --> 00:48.812
We can then adjust the amount of the effect by changing
the opacity.
00:48.812 --> 00:57.507
And now we have a slightly enhanced image.

182

.
.
,
. , <video>
<track>, :

<track kind="captions" src="video/captions/01_bLur.vtt"

srclang="er?-i/s" label="EngLish />

,
.
.
; . 24.

And we'll change the blending mode to overlay. This allows

i
the original layer underneath to show throughj

. 24. , Video.js

,
. ,
, .
, Video.js
, .
HTML5
HTML5
.
-, HTML5
.
.
Flash (
, Adobe Flash

 22.

183

).
HTML5
(, , ).
-, .
, Hulu,
, HTML5. Flash
.
- ( ),
.
HTML5.
.264
, iPod
iPad, HTML5 video Flash.
HTML5 ,
, Flash HTML5
.
MEDIA CONTENT JAVASCRIPT API ----------------------------------------------- ----

JavaScript API audio

video. API ,
, audio.
20,
. JavaScript API,
() . :
var element = $ ( " < p x i n p u t t yp= ' b u t t o n ' vaLue= ' PLay a L L ' / x / p > " )
element,click(function(){
$(" a u d i o " ) .each(function(){
this.play();

})
});
$ ( " b o d y " ) .append(element);

Play audio
play() .
. API

.
1.
1 http://w ww .w3.org/TR/htm l5/video.html#m edia-elem ents

184

. - JavaScript

Flash.
, iPhone,
, JavaScript.
, - .
,
.
Web VTT ,
. Web VTT .
,

. HTML JSON
,
.

. ,
API, , ,
.
.

-
. CSS3
.
; ;
,
.
Photoshop ;
, . ,
.
- ,
, , .
CSS3 @font-face,
. ,
CSS .
CSS3:
border-radius [border-radius: 10pxj]

. [4, F3, S3.2, IE9, 010.5]

RGBa [background-color: rgba(255.,0,0j0.5);]
RGB
( -). [4, F3.5, S3.2, IE9, 010.1]
box-shadow [box-shadow: 10 10 5#333;]

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

010.5]

186

[transform: rotate(7.5deg);]

. [, F3.5, S3.2, IE9, 010.5]

[linear-gradient(top, #fff, #efefef);]

. [4, F3.5, S4]
src: url(http://example.com/awesomeco.ttf); font-weight: bold; }]

CSS. [4, F3.5,

S3.2, IE5, 010.1]
[transition: background 0.3s ease]

CSS . [4,
F3.5, S4, IE10]
[animation: shake 0.5s 1;]

CSS
. [4, F3.5, S4, IE 10]

 23.

187

23.
Web .
, - ,
. -
,
.
CSS3 ,
Chrome, Firefox Safari.
Internet Explorer 9 ,
. , .

AwesomeCo.

.
CSS3. , , . 25.
Existing Users
Email

. 25.

HTML.
</head>
<body>
<form
actior\="/Login"method="post">
<fieldset
id="Login">
<legend>Log in</legend>
<ol>
<li>
<label for="e/noit">Email</label>
<input id="emaiL" typ
nam
</li>
<li>

188

<label for="possword">Password</label>
<input id=
"password"
t
y
p
nam
e= "a
"
d
r
o
w
s
pa
vlue="" autocomplete=o//"/>
</li>
<lixinput type="submit" valu
li>
</ol>
</fieldset>
</form>
</body>
</html>

.
.login{
width: 250;

}
.login fieldset{
background-color: #ddd;
border: none;

}
.login legend{
background-color: #ddd;
padding: 0 64px 0 2px;

>
.login ol{list-style: none;
margin: 2px;
padding:0;

}
.login li{
margin: 0 0 9px 0;
padding: 0;

>
.login input{
background-color: #fff;
border: lpx solid #bbb;
display:block;
width: 200px;

>
.login input
[type="submit"]{
background-color: #bbb;
padding: 0;

 23.

189

width: 202;

}

. <fieldset>
<legend> .
, .

CSS

.login input .login fieldset, .login legend{

border-radius: Bpx;

}
style.css,
.

Firefox, Safari, Chrome Internet Explorer 9
10, Internet Explorer 8, ,
.
PIE1,
border-radius . PIE,
PIE.htc stylesheets.
,
. Internet Explorer <legend>
, IE
; .
IE,
, Firefox Chrome.
stylesfieets/ie.css
, IE 8 :
css3_rough_edges/index.html
<!--[if Lte IE 8]>
<link rel="styiesheet"
media="screen">
< ! [endif]-->
1 http://css3pie.com /

href="s
t
iype="
/
h
s
e
L
y

190

stylesheets/ie.css legend fieldset:

.login {margin-top: 20;}

.login fieldset legend{
margin-top: -10px;
margin-left: 10px;

}
.login fieldset{
padding-left: 10pxj

}
20 ,
10 . , -
Internet Explorer
.
, .
, PIE behavior
CSS, Internet Explorer:

.login fieldset, .login input, .login legend{

behavior: urL(styLesheets/PIE.

;
t
h

}
: PIE.htc stylesheets.
PIE.htc
HTML, , .
;
Internet Explorer . 26.
AwesomeCo Customer Portal

Existing Users
Email

Password

. 26. Internet Explorer

 23.

191

,
.
. - ,
, ,

CSS. Internet Explorer 9
, ,
.
,
. ,
(,
, ).

1 92

24. ,
, ,
CSS3. ,
;
;
.
AwesomeConf -
, AwesomeCo.
- PSD-, . 27,
,
- -.

. 27. , CSS3

,
CSS.
: .

HTML.
HTML :
css3_banner/index.html
<!DOCTYPE html>
<html lang='en>
<head>
<meta charset="ut/-S">
<title>Sample Bannen</title>
<link rel="styLesheet" href="styLesheets/styLe.css">

 24. ,

193

<div id="
conferenc
<section id="badge">
<h3>Hi, My Name Is</h3>
<h2>Barney</h2>
</section>
csection id
</section>
</div>
</body>
</html>

stylesheets/style.css
.
#conference{
background-color: #000;
background-image: url('../images/awesomeconf.jpg');
background-position: center;
height: 240px;
width: 960px;

}
#badge{
border: 2px solid blue;
display: block;
text-align: center;
width: 200px;

}
#info{
display: block;
height: 160px;
* margin: 20px;
padding: 20px;
width: 660px;

>
#badge, #info{
background-color: #fff;
float: left;

}
#badge h2{
color: red;

194

margin: 0;
font-size: 40;

>
#badge h3{
background-color: blue;
color: #fff;
margin: 0;

}

(. 28).

. 28.

.

,
, -.
.
Firefox, Safari Chrome, .
Firefox 15 -moz-linear-gradient,
,
. WebKit ,
-moz- -webkit-.

linear-gradient1 ,
to bottom top. to bottom, to
right, to left, to top, (, 45deg).

http://dev.w3.org/csswg/css3-im ages/#linear-gradients

 24. ,

195

,
:

#badge{
background-image: -w eb k it-lin ear-gradient(top, # fff, #eee);
background-image:
-m oz-linear-gradient(top, # fff, #eee);
background-image:
lin ear-g rad ien t(to bottom, # fff, #eee);
}
,
.
,
.

, ,
.
Photoshop ,
. CSS3 box-shadow
1.

. #banner,
:

box-shadow: 5 5 5 0 #333;

box-shadow ,
. .
,
.
.
, .
. 0
, .
, .

1 http://www.w3.org/TR/css3-background/#the-box-shadow

196

(inset), , .
,
.
,
. Internet Explorer 10,
Chrome, Firefox, Safari Opera,
. iOS 3, Android 2.1
, 2011 ,
-moz- -webkit-.
, ,
, ,
.
. -
, .
,
(
).
.
----------------------------------------- ------------ , .
, box-shadow:
hlftext-shadow: 2 2 2 0px #bbbbbb;}
X Y, , .
, . ,
, ,
. , ,
.

CSS3 ,
*
(, Flash, Illustrator
Inkscape)1. , -
.
1 http://www.w3.org/TR/css3-2d-transforms/#transform-property

 24. ,

197

, . ,
, #:
-webkit-transform:
-moz-transform:
-ms-transform:
-o-transform:
transform:

rotate(-7.5deg);
rotate(-7.5deg);
rotate(-7.5deg);
rotate(-7.5deg);
rotate(-7.5deg);

CSS3 .
, .
. ,
,
.
, ,
. , ,
. ,
, ,
!

. ,
.
: matrix() transform
.
. ,
, matrix () rotate ().
(-7,5), ,
, . ,
2 x 2 :
-webkit-transform:
-moz-transform:
-ms-transform:
-o-transform:
transform:

matrix(0.99144,-0.13052,0.13052,0.99144,0,0);
matrix(0.99144,-0.13052,0.13052,0.99144,0px,0px);
matrix(0.99144,-0.13052,0.13052,0.99144,0,0);
matrix(0.99144,-0.13052,0.13052,0.99144,0,0);
matrix(0.99144,-0.13052,0.13052,0.99144,0,0);

? , ,
. , 7,5

198

. ,
,
.
, ,
, , .
, .
, http://petemed.home.xs4all.nl/
matrices/.
... .

-
.
Photoshop, PNG
CSS. CSS3
, .
-
. ,

: 00 , a FF
. ,
FF0000, , ,
.
CSS3 rgb rgba. rgb
,
0 255. , rgb(255,0,0).
rgba ,
, ( 0 1).
0, , .
,
:

#info{
background-color: rgba(255,255,255,0.95);

,
, ;

 24. ,

199

,
.
,
.

#info{
'***"
background-color: rgba( 255,255., 255,0.95);
border-radius: 12px;

}
Safari, Firefox
Chrome. Internet Explorer.

, , IE10
, Internet Explorer 8 9.
Microsoft
DirectX,
,
. ,
. ,
. ,
CSS3,
, .
,
,
css3_


Internet Explorer 8 . ,
. ,
.
,
PNG . ,
? , , ,
, - , .

, a CSS3
. , .

200

25.

. , ,
, ,
,
.
-.
, ,
.
, -.

,
.

, ,
. -
,
.

,
: CSS sIFR1
Flash. CSS3 Fonts
.
1 http: / / www.mikeindustries.com /blog/sifr

 25.

201

AwesomeCo ,

. Garogier ,
.'
, 1,
,
, . ,
, CSS.
@font-face
, (Sffont-face CSS2
Internet Explorer 51.
Microsoft EOT (Embedded OpenType),
TrueType
OpenType, .

. ,
, .

WOFF (Web Open Font)

TrueType (TTF)
OpenType (OTF)
Embedded OpenType (EOT)
Scalable Vector Graphics (SVG)

[F3.6, C5, S5.1, IE9, 011.1, iOS5]

[F3.5, C4, S3, 010, iOS4.2, A2.2]
[F3.5, C4, S3, 010, iOS4.2, A2.2]
[IE5-8]
[iOS]

Microsoft, Opera Mozilla Web Open Font,

.
,
. , .

FontSquirrel2 TrueType,
WOFF, SVG EOT , .
1 http://www.w3.org/TR/css3-fonts/
2 http://www.fontsquirrel.com/fonts/Garogier
.

202

:
.
:

@font-face {
font-family: 'GarogierReguLar';
src: url('fonts/garogier_unhinted-webfont.eot?#iefix')
format('embedded-opentype'),
url('fonts/garogier_unhinted-webfont.woff') format('woff'),
url('fonts/garogier_unhinted-webfont.tt/') format('truetype'),
url('fonts/garogier_unhinted-webfont.svg#garogierreguLar')
format( 'svg');
font-weight: normal;
font-style: normal;

------------------------------------------------- . ,
,
,
. ,
(
). @font-face
.
-,
; ,
. , ,
, .
Typekit1 ,
, . ,
, .
Google Google Font API2, Typekit,
.
JavaScript . ,
,
JavaScript.
, ,
, .

1 http://www.typekit.com/
2 http://code.google.com/apis/webfonts/

 25.

203

,
. EOT ,
IE ,
. ,
.
?#iefix' . Internet
Explorer 8. IE8 404
. IE8 , EOT
, .
, stylesheets/fonts.

, HTML,
. ,
HTML.
\ .................................................
?
,
,
FontSquirrel1. ,
@font-face.
, .

.
.

body{
font-family: "GarogierReguLar";

}

, . 29.
,
,
.

1 http://www.fontsquirrel.com/fontface/generator

204

A w e so m e C o Blog!
Lglgst.Bo.sls

Qpntnbi^tofs

How Many Should We Put You Down For?

Posted by Brian on October ist, 2013 at 2 :39 PM
The first big rule in sales is that if the person leaves empty-handed,
they're likely not going to come back. That's why you have to be
somewhat aggressive when youre working with a customer, but you
have to make sure you don't overdo it and scare them away.

. 29.

Internet Explorer
,
,
@font-f ( -
).
Garogier,
. ,
Garogier,
. .
(font stack) ,
. ,
,
. ,
.
,
.
Unitlnteractive1.
:

font-family:

"GarogierReguLar", Georgia,
"P'aLatino","PaLatino",
"Times", "Times New Roman", serif;

1 http://unitinteractive.com /blog/2008/06/26/better-css-font-stacks/

 25.

205

. , ,
, .
,
.
. ,
.
, CSS .

206

26.
CSS3 :
. , .
,
. ,
.
,
23. ,
,
.
, .

9 CSS,
:
li>span[contenteditabLe=true]:focus{
background-color: #ffa;
border: lpx shaded #000;

}
,
. CSS
. ,
,
.
:
transition-property CSS, .
transition-duration , .
transition-delay .
transition-timing-function
.

,
, , ?
transition-timing-function
.
,

 26.

207

.
0 1.
(0.0,0.0) (1.0,1.0), .
:

lin e a r
ease-in
ease-out
ease-in-out
ease

,
linear.
, ease-in.
, , ,
ease-out.
.
,
, ,

cubic-bezier. .

, ,
45. lin e a r ((0.0,
0.0), (0.0,0.0), (1.0, 1.0), (1.0,1.0)), :

((0.0, 0.0), (0.42,0.0), (1.0, 1.0), (1.0,

1.0)), ease-in, :

208

;
. ,
, .
ease-out, ,
:

((0.0,0.0), (0.0,0.0), (0.58,

1.0), (1.0,1.0)).
ease-in-out , :

((0.0, 0.0), (0.42,0.0),

(0.58,1.0), (1.0,1.0)), .
ease ease-in-out,
, .
,
cubicbezierQ:

.bounce{
transition-property: left;
transition-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0);
transition-duration: Is;

}
.bounce:hover{
left: 200px;

 26.

209

-
(
- (0.0, 0.0)).
,

: http://www.netzgesta.de/dev/cubic-beziertiming-function.html.

.
transition.
. ,
.
input[type="emaiL"], input[type="password"]{
transition-timing-function: linear;
transition-property: background, border;
transition-duration: 0.3s;

}
, ,
,
-webkit- -moz-,
CSS. .
, ,
:

.login input[type="emaiL"]> .login input[type="password"]{

-webkit-transition: background 0.3s linear
border 0.3s linear;
-moz-transition: background 0.3s linear,
border 0.3s linear;
-o-transition: background 0.3s linear,
border 0.3s linear;
transition: background 0.3s linear,
border 0.3s linear;

>
transition CSS ,
, .

210

,
, .
, Firefox Opera
-moz- -- .
.
, ,
: focus:
.login input[type="emait"]:focuSj .login
input [type="password"]:focus{
background-color: #ffe;
border: lpx solid #0e0j

}
.
,
CSS .
CSS

.
, ,
CSS 1. ,
.
.
stylesheets/style.css
@keyf rames:
@keyframes shake{
0%{left:0;}
20%{left:-2%;}
40%{left:2%;}
60%{left:-2%;}
80%{left:2%;}
100%{left:0;}

}
Internet Explorer 10,
Firefox Chrome, ,
1 http://www.w3.org/TR/css3-anirnations/

 26.

211

Safari,
, .

@-webkit-keyframes shakef
0%{left:0;}
20%{left:-2%;}
40%{left:2%;}
60%{left:-2%;}
80%{left:2%;>
100%{left:0;>

}
He -moz - -opera-,
.

CSS.
,
. jQuery
Ajax.
shake, . shake
:
.shake{
animation-name: shake;
animation-duration: 0.5s;
animation-delay: 0;
animation-iteration-count: 1;
animation-timing-function: linear;

}

. , ,
, .
,
.
:
css3_animation/stylesheets/style.css
.shakef
-webkit-animation: shake 0.5s 1;
-moz-animation: shake 0.5s 1;
animation: shake 0.5s 1;

>

212

, CSS, .
.
, Ajax.
js :

var processLogin = function(form, event){

event.preventDefault();
var request = $.ajax({
url: "/
Login",
'
type: "
T
S
O
P,"
data: form.serializeQ,
dataType: "json"

});
request.done = function(){
// ,

};
return(request);

};
: j Query
.
Ajax, .
,
, (promises) j Query.

.
jQuery $.ajax() ,
Promise. success()
$.ajax() done() fail()
, $.ajax().
Ajax , .

. ,
(
).
Async JavaScript:
Build More Responsive Apps with Less Code [Burl2],
done() processLogin().
,
.

214

,
j Query.
jQuery, j Query Color,
, Modernizr
.
Modernizr <head> .
load (), Modernizr 5.
script src="javascripts/modernizr.js"x/script>

jQuery Color

1.
.
jQuery
,
, jQuery animate ().
;
,
. :
var addTransitionFallbackListeners = function(){
$(".
Logininput[type=emaiL]j
.Login
input[type=password]").focus(function(){
$(this).animate({
backgroundColor:
b 300 ) ;

});
$(".
Logininput[type=emaiL], .Login
blur(function(){
$(this).animate({
backgroundColor:
b 300 ) ;

});
>;
,
Modernizr ,
1 http://code.j query .com/color/jquery .color-2.1.2.min.js

 26.

215

jQuery Color , ,
:

Modernizr.load(

{
test: Modernizr.csstransitions,
nope: "javascrip ts/jq u ery.co L or-2.1.2.m in .j s ",
callback: function(url, result){
if (!result){
addTransitionFallbackListeners();

}
>
>
);
, . ,
jQuery .
.
jQuery

jQuery animate(). javascripts/fonn.js
addFormSUbmitWithFallback(),
, processLogin()
fail () , ,
jQuery.

var addFormSubmitWithFallback = function(){

$(".
Lo
g
i
n
"
)
.submit(function(event){
var form = $(this);
request = processLogin(form, event);
request.fail(function(){
form.animate({left: "-2%"}, 100)
.animate({left: "2%"}, 100)
.animate({left: "-2%"}, 100)
.animate({left: "2%"}, 100)
.animate({left: "0%"}, 100);

});
;

216

, Modernizr .
, .
, ,
,
fail () .

>

css3_animation/javascripts/form.js
if(Modernizr.cssanimations){

&

addFormSubmitWithCSSAnimation();
addAnimationEndListener();
> }else{
> addFormSubmitWithFallback();

> }
,

( - ).
, ,
?
, ,
. , 15
? ,
, , ,
.

- CSS. ,
. CSS3
3D- , .
CSS3 ( )
,
. ,
j Query
, CSS.
!


HTML5
CSS3.
,
HTML5. ,

,
(offline) .
,

.

HTML5.
,
HTML5,
. ,
,
.
/

, cookie? ? . cookie
,
,
.
cookie,
. JavaScript, ,
,
, , :

// http://www.javascripter.net/faq/settinga.htm
function SetCookie(cookieName,cookieValue,nDays) {
var today = new Date();
var expire = new Date();
if (nDays==null || nDays==0) nDays=lj
expire.setTime(today.getTime() + 3600000*24*nDays);
document.cookie = cookieName+M="+escape(cookieValue)
+ ";expires="+expire.toGMTString();

}
,
. cookie
,
cookie.

219

HTML5
: Web Storage ( localStorage sessionStorage)1,
IndexedDB2 Web SQL Databases3.
. ,
, Safari iOS
Android 2.0.
HTML5, .
cookie,
( -,
cookie ),
,
(, ).
,
.
-
,
.
,
.

HTML5
, ,
.

.
:
localStorage

/
. [5, F3.5, S4, IE8, 010.5,
IOS3.2, 2.1]
sessionStorage

/
. [5, F3.5, S4, IE8,
010.5, IOS3.2, 2.1]
1 http://www.w3.org/TR/webstorage/
2 http://www.w3.org/TR/IndexedDB
3 http://www.w3.org/TR/webdatabase/

220

Ind.exed.DB
,
. [25, F10, IE10]
Web SQL Databases

, , , , ,
.
. [5, S3.2, 010.5, IOS3.2, 2]
Offline Web Applications
;
. [4, F3.5, S4,
010.6, IOS3.2, 2]

 27. Web Storage

221

27.
Web Storage
Web Storage
. ,
/,
.
JavaScript.
, Internet Explorer 8,
iOS Android.
, localStorage Web
Storage, ,
.
.
(, localhost),
, .
AwesoraeCo
, ,
.
Web Storage,
. ,
. 30.

. 30.

HTML5 , 3. -

222

, ,
.

<!DOCTYPE html>
<html lang="en-t/S">
<head>
<meta charset="ut/-8">
<title>Preferences</title>
#
<link rel="styLesheet" href
="s
<script src="javascripts/modernizr.js"x/script>
</head>
<body>
<div id
="container">
<pxstrong>Preferences</strongx/p>
<form id="
p
r
e
fr
e
n
c
e
s
"
action
method="post" ept-ha rs et="ut/- 8">
<fieldset id="cotors" class=,,">
<legend>Colors</legend>
<ol>
<li>
<label
for="background_color">Baccolor
<input class
="coLor"
n
a
m
e
=
"
backgroun
value="" id="
</li>
<li>
<label for="text_coLor">Text color</label>
<input class=color typ
natn
value=" id="text_cotor">
</li>
<li>
<label for="text_size">Text size</label>
<select name="text_size" id
<option value="16">16px</option>
<option value="20">20px</option>
<option value="24">24px</option>
<option value="32">32px</option>
</select>
' </ol>
</fieldset>
<input typ
</form>
</div>

e="submit"value
changes">
5
"
=

 27. Web Storage

223

</body>
</html>

HTML,
HTML5 color. CSS
.
form ol{
list-style: none;
margin: 0;
padding: 0;

}
form li{
margin: 0;
padding: 0;

>
form li label{ display:block; }

.
, .

localStorage
window.localStorage() JavaScript. /
.
localStorage.setltem
val());

("background_coLor",

).

He .
var bgcolor = localStorage.getltem

.
javascripts/storage.js :
var save_settings = function(){
localStorage.setltem("background_color",
$("#background_color").v a l( ));

224

localStorage.setltem("text_color, $("#text_color").val());
localStorage.setltem("text_size", $("#text_size").val());
apply_preferences_to_page()j

};

localStorage.

localStorage
.

var load_settings = function(){

var bgcolor = localStorage.getItem("background_color");
var text_color = localStorage.getItem("text_color");
var text_size = localStorage.getltem("text_size");
$("#background_color").val(bgcolor);
$("#text_color").val(text_color);
$("#text_size").val(text_size);
applypreferences_to_page();

};
apply_preferences_to_page(),
.
.

, localStorage,
.
CSS,
jQuery.

var apply_preferences_to_page = function(){

$("body").css("backgroundColor", $("#background_color").val());
$("body").cs s("color", $("#text_color").val());
$("body).css( fontSize", $("#text_size").val() + "px");

};
, .

 27. Web Storage

225

load_settings();
$ ( 'form#preferences').submit(function(event){
event.preventDefault();
save_settings();

});
, jQuery
HTML.
<body>:

<script src="http://ajax.googLeopis./ajax/Libs/jquery/ 1 .9.1

/jquery.min.js">
</script>
<script src="javascripts/storcige.js"x/script>

.
SESSIONSTORAGE---------------------------------------------------------------------- -

localStorage ,
.

. sessionStorage.
localStorage, sessionStor
age .
localStorage sessionStorage:
sessionStorage.setltem('name', 'Brian Hogan');
var name = sessionStorage.getltem('name');

cookie.

localStorage
, .
, localStorage,
,
,
. , ,
JavaScript. ,

226

.
Submit ,
. ,
, :

. ,
.
Web Storage ,
-,
, -,
.
.

 28. IndexedDB

227

28.

IndexedDB
localStorage sessionStorage
/ ,
.
HTML5.
, Web
SQL Storage1.
, ,
SQL, .
, IndexedDB
, .
IndexedDB
-. ;, ,
JavaScript,
,
..
AwesomeCo
.
,
.



. ,
, . 31.

. 31.
1 http://dev.w3.org/htm l5/webdatabase/

228

<! DOCTYPE html>

<html>
<head>
<meta charset
="utf-8">
<title>AwesomeNotes</title>
<link
rel=styLesheet"
bref="styLe
<script
src=''javascripts/IndexdDBShim.min. j s" ></
</head>
<body>
<div id
="container">
<section id
="sidebar">
<input typ
e = " b u t t o n " i d = " new valuno
<input typ
e="button"
id="deL
valu e="DeLeteaLL">
<ul aria-live="poUte" id="notes">
</ul>
</section>
<section id ="main"aria-live="poLite">
<form>
<ol>
<li>
<label for="title">Title</label>
<input typ
e="text"id="titLe">
</li>
<li>
<label for="note">Note</label>
<textarea id="note"x/textarea>
</li>
<li>
<input type="submit" id
valu
<input type="
submit"
i
d
value="DeLete">
</li>
</ol>
</form>
</section>
</div>
</body>
</html>

 28. IndexedDB

229

<section>.
(, Save) ;
.
. 31,
. style.css :
html5_indexedDB/ stylesheets/style .css
#container{
margin: 0 auto;
width: 80%;

>
#sidebar, #main{
display: block;
float: left;

}
#main{ width: 80%; }
#sidebar{ width: 20%;}
form ol{
list-style: none;
margin: 0;
padding: 0;

>
form li, #sidebar li{
margin: 0;
padding: 0;

>
form li label{ display:block; }
#note, #title{
border: lpx solid #000;
font-size: 20px;
width: 100%;

}
#sidebar ul{
list-style: none;
padding: 0;

};

230

#sidebar li{ cursor: hand; cursor: pointer; }

#title{ height: 20px; }
#note{ height: 80px; }

,
.
, JavaScript
.

javascripts/notes.js.
. index.html,
<body> jQuery,

DO .
html5_indexedDB/index *html

<script
src="h ttp ://a ja x . googieapis. com /ajox/Libs/jquery/1.9 .1 /jq u ery.

min.js">
</script>
<script src="javascripts/notes.js"x/script>

javascripts/notes.js
.
html5_indexedDB/javascripts/notesjs
//
var db = null;
window.indexedDB = window.indexedDB || window.mozIndexedDB
window.webkitlndexedDB ||window.msIndexedDB;

db.
.
, -
. JavaScript
.
window.indexedDB, ,
, .

 28. IndexedDB

231

, ,
, .
,
:
var connectToDB = function(){
var version = 1;
var request = window.indexedDB.open("awesomenotes, version);
request.onsuccess = function(event) {
db = event.target.result;
fetchNotes();

};
request.onerror = function(event){
alert(event.debug[l].message);

>
};
()
indexedDB. ,
request. request success(),
, error (),
.
successQ fetchNotesQ,
.
. -
, .

.

id
title
Note

request,
connectToDBQ. : onupgradeneededQ
. connectToDB()
. -

2 32

onupgradeneeded(),
. connectToDB():

var connectToDB = function(){

var version = 1;
var request = window.indexedDB.open("awesomenotes", version);

>
>
>
>

request.onupgradeneeded = function(event) {
a l e r t ("unupgradeneeded fir e d " );
var db = e v e n t.ta rg e t.re s u lt;
db.createO bjectStore("notes", { keyPath: "ic/", autoincrement:
tru e });
> }j
request.onsuccess = function(event) {
db = e v e n t.ta rg e t. re s u lt;
fetchN otes();
};
request.onerror = function(event){
alert(event.debug[l].m essage);
}
};
createO bjectStore()
. ,
. ,
,
id. SQL
: .
.
version
onupgradeneeded().
.
, , -
.

,
( ),

 28. IndexedDB

233

. connectToDB()
,
fetchNotes(), .
fetchNotes() .
:

var fetchNotes = function(){

var keyRange, request, result, store, transaction;
transaction = db.transaction(["notes"], "readwrite");
store = transaction.objectStore("notes");
//
keyRange = IDBKeyRange.lowerBound(0);
request = store.openCursor(keyRange);
request.onsuccess = function(event) {
result = event.target.result;
if(result){
addToNotesList(result.key, result.value);
result .continueQ;

>
};
request.onerror = function(event) {
alert
("UnabLeto fetch records.");

};
};

.
addNoteToList(), .
result.
continueQ, ,
onsuccessQ.
(key), (data) .
id,
JavaScript, .
addNoteToList() .
addNoteToListQ :

234

html5 JLndexedDB/javascripts/notes.js
var addToNotesList = function(key, data){
var item = $("<li>");
var notes = $("#notes");
item.attr("data-id", key);
item.html(data.title)j
notes.append(item);

};

.
.
notes.
,
, j Query attr(). j Query
data ()
1, data() .
jQuery data( ) .

.

click ,


.
(, )
click.
javascripts/notes.js :
html5_indexedDB/javascripts/notes.js

$("#notes") . c lic k ( f unction(event){

var element = $ (e v e n t.ta rg e t);
if ( e l e m e n t .i s ( 'l i ' )) {
getNote(element. a t t r ( "data-id" ));
}
});
1 http://api.jquery .com /data/

 28. IndexedDB

235

getNote(),
. getNote() :
html5_indexedDB/javascripts/notes. js
var getNote = function(id){
var request, store, transaction;
id = parselnt(id);

transaction = db.transaction(["notes"]);
store = transaction.objectStore("notes");
request = store.get(id);
request.onsuccess = function(event) {
showNote(request.result);

};
request.onerror = function(error){
alert("UnabLe to fetch record " + id);

};
}

fetchl\lotes(). request, get() store
. ,
showNote(),
:
html5_indexedDB/javascripts/notes.j s
var showNote = function(data){
var note =
$
e)";
t
o
n
#
"
(
var title =
$
e)";
L
i
t
#
"
(
title.val(data.title);
title.attr(
"data-id"
, data.id);
note.val(data.note);
$(" #deLete_button"
) .show();

}
Delete
.
Save .

236

, . ,
, .
.
,
,
. New,
,
.
New:

$("#new_button").click(function(event){
newNoteQ;

;
data-id title
. Delete.
var newNote = function(){
var note = $("#note");
var title = $("#titie");
$("#deLete_button").hide();
title.removeAttr("data-id");
title.val("");
note.val("");

}
Save,
.
, ,
Save:

$("#save_button").click(function(event){
var id, note, title;
event.preventDefault();
note =
$("#note"

 28. IndexedDB

title =
id = title.

237

$("#titLe");
attr("data-id");

i f (id){
updateNote(id, title.val(), note.valQ);
}else{
insertNote(title.val(), note.val());

}
});
data-id title .
, , ,
insertNote().

var insertNote = function(title, note){

var data, key
data = {
"title": title,
"note": note,

};
var transaction = db.transaction(["notes"], "readurite");
var store = transaction.objectStore("notes");
var request = store.put(data);
request.onsuccess = function(event) {
key = request.result;
addToNotesList(key, data);
newNoteQ;

>;
insertNote()
key
. ,
,
.
addToNotesList() ,
. newFormQ
.

238

.
updateNote() , .

var updateNote = functioned, title, note){

var data, request, store, transaction;
id = parselnt(id);
data = {
"title": title,
"note": note,
"id" : id

>;
transaction = db.transaction([notes"],
store = transaction.objectStore("notes");
request = store.put(data);
request.onsuccess = function(event) {
$("#notes>Li[data-id="+ id + "J").html(title);

};
};
,
; jQuery
, data-id
.
.
delete.

$("#de Lete_button").click(function(event){
var title = $("#title);
event.preventDefault();
deleteNote(title.attr("data-id"));

});
delete () ,
.

var deleteNote = function(id){

var request, store, transaction;

 28. IndexedDB

239

id = panselnt(id);
transaction = db.transaction(["/7otes"], "readwrite");
store = transaction.objectStore("r?otes");
request = store.delete(id);
request.onsuccess = function(event) {
$("#notes>Li[data-id=" + id + "J").remove();
newNote();

>j
newForm() ,
.
, .
Delete All:

1111111111

html5_indexedDB/javascripts/notes. js
$("#deLete_aLL_button").click(function(event){
clearNotes();

});
clearNotes(),
. clearNotes () :
var clearNotes = function(id){
var request, store, transaction;
transaction = db.transaction(["notes"],
store = transaction.objectStore("notes");
request = store.clearQ;
request.onsuccess = function(event) {
$("notes").empty();

>;
request.onerror = function(event){
alert
("UnabLeto d e a r things out.");

>
.
, connectToDBQ
. newForm(),

240

.
Delete.

connectToDBQ;
newNote();

! , .
,
(
cookie). ,
.
,
.
Internet Explorer 10
Chrome Firefox. Safari, Android
Safari iOS IndexedDB.
( ) Web SQL Databases. Internet
Explorer 8 9 Web SQL Databases, IndexedDB.
,


-, IndexedDB ,
Internet Explorer, -
Chrome.
,
,
.
, .
IndexedDBShim,
Web SQL Databases1.
, (iPhone,
iPad, Android), Web SQL
Databases. IndexedDBShim,
<head> :

1 http:/ / nparashuram.com/IndexedDBShim/

 28. IndexedDB

241

<script src="javascripts/IndexedDBShim.min.js"></script>

<head> ,
Safari
.
Modernizr ,
:
, , , ,
? Modernizr
,
.
Safari
, Web SQL. ,
, ,
,
Web SQL.
, ,
IndexedDB Internet Explorer 8 9, .
.

,
. .
WEB SQL DATABASES--------------------------------------------------------------------

Web SQL Databases API,

SQLite
, iOS An
droid. Safari, Safari iOS,
Android Chrome; ,
SQL.
, Web SQL Databases
,
, . Mozilla Microsoft
IndexedDB, Google Indexed
DB Chrome.
, Web SQL Databases,
html5_websql
notes. ,
,
.

242

29.
HTML51
HTML ,
.
,
,
, .
Firefox, Chrome Safari,
iOS Android 2.0. ,
Internet Explorer.
AwesomeCo iPad
. , ,
, .
HTML5 .

.
HTML CSS,
JavaScript.
-,
. ,
, .
;
.
,
. notes,
appcache. .

CACHE MANIFEST
# V = 1.0.0
stylesheets/style.css
javascripts/notes.js
javascripts/IndexedDBShim.min.js
javascripts/jquery-1.9.1.min.js
1 http://w ww .w3.org/TR /htm l5/browsers,html #offline

 29.

243

.
; .
version.
, jQuery
Google . , jQuery
<script>, jQuery
javascripts.

<script src="
<script

javascripts/jquery-1.9.1.mxn.
></script>
src="javascripts/notes.js"x/script>

HTML.
html :
html5_offline/index.html
<html manif

est="notes.appcache">

! Chrome, ,
(. 32).

boor...

Trmeto.

,,

| * |

Creating Application Cache with aanifest http://localhost:8000/htalS_offline/notes.appcache

Application Cache Checking event
Application Cache Downloading event
Application Cache Progress event ( of 4) http://localhost:B0e0/htal5_offline/javascripts/notes.js
Application Cache Progress event (1 of 4) http://localhost:B000/htal5_offline/javascripts/Jquery-1.9.1.ain.Js
Application Cache Progress event (2 of 4) http://localhost:0000/htelS_offline/style.css
Application Cache Progress event (3 of 4) http://localhost:8000/htal5_offline/Javascripts/IndexedD8Shi*.ain.Js
Application Cache Progress event (4 of 4)
Application Cache Cached event
>

\9ca\h95tsl
localhost:!
localhost:l

19&
IfifiaLhflitil
lpsalhfiitil
.Is&alhs&JL
'

. 32.

. ,
-,
MIME text/cache-manifest.
Node.js
, Apache, MIME
htaccess.

AddType text/cache-manifest .manifest

244

notes ,
, .
,
.
.
,
. , ,

;
.

,
- . -
, ,
.
.
Apache,
.
htaces:

ExpiresActive On
ExpiresDefault "access"

,
. ,
.
, ,
.

,

?
navigator.onLine ,
.

 29.

245

if (navigator.onLine) {
alert ('onLine')
} else {
alert(
'offline'
);

}
Safari, Firefox Chrome;
, .
.
:

window.addEventListener("o//7ine", function(e) {
alert ("offline")-,
}, false);
window.addEventListener("ontine", function(e) {
alert("on Line");
b false);

, ,
, .

,
. ,
.

, Web Storage IndexedDB,

,
. iPad Android,
HTML5

, .

, ;
.
,
.


API

,
HTML5 CSS3
,
.
, .
HTML5 History API ,

Cross-Document Messaging API. Web Sockets
Geolocation API,
.
(Drag and Drop API) HTML5.
API,
HTML5, .
HTML5,
. , ,
, .
API:
History
. [5, F3, S4, IE8, 010.1 IOS3.2, 2]
Cross-Document Messaging
<if rame> ,
. [5, F4, S5, IOS4.1, 2]

 API

247

Web Sockets

. [5, F6, S5, IE 10, 0 1 2 .1 ,10S6]
Geolocation
. [5, F3.5, S5, 010.6,
IOS3.2, 2.1]
Drag-and-Drop
. [4, F3.5, S3.1, IE6 (), IE10
(), 012]

248

10 API

30.
HTML5 API
1. ,
,
.
, ,
Back.
15
AwesomeCo
. :
Back . ,
Back ,
. History API .

, -,
.
, .

; ,
. addTabToHistoryQ:

var addTabToHistory = function(target){

var tab = target.attr
("href");
var stateObject = {tab: tab};
window.history.pushState(stateObject,
tab);

}
, .
href
pushStateQ, .
, .
,
.
, Services,
( tab) "#services".
1 http://www.w3.Org/TR/htrnl5/browsers.htrnl#history

 30.

249

,
.
< title>
.
, .
URL-,
. ,
URL- #.
Ajax, ,
URL- /about /
services. URL-
.
,
URL- .
, addTabToHistory()
. ,
:

$("nav ul").click(function(event){
var target = $(event.target);
if(target.is("a")){
event.preventDefault();
if ( $(target.attr("bre/"))

.attr("aria-hidden")){

addTabToHistory(target);
activateTab(target.attr(

"href"
));

};
};
});

, Back.

Back, window.
onpopstate(). ,
.

250

10 API

var configurePopState = function(){

window.onpopstate = function(event) {
if(event.state){
var tab = (event.state[ntab"]);
activateTab(tab);

}
};
};
, ,
, activateTab().
!

.
,
. , URL-
, Reload
Welcome. ,
URL-, , , .
var activateDefaultTab = function(){
tab = window.location.hash || "tfweLcome";
activateTab(tab);
window.history.replaceState( {tab: tab},

tab);

};
location.hash ,
. history. replaceStateQ
. pushState(),
.
, init (),
conf igureTabSelection():
Ofl.js
var init = function(){
configureTabSelection();
configurePopState();
activateDefaultTab();

};

M il

 30.

251

init(), :

initQ;

, .

Chrome, Firefox, Safari, Internet Explorer 9 .
History.js1,

.
.
history .
,
.
, .
,
, Modernizr
. Modernizr HTML:

<script src="javascripts/modernizr.js"x/script>

Modernizr.history
window, history.

$("nav
uL").click(function(event){
var target = $(event.target);
if(target.is("a")){
event.preventDefault();
if ( $(target.attr(
"href"
)). attr ("aria-h)) {
if(Modernizr.history){
addTabToHistory(target);

}
activateTab(target.attr(

};
};
1 https://github.com /browserstate/history;js/

));

252

10 API

});
var init = function(){
configureTabSelection();
if(Modernizr.history){
configurePopState();
activateDefaultTab();

}
};
History.js, Modernizr.
load( ) ,
.

.

 31.

253

31.

-
.
1,
,
.
,
URL.
.
HTML5 API Cross-Document Messaging,
Web Messaging2,
, . ,
http://support.awesomecompany.com
<if rame>, http://www.
awesomecompany.com.
.
AwesomeCo
. ,

, . 33.

From

Sales
James Norris
j Jionrisawesomcco .com

Operations

Message

Tony Raymond
tjaymond awesomcco .com

Accounts Payable
.....................................

Send!

Clark Greenwood
[email protected]

Accounts Receivable
Herbert Whitmore
h .whitmoreawesomcco .com

. 33.
1 (Same Origin Policy)
https://developer.mozilla.org/en/Same_origin_policy_forJavaScript.
2 http://www.w3.0rg/TR/webmessaging/#web-messaging

254

10 API

(CMS) ,
<iframe>. ,
,
.
,

-. , ,
-.
,
,
.
,
- .
Node.js ( , , . 16).
URL-
:
localhost :4000.
localhost:3000.
,
, URL .

. ,
<if > . .
< !DOCTYPE html>
'
'''''
<html lang="en-US>
<head>
<meta charset="utf-8">
<title>Contact List</title>
<link rel="styLesheet" href="styLesheets/styLe.css" >
</head>
<body>
<ul id="contacts">
<li>
<h2>Sales</h2>
<p class=,,/7awe">lames Norris</p>

 31.

255

< class="emoi/.">[email protected]</p>
</li>
<li>
<h2>Operations</h2>
<p class="nome">Tony Raymond</p>
<p class="emait">[email protected]</p>
</li>
<li>
<h2>Accounts Payable</h2>
<p class="no/ne">Clark Greenwood</p>
<p class="emoiL">[email protected]</p>
</li>
<li>
<h2>Accounts Receivable</h2>
<p class="name">Herbert Whitmore</p>
<p class="email">[email protected]</p>
</li>
</ul>
</body>
</html>

jQuery application.js
<body>.

<script

src

="h t t p : / / a j a x . g o o g i e a p i s .com/ajax/L
.min.js">
</script>
<script

src="javascripts/appLication.js"><

ul{
list-style: none;

}
ul h2, ul p{margin: 0;}
ul > li{margin-bottom: 20px;}

256

10 API

,

. postMessage() :
. ,

http://localhost.4000, <if >
http://localh.ost:3000. URL-,
.
.

$("#contacts li").click(function(event){
var email, origin;
email = $(this).find(".email").html();
origin = "http://localhost:3000/index.html";
if(window.postMessage){
window.parent.postMessage(email, origin);

}
});
,
origin , ,
URL- .
,
.

,
(
, -).
, jQuery
application.js. <if >
.

<div id="/orm">
<form id
<fieldset>
<ol>
<li>

="suppo

 31.

257

<label for="to">To</label>
<input type="emai/." name="to" id="to">
</li>
<li>
<label for="/rom">From</label>
<input type="text" name="/rom" id="from">
</li>
<li>
<label for="messoge">Message</label>
ctextarea name="messogeM id="messoge"x/textarea>
</li>
</ol>
<input typ
tv
i
m
b
u
s
"
=
e
alu
e="Send!
</fieldset>
</form>
</div>
<div id="contacts">
<iframe src="
h t t p :
L
/ocalhost:4000/index.h
L
>
m
t
"</iframe>
</div>

CSS,

stylesheets/style.css:

#form{
width: 400px;
float: left;

}
#contacts{
width: 200px;
float: left;

}
#contacts iframe{
border: none;
height: 400px;

}
fieldset{
width: 400px;
border: none;

258

10 API

fieldset legend{
background-color: #ddd;
padding: 0 64px 0 2px;

}
fieldset>ol{
list-style: none;
padding: 0;
margin: 2px;

>
fieldset>ol>li{
margin: 0 0 9px 0;
padding: 0;

}
/* */
fieldset input, fieldset textarea{
display:block;
width: 380px;

>
fieldset input[type=submit]{
width: 390px;

}
fieldset textarea{
height: 100pxj

}
if rame ,
.

onmessage
. event.
jQuery ( ),
.
html5_cross_document/supportpage/javascripts/application.js
$ (window).on("message",function(event){
$("#to").val(event.originalEvent.data);

});

 31.

259

jQuery on ()
.
originalEvent .
Firefox, Chrome, Safari Internet
Explorer 8 , , .
. ,
-

.

Internet Explorer 8 9 Cross-Document
Messaging, postMessageQ .
. ,
frame iframe. ,
jQuery PostMessage, 1.
, , .
, .

1 http://benalman.com/projects/jquery-postmessage-plugin/

260

10 API

32. Web Sockets

-
,
JavaScript .
HTTP ,
, .
,
, . HTML5
Web Sockets,
1.
. ,
Web Sockets,
AwesomeCo.
AwesomeCo
-,
(
). . 34.

GuestUser

>

J I Change

connecting....
Connected to the server

Send

. 34.

1 Web Sockets ,
http://w w w .w 3.org/TR/w ebsockets/.

 32. Web Sockets

261

-
Web Sockets.
,
. ,
/nick brian - IRC. ,
- ,
. -
-, .

, . 34,
,
, , .
HTML5
, div .

< 1D0CTYPE html>

<html>
<head>
<meta charset="ut/-8">
<title>My Chat Server</title>
<link rel="styLes/7eet" href="stytesbeets/stye.css">
</head>
<body>
<div id
="chat_wrapper">
<h2>AwesomeCo Help!</h2>
<form id="nick_form" action="#" method=Mpost">
<P>
<label>Nickname
input id ="n\ckname"type=Mtext" value="
</label>
input typ
e=submit" v a l u
</p>
</form>
<div id="cbot">connecting
</div>
form id
="chat_form"action="#"method="post">
<p>
<label>Message
input id="messoge" type="text" />

/>

262

10 API

</label>
<input type="
</p>
</form>
</div>
</body>
</html>

s u b m i t " v a l u

jQuery JavaScript,
Web Sockets.
<body>.
html5websockets/index.html
<script
src="http://ajox.googLeapis.com/ojax/Libs/jquery/1.9.1
/jquery,min.js">
</script>
<script src='javascripts/chat.js'></script>

, stylesheets/style.css,
:

#chat_wrapper{
background-color: #ddd;
height: 440px;
padding: 10px;
width: 320px;

#chat_wrapper h2{ margin: 0; }

10 #chat{
background-color: #fff;
height: 300px;
overflow: auto;
padding: 10px;
width: 300px;

13 overflow
, ,
( ).

 32. Web Sockets

263

JavaScript,
-.

Web Socket ,
. ,
.

()

onmessage()

oncloseQ

Web Sockets.

ejavascripts/chat.js

var setupChat = function(){

// IP-
var webSocket = new WebSocket

('ws

>;
setupChat().

, .
,
,
.
,
. ()
setupChatQ:
webSocket.onopen = function(event){
$ ( '#chat').append

('<br>Connectto the server);

};
,
. ,

264

10 API

-.
onmessageQ ( setupChatQ):

webSocket.onmessage = function(event){
$(
'#chat').append("<br>" + event.data);
$(
'#chat'
) .animate({scrollTop: $(
) .heightQ});
};

data event;
.
,
,
. 3 jQuery ,
.
.
onclose( ) .

webSocket.onclose = function(event){
$("tfchcit") .append('<br>Connection cLosed');

};
,
.
setupChat():

$("form#chat_form").submit(function(e){
e.preventDefault();
var textfield = $("#message");
webSocket.send(textfield.val());
textfield.val("M);

});
submit,
- send().
,
/nick. -
.

 32. Web Sockets

265

$("form#nick_form" ).submit(function(e){
e .preventDefault();
var textfield = $("#nickname");
webSocket.send ("/nick" + textfield.val());

});
, setupChat()
.

setupChatQ;
setupChat ()
, .
,
.
! Safari, Chrome Firefox
, . ,
,
Web Sockets.
Flash.

, Adobe
Flash . Flash
, websocket-js1 Flash .
web-socket-js2 .
Modernizr
JavaScript . Modernizr
load(),
3:

1 http://github.com/gimite/web-socket-js/
2 https://github.com/gimite/web-socket-js/archive/master.zip

266

10 API

<script src='javascripts/modernizr.js'></script>

javascripts/chat.js Modernizr.load ()
:

Modernizr,load(

{
test: Modernizr.websockets,
nope:

{
"swfobject" : "web-socket-js/swfobject.js",
"websocket" : "web-socket -js/web_socket.js"

L
callback: function(url., result, key){
if (!result){
if(key === "swfobjectM){
WEB_SOCKET_SWF_LOCATION =
WEB_SOCKET_DEBUG = true;

"web-socket-js

}
}
L
complete: function(){
setupChat();

}
}
);
, ,
,
WebSocketMairr, callbackQ,
, .
, callback()
. Modernizr
,
. , .

web-socket, ,
.

 32. Web Sockets

267

, , setupChat ()
. setupChat ()
complete().
.
, .
, -
, ,
-, Flash.
Flash
Flash Player
, Flash Player.
Flash Player
843, , .
:
<policy-file-request/>

, :
<cross-domain-policy>
<allow-access-from domain="*" to-ports="*" />
</cross-domain-policy>

.
. ,
, Web Sockets,
843. 843,
Flash Player .

Flash, .
Node.js
Node.js .
, - h ttp ://
localhost:8000/html5_websockets/index.html. ,
Internet Explorer 8 Chrome (. 35).

268

10 API

0 My Chat Server

http://192.168.1.2:8000/html5_websocket s/inde x.html

Q Iocalhost:8000/html5_websocketsj

-----

ijF r e e H o t m a l gJjW ebSfe

connecting....
Connected to the server
*** ChatUsciO is now known as Ted
T ed : Hi everyone!
* ChatUserl has joined!
** ChatUserl is now known as Barney
Barney: Hi there!

connecting....
Connected to the server
*** ChatUserl is now known as Barney
Barney: Hi there!

... ....

, 35.

, - . Web Sockets

.
,
, IP- ,
; localhost .
,
-.
lib/chat.js.
- . Web Sockets -
,
.
.

270

10 API

& a m p j markers=coLor:green/ Label:

/
Portland,+0R
Samp;markers=coLor:green /Labe
C
:
L/

venue,
icago

+11" >

. 36. Y

, Maps
API,
(,
).
.
, ,
.

.
.
.

var getLatitudeAndLongitude = function(){

navigator.geolocation.getCurrentPosition(function(position) {
showLocation(position.coords.latitude,
position.coords.longitude)

});
>

272

10

10 API

var getLatitudeAndLongitudeWithFallback = function(){

if ((typeof google === 'object') &&
google.loader && google.loader.ClientLocation) {
showLocation(google.loader.ClientLocation.latitude,
google.loader.ClientLocation.longitude);
}else{
var message =
$("<p>CouLdntfind your
message.insertAfter("#map");

};

Google ClientLocation () 3
, showLocation ()
.
Modernizr Geolocation.
, .
, Modernizr.load ()
Google,
.
, Google 1-
, ,
;
( 7).
, .

, ,
.

HTML5.

 34.

273

34.

.
JavaScript DOM.
HTML5 ,
( )
.
AwesomeCo ,
,
.
;
. ,
, . 37.

Quick Planner
| Add card |

This is the third card

This is the first card

This is the fourth card

. 37.

HTML,
stylesheets/style.css,
, .

274

10 API

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="
utf-8">
<title>AwesomeCards</title>
<link rel="stytesbeet" href="stylesbeets/styte.css">
</head>
<body>
<hl>Quick Planner</hl>
<input type="button
id="
addcard"valu
<div id=Mcorc/s">
</div>
</body>
</html>

CSS stylesheets/
style.css. JavaScript Add
Card, :
<div class="cord" draggable="true" id
<div class="editor" contenteditable="true"x/div>
</div>

<div>,
<div>. <div> ,

.

.card{
background-color: #ffc;
border: lpx solid #000;
float: left;
height: 200px;
margin: 10px;
width: 300px;

}
.editor{
border: none;

card

 34.

275

margin: 5%;
width: 90%;
height: 80%;

}
.editor:focus{ background-color: #ffe; }
.card:active{ border: 3px solid #333; }

: active ,
.


Add Card. jQuery,
:

addCardClickHandler = function(){
window.currentCardlndex = window.currentCardlndex || 0;
$("#addcard").click(function(event){
event.preventDefault();

5
var card =
$("<divx/div>")
.att
,
d
i
"
(
rc
"ard" + (window.currentCardIndex++))
.attrC'ctoss", "card")
.att
r("draggabLe",
true);
10
var editor = $("<divx/div>")
.attr("contenteditabie", true)
.att
r("cLass","editor");
15

card.append(editor);
card.appendTo($(

"#cards"));

});
-

};

. - ,
. 2
_currentCardIndex window.
0. window,
. ,

276

10 API

window .
Application
, .
. div
, div
contenteditable. .
jQuery card, 7
, _currentCardIndex 1.
, card,
draggable cards.
Add Card
. contenteditable
.

, ,
, .

, .
.
j Query
.
Drag and Drop .

ondragstart

ondragend

ondragenter

ondragover

ondragleave

ondrop

ondrag

;
,
X Y

 34.

277

createDragAndDropEvents(),
,
.
jQuery cards.
.

var createDragAndDropEvents = function(){

var cards = $("#cards);

};
.
, ondragstart().
,
dataTransfer.
, .
setData().
, ondragstartQ
.
,
jQuery .
cards, jQuery
.
, .
createDragAndDropEvents ()
:

html5_dragdrop/javascript5/9HHHHHHHHHHHHHHHMI
cards. on("dragstartj
".c
"
d, function(event){
r
a
event.originalEvent.dataTransfer.setData('text', this.id);

;
setData () ,
. ,
.
setData() MIME,

text,
MIME text/plain. Internet Explorer 10
,
MIME .

278

10 API

, ,
,
. ondrop(),
ondragstartQ:

cards.on("drop",". card", function(event){

event.preventDefault();
var id = event.originalEvent.dataTransfer.getData('text');
var originalCard = $("#" + id);
originalCard.insertAfter(this);
return(false);

});
dataTransfer
, getData() .
j Query insert After ()
. ,
.
getData() drop().

. drop( ) -
, ,
.
,
dragover,
1. ,
createDragAndDropEvents()
:

cards.on("dragover", ".card", function(event){

event.preventDefault();
return(false);

});
,
,
contenteditable.
.
, draggable card
1 https://developer .mozilla.org/en- US/docs/Web/Reference/ vents/dragover

 34.

279

. jQuery parentQ .

c a r d s . o n ("focus".editor" , function(event){
$(this).parent().removeAttr('draggable');

});
cards.on
("blur",".editor", function(event){
$ (this).parentQ.attr(
'draggable',
true);

});
, , .

createDragAndDropEvents();
addCardClickHandler();

,
. , .

Modernizr . Internet Explorer 8
Drag and Drop, ,
. , Modernizr
,
.
, <div> draggable. *
, jQuery
Ul so rtab leO .1

if ('draggable' in document.createElement(
createDragAndDropEvents();
}else{
Modernizr.load(

)) {

{
load:
"http://code.jquery.eom/ui/l.10
callback: function(result, url, key){
$( '#cards'
) .sortable();

}
1 http://jqueryui.com/sortable/

280

10 API

10

);
-

addCardClickHandlerQ;

1 draggable <div>.
, createDragAndDropEvents(),
Modernizr.load ()
j Query UL
j Query UI so rtab leQ
cards .
.
8; ,
Drag and Drop. ,
.
j Query UI ,
. , ,
. jQuery UI
.
,
.
jQuery UI1.
,
: .
, ,
.
, ,
JavaScript, ,
, .

,
.
,
, ,
.

, .
1 http://jqueryui.com /download/

 34.

281

, ,
.
,
.

, ,
HTML5, -.

.
Ajax- .
, GitHub Flickr, History API,
,
. Web Sockets
.
, , ,
Web Sockets
- ,
Internet Explorer 10.
Cross-Document Messaging
-, ,
Geolocation -,
, ,

.
Drag and Drop .
File API1 ,
.
, File API, ,

Flash Silverlight.

. ,
-.

1 http://w w w .w 3.org/T R /FileA PI/

,
.
, ,
- canvas WebGL
Flexible Box Ajax-
. , ,
,
.

, , ,
.
:
Flexible Box
CSS. [26,
F22, S4, 010.6]

Ajax . [4, F3.5, S4, IE10, 012.0,
iOS3.2, 2.1]
Web Workers
. [4, F3.5,
S4, IE10, 012.1, iOS5, 2.1]


. [6, F6, S5, O il, iOS4]

283

CSS [filter: blur(10px) ]

: ,
, , . . [18, S6, 015, iOS6]
3D- WebGD
- . [8, F4, S5.1, 012]

CSS.

11.1. Flexible Box

CSS
float clear CSS,
- .
float clear,
.
Flexible Box2 ,
, .
, ,
.
Flexible Box
, ,
. HTML.

<!DOCTYPE html>
<html>
<head>
<meta charset
="utf-8">
<title>Home</title>
<link rel
=stylesh
et"href="styi.esbeets/style. css" />
</head>
<body>
<header>
<hl>AwesomeCo</hl>
</header>
1
.
2 http://www.w3.org/TR/css3-flexbox/

284

11 ?

<div

class="container">

<section id
="main">
<hl>Some Story</hl>
<P>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<P>
Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
csection id
="sidebar">
<ul>
c l i x a href="#">Related Linkc/a>c/li>
c l i x a href="#">Related Linkc/ax/li>
c l i x a href="#">Related Linkc/ax/li>
c l i x a href="#">Related Linkc/ax/li>
c/ul>
c/section>
c/div>
cfooter>
cp>Copyright
c/footer>
/body>
c/html>

2013 AwesomeCoc/p>

HTML5 ,
cheader>, cfooter> cdiv>,
. cdiv>
. :

container{
display: -webkit-flex;

285

display: flex;

}

flex , .
#main{
width: 80%;
-webkit-order: 2;
order: 2;

}
#sidebar{
-webkit-flex: 1;
flex: 1;
-webkit-order: 1;
order: 1;

}

. ,
order ,
, . 38.

AwesomeCo

Related Link
Related Link

,,
c tn rv
some
siory

Lorcm ipsum dolor sit araet, consectetur adipisicing elit, scd do eiusmod tempor mcididunt ut labore et dotore
magna aliqua. Ut enira ad minim veniam, quis nostrud cxercitation ullamco laboris nisi ut aliquip ex ea
commodo conscquat.
Duis aute irure dolor in reprchenderit in voluptate veiit esse cillum dolofe eu fugiat nulla pariatur. Excepteur
sint occaccat cupidatat non proident, sunt in culpa qui officia deserunt raollit anira id est labonim.

Copyright 2013 AwesomeCo

. 38. ,

,
: ,
,
! ,

286

. Internet Explorer 10 Safari,

iOS, .
Modernizr
Flexie1,
Flexible Box . ,
.
, .
, ,
float clear.

1 1 . 2 .
, -
Ajax , ,
.
, ,
CORS (Cross-Origin Resource Sharing),
. ,
, Internet
Explorer 10. , ,
, CORS,
.
, :
Access-Control-Allow-Origin: *

. ,
.
Origin, .
, .
,
.

, .

11.3. Web Workers

JavaScript
, ,
. ,
1 http://flexiejs.com /

287

.
Web Workers

.
Web Workers1 HTML5, ,
,
, .
. Web Workers
API YouTube
, YouTube.
. 39.

. 39. Web Workers

API YouTube JSONP (Java

Script Object Notation with Padding);
XmlHttpRequest, ,
URL-
<script> . YouTube
.
.
,
.
, .
HTML:
where_next/web_workers/ind
<!DOCTYPE html>
<html>
<head>
cmeta charset="ut/-8">
1 http://www.whatwg.org/specs/web-workers/current-work/

288

11 ?

<title>Web Workers</title>
<style>
#output > div{float: left; margin-right: 5px;}
</style>
</head>
<body>
<inputtype="button"id
=
na
o
t
u
b
"
vlu
<div id="output"x/div>
<script
src
</script>
<script
</body>
</html>

="http://ajax.

ResuLts">

googLeapis.com/ajax/.9.1
.js">

src="javascripts/appLication.js"x/script>

jQuery scripts/application.js,
. <head>
CSS,
.
javascripts/worker.js YouTube.
, :

var worker = new Worker("jovoscripts/worfeer.js");

JavaScript ,
,
DOM. ,
,
.

postMessage():

$("#button").click(function(event){
w o r k e r . p o s t M e s s a g e ("pragprog");

});
.
,
onmessage() :

289

tion.
worker.onmessage = function(event){

};
worker.onerror = function(event){
$( "outpout"). html( "Why
you fail.??");

>;
,
.
, ,
? -,
onmessage().
, .
Js
var onmessage = function(event) {
var query = event.data;
getYoutubeResults(query);

>;
getYoutubeResultsQ,
YouTube. JSONP
<script>. DOM
, . .
importScriptsQ,
, URL-.

var getYoutubeResults = function(searchTerm) {

var callback = "processResuLts";
url = "http ://gdata. youtube, c o m / + searchTerm +
"&aLt=json-in-script&max-resuLts=5&caLLback=" + callback;
importScripts(url);

};
URL-
.
processResultsQ.
YouTube (
):

290

11 ?

// YouTube
processResults({
"version": "1.0",
"feed": {
"title": {
"$t": "Videos matching: pragprog",
"type": "text"

L
"entry": [{
"title": {
"$t": "Using tmux for productive mouse-free programming",

L
"media$group": {
"media$content": [{
"url": "http://www.youtube.com/v/JXwS7z6Dqic",
"type": "application/x-shockwave-flash",
"medium": "video",
"isDefault": "true"

}]>
"media$thumbnail": [{
"url" : "http://i.ytimg.corti/vi/DXwS7z6Dqic/0.jpg",
"height": 360,
"width": 480,
"time": "00:02:01"

}]
}
}]
}
});

processResults() .
YouTube, .
.

, postMessage():

var processResults = function(json) {

var data, result;
for(var index = 0; index < json.feed.entry.length; index++){
result = json.feed.entry[index
data = {
thumbnail: result["media$thumbnaiL"][0]["url"],
videolink: result ["media$content"]
[0]["url"]

291

>
postMessage(data);

}
};
, javascripts/application.js
onmessage() :

worker.onmessage = function(event){
>
>
>
>

var
var
var
var

img =
$("<img>
;
)
"
link =
$("<a>");
result = event.data;
wrapper;

>
>

>

link.attr("/7re/", result.videolink);
img.attrC'src", result.thumbnail);
link.append(img);
wrapper = link.wrap("<div>").parent();
$("#output").append(wrapper);

>
> >;

> worker.onerror = function(event){

>
$("outpout").html("Why do you

> >;
, , API Web Workers API (. 31).
. , Internet Explorer
10 Web Workers .

, .
Web Workers, ,
JSONP jQuery.
Web Workers .
DOM
console.log(),
postMessageQ ,
onmessage().
, .
Web Workers
,
,

292

11 ?

.
, .

11 .
- ,
.
,
SSE (Server-Sent Events),
HTTP.

. -, ,
SSE,
. HTML :

<!DOCTYPE html>
<html>
<head>
<meta charset="ut/-8">
<title>AwesomeCo Messages</title>
<link
rel="styLesheet"href="styLesheets/styLe.css">
</head>
<body>
<h2>AwesomeCo Messages</h2>
<div id="messoge">connecting....</div>
<script src='
javascripts/streamer. j
'></script>
s
</body>
</html>

JavaScript.
javascripts/streamer.js HTML:

<script src='javascripts/streamer.js'></script>

javascripts/streamer.js createMessage~
Listeners(),
.

293

where_next/html5_sse/javaseripts/streamer. js
var createMessageListeners = function(){
var messageSource = new EventSource(

"/

}

EventSource. ,
- -
. CORS SSE
.
createMessagel_isteners();

. :
data: We are bringing even more awesomeness to you!

data, ,

, . :
data: We are bringing even more awesomeness to you!
data: Are you ready to be even more awesome?

, .
,
data: We are bringing even more awesomeness to you!
data: Are you ready to be even more awesome?

.
JSON, .
, .

.
, message
EventSource event.data:

messageSource.addEventListener("message", function(event){
document.getElementById("message").innerHTML = event.data;
}, false);

294

11 ?

, .
,
.
(, close, open
).
:
event: stockupdate
data: {"stock": "MSFT", "value": "34.01"}

stockupdate message
.
, :
retry: 10000

, .
,
. Modernizr
EventSource1.

,
.
,
:
Accept: text/event-stream

,
:
Content-Type: text/event-streamjcharset=UTF-8
Cache-Control: no-cache
Connection: keep-alive

,
. ,
, .
1 https://github.com /rem y/polyfills/blob/m aster/EventSource.js

295

lib/sse.js
; node-sse1,
.

11.5.
CSS
2: , ,
, ,
.
,
WebKit (
, Chrome Safari). , WebKit-
:
blurQ blur(10px);

.
grayscale() grayscale(0.5);

0 1, 0
, 1
. .
drop-shadow() drop-shadow(5px 5 5 #333)

, .
sepia() sepia(0.5);

(
) 0 1, 0 , 1
.
.
brightness() brightness(1.0);

: 0 - , 1 -
, 10 .
, 100 % .
1 https://npmjs.org/package/sse
2 http://www.w3.org/TR/2013/WD-filter-effects-20130523/

296

11 ?

contrast() contrast(1.0);

,
: 0 - , 1 -
, 10 - .
, 100 %
, .
hue-rotate() hue-rotate(90deg);

.
saturate() saturate(0.5);

0 1, 0
, 1.0
. .
invert() invert(l);

0 1
0 100 %. .
opacity() opacity(l);

,
.
0 1 0 100 %. 0
, 1 .
,
. , ,

,
CSS:

img.photo{
-webkit-filter: grayscale(l);
-webkit-transition: -webkit-filter 0.5s linear;

}
img.photo:hover{
-webkit-filter: none;

>

297

,
JavaScript CSS.
, .
,
, ,
. ,
,
, . ,
.
, .

11.6. WebGL
<canvas>
20-, ,
-. WebGL1
HTML5, Apple, Google, Opera
Mozilla;
.
, - .
Learning
WebGL2.

11.7. !
.
-.

.
, ,
. ,
,
.
!
!
1 http:/ / www.khronos.org/registry/webgl/specs/latest/
2 http://leamingwebgl.com/blog/

.
: Chrome, F: Firefox, S: Safari, IE: Internet Explorer, O: Opera, IOS:
iOS Safari, A: Android Browser.

A.I.
. 1,
, . 33.
<header>

. [5, F3.6, S4, IE8,

010]
<footer>

. [5, F3.6, S4, IE8,

010]
<nav>

. [5, F3.6,
S4, IE8, 010]
<section>

. [5, F3.6, S4, IE8, 010]
<article>

( ). |.5,
F3.6, S4, IE8, 0 10]

299

<aside>

. [5, F3.6, S4,

IE8, 010]
:

(,
). [ ]
. 4,
FAQ, . 56.
<meter>

, . [8,
F16, S6.011]
. 2,
<meter>, . 46.
progress

. [8, F6, S6, IE10, O il]
. 2,
<meter>, . 46.

.2.


data-. [
JavaScript getAttribute()]
. 3,
, . 51.
< contenteditable>lorem ipsum</p>
. [4,
S3.5, S3.2, IE6, 010.1, iOS5, ]
. 9, ", . 84.

..
. 5, , . 61.
input type="email">

. [010.1, IOS, ]

300

<input type="url">

URL-. [010.1, IOS, ]

<input type="range">

. [5, S4, F2.3, IE10, 010.1]

<input type="number">

, -.
[5, S5, 010.1, IOS5, ]
<input type="color">

. [5, O il]
<input type=date">

. date, month week. [5,

S5, 010.1]
<input type="datetime">

. datetime,
datetim e-local time. [S5, 010.1]
<input type="search">

. [5, S4, 010.1, IOS]

.4.
cinput type="text" autofocus>

. [5, S4]
. 6,
, . 73.
input type= "email" placeholder="[email protected]">

. [5,
S4, F4]
. 7, , . 74.
required [input type="email" required > ]

, .
[23, F16, IE10, 012]
. 8,
JavaScript, . 78.
pattern [input type="text" pattern="A [l-9]+[0-9]*$"> ]

,
. [23, F16, IE10, 012]
. 8,
JavaScript, . 78.

301

.5.
role [<div role="document">]
. [,
F3.6, S4, IE8, 09.6]
. 14, ARIA , . 121.
aria-live[<div aria-live="polite">]

(,
Ajax) . [F3.6 (Windows), S4, IE8]
. 15,
, . 126.
aria-atomic [<div aria-live="polite" aria-atomic="true">]

. [F3.6 (Windows), S4, IE8]
. 15,
, . 126.
<scope> [<th scope="col">Time</th>]

. [ ]
. 16, , . 133.
<caption> [<caption>This is a caption</caption>]

. [ ]
. 16, , . 133.
aria-describedby [table aria-describedby="summary">]

. [F3.6 (Windows), S4, IE8]

. 16, , . 133.

.6.
<canvas> [<canvasxp>Alternative content</px/canvas>]

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

010.1, IOS3.2,A2]
. 17, , . 141.
<svg> [<svgx!-- XML content --x/svg>]

XML. [4, F3, S3.2, IE9,

010.1, iOS3.2,A2]
. 19, SVG, . 157.

302

<audio> [audio src="drums.mp3"x/audio>]

. [4, F3.6,
S3.2,IE9, 010.1, IOS3,A2]
. 20, , . 169.
video [video src=Mtutorial.m4v"x/video>]

. [4, F3.6,
S3.2,IE9, 010.5, IOS3,A2]
. 21, , . 174.

.7. CSS3
:nth-of-type [p:nth-of-type(2n+l){color: red;}]

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

IOS3, 2]
. 10,
, . 95.
:first-child [p:first-child{color:blue;}]

. [2, F3.5, S3, IE9,09.5, IOS3, 2]

. 10,
, . 95.
:nth-child [p:nth-child(2n+l){color: red;}]

. [2,
F3.5, S3, IE9, 09.5, IOS3, 2]
. 10,
, . 95.
:last-child [p:last-child{color:blue;}]

. [2, F3.5, S3, IE9,09.5, IOS3,

2]
. 10,
, . 95.
:nth-last-child [p:nth-last-child(2){color: red;}]

. [2,
F3.5, S3, IE9, 09.5, IOS3, 2]
. 10,
, . 95.

303

:first-of-type [p:first-of-type{color:blue;}]

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

I0S3, 2]
. 10,
, . 95.
:last-of-type [:last-of-type{color:blue;}]

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

I0S3, 2]
. 10,
, . 95.
:
[#content{ column-count: 2; column-gap: 20;
column-rule: lpx solid #ddccb5; }]

. [2, F3.5, S3,

09.5, IOS3, 2]
. 13, , . 112.
:after [span.weight:after { content: "lbs"; color: #bbb; }]
content

. [2, F3.5, S3, IE8, 09.5, IOS3, 2]

. 11, (:after), . 105.
[media="only all and (max-width: 480)"]
. [,
F3.5, S4, IE9, 010.1, IOS3, 2]
. 12, , . 108.
border-radius [border-radius: 10;]

. [4, F3, S3.2, IE9, 010.5]

. 23, , . 187.
RGBa[background-color: rgba(255,0,0,0.5);]
RGB
( -). [4, F3.5, S3.2, IE9, 010.1]
. 24, , , . 192.
box-shadow [box-shadow: 10 10 5 #333;]

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

010.5]
. 24, , , . 192.

304

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

. [4, F3.5, S4]
. 24, , , . 192.
src: url(http://example.com/awesomeco.ttf); font-weight: bold; }]

CSS. [4, F3.5,

S3.2, IE5, 010.1]
. 25, , . 200.
[transition: background 0.3s ease]
CSS . [4,
F3.5, S4, IE10]
. 26, , . 206.
[animation: shake 0.5s 1;]
CSS
. [4, F3.5, S4, IE10]
. 26, , . 206.
CSS [filter: blur(10px) ]
: ,
, , . . [ 18, S6, 015, iOS6]
. 11.5, , . 295.
Flexible Box
CSS . [26, F22, S4,
0 1 0 .6 ]
. 11.1, Flexible Box, . 283.

.8.
localStorage

/
. [5, F3.5, S4, IE8, 010.5,
IOS, ]
. 27, Web Stor
age, . 221.

305

sessionStorage

/
. [5, F3.5, S4, IE8,
010.5, IOS3.2, ]
. 27, Web Sto
rage, . 221.
IndexedDB
,
. [25, F10, IE10]
Web SQLDatabases

, , , , ,
.
. [5, S3.2,010.5, IOS3.2, 2]
. Web SQL Databases, . 241.

.9. API
Offline Web Applications
;
. [4, S4, F3.5,
010.6, IOS3.2, 2]
. 29, , . 242.
History
. [5, S4, IE8, F3,010.1 IOS3.2, 2]
. 30, , . 248.
Cross-Document Messaging
,
. [5, S5, F4, IOS4.1, 2]
. 31, , . 253.
Web Sockets

. [5, S5, F4, IOS4.2]
. 32, Web Sockets, . 260.
Geolocation
. [5, S5, F3.5, 010.6,
IOS3.2, 2]

306

. 33, : Geolocation, . 269.

Drag-and-Drop
. [4, F3.5, S4, IE6, 2]
. 34, , . 273.

Ajax . [4, S4, F3.5, IE10, 012.0,
iOS3.2, 2.1]
Web Workers
. [4, S4,
F3.5, IE10, 012.1, iOS5, 2.1]
. 11.3, Web Workers, . 286.


. [6, F6, S5, O il, iOS4]
. 11.4, , . 292.
3D- WebGD
- . [8, F4, S5.1, 012]
. 11.6, 11.6 WebGL, . 297.

1
.

 jQuery

JavaScript,
, .
, ;
jQuery. ,

, -.

jQuery, .
jQuery1
.
.
jQuery DOM
. jQuery CSS
,

. , jQuery,
JavaScript, jQuery :

.

.1. jQuery
jQuery2
jQuery , jQuery Google:
1 http://docs.jquery.com
2 http://www.jquery.com

308

jQuery

<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.
min.js">
</script>

. ,
.
Google
j Query Google,
( , , ,
URL ). , jQuery
,
, .

. 2. jQuery
j Query ,
. jQuery
jQuery(); .
CSS
jQuery .
jQ u ery ()
$ ();, .
jQuery.
.
hi

<hl>
. important,

$(".important");

.
CSS. header

 jQuery

309
7

var header = $("#header")',

,
$("#sidebar ").
jQuery jQuery
JavaScript DOM, .

. .

..
,
HTML .
hide show
hide () show()
.
, :

$("/7l") .hide();

hide()
, JavaScript
(, ).
show().

toggle().
jQuery ,
, /
/. ,
<hl>, !

$("#sidebar o").hide();

html, val attr

html ()
.

310

jQuery

$ (#message").htm l("Hello World/");

hi
Hello World.
v a l( ) .
, htm l().
a ttr Q .
append, prepend wrap
append ()
. ,
.
<form id="task_form">
label for="task">Task</label>
input type="text" id="task" >
input type="submit" value="Add">
</form>
<ul id="tasks">
</ul>

, .
$(function(){
$("#task_form").
submit(function(event){
event.preventDefault();
var new_element = $("<li>" + $("#tosfc").val() + "</Li>");
$("#tasks).append(new_element);

;
;
prepend () append(),
, .
wrap () ,
jQuery.

var wrapper =
parentQ;

)
g
a
s
e
m
#
"
(
$.
wrap("<div

,
.

 jQuery

311

CSS
css() .
$(Label").css("color", "#/00");

JavaScript
CSS:
jqueryprimer/methodshtml
$("hl").css(

{" L
:"r
"
r
o
d
e
",
"text-decoration" : "underline"}

);
,
. jQuery addClass() removeClass()

; .
, j Query
:
$("input").focus(function(event){
$(this).addClass("focused");

});
$("input").blur(function(event){
$(this).removeClass("focused");

});
CSS3 : focus,
.

j Query jQuery; ,
.
jqueryprimer/simple_selection.html
$("h2").addClass(

"hidden"
). removeClass(

);

,
.

.4.
HTML
.

312

jQuery

jQuery(). ,

.

var input = $("

document.createElement("input");, jQuery
.

var element =
$("<p>HeLLo
element.css("color", "#/00" ).insertAfter(

);

, jQuery
.

DOM. jQuery,
:

$("#animaLs").mpty();

$("tfanimaLs").remove();

.5.

. jQuery
jQuery -.
, popup
, :

 jQuery

313

jqueryprimer/pi
1 var links = $("#links
2 links.click(function(event){
3
var address = $(this).attr(
4
event. preventDefaultQ;
5
window.open(address);

"
a);
';)
f
e
r
h

6 });
jQuery
this. 3
jQuery, attr ()
.
preventDefault()
, .

jQuery ;
(). ,
HTML5
ondragover. () .
jqueryprimer/events.htarget =
$(#droparea")
target.bind ('dragover', function(event) {
if (event.preventDefault) event.preventDefaultQ;
return false;

});
:
.

on

.
,
:

314

jQuery

1
2
3
4
5
6

var links =

});

$("#Links");
links.click(function(event){
link = event.target;
var address = $(link).attr(
event.preventDefault();
window.open(address);

'href );

3 event.target
, .
j Query .

.
.
,
, :
links.onC'ciicfe",
element = $(this);
//

"", function(event){

});
( ).
, :
, ,
.

jQuery (, ()
lick ()) j Query JavaScript ,
.
,
. j Query
originalEvent. data
onmessage :
$(window).on("message",function(event){
var message_data = event.originalEvent.data;

 jQuery

315

originalEvent
.

.6. document.ready
JavaScript JavaScript,
. onclick
HTML ,
.5.
.
, JavaScript
.
JavaScript <head> , ;
, ,
, .
JavaScript window, on Load (),
. ,

.
DOM, .
jQuery document.ready () ,
. :
jqueryprimer/ready.html
$(document).ready(function() {
alert ("Hi!
L amapopup that displayswhen the page loads")',

});
,
.
$(function() {
alert("Hi! L am a popup that displays when the page loads");

;
document.ready ()
JavaScript.
,
<body>. ,
DOM, .

316

jQuery

, ,
document.ready () .

.7. jQuery
jQuery , .

,
navbar = document.getElementById("#novbor");

jQuery -
.
jQuery , document.
querySelector() document .querySelectorAll(),

CSS:
links = document.querySelectorAll("o.

popup");

j Query , ,
,
.
,
jQuery. , jQuery
, Ajax,
, DOM.
, jQuery
.

-
HTML5 <audio> <video> .
,
- .

.1.

, MP3
Vorbis, .
MP3
LAME1.
().
.
$ lame in.wav out.mp3 -\I2 --vbr-new -q0 --lowpass 19.7

Vorbis
Oggenc2. Vorbis
:
$ oggenc -q 3 inputfile.wav

MP3 Vorbis
Hydrogen Audio3.

1 http://lame.sourceforge.net/
2 http://wiki.xiph.org/Vorbis-tools
3 Lame http://wiki.hydrogenaudio.org/index.php?title=Lame#Quick_
start_.28short_answer.29; Vorbis http://wiki.hydrogenaudio.org/index.
php?title=Recommended_Ogg_Vorbis.o

318

, ,
.

.2. Web
HTML5 ,
.
.264, Theora VP8
FFMpeg1,
.
.
,
VP8 WebM:
ffmpeg -i blur.mov
-f webm -vcodec libvpx_vp8 -acodec libvorbis
-ab 160000 -sameq
blur.webm

, -
Zencoder2 ,
HTML5. Amazon S3
URL-,
-
API. Zencoder , ,
. Zencoder
,
3.
,
: Miro Video Converter4.

.
;
,
Encode.
,
.
1 http://www.ffmpeg.org/
2 http://www.zencoder.com/
3 , Zencoder,
.
4 http://mirovideoconverter.com/


Apple HTML5: http://www.apple.com/html5/
Apple HTML5 -
Safari.
Can I use...: http://caniuse.com/
HTML5, CSS3
.
CSS3.Info: http://wxma.css3.info/

CSS3.
Font Squirrel: http://x0ww.fontsquirrel.com
,
Web.
HTML5: http://wx0w.w3.org/TR/html5/
HTML5 W3C.
HTML5 - Mozilla Developer Center:
https://developer.mozilla.org/en/html/html5
HTML5 Mozilla Developer Center.
HTML5 Cross Browser Polyfills: https://github.com/Modemizr/
Modernizr/wiki/HTML5-Cross-browser-Polyfills
,
HTML5 CSS3 .
HTML5 Please: http://html5please.com/
,
HTML5 ,
.
Internet Explorer 10 :
http://msdn.microsoft.com/library/ie/hh673549.aspx
HTML5, CSS3 JavaScript,
Internet Explorer 10 Windows Store.

320

Microsoft IE Test-Drive: http://ie.microsoft.com/testdrive/

HTML5 (
) Internet Explorer 10.
Kiras Web Toolbox: Flash:
wzmj.lightsphere.com/dev/articles/flash_socket_policy.html
Flash,
Web Socket.
Typekit: http://www.typekit.com
,
JavaScript API.
Unit Interactive: CSS: http://unitinteractive.com/
blog/2008/06/26/better-css-font-stacks/
.
Video.js: http://videojs.com
oeaJavaScript, HTML5.
WebPlatform.org: http://webplatform.org/
HTML5, CSS, JavaScript
.

[Burl2] Trevor Burnham. AsyncJavaScript. The Pragmatic Bookshelf, Raleigh,

NC and Dallas, TX, 2012.
[Duel 1] Jon Duckett. HTML and CSS: Design and Build Websites. ]ohn Wiley
& Sons, New York, NY, 2-11.
[HTOO] Andrew Hunt and David Thomas. The Pragmatic Programmer: From
Journeyman to Master. Addison-Wesley, Reading, MA, 2000.
[PorlO] Christophe Porteneuve. Pragmatic Guide toJavaScript. The Pragmatic
Bookshelf, Raleigh, NC and Dallas, TX, 2010.
[Zel09] Jeffrey Zeldman. Designing with Web Standards. New Riders Press,
Upper Saddle River, NJ, 2009.