html 5 and css 3 web development

HTMI5CSS3

- 2-

Rooksn

^

Level Up with Today's Web Technologies

Brian P. Hogan

2nd edition

The Pragmatic BookshelfRaleigh, 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-9HTML5 CSS3 -, ,

. , HTML5 CSS3. HTML5 CSS3 , , -.

HTML5, , , , - Flash. , - , CSS3. , .

HTML5 CSS3; HTML5 , .

12+ ( 12 . 29 2010 . 436-.)

ISBN 978-1937785598 . 2013 The Pragmatic Programmers, LLCISBN 978-5-496-00979-9 , 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. API............................. 246

11. ? ........................................... 282

. .............. 298

. jQuery.................................. 307

. ..........................317

................................................................... 319

.....................................................................................................9

.......................................................................................................11HTML5: .............................. 12 ............................................. 12 ............................................. 15 .......................................... 16 JavaScript jQuery.................... 17

1. HTML5 CSS3......................................................................... 191.1. -................................. 191.2. .................................. 24

I.

2. ............................................30 1.

........................................ 33 2.

.............................46 3.

........................................... 51 4. FAQ.......... 56

.................................................57

3. -...................................................... 59 5. ..................61 6. 73 7. ......................................74 8.

JavaScript................................... 78

7

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. .............................................................1627.1. ......................................... 1637.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

8

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

................................................281

11. ?....................... 28211.1. Flexible Box...................28311.2. ...........................28611.3. Web Workers............................................ 28611.4. .............................. 29211.5. ......................................29511.6. WebGL................................................. 29711.7. !................................................297

. ...........................................................298.1. ......................................... 298.2. ................................................299.. .................................................. 299.4. ................. 300.5. ............................................ 301.6. ............................................ 301.7. CSS3........................... 302.8. ....................... 304A.9. API...............................................305

. jQ u e ry .............................................................307.1. jQuery.......................................... 307.2. jQuery..................... 308.. ............................... 309.4. ......................................311.5. ................................................312.6. document.ready................................ 315.7. jQuery.............................316

. ............................................317B. 1. ....................................... 317.2. Web ......................... 318

.............................................................................................................319.................................................. 320

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

. , , , .

, . , .

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),

(Charley Stran) (Colin Yates). , , .

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

, , . , . , , , .

10

- - . , 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 [Ducll], . Designing with Web Standards [Zel09],

, JavaScript jQuery2 ( ). jQuery, , , , Pragmatic Guide toJavaScript [ 10], JavaScript. JavaScript , , .

; , Internet Explorer 7 . HTML5, , : 2,

.

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

:

, . , , ,

. , .

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

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

16

1 http://virtualbox.org2 http://modem.ie3 http://nodejs.org

17

( $):

$ node server

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

JavaScript jQuery

JavaScript. JavaScript , (, 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

HTML5 CSS3 21

HTML5 , JavaScript , .

, UTF-8,

cmeta charset=,,t/t/-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://www.w3.org/TR/html-polyglot/

22 1 HTML5 CSS3

, HTML HTML5. , script div:

Help

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

, , Dreamweaver.

, . : PeopleSoft, Microsoft Outlook Web Access . , , . , :

frame;

frameset;

noframes.

, CSS JavaScript. , ,

1 http://www.w3.org/TR/html5-diff/

HTML5 CSS3 27

, , -. , CSS 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 . , , , longdesc .

HTML5 , , . W3C Validator1 .

Homeclixa href="/products">Products

31

. id - , , . , .

, . HTML5 , . , / , HTML5 , .

, progress, HTML5, . , , . HTML5, .

:

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

010 ]footer

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

. [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]

(,

). [ ]

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

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

data-. [ JavaScript getAttribute()]

32 2

1.

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

, , , . HTML5 , , .

, , . , (, (), ) , , . HTML AwesomeCo.

1. 33

AwesomeCo Blog!Latest Posts Archives Contributors Contact Us

How Many Should We Put You Down For?

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."

Archives

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."

QctPfrsr 2Q1.3

August 2013 July_2Q13 Juris .20.13 . May 2 April 2013 March 2013 February 2013 January 2013 More

Copyright 2013 AwesomeCo.

