Jump Start HTML5

313 Pages·2014·7.598 MB·English

by  Tiffany B Brown, Kerry Butters, Sandeep Panda

Summary of Contents
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
1. Basics: What is HTML5? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
2. Basics: The Anatomy of HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3. Basics: Structuring Documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
4. Basics: HTML5 Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
5. Basics: Multimedia, Audio and Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
6. Multimedia: Preparing Your Media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
7. Multimedia: Using Native HTML5 Audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
8. Multimedia: Using Native HTML5 Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
9. Multimedia: The source Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
10. Mutimedia: The track Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
11. Multimedia: Scripting Media Players . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
12. Canvas & SVG: An Introduction to Canvas . . . . . . . . . . . . . . . . . . . . . . . . 123
13. Canvas & SVG: Canvas Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
14. Canvas & SVG: Handling Non-supporting Browsers . . . . . . . . . . . . . . . . . 137
15. Canvas & SVG: Canvas Gradients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
16. Canvas & SVG: Canvas Images and Videos . . . . . . . . . . . . . . . . . . . . . . . . . 145
17. Canvas & SVG: An Introduction to SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
18. Canvas & SVG: Using SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
19. Canvas & SVG: SVG Bézier Curves . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
20. Canvas & SVG: SVG Filter Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
21. Canvas & SVG: Canvas or SVG? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
22. Offline Apps: Detecting When the User Is Connected . . . . . . . . . . . . . . . 179
23. Offline Apps: Application Cache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
24. Offline Apps: Web Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
25. Offline Apps: Storing Data With Client-side Databases . . . . . . . . . . . . . . 215
26. APIs: Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
27. APIs: Web Workers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
28. APIs: The Geolocation API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
29. APIs: Server Sent Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
30. APIs: The WebSocket API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
31. APIs: The Cross-document Messaging API . . . . . . . . . . . . . . . . . . . . . . . . . 269
JUMP START
HTML5
BY TIFFANY B. BROWN
KERRY BUTTERS
SANDEEP PANDA
iv
Jump Start HTML5
byTiffanyB.Brown,KerryButters,andSandeepPanda
Copyright©2014SitePointPty.Ltd.
Product Manager:SimonMackie English Editor:PaulFitzpatrick
Technical Editor:CraigBuckler Cover Designer:AlexWalker
Notice of Rights
Allrightsreserved.Nopartofthisbookmaybereproduced,storedinaretrievalsystemortransmitted
inanyformorbyanymeans,withoutthepriorwrittenpermissionofthepublisher,exceptinthecase
ofbriefquotationsembodiedincriticalarticlesorreviews.
Notice of Liability
Theauthorandpublisherhavemadeeveryefforttoensuretheaccuracyoftheinformationherein.
However,theinformationcontainedinthisbookissoldwithoutwarranty,eitherexpressorimplied.
NeithertheauthorsandSitePointPty.Ltd.,noritsdealersordistributorswillbeheldliableforany
damagestobecausedeitherdirectlyorindirectlybytheinstructionscontainedinthisbook,orbythe
softwareorhardwareproductsdescribedherein.
Trademark Notice
Ratherthanindicatingeveryoccurrenceofatrademarkednameassuch,thisbookusesthenamesonly
inaneditorialfashionandtothebenefitofthetrademarkownerwithnointentionofinfringementof
thetrademark.
PublishedbySitePointPty.Ltd.
48CambridgeStreetCollingwood
VICAustralia3066
Web:www.sitepoint.com
Email:[email protected]
ISBN978-0-9802858-2-6(print)
ISBN978-0-9870908-0-5(ebook)
PrintedandboundintheUnitedStatesofAmerica
v
About Tiffany B. Brown
TiffanyB.BrownisafreelancewebdeveloperandtechnicalwriterbasedinLosAngeles.
Shehasworkedonthewebformorethanadecadeatamixofmediacompaniesandagencies.
Beforefoundingherconsultancy,Webinista,Inc.,shewaspartoftheOperaSoftwareDe-
veloperRelations&Toolsteam.Nowsheofferswebdevelopmentandconsultingservices
toagenciesandsmalldesignteams.
About Kerry Butters
KerryButters1isatechnologywriterfromtheUK.Withabackgroundintechnologyand
publishing,Kerrywritesacrossarangeoftechysubjectsincludingwebdesignandcorporate
tech.KerryalsoheadsupmarkITwritedigitalcontentagency2,lovestoplayaroundwith
anythingtechrelatedandisanall-roundgeek.
About Sandeep Panda
SandeepPandaisawebdeveloperandwriterwithapassionforJavaScriptandHTML5.He
hasoverfouryears'experienceprogrammingfortheWeb.Helovesexperimentingwithnew
technologiesastheyemergeandisacontinuouslearner.Whilenotprogramming,Sandeep
canbefoundplayinggamesandlisteningtomusic.
About SitePoint
SitePointspecializesinpublishingfun,practical,andeasy-to-understandcontentforweb
professionals.Visithttp://www.sitepoint.com/toaccessourblogs,books,newsletters,articles,
andcommunityforums.You’llfindastackofinformationonJavaScript,PHP,Ruby,mobile
development,design,andmore.
About Jump Start
JumpStartbooksprovideyouwitharapidandpracticalintroductiontowebdevelopment
languagesandtechnologies.Typicallyaround150pagesinlength,theycanbereadina
weekend,givingyouasolidgroundinginthetopicandtheconfidencetoexperimenton
yourown.
1https://plus.google.com/u/0/+KerryButters?rel=author
2http://markitwrite.com

