HTML5 Web Application Development By Example Beginner's guide电子书

HTML5 Web Application Development By Example Beginner's guide

Table of Contents

HTML5 Web Application Development By Example Beginner's guide

Credits

About the Author

About the Reviewer

www.PacktPub.com

Support files, eBooks, discount offers and more

Why Subscribe?

Free Access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Time for action – heading

What just happened?

Pop quiz – heading

Have a go hero – heading

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. The Task at Hand

The components of an HTML5 application

Time for action – creating the HTML file

Time for action – creating the CSS file

Time for action – creating the JavaScript file

What just happened?

The dollar sign identifier

Creating our first application

Time for action – creating a tasklist

What just happened?

Time for action – removing a task from the list

Time for action – moving tasks within the list

What just happened?

HTML templates

Time for action – implementing a template

What just happened?

Time for action – editing a task in the list

What just happened?

Saving the state of the application

Time for action – creating a localStorage wrapper

What just happened?

Time for action – storing the tasklist

Time for action – loading the tasklist

What just happened?

Have a go hero

Pop quiz

Summary

2. Let's Get Stylish

CSS3 overview

CSS3 colors

Rounded corners

Shadows

Box shadows

Text shadows

Time for action – styles in action

What just happened?

Backgrounds

Linear gradients

Radial gradients

Background images

CSS sprites

Time for action – adding a gradient and button images

What just happened?

Transitions

Transforms

Time for action – effects in action

What just happened?

Dynamic stylesheets

Time for action – adding a theme selector

What just happened?

Filling the window

Time for action – expanding the application

What just happened?

Have a go hero

Pop quiz

Summary

3. The Devil is in the Details

HTML5 input types

Color

Date

Email

Number

Range

Time

URL

Datalist

Autofocus

Task details

Time for action – adding task details

What just happened?

Time for action – hiding task details

What just happened?

Custom data attributes

Data binding with custom attributes

Time for action – building a data model

Time for action – implementing the bindings

What just happened?

Time for action – loading the task list

Queuing up changes

Time for action – delaying the saves

What just happened?

Have a go hero

Pop quiz

Summary

4. A Blank Canvas

HTML5 canvas

Getting a context

Canvas basics

Clearing the canvas

Context properties

Canvas pad

Time for action – creating a canvas pad

What just happened?

Time for action – showing the coordinates

What just happened?

Drawing lines

Paths and strokes

Time for action – using the mouse to draw

What just happened?

Changing context properties

Time for action – adding context properties

Creating a toolbar

Time for action – creating a toolbar

What just happened?

Time for action – implementing a reusable toolbar

What just happened?

Adding a toolbar

Time for action – adding the toolbar object

What just happened?

Time for action – initializing menu items

What just happened?

Adding drawing actions

Time for action – creating drawing actions

What just happened?

Time for action – saving and restoring

What just happened?

Adding drawing tools

Time for action – adding a line tool

What just happened?

Drawing rectangles

Time for action – adding a rectangle tool

What just happened?

Arcs and circles

Time for action – adding a circle tool

What just happened?

Have a go hero

Pop quiz

Summary

5. Not So Blank Canvas

Drawing text

Time for action – adding a text tool

What just happened?

Have a go hero

Transformations

Time for action – adding an Ellipse tool

What just happened?

Time for action – exporting an image

What just happened?

Handling touch events

Time for action – adding touch event handlers

What just happened?

Photo Pad

Time for action – creating Photo Pad

What just happened?

The File API

Time for action – loading an image file

What just happened?

Adding effects

Time for action – the imageEffects object

What just happened?

Time for action – black and white

What just happened?

Time for action – sepia

What just happened?

Have a go hero

Image distortion

Time for action – making waves

What just happened?

Have a go hero

Pop quiz

Summary

6. Piano Man

HTML5 audio overview

The HTML5 <audio> element

The HTML5 Audio API

Loading audio files

Time for action – creating an AudioManager object

What just happened?

HTML5 piano application

Time for action – creating a virtual piano

What just happened?

Time for action – loading the notes

What just happened?

Time for action – playing the notes

What just happened?

Keyboard events

Time for action – adding keyboard events

What just happened?

Volume and sustain controls

Time for action – adding a sustain control

What just happened?

Time for action – adding a volume control

What just happened?

Have a go hero

Pop quiz

Audio tools

FreeSound.org

Audacity

Summary

7. Piano Hero

Creating Piano Hero

Time for action – creating the splash panel

What just happened?

Time for action – creating the game panel

What just happened?

Time for action – creating the controller

What just happened?

Creating an audio sequencer

Time for action – creating AudioSequencer

What just happened?

Playing a song

Time for action – adding the audio sequencer

What just happened?

Creating animated notes

Time for action – adding notes

What just happened?

Time for action – animating the notes

What just happened?

Have a go hero

Handling user input

Time for action – checking the notes

What just happened?

Ending the game

Time for action – creating the results panel

What just happened?

Have a go hero

Pop quiz

Summary

8. A Change in the Weather

Introduction to Ajax

Making Ajax requests

Time for action – creating a weather widget

What just happened?

Time for action – getting XML data

What just happened?

Time for action – getting JSON data

What just happened?

HTML5 Geolocation API

Time for action – getting geolocation data

What just happened?

Have a go hero

Using web services

Weather Underground

Cross-site scripting and JSONP

Time for action – calling the weather service

What just happened?

Pop quiz

Summary

9. Web Workers Unite

Web workers

Spawning a web worker

Implementing a web worker

Time for action – using a web worker

What just happened?

The Mandelbrot set

Time for action – implementing the algorithm

What just happened?

Creating a Mandelbrot application

Time for action – creating a Mandelbrot application

What just happened?

Time for action – Mandelbrot using a web worker

What just happened?

Have a go hero

Debugging web workers

Pop quiz

Summary

10. Releasing an App into the Wild

Combining and compressing JavaScript

Time for action – creating a release script

What just happened?

Have a go hero

HTML5 Application Cache

Time for action – creating a cache manifest

What just happened?

Pop quiz

Summary

A. Pop Quiz Answers

Chapter 1, The Task at Hand

Pop quiz

Chapter 2, Let's Get Stylish

Pop quiz

Chapter 3, The Devil is in the details

Pop quiz

Chapter 4, A Blank Canvas

Pop quiz

Chapter 5, Not So Blank Canvas

Pop quiz

Chapter 6, Piano Man

Pop quiz

Chapter 7, Piano Hero

Pop quiz

Chapter 8, A Change in the Weather

Pop quiz

Chapter 9, Web Workers Unite

Pop quiz

Chapter 10, Releasing an App into the Wild

Pop quiz

Index