HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
-
Upload
todd-anglin -
Category
Technology
-
view
170 -
download
7
description
Transcript of HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
![Page 1: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/1.jpg)
HTML5 BootcampEssential HTML, JavaScript & CSS
Todd AnglinEVP Product Strategy, Telerik
![Page 2: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/2.jpg)
Workshop Downloads:
http://bit.ly/TaskListDemo(https://github.com/toddanglin/TaskListDemo.git)
http://bit.ly/workshoplabs
(Case sensitive)
![Page 3: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/3.jpg)
10 %
Read
20% Hear
30% See
50% Hear + See
70% Say + Write
90% Experience
You generally remember...
![Page 4: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/4.jpg)
EVP Product Strategy, Telerik5x Microsoft MVP, ASP Insider, O'Reilly Author
@toddanglin
5’ 9”41 (Birkenstock)
![Page 5: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/5.jpg)
Workshop Agenda
Time Topic
8:30 AM to Noon HTML5
Noon to 1:00 PM LUNCH
1:00 PM to 4:30 PM JavaScript & CSS3
WHY + HOW
![Page 6: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/6.jpg)
![Page 7: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/7.jpg)
Morning Agenda
Time Topic
8:30 AM Intro to HTML5 & Fundamentals
11:00 AM HANDS ON
11:25 AM Modern HTML App Patterns Overview
Noon Lunch
![Page 8: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/8.jpg)
![Page 9: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/9.jpg)
![Page 10: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/10.jpg)
![Page 11: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/11.jpg)
HTML5 SitesHTML5 AppsHTML5 Enriched
![Page 12: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/12.jpg)
16:32
![Page 13: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/13.jpg)
the "plan"the
optionsHTML5
the browsers
use it today
A&Q
![Page 14: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/14.jpg)
Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.” -Steve Jobs
April, 2010
“
![Page 15: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/15.jpg)
16:32
![Page 16: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/16.jpg)
16:32
![Page 17: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/17.jpg)
Why is HTML5 #winning the web?
16:32
![Page 18: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/18.jpg)
It's Important.
![Page 19: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/19.jpg)
82%
![Page 20: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/20.jpg)
It's Unifying.
![Page 21: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/21.jpg)
![Page 22: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/22.jpg)
It's Everywhere.
![Page 23: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/23.jpg)
![Page 24: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/24.jpg)
![Page 25: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/25.jpg)
“While it continues to serve as a rough guide to many of the core features of HTML, it does not provide enough information to build implementations that interoperate with each other and, more importantly, with a critical mass of deployed content.”
-W3C on HTML416:32
![Page 26: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/26.jpg)
HTML4 = Rough Guide
Unpredictable Browser Support
![Page 27: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/27.jpg)
How is the web evolving?
![Page 28: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/28.jpg)
<HTML>CSS:3;
ECMAScript();{ }“HTML5”
![Page 29: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/29.jpg)
“Living Standard”
WebSockets FileAPI WebGL
HTML5 FormsGeolocation
Offline
Canvas Video
Audio
Canvas
Video
Geolocation
Semantic Tags
SVGWHATWG | W3C | IETF
16:32
![Page 30: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/30.jpg)
Which browsers matter?
![Page 31: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/31.jpg)
Know your users.Know your browsers.
![Page 32: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/32.jpg)
of internet browses withIE, FF, Safari, Chrome, or Opera
99%
![Page 33: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/33.jpg)
![Page 34: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/34.jpg)
![Page 35: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/35.jpg)
![Page 36: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/36.jpg)
![Page 37: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/37.jpg)
![Page 38: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/38.jpg)
Source: comScore, Alexa, Flurry Analytics
Jun-10 Dec-10 Jun-11 Dec-110
102030405060708090
100 PC & Mobile Web BrowsingMobile Apps
64MINUTES43
MINUTES
70MINUTES
66MINUTES
74MINUTES
81MINUTES 72
MINUTES
94MINUTES
![Page 39: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/39.jpg)
Sta
ble Canvas | Local Storage |
Microdata | Document Editing | Geolocation Semantic Tags | Video/Audio | Selectors
In P
rog
ress WebGL | WebSockets | File API | Drag-Drop
API | IndexedDB | Offline API | Web Workers | HTML5 Forms
16:32
![Page 40: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/40.jpg)
16:32
![Page 41: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/41.jpg)
IE9 offers support for the most relevant, real-world web patterns that developers are using today as well as the HTML5 patterns we expect to become more mainstream.”
“
Dean HachamovitchCorporate VP, IE
![Page 42: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/42.jpg)
html5labs.interoperabilitybridges.com
ie.microsoft.com/testdrive
+Platform Previews
![Page 43: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/43.jpg)
![Page 44: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/44.jpg)
Inte
rnet
Exp
lore
r 6 »
Inte
rnet
Exp
lore
r 7 »
Inte
rnet
Exp
lore
r 8 »
Inte
rnet
Exp
lore
r 9 »
Win
Phon
e 7.
5»
Andro
id 4
.0 »
Andro
id 4
.3 »
Safa
ri 5.
1 »
Win
Phon
e 8
»
Opera
11.
60 »
Fire
fox
8 »
Chrom
e 17
»
Safa
ri 6.
0 »
iOS
6.0
»
Opera
12
»
Chrom
e Mob
ile »
Safa
ri 7.
0 »
iOS
7.0
»
Fire
fox
24 »
Chrom
e 22
»
Fire
fox
28 »
Chrom
e 32
»
Chrom
e 33
»0
100
200
300
400
500
600
25 26 41
138138
286287303320329337374378386389390397415430434448498505
relative HTML5 scores
IE10
IE11
![Page 45: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/45.jpg)
In the future, browsers compete
on speed, not on features
![Page 46: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/46.jpg)
DEMO
![Page 47: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/47.jpg)
What is usable today?
![Page 48: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/48.jpg)
X X X X X
X X X
X X
X X X
X X
Adoption Strategies
Lowest Common DominatorOnly use features natively available in all target browsers
16:32
![Page 49: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/49.jpg)
X X X X X
X X X
X X
X X X
X X
Adoption Strategies
Polyfill EnrichedOnly use features either natively available OR available via JavaScript polyfill
X X
16:32
![Page 50: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/50.jpg)
polyfill(n) poly • fill: JavaScript that implants HTML5 functionality in a browser that does not offer native support
16:32
![Page 51: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/51.jpg)
X X X X X
X X X
X X
X X X
X X
Adoption Strategies
Alternate ExperiencesOnly use features available in target browsers AND design alternate experience for other browsers
X X
X X X
X X
16:32
![Page 52: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/52.jpg)
progressiveenhancementgracefuldegradation
![Page 53: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/53.jpg)
[Source: Aaron Olaf, Flickr]
16:32
![Page 54: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/54.jpg)
[Source: Mercedes USA, http://mbusa.com/]
16:32
![Page 55: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/55.jpg)
X X X X X
X X X
X X
X X X
X X
Adoption Strategies
Vertical TargetCreate experiences targeted at specific browsers (or classes of browsers)
X X
X X X
X X
16:32
![Page 56: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/56.jpg)
16:32
![Page 57: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/57.jpg)
Don't sniff browsers.(Test for features.)
![Page 58: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/58.jpg)
modernizr
![Page 59: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/59.jpg)
Modernizr.[featureName]
if (Modernizr.canvas) { //Use It! }
.[featureName] || .no-[featureName]
.no-canvas { //Styles }
.canvas { //Other Styles}
![Page 60: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/60.jpg)
DEMOModernizr
![Page 61: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/61.jpg)
<meta http-equiv="X-UA-Compatible"
content="chrome=1">
![Page 62: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/62.jpg)
Inte
rnet
Exp
lore
r 6 »
Inte
rnet
Exp
lore
r 7 »
Inte
rnet
Exp
lore
r 8 »
Inte
rnet
Exp
lore
r 9 »
Safa
ri 5.
1 »
Inte
rnet
Exp
lore
r 10
»
Opera
11.
60 »
Fire
fox
8 »
Chrom
e 17
»
Safa
ri 6.
0 »
Opera
12
»
Chrom
e 22
»0
50100150200250300350400450500
25 26 41138
303 320 329 337 374 378 389 434
relative HTML5 scores
![Page 63: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/63.jpg)
<HTML5>
![Page 64: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/64.jpg)
The Basics
• <!DOCTYPE html>• 9 new “structure” tags• 16 new HTML elements• 13 new <input> types
16:32
![Page 65: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/65.jpg)
compatible
![Page 66: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/66.jpg)
stuff you can do todaystuff you can do tomorrow
(or today, too, if IE support is not critical)
![Page 67: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/67.jpg)
We'll cover a lot!But not nearly everything.
![Page 68: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/68.jpg)
semantic tagsaudio & videoHTML5 Formsgeolocationweb storagedrag & dropcanvas
offlineweb sql
indexedDBweb sockets
history apifile api
![Page 69: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/69.jpg)
WebGLweb workersXHR2querySelectorclassListCORScryptoperformancevisibility apionline/offlinecustom protocol
typed arraysWeb Audio APIinline SVGFS APICanvas animationnotificationsorientationmicrodataflexboxmore...
For homework.
![Page 70: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/70.jpg)
http://bit.ly/vsHTML5http://bit.ly/vsSVG
Add IntelliSense & Schema Validation
to Visual Studio 2008/2010 (pre SP1)
16:32
![Page 71: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/71.jpg)
16:32
HTML5 Forms
Geolocation
Video
CSS3
{Web Sockets}{Storage}{IndexedDb}{Semantic Data}
![Page 72: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/72.jpg)
16:32
![Page 73: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/73.jpg)
semantic tags
tag: <header> <footer> <nav> <article> <hgroup>
support: IE9, FF3.5, Safari, Chrome, Opera
<body> <div id=“header”> </div> <div id=“content”> <div id=“nav”></div> </div> <div id=“footer”> </div></body>
<body> <header> </header> <section> <nav></nav> </section> <footer></footer></body>
VS.
![Page 74: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/74.jpg)
fixing IE<head> <meta charset="utf-8" /> <title>My Weblog</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
</head>
*Polyfill required to trigger styling in old IE
16:32
![Page 75: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/75.jpg)
Why use it?• Accessibility*• SEO*• Code readability• Developer street cred• Why not?
16:32
![Page 76: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/76.jpg)
semantic datadata-*
Valid approach to storing data in HTML
<!--Store values in data-* attributes--><div id="mydiv" data-key="26" data-name="My product name">...</div>
<!--Access values with JavaScript-->var key = mydiv.getAttribute("data-key") //ORvar key = mydiv.dataset.key
support: IE9, FF3.5, Safari, Chrome, Opera
![Page 77: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/77.jpg)
Why use it?• Embed data in page
16:32
![Page 78: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/78.jpg)
video & audioSemantic rich media
Reach more people on more devices
Container
Codec
Silverlight
FlashHTML5
MP4H.264
![Page 79: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/79.jpg)
video for all browsers*
<video src="clip.mp4" controls type="video/mp4"><object classid="..."> <param name="flashvars" value="file=clip.mp4" /> <param name="movie" value=“player.swf" /> <embed src="player.swf” type="application/x-shockwave-flash” flashvars="file=clip.mp4" />
Your browser does not support video
</object></video>
support: IE9, FF3.6, Safari, Chrome, Opera16:32
![Page 80: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/80.jpg)
Why use it?• Video for plug-less
mobile devices• Eliminate
dependencies on Flash/Silverlight (future proofing)
16:32
![Page 81: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/81.jpg)
canvastag: <canvas />
<canvas id=“b" width="300" height="225"></canvas>
function draw_b() { var b_canvas = document.getElementById("b"); var b_context = b_canvas.getContext("2d"); b_context.fillRect(50, 25, 150, 100);}
support: IE*, FF3, Safari, Chrome, Opera
![Page 82: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/82.jpg)
fixing IE<head> <!--[if IE]> <script src="excanvas.js"></script> <![endif]--></head>
Explorercanvas
16:32
![Page 83: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/83.jpg)
Scalable Vector
GraphicsCanvas
Bitmap-output
Good for animation
JavaScript-based
Vector-output
Good for interaction
XML-based
16:32
![Page 84: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/84.jpg)
Why use it?
• Dashboards• Charts/Gauges• Resolution
independence
16:32
• Games• Super custom
rendering
SVG Canvas
![Page 85: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/85.jpg)
html5 forms*
tag: time, date, search, email, etc.Web Forms 2.0 HTML5 Forms
<form><input type="email" autofocus="autofocus"
placeholder="Enter your email" /></form>
support: Safari, FF4*, Chrome, Opera
![Page 86: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/86.jpg)
validation• HTML: Required, Type, Pattern• JS: checkValidity()• CSS: :invalid, :valid, :required
<form><input type="email" placeholder="Enter your email"
required title="Please enter a valid email address" />
<input type="submit" value="Go" /></form>
![Page 87: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/87.jpg)
via A List Apart (bit.ly/html5validation)
16:32
![Page 88: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/88.jpg)
![Page 89: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/89.jpg)
16:32
iOS 7 deprecated datetime support & handles week poorly
![Page 90: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/90.jpg)
progressive enhancement
<form name="f"> <input id="q" autofocus>
<!--Technique to support older browsers--> <script> if (!("autofocus" in document.createElement("input"))) { document.getElementById("q").focus(); } </script> <input type="submit" value="Go"></form>
![Page 91: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/91.jpg)
16:32
“Consuming raw or undercooked meat, poultry, seafood, shellfish or eggs may
increase risk of foodborne illness.”
![Page 92: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/92.jpg)
16:32
![Page 93: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/93.jpg)
COOKEDRAW
html5 forms
16:32
Available heat:- Kendo UI (validation + UI)- jQuery HTML5 Form- H5F
![Page 94: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/94.jpg)
Why use it?• Mobile input• Improved form
behavior in modern browsers
• Semantic forms• New styling options
16:32
![Page 95: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/95.jpg)
geolocation
navigator.geolocation.getCurrentPosition(callback);
function callback(position){ var lat = position.coords.latitude; var lng = position.coords.longitude; var acc = position.coords.accuracy;}
support: IE9, Safari, FF3.5, Chrome, Opera
opt-in user feature to share physical position
![Page 96: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/96.jpg)
COOKEDRAW
geolocation
16:32
![Page 97: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/97.jpg)
Why use it?• Enrich apps with
location awareness• Track user position
16:32
![Page 98: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/98.jpg)
local storagesessionStorage = per windowlocalStorage = per browser
<script>sessionStorage.setItem('value', this.value);localStorage.setItem('value', this.value);
sessionStorage.getItem(‘value’);
sessionStorage.clear();localStorage.clear();</script>
support: IE9, FF3.5, Safari, Chrome, Opera
5 MB limit
![Page 99: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/99.jpg)
http://htmlui.com:80
protocol
host port
(+ browser mode)
![Page 100: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/100.jpg)
COOKEDRAW
local storage
16:32
Available heat:- localstorage polyfill- amplifyJS- lawchairJS
![Page 101: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/101.jpg)
Why use it?• Better than cookies• Simple API
16:32
![Page 102: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/102.jpg)
drag & drop APIeasy drag & drop for any HTML element
<!-- Make an HTML element draggable --><div id=“myDiv” draggable=“true”>...</div>
//Handle the DnD events, such as Dropfunction onDrop(e){ //e.target is the current target element
if(e.stopPropigation) e.stopPropigation(); //Prevent redirect
//Do something with payload
return false;}
support: IE9, FF, Safari, Chrome, Opera
![Page 103: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/103.jpg)
IMG
File
HTML
draggable
dragstart
drag
dragenter
dragleave
dragover
drop
dragend
Change appearance,Set payload
Change drop targetappearance
Process DnDpayload
![Page 104: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/104.jpg)
dragstart
drop
e.dataTransfer.setData([MIME type], [payload])
e.dataTransfer.getData([MIME type])
e.dataTransfer.files; //FileList object
![Page 105: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/105.jpg)
COOKEDRAW
drag & drop
16:32
Available heat:- Kendo UI (DnD & Upload)- jQuery UI Draggable
![Page 106: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/106.jpg)
Why use it?• Support DnD files in
the browser• Reduce JS footprint
16:32
![Page 107: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/107.jpg)
stuff you can do todaystuff you can do tomorrow
![Page 108: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/108.jpg)
![Page 109: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/109.jpg)
offlinetag: <html manifest="html5demo.manifest">MIME type: text/cache-manifest
CACHE MANIFEST# Files you want cached for your app to work offline
myLogo.jpg
//Interacting with cachewindow.applicationCache.update();alert(window.applicationCache.status);
support: FF3.5, Safari, Chrome, Opera 10.6
![Page 110: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/110.jpg)
COOKEDRAW
offline
16:32
![Page 111: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/111.jpg)
Why use it?• Aggressive resource
caching• Foundation for offline
16:32
![Page 112: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/112.jpg)
web sqlapi: openDatabase
db = openDatabase("html5demos", "1.0", "HTML 5 Database API example", 200000);if (db) { db.transaction(function(tx) { tx.executeSql("CREATE TABLE IF NOT EXISTS tweets (id REAL UNIQUE, text TEXT, created_at TEXT, screen_name TEXT, mention BOOLEAN)", [], callback); });}
db.transaction(function (tx) { tx.executeSql('SELECT * FROM tweets WHERE mention = ? AND id > ? ORDER BY id DESC', [mention, latest], callbackFunc);});
support: Safari, Chrome, Opera
“This specification has reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.”
–W3C
![Page 113: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/113.jpg)
indexedDB
JavaScript API for indexed local storage
var request = window.indexedDB.open("CandyDB", "My candy store database");
request.onsuccess = function(event) { var db = event.result; if (db.version != "1") { // User's first visit, initialize database. ... }}
support: IE9*, FF4, (Chrome)
![Page 114: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/114.jpg)
COOKEDRAW
indexedDB
16:32
Available heat:- IDBWrapper- PouchDB- lawnchairJS
![Page 115: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/115.jpg)
Why use it?• Browser storage of
larger datasets• Offline data• Better than local
storage for complex data operations
16:32
![Page 116: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/116.jpg)
web socketsapi: WebSocket
ws = new WebSocket("ws://localhost:8282/test”);
ws.onopen = WSonOpen;ws.onmessage = WSonMessage;ws.onclose = WSonClose;ws.onerror = WSonError;
function WSonMessage(event) { $(“#myDiv”).html(event.data);};
support: IE9**, Safari 5, Chrome, FF4*, Opera 11*
![Page 117: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/117.jpg)
Socket.IO
SignalR
SockJS
![Page 118: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/118.jpg)
COOKEDRAW
web sockets
16:32
Available heat:- SignalR- Socket.IO- Sockjs
![Page 119: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/119.jpg)
Why use it?• 2-way real-time
messaging• Replace long-polling &
interval “hacks”• Eliminate
dependencies on plug-ins
16:32
![Page 120: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/120.jpg)
file api
access to local file system & data streaming
var file = e.dataTransfer.files[0], reader = new FileReader(); reader.onload = function (event) { var dataUrl = event.target.result;};
reader.readAsDataURL(file); .readAsBinaryString(file); .readAsText(file); .readAsArrayBuffer(file);
support: IE10, FF4, Chrome, Opera 11.1
![Page 121: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/121.jpg)
COOKEDRAW
file api
16:32
![Page 122: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/122.jpg)
Why use it?• Process files with fewer
server trips• Improve usability• Desktop-like
experiences• Better file upload
16:32
![Page 123: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/123.jpg)
history api
direct access to browser history
var stateObj = { foo: "bar" };history.pushState(stateObj, "page 2", "bar.html");
support: FF4, Safari 5, Chrome, Opera 11.5
![Page 124: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/124.jpg)
</html>
![Page 125: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/125.jpg)
LUNCH <BR />1-Hour Pit Stop. Resume @ 1:00 PM.
![Page 126: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/126.jpg)
Afternoon Agenda
Time Topic
1:00 PM Tips for Better JavaScript
2:45 PM Intro to CSS3 & Fundamentals
4:00 PM Final Workshop Q&A
4:30 PM Fin
![Page 127: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/127.jpg)
![Page 128: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/128.jpg)
![Page 129: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/129.jpg)
HTMLApp
Patterns
![Page 130: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/130.jpg)
You are not a web developer.
![Page 131: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/131.jpg)
![Page 132: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/132.jpg)
You are a web standards developer.
![Page 133: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/133.jpg)
<HTML>CSS:3;
ECMAScript();
![Page 134: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/134.jpg)
![Page 135: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/135.jpg)
DEMO
![Page 136: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/136.jpg)
In browserOut-of-browser{
}Always connectedSometimes connected{
}
Site experienceApp experience{
}
PackagedServed{
}
![Page 137: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/137.jpg)
16:32
1. Website2. Single Page App (SPA)
3. Mix
![Page 138: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/138.jpg)
Website
HTML
Concepts: Pages, Server-side Views, Links, Thin Client
![Page 139: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/139.jpg)
Website:Always connected
In-browserServed
Site experience
16:32
![Page 140: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/140.jpg)
Single Page Application (SPA)
16:32
JS
Data
![Page 141: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/141.jpg)
Single Page Application (SPA)
JS
Data
16:32
Concepts: Web Services, Client-side, Application
![Page 142: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/142.jpg)
SPAs provide a more fluid user
experience, similar to a "desktop"
application.
16:32
![Page 143: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/143.jpg)
SPA:App Experience
16:32
![Page 144: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/144.jpg)
![Page 145: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/145.jpg)
Native Shell +SDK Proxy
NativeApp
HTML/JS/CSS App
![Page 146: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/146.jpg)
Hybrid Approaches
16:32
JS
Data
JS
Data
SlicesofSPA
![Page 147: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/147.jpg)
Hybrid Approaches
16:32
JS
SPAShellSPA
Website
![Page 148: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/148.jpg)
Just because you're using web
standards, doesn't mean you're
building websites.
16:32
![Page 149: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/149.jpg)
![Page 150: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/150.jpg)
16:32
![Page 151: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/151.jpg)
JAVASCRIPT!
![Page 152: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/152.jpg)
<TODO: HAPPY PLACE IMAGE>
JAVASCRIPT.
![Page 153: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/153.jpg)
Why JavaScript?
WHY?!
![Page 154: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/154.jpg)
It’s the first?
![Page 155: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/155.jpg)
It’s the best?
![Page 156: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/156.jpg)
It’s the easiest?
![Page 157: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/157.jpg)
It’s the fastest?
![Page 158: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/158.jpg)
It’s everywhere.
![Page 159: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/159.jpg)
JavaScript.
I am your father.
No, really.Brendan Eich.Netscape.
![Page 160: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/160.jpg)
“JS had to 'look like Java' only less so, be
Java’s dumb kid brother or boy-
hostage sidekick. Plus, I had to be done
in ten days or something worse than
JS would have happened”
![Page 161: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/161.jpg)
::::
![Page 162: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/162.jpg)
Sept 1995Netscape
Aug 1996Microsoft
June 1997ECMAScript
//
Mar 1999XHR
Feb 2005Ajax
Aug 2001IE6
FirefoxSafari
ChromeMobile
![Page 163: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/163.jpg)
JavaScript won by default.
If you're the last man left on earth, it doesn't matter how
ugly you are when the women come to re-populate the
planet.
Scott Koon
![Page 164: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/164.jpg)
Can’t Beat ‘em,Join ‘em.
![Page 165: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/165.jpg)
Modern JavaScriptFaster. Easier. Better.
![Page 166: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/166.jpg)
![Page 167: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/167.jpg)
![Page 168: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/168.jpg)
Attwood’s Law:Any application that can be
written in JavaScript, will eventually be written in
JavaScript
2007
![Page 169: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/169.jpg)
MOST COMMON PROBLEMS
![Page 170: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/170.jpg)
1.Slow Execution2.Memory leaks3.Poor Code
Organization4.Lack of Understanding
![Page 171: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/171.jpg)
5(ISH) TIPS
![Page 172: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/172.jpg)
From real masters:JordanIvan
TsvetomirAtanasBurkeJohn
Brandon
![Page 173: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/173.jpg)
TIP #1jQuery is a friend…
…that will stab you in the back.
Prove It
![Page 174: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/174.jpg)
SUB-T
IP
1.1
CACHE OBJECTS
$("#myDiv").css("color","red");$("#myDiv").css("opacity",1);
BAD
$("#myDiv").css("color","red")
.css("opacity",1);
BETTER
var $myDiv = $("#myDiv");$myDiv.css("color","red");$myDiv.css("opacity",1);
BEST*
Prove It
![Page 175: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/175.jpg)
SUB-T
IP
1.2
NATIVE LOOPS
$.each(arr, function (i) {i / 2;});BAD
arr.forEach(function (i) {i / 2;});BETTER
var i = 0, len = arr.length;for (i = 0; i < len; i += 1) {
i / 2;}
BEST*
Prove It
![Page 176: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/176.jpg)
TIP #2Avoid Global Variables
They're slow & rude.
![Page 177: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/177.jpg)
function add(num1, num2){ return num1 + num2;}
var result = add(5, 10);16:32
Prove It
![Page 178: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/178.jpg)
var name = "Todd";function sayHello(){
alert(name);}
function sayHello(){ var name = "Todd";
alert(name);}
16:32
BAD
BETTER
![Page 179: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/179.jpg)
Closures & Module Pattern
![Page 180: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/180.jpg)
function doInitStuff(){ ...}
function loadSomething(){ ...}
function handleButtonClick(){ ...}
function harlemShake(){ ...}
yourFile.js
![Page 181: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/181.jpg)
function doInitStuff(){ var user = "Todd";}
function loadSomething(){ if (user == "Todd") ...}
function handleButtonClick(){ ...}
function harlemShake(){ ...}
yourFile.js
![Page 182: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/182.jpg)
var user = "";function doInitStuff(){
user = "Todd";}
function loadSomething(){ if (user == "Todd") ...}
function handleButtonClick(){ ...}
function harlemShake(){ ...}
yourFile.js
![Page 183: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/183.jpg)
var [window].user = "";function [window].doInitStuff(){
user = "Todd";}
function [window].loadSomething(){ if (user == "Todd") ...}
function [window].handleButtonClick(){ ...}
function [window].harlemShake(){ ...}
yourFile.js
![Page 184: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/184.jpg)
var app = (function(){ var _name = "Todd";
return{ sayHello: function(){
alert(_name); }
}}());
app.sayHello();
16:32
BEST(ISH)
![Page 185: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/185.jpg)
var app = (function(){ var _name = "Todd";
return{ sayHello: function(){ alert(_name); }, sayGoodbye: function(){ alert(_name); } }}());
16:32
BEST(ISH)
Your“Public” API
![Page 186: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/186.jpg)
SUB-T
IP
2.1 SUPER PATTERN
(function(window,$,c){ var _private = "Todd"; function privateClass(){} function myWidget(){} myWidget.doSomething = function(){};
window.myWidget = myWidget;}(window,jQuery,console));
Immediately Invoked Function Expressions (IIFE) + Global Imports + [Prototype]
Prove It
![Page 187: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/187.jpg)
TIP #3Bind to Events & Pub/Sub
Just listen.
![Page 188: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/188.jpg)
<button id="btn" onclick="sayHello();">Click Me</button>
$(function(){$(“#btn").on("click",sayHello);
});
16:32
BAD
BETTER
![Page 189: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/189.jpg)
$(document).on("click","button",
sayHello);
16:32
BEST
Why?Compare
ACompare
B
![Page 190: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/190.jpg)
function doSomthing{...doSomethingElse();
doOneMoreThing();}
16:32
BAD
![Page 191: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/191.jpg)
function doSomething() { ... $(document).trigger("DO_SOMETHING_DONE");}
$(document).on("DO_SOMETHING_DONE", function(){ doSomethingElse(); });
16:32
BETTER
Example
![Page 192: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/192.jpg)
function doSomething(successCallback, failCb){ //Do something async...
if(error){ failCb(); } else { successCallback(); }}
function doSomethingElse(){ doSomething(function(){...}, function()...);}16:32
ANOTHER PROBLEM
![Page 193: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/193.jpg)
function doSomething(){ var dfd = new $.Deferred();
//Do something async, then... //dfd.resolve(); //OR //dfd.reject();
return dfd.promise(); //Returns immediately!
}
function doSomethingElse(){ doSomething().done(//Success!).fail(//Error);}16:32
ANOTHER SOLUTION
![Page 194: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/194.jpg)
TIP #4Don't fondle the DOM.
Go with the flow.
![Page 195: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/195.jpg)
My Awesome Page
Copyright Fo'eva
Lorem ipsumy samplish jibber jabbish text only meant to serve as a placeholder, and much like Pi, should never repeat or be read much beyond the first few characters.
![Page 196: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/196.jpg)
function doSomething{...var $list = $("body").append("<ul>");for(var i = 0; i < 10; i++){
$list.append("<li>"+ i +"</li>") }}
16:32
BAD
![Page 197: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/197.jpg)
function doSomething{...var $domChunk = $("<ul>");for(var i = 0; i < 10; i += 1){
$domChunk.append("<li>"+ i +"</li>"); }
$("body").append($domChunk);}
16:32
BETTER
![Page 198: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/198.jpg)
SUB-T
IP
4.1 DOM SPEED WITH
STRINGS & INNERHTML
function doSomething{...var domString = "<ul>";for(var i = 0; i < 10; i += 1){
domString += "<li>"+ i +"</li>"; }
domString += "</ul>"$("body")[0].innerHTML = domString;
} Prove It
![Page 199: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/199.jpg)
<script type="text/x-kendo-template" id="tmp">
<ul> #for(var i = 0; i < data.length; i
+= 1){# <li>#= data[i] #</li>
#}#</ul>
</script>
function doSomething(){var myData = [1,..,10];var template = kendo.template($
("#tmp").html());$("body").append(template(myData));
}
16:32
BEST
Prove It
![Page 200: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/200.jpg)
TIP #5Learn a module pattern.
(Or some kind of app structure)
![Page 201: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/201.jpg)
PERFORMANCE CONVENIENCE
![Page 202: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/202.jpg)
A.js
B.js
Manual (index.html)
<script src="B.js"></script><script src="A.js"></script><script src="main.js"></script>
Module Loader (main.js)
require(["A","B"], function(){//Dependencies are
loaded});
![Page 203: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/203.jpg)
1.Do a sanity check2.Don’t over optimize
![Page 204: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/204.jpg)
USE JSLINTGuaranteed to Hurt Your Feelings™
16:32
BONUS
TIPS
MINIFY YOUR JSWords are for humans.
MASTER BROWSER DEV TOOLS
Debug JavaScript where it runs.
![Page 205: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/205.jpg)
Debugging
![Page 206: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/206.jpg)
console.log()
![Page 207: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/207.jpg)
Fix IE<script type="text/javascript">
<!--Console global variable fix for IE-->
if (!this.console) { window.console = {
log: function() {} };}
</script>
16:32
![Page 208: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/208.jpg)
Resources for Study
• Books– JavaScript: The Good Parts (Crockford)– JavaScript: The Definitive Guide
(Flanagan)– JavaScript Patterns (Stefanov)– High Performance JavaScript (Zakas)
16:32
![Page 209: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/209.jpg)
console.clear();
![Page 210: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/210.jpg)
JAVASCRIPT, mon.
![Page 211: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/211.jpg)
16:32
![Page 212: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/212.jpg)
16:32
![Page 213: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/213.jpg)
[before CSS]
<html> <head>…</head> <body> <table> <tr><td> <font size=“3” color=“red”> <h1>Hello World!</h1> </font> </td></tr> <font color=“green”> <font face=“Tahoma”> <h2>I’m green! I think.</h2> </font> <p>Lorem ipsum</p> </font> </table> </body></html>
{HTML}
![Page 214: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/214.jpg)
Separation of Concerns*
<html> <head>…</head> <body> <header>…</header> <article> <h1>Hello!</h1> <p>Lorem ipsum</p> </article> <nav>…</nav> <footer>…</footer> </body></html>
structure
body { color:#FFF; }
header { margin:5px; }
article { margin:5px 0; padding: 10px; background: #333;}
style
{HTML} {CSS}
![Page 215: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/215.jpg)
16:32
![Page 216: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/216.jpg)
CSS has been plagued with
inconsistencies & browser bugs
![Page 217: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/217.jpg)
What's CSS3?
CSS 2.0++++Module Status
Animations WD
2D/3D Transformations WD
Selectors (Level 3) REC
Media Queries (Level 3) REC
Backgrounds & Borders (rounded corners)
CR
Text Decoration (text shadows, outline)
CR
CSS 2.1 RECWD LC CR PR REC
16:32
![Page 218: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/218.jpg)
WD LC CR PR RE
C
CSS 2.1CSS3 ColorSelectorsMedia Queries
Backgrounds &BordersMulti-columnFlex BoxMarquee
25+ DraftsTransitionsTransformationsAnimationsGradientsCSS3 Text
16:32
![Page 219: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/219.jpg)
Browser Prefixes
-webkit-moz-o-ms
"standard" way browsers
implement custom features.
16:32
![Page 220: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/220.jpg)
Prefixes are going away (eventually)
16:32
RECENT NEWS
Browser "flags" will handle emerging feature
![Page 221: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/221.jpg)
-moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px;border-radius: 5px;
-moz-box-shadow: 2px 2px 2px #333;-webkit-box-shadow: 2px 2px 2px #333;box-shadow: 2px 2px 2px #333;
-webkit-background-size: 137px 50px;-o-background-size: 137px 50px;background-size: 137px 50px;
16:32
![Page 222: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/222.jpg)
SelectorsColorCustom FontsBorders & BackgroundsGradientsMedia QueriesAnimationsTransitionsLayouts (Grid, Flex, etc)
![Page 223: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/223.jpg)
1. Selectors2. Custom Fonts3. Whiz Bang Styley
Whimey4. Layouts
![Page 224: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/224.jpg)
*E[foo]E[foo="bar"]E[foo~="bar"]E[foo|="en"]E:first-childE:lang(fr)E:hoverE:focusE:disabledE::beforeE::afterE > FE + F
EE:linkE:activeE:visitedE::first-lineE::first-letterE.warningE#myidE F
E[foo^="bar"]E[foo$="bar"]E[foo*="bar"]E:rootE:nth-child(n)E:nth-last-child(n)E:nth-of-type(n)E:nth-last-of-type(n)E:last-childE:first-of-typeE:last-of-typeE:only-childE:only-of-typeE:emptyE:targetE:enabledE:checkedE:not(s)E ~ F
![Page 225: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/225.jpg)
CSS3 Selectors• Powerful new selector options//Alternating Itemsli:nth-child(odd) { color: blue; }li:nth-child(even) { color: green; }li:nth-child(3n) { color: red; } //Every 3rd item
//First/Last Itemsli:first-of-type { color: blue; }li:not(:first-of-type):not(:last-of-type) { color: orange; } //All *but* first/last
//Enabled/Disabledinput:enabled { border: 2px solid green; }input:disabled { background-color: #BBB; }
*Use jQuery to support legacy browsers
![Page 226: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/226.jpg)
Biggest problem with custom fonts?
16:32
Licensing.(And then file format.)
(And then performance.)(And then Comic Sans.)
![Page 227: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/227.jpg)
Custom Fonts
@font-face { font-family: Delicious; src: url('Delicious-Roman.otf') format(“opentype”);
}
//Usageh3 { font-family: Delicious, sans-serif; }
![Page 228: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/228.jpg)
WebFont Providers+
WOFF
16:32
![Page 229: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/229.jpg)
Borders, Backgrounds,
Gradients, Shadows, Text Shadows,
Colors
16:32
![Page 230: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/230.jpg)
-moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px;border-radius: 5px;
-moz-box-shadow: 2px 2px 2px #333;-webkit-box-shadow: 2px 2px 2px #333;box-shadow: 2px 2px 2px #333;
-webkit-background-size: 137px 50px;-o-background-size: 137px 50px;background-size: 137px 50px;
16:32
![Page 231: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/231.jpg)
Two cautions:
1. Older browsers2. Mobile
Performance
16:32
![Page 232: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/232.jpg)
Media QueriesConditional CSS
rules/sheets based on screen properties
16:32
![Page 233: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/233.jpg)
![Page 234: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/234.jpg)
/*These two rules do the same thing*/@media all and (min-width:500px) { … } @media (min-width:500px) { … }
/*Multiple conditions*/@media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; }}
![Page 235: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/235.jpg)
• width/height• device-width/height• aspect-ratio• orientation• color/color-index• resolution
+
media type & logical operators
![Page 236: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/236.jpg)
LayoutsFlex & Grid
16:32
![Page 237: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/237.jpg)
![Page 238: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/238.jpg)
The end of complicated float layouts.(Eventually.)
![Page 239: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/239.jpg)
display: none;
![Page 240: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/240.jpg)
16:32
![Page 241: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/241.jpg)
Final Q&A
![Page 242: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/242.jpg)
Thank You!
![Page 243: HTML5 Bootcamp: Essential HTML, CSS, & JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022042512/54c805394a79593e098b4595/html5/thumbnails/243.jpg)
Your Feedback is Important
Please fill out a session evaluation using the EventBoard app.
Thank you!