ebook img

HTML5 Cookbook (O'Reilly Cookbooks) PDF

284 Pages·2012·20.86 MB·English
Save to my drive
Quick download
Download
Most books are stored in the elastic cloud where traffic is expensive. For this reason, we have a limit on daily download.

Preview HTML5 Cookbook (O'Reilly Cookbooks)

,HTML5Cookbook_praise_page.recover.12295 Page i Wednesday, November 2, 2011 10:06 AM Praise forHTML5 Cookbook “WrittenbycommunityexpertsEmilyLewis,MarkGrabanski,ChristinaRamey,Kimberly Blessing,ChristopherDeutsch,AnitraPavka,KyleSimpson,andChristopherSchmitt,the HTML5Cookbookprovidesthe breadthanddepthneededtousetomorrow’stechnology today.” —Estelle Weyl, author ofHTML5 & CSS3 for the Real World “There is so much for frontend designers to remember these days, it’s hard to have it all memorized.TheHTML5Cookbookisperfectforallofuswhoknowwhatwearelooking for and need a quick and reliable way to find it.” —Chris Coyier, CSS-Tricks.com “If you’re ready to learn HTML5 that works today, the HTML5 Cookbook is the book to buy. Therearesomeexcellentbooksoutthereifyouwantexpositionanddetails,butif you want to roll up your sleeves and get to work, buy this book.” —Ben Henick, Sitebuilder at-large “Thedifficultywithcookbookshasalwaysbeengettingtherightbalancebetweenbreadth and depth. I am impressed with the HTML5 Cookbook. Schmitt and Simpson have got this balance just right, providing enough depth on essential topics to give you what you need for implementing HTML5 features on your sites and apps, while also going further and exploring some interesting peripheral and nascent topics that you’ll want to learn aboutsoon,ifnottoday.Coveringsemantics,video,audio,Canvas,progressiveenhance- ment and backwards compatibility, forms, accessibility, geolocation and more, you’re bound to get a lot out of this book whatever web disciplines you practice. —Chris Mills, Open Standards Evangelist, Opera Software ,HTML5Cookbook_praise_page.recover.12295 Page ii Wednesday, November 2, 2011 10:06 AM “TheHTML5Cookbookisbrimmingwithrecipestoshowyouwhatyoucanreallydowith HTML5, plus a soupçon of JavaScript. Fill your studio with the aroma of drawings, animations, geolocation, audio/video, form fields, and semantic elements.” —Helen Oliver, Research Assistant, Design Engineering Group at Imperial College London “Great overview of the most important HTML5 technologies, with tons of code to match it! An everyday companion for your developing needs.” —Robert Nyman, Technical Evangelist,Mozilla “The HTML5 Cookbook is not only a fantastic resource for creative problem solving with HTML5, it is also a great learning tool. There’s no easier way to get familiar with a new (orupdated)languagethanbycombingthroughusefulexamples---somethingthisbookis just chock full of.” —Aaron Gustafson, author ofAdaptive Web Design: Crafting Rich Experiences with Progressive Enhancement HTML5 Cookbook Christopher Schmitt and Kyle Simpson Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo HTML5 Cookbook by Christopher Schmitt and Kyle Simpson Copyright © 2012 Christopher Schmitt and Kyle Simpson. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/institutional sales department: (800) 998-9938 or [email protected]. Editors: Simon St. Laurent and Courtney Nash Indexer: Lucie Haskins Production Editor: Jasmine Perez Cover Designer: Karen Montgomery Copyeditor: Rachel Head Interior Designer: David Futato Proofreader: Linley Dolby Illustrator: Robert Romano November 2011: First Edition. Revision History for the First Edition: 2011-11-04 First release See http://oreilly.com/catalog/errata.csp?isbn=9781449396794 for release details. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. HTML5 Cookbook, the image of a common kestrel, and related trade dress are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trademark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information con- tained herein. ISBN: 978-1-449-39679-4 [LSI] 1320420716 Table of Contents Preface ..................................................................... ix 1. Fundamental Syntax and Semantics ....................................... 1 1.1 Specifying the DOCTYPE 1 1.2 Specifying the Character Set 2 1.3 Specifying the Language 4 1.4 Optimizing <script>s and <link>s 4 1.5 Adding Document Structure with HTML5’s New Elements 5 1.6 Choosing Between <article> and <section> 9 1.7 Checking Your Document Outline 11 1.8 Modifying the Document Outline 14 1.9 Emphasizing Text 14 1.10 Adding Importance to Text 16 1.11 Highlighting Text for Reference 17 1.12 Marking Up Small Print 18 1.13 Defining Acronyms and Abbreviations 19 1.14 Adding Links to Block-Level Content 20 1.15 Marking Up Figures and Captions 20 1.16 Marking Up Dates and Times 21 1.17 Setting the Stage for Native Expanding and Collapsing 23 1.18 Controlling the Numbering of Your Lists 25 1.19 Hiding Content to Show Later 27 1.20 Making Portions of a Page Editable 28 1.21 Setting the Stage for Native Drag-and-Drop 29 2. Progressive Markup and Techniques ...................................... 31 2.1 Adding More Semantic Meaning 31 2.2 Picking a Markup Style 33 2.3 Understanding Browser Support for HTML5 34 2.4 Making Internet Explorer Recognize HTML5 Elements 35 2.5 Detecting HTML5 Features with JavaScript 38 v 2.6 Using HTML5 Boilerplate 44 2.7 Validating HTML5 48 2.8 Mapping HTML5 Elements to ID and Class Names 51 3. Forms ................................................................ 55 3.1 Displaying a Search Input Field 55 3.2 Contact Information Input Fields 58 3.3 Utilizing Date and Time Input Fields 62 3.4 Number Inputs 66 3.5 Selecting from a Range of Numbers 69 3.6 Selecting Colors 71 3.7 Creating an Editable Drop-Down 73 3.8 Requiring a Form Field 77 3.9 Autofocusing a Form Field 80 3.10 Displaying Placeholder Text 80 3.11 Disabling Autocomplete 82 3.12 Restricting Values 84 3.13 Making HTML5 Work in Older Browsers 86 3.14 Validating Form Data in Older Browsers with JavaScript 90 3.15 Example: Sample Form 92 4. Native Audio .......................................................... 95 4.1 Adding HTML5 Audio 95 4.2 Manipulating the Audio Stream 100 4.3 Generating <audio> Using JavaScript 102 4.4 Visualizing <audio> Using <canvas> 103 4.5 Sample Design: Custom Audio Player 107 5. Native Video ......................................................... 113 5.1 Adding HTML5 Video 113 5.2 Ensuring Multi-Browser Video Support 117 5.3 Setting Video Dimensions 119 5.4 Displaying a Placeholder Image Before Video Plays 120 5.5 Making Video Loop 122 5.6 Sample Design: Manipulating Video with <canvas> 122 6. Microdata and Custom Data ............................................ 127 6.1 Adding Microdata to Markup 128 6.2 Using Microdata and Schema.org 129 6.3 Adding Custom Data to Markup 131 6.4 Accessing Custom Data with JavaScript 133 6.5 Manipulating Custom Data 134 6.6 Example: Creating a Map Application Using Custom Data 136 vi | Table of Contents 7. Accessibility .......................................................... 139 7.1 Writing Appropriate alt Text Descriptions 141 7.2 Identifying Abbreviations and Acronyms 144 7.3 Identifying Sections of a Page Using ARIA Landmark Roles 146 7.4 Creating More Accessible Navigation Links 149 7.5 Associating Form Fields with Their Labels 151 7.6 Grouping Form Fields Logically 152 7.7 Enabling a fieldset Dynamically 154 7.8 Identifying Required Form Fields 155 7.9 Using ARIA Live Regions to Announce When Dynamic Content Is Updating 157 8. Geolocation .......................................................... 161 8.1 Getting Basic Geolocation Data 161 8.2 Getting Basic Geolocation Data with a Fallback 164 8.3 Reverse Geocoding an Address with Latitude and Longitude 167 8.4 Converting an Address into Latitude and Longitude 169 8.5 Getting Directions from the Current Location 172 8.6 Example: Starbucks to Starbucks 179 9. <canvas> ........................................................... 185 9.1 Drawing on a <canvas> 186 9.2 Using Transparency 191 9.3 Setting <canvas> Dimensions 195 9.4 Using Gradients, Patterns, and Line Styles 196 9.5 Pulling External Images into a <canvas> Drawing 200 9.6 Setting Color Transformations 203 9.7 Working with Geometric Transformations 204 9.8 Placing Text on a <canvas> 208 9.9 Clipping <canvas> Drawings 210 9.10 Animating <canvas> Drawings 212 9.11 Drawing Graphs with <canvas> 215 9.12 Saving a <canvas> Drawing to a File 217 10. Advanced HTML5 JavaScript ............................................ 219 10.1 Local Storage 220 10.2 Application Caching 223 10.3 Drag and Drop 227 10.4 Web Workers 232 10.5 Web Sockets 236 10.6 History 240 10.7 Local Files 244 Table of Contents | vii Appendix: HTML5 Resources .................................................. 249 Index ..................................................................... 251 viii | Table of Contents

Description:
With scores of practical recipes you can use in your projects right away, this cookbook helps you gain hands-on experience with HTML5’s versatile collection of elements. You get clear solutions for handling issues with everything from markup semantics, web forms, and audio and video elements to re
See more

The list of books you might like

Most books are stored in the elastic cloud where traffic is expensive. For this reason, we have a limit on daily download.