Learn your way! Get started

Mobile Development Using HTML 5

with expert David Kelley


Course at a glance

Included in these subscriptions:

  • Dev & IT Pro Video
  • Dev & IT Pro Power Pack
  • Power Pack Plus

Release date Release date 3/2/2012
Level Level Intermediate
Runtime Runtime 8h 27m
Closed captioning Closed captioning N/A
Transcript Transcript N/A
eBooks / courseware eBooks / courseware N/A
Hands-on labs Hands-on labs N/A
Sample code Sample code Included
Exams Exams Included


Enterprise Solutions
Enterprise Solutions

Need reporting, custom learning tracks, or SCORM? Learn More



Course description

HTML 5 is the new web based code that will allow developers to create web applications for Android, iOS, and Windows Phone OS platforms with little to no changes between platforms. The course will explore many aspects of HTML 5 mobile development starting with an overview of HTML 5, then the use of CSS and JavaScript with HTML 5. Then it will show the building of the standard Hello World application and then moving into forms, layouts and the all important MVVM. The course will then move into data usage with local storage and SQL. Next the course will cover the Cloud and related services. Then the course will start to work with many different features of the phones, working with phone sensors and GEO location. At the end of the course it will touch upon working with contacts, design philosophy, CSS animations and more.

Prerequisites

This course assumes you have some programming background and experience using Visual Studio 2010 or some other programming platform. In addition, this course assumes knowledge of HTML. A very basic understanding of XML is also required.

Meet the expert

David Kelley David Kelley is a Silverlight MVP with over 10 years of experience building Targeted Customer eXperiences. He is currently the Principal User eXperience Architect for [wire] stone specializing in touch experiences such as digital price tags and Silverlight-based kiosks for retail. David publishes a blog called Hacking Silverlight and helps to run the Seattle Silverlight User Group and Interact Seattle, Seattle's Designer Developer Interaction Group.


Course outline



Module 1

Introduction (20:49)
  • Introduction (01:49)
  • Started with Dev Accounts (00:54)
  • Demo: Apple Dev Account (02:48)
  • Demo: Android Dev Account (02:20)
  • Demo: Logging in Android (00:48)
  • Demo: WP 7 Dev Account (07:22)
  • Cross Platform Mobile Apps (02:11)
  • Other Accounts / Frameworks (02:28)
  • Summary (00:06)
Getting Started (16:20)
  • Introduction (00:15)
  • Installation and Setup (01:17)
  • Demo: PhoneGap (01:05)
  • Demo: Apple Developer (04:01)
  • Demo: Eclipse Downlaod (00:52)
  • Demo: Android SDK (05:36)
  • Demo: WP7 SDK (03:06)
  • Summary (00:06)
Application Deployment (33:28)
  • Introduction (00:15)
  • Platform Differences (03:53)
  • Application Revenue Models (04:45)
  • Free vs Trial (00:54)
  • Impressions Paid vs Trial (01:56)
  • Advertising in your Apps (00:14)
  • Demo: AdMob (00:36)
  • Demo: Microsoft Advertising (02:36)
  • Demo: WP7 App Deployment (08:56)
  • Demo: Android Deployment (05:32)
  • Demo: iPhone Deployment (03:33)
  • Summary (00:12)

Module 2

Limitations (12:05)
  • Introduction (00:35)
  • HTML Application Limitations (02:50)
  • Platform Limitations (00:27)
  • Example (03:12)
  • Cross Platform Strategies (03:15)
  • Web vs. Mono vs. All Natural (01:26)
  • Summary (00:16)
Hello World (38:51)
  • Introduction (00:42)
  • Getting Framework Setup (01:29)
  • Hello World (00:20)
  • Demo: Windows Phone 7 (10:56)
  • Demo: iPhone X-Code (07:15)
  • Demo: Android (11:05)
  • Demo: PhoneGap Build (06:47)
  • Summary (00:13)
Icons (05:35)
  • Introduction (00:31)
  • Application Icons (00:31)
  • Demo: Android Icons (02:08)
  • Demo: Phone 7 Icons (02:12)
  • Summary (00:12)

Module 3

Forms (16:55)
  • Introduction (00:30)
  • HTML Form Basics (01:48)
  • Demo: WP7 Forms (05:55)
  • Demo: JavaScript Event Handlers (00:16)
  • Demo: CSS (02:14)
  • Demo: Running Form (01:13)
  • Demo: Internet Browser (01:39)
  • Demo: Adding a var (03:04)
  • Summary (00:12)
Layout (09:49)
  • Introduction (00:27)
  • Demo: Form Layout (01:51)
  • Demo: Style Sheet (04:39)
  • Demo: Style Sheet for Devices (02:38)
  • Summary (00:12)
