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

Video Description

Create mobile web applications using the latest HTML5 technologies. In this 10-session video course, you’ll learn how to style your apps to respond to a device’s vertical and horizontal orientation, take advantage of global positioning, embed audio and video, create basic animations, and much more. During this course, you#8217;ll combine HTML5 elements with JavaScript and CSS3 to create apps for Twitter, movie trailers, and an address book.

Table of Contents

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