[Missing Manuals 01] • HTML5 · The Missing Manual by MacDonald, Matthew -- Read -- Imperial Library of Trantor

Index

HTML5: The Missing Manual

SPECIAL OFFER: Upgrade this ebook with O’Reilly A Note Regarding Supplemental Files The Missing Credits

About the Author About the Creative Team Acknowledgments The Missing Manual Series

Introduction

What You Need to Get Started

Writing HTML5 Viewing HTML5

When Will HTML5 Be Ready? About the Outline

Part One: Meet the New Language Part Two: Creating Modern Web Pages Part Three: Building Web Apps with Desktop Smarts

About the Online Resources

The Missing CD The Try-Out Site Registration Feedback Errata Newsletter

Safari® Books Online

1. Meet the New Language

1. Introducing HTML5

The Story of HTML5

XHTML 1.0: Getting Strict XHTML 2: The Unexpected Failure HTML5: Back From the Dead HTML: The Living Language

Three Key Principles of HTML5

1. Don’t Break the Web 2. Pave the Cowpaths 3. Be Practical

Your First Look at HTML5 Markup

The HTML5 Doctype Character Encoding The Language Adding a Style Sheet Adding JavaScript The Final Product

A Closer Look at HTML5 Syntax

The Loosened Rules HTML5 Validation The Return of XHTML

HTML5’s Element Family

Added Elements Removed Elements Adapted Elements

Bold and italic formatting

Tweaked Elements Standardized Elements

Using HTML5 Today

Evaluating Browser Support Browser Adoption Statistics Feature Detection with Modernizr Feature “Filling” with Polyfills

2. A New Way to Structure Pages

Introducing the Semantic Elements Retrofitting a Traditional HTML Page

Page Structure the Old Way Page Structure with HTML5 Subtitles with <hgroup> Adding a Figure with <figure> Adding a Sidebar with <aside>

Browser Compatibility for the Semantic Elements Designing a Site with the Semantic Elements

Deeper into Headers Navigation Links with <nav> Deeper into Footers Deeper into Sections

The HTML5 Outlining System

How to View an Outline Basic Outlines Sectioning Elements Solving an Outline Problem

3. Meaningful Markup

The Semantic Elements Revisited

Dates and Times with <time> JavaScript Calculations with <output> Highlighted Text with <mark>

Other Standards that Boost Semantics

ARIA (Accessible Rich Internet Applications) RDFa (Resource Description Framework) Microformats

Contact details with hCard Events with hCalendar

Microdata

Google Rich Snippets

Enhanced Search Results The Recipe Search Engine

2. Creating Modern Web Pages

4. Web Forms, Refined

Understanding Forms Revamping a Traditional HTML Form

Adding Hints with Placeholders Focus: Starting in the Right Spot

Validation: Stopping Errors

How HTML5 Validation Works Turning Validation Off Validation Styling Hooks Validating with Regular Expressions Custom Validation Browser Support for Validation

New Types of Input

Email Addresses URLs Search Boxes Telephone Numbers Numbers Sliders Dates and Times Colors

New Elements

Input Suggestions with <datalist> Progress Bars and Meters Toolbars and Menus with <command> and <menu>

An HTML Editor in a Web Page

Using contentEditable to Edit an Element Using designMode to Edit a Page

5. Audio and Video

Understanding Video Today Introducing HTML5 Audio and Video

Making Some Noise with <audio> Getting the Big Picture with <video>

Format Wars and Fallbacks

Meet the Formats Browser Support for Media Formats Multiple Formats: How to Please Every Browser The <source> Element The Flash Fallback

Controlling Your Player with JavaScript

Adding Sound Effects Creating a Custom Video Player JavaScript Media Players Captions and Accessibility

6. Basic Drawing with the Canvas

Getting Started with the Canvas

Straight Lines Paths and Shapes Curved Lines Transforms Transparency

Building a Basic Paint Program

Preparing to Draw Drawing on the Canvas Saving the Picture in the Canvas

Browser Compatibility for the Canvas

