- 1 Overview of the New Web Standard About the Authors xiii
- 1.1 How It All Started
- 1.2 Time Travel through Historic Events
- 1.3 In Medias Res
- 1.3.1 What Is New?
- 1.3.2 What Has Become Obsolete?
- 1.3.3 And What About XHTML?
- 1.4 Can I Start Using HTML5 Now?
- Summary
- 2 Structure and Semantics for Documents
- 2.1 Header with “header” and “hgroup”
- 2.2 Content with “article”
- 2.3 Footer with “footer” and “nav”
- 2.4 Sidebar with “aside” and “section”
- 2.5 The Outline Algorithm
- 2.6 Figures with “figure” and “figcaption”
- 2.7 Text-Level Semantics—More New Tags
- 2.7.1 The Elements “ruby,” “rt,” and “rp”
- 2.7.2 The “time” Element
- 2.7.3 The “mark” Element
- 2.7.4 The “wbr” Element
- 2.7.5 Elements with Marginal Changes
- Summary
- 3 Intelligent Forms
- 3.1 New Input Types
- 3.1.1 The Input Types “tel” and “search”
- 3.1.2 The Input Types “url” and “email” vi Contents
- “week”, “time”, and “datetime-local” 3.1.3 Date and Time with “datetime”, “date”, “month”,
- 3.1.4 The Input Types “number” and “range”
- 3.1.5 The Input Type “color”
- 3.1.6 The New Input Types in Action
- 3.2 Useful Attributes for Forms
- 3.2.1 Focusing with “autofocus”..........................................................
- 3.2.2 Placeholder Text with “placeholder”
- 3.2.3 Compulsory Fields with “required”
- 3.2.4 Even More Attributes for the “input” Element
- 3.3 New Elements
- 3.3.1 Displaying Measurements with “meter”
- 3.3.2 Displaying the Progress of a Task with “progress”
- 3.3.3 Lists of Options with “datalist”
- 3.3.4 Cryptographic Keys with “keygen”
- 3.3.5 Calculations with “output”
- 3.4 Client-Side Form Validation
- 3.4.1 The “invalid” Event
- 3.4.2 The “checkValidity” Function
- 3.4.3 Error Handling with “setCustomValidity()”
- 3.4.4 Summary of Validity Checks
- 3.4.5 Or Perhaps Better Not to Validate? “formnovalidate”
- 3.5 Example: A Support Form
- Summary
- 3.1 New Input Types
- 4 Video and Audio
- 4.1 A First Example
- 4.2 The “video” Element and Its Attributes
- 4.3 Video Codecs
- 4.3.1 Ogg: Theora and Vorbis...............................................................
- 4.3.2 MPEG-4: H.264 and AAC
- 4.3.3 WebM: VP8 and Vorbis
- 4.4 Tools for Video Conversion
- 4.4.1 FFmpeg
- 4.4.2 VLC
- 4.4.3 Firefogg
- 4.4.4 Miro Video Converter
- 4.5 Which Format for Which Browser? Contents vii
- 4.6 Interim Solutions for Older Browsers
- 4.6.1 mwEmbed
- 4.6.2 html5media
- 4.7 Video and Scripting—A Simple Video Player
- 4.7.1 Integrating the Video
- 4.7.2 Starting and Stopping the Video
- 4.7.3 Displaying and Setting the Playback Position
- 4.7.4 Fast Forward and Backward
- 4.7.5 Selecting Specific Scenes in the Film
- 4.7.6 Set Volume to High, Low, or Mute
- “HTMLMediaElement” Interface 4.7.8 Other Attributes and Methods of the
- 4.7.9 The Long List of Media Events
- 4.8 And What About Audio?
- Summary
- 5 Canvas
- 5.1 A First Example
- 5.2 Rectangles
- 5.3 Colors and Shadows
- 5.4 Gradients
- 5.5 Paths
- 5.5.1 Lines
- 5.5.2 Bézier Curves
- 5.5.3 Arcs..............................................................................................
- 5.5.4 Rectangles
- 5.5.5 Outlines, Fills, and Clipping Masks..........................................
- 5.6 Text
- 5.6.1 Fonts
- 5.6.2 Horizontal Anchor Point
- 5.6.3 Vertical Anchor Point
- 5.6.4 Drawing and Measuring Text
- 5.7 Embedding Images
- 5.8 Pixel Manipulation
- 5.8.1 Working with the “ImageData” Object
- “createImageData()”, and “putImageData()” 5.8.2 Color Manipulation with “getImageData()”,
- 5.8.1 Working with the “ImageData” Object
- 5.9 Compositing viii Contents
- 5.10 Patterns
- 5.11 Transformations
- 5.12 Base64 Encoding with “canvas.toDataURL()”
- 5.13 “save()” and “restore()”
- 5.14 Animations
- 5.14.1 Animation with Multicolored Spheres
- 5.14.2 Playing a Video with “drawImage()”
- 5.15 Anything Still Missing?
- 5.15.1 “isPointInPath(x, y)”
- 5.15.2 Accessibility in Canvas?
- 5.15.3 Security Aspects
- 5.15.4 Browser Support
- 5.15.5 Further Links
- Summary
- 6 SVG and MathML
- 6.1 MathML
- 6.2 SVG
- Summary
- 7 Geolocation
- 7.1 Introduction to Geolocation
- 7.1.1 About Geographical Data
- 7.1.2 Online Map Services
- 7.2 A First Experiment: Geolocation in the Browser
- 7.3 Technical Background of Determining Position
- 7.4 Display of Current Position on OpenStreetMap
- 7.5 Location Tracking with Google Maps
- 7.6 Example: Geonotes
- 7.6.1 Operation
- 7.6.2 Important Code Fragments
- 7.7 Browser Support
- Summary
- 7.1 Introduction to Geolocation
- 8 Web Storage and Offline Web Applications
- 8.1 Storage
- 8.1.1 The “Storage” Interface
- 8.1.2 “sessionStorage”
- 8.1.3 “localStorage” Contents ix
- 8.1.4 The “storage” Event
- 8.1.5 Debugging
- 8.2 Offline Web Applications
- 8.2.1 The Cache Manifest File
- 8.2.2 Offline Status and Events
- 8.2.3 Debugging
- 8.3 Browser Support
- 8.4 Example: Click to tick!
- 8.4.1 Using the Application: As a Player
- 8.4.2 Using the Application: As an Administrator
- 8.4.3 Important Code Fragments
- 8.4.4 Expansion Options
- Summary
- 8.1 Storage
- 9 WebSockets
- 9.1 The WebSocket Server
- 9.2 Example: A Broadcast Server
- 9.2.1 The Broadcast Client
- 9.2.2 The Broadcast Server
- 9.3 Example: Battleships!
- Summary
- 10 Web Workers
- 10.1 Introduction to Web Workers...............................................................
- 10.2 Search for Leap Years
- 10.3 Calculate Altitude Profiles with Canvas
- 10.3.1 Important Code Fragments
- Summary
- 11 Microdata
- 11.1 The Syntax of Microdata
- 11.1.1 The Attributes “itemscope” and ”itemprop”
- 11.1.2 The “itemtype” Attribute
- 11.1.3 The “itemid” Attribute.............................................................
- 11.1.4 The “itemref” Attribute
- 11.2 The Microdata DOM API
- Summary
- 11.1 The Syntax of Microdata
- 12 Finishing Touches: Some Global Attributes x Contents
- 12.1 News for the “class” Attribute
- 12.2 Defining Custom Attributes with “data-*”
- 12.3 The “hidden” Attribute
- 12.4 The “classList” Interface
- 12.5 Drag and Drop with the “draggable” Attribute
- 12.5.1 Drag and Drop in Combination with the “FileAPI”..............
- 12.6 The Attributes “contenteditable” and “spellcheck”
- Summary
- Afterword
- Index
coco
(coco)
#1