HTML5 Web Application Development By Example : Beginner's guide

Learn how to write rich, interactive web applications using HTML5 and CSS3 through real-world examples. In a world of proliferating platforms and devices, being able to create your own “go-anywhere” applications gives you a significant advantage.
Preview in Mapt

HTML5 Web Application Development By Example : Beginner's guide

J.M. Gustafson

1 customer reviews
Learn how to write rich, interactive web applications using HTML5 and CSS3 through real-world examples. In a world of proliferating platforms and devices, being able to create your own “go-anywhere” applications gives you a significant advantage.
Mapt Subscription
FREE
$29.99/m after trial
eBook
$18.90
RRP $26.99
Save 29%
Print + eBook
$44.99
RRP $44.99
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$18.90
$44.99
$29.99p/m after trial
RRP $26.99
RRP $44.99
Subscription
eBook
Print + eBook
Start 30 Day Trial

Frequently bought together


HTML5 Web Application Development By Example : Beginner's guide Book Cover
HTML5 Web Application Development By Example : Beginner's guide
$ 26.99
$ 18.90
HTML5 Games Development by Example: Beginner’s Guide Book Cover
HTML5 Games Development by Example: Beginner’s Guide
$ 26.99
$ 18.90
Buy 2 for $35.00
Save $18.98
Add to Cart
Subscribe and access every Packt eBook & Video.
 
  • 5,000+ eBooks & Videos
  • 50+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 

Book Details

ISBN 139781849695947
Paperback276 pages

Book Description

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.

Table of Contents

Chapter 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
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
Chapter 2: 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
Chapter 3: 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
Chapter 4: 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
Chapter 5: 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
Chapter 6: 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
Chapter 7: 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
Chapter 8: 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
Chapter 9: 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
Chapter 10: 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

What You Will 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

Authors

Table of Contents

Chapter 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
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
Chapter 2: 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
Chapter 3: 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
Chapter 4: 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
Chapter 5: 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
Chapter 6: 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
Chapter 7: 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
Chapter 8: 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
Chapter 9: 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
Chapter 10: 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

Book Details

ISBN 139781849695947
Paperback276 pages
Read More
From 1 reviews

Read More Reviews

Recommended for You

Responsive Web Design with HTML5 and CSS3 Book Cover
Responsive Web Design with HTML5 and CSS3
$ 23.99
$ 4.80
Mastering Web Application Development with AngularJS Book Cover
Mastering Web Application Development with AngularJS
$ 26.99
$ 5.40
Object-Oriented JavaScript - Second Edition Book Cover
Object-Oriented JavaScript - Second Edition
$ 29.99
$ 21.00
Learning jQuery - Fourth Edition Book Cover
Learning jQuery - Fourth Edition
$ 23.99
$ 4.80
HTML5 and CSS3 Responsive Web Design Cookbook Book Cover
HTML5 and CSS3 Responsive Web Design Cookbook
$ 26.99
$ 5.40
JavaScript and JSON Essentials Book Cover
JavaScript and JSON Essentials
$ 17.99
$ 12.60