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

HTML5 Mobile Web Development

HTML5 Mobile Web Development

by Jake Carter
Publisher: O'Reilly Media, Inc.
Release Date: September 2010
ISBN: 9781449397388
View table of contents
Start watching

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.

Table of Contents

  1. Meet HTML5
    1. Example files for Week 1 00:00:20
    2. Meet HTML5 and Apps for this Course 00:22:39
    3. Requirements and Installing the Simulators 00:33:57
  2. Create a Twitter App
    1. Example files for Week 2 00:00:20
    2. New HTML5 Elements 00:23:13
    3. Viewport and CSS Reset 00:13:28
    4. Size your app for mobile with CSS 00:10:11
    5. Add gradients 00:12:44
    6. Create navigation icons 00:11:57
    7. Style a list 00:08:09
    8. Make your page a web app 00:19:14
  3. Make Ajax Calls
    1. Example files for Week 3 00:00:20
    2. Make Ajax Calls 00:30:36
    3. Get Tweets as JSON 00:33:22
    4. CSS3 Transitions 00:25:15
    5. Web Fonts 00:13:14
    6. Review and Final Q&A 00:06:04
  4. Add Geolocation, Detect Orientation and Use CSS3 Media Queries
    1. Example files for Week 4 00:00:20
    2. CSS3 Media Queries 00:12:08
    3. Detect Orientation with JavaScript 00:17:47
    4. Geolocation 00:30:10
    5. Review and Q&A 00:06:20
  5. Use HTML5 Databases for Offline Storage
    1. Example files for Week 5 00:00:20
    2. Use HTML5 Databases for Offline Storage 00:19:05
    3. Cache the Tweets 00:18:16
    4. Cache Manifest 00:09:42
    5. Detect Online Status 00:27:03
    6. Review 00:08:50
    7. Next Week Preview 00:01:13
    8. Using Tweetstr while offline on the iPad 00:01:49
  6. Create an Address Book App with Forms
    1. Example files for Week 6 00:00:20
    2. Create a Web SQL Database for our Address Book 00:14:35
    3. New Input Types 00:24:06
    4. CSS3 Animations 00:16:55
    5. Review and Final Q&A 00:04:53
  7. Build a Movie Trailer app with Audio and Video
    1. Example files for Week 7 00:00:20
    2. Build a Movie Trailer App with Audio and Video 00:17:57
    3. Custom Audio Player 00:14:13
    4. Playback Progress Bar 00:12:22
    5. Changing the Audio 00:15:21
    6. Review 00:02:07
  8. Draw Using JavaScript and Canvas
    1. Example files for Week 8 00:00:20
    2. Draw using JavaScript and Canvas 00:16:41
    3. Add Drawings to your Canvas 00:28:14
    4. The Drawing System and Paths 00:12:48
    5. Create Arcs and Bezier Curves 00:20:44
    6. Review 00:07:19
  9. Animate Your Drawings with Canvas
    1. Example files for Week 9 00:00:20
    2. Combine Images with Compositing 00:14:22
    3. Manipulate Images on the Canvas 00:13:16
    4. Scale and Rotate with Transforms 00:13:43
    5. Rotate an Image 00:09:15
    6. Create an Animation 00:25:56
    7. Review 00:03:04
  10. Combine the HTML5 Video Element with the Canvas
    1. Example files for Week 10 00:00:20
    2. Combine the HTML5 Video Element with Canvas 00:20:30
    3. Create an Etch-a-sketch with DeviceMotion APIs 00:28:10
    4. Review: What we learned about HTML5 on Mobile 00:18:47
    5. Learning HTML5: Where to go from here 00:21:18
    6. Q&A 00:07:06