Book Image

HTML5 Web Application Development By Example : Beginner's guide

By : Jody Gustafson
Book Image

HTML5 Web Application Development By Example : Beginner's guide

By: Jody Gustafson

Overview of this book

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.

Related Content you might be interested in

Current Title:

Small book image
HTML5 Web Application Development By Example : Beginner's guide
Jody Gustafson
Jun, 2013 | 276 pages
No titles found
Table of Contents (18 chapters)
HTML5 Web Application Development By Example Beginner's guide
HTML5 Web Application Development By Example Beginner's guide
Credits
Credits
About the Author
About the Author
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
The Task at Hand
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
2
Let's Get Stylish
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
3
The Devil is in the Details
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
4
A Blank Canvas
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
5
Not So Blank Canvas
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
6
Piano Man
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
7
Piano Hero
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
8
A Change in the Weather
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
9
Web Workers Unite
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
10
Releasing an App into the Wild
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
Chapter 1, The Task at Hand
Chapter 2, Let's Get Stylish
Chapter 3, The Devil is in the details
Chapter 4, A Blank Canvas
Chapter 5, Not So Blank Canvas
Chapter 6, Piano Man
Chapter 7, Piano Hero
Chapter 8, A Change in the Weather
Chapter 9, Web Workers Unite
Chapter 10, Releasing an App into the Wild
Index
Index

Chapter 3. The Devil is in the Details

"Men who wish to know about the world must learn about it in its particular details."

—Heraclitus

This chapter is all about the new HTML5 input types and how to interact with them using JavaScript. In Chapter 1, The Task at Hand, we created a task list application and in Chapter 2, Let's Get Stylish, we styled it using new CSS3 styles. In this chapter we continue to improve it by adding a task details section using the new HTML5 input types. Then we will use custom data attributes to automatically bind values in the view to the data model in our application. We will also add some jQuery animations to make UI transitions smoother.

We will learn the following topics in this chapter:

  • The new HTML5 input types and what benefits they provide

  • Custom data attributes and their uses

  • How to bind a data model to input elements using custom data attributes...

Previous Section
End of Section 1
Next Section