HTML5 up and Running.Pdf

Download from Library of Wow! eBook <www.wowebook.com> Download from Library of Wow! eBook <www.wowebook.com> HTML5: Up and Running Download from Library of Wow! eBook <www.wowebook.com> Download from Library of Wow! eBook <www.wowebook.com> HTML5: Up and Running Mark Pilgrim Beijing • Cambridge • Farnham • Köln • Sebastopol • Taipei • Tokyo Download from Library of Wow! eBook <www.wowebook.com> HTML5: Up and Running by Mark Pilgrim Copyright © 2010 Mark Pilgrim. 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]. Editor: Mike Loukides Indexer: Fred Brown Production Editor: Adam Zaremba Cover Designer: Karen Montgomery Copyeditor: Rachel Head Interior Designer: David Futato Proofreader: Emily Quill Illustrator: Robert Romano Printing History: August 2010: First Edition. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. HTML5: Up and Running, the image of an alpine chamois, 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 author assume no responsibility for errors or omissions, or for damages resulting from the use of the information con- tained herein. TM This book uses RepKover™, a durable and flexible lay-flat binding. ISBN: 978-0-596-80602-6 [M] 1281030545 Download from Library of Wow! eBook <www.wowebook.com> Table of Contents Preface . .................................................................... ix 1. How Did We Get Here? . ................................................. 1 Diving In 1 MIME Types 1 A Long Digression into How Standards Are Made 2 An Unbroken Line 7 A Timeline of HTML Development from 1997 to 2004 9 Everything You Know About XHTML Is Wrong 10 A Competing Vision 11 What Working Group? 12 Back to the W3C 13 Postscript 14 Further Reading 14 2. Detecting HTML5 Features . ............................................ 15 Diving In 15 Detection Techniques 15 Modernizr: An HTML5 Detection Library 16 Canvas 16 Canvas Text 17 Video 18 Video Formats 19 Local Storage 21 Web Workers 23 Offline Web Applications 23 Geolocation 24 Input Types 25 Placeholder Text 27 Form Autofocus 27 Microdata 28 v Download from Library of Wow! eBook <www.wowebook.com> Further Reading 29 3. What Does It All Mean? . ............................................... 31 Diving In 31 The Doctype 31 The Root Element 33 The <head> Element 34 Character Encoding 35 Friends and (Link) Relations 36 New Semantic Elements in HTML5 41 A Long Digression into How Browsers Handle Unknown Elements 42 Headers 45 Articles 47 Dates and Times 49 Navigation 51 Footers 52 Further Reading 54 4. Let’s Call It a Draw(ing Surface) . ........................................ 57 Diving In 57 Simple Shapes 58 Canvas Coordinates 60 Paths 61 Text 63 Gradients 67 Images 70 What About IE? 73 A Complete Example 75 Further Reading 79 5. Video on the Web . .................................................... 81 Diving In 81 Video Containers 81 Video Codecs 83 H.264 84 Theora 84 VP8 85 Audio Codecs 85 MPEG-1 Audio Layer 3 86 Advanced Audio Coding 87 Vorbis 87 What Works on the Web 88 Licensing Issues with H.264 Video 90 vi | Table of Contents Download from Library of Wow! eBook <www.wowebook.com> Encoding Ogg Video with Firefogg 91 Batch Encoding Ogg Video with ffmpeg2theora 98 Encoding H.264 Video with HandBrake 100 Batch Encoding H.264 Video with HandBrake 107 Encoding WebM Video with ffmpeg 108 At Last, the Markup 110 MIME Types Rear Their Ugly Head 113 What About IE? 114 A Complete Example 114 Further Reading 115 6. You Are Here (And So Is Everybody Else) . 117 Diving In 117 The Geolocation API 117 Show Me the Code 118 Handling Errors 120 Choices! I Demand Choices! 121 What About IE? 123 geo.js to the Rescue 123 A Complete Example 125 Further Reading 126 7. The Past, Present, and Future of Local Storage for Web Applications . 127 Diving In 127 A Brief History of Local Storage Hacks Before HTML5 128 Introducing HTML5 Storage 129 Using HTML5 Storage 130 Tracking Changes to the HTML5 Storage Area 131 Limitations in Current Browsers 132 HTML5 Storage in Action 132 Beyond Named Key/Value Pairs: Competing Visions 134 Further Reading 135 8. Let’s Take This Offline . ............................................... 137 Diving In 137 The Cache Manifest 138 Network Sections 139 Fallback Sections 140 The Flow of Events 141 The Fine Art of Debugging, a.k.a. “Kill Me! Kill Me Now!” 142 Let’s Build One! 145 Further Reading 146 Table of Contents | vii Download from Library of Wow! eBook <www.wowebook.com> 9. A Form of Madness . .................................................. 147 Diving In 147 Placeholder Text 147 Autofocus Fields 148 Email Addresses 150 Web Addresses 151 Numbers As Spinboxes 153 Numbers As Sliders 155 Date Pickers 156 Search Boxes 158 Color Pickers 160 And One More Thing... 160 Further Reading 161 10. “Distributed,” “Extensibility,” and Other Fancy Words . 163 Diving In 163 What Is Microdata? 164 The Microdata Data Model 165 Marking Up People 168 Introducing Google Rich Snippets 174 Marking Up Organizations 176 Marking Up Events 180 The Return of Google Rich Snippets 184 Marking Up Reviews 185 Further Reading 189 Appendix: The All-in-One Almost-Alphabetical Guide to Detecting Everything . 191 Index . 201 viii | Table of Contents Download from Library of Wow! eBook <www.wowebook.com> Preface Diving In What is HTML5? HTML5 is the next generation of HTML, superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 provides new features that are necessary for modern web applications. It also standardizes many features of the web platform that web developers have been using for years, but that have never been vetted or documented by a standards committee. (Would it surprise you to learn that the Window object has never been formally documented? In addition to the new features, HTML5 is the first attempt to formally document many of the “de facto” standards that web browsers have supported for years.) Like its predecessors, HTML5 is designed to be cross-platform. You don’t need to be running Windows or Mac OS X or Linux or Multics or any particular operating system in order to take advantage of HTML5. The only thing you do need is a modern web browser. There are modern web browsers available for free for all major operating systems. You may already have a web browser that supports certain HTML5 features. The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features. (You’ll find more detailed browser compatibility tables throughout this book.) The mobile web browsers that come preinstalled on iPhones, iPads, and Android phones all have excellent support for HTML5. Even Microsoft has announced that the upcoming Version 9 of Internet Explorer will support some HTML5 functionality. This book will focus on eight topics: • New semantic elements like <header>, <footer>, and <section> (Chapter 3) • Canvas, a two-dimensional drawing surface that you can program with JavaScript (Chapter 4) • Video that you can embed on your web pages without resorting to third-party plug- ins (Chapter 5) • Geolocation, whereby visitors can choose to share their physical locations with your web application (Chapter 6) • Persistent local storage without resorting to third-party plug-ins (Chapter 7) ix Download from Library of Wow! eBook <www.wowebook.com> • Offline web applications that work even after network access is interrupted (Chapter 8) • Improvements to HTML web forms (Chapter 9) • Microdata that lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics (Chapter 10) HTML5 is designed, as much as possible, to be backward compatible with existing web browsers. New features build on existing features and allow you to provide fallback content for older browsers. If you need even greater control, you can detect support for individual HTML5 features (Chapter 2) using a few lines of JavaScript. Don’t rely on fragile browser sniffing to decide which browsers support HTML5! Instead, test for the features you need using HTML5 itself. Conventions Used in This Book The following typographical conventions are used in this book: Italic Indicates new terms, URLs, email addresses, filenames, and file extensions. Constant width Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data types, environment variables, statements, and keywords. Constant width bold Shows commands or other text that should be typed literally by the user. Constant width italic Shows text that should be replaced with user-supplied values or by values deter- mined by context. This icon signifies a tip, suggestion, or general note. This icon indicates a warning or caution. x | Preface Download from Library of Wow! eBook <www.wowebook.com> Using Code Examples This book is here to help you get your job done. In general, you may use the code in this book in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission.

HTML5 up and Running.Pdf

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support