Home About Terms of Service Privacy

. 1.

34 2

. 2 . : . . (pull quotes). . . , , div HTML5.

section

header

!,[ - .

article

!'........ _ is l l l

footer

footer

. 2. HTML5

doctype

HTML5, . index.html HTML5:

1. 35

1 2 3 4 cmeta chanset="ut/-S" />5 AwesomeCo Blog6 78 9 10

doctype 1 , HTML5. -, , doctype XHTML.

HTML5:

. doctype . -,

, . -, Internet Explorer 6-8 , . doctype HTML5 .

4. . , , .

, .

36 2

(, , . .) , . .

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

. , id ( 1). CSS JavaScript.

. , ( ). , ; , .

. , , . .

html5_new_tags/index.html


. , , , .

.

1. 37

. , , HTML.

. , , .

. , ; . AwesomeCo, , . footer .

footer id ="page_footer">Copyright 2013 AwesomeCo.

HomeAboutTerms of Service/ax/li>Privacy/ax/li>

CSS, . , ; CSS. .

(section) . , , section.

38 2

html5_new_tags/index.html

, . ! . .

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

? , (, , . .).

: , . , , .

(, ) . , .

, . :

How Many Should We Put You Down For? Posted by Brian on

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.

One way you can keep a conversation going is to avoid asking questions that have yes or no answers. For example, if you're selling a service plan, don't ever ask Are you interested in our 3 or 5 year service planP Instead, ask Are you interested in the 3 year service plan or the 5 year plan, which is a better valuePAt 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.

25 Comments ...

, . .

, , , , . aside.

htmlS jiewjtags/index.html

Sldquo;Never give someone a chance to say no when selling your product.

. , .

1. 39

40 2

:

section id="posts">article class="post">header

0ctober 1st, 2013 at12:39PM/time>

/headeraside

Never give someone a chance to say no when selling your product.Srdquo;

/aside

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.

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

footer

25 Comments ... /footer

/article/section

1. 41

.

. , aside, . , . August 2013

42 2

, . stylesheets/style, css HTML, .

1. 43

, . 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 .mozilla.org/en-US/docs/Web/CSS/clear

44 2

#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 . . , - . , Internet Explorer.

O' '

Internet Explorer 9.0. , .

, JavaScript. : , . , , JavaScript.

, . HTMLshiv1 ; , .

1. 45

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

46 2

2.

AwesomeCo , $5000. , AwesomeCo $5000. AwesomeCo , , . 3.

Our Fundraising Goal

Help us reach our goal of $5000!

. 3.

, , CSS, , . . , (, , ). , , .

, $5000. , .

HTML5. , 2500.00.

Our Fundraising Goal cmeter title="USD" id

2. 47

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


CSS. stylesheets/style.css :

meter{width: 280;

}

CSS HTML:

, , .

. jQuery , . javascripts/fallbackjs, JavaScript. jQuery .

, , , max. , , . noMeterSupport():

html5_meter/javascripts/fallback.jsvar noMeterSupport = function(){

return(document.createElement('meter').max === undefined);}

jQuery .

48 2

fakeMeter, ; , fill; . . , .

1 if (noMeterSupport()) {var fakeMeter, fill, label, labelText, max, meter, value; * meter = $("#pLedge_goaL");value = meter.attr("va.ue");

5 max = meter.attr("mox")jlabelText = + meter.val();

fakeMeter = $(""); fakeMeter.addClass ("meter");

10 label = $("" + labelText + " " ) ; label. addClass {"Label")',

- fill = $(");fill.addClass ("fiLL")-,

15 fill.css("widttj",(value / max * 100) + );fill.append("

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


. 4.

50 2

, JavaScript, , meter; , .

, , HTML5.

, , . , , , , . :

3. 51

3.

, - JavaScript , , . re l class. .

data-; HTML5. , , , , . , JavaScript.

, onclick

, . , , , , , . , .

, . , . , . AwesomeCo , . :

52 2

html5_popups_with_custom_data/original_example_l.html

3. 53

, , onclick - . JavaScript .

- , HTML .

.

Holiday

, jQuery. , , jQuery.

:

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

;

jQuery popup, click .

, click, , . preventDef ault . .

- , . , JavaScript, .

54 2

!

JavaScript. , , conclickQ . . :

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-image- size, dataset.mobilelmageSize. dataset (camel case).

. . , , , , JavaScript.

56 2

4. FAQ

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

- , , . , .

HTML (Definition List) . HTML5 (Description List). , .

, AwesomeCo FAQ, , .

FAQ . , . .

AwesomeCo FAQ

What is it that AwesomeCo actually does?

AwesomeCo creates innovative solutions for business that leverage growth and promote synergy, resulting in a better life for the global community.

4. FAQ 57

, . 5; .

AwesomeCo FAQWhat 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, .

; HTML5 . .

. , .

nav, article>footer{display:none}

. , JavaScript. ; , , (), () .

, . 6 .

58 2

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

!

-

, , , HTML . , , , , ( Ctrl, , , Cmd).

, , jQuery UI1 HTML, CSS JavaScript. , , , , , , . , , , JavaScript . , , , jQuery, .

? , , . ? , . . - , . .

1 http://jqueryui.com/

, contenteditable HTML .

:

. [010.1, IOS, ]

URL-. [010.1, IOS5, ]cinput type='Tange">

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

, -. [5, S5, 010.1, IOS5, ]

. [5, O il]

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

, .

60 3 -

5. 61

5.

HTML5 , . ( , ), , , , , (spinboxes) . , JavaScript. , . , Safari iOS URL email @ : /.

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

HTML5. .

Project Information Name

Priority

Estimated Hours

Start date

Email contact

Staging URL

Project color

Submit

12/01/2013 :]

CD

62 3 -

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

Project Information

Name

5. 63

. range.

Priority

64 3 -

. , . , , HTML5, 8.

, step. ^ 1, .

, . date.

Start date

email , . , .

5. 65

Email contact

, . @ iPhone Android.

URL-

URL- . URL-. URL-, :

, iPhone Android

- ( , URL- ).

, . color.

66 3 -

Project colorcinput type="cotor" nam e="project_coLorid

, . , .

CSS. stylesheets/style.css .

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

. C S S

la b e l{float: left; width: 150;

}

in p u t{ border: lpx solid #333; }

in p u t:focus{ background-color: #ffe; }

: focus , .

-. . CSS.

Chrome Opera , Firefox, Safari Internet Explorer .

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

jQuery jQuery-simple-color1. color jQuery:

$(' input[type=coLor]') .simpleColorQ;

, . HTML5.

1 http://recursivc-design.corn/projects/jquery-simple-color/

68 3 -

, SimpleColor, , , JavaScript. , , JavaScript , input color. , .

, jQuery, :

javascripts/fallbacks.js, H T M L ;

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

6 . color : , . . , . , , , .

, . , , JavaScript , .

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

5. 69

70 3 -

. CSS, :

.simpleColorContainer, .simpleColorDisplay{ float: left;

} t

, , JavaScript. JavaScript , . , : . , .

Modernizr

Modernizr1 HTML5 CSS3. , , , .

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

Name

74 3 -

7. , . , .

AwesomeCo . , . . .

Create New Account-------------First Name

Last NameSmith*

Emailuser@exampie. com

Password8-10 characters_____

Password ConfirmationType your password a

I Sign Up |

. 6. ,

, placeholder :

htmis_piaccinput id ="emaiL"typ e="emaiL"

name="emaiL" placeholdier=user@excimpLe. com">

.

7. 75

Create New Account

First Name

76 3 -

. , ; , .

, CSS .

fieldsetfwidth: 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 :

ts/style.css ,&: .

1 https://github.com/mathiasbynens/jquery-placeholder

7. 77

Modernizr , . 70; , Modernizr :

78 3 -

8. JavaScript

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

HTML5 , . , JavaScript.

AwesomeCo . , . . , .

, required ( , autofocus). , required , .

< >First Name

nam e="first_name" placeholder^'

Last Name

Email

, , , . , JavaScript. Chrome:

8. JavaScript 79

First Name iio h n ' " -------------1

Last Name 'Smith Please fill out this field.

Email user@ exampie.com

, : , .

Email [bademail 1

Password Please enter an email address. JPassword Confirmation Type your password a|

Sign Up

, .

80 3 -

, , .

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

Password

title , .

, , , title.

Password ...................... 1

Password Confirmation 5j Please m atch the req uested form at. Password must be 8 or more characters with at least one number, an uppercase letter, and one special character

Sign Up

.

8. JavaScript 81

clabel -For="password_confirmation" >Password Confirmationcinput id=" password_confirmation"

name=" password_confi.rmati.on"value=""autocomplete"o//" placeholder=" Type your password again" pattern"(7=.{8,})(?=. *[a-z])(?=.*[A-Z])(?=. *[\d])(?=. *[\kl]).*$"title="Password confirmation must be 8 or more characters with, at

Least one number, an uppercase Letter, and one speciaL character"

/>c/li>

, , . J avaScript.

, , . (, Firefox) . . CSS .

:valid :invalid:

input [required]:invalid, input :invalid{border-color: #A5340B;

}

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

}

.

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/H5F

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 informationEdit Your Profile

Name Hugh MannCity TmytowriState OHPostal Code 920Email boss awesomeconpany .com

. 7.

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

9. 85

, JavaScript. , .

HTML5 contenteditable, . . , . HTML show.html:

html5_content_editable/show.html

Show User

.

User information

NameHugh Mann

CityAnytown

State

86 3 -

Postal Code92110

Emailboss@awesomecompany. com

CSS. , CSS3 , . stylesheets/style.css, :

1 ul{list-style:none;} Line 1

l i > b, l i > span{display: block;

5 float: left; 5width: 100px;

- }

l i > span{10 width:500px; 10

margin-left: 20px;- >

l i > span[ contenteditabLe] :hover{15 background-color: #ffc; 15- }

l i > span[contenteditabLe] :focus{background-color: #ffa;

20 border: lpx shaded #000; 20- }

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

3 . 14 18 hover focus CSS.

9. 87

, . ; .

, . ; jQuery. - Ajax, .

javascripts/edit.js jQuery HTML, :

:

$("#edi t_profi Le_Link"). h i d e (>; 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: " PUT, 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 a jax(). - URL- data-url , URL- . , . 9.

. , JavaScript . , , . , , , :

contenteditable. , JavaScript

- JavaScript ( ... , ).

, JavaScript. , , , .

, POST- , Ajax. , accept, , POST- XMLHttpRequest. contenteditable JavaScript, .

9. 89

edit.html. , , Ajax-.

html5_content_editable/edit. html chtml lang="en-US">

Your Information

Your Name

City

State

90 3 -

stylesheets/style, css , . , :

html5_content_editable/stylesheets/style.cssol{

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

}

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

}

label{width: 150px; ^ V.. float: left;

>/* EN:edit_styles */

show.html.

html5_content_editable/show.htmlL/ser informatiorx/hl>

Edit Your Profile

. , 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 ] " ).blur(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.")-,berror: 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 4

( ). [2, F3.5, S3, IE9, 09 .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, IE9,09.5, IOS3, 2]

:[#content{ column-count: 2; column-gap: 20;

column-rule: lpx solid #ddccb5; }] . [2, F3.5, S3, 09 .5 ,10S3, 2]

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

[media="only all and (max-width: 480)"] . [, F3.5, S4, IE9, 010.1,10S3, 2]

10. 95

10.

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

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

Item Price Quantity Total

Coffee mug $10.00 5 $50.00

Polo shirt $20.00 5 $100.00Red stapler $9.00 4 $36.00

Subtotal $186.00Shipping $12.00

Total Due $198.00

' . 8. HTML

, , , . , . , .

. , .

96 4

ItemPriceQuantityTotal

,

Coffee mug$10.005$50.00

Polo shirt$20.005$100.00

Red stapler$9.004$36.00

Subtotal$186.00

10. 97

anced selectors,

(, odd even ): , HTML5 . , .

nth-of-type , . , , .

, . . CSS3 even odd, .

css3_advanced_selectors/stylesheets/style.csstr:nth-of-type(even){

background-color: #F3F3F3;}

tr:nth-of-type(odd) { background-color:#ddd;

>

: . . .

:

98 4

Item Price Quantity Total ~~1Coffee mug $10.00 5 $50.00Polo shirt $20.00 5 $100.00Red stapler $9.00 4 $36.00Subtotal $186.00Shipping $12.00Total Due $198.00

.

(: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 tr:nth-child(2n+4)

, , , :

css3_advanced_selectors/stylesheets/style.csstd:nth-child(n+2), th:nth-child(n+2){

text-align: right;

10. 99

}

100 4

, , , .

.

I Item Price Quantity T o ta lHCoffee mug $10.00 5 $50.00Pok) shirt $20.00 $100.00Red stapler $9.00 4 $36.00Subtotal $186.00Shipping $12.00Total Due $198 XX)

1 ............................ .. ..........

.

(: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 Price Quantity T o ta l!Coffee mug $10.00 5 $50.00pobshkt $20.00 5 $100j00Red staple: $9.00 4 $36.00Subtotal T ' $186.00Shipping $12.00Total Due $ 1 9 8 4 0

1' _____ _____ 1

. - .

(:nth-last-ehild)

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

102 4

, :

tr:nth-last-child(2){ color: green;

>

. .

, . , . . nth-last-child .

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

>

. 3, nth-last-child . nth- child, .

(. 9) , .1-----------------------------------------------------------------------------------------------I Item Price Quantity TotallCoffee mug $10.00 5 $50.00Polo shin $20.00 5 $100.00Red stapler $9.00 4 $36.00

Subtotal $18640Shipping $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 . Internet Explorer, , IE.

1 http://selectivizr . /

104 4

: jQuery, jQuery . jQuery , , , jQuery .

Internet Explorer. . 10.

T^able I I Qt - g - ----------------- ------------------------ ---------- .............. ....................... .... ...............1 Item Price Quantity Total

Coffee mug $10.00 5 $50.00Polo shirt $20.00 5 $100.00Red stapler $9.00 4 $36.00

Subtotal $186.00Shipping 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.

. .

106 4

CSS

, . screen , print , ( ).

css3 jprint JLinks/index.html

11. (:after) 107

:before ra fte r CSS2.11. :

a ::a f te r{content: " (" a ttr (h re f) ")

}

, , .

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

, , . , .

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

11. (:after) 107

: before : a f te r CSS2.11. :

a ::a f te r{content: " (" a ttr (h re f) ") "j

}

, , .

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

, , . , .

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

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

. ( ). . .

, . - , . , Bootstrap2.

/ ........................... .................................................................. Handheld?

Handheld . , screen.

108 4

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%;

}}

, . , .

, , :

. 11 , - . , .

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

110 4

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 someone a chance to say no when selling your product."

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.

. 11. iPhone

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

, jQuery, 1. , min-width max-width . .

1 http://plugins.jquery.com/project/MediaQueries

12. 111

i Respond.js1

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

. . , .

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

13. ; - . , . , , , . , , CSS3.

112 4

AwesomeCo . -. , , . , . . 12.

AwesomeCo NewsletterVolume 3, Issue 12

News From The DirectorLorem 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 Being Awesomeoccaccat cupidatat non proident, sunt in culpa qui officia dcsemnt mollit anim id cst labornm.

"Lorcm ipsum dolor sit amet,Quick Bits Oi Awesome conscctctur adipisicing clit, scd

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

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.

BirthdaysLorcm 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. -

i 13. 113

. , , , .

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

. HTML-. , .

114 4

Quick Bits of Awesome

Lorem ipsum dolor sit amet...

< /p >

/articlearticle id ="birthdays">

header

/header

Lorem ipsum dolor sit amet...

/article/sectionfooter id="footer"

Send newsworthy things to

13. 115

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

>

(. 13) . , . , float .

AwesomeCo NewsletterVolume 3, Issue 12

News From The DirectorLorcm 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.


Being Awesome

"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 ct dolorc magna aliqua. Ut enim ad minim

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

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.

BirthdaysLorcm 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.

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

. CSS, . , , - . :

Firefox -moz-. Chrome Safari,

Opera -webkit-. Opera --.

. , , CSS. , ; , . Can I Use...1.

/ ................................................................................................ ?

, . . , . .

, , , . , , . , .

116 4

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:

Internet Explorer; , .

&^ AwesomeCo Newsletter ^ " |

| ** i I ?

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

AwesomeCo NewsletterVolume 3 Issue 12

News From The DirectorLorem ipsum dolor sit amet, coosectetur adipisiciog ek, sed do eiusmod tempor ncidKknt ut labor e et dolore magna ah qua 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


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.

quis nostrud exercitation uflamco laboris nisi ut aliquip ex ea commodo consequat

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

BirthdaysLorem 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 4

JavaScript . , , .

. , . .

, , . ; ; , . , , JavaScript .

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

*

HTML5 . , . - , , . , .

, , , . , , , .

, -. , Ajax . , . , , , , , .

WIA-ARIA1 (Accessibility for Rich Internet Applications) - -

1 http://www.w3. org/W AI/intro/aria.php

HTML5 . , . - , , . , .

, , , . , , , .

, -. , Ajax . , . , , , , , .

WIA-ARIA1 (Accessibility for Rich Internet Applications) -

1 http://www.w3.org/W AI/intro/aria.php

120 5

. JavaScript Ajax. WIA-ARIA HTML51, HTML5. WIA-ARIA , JAWS, Window- Eyes Apple VoiceOver. WIA-ARIA , .

, HTML5 WAI-ARIA . , , , , .

: role [Time]

. [ ]

[This is a caption]

. [ ]aria-describedby [

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 5

form , HTML,

main

navigation

search

AwesomeCo, 1.

banner:

AwesomeCo Blog!

role="banner" .

.

Latest Posts

14. ARIA 123

Archives

clixa href="2013/10">October 2013 clixa href ="2013/09">September 2013 clixa href ="2013/08">August 2013c/a>c/li> clixa href ="2013/07">3uly 2013c/ax/li> clixa href="2013/06">3une 2013c/ax/li> cli>ca href="2013/05">May 2013c/ax/li> di>ca 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> 2013 AwesomeCo.c/p>

c/footer> c!-- footer -->

, .

, . .

/ ................................................................................................

, , nav header?

, , , . search , , , ,

124 5

( ). , .

.

article ,

definition

directory (, ).

document ( )

group ,

heading

img , . ,

list

listitem

math

note , ,

presentation , ;

row

rowheader

toolbar -.

(, ) HTML. document , ,

14. ARIA 125

. , , . , . , , -. .

document .

html5_aria/blog/index.html

.

, . , , . , .

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

NVDA . , 2.

. . , . , .

1 http://www.freedoinscientific.com/downloads/jaws/jaws-downloads.asp2 http://www.nvda-project.org/

126 5

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

AwesomeCoWelcome Services Contact About

Contact

The contact section


Home About lerms-oLSfttvifie Privacy

. 15. jQuery

HTML5. , . :

' ^ ^ ^chtml lang="en-t/S">

AwesomeCo

128 5

Welcome

The welcome section


15. 129

csection id="obout">

About

The about section

:

csection id="contentMrole=" document" aria-live="assertive" aria-

atomic="true">

, .

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 5

#header > nav > ul, #footer > nav > ul{ l i s t - s ty le : none; margin: 0; padding: 0;

}#header > nav > ul > li, #footer > nav > ul > li{

padding:; margin: 0 20px 0 0; d isp lay :in line ;

} ,

, .

footer#footer{ c lear: both; width: 100%; display: block; tex t-a lig n : center;}

, .

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

, aria-atomic=true, .

15. 131

false, . , . Ajax, false.

, JavaScript . jQuery .

html5_aria/homepage/index. html

application.js :

1 var configureTabSelection = function(){$("#servicesj itaboutj #contact").hide()

true);$("#wetcome").attr ("aria-hidden"}false);

5 $("nav uL").click(function(event){var target = $(event.target); if(target.is("o")){

event.preventDefault();if ( $(target.attr("/7re/")) ){

10 activateTab(target.attr( "));>;

;- };15- var activateTab = function(selector){

$("[aria-hidden=faise]").hide() true);

132 5

$(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:

, , , . presentation .

, , . , . , .

AwesomeCo AwesomeConf . HTML. , , . . 16 HTML.

134 5

Conference ScheduleTime Room 100 Room 101 Room 152 Room 1538:00AM Opening Remarks and Keynote - Ballroom---------------------- ,-------------- ------ . - ----- i9:00AM

Pop Culture And You

VisualizingSuccess

10:00AM

Build a Solid Fundraising Campaign Print Is Dead

Mobile First? Not So Fast!

Proving What Works

11:00AM Making Connections Marketing Panel Clear Content

ImprovingExperiences

12:00 Lunch

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.htmlConference Schedule

TimeRoom 100Room 101Room 152Room 153

*

8:00 AMOpening Remarks and Keynote - Ballroom

9:00 AMCreating Better Marketing VideosEmbracing Social MediaPop Culture And YouVisualizing Success

16. 135

Use this grid to find the session you want to attend. Note that the keynote and lunch are in the ballroom.

, , . . , .

. . scope, , . :

> Time> Room 100> Room 101

> Room 152> Room 153

sr> 8:00 AM

0pening Remarks and Keynote - Ballroom

> 9:00 AM

Creating Better Marketing VideosEmbracing Social Media

5sible_index.html

136 5

Pop Culture And YouVisualizing Success

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

, , , . , :

> > Conference Schedule>

/ .................................... ............. id ?

:

Name

[email protected]

Barneybarney(8)puzzlesthebar.com

16. 137

- scope. (, ). , , .

, . aria-describedby , .

HTML5 CSS3 , . HTML5 , . CSS3 , , .

-, - , . , Flash. HTML5 , JavaScript. , Flash . .

JavaScript AwesomeCo . , canvas, . , , canvas , . , SVG (Scalable Vector Graphics) . : [Alternative content]

JavaScript. [4, F3, S3.2, IE9,010.1, IOS3.2, 2]

[]

XML. [4, F3, S3.2, IE9,010.1, iOS3.2,A2]

17. 141

17. HTML5 . - , . . , JavaScript. .

canv.

Fallback content here

, CSS , ( ).

JavaScript. , , JavaScript. JavaScript , . :

var canvas = document.getElementById( 'my_canvas');if (canvas.getContext){

var context = canvas.getContext( '2d' );

}else{// - 7/

>

, getContext(). getContext , 20- . , . , , , , JavaScript.

142 6

, , . , :

context.fillStyle = "(200,0,0)" ,context.fillRect (10, 10, 100, 100);

, . 2D- . F, .

; 10 .

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

a

AwesomeCo Logo Test

144 6

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 .

llLatolhtml5_canv;

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 6

, . AwesomeCo :

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

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

.

, . X Y , , . .

.

.

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

/sAwesomeCo

17. 147

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

, stroke fill , .

html 5_canvas/logo.htmlcontext.fillStyle = "#FFFFFF" ; context.strokeStyle = "#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();

(# ff f ). , , .

/n\AwesomeCo ; .

:

htmlScanvasgraphjcontext.fillStyle = .context.strokeStyle = "#FF0000";

148 6

, . .

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

html5_canvas/logo_gradient.html

:

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

. , - .

150 6

18. RGraph

, JavaScript , . .

-. Flash, : (, iPad iPhone). , . (, canvas), . , JavaScript. . RGraph1 HTML5 . , JavaScript, JavaScript, , , . .

html5_canvas/rgraph_bar_examplehtmlccanvas width="500" height="250" id="test">[no canvas support]

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;

JavaScript, . , , . 18.

. 18. canvas

AwesomeCo , -. , , . , , . . 18.

HTML , , JavaScript, JavaScript. . JavaScript .

Browser share for this site

A bar graph of my favorite pies

152 6

Safari - 10%

Internet Explorer - 30%

18. RGraph 153

HTML

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

:

html5_eanvas/canvas_graph.html

, HTML- , RGraph. , RGraph . j Query. javascripts/graph.js :

html5_canvas/javascripts/graph.js1 var canvasGraph = function(){

var title = $('#graph_data hi').text(); var labels = $("#graph_data>uL>Li>p[data-name]").

map(function(){ return this.getAttribute("data-name");

5 });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);

10 bar.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 6

2 . , 3 data-name. jQuery map.

6 .

7 . jQuery data(), HTML5 .

, RGraph (. 20).

Browser support

Browser share for this site

. 20. , canvas

HTML . , , , . , JavaScript, .

canvas, j Query canvas. Modernizr JavaScript, .

18. RGraph 155

var canvas = document.getElementById('browsers'); if (canvas.getContext){

canvasGraph();>

, , canvas.

JavaScript. Internet Explorer 8, canvas.

ExplorerCanvas (. 17) RGraph . excanvas.js , Internet Explorer 8. Internet Explorer 7 , .

ExplorerCanvas , . ExplorerCanvas DOM, , . . - . 148, ExplorerCanvas canvas. -, j Query $( document). ready () canvasGraph(). , . j Query , :

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

canvasGraphQ;}

});

JJ _____ * 1 .

156 6

Internet Explorer 8! canvas

, - . ; , . , .

.

19. SVG 157

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

SVG, XML- SVG AwesomeCo .

HTML :

html5_svg/index.html chtml lang=en>

AwesomeCo Logo Test

script typ e="image/svg+xmL">

Ter image/svg+xml. , SVG HTML-. SVG. XML, , , .

, . SVG

19. SVG 159

:

/\AwesomeCo .

SVG , . . , .

, style. :

/\>4wesomeCo .

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

d. , . , .

160 6

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

:

/r^ AwesomeCo SVG ,

. CSS ( , ).

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

, SVG, . SVG Web1, SVG 1.1. SVG Web Flash.

SVG Web svg.js svg.swf javascripts. svg.js - , :

1 https: //code.google.eom /p/svgw eb/

19. SVG 161

- . , , (, Flash). HTML5 - . , - , .

: []

. [4, F3.6, S3.2.IE9, 010.1, IOS3, 2]

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

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

, . [18, S6.1, IE10]

Web. , , , , .

19. SVG 163

7.1.

- . MIDI- - .

Ter , , W3C. , , :

164 7

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 7

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 7

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 >Drums audio id ="drums" controls

source src="sounds/ogg/drums.ogg" type="source src="sounds/mp3/drums.mp3" type=" ">Dovir\load drums.mp3

/audio/article

audio , . audio source: MP3- OGG- . type ; , ; . , , source.

, MP3 , audio.

Chrome, Safari Firefox. HTML5 .

html5_audio/audio.html

Drums

20. 171

Internet Explorer, , audio. , - ?

Samples:Drums

Guitar

0.0 )

Organ

Bass

0:0 )

. 21. Chrome

audio. , . , . Flash .

. , , . , , , . , HTML5 , , .

JavaScript.

172 7

Drums

Download drums.mp3

. , , .

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

21. AwesomeCo , , iPad. Photoshop, . , .264, Theora VP8, ( ).

. , Chrome, Firefox, Safari iOS Internet Explorer 9 - . 01_ :

Saturate with Blur

source src="video/h264/01_bLur.mp4" type='source src="video/theora/01_bLur.ogv" type='source src ="video/Mebm/01_bLur.webm"type='Your browser does not support the video tag./p>

/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, content- type . Microsoft Internet Information Server, MIME .

- MIME , , . . 22.

Internet Explorer 8 . Flash.

. 22. Chrome

176 7

Flash HTML5, Flash . Video For Everybody1 , .

Video.js2 . , , Flash HTML. .

Video.js . Video.js , . :

:

class Video.js , . data-setup , JSON (JavaScript Object Notation). , .

Internet Explorer , Flash. Internet Explorer , . 23.

1 http://camendesign.com/code/video_for_everybody2 http://www.videojs.com/

21. 177

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

, , Flash. , .

. 23. Internet Explorer Video.js

html5_video/index.html

178 7

264, playable on most platforms

OGG formatWebM format

Modernizr , 20. , . , , .

Flash

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

Video.js, Video.js Flash, MP4.

, , MP4:

var videoElement = document.createElement(" if(videoElement.canPlayType){

if (videoElement.canPlayType("vic/eo/mp4") === ""){videojs("video_blur", {"techOrder": ["flash", ]>);

};}

21. 179

video , , 1(). 1() , , ; video js, Video.js, .

video js , , .

Firefox, MP4, Flash. , ; . , .

, , ? !

180 7

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

22. 181

, - . HTML5 . , 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.vttWEBVTT

00:00.000

html 5 and css 3 web development

Documents