[Missing Manuals 01] • Html5 by MacDonald, Matthew -- Read -- Imperial Library of Trantor

Index

HTML5: The Missing Manual The Missing Credits

About the Author About the Creative Team Acknowledgements 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: Video, Graphics, and Glitz Part Three: Building Web Apps

About the Online Resources

The Missing CD The Try-Out Site Registration Feedback Errata

Safari® Books Online

1. Modern Markup

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 How to Find the Browser Requirements for Any HTML5 Feature

How to Find Out Which Browsers Are on the Web Feature Detection with Modernizr Feature “Filling” with Polyfills

2. Structuring Pages with Semantic Elements

Introducing the Semantic Elements Retrofitting a Traditional HTML Page

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

Browser Compatibility for the Semantic Elements

Styling the Semantic Elements Using the HTML5 Shiv Modernizr: An All-in-One Fix

Designing a Site with the Semantic Elements

Deeper into Headers Navigation Links with <nav> Deeper into Sections Deeper into Footers Identifying the Main Content with <main>

The HTML5 Outlining System

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

3. Writing More 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 Microdata

A Practical Example: Retrofitting an “About Me” Page

Extracting Semantic Data in Your Browser

How Search Engines Use Metadata

Google Rich Snippets Enhanced Search Results The Recipe Search Engine

4. Building Better Web Forms

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 Web Forms and Validation

Testing for Support with Modernizr Polyfilling with HTML5Forms

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

2. Video, Graphics, and Glitz

5. Audio and Video

The Evolution of Web Video Introducing HTML5 Audio and Video

Making Some Noise with <audio> Preloading Media Files Automatic Playback Looping Playback Getting the Big Picture with <video>

Understanding the HTML5 Media Formats

Meet the Media Formats Browser Support for Media Formats

Fallbacks: How to Please Every Browser

Supporting Multiple Formats Adding a Flash Fallback

Controlling Your Player with JavaScript

Adding Sound Effects Creating a Custom Video Player JavaScript Media Players

Video Captions

Timed Text Tracks and WebVTT Adding Captions with <track> Browser Support for Video Captions

6. Fancy Fonts and Effects 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 with Vendor Prefixes

Building Better Boxes

Transparency Rounded Corners Backgrounds Shadows Gradients

Linear Gradients Radial Gradients Repeating Gradients

Creating Effects with Transitions

A Basic Color Transition More Transition Ideas Triggering Transitions with JavaScript Transforms Transitions That Use Transforms

Web Fonts

Web Font Formats Finding a Font for Your Website Getting a Free Font from Font Squirrel Preparing a Font for the Web Even Easier Web Fonts with Google Putting Text in Multiple Columns

7. Responsive Web Design with CSS3

Responsive Design: The Basics

Fluid Layout Fluid Images Fluid Typography Understanding Viewports: Making Your Layout Work on a Smartphone

Adapting Your Layout with Media Queries

The Anatomy of a Media Query Creating a Simple Media Query Building a Mobile-Friendly Layout More Advanced Media Query Conditions Replacing an Entire Style Sheet Recognizing Specific Mobile Devices

8. Basic Drawing with the Canvas

Getting Started with the Canvas

Straight Lines Paths and Shapes Curved Lines Transforms Transparency Composite Operations

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 with ExplorerCanvas Polyfilling the Canvas with FlashCanvas The Canvas Fallback and Feature Detection

9. Advanced Canvas: Interactivity and Animation

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

3. Building Web Apps

10. Storing Your Data

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 Reading a Text File with <input> Replacing the Standard Upload Control Reading Multiple Files at Once Reading an Image File with Drag-and-Drop Browser Support for the File API

IndexedDB: A Database Engine in a Browser

The Data Object Creating and Connecting to a Database Storing Records in the Database Querying All the Records in a Table Querying a Single Record Deleting a Record Browser Support for IndexedDB

11. Running Offline

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

12. 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

The Web Socket Server A Simple Web Socket Client Web Socket Examples on the Web

13. Geolocation, Web Workers, and History Management

Geolocation

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

Web Workers

A Time-Consuming Task Doing Work in the Background Handling Worker Errors Canceling a Background Task Passing More Complex Messages Browser Compatibility for Web Workers

History Management

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

4. Appendixes

A. Essential 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 Pseudo-Class Selectors Attribute Selectors

A Style Sheet Tour

B. JavaScript: The Brains of Your Page

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 Objects Object Literals

Interacting with the Page

Manipulating an Element Connecting to an Event Dynamically Inline Events

Index About the Author Copyright

← Prev
Back
Next →

← Prev
Back
Next →