Đang tải... (xem toàn văn)
Tai lieu ve html
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 corporate@oreilly.com. Editor: Mike Loukides Production Editor: Adam Zaremba Copyeditor: Rachel Head Proofreader: Emily Quill Indexer: Fred Brown Cover Designer: Karen Montgomery Interior Designer: David Futato 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> . 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. 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