HTML5 up and Running.Pdf

Total Page:16

File Type:pdf, Size:1020Kb

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 docu- mented 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.
Recommended publications
  • Dive Into Python
    Table of Contents Dive Into Python...............................................................................................................................................................1 Chapter 1. Installing Python...........................................................................................................................................2 1.1. Which Python is right for you?......................................................................................................................2 1.2. Python on Windows.......................................................................................................................................2 1.3. Python on Mac OS X.....................................................................................................................................3 1.4. Python on Mac OS 9......................................................................................................................................5 1.5. Python on RedHat Linux...............................................................................................................................5 1.6. Python on Debian GNU/Linux......................................................................................................................6 1.7. Python Installation from Source....................................................................................................................6 1.8. The Interactive Shell......................................................................................................................................7
    [Show full text]
  • Oracle Communications Policy Management Licensing Information User Manual Release 12.5 Copyright © 2011, 2019, Oracle And/Or Its Affiliates
    Oracle® Communications Policy Management Licensing Information User Manual Release 12.5.1 F16918-02 October 2019 Oracle Communications Policy Management Licensing Information User Manual Release 12.5 Copyright © 2011, 2019, Oracle and/or its affiliates. All rights reserved. This software and related documentation are provided under a license agreement containing restrictions on use and disclosure and are protected by intellectual property laws. Except as expressly permitted in your license agreement or allowed by law, you may not use, copy, reproduce, translate, broadcast, modify, license, transmit, distribute, exhibit, perform, publish, or display any part, in any form, or by any means. Reverse engineering, disassembly, or decompilation of this software, unless required by law for interoperability, is prohibited. The information contained herein is subject to change without notice and is not warranted to be error-free. If you find any errors, please report them to us in writing. If this is software or related documentation that is delivered to the U.S. Government or anyone licensing it on behalf of the U.S. Government, then the following notice is applicable: U.S. GOVERNMENT END USERS: Oracle programs, including any operating system, integrated software, any programs installed on the hardware, and/or documentation, delivered to U.S. Government end users are “commercial computer software” pursuant to the applicable Federal Acquisition Regulation and agency-specific supplemental regulations. As such, use, duplication, disclosure, modification, and adaptation of the programs, including any operating system, integrated software, any programs installed on the hardware, and/or documentation, shall be subject to license terms and license restrictions applicable to the programs.
    [Show full text]
  • RSS Security in Ethernet Network Protocol
    1 RSS Security in Ethernet Network Protocol BY ADEBIAYE FAPETU MASTERS OF SCIENCE IN INFORMATION SECURITY 2007 2 ABSTRACT Distributing information has come a long way from the traditional mailing system to emails, SMS (Short Message Service) and the likes. RSS (Really Simple Syndication) is another form of distributing information through the web. With the use of an RSS, the user can read reader (or aggregator) RSS feeds from different websites. These feeds contain links to information that the reader might be interested in reading. This study covers the designing of a security framework for RSS because presently, the use of RSS has no security from possible intrusion by malwares. The security framework, which will be implemented on a website, will gather and filter RSS feeds, and then, redistributes these feeds to the designated reader. XML (Extended Mark-Up Language), on which RSS is based, is the main programming language used in this study. URL filtering will be used primarily, along with other filtering concept to achieve a multi-layered filtering system. Objective of this project The objective is to present how RSS works in distributing information through the web and how it could be relevant for Healthcare communication. The security concepts, importance, threats and vulnerabilities in RSS will be highlighted. Secure RSS Syndication On July 13, 2005 there was an inquisitive question by a user named Joe Gregorio and I quote “I have a problem. It's actually a pretty common problem. I have data that I want to syndicate to myself, but I don't want you to see it.
    [Show full text]
  • Dive Into Html5
    DIVE INTO HTML5 BY MARK PILGRIM WITH ILLUSTRATIONS FROM THE PUBLIC DOMAIN ❧ ive Into HTML5 seeks to elaborate on a hand-pied Selection of features from the HTML5 specification and other fine Standards. e final manuscript has been published on paper by O’Reilly, under the Google Press imprint. Buy the printed Work — artfully titled “HTML5: Up & Running” — and be the first in your Community to receive it. Your kind and sincere Feedba is always welcome. e Work shall remain online under the CC-BY-3.0 License. diveintohtml5.org DIVE INTO HTML5 TABLE OF CONTENTS Introduction: Five ings You Should Know About HTML5 0 A ite Biased History of HTML5 1 Detecting HTML5 Features: It’s Elementary, My Dear Watson 2 What Does It All Mean? 3 Let’s Call It a Draw(ing Surface) 4 Video in a Flash (Without at Other ing) 5 You Are Here (And So Is Everybody Else) 6 A Place To Put Your Stuff 7 Let’s Take is Offline 8 A Form of Madness 9 “Distributed,” “Extensibility,” And Other Fancy Words 10 e All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything 11 HTML5 Peeks, Pokes and Pointers 12 ❧ “If you’re good at something, never do it for free.” —e Joker (but that doesn’t mean you should keep it to yourself) Copyright MMIX–MMX Mark Pilgrim diveintohtml5.org DIVE INTO HTML5 powered by Google™ Search diveintohtml5.org DIVE INTO HTML5 You are here: Home ‣ Dive Into HTML5 ‣ TABLE OF CONTENTS Introduction: Five ings You Should Know About HTML5 1.
    [Show full text]
  • Mark Pilgrim Dive Into Python 3
    Edice CZ.NIC ISBN: 978-80-904248-2-1 Mark Pilgrim Dive Into Python 3 Ponořme se do Python(u) 3 Ponořme se do Python(u) 3 Ponořme Python3 Mark Pilgrim O autorovi Mark Pilgrim se nesmazatelně zapsal do povědomí pythonovské komunity už svojí knihou „Dive Into Python“, ve které originálním a nezapomenutelným způsobem přiblížil čtenářům osobitý styl programování v tomto jazyce, aby se o několik let později připomenul ještě výrazněji s knihou „Dive Into Python 3“, která je stejně originálním a zábavným způsobem věnována jeho nejnovější verzi. S podobným nadšením se však zabývá i dalšími tématy, jeho nejnovější kniha „HTML5: Up & Running“ je čtivým úvodem do problematiky posledního hitu na poli předávání informací na Internetu – standardu HTML5. O edici Edice CZ.NIC je jedním z osvětových projektů správce české domény nejvyšší úrovně. Cílem tohoto projektu je vydávat odborné, ale i populární publikace spojené s internetem a jeho technologiemi. Kromě tištěných verzí vychází v této edici současně i elektronická podoba knih. Ty je možné najít na stránkách knihy.nic.cz CZ.NIC knihy.nic.cz Edice Dive Into Python 3 Edice CZ.NIC NNIC_python3_cover_v6_full.inddIC_python3_cover_v6_full.indd 1 111/18/101/18/10 66:05:19:05:19 PPMM PProcessrocess CCyanyanPProcessrocess MMagentaagentaPProcessrocess YYellowellowPProcessrocess BBlacklackPPANTONEANTONE 663636 C © 2010 Mark Pilgrim Ponořme se do Python(u) 3 Dive Into Python 3 Vydal CZ.NIC, z. s. p. o. Americká 23, 120 00 Praha 2 www.nic.cz ISBN: 978-80-904248-2-1 Edice CZ.NIC 1 — Mark Pilgrim Ponořme se do Python(u) 3 Dive Into Python 3 — Edice CZ.NIC 3 4 — Předmluva a ediční poznámka Předmluva a ediční poznámka 5 6 — Předmluva a ediční poznámka Vážení čtenáři, po úspěchu naší předchozí publikace ProGit jsme se rozhodli, že třetí kniha v Edici CZ.NIC bude tak trochu na podobné téma a v podobném duchu.
    [Show full text]
  • Dive Into Python.Pdf
    Dive Into Python Python from novice to pro Mark Pilgrim Dive Into Python: Python from novice to pro by Mark Pilgrim Published 20 May 2004 Copyright © 2000, 2001, 2002, 2003, 2004 Mark Pilgrim [mailto:[email protected]] This book lives at http://diveintopython.org/. If you©re reading it somewhere else, you may not have the latest version. Permission is granted to copy, distribute, and/or modify this document under the terms of the GNU Free Documentation License, Version 1.1 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license is included in Appendix G, GNU Free Documentation License. The example programs in this book are free software; you can redistribute and/or modify them under the terms of the Python license as published by the Python Software Foundation. A copy of the license is included in Appendix H, Python license. Table of Contents 1. Chapter 1 ........................................................................................................................ 1 Which Python is right for you? ....................................................................................... 1 Python on Windows ..................................................................................................... 1 Python on Mac OS X ................................................................................................... 3 Python on Mac OS 9 ...................................................................................................
    [Show full text]
  • CSCI E‐12 Fundamentals of Website Development a Form for Lecture
    CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html CSCI E‐12 Fundamentals of Website Development Table of Contents | All‐in‐One | Link List | Lecture Notes Home | CSCI E‐12 Home A form for lecture feedback is available from the course web site. Please take two minutes to fill it out after you have seen the lecture. May 5, 2010 Harvard University Extension School Course Web Site: http://cscie12.dce.harvard.edu/ Instructor email: [email protected] Course staff email: [email protected] 1 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html ©opyright Semantic Web (Microformats and RDFa) Security and Privacy (SSL, XSS, Phishing, PICS) Web Content Management Systems (CMS, WCM) Mobile Web HTML 5 Where to go from here? 2 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html US Copyright Office Copyright and Fair Use (Stanford University Libraries) Copyright and Fair Use (Harvard OGC) Copyright Crash Course (Univeristy of Texas OGC) Lawrence Lessig has written many interesting books about technology, copyright & public domain and culture. Lawsuit over website links in spotlight Copyright violation or fair use to be decided By Robert Weisman Globe Staff / January 23, 2009 3 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html Creative Commons Creative Commons is a nonprofit corporation dedicated to making it easier for people to share and build upon the work of others, consistent with the rules of copyright.
    [Show full text]
  • Atom (Standard) 1 Atom (Standard)
    Atom (standard) 1 Atom (standard) Atom The feed icon used in several browsers Filename extension .atom, .xml Internet media type application/atom+xml Type of format web syndication Extended from XML The name Atom applies to a pair of related standards. The Atom Syndication Format is an XML language used for web feeds, while the Atom Publishing Protocol (AtomPub or APP) is a simple HTTP-based protocol for creating and updating web resources. Web feeds allow software programs to check for updates published on a website. To provide a web feed, a site owner may use specialized software (such as a content management system) that publishes a list (or "feed") of recent articles or content in a standardized, machine-readable format. The feed can then be downloaded by programs that use it, like websites that syndicate content from the feed, or by feed reader programs that allow Internet users to subscribe to feeds and view their content. A feed contains entries, which may be headlines, full-text articles, excerpts, summaries, and/or links to content on a website, along with various metadata. The Atom format was developed as an alternative to RSS. Ben Trott, an advocate of the new format that became Atom, believed that RSS had limitations and flaws—such as lack of on-going innovation and its necessity to remain backward compatible— and that there were advantages to a fresh design.[1] Proponents of the new format formed the IETF Atom Publishing Format and Protocol Workgroup. The Atom syndication format was published as an IETF proposed standard in RFC 4287 (December 2005), and the Atom Publishing Protocol was published as RFC 5023 [2] (October 2007).
    [Show full text]
  • Mark Pilgrim Dive Into Python 3
    Edice CZ.NIC ISBN: 978-80-904248-2-1 Mark Pilgrim Dive Into Python 3 Ponořme se do Python(u) 3 Ponořme se do Python(u) 3 Ponořme Python3 Mark Pilgrim O autorovi Mark Pilgrim se nesmazatelně zapsal do povědomí pythonovské komunity už svojí knihou „Dive Into Python“, ve které originálním a nezapomenutelným způsobem přiblížil čtenářům osobitý styl programování v tomto jazyce, aby se o několik let později připomenul ještě výrazněji s knihou „Dive Into Python 3“, která je stejně originálním a zábavným způsobem věnována jeho nejnovější verzi. S podobným nadšením se však zabývá i dalšími tématy, jeho nejnovější kniha „HTML5: Up & Running“ je čtivým úvodem do problematiky posledního hitu na poli předávání informací na Internetu – standardu HTML5. O edici Edice CZ.NIC je jedním z osvětových projektů správce české domény nejvyšší úrovně. Cílem tohoto projektu je vydávat odborné, ale i populární publikace spojené s internetem a jeho technologiemi. Kromě tištěných verzí vychází v této edici současně i elektronická podoba knih. Ty je možné najít na stránkách knihy.nic.cz CZ.NIC knihy.nic.cz Edice Dive Into Python 3 Edice CZ.NIC NNIC_python3_cover_v6_full.inddIC_python3_cover_v6_full.indd 1 111/18/101/18/10 66:05:19:05:19 PPMM PProcessrocess CCyanyanPProcessrocess MMagentaagentaPProcessrocess YYellowellowPProcessrocess BBlacklackPPANTONEANTONE 663636 C Mark Pilgrim PONOŘME SE DO PYTHON(U) 3 Vydavatel: CZ.NIC, z. s. p. o. Americká 23, 120 00 Praha 2 Edice CZ.NIC www.nic.cz 1. vydání, Praha 2011 Kniha vyšla jako 3. publikace v Edici CZ.NIC. ISBN 978-80-904248-2-1 © 2010 Mark Pilgrim Uvedené dílo podléhá licenci Creative Commons Uveďte autora-Zachovejte licenci 3.0 Unported.
    [Show full text]