Table of Contents
Preface
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
Who Should Read This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx
Conventions Used . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx
Code Samples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx
Tips, Notes, and Warnings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxii
Supplementary Materials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxii
Tools You’ll Need . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxii
Do You Want to Keep Learning? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiv
Chapter 1 Basics: What is HTML5? . . . . . . . . . . . . . . . . 1
A Brief History of HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
HTML: The Early Years . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
A Detour Through XHTML Land . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
The Battle for World DOM-ination . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Applets and Plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
What HTML5 Isn’t . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
A Note on the HTML5 Specification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Chapter 2 Basics: The Anatomy of
HTML5
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Your First HTML5 Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
The Two Modes of HTML5 Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
HTML Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
To Quote or Not Quote: Attributes in HTML5 . . . . . . . . . . . . . . . . . . 12
A Pared-down HTML5 Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
"XHTML5": HTML5’s XML Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
viii
Chapter 3 Basics: Structuring Documents . . . . . . 17
The article Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Putting It Together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
The section Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
div Versus section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Other Document Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
figure and figcaption . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
main Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Chapter 4 Basics: HTML5 Forms . . . . . . . . . . . . . . . . . . 33
Starting an HTML5 Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
The input Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Collecting Names . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Using Form Labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Requiring Form Fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Styling Required Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Collecting Email Addresses, Phone Numbers, and URLs . . . . . . . . . . 38
Uploading Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
The datalist Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Other Input Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Date and Time Inputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Chapter 5 Basics: Multimedia, Audio and
Video
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Adding Controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Autoplaying and Looping Media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Video-only Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Place Holding with poster . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Controlling Video Dimensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
ix
Bandwidth Use and Playback Responsiveness . . . . . . . . . . . . . . . . . . . . . . 55
Cross-browser Audio and Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Using Multiple Video or Audio Files . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Chapter 6 Multimedia: Preparing Your
Media
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Codec Showdown . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
The Current Landscape . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Converting Files Using Miro Video Converter . . . . . . . . . . . . . . . . . . . . . . 61
Converting Media Using FFmpeg . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Resizing Video Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Using FFmpeg to Generate a Poster Image . . . . . . . . . . . . . . . . . . . . 67
Using a Hosted Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Quality Versus File Size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Chapter 7 Multimedia: Using Native HTML5
Audio
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
The audio Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
The autoplay Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Looping Media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Muting Media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Buffer Hinting with the preload Attribute . . . . . . . . . . . . . . . . . . . . . . . 72
preload="auto" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
preload="none" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
preload="metadata" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Fallback Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75