HTML5 Mobile Web Development

Larger Cover

By Jake Carter

Publisher: O'Reilly Media

Released: September 2010

Run time: 13 hours 23 minutes

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.

Meet HTML5 Get up to speed on HTML5's important new features and learn about the mobile environments you'll be working with. This valuable overview will help you get everything installed so that you're set up for the rest of the course.
1. Example files for Week 1 (Free Preview) 0 minutes
2. Meet HTML5 and Apps for this Course (Free Preview) 22 minutes
3. Requirements and Installing the Simulators (Free Preview) 33 minutes
Create a Twitter App Learn how to use HTML5's new semantic elements to lay out a Twitter web app you'll be working with over the next few weeks. Understand the CSS3 pseudo class “nth-child” and learn how to cache your static HTML, JavaScript, CSS, and image files for offline use.
1. Example files for Week 2 0 minutes
2. New HTML5 Elements 23 minutes
3. Viewport and CSS Reset 13 minutes
4. Size your app for mobile with CSS 10 minutes
5. Add gradients 12 minutes
6. Create navigation icons 11 minutes
7. Style a list 8 minutes
8. Make your page a web app 19 minutes
Make Ajax Calls Add Ajax calls to your Twitter app that enables you to pull down recent tweets. You'll also learn about cross-site scripting security and what you need to do about it, as well as CSS3 Web Fonts and Transitions.
1. Example files for Week 3 0 minutes
2. Make Ajax Calls 30 minutes
3. Get Tweets as JSON 33 minutes
4. CSS3 Transitions 25 minutes
5. Web Fonts 13 minutes
6. Review and Final Q&A 6 minutes
Add Geolocation, Detect Orientation and Use CSS3 Media Queries Discover how JavaScript orientation detection knows when users rotate their mobile devices, and learn how to style your app to respond to different orientations, using CSS3 media queries. You'll also learn how to get a user's current global position, track changes in their location, and use that information to load local tweets on a map.
1. Example files for Week 4 0 minutes
2. CSS3 Media Queries 12 minutes
3. Detect Orientation with JavaScript 17 minutes
4. Geolocation 30 minutes
5. Review and Q&A 6 minutes
Use HTML5 Databases for Offline Storage Learn the basics of databases and how to use them. Then, connect your app to the Web SQL Database so users can store tweets for offline viewing.
1. Example files for Week 5 0 minutes
2. Use HTML5 Databases for Offline Storage 19 minutes
3. Cache the Tweets 18 minutes
4. Cache Manifest 9 minutes
5. Detect Online Status 27 minutes
6. Review 8 minutes
7. Next Week Preview 1 minute
8. Using Tweetstr while offline on the iPad (Free Preview) 1 minute
Create an Address Book App with Forms HTML5 makes it easier for you to create web forms. In this session, you'll learn how to build an address book and display the appropriate on-screen keyboard to fit the type of data users will input
1. Example files for Week 6 0 minutes
2. Create a Web SQL Database for our Address Book 14 minutes
3. New Input Types 24 minutes
4. CSS3 Animations 16 minutes
5. Review and Final Q&A 4 minutes
Build a Movie Trailer app with Audio and Video With the help of HTML5's new audio and video tags, you'll learn how to create an app that lets users view movie trailers. You'll also explore CSS3 transforms for adding rotation to video elements.
1. Example files for Week 7 0 minutes
2. Build a Movie Trailer App with Audio and Video 17 minutes
3. Custom Audio Player 14 minutes
4. Playback Progress Bar 12 minutes
5. Changing the Audio 15 minutes
6. Review 2 minutes
Draw Using JavaScript and Canvas Set up the new canvas element properly and learn how to draw simple and complex shapes. You'll draw shapes , by defining paths and using solid, gradient, and pattern fills.
1. Example files for Week 8 0 minutes
2. Draw using JavaScript and Canvas 16 minutes
3. Add Drawings to your Canvas 28 minutes
4. The Drawing System and Paths 12 minutes
5. Create Arcs and Bezier Curves 20 minutes
6. Review 7 minutes
Animate Your Drawings with Canvas Learn about the canvas composition model, and how to use the canvas element to create basic animations. You'll draw images into the canvas and discover how to use 2D transforms to translate, scale and rotate them.
1. Example files for Week 9 0 minutes
2. Combine Images with Compositing 14 minutes
3. Manipulate Images on the Canvas 13 minutes
4. Scale and Rotate with Transforms 13 minutes
5. Rotate an Image 9 minutes
6. Create an Animation 25 minutes
7. Review 3 minutes
Combine the HTML5 Video Element with the Canvas Learn how to use the HTML5 Video Element with the Canvas Element to create great video effects.
1. Example files for Week 10 0 minutes
2. Combine the HTML5 Video Element with Canvas 20 minutes
3. Create an Etch-a-sketch with DeviceMotion APIs 28 minutes
4. Review: What we learned about HTML5 on Mobile 18 minutes
5. Learning HTML5: Where to go from here 21 minutes
6. Q&A 7 minutes

