Search and Find
Service
The Truth About HTML5
of: RJ Owen, Luke Stevens
Apress, 2014
ISBN: 9781430264163 , 184 Pages
Format: PDF, Read online
Copy protection: DRM
Contents at a Glance
3
Contents
172
About the Authors
182
About the Technical Reviewer
183
Foreword
184
Introduction
4
Chapter 1: A Somewhat Sensationalized History of HTML5
6
How Architecture Astronauts and the W3C Tried to Kill HTML
6
You Probably Use XML
6
XHTML Is Born, But What Does It Mean?
7
Draconian Error Handling (Or: Why Don’t I Just Punch You in the Face?)
7
OK, Not Really. But Your Browser Would Punch You in the Face
8
XHTML Still Meant Better HTML
8
But the Crazy Had Only Just Begun
8
XHTML 2.0: Unloved and Alone
9
HTML5: A New Hope?.?.?.?We Hope
9
The W3C Says Go to Hell
10
The WHATWG Is Born
10
It’s a Whole New World
11
To HTML5 and Beyond!
11
HTML5 Is the New Black or Hotness or Something
12
Is HTML5 Hype, Substance, or Both?
12
Hixie or Bust
12
XHTML 2.0 Is Dead and Everyone Is Happy
13
HTML5?.?.?.?er?.?.?.?HTML, wait?.?.?.?HTML.next?
13
Should We Just Kill Off the W3C Altogether or Embrace It?
14
Reform
14
Destroy
14
Embrace
15
How Does New Stuff Get Added to HTML5 Now?
15
WHATWG and W3C Diversions
16
TL;DR
17
What We’ll Be Focusing On
17
Chapter 2: The Truth About a Basic HTML5 Web Page
18
Formatting Changes in HTML5
19
What About an HTML5 Shim and CSS for the New Elements?
19
What About the HTML5 Boilerplate and Modernizr ?
20
Chapter 3: The Truth About Structuring an HTML5 Page
21
A Little Taste of Pain: The Sectioning Elements
21
Where Did These Elements Come From?
22
Who Cares?
23
The Contradiction at the Heart of HTML5’s New Elements
23
Outline What?
24
What Is an Outline, and Why Should I Care?
24
How We Currently Create Outlines (Even Without Realizing It)
24
“Sectioning” Is an Old Problem
26
If We Care About Blind Users, We Should Care About Headings
27
HTML5’s “Improved” Outlining Was Dead Before It Ever Shipped
27
Sneaking in Big Ideas Leads to Dead Ideas
28
We Forked the Spec
28
The Exception Is
(Sort Of) 29
How Should We Structure an HTML5 Page?
29
Styling Headings HTML5-Style Is Kind of Insane
30
This Is Not Inconsequential: People Have to Teach This Stuff
31
Where Does This Leave Us?
31
A Sane Approach to Structural Markup for Accessibility
31
ARIA Benefits
32
Layout Recommendations
33
Chapter 4: The Truth About HTML5’s Structural Elements
34
34
Really, It Doesn’t Do Anything
35
How Can Screen Readers Use
When It’s Everywhere? 35
ARIA Alternative: Banner
35
Recommendation
36
36
Good Intentions; Accessibility Disaster
36
ARIA Alternative: Navigation
36
Recommendation
37
and 37
37
Sections == Outlines
37
Russian Dolls
38
Recommendation
38
38
Specifications Should Specify
39
Nesting
for Articles and Comments 39
Search Engines Don’t Need
40
Is Not for the “Main” Part 40
Recommendation
40
So, What’s the Difference Between
and ? 40
41
An Aside Creates an Outline Section in Weird Places
41
ARIA Alternative: Complementary
41
Recommendation
41
41
Footer Doesn’t Do Anything Either
42
Fat Footer? Good Luck!
42
Can I'ave a Footer, Guv’na?
42
ARIA Alternative: contentinfo
42
Recommendation
43
43
Mainly Useless Controversy
44
ARIA Alternative: main
44
Recommendation
44
Other ARIA Landmarks
44
A Funny Thing Happened…Graceful Degradation Died and JavaScript Became Mandatory
45
Yahoo’s JavaScript Research
45
Here’s What Happens…
46
What to Do? Oh, XP…
46
Uh…Web Design Community, What Happened?
47
Conclusion: R.I.P. HTML5 Structural Elements
47
Chapter 5: The Truth About HTML5 Micro-semantics and Schema.org
49
Semantics in a Nutshell
49
These Problems Have Been Solved
50
There’s No Such Thing As “More” Semantic
50
Big Ideas in Semantic Markup: The Semantic Web
51
Semantics: Not Dead Yet (Or: Google & Co Drop a Micro-Semantic Bombshell)
51
E-commerce with Real (Micro) Semantics
51
Can the Real Semantics Please Stand Up?
52
Why Should We Care About Micro-semantics?
53
Schema.org: The Future of Semantics?
54
Couldn’t We Do This Before?
54
The Semantic Web We’ve Been Waiting For?
54
Microformats
55
RDFa
55
Microdata
56
Microdata and Schema.org
56
How Not to Launch an Initiative
56
What Do the People Behind Schema.org Think?
57
Wrapping Up: Semantics and HTML
58
Chapter 6: The Truth About HTML5 and SEO
60
SEO in the Dark Ages
60
Stuff Your Keywords
60
HTML and SEO
60
But What If It Helped … Somehow?
61
Zombie Myths Must Die … Eventually
61
Chapter 7: The Truth About HTML5’s Other New Elements
62
Be Bold or Die Trying
62
Wrap Your Anchor Around This, and Other Bits and Pieces
63
Wrap Anchors Around Block-Level Elements
63
63
and 64
64
- and
65
65
66
66
Should We Even Use These Obscure Little Tags?
66
Chapter 8: The Truth About HTML5 Forms
68
Going Native Slowly
68
Forms Can Make or Break a Site
69
Good News, Bad News
69
HTML5 Forms Resources
69
HTML5 Forms: The No-Brainers
70
New Input Types: E-mail, URL, Telephone Number, and Search
70
Attributes: Autocomplete, Autofocus, Readonly, and Spellcheck
71
Autocomplete
72
Autofocus
72
Readonly
72
Spellcheck
72
HTML5 Forms: The Kinda Maybes
72
Attribute: Placeholder
72
73
74
HTML5 Forms: The “I Wouldn’t Yet But You Can If You Really Want”
75
Attribute: Required
75
Attribute: Pattern
75
Input Type: Number (Spinner)
76
Input Type: Range (Slider)
76
Input Type: Date (Time/Calendar Widgets)
77
Input Type: Color (Color Picker)
78
Input Type and Element: Datalist
79
You Hypocrite. I Thought Requiring JavaScript Was the Worst Thing Ever
79
What About Accessibility ?
80
Chapter 9: The Truth About HTML5’s Canvas, Gaming, and Flash
81
Flash Is Dying, and HTML5 Is All We’ve Got
81
Can Canvas and HTML5 Fill the Gap?
82
Flash Authoring for HTML5?
82
And Then Apps Happened
83
Let’s Bury Flash-isms with Flash
84
We’re Not in Canvas Anymore
84
Cool Things with Canvas
86
Tooltips
86
Tipped
86
Charts
86
RGraph
86
Visualize
87
HumbleFinance
88
Peity
88
Visualizations
89
Processing.js
89
“Evolution of Privacy on Facebook”
89
Canvas, Twitter, and Audio Mashup
90
Paper.js
91
Games
92
Google Chrome Racer
92
Biolab Disaster
93
Canvas Rider
94
Cut the Rope
95
Image Manipulation
96
PaintbrushJS
96
Canvas-Driven Web Apps
97
Sketchpad
97
Endless Mural
98
LucidChart
99
Drawing Interface Elements
99
Flash-Style Interface Effects
99
Background Animations
100
Interface Backgrounds with Liquid Canvas
101
The Sometimes Good and Sometimes Bad Canvas Emulation for IE6–8
102
The Haphazard World of Web Standards (Or: How Did We End Up with Canvas?)
103
The Canvas Element and Accessibility
104
The Current State of Canvas
104
Primitive Development Environment
104
Performance
105
Limited IE Compatibility
105
Again with the Glass Metaphor
105
HTML5 Gaming: Canvas or Not?
105
Is It Even Canvas?
106
Getting Started with Canvas Game Development
106
HTML Gaming: Beyond HTML5
106
Canvas: What’s in It for Me?
107
Canvas for Web Designers
107
Canvas for Students and Hobbyists
107
Canvas for Flash Designers
107
Suck It and See
107
2D Canvas’s 3D Future: WebGL
107
3D on the Web: WebGL Alternatives
108
Show Me the Demos!
108
HelloRun
109
Epic Citadel
109
Angry Birds
110
Rome “3 Dreams in Black” Interactive Music Video
111
glfx.js Image Manipulation
112
Quake II
112
GT Racing: Motor Academy
113
Skid Racer
114
More WebGL Demos
115
Still Early Days for WebGL
115
Chapter 10: The Truth About Audio and Video in HTML5
116
Native
116
The
116
117
The WebAudio API
118
The
119
Video Accessibility
120
API and Resources
120
Codecs, You’re Killing Me
121
The Patent Problem
121
H.264 Is Baked In
122
Google Threatens to Take Chrome WebM Only…and Then Doesn’t
122
Codecs: What to Do?
123
Reality Bites
123
Video Types …Oh My
124
Querying Supported Video Types with JavaScript
124
Audio and Video Media Players to the Rescue
125
MediaElement (Video and Audio, Free)
125
VideoJS (Video, Free)
126
Flowplayer (Video, Free and Commercial)
127
More Media Players
128
Other Flies in the HTML5 Video Ointment: DRM, Streaming, and Full-Screen Video
129
DRM
129
Streaming
130
Fullscreen API
131
Is HTML5
131
Wrapping Up
132
Chapter 11: The Truth About SVG: The Flash Challenger That Was, Wasn’t, and Now…
133
SVG, SVG…
133
SVG: Browser Support Arrives at Last
134
Yes, There Is Real-World SVG We Can Use Right Now
135
The Many Faces of SVG
135
SVG in the'00s: The Great Hope That Wasn’t
135
SVG Browser Support: Android, What the Hell? Oh, and IE…
136
SVG Demos: What Is It Good For?
136
SVG Girl
137
SVG Edit
137
Google Docs
138
SVG Games
139
D3.js
139
Charts with Highcharts
140
Snap.svg-Powered Demos
141
PBS Kids
141
Codrops Animated SVG Icons with Snap.svg
142
Snap.svg’s Demo Page
143
Raphael.js-Powered Demos
144
thirteen23
144
Markup.io
145
DrawAStickman.com
146
Working with SVG
147
Responsive Web Design and SVG
147
SVG Gotchas
148
SVG: Heir to Flash?
148
Chapter 12: The Truth About HTML5 Web Apps, Mobile, and What Comes Next
150
HTML5 Web App Browser Support
150
HTML5 on Mobile: WebKit and Beyond
151
Mobile Is a Moving Target: Microsoft’s Big Push
151
Firefox OS: Mozilla’s Ambitious Mobile Platform, and the WebAPI
152
HTML5 Mobile Compatibility
153
HTML5-Powered Content Management
153
The JavaScript Age
153
JavaScript Killed the HTML Star
154
Modernizr, When Can I Use?.?.?.?, and Polyfills
155
Modernizr
155
When Can I Use?.?.?.
155
Polyfills
156
HTML5 Web App APIs
156
History API (pushState)
156
HTML5 Web Storage (and JavaScript-Rendered CSS)
157
Database Storage
157
HTML5 Offline (Application Cache)
158
Geolocation API
158
Other APIs That May Be of Interest to You
159
What Comes Next: HTML 5.1
160
Wrapping Up
161
Chapter 13: The Truth About the Future of Web Design: Performance-Based Design
162
Operating in the Dark
162
Performance vs. Production
163
Measure When You Redesign
163
Let’s Get Objective
164
Index
165
All prices incl. VAT