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.

HTML5 Web Application Development By Example : Beginner's guide

Starting
J.M. Gustafson

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.
$26.99
$44.99
RRP $26.99
RRP $44.99
eBook
Print + eBook
$12.99 p/month

Get Access

Get Unlimited Access to every Packt eBook and Video course

Enjoy full and instant access to over 3000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

+ Collection
Free Sample

Book Details

ISBN 139781849695947
Paperback276 pages

About This Book

  • 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.

Who This Book Is For

If you have no experience but want to learn how to create applications in HTML5, this book is the only help you'll need. Using practical examples, HTML5 Web Application Development by Example will develop your knowledge and confidence in application development.

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

In Detail

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.

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