Description

Table of Contents

Product Details

Recommended for You

Recently Viewed

Tapworthy iPhone Design and User Experience

By Josh Clark

February 2011

Video: $139.99

Microsoft® Excel® 2010 Step by Step

By Curtis D. Frye

June 2010

Ebook: $22.99

Print & Ebook: $32.99

Print: $29.99

Designing for XOOPS

A Designer's Quickstart Guide to Content Management

By Sun Ruoyu

July 2011

Ebook: $12.99

Print & Ebook: $21.99

Print: $19.99

Customer Reviews

REVIEW SNAPSHOT®

by PowerReviews

O'Reilly Media HTML5 Mobile Web Development

3.9

(based on 8 reviews)

67%

of respondents would recommend this to a friend.

Pros

Easy to understand (6)
Helpful examples (6)

Cons

Best Uses

Novice (5)
Student (4)

- Reviewer Profile:
- Developer (5)

REVIEWS

Reviewed by 8 customers

Sort by

Displaying reviews 1-8

1/20/2011

(4 of 5 customers found this review helpful)

2.0

The Video Format Doesn't Quite Work for

By Don

from Bucks County, Pennsylvania

About Me Developer

Pros

Helpful examples
Subject matter

Cons

Challenging format

Best Uses

Novice

Comments about O'Reilly Media HTML5 Mobile Web Development:

I was intrigued when O'Reilly published HTML5 Mobile Web Development, a video series on HTML5 targeted at web professionals. My hope was that a tutorial video would address some of the problems in trying to learn from books and provide more dynamic examples. I really liked the content being presented, such as real life examples of how to structure pages, create a twitter app, add geolocation, and creating databases.

In practice, the videos didn't quite work out as well as I had hoped. I found some of the same challenges as I did when I took some pre-recorded graduate classes. I found that even though Jake Carter was clearly an expert and had structured his ideas well, I had a really hard time keeping focused. I have come to expect five minute "bite sized" chunks of information, which provide me with the ability to skip over the sections that I understand and go straight to the parts that I don't. I frankly don't have the patience to sit still through hours of video.

The series would really benefit from even some rudimentary interactivity such as putting a section at the front end describing what the learning objectives for each section were with a test at the end to see whether you had mastered the material or not.

When videos are structured that way, I can start by reading the objectives, then take the test to find out whether or not I actually needed to watch the entire video. That was much the same approach that I used with college text books. If I knew the material and could pass the test at the end, I didn't watch. The fact was, I could figure out which of the 12 hours of video that I needed to watch, and which I didn't.

I like the fact that O'Reilly is pushing the envelope, but found that this format just didn't work for me.

1/16/2011

(3 of 3 customers found this review helpful)

4.0

Practical and well organized

By Rabbit1

from Cambridge, MA

About Me Developer

Pros

Easy to understand
Helpful examples
Practical
Well-organized

Cons

Best Uses

Intermediate
Novice
Student

Comments about O'Reilly Media HTML5 Mobile Web Development:

Summary:This product consists of the recording of 10 classes on developing mobile application using HTML5. Through the development of several applications, the instructor teaches and illustrates HTML5 features. Even though the demonstrations are mostly done on iphone and ipad, the material is applicable to other mobile platforms. Where dfferences exist, the instructor points them out. The class begins with settup up SDKs for iphone and Android which is fairly straightforward. This product is sutiable for anyone with some knowledge in javascript, html and css. No other coding is required. It is particularly suited for anyone who prefers instructor led classes.Reaction:I am a software deveoloper though web development is not my primary focus. I view this series of videos because I feel that this series is at the right level for me on this subject and I also need practical code examples.With this product, I have learned quite a lot about developing mobile application with HTML5. The first 5 weeks of the course is devoted to writing an application that retrieves and displays tweets using features such as persistent storage, caching and geolocation. Using this application, the instructor introduces the basic structure of a mobile application. Subsequent classes explains the media and canvas features.The class material is well organized. The 10 classes are divided into about 50 segments each of which covers specific topics and is no longer than 30 minutes. I watch a segment whenever I have an hour to spare. Since the source code for each segment is provided, I can view incremental code changes as well as the final code for the applications.I find the Q&A sessions in the video segments quite informative[@]

12/14/2010

(4 of 4 customers found this review helpful)

5.0

Jake Makes HTML5 Real & Work !

By Ric

from San Francisco

About Me Developer

Pros

Accurate
Concise
Easy to understand
Helpful examples
Well-written

Cons

Best Uses

Intermediate
Novice
Student

Comments about O'Reilly Media HTML5 Mobile Web Development:

