O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating Mobile Apps With HTML5

Video Description

In this Creating Mobile Apps with HTML5 training course, expert author Jason Gonzalez takes you through the process of creating a mobile app using HTML5 from start to finish. This course is designed for users that already have a fundamental understanding of HTML and CSS.
You will start with an introduction to the project app you'll be creating, learning how to make a wireframe and covering HTML5 features. You will then learn how to construct a skeleton app, including making the list, adding new items and details, and cleaning up the layout. Jason will show you how to use LocalStorage, set up Handlebars to make templates, and work in the detail view. This video tutorial also covers how to add and edit items, use the camera, detect network status, and add Geolocation. Finally, you will learn how to implement speech recognition into your app.
Once you have completed this computer based training course, you will be fully capable of creating your own mobile app with HTML5. Working files are included, allowing you to follow along with the author throughout the lessons.

Table of Contents

  1. Getting Started
    1. What You Will Learn 00:00:42
    2. About The Author 00:00:41
    3. What You Need To Know 00:02:14
    4. Native Apps Versus HTML5 Apps 00:04:33
    5. Required Software And A Primer On Using Terminal And Command Prompt 00:07:58
    6. Installing Node.js Mac OSX 00:05:41
    7. Installing Node.js Windows 00:03:58
    8. Super Quick Setup With Yeoman And Bower 00:07:06
    9. How To Access Your Working Files 00:02:45
  2. Introduction To The Project App
    1. Making A Wireframe 00:01:24
    2. HTML5 Features 00:01:46
  3. Constructing A Skeleton App
    1. How To Work With The Code Samples 00:03:09
    2. Making The List 00:06:56
    3. Adding New Items - Part 1 00:04:44
    4. Adding New Items - Part 2 00:07:38
    5. Adding Details 00:03:08
    6. Toggle Views - Part 1 00:06:13
    7. Toggle Views - Part 2 00:05:03
    8. Cleaning Up The Layout 00:05:09
  4. Using LocalStorage
    1. Introduction To LocalStorage And Testing For Support With Modernizr 00:06:33
    2. Making Data Fixtures In The Browser Console 00:05:08
    3. Getting Data In And Out Of LocalStorage 00:02:52
  5. Using Handlebars To Make Templates
    1. Setting Up Handlebars 00:04:08
    2. Simple Implementation 00:03:47
    3. Rendering Data From Localstorage With Handlebars 00:02:27
  6. The Detail View
    1. Switching To The Detail View 00:05:23
    2. Getting The Right Data To The Detail View 00:04:05
    3. Navigating Back To The List View 00:03:13
  7. The Add Item And Edit Views
    1. Adding Items 00:06:53
    2. Editing Items 00:07:13
    3. No Entry Cases 00:01:57
  8. Camera
    1. Testing For Support With Modernizr 00:03:25
    2. Accessing The Camera 00:06:27
    3. Getting And Saving The Image 00:04:04
    4. Viewing And Editing An Image 00:03:06
  9. Detecting Network Status
    1. Introduction To Network Status 00:01:41
    2. Detecting And Displaying Network Status 00:03:14
  10. Geolocation
    1. Introduction To Geolocation 00:02:35
    2. Adding Geolocation To A New Entry 00:04:10
    3. Saving The Geolocation Data 00:02:44
    4. Displaying Geolocation In Other Views 00:01:25
  11. Speech Recognition
    1. A Basic Implementation Of Speech Recognition 00:04:52
  12. Further Resources
    1. Other HTML5 APIs And Resources 00:01:40
  13. Conclusion
    1. Wrap Up 00:00:24