Polyfilling the Canvas The Canvas Fallback and Feature Detection

7. Deeper into the Canvas

Other Things You Can Draw on the Canvas

Drawing Images Slicing, Dicing, and Resizing an Image Drawing Text

Shadows and Fancy Fills

Adding Shadows Filling Shapes with Patterns Filling Shapes with Gradients Putting It Together: Drawing a Graph

Making Your Shapes Interactive

Keeping Track of What You’ve Drawn Hit Testing with Coordinates

Animating the Canvas

A Basic Animation Animating Multiple Objects

A Practical Example: the Maze Game

Setting Up the Maze Animating the Face Hit Testing with Pixel Colors

8. Boosting Styles with CSS3

Using CSS3 Today

Strategy 1: Use What You Can Strategy 2: Treat CSS3 Features as Enhancements Strategy 3: Add Fallbacks with Modernizr Browser-Specific Styles

Web Typography

Web Font Formats Using a Font Kit Using Google Web Fonts Using Your Own Fonts Putting Text in Multiple Columns

Adapting to Different Devices

Media Queries More Advanced Media Queries Replacing an Entire Style Sheet Recognizing Mobile Devices

Building Better Boxes

Transparency Rounded Corners Backgrounds Shadows Gradients

Creating Effects with Transitions

A Basic Color Transition More Transition Ideas Transforms

3. Building Web Apps with Desktop Smarts

9. Data Storage

Web Storage Basics

Storing Data A Practical Example: Storing the Last Position in a Game Browser Support for Web Storage

Deeper into Web Storage

Removing Items Finding All the Stored Items Storing Numbers and Dates Storing Objects Reacting to Storage Changes

Reading Files

Getting Hold of a File Browser Support for the File API Reading a Text File Replacing the Standard Upload Control Reading Multiple Files at Once Reading an Image File

10. Offline Applications

Caching Files with a Manifest

Creating a Manifest Using Your Manifest Putting Your Manifest on a Web Server Updating the Manifest File Browser Support for Offline Applications

Practical Caching Techniques

Accessing Uncached Files Adding Fallbacks Checking the Connection Pointing Out Updates with JavaScript

11. Communicating with the Web Server

Sending Messages to the Web Server

The XMLHttpRequest Object Asking the Web Server a Question

Creating the script Calling the web server

Getting New Content

Server-Sent Events

The Message Format Sending Messages with a Server Script Processing Messages in a Web Page Polling with Server-Side Events

Web Sockets

Assessing Web Sockets A Simple Web Socket Client Web Socket Examples on the Web

12. More Cool JavaScript Tricks

Geolocation

How Geolocation Works Finding a Visitor’s Coordinates Dealing with Errors Setting Geolocation Options Showing a Map Monitoring a Visitor’s Moves

Web Workers

A Time-Consuming Task Doing Work in the Background Handling Worker Errors Canceling a Background Task Passing More Complex Messages

History Management

The URL Problem The Traditional Solution: Hashbang URLs The HTML5 Solution: Session History Browser Compatibility for Session History

4. Appendixes

A. A Very Short Introduction to CSS

Adding Styles to a Web Page The Anatomy of a Style Sheet

CSS Properties Formatting the Right Elements with Classes Style Sheet Comments

Slightly More Advanced Style Sheets

Structuring a Page with <div> Elements Multiple Selectors Contextual Selectors id Selectors Pseudoclass Selectors Attribute Selectors

A Style Sheet Tour

B. A Very Short Introduction to JavaScript

How a Web Page Uses JavaScript

Embedding Script in Your Markup Using a Function Moving the Code to a Script File Responding to Events

A Few Language Essentials

Variables Null Values Variable Scope Variable Data Types Operations Conditional Logic Loops Arrays Functions that Receive and Return Data

Interacting with the Page

Manipulating an Element Connecting to an Event Dynamically Inline Events

Index About the Author Colophon SPECIAL OFFER: Upgrade this ebook with O’Reilly

← Prev
Back
Next →

← Prev
Back
Next →