PacktLib: HTML5 Web Application Development By Example

HTML5 Web Application Development By Example Beginner's guide

Credits

About the Author

About the Reviewer

www.PacktPub.com

Preface

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

Creating our first application

Time for action – creating a tasklist

Time for action – removing a task from the list

Time for action – moving tasks within the list

HTML templates

Time for action – implementing a template

Time for action – editing a task in the list

Saving the state of the application

Time for action – creating a localStorage wrapper

Time for action – storing the tasklist

Time for action – loading the tasklist

Summary

Let's Get Stylish

CSS3 overview

Rounded corners

Shadows

Time for action – styles in action

Backgrounds

Time for action – adding a gradient and button images

Transitions

Transforms

Time for action – effects in action

Dynamic stylesheets

Time for action – adding a theme selector

Filling the window

Time for action – expanding the application

Summary

The Devil is in the Details

HTML5 input types

Task details

Time for action – adding task details

Time for action – hiding task details

Custom data attributes

Data binding with custom attributes

Time for action – building a data model

Time for action – implementing the bindings

Time for action – loading the task list

Queuing up changes

Time for action – delaying the saves

Summary

A Blank Canvas

HTML5 canvas

Getting a context

Canvas basics

Canvas pad

Time for action – creating a canvas pad

Time for action – showing the coordinates

Drawing lines

Time for action – using the mouse to draw

Changing context properties

Time for action – adding context properties

Creating a toolbar

Time for action – creating a toolbar

Time for action – implementing a reusable toolbar

Adding a toolbar

Time for action – adding the toolbar object

Time for action – initializing menu items

Adding drawing actions

Time for action – creating drawing actions

Time for action – saving and restoring

Adding drawing tools

Time for action – adding a line tool

Time for action – adding a rectangle tool

Time for action – adding a circle tool

Summary

Not So Blank Canvas

Drawing text

Time for action – adding a text tool

Transformations

Time for action – adding an Ellipse tool

Time for action – exporting an image

Handling touch events

Time for action – adding touch event handlers

Photo Pad

Time for action – creating Photo Pad

The File API

Time for action – loading an image file

Adding effects

Time for action – the imageEffects object

Time for action – black and white

Time for action – sepia

Image distortion

Time for action – making waves

Summary

Piano Man

HTML5 audio overview

Loading audio files

Time for action – creating an AudioManager object

HTML5 piano application

Time for action – creating a virtual piano

Time for action – loading the notes

Time for action – playing the notes

Keyboard events

Time for action – adding keyboard events

Volume and sustain controls

Time for action – adding a sustain control

Time for action – adding a volume control

Audio tools

Summary

Piano Hero

Creating Piano Hero

Time for action – creating the splash panel

Time for action – creating the game panel

Time for action – creating the controller

Creating an audio sequencer

Time for action – creating AudioSequencer

Playing a song

Time for action – adding the audio sequencer

Creating animated notes

Time for action – adding notes

Time for action – animating the notes

Handling user input

Time for action – checking the notes

Ending the game

Time for action – creating the results panel

Summary

A Change in the Weather

Introduction to Ajax

Time for action – creating a weather widget

Time for action – getting XML data

Time for action – getting JSON data

HTML5 Geolocation API

Time for action – getting geolocation data

Using web services

Time for action – calling the weather service

Summary

Web Workers Unite

Web workers

Time for action – using a web worker

The Mandelbrot set

Time for action – implementing the algorithm

Creating a Mandelbrot application

Time for action – creating a Mandelbrot application

Time for action – Mandelbrot using a web worker

Debugging web workers

Summary

Releasing an App into the Wild

Combining and compressing JavaScript

Time for action – creating a release script

HTML5 Application Cache

Time for action – creating a cache manifest

Summary

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Index