HTML5 Mobile Web Development

HTML5 Mobile Web Development

by
Released September 2010
Publisher(s): O'Reilly Media, Inc.
ISBN: 0636920015109

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

Video description

Ready to create mobile web applications with the new features available in HTML5? In this 10-session video course, you’ll learn how to style apps to respond to a mobile device’s vertical and horizontal orientation, take advantage of global positioning, create basic animations, make your app available to users offline, and much more.

Presented by creativeLIVE in partnership with O’Reilly, each session offers easy-to-follow, hands-on lessons. You’ll learn how to combine HTML5 elements with JavaScript and CSS3 to build mobile web apps for Twitter, movie trailers, and an address book. This video package is ideal for web developers interested in mobile development, mobile web developers ready to update their skills with HTML5, and business developers and project managers looking to understand mobile technologies.

  • Discover what’s new in HTML5, CSS3, and JavaScript for mobile development
  • Build your own Twitter App with these technologies
  • Create apps that detect the orientation of mobile devices
  • Use geolocation and maps in a location-based app
  • Enable mobile users to use your app offline
  • Use HTML5 web forms to create an address book app
  • Create drawings and animation with JavaScript and HTML5’s canvas element
  • Use HTML5’s audio and video elements to build a movie trailer app

You’ll get access to all ten sessions, including slide presentations and examples. Each session was presented live during ten consecutive weeks in October, November, and December 2010, and you can now download all the videos and example files, which include presentation slides, tip sheets, code and sample eBook chapters.

Publisher resources

Download Example Code

Table of contents

  1. Meet HTML5
    1. Example files for Week 1
    2. Meet HTML5 and Apps for this Course
    3. Requirements and Installing the Simulators
  2. Create a Twitter App
    1. Example files for Week 2
    2. New HTML5 Elements
    3. Viewport and CSS Reset
    4. Size your app for mobile with CSS
    5. Add gradients
    6. Create navigation icons
    7. Style a list
    8. Make your page a web app
  3. Make Ajax Calls
    1. Example files for Week 3
    2. Make Ajax Calls
    3. Get Tweets as JSON
    4. CSS3 Transitions
    5. Web Fonts
    6. Review and Final QA
  4. Add Geolocation, Detect Orientation and Use CSS3 Media Queries
    1. Example files for Week 4
    2. CSS3 Media Queries
    3. Detect Orientation with JavaScript
    4. Geolocation
    5. Review and QA
  5. Use HTML5 Databases for Offline Storage
    1. Example files for Week 5
    2. Use HTML5 Databases for Offline Storage
    3. Cache the Tweets
    4. Cache Manifest
    5. Detect Online Status
    6. Review
    7. Next Week Preview
    8. Using Tweetstr while offline on the iPad
  6. Create an Address Book App with Forms
    1. Example files for Week 6
    2. Create a Web SQL Database for our Address Book
    3. New Input Types
    4. CSS3 Animations
    5. Review and Final QA
  7. Build a Movie Trailer app with Audio and Video
    1. Example files for Week 7
    2. Build a Movie Trailer App with Audio and Video
    3. Custom Audio Player
    4. Playback Progress Bar
    5. Changing the Audio
    6. Review
  8. Draw Using JavaScript and Canvas
    1. Example files for Week 8
    2. Draw using JavaScript and Canvas
    3. Add Drawings to your Canvas
    4. The Drawing System and Paths
    5. Create Arcs and Bezier Curves
    6. Review
  9. Animate Your Drawings with Canvas
    1. Example files for Week 9
    2. Combine Images with Compositing
    3. Manipulate Images on the Canvas
    4. Scale and Rotate with Transforms
    5. Rotate an Image
    6. Create an Animation
    7. Review
  10. Combine the HTML5 Video Element with the Canvas
    1. Example files for Week 10
    2. Combine the HTML5 Video Element with Canvas
    3. Create an Etch-a-sketch with DeviceMotion APIs
    4. Review: What we learned about HTML5 on Mobile
    5. Learning HTML5: Where to go from here
    6. QA

Product information

  • Title: HTML5 Mobile Web Development
  • Author(s):
  • Release date: September 2010
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 0636920015109