MVVM (15:14)
  • Introduction (00:30)
  • Demo: MVVM (00:47)
  • Demo: Knockout (05:12)
  • Demo: View Model Class (04:00)
  • Demo: Function (01:24)
  • Demo: Running the App (03:04)
  • Summary (00:14)
Validation (10:24)
  • Introduction (00:26)
  • Validation and Form Processing (01:21)
  • Demo: Validation (01:09)
  • Demo: Function Validate (03:49)
  • Demo: How to use a Library (03:25)
  • Summary (00:12)

Module 4

Local Data Storage (24:40)
  • Introduction (00:28)
  • Local Data Storage (00:47)
  • Demo: WP7 Local Storage (13:06)
  • Demo: Android Local Storage (03:12)
  • Demo: iOS Local Storage (06:54)
  • Summary (00:12)
PhoneGap API (39:19)
  • Introduction (00:27)
  • JavaScript PhoneGap API"s (01:02)
  • Demo: PhoneGap API (09:40)
  • Demo: Network Connection (05:24)
  • Demo: Pause and Resume (04:26)
  • Demo: Alerts (07:23)
  • Demo: PhoneGap API in iOS (10:35)
  • Summary (00:18)

Module 5

SQL Database (39:56)
  • Introduction (00:29)
  • Local Database API (01:56)
  • Demo: Using SQL Android (26:32)
  • Demo: iOS SQL Database (10:44)
  • Summary (00:12)
Extending APIs (12:35)
  • Introduction (00:33)
  • Creating and Extending APIs (01:24)
  • Demo: Creating APIs (05:02)
  • Demo: Extending APIs (05:22)
  • Summary (00:12)

Module 6

Cloud and Services (28:51)
  • Introduction (00:29)
  • Services and Protocols (02:22)
  • Serialization/Deserialization (01:12)
  • Demo: Services (15:39)
  • Demo: iOS Cloud Integration (08:56)
  • Summary (00:12)
Sockets Workers and the Cloud (08:58)
  • Introduction (00:28)
  • Web Sockets (02:48)
  • Web Workers (02:26)
  • The Clouds (02:52)
  • Summary (00:22)
Sensors (23:16)
  • Introduction (00:30)
  • Devices and Sensors (01:37)
  • Demo: Accelerometer (10:56)
  • Demo: Cameras (09:56)
  • Summary (00:15)

Module 7

Working with Media (25:50)
  • Introduction (00:24)
  • Multi Media On Device (00:31)
  • Demo: Media (16:08)
  • Demo: Recording Audio (08:33)
  • Summary (00:12)
Uploading Media (16:53)
  • Introduction (00:25)
  • Media in the cloud (00:53)
  • Demo: Uploading Media (15:22)
  • Summary (00:12)
Geolocation (17:46)
  • Introduction (00:26)
  • Maps and Geolocation (01:34)
  • Demo: GPS (07:27)
  • Demo: Compass (08:05)
  • Summary (00:12)
Working with Contacts (10:46)
  • Introduction (00:26)
  • Working with Contacts (00:51)
  • Demo: Contacts (09:16)
  • Summary (00:12)

Module 8

Tools and Support (10:07)
  • Introduction (00:31)
  • Tools and Support (04:33)
  • Demo: Tools (04:49)
  • Summary (00:13)
Design Philosophy (09:44)
  • Introduction (00:46)
  • Mobile Design Philosophy (02:39)
  • Demo: Apple Design (02:18)
  • Demo: Android Design (01:31)
  • Demo: Windows Design (02:07)
  • Summary (00:20)
CSS Animations (45:10)
  • Introduction (00:37)
  • CSS Animation Basics (01:53)
  • Demo: Animation Basics (00:35)
  • Demo: jQuery for Animation (01:20)
  • Demo: Pivot (04:03)
  • Demo: Style Sheet (07:29)
  • Demo: Testing the App (01:14)
  • Demo: Logic for Animation (03:36)
  • Demo: Helper Functions (04:18)
  • Demo: Switch Statement (04:43)
  • Demo: Logic for Pivots (06:38)
  • Demo: Run the App (01:47)
  • Demo: Animation in iOS (01:56)
  • Demo: Style Sheet (01:45)
  • Demo: Run the App in iPhone (02:55)
  • Summary (00:12)
Touch and Hybrid (14:04)
  • Introduction (00:36)
  • Touch APIs and Gestures (03:08)
  • Hybrid Applications (01:16)
  • Demo: Hybrid Application (02:11)
  • Demo: Run Hybrid Application (01:22)
  • Demo: Create a XAML Page (03:19)
  • Demo: Run the XAML Page (01:46)
  • Summary (00:22)