HTML5 Guidelines for Web Developers

322 Pages·2013·7.24 MB·English

www.it-ebooks.info
HTML5 Guidelines
for Web Developers
Klaus Förster
Bernd Öggl
Upper Saddle River, NJ • Boston • Indianapolis • San Francisco
New York • Toronto • Montreal • London • Munich • Paris • Madrid
Capetown • Sydney • Tokyo • Singapore • Mexico City
www.it-ebooks.info
Figure 4.9 © 2008 Blender Foundation / www.bigbuckbunny.org Editor-in-Chief
Mark L. Taub
Cover design: Marco Lindenbeck, webwo GmbH, [e-mail]
Senior Acquisitions
Many of the designations used by manufacturers and sellers to distinguish their products are Editor
claimed as trademarks. Where those designations appear in this book, and the publisher was Trina MacDonald
aware of a trademark claim, the designations have been printed with initial capital letters or
Development Editor
in all capitals.
Susan Brown Zahn
The authors and publisher have taken care in the preparation of this book, but make no ex- Translator
pressed or implied warranty of any kind and assume no responsibility for errors or omissions. Almut Dworak
No liability is assumed for incidental or consequential damages in connection with or arising
Managing Editor
out of the use of the information or programs contained herein.
John Fuller
The publisher offers excellent discounts on this book when ordered in quantity for bulk pur- Full-Service
chases or special sales, which may include electronic versions and/or custom covers and con- Production Manager
tent particular to your business, training goals, marketing focus, and branding interests. For Julie B. Nahil
more information, please contact:
Project Editor and
U.S. Corporate and Government Sales Compositor
[phone] Mary Sudul, Fastpages
[e-mail] Copy Editor
Anne Marie Walker
For sales outside the United States, please contact:
Indexer
International Sales Jack Lewis
[e-mail]
Proofreader
Visit us on the Web: informit.com/aw Linda Seifert
Library of Congress Cataloging-in-Publication Data
Förster, Klaus, 1964-
[HTML 5. English]
HTML5 guidelines for Web developers / Klaus Förster, Bernd Öggl.
p. cm.
Includes bibliographical references and index.
ISBN 978-0-321-77274-9 (pbk. : alk. paper)
1. HTML (Document markup language) 2. Internet programming. 3.
Web site development. I. Öggl, Bernd. II. Title. III. Title: HTML 5
guidelines for Web developers.
QA76.625.F6713 2012
006.7’4—dc23
2011014135
Copyright © 2011 Pearson Education, Inc.
All rights reserved. Printed in the United States of America. This publication is protected by
copyright, and permission must be obtained from the publisher prior to any prohibited repro-
duction, storage in a retrieval system, or transmission in any form or by any means, electronic,
mechanical, photocopying, recording, or likewise. For information regarding permissions,
write to:
Pearson Education, Inc.
Rights and Contracts Department
501 Boylston Street, Suite 900
Boston, MA 02116
Fax: [phone]
ISBN-13: 978-0-321-77274-9
ISBN-10: 0-321-77274-1
Text printed in the United States on recycled paper at RR Donnelley in Crawfordsville, Indiana.
First printing, June 2011
www.it-ebooks.info
Thanks to Andrea and Sabine—you are wonderful!
www.it-ebooks.info
This page intentionally left blank
www.it-ebooks.info
Contents
Preface .............................................................................................................. xi
About the Authors ........................................................................................... xiii
1 Overview of the New Web Standard ...........................................................1
1.1 How It All Started ......................................................................................1
1.2 Time Travel through Historic Events .......................................................7
1.3 In Medias Res .............................................................................................9
1.3.1 What Is New? ..................................................................................9
1.3.2 What Has Become Obsolete? ......................................................13
1.3.3 And What About XHTML? ...........................................................15
1.4 Can I Start Using HTML5 Now? .............................................................16
Summary ...........................................................................................................18
2 Structure and Semantics for Documents .................................................19
2.1 Header with “header” and “hgroup” .....................................................21
2.2 Content with “article” .............................................................................22
2.3 Footer with “footer” and “nav” ..............................................................24
2.4 Sidebar with “aside” and “section” ........................................................25
2.5 The Outline Algorithm ............................................................................27
2.6 Figures with “figure” and “figcaption” ..................................................28
2.7 Text-Level Semantics—More New Tags ................................................29
2.7.1 The Elements “ruby,” “rt,” and “rp” ..........................................30
2.7.2 The “time” Element .....................................................................31
2.7.3 The “mark” Element ....................................................................32
2.7.4 The “wbr” Element ......................................................................32
2.7.5 Elements with Marginal Changes ..............................................33
Summary ...........................................................................................................35
3 Intelligent Forms .........................................................................................37
3.1 New Input Types .....................................................................................38
3.1.1 The Input Types “tel” and “search” ...........................................39
v
www.it-ebooks.info
vi Contents
3.1.2 The Input Types “url” and “email” ............................................40
3.1.3 Date and Time with “datetime”, “date”, “month”,
“week”, “time”, and “datetime-local” .......................................40
3.1.4 The Input Types “number” and “range” ...................................40
3.1.5 The Input Type “color” ...............................................................41
3.1.6 The New Input Types in Action ..................................................41
3.2 Useful Attributes for Forms ....................................................................43
3.2.1 Focusing with “autofocus”..........................................................43
3.2.2 Placeholder Text with “placeholder” .........................................44
3.2.3 Compulsory Fields with “required” ...........................................44
3.2.4 Even More Attributes for the “input” Element .........................45
3.3 New Elements ..........................................................................................47
3.3.1 Displaying Measurements with “meter” ...................................47
3.3.2 Displaying the Progress of a Task with “progress” ...................50
3.3.3 Lists of Options with “datalist” ...................................................51
3.3.4 Cryptographic Keys with “keygen” ............................................53
3.3.5 Calculations with “output” .........................................................55
3.4 Client-Side Form Validation ...................................................................57
3.4.1 The “invalid” Event ......................................................................59
3.4.2 The “checkValidity” Function ....................................................59
3.4.3 Error Handling with “setCustomValidity()” ..............................61
3.4.4 Summary of Validity Checks .......................................................63
3.4.5 Or Perhaps Better Not to Validate? “formnovalidate” ..............63
3.5 Example: A Support Form ......................................................................64
Summary ...........................................................................................................68
4 Video and Audio ..........................................................................................69
4.1 A First Example ........................................................................................70
4.2 The “video” Element and Its Attributes ................................................71
4.3 Video Codecs ...........................................................................................73
4.3.1 Ogg: Theora and Vorbis...............................................................75
4.3.2 MPEG-4: H.264 and AAC .............................................................75
4.3.3 WebM: VP8 and Vorbis ................................................................76
4.4 Tools for Video Conversion ....................................................................76
4.4.1 FFmpeg .........................................................................................76
4.4.2 VLC ................................................................................................78
4.4.3 Firefogg .........................................................................................79
4.4.4 Miro Video Converter ..................................................................81
www.it-ebooks.info
Contents vii
4.5 Which Format for Which Browser? ........................................................82
4.6 Interim Solutions for Older Browsers ....................................................83
4.6.1 mwEmbed ....................................................................................83
4.6.2 html5media ..................................................................................85
4.7 Video and Scripting—A Simple Video Player ........................................86
4.7.1 Integrating the Video ...................................................................87
4.7.2 Starting and Stopping the Video ................................................88
4.7.3 Displaying and Setting the Playback Position ..........................89
4.7.4 Fast Forward and Backward .......................................................91
4.7.5 Selecting Specific Scenes in the Film .........................................93
4.7.6 Set Volume to High, Low, or Mute .............................................93
4.7.8 Other Attributes and Methods of the
“HTMLMediaElement” Interface ...............................................94
4.7.9 The Long List of Media Events ...................................................98
4.8 And What About Audio? ..........................................................................99
Summary .........................................................................................................105
5 Canvas .......................................................................................................107
5.1 A First Example ......................................................................................108
5.2 Rectangles ..............................................................................................111
5.3 Colors and Shadows ..............................................................................113
5.4 Gradients ................................................................................................114
5.5 Paths .......................................................................................................117
5.5.1 Lines ............................................................................................119
5.5.2 Bézier Curves .............................................................................120
5.5.3 Arcs..............................................................................................121
5.5.4 Rectangles ..................................................................................126
5.5.5 Outlines, Fills, and Clipping Masks..........................................127
5.6 Text .........................................................................................................130
5.6.1 Fonts ...........................................................................................130
5.6.2 Horizontal Anchor Point ...........................................................132
5.6.3 Vertical Anchor Point ................................................................133
5.6.4 Drawing and Measuring Text ...................................................134
5.7 Embedding Images ................................................................................135
5.8 Pixel Manipulation ................................................................................141
5.8.1 Working with the “ImageData” Object ....................................141
5.8.2 Color Manipulation with “getImageData()”,
“createImageData()”, and “putImageData()” .........................145
www.it-ebooks.info
viii Contents
5.9 Compositing ...........................................................................................149
5.10 Patterns ..................................................................................................152
5.11 Transformations ....................................................................................156
5.12 Base64 Encoding with “canvas.toDataURL()” ....................................163
5.13 “save()” and “restore()” .........................................................................165
5.14 Animations .............................................................................................166
5.14.1 Animation with Multicolored Spheres ..................................166
5.14.2 Playing a Video with “drawImage()” ......................................169
5.15 Anything Still Missing? ..........................................................................173
5.15.1 “isPointInPath(x, y)” ................................................................173
5.15.2 Accessibility in Canvas? ...........................................................174
5.15.3 Security Aspects .......................................................................175
5.15.4 Browser Support ......................................................................176
5.15.5 Further Links ............................................................................176
Summary .........................................................................................................177
6 SVG and MathML ......................................................................................179
6.1 MathML ..................................................................................................180
6.2 SVG .........................................................................................................182
Summary .........................................................................................................183
7 Geolocation ...............................................................................................185
7.1 Introduction to Geolocation .................................................................186
7.1.1 About Geographical Data ..........................................................186
7.1.2 Online Map Services ..................................................................186
7.2 A First Experiment: Geolocation in the Browser ................................190
7.3 Technical Background of Determining Position ................................193
7.4 Display of Current Position on OpenStreetMap ................................194
7.5 Location Tracking with Google Maps ..................................................196
7.6 Example: Geonotes ................................................................................197
7.6.1 Operation ...................................................................................198
7.6.2 Important Code Fragments ......................................................199
7.7 Browser Support ....................................................................................202
Summary .........................................................................................................203
8 Web Storage and Offline Web Applications ...........................................205
8.1 Storage ....................................................................................................206
8.1.1 The “Storage” Interface .............................................................206
8.1.2 “sessionStorage” ........................................................................208
www.it-ebooks.info
Contents ix
8.1.3 “localStorage” ............................................................................209
8.1.4 The “storage” Event ...................................................................210
8.1.5 Debugging ..................................................................................210
8.2 Offline Web Applications ......................................................................212
8.2.1 The Cache Manifest File ............................................................213
8.2.2 Offline Status and Events ..........................................................214
8.2.3 Debugging ..................................................................................217
8.3 Browser Support ....................................................................................220
8.4 Example: Click to tick! ...........................................................................220
8.4.1 Using the Application: As a Player ...........................................221
8.4.2 Using the Application: As an Administrator ...........................222
8.4.3 Important Code Fragments ......................................................223
8.4.4 Expansion Options ....................................................................229
Summary .........................................................................................................230
9 WebSockets ..............................................................................................231
9.1 The WebSocket Server ..........................................................................233
9.2 Example: A Broadcast Server ................................................................234
9.2.1 The Broadcast Client .................................................................235
9.2.2 The Broadcast Server .................................................................237
9.3 Example: Battleships! ............................................................................239
Summary .........................................................................................................248
10 Web Workers .............................................................................................249
10.1 Introduction to Web Workers...............................................................249
10.2 Search for Leap Years ............................................................................251
10.3 Calculate Altitude Profiles with Canvas ..............................................253
10.3.1 Important Code Fragments ....................................................255
Summary .........................................................................................................259
11 Microdata ...................................................................................................261
11.1 The Syntax of Microdata .......................................................................263
11.1.1 The Attributes “itemscope” and ”itemprop” ........................263
11.1.2 The “itemtype” Attribute ........................................................266
11.1.3 The “itemid” Attribute.............................................................268
11.1.4 The “itemref” Attribute ...........................................................268
11.2 The Microdata DOM API ......................................................................269
Summary .........................................................................................................271
www.it-ebooks.info