HTML5 Web Application Development By Example : Beginner's guide

More Information
Learn
  • Build your first HTML5 application in next to no time
  • Develop fun applications and games
  • Learn about UI and UX using the new features in CSS3
  • Create dynamic, responsive applications that will work on any device
  • Use the top features in HTML5 to create fun, useful applications
About

HTML5's new features have made it a real application development platform with widespread adoption throughout the industry for this purpose. Being able to create one application that can run on virtually any device from phone to desktop has made it the first choice among developers. Although JavaScript has been around for a while now, it wasn’t until the introduction of HTML5 that we have been able to create dynamic, feature-rich applications rivaling those written for the desktop.

HTML5 Web Application Development By Example will give you the knowledge you need to build rich, interactive web applications from the ground up, incorporating the most popular HTML5 and CSS3 features available right now. This book is full of tips, tools, and example applications that will get you started writing your own applications today.

HTML5 Web Application Development By Example shows you how to write web applications using the most popular HTML5 and CSS3 features. This book is a practical, hands-on guide with numerous real-world and relevant examples.

You will learn how to use local storage to save an application’s state and incorporate CSS3 to make it look great. You will also learn how to use custom data attributes to implement data binding. We’ll use the new Canvas API to create a drawing application, then use the Audio API to create a virtual piano, before turning it all into a game.

The time to start using HTML5 is now. And HTML5 Web Application Development by Example will give you the tips and know-how to get started.

Features
  • Packed with example applications that show you how to create rich, interactive applications and games.
  • Shows you how to use the most popular and widely supported features of HTML5.
  • Full of tips and tricks for writing more efficient and robust code while avoiding some of the pitfalls inherent to JavaScript.
  • Learn how to create professional looking applications using new CSS3 styles and responsive design.
  • Learn how to compress, package, and distribute your web applications on the Internet for fun or for profit.
Page Count 276
Course Length 8 hours 16 minutes
ISBN 9781849695947
Date Of Publication 24 Jun 2013
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
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
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
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
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
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
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
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
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
Combining and compressing JavaScript
Time for action – creating a release script
HTML5 Application Cache
Time for action – creating a cache manifest
Summary

Authors

J.M. Gustafson

J.M. Gustafson is a professional software engineer who started programming on a VIC-20 in the 80s and hasn't stopped since. He has a degree in Computer Science and has been working with web technologies writing enterprise applications for nearly his entire career. Currently, he spends most of his time writing web apps and services in C# and JavaScript. In his free time he enjoys spending time with his family, playing music, writing, and the outdoors. When he's not doing any of that, you can find him doing (what else?) more programming. These days he is particularly interested in writing games using HTML5 and JavaScript, many of which you can find on his website at WorldTreeSoftware.com.