HTML5 Web Application Development By Example Beginner's guide

HTML5 Web Application Development By Example Beginner's guide

by J.M. Gustafson
Released June 2013
Publisher(s): Packt Publishing
ISBN: 9781849695947

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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.

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

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.

Table of contents

  1. HTML5 Web Application Development By Example Beginner's guide
    1. Table of Contents
    2. HTML5 Web Application Development By Example Beginner's guide
    3. Credits
    4. About the Author
    5. About the Reviewer
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Time for action – heading
        1. What just happened?
        2. Pop quiz – heading
        3. Have a go hero – heading
      6. Reader feedback
      7. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. The Task at Hand
      1. The components of an HTML5 application
      2. Time for action – creating the HTML file
      3. Time for action – creating the CSS file
      4. Time for action – creating the JavaScript file
        1. What just happened?
        2. The dollar sign identifier
      5. Creating our first application
      6. Time for action – creating a tasklist
        1. What just happened?
      7. Time for action – removing a task from the list
      8. Time for action – moving tasks within the list
        1. What just happened?
      9. HTML templates
      10. Time for action – implementing a template
        1. What just happened?
      11. Time for action – editing a task in the list
        1. What just happened?
      12. Saving the state of the application
      13. Time for action – creating a localStorage wrapper
        1. What just happened?
      14. Time for action – storing the tasklist
      15. Time for action – loading the tasklist
        1. What just happened?
        2. Have a go hero
        3. Pop quiz
      16. Summary
    9. 2. Let's Get Stylish
      1. CSS3 overview
        1. CSS3 colors
      2. Rounded corners
      3. Shadows
        1. Box shadows
        2. Text shadows
      4. Time for action – styles in action
        1. What just happened?
      5. Backgrounds
        1. Linear gradients
        2. Radial gradients
        3. Background images
        4. CSS sprites
      6. Time for action – adding a gradient and button images
        1. What just happened?
      7. Transitions
      8. Transforms
      9. Time for action – effects in action
        1. What just happened?
      10. Dynamic stylesheets
      11. Time for action – adding a theme selector
        1. What just happened?
      12. Filling the window
      13. Time for action – expanding the application
        1. What just happened?
        2. Have a go hero
        3. Pop quiz
      14. Summary
    10. 3. The Devil is in the Details
      1. HTML5 input types
        1. Color
        2. Date
        3. Email
        4. Number
        5. Range
        6. Time
        7. URL
        8. Datalist
        9. Autofocus
      2. Task details
      3. Time for action – adding task details
        1. What just happened?
      4. Time for action – hiding task details
        1. What just happened?
      5. Custom data attributes
      6. Data binding with custom attributes
      7. Time for action – building a data model
      8. Time for action – implementing the bindings
        1. What just happened?
      9. Time for action – loading the task list
      10. Queuing up changes
      11. Time for action – delaying the saves
        1. What just happened?
        2. Have a go hero
        3. Pop quiz
      12. Summary
    11. 4. A Blank Canvas
      1. HTML5 canvas
      2. Getting a context
      3. Canvas basics
        1. Clearing the canvas
        2. Context properties
      4. Canvas pad
      5. Time for action – creating a canvas pad
        1. What just happened?
      6. Time for action – showing the coordinates
        1. What just happened?
      7. Drawing lines
        1. Paths and strokes
      8. Time for action – using the mouse to draw
        1. What just happened?
      9. Changing context properties
      10. Time for action – adding context properties
      11. Creating a toolbar
      12. Time for action – creating a toolbar
        1. What just happened?
      13. Time for action – implementing a reusable toolbar
        1. What just happened?
      14. Adding a toolbar
      15. Time for action – adding the toolbar object
        1. What just happened?
      16. Time for action – initializing menu items
        1. What just happened?
      17. Adding drawing actions
      18. Time for action – creating drawing actions
        1. What just happened?
      19. Time for action – saving and restoring
        1. What just happened?
      20. Adding drawing tools
      21. Time for action – adding a line tool
        1. What just happened?
        2. Drawing rectangles
      22. Time for action – adding a rectangle tool
        1. What just happened?
        2. Arcs and circles
      23. Time for action – adding a circle tool
        1. What just happened?
        2. Have a go hero
        3. Pop quiz
      24. Summary
    12. 5. Not So Blank Canvas
      1. Drawing text
      2. Time for action – adding a text tool
        1. What just happened?
        2. Have a go hero
      3. Transformations
      4. Time for action – adding an Ellipse tool
        1. What just happened?
      5. Time for action – exporting an image
        1. What just happened?
      6. Handling touch events
      7. Time for action – adding touch event handlers
        1. What just happened?
      8. Photo Pad
      9. Time for action – creating Photo Pad
        1. What just happened?
      10. The File API
      11. Time for action – loading an image file
        1. What just happened?
      12. Adding effects
      13. Time for action – the imageEffects object
        1. What just happened?
      14. Time for action – black and white
        1. What just happened?
      15. Time for action – sepia
        1. What just happened?
        2. Have a go hero
      16. Image distortion
      17. Time for action – making waves
        1. What just happened?
        2. Have a go hero
        3. Pop quiz
      18. Summary
    13. 6. Piano Man
      1. HTML5 audio overview
        1. The HTML5 <audio> element
        2. The HTML5 Audio API
      2. Loading audio files
      3. Time for action – creating an AudioManager object
        1. What just happened?
      4. HTML5 piano application
      5. Time for action – creating a virtual piano
        1. What just happened?
      6. Time for action – loading the notes
        1. What just happened?
      7. Time for action – playing the notes
        1. What just happened?
      8. Keyboard events
      9. Time for action – adding keyboard events
        1. What just happened?
      10. Volume and sustain controls
      11. Time for action – adding a sustain control
        1. What just happened?
      12. Time for action – adding a volume control
        1. What just happened?
        2. Have a go hero
        3. Pop quiz
      13. Audio tools
        1. FreeSound.org
        2. Audacity
      14. Summary
    14. 7. Piano Hero
      1. Creating Piano Hero
      2. Time for action – creating the splash panel
        1. What just happened?
      3. Time for action – creating the game panel
        1. What just happened?
      4. Time for action – creating the controller
        1. What just happened?
      5. Creating an audio sequencer
      6. Time for action – creating AudioSequencer
        1. What just happened?
      7. Playing a song
      8. Time for action – adding the audio sequencer
        1. What just happened?
      9. Creating animated notes
      10. Time for action – adding notes
        1. What just happened?
      11. Time for action – animating the notes
        1. What just happened?
        2. Have a go hero
      12. Handling user input
      13. Time for action – checking the notes
        1. What just happened?
      14. Ending the game
      15. Time for action – creating the results panel
        1. What just happened?
        2. Have a go hero
        3. Pop quiz
      16. Summary
    15. 8. A Change in the Weather
      1. Introduction to Ajax
        1. Making Ajax requests
      2. Time for action – creating a weather widget
        1. What just happened?
      3. Time for action – getting XML data
        1. What just happened?
      4. Time for action – getting JSON data
        1. What just happened?
      5. HTML5 Geolocation API
      6. Time for action – getting geolocation data
        1. What just happened?
        2. Have a go hero
      7. Using web services
        1. Weather Underground
        2. Cross-site scripting and JSONP
      8. Time for action – calling the weather service
        1. What just happened?
        2. Pop quiz
      9. Summary
    16. 9. Web Workers Unite
      1. Web workers
        1. Spawning a web worker
        2. Implementing a web worker
      2. Time for action – using a web worker
        1. What just happened?
      3. The Mandelbrot set
      4. Time for action – implementing the algorithm
        1. What just happened?
      5. Creating a Mandelbrot application
      6. Time for action – creating a Mandelbrot application
        1. What just happened?
      7. Time for action – Mandelbrot using a web worker
        1. What just happened?
        2. Have a go hero
      8. Debugging web workers
        1. Pop quiz
      9. Summary
    17. 10. Releasing an App into the Wild
      1. Combining and compressing JavaScript
      2. Time for action – creating a release script
        1. What just happened?
        2. Have a go hero
      3. HTML5 Application Cache
      4. Time for action – creating a cache manifest
        1. What just happened?
        2. Pop quiz
      5. Summary
    18. A. Pop Quiz Answers
      1. Chapter 1, The Task at Hand
        1. Pop quiz
      2. Chapter 2, Let's Get Stylish
        1. Pop quiz
      3. Chapter 3, The Devil is in the details
        1. Pop quiz
      4. Chapter 4, A Blank Canvas
        1. Pop quiz
      5. Chapter 5, Not So Blank Canvas
        1. Pop quiz
      6. Chapter 6, Piano Man
        1. Pop quiz
      7. Chapter 7, Piano Hero
        1. Pop quiz
      8. Chapter 8, A Change in the Weather
        1. Pop quiz
      9. Chapter 9, Web Workers Unite
        1. Pop quiz
      10. Chapter 10, Releasing an App into the Wild
        1. Pop quiz
    19. Index

Product information

  • Title: HTML5 Web Application Development By Example Beginner's guide
  • Author(s): J.M. Gustafson
  • Release date: June 2013
  • Publisher(s): Packt Publishing
  • ISBN: 9781849695947