Owen / Stevens The Truth About HTML5

1. Auflage 2014
ISBN: 978-1-4302-6416-3
Verlag: APRESS
Format: PDF
Kopierschutz: 1 - PDF Watermark

E-Book, Englisch, 184 Seiten, eBook

The Truth About HTML5 is for web designers, web developers, and front-end coders who want to get up to speed with HTML5. The book isn't afraid to point out what everyone gets wrong about HTML5's new markup, so you don’t make the same mistakes. It will show you what rocks in HTML5 today and what the future holds.


Marking up a basic web page shouldn't be a quasi-religious exercise where the high priests of HTML5 must be consulted for their interpretation of the holy texts (the HTML5 spec). Don’t waste hours trawling through confusing, poorly researched, and often flat-out wrong information on the Internet. Get the truth on HTML5's markup here. You'll also find out about HTML5's new microdata standard that's being used on major websites, such as eBay and IMDB, right now, and get the low-down on the Canvas object and what it can and can't do for you. The book also covers how HTML5 affects CMSs and web apps, what HTML5 means for mobile, and what the future holds.


HTML5 isn't one big blob of technology that will be "finished" at some point in the future. It’s a grab bag of cool stuff, much of which has been around for years. Learn what’s well supported and ready to go today. Now that the initial wave of hype is over, it's time to learn the truth about HTML5.

Zielgruppe

Popular/general

Autoren/Hrsg.

Owen, RJ

Stevens, Luke

Inhaltsverzeichnis