Very good presenter, instructor, and speaker. Interesting material that was conveyed in a manner that was extremely approachable. I bought the video to do the class again and cement the content into my leaky brain. One addition is Beth Robson... WOW does she know her stuff... when I can't articulate the question, she is already asking it. Powerful team, good time. -Ric

12/14/2010

(5 of 6 customers found this review helpful)

2.0

Less Mobile web apps than iOS web apps

By jddj

from Greater Atlanta

About Me Interaction Designer, UX professional

Pros

Easy to understand
Overview

Cons

Not comprehensive enough
Too basic
Too many errors

Best Uses

Novice

Comments about O'Reilly Media HTML5 Mobile Web Development:

Instructor was knowledgeable about HTML5 on iOS and Mac OS web development, but didn't have depth on Android, and couldn't create examples that demonstrated his code on both of these critical platforms.

Instructor recommended at least one "worst-practice" - locking the size of the app to the screen (crushing for smartphones that can zoom in and out), and provided code with bugs and omissions.

Course was a basic primer, probably best aimed at web designers more than web developers. It'll give you a taste of HTML5, but not provide as much useful information for the developing pro as would an HTML5 reference. In class, early "design" examples were coded live, in middle "programming" examples, we were asked to "uncomment" code, and by the end, we just had the examples described to us. There was little interaction.

The material was too basic for real developers, and over the heads of the average designer (many chat comments complaining about having to do math).

Instructor made several excuses about not having an Android device to test on, not having tested code on the Android emulator, and didn't indicate he'd looked into how you'd use something other than a Mac for your development environment. These would seem like basic requirements for someone teaching such a course.

Session 1 of the class consisted of little more than "install the things we might or might not have told you about in the course requirements".

A long, slow narrowband way to get the information you need.

12/10/2010

(3 of 3 customers found this review helpful)

5.0

A Solid Introduction to HTML5

By gdworks

from San Diego CA

About Me Developer, Maker

Pros

Easy to understand
Helpful examples

Cons

Best Uses

Comments about O'Reilly Media HTML5 Mobile Web Development:

In this video series, the instructor provides a thorough introduction to HTML5/CSS3 development. In the first part of the course he walks us through development of a mobile Twitter application. In my opinion, the course is better than a "live" class (I can do the examples at my own pace) - but there are some issues to consider:- The material is Apple-centric. While he uses iPhone/iPad simulators and an Android Emulator to test each new feature in the Twitter app, Jake develops on a Mac, and emphasizes Apple mobile devices. I'm not sure how efficient and/or distracting it would be to do the labs in a Wintel / Android environment. - Browser HTML5 compliance varies greatly; only the newest devices are compliant enough to render the html5/css3 content as one would expect. The course uses an Android 2.2 Emulator and iPhone / iPhone4 Simulators. They had no problems rendering the html5/css3 as expected; when I used an Android 2.1 phone or Firefox to browse the same files, they rendered incorrectly. This last issue highlights the fragmented nature of today's Smart Phone market. And in fairness, it is beyond the scope of this video course. But, choosing a toolset is a strategic challenge for the developer: Least common denominator? Native Applications? HTML5? Given the half-life of Android OS versions, mobile HTML5 will be ubiquitous in two years. If your goal is to develop for both iPhone/iPad and Android 2.2+, then html5 seems to be the path forward. However, if you need to consider the millions of 1.5, 1.6, and 2.1 Android devices as well, then html4/css2, native app programming, or a framework are necessary. In either case, this course provides a great hands-on introduction to this technology. [@]

12/1/2010

(3 of 5 customers found this review helpful)

4.0

Vey good

By mario

from colombia

About Me Developer

Pros

Accurate
Concise
Easy to understand
Helpful examples
Well-written

Cons

None

Best Uses

Student

Comments about O'Reilly Media HTML5 Mobile Web Development:

Vey good tutorials

11/30/2010

(2 of 2 customers found this review helpful)

4.0

It's useful, easy and fast way to learn

By lucamezzalira

from padova

About Me Designer, Educator

Pros

Easy to understand
Helpful examples

Cons

Best Uses

Novice
Student

Comments about O'Reilly Media HTML5 Mobile Web Development:

Course is focused on mobile development, Jake Carter, the author, shows also Android world, how to configure your computer to work with emulator and simulator for Android, iPhone and so on.

I really love the way that he works in the classroom because first of all he explains the powerful of a particular feature, then show how to implement it and finally a little part of Q&A from internet people (I suppose).
It was my first time with HTML5 and I think is an interesting technology, in particular, during this course I learn how to work with geolocation, with JS and Canvas, with audio and video API and again how to save data directly on the device in a database.
I appreciate a lot al meta and css dedicated to iPhone and iPad, very useful.
Finally if you are interesting to learn a new way to develop on mobile, I suggest to take a look at this reference.