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/
http://www.w3.org/TR/css3-grid-layout/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/
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
http://virtualbox.orghttp://modem.iehttp://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/
http://localhost.8000http://www.pragprog.com/titles/bhh52e/
18
, , , . , .
, 1. , .
? ! HTML5 CSS3 .
, , - [email protected] ( , ).
!
1 http://www.beyondhtml5andcss3.com/
mailto:[email protected]://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/
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 . -
http://www.webdevout.net/
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
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/
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. . , , .
, .
http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd
36 2
(, , . .) , . .
1 header id ="page_header">2 AwesomeCo Blog!3
. , id ( 1). CSS JavaScript.
. , ( ). , ; , .
. , , . .
html5_new_tags/index.html
Copyright 2013 AwesomeCo.
. , , , .
.
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;
/asideThe 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
https://developer
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/
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">
Help us reach our goal of $5000!
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
Help us reach our goal of $5000!
. 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, .
http://ajax.googleapis.%d1%81%d0%be%d1%82/ajax/Libs/jquery/1
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/
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 -
mailto:[email protected]
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/
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, , .
http://ajax
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/
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/
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/
http://modernizr
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
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
, , , . , 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
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.);
http://ajax.googLeapis.eom/ajax/Libs/jquery/l.9.1/jquery
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 . /
http://selectivizr
104 4
: jQuery, jQuery . jQuery , , , jQuery .
Internet Explorer. . 10.
Table 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 - . , .
http://ajax.googLeapis.%d1%81%d0%be%d1%82/ajax/Libs/jquery/1
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
http://www.w3.org/TR/CSS21
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
http://www.w3.org/TR/CSS21/generate.html%23before-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/
http://www.w3.org/TR/css3-mediaqueries/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
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
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.
Quick Bits of Awesome
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
http://caniuse.com/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
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.
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
http://%e2%96%a0www.w3
HTML5 . , . - , , . , .
, , , . , , , .
, -. , Ajax . , . , , , , , .
WIA-ARIA1 (Accessibility for Rich Internet Applications) -
1 http://www.w3.org/W AI/intro/aria.php
http://www.w3.org/WAI/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
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/
http://www.freedoinscientific.com/downloads/jaws/jaws-downloads.asphttp://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/
http://backbonejs.org/http://emberjs.com/http://webaim.org/projects/screenreadersurvey4/
15. 127
, . JavaScript , , JavaScript . , .
AwesomeCoWelcome Services Contact About
Contact
The contact section
Copyright 2013 AwesomeCo.
Home About lerms-oLSfttvifie Privacy
. 15. jQuery
HTML5. , . :
' ^ ^chtml lang="en-t/S">
AwesomeCo
128 5
Welcome
The welcome section
Copyright 2013 AwesomeCo.
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);
http://ajax.googieapis
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
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
http://code.google.eom/p/explorercanvas/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/
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();- }
http://aj
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
158 6
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/
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
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
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