1;Contents at a Glance;3
2;Contents;172
3;About the Authors;182
4;About the Technical Reviewer;183
5;Foreword;184
6;Introduction;4
7;Chapter 1: A Somewhat Sensationalized History of HTML5;6
7.1;How Architecture Astronauts and the W3C Tried to Kill HTML;6
7.2;You Probably Use XML;6
7.2.1;XHTML Is Born, But What Does It Mean?;7
7.2.2;Draconian Error Handling (Or: Why Don’t I Just Punch You in the Face?);7
7.2.3;OK, Not Really. But Your Browser Would Punch You in the Face;8
7.2.4;XHTML Still Meant Better HTML;8
7.2.5;But the Crazy Had Only Just Begun;8
7.3;XHTML 2.0: Unloved and Alone;9
7.4;HTML5: A New Hope?.?.?.?We Hope;9
7.4.1;The W3C Says Go to Hell;10
7.4.2;The WHATWG Is Born;10
7.4.3;It’s a Whole New World;11
7.4.4;To HTML5 and Beyond!;11
7.5;HTML5 Is the New Black or Hotness or Something;12
7.5.1;Is HTML5 Hype, Substance, or Both?;12
7.6;Hixie or Bust;12
7.7;XHTML 2.0 Is Dead and Everyone Is Happy;13
7.8;HTML5?.?.?.?er?.?.?.?HTML, wait?.?.?.?HTML.next?;13
7.9;Should We Just Kill Off the W3C Altogether or Embrace It?;14
7.9.1;Reform;14
7.9.2;Destroy;14
7.9.3;Embrace;15
7.10;How Does New Stuff Get Added to HTML5 Now?;15
7.11;WHATWG and W3C Diversions;16
7.12;TL;DR;17
7.13;What We’ll Be Focusing On;17
8;Chapter 2: The Truth About a Basic HTML5 Web Page;18
8.1;Formatting Changes in HTML5;19
8.2;What About an HTML5 Shim and CSS for the New Elements?;19
8.3;What About the HTML5 Boilerplate and Modernizr ?;20
9;Chapter 3: The Truth About Structuring an HTML5 Page;21
9.1;A Little Taste of Pain: The Sectioning Elements;21
9.2;Where Did These Elements Come From?;22
9.3;Who Cares?;23
9.4;The Contradiction at the Heart of HTML5’s New Elements;23
9.5;Outline What?;24
9.6;What Is an Outline, and Why Should I Care?;24
9.7;How We Currently Create Outlines (Even Without Realizing It);24
9.8;“Sectioning” Is an Old Problem;26
9.9;If We Care About Blind Users, We Should Care About Headings;27
9.10;HTML5’s “Improved” Outlining Was Dead Before It Ever Shipped;27
9.11;Sneaking in Big Ideas Leads to Dead Ideas;28
9.12;We Forked the Spec;28
9.13;The Exception Is (Sort Of);29
9.14;How Should We Structure an HTML5 Page?;29
9.15;Styling Headings HTML5-Style Is Kind of Insane;30
9.16;This Is Not Inconsequential: People Have to Teach This Stuff;31
9.17;Where Does This Leave Us?;31
9.18;A Sane Approach to Structural Markup for Accessibility;31
9.19;ARIA Benefits;32
9.20;Layout Recommendations;33
10;Chapter 4: The Truth About HTML5’s Structural Elements;34
10.1;;34
10.1.1;Really, It Doesn’t Do Anything;35
10.1.2;How Can Screen Readers Use When It’s Everywhere?;35
10.1.3;ARIA Alternative: Banner;35
10.1.4;Recommendation;36
10.2;;36
10.2.1;Good Intentions; Accessibility Disaster;36
10.2.2;ARIA Alternative: Navigation;36
10.2.3;Recommendation;37
10.3; and ;37
10.3.1;;37
10.3.1.1;Sections == Outlines;37
10.3.1.2;Russian Dolls;38
10.3.1.3;Recommendation;38
10.3.2;;38
10.3.2.1;Specifications Should Specify;39
10.3.2.2;Nesting for Articles and Comments;39
10.3.2.3;Search Engines Don’t Need ;40
10.3.2.4; Is Not for the “Main” Part;40
10.3.2.5;Recommendation;40
10.3.3;So, What’s the Difference Between and ?;40
10.4;;41
10.4.1;An Aside Creates an Outline Section in Weird Places;41
10.4.2;ARIA Alternative: Complementary;41
10.4.3;Recommendation;41
10.5;;41
10.5.1;Footer Doesn’t Do Anything Either;42
10.5.2;Fat Footer? Good Luck!;42
10.5.3;Can I'ave a Footer, Guv’na?;42
10.5.4;ARIA Alternative: contentinfo;42
10.5.5;Recommendation;43
10.6;;43
10.6.1;Mainly Useless Controversy;44
10.6.2;ARIA Alternative: main;44
10.6.3;Recommendation;44
10.7;Other ARIA Landmarks;44
10.8;A Funny Thing Happened…Graceful Degradation Died and JavaScript Became Mandatory;45
10.8.1;Yahoo’s JavaScript Research;45
10.8.2;Here’s What Happens…;46
10.8.3;What to Do? Oh, XP…;46
10.9;Uh…Web Design Community, What Happened?;47
10.10;Conclusion: R.I.P. HTML5 Structural Elements;47
11;Chapter 5: The Truth About HTML5 Micro-semantics and Schema.org;49
11.1;Semantics in a Nutshell;49
11.2;These Problems Have Been Solved;50
11.3;There’s No Such Thing As “More” Semantic;50
11.4;Big Ideas in Semantic Markup: The Semantic Web;51
11.5;Semantics: Not Dead Yet (Or: Google & Co Drop a Micro-Semantic Bombshell);51
11.6;E-commerce with Real (Micro) Semantics;51
11.7;Can the Real Semantics Please Stand Up?;52
11.8;Why Should We Care About Micro-semantics?;53
11.9;Schema.org: The Future of Semantics?;54
11.10;Couldn’t We Do This Before?;54
11.11;The Semantic Web We’ve Been Waiting For?;54
11.11.1;Microformats;55
11.11.2;RDFa;55
11.11.3;Microdata;56
11.12;Microdata and Schema.org;56
11.13;How Not to Launch an Initiative;56
11.14;What Do the People Behind Schema.org Think?;57
11.15;Wrapping Up: Semantics and HTML;58
12;Chapter 6: The Truth About HTML5 and SEO;60
12.1;SEO in the Dark Ages;60
12.2;Stuff Your Keywords;60
12.3;HTML and SEO;60
12.4;But What If It Helped … Somehow?;61
12.5;Zombie Myths Must Die … Eventually;61
13;Chapter 7: The Truth About HTML5’s Other New Elements;62
13.1;Be Bold or Die Trying;62
13.2;Wrap Your Anchor Around This, and Other Bits and Pieces;63
13.2.1;Wrap Anchors Around Block-Level Elements;63
13.2.2;;63
13.2.3; and ;64
13.2.4;;64
13.2.5; and ;65
13.2.6;;65
13.2.7;;66
13.2.8;;66
13.3;Should We Even Use These Obscure Little Tags?;66
14;Chapter 8: The Truth About HTML5 Forms;68
14.1;Going Native Slowly;68
14.2;Forms Can Make or Break a Site;69
14.3;Good News, Bad News;69
14.4;HTML5 Forms Resources;69
14.5;HTML5 Forms: The No-Brainers;70
14.5.1;New Input Types: E-mail, URL, Telephone Number, and Search;70
14.5.2;Attributes: Autocomplete, Autofocus, Readonly, and Spellcheck;71
14.5.2.1;Autocomplete;72
14.5.2.2;Autofocus;72
14.5.2.3;Readonly;72
14.5.2.4;Spellcheck;72
14.6;HTML5 Forms: The Kinda Maybes;72
14.6.1;Attribute: Placeholder;72
14.6.2;;73
14.6.3;;74
14.7;HTML5 Forms: The “I Wouldn’t Yet But You Can If You Really Want”;75
14.7.1;Attribute: Required;75
14.7.2;Attribute: Pattern;75
14.7.3;Input Type: Number (Spinner);76
14.7.4;Input Type: Range (Slider);76
14.7.5;Input Type: Date (Time/Calendar Widgets);77
14.8;Input Type: Color (Color Picker);78
14.8.1;Input Type and Element: Datalist;79
14.9;You Hypocrite. I Thought Requiring JavaScript Was the Worst Thing Ever;79
14.10;What About Accessibility ?;80
15;Chapter 9: The Truth About HTML5’s Canvas, Gaming, and Flash;81
15.1;Flash Is Dying, and HTML5 Is All We’ve Got;81
15.2;Can Canvas and HTML5 Fill the Gap?;82
15.3;Flash Authoring for HTML5?;82
15.4;And Then Apps Happened;83
15.5;Let’s Bury Flash-isms with Flash;84
15.6;We’re Not in Canvas Anymore;84
15.7;Cool Things with Canvas;86
15.7.1;Tooltips;86
15.7.1.1;Tipped;86
15.7.2;Charts;86
15.7.2.1;RGraph;86
15.7.2.2;Visualize;87
15.7.2.3;HumbleFinance;88
15.7.2.4;Peity;88
15.7.3;Visualizations;89
15.7.3.1;Processing.js;89
15.7.3.1.1;“Evolution of Privacy on Facebook”;89
15.7.3.1.2;Canvas, Twitter, and Audio Mashup;90
15.7.3.2;Paper.js;91
15.7.4;Games;92
15.7.4.1;Google Chrome Racer;92
15.7.4.2;Biolab Disaster;93
15.7.4.3;Canvas Rider;94
15.7.4.4;Cut the Rope;95
15.7.5;Image Manipulation;96
15.7.5.1;PaintbrushJS;96
15.7.6;Canvas-Driven Web Apps;97
15.7.6.1;Sketchpad;97
15.7.6.2;Endless Mural;98
15.7.6.3;LucidChart;99
15.7.7;Drawing Interface Elements;99
15.7.7.1;Flash-Style Interface Effects;99
15.7.7.2;Background Animations;100
15.7.7.3;Interface Backgrounds with Liquid Canvas;101
15.7.8;The Sometimes Good and Sometimes Bad Canvas Emulation for IE6–8;102
15.8;The Haphazard World of Web Standards (Or: How Did We End Up with Canvas?);103
15.9;The Canvas Element and Accessibility;104
15.10;The Current State of Canvas;104
15.10.1;Primitive Development Environment;104
15.10.2;Performance;105
15.10.3;Limited IE Compatibility;105
15.10.4;Again with the Glass Metaphor;105
15.11;HTML5 Gaming: Canvas or Not?;105
15.11.1;Is It Even Canvas?;106
15.12;Getting Started with Canvas Game Development;106
15.12.1;HTML Gaming: Beyond HTML5;106
15.13;Canvas: What’s in It for Me?;107
15.13.1;Canvas for Web Designers;107
15.13.2;Canvas for Students and Hobbyists;107
15.13.3;Canvas for Flash Designers;107
15.13.4;Suck It and See;107
15.14;2D Canvas’s 3D Future: WebGL;107
15.15;3D on the Web: WebGL Alternatives;108
15.16;Show Me the Demos!;108
15.16.1;HelloRun;109
15.17;Epic Citadel;109
15.17.1;Angry Birds;110
15.17.1.1;Rome “3 Dreams in Black” Interactive Music Video;111
15.17.1.2;glfx.js Image Manipulation;112
15.17.1.3;Quake II;112
15.17.1.4;GT Racing: Motor Academy;113
15.17.1.5;Skid Racer;114
15.17.1.6;More WebGL Demos;115
15.18;Still Early Days for WebGL;115
16;Chapter 10: The Truth About Audio and Video in HTML5;116
16.1;Native and in Action;116
16.2;The Element;116
16.2.1; Attributes;117
16.2.1.1;The WebAudio API;118
16.3;The Element;119
16.3.1;Video Accessibility;120
16.3.2;API and Resources;120
16.3.3;Codecs, You’re Killing Me;121
16.3.4;The Patent Problem;121
16.3.5;H.264 Is Baked In;122
16.3.6;Google Threatens to Take Chrome WebM Only…and Then Doesn’t;122
16.4;Codecs: What to Do?;123
16.5;Reality Bites;123
16.6;Video Types …Oh My;124
16.7;Querying Supported Video Types with JavaScript;124
16.8;Audio and Video Media Players to the Rescue;125
16.8.1;MediaElement (Video and Audio, Free);125
16.8.2;VideoJS (Video, Free);126
16.8.3;Flowplayer (Video, Free and Commercial);127
16.8.4;More Media Players;128
16.9;Other Flies in the HTML5 Video Ointment: DRM, Streaming, and Full-Screen Video;129
16.10;DRM;129
16.11;Streaming;130
16.12;Fullscreen API;131
16.13;Is HTML5 Ready for Games ?;131
16.14;Wrapping Up;132
17;Chapter 11: The Truth About SVG: The Flash Challenger That Was, Wasn’t, and Now…;133
17.1;SVG, SVG…;133
17.2;SVG: Browser Support Arrives at Last;134
17.3;Yes, There Is Real-World SVG We Can Use Right Now;135
17.4;The Many Faces of SVG;135
17.5;SVG in the'00s: The Great Hope That Wasn’t;135
17.6;SVG Browser Support: Android, What the Hell? Oh, and IE…;136
17.7;SVG Demos: What Is It Good For?;136
17.7.1;SVG Girl;137
17.7.1.1;SVG Edit;137
17.7.1.2;Google Docs;138
17.7.1.3;SVG Games;139
17.7.2;D3.js;139
17.7.3;Charts with Highcharts;140
17.8;Snap.svg-Powered Demos;141
17.8.1;PBS Kids;141
17.8.2;Codrops Animated SVG Icons with Snap.svg;142
17.8.3;Snap.svg’s Demo Page;143
17.9;Raphael.js-Powered Demos;144
17.9.1;thirteen23;144
17.9.1.1;Markup.io;145
17.9.2;DrawAStickman.com;146
17.10;Working with SVG;147
17.11;Responsive Web Design and SVG;147
17.12;SVG Gotchas;148
17.13;SVG: Heir to Flash?;148
18;Chapter 12: The Truth About HTML5 Web Apps, Mobile, and What Comes Next;150
18.1;HTML5 Web App Browser Support;150
18.2;HTML5 on Mobile: WebKit and Beyond;151
18.3;Mobile Is a Moving Target: Microsoft’s Big Push;151
18.4;Firefox OS: Mozilla’s Ambitious Mobile Platform, and the WebAPI;152
18.5;HTML5 Mobile Compatibility;153
18.6;HTML5-Powered Content Management;153
18.7;The JavaScript Age;153
18.8;JavaScript Killed the HTML Star;154
18.9;Modernizr, When Can I Use?.?.?.?, and Polyfills;155
18.9.1;Modernizr;155
18.9.2;When Can I Use?.?.?.;155
18.9.3;Polyfills;156
18.10;HTML5 Web App APIs;156
18.11;History API (pushState);156
18.12;HTML5 Web Storage (and JavaScript-Rendered CSS);157
18.13;Database Storage;157
18.14;HTML5 Offline (Application Cache);158
18.15;Geolocation API;158
18.16;Other APIs That May Be of Interest to You;159
18.17;What Comes Next: HTML 5.1;160
18.18;Wrapping Up;161
19;Chapter 13: The Truth About the Future of Web Design: Performance-Based Design;162
19.1;Operating in the Dark;162
19.2;Performance vs. Production;163
19.3;Measure When You Redesign;163
19.4;Let’s Get Objective;164
20;Index;165

Über Autor(innen)

A bio is not available for this author.