Log In
Or create an account ->
Imperial Library
Home
About
News
Upload
Forum
Help
Login/SignUp
Index
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
← Prev
Back
Next →
← Prev
Back
Next →