EnrollIntroductionCourse Outline
02/28/2022 - 03/02/2022
10:00 AM - 06:00 PM
Online Virtual Class
USD $1,495.00
Enroll
03/28/2022 - 03/30/2022
10:00 AM - 06:00 PM
Online Virtual Class
USD $1,495.00
Enroll
04/18/2022 - 04/20/2022
10:00 AM - 06:00 PM
Online Virtual Class
USD $1,495.00
Enroll

Description

This course teaches how to use the new features of HTML5 in a mobile platform. Two key aspects of this training class are:

  1. It teaches the architecture options. For example, do we need two separate web sites for mobile and desktop or can we render the same HTML markup using two different CSS files?
  2. It teaches the new features of HTML5 in details. For example, Canvas and Offline.

Prerequisites

This course is designed for someone who is already proficient with Web 2.0 style programming. That means, good knowledge of Ajax, JSON, DOM API is assumed. As a result, the following topics are not covered in details. We assume that students know these topics well:

  1. Ajax. We assume that students know Ajax very well.
  2. DOM API.
  3. jQuery

Duration

2 days.

Download Sample Labs Lab Setup Guide

Outline for Building HTML5 Based Mobile Web Sites

Chapter 1. Introduction to Mobile Web Design

  • Why Have a Mobile Presence?
  • Pros and Cons of Mobile Web
  • What Features to Expose in Mobile Web?
  • Example Functions for Mobile Web
  • Architecture Options
  • Comparing the Options
  • Guidelines for Mobile UI Design
  • Summary

Chapter 2. Implementation Techniques

  • Device Specific Stylesheets
  • Media Query in @media Rule
  • Media Query with @import Rule
  • Media Query from HTML
  • Deal with Device Orientation
  • Detecting Device in Server
  • Generating Device Specific HTML Markup
  • Detecting Device Type in Browser
  • Do Device Specific Rendering
  • Handling Touch Events
  • Example: Handling Touch Events
  • Adding Home Screen Icon in iPhone
  • Third Party Mobile Web Tookit
  • Summary

Chapter 3. Introduction to HTML5

  • History of HTML5
  • HTML5 Standards Body
  • New Features of HTML5 – 1/3
  • New Features of HTML5 – 2/3
  • New Features of HTML5 – 3/3
  • Current Browser Support for HTML5
  • Detecting Support for HTML5
  • HTML5 vs. Flash
  • Replacing Flash with HTML5
  • Summary

Chapter 4. The Basics

  • What Is HTML5
  • HTML5 Goals
  • HTML Specs, Past and Present
  • How Is HTML5 Different From HTML4?
  • HTML5 Is Not Based On SGML
  • More Differences
  • HTML5 Defines Required Processing For Invalid Documents
  • The Doctype Declaration
  • Semantic Elements
  • The <aside> Element
  • Browser Support For HTML5
  • Summary

Chapter 5. New Semantic Elements

  • Function over Form
  • HTML4 Layouts
  • HTML5 Semantic Layouts
  • Nesting Semantics
  • Other New Semantic Elements
  • The <time> Element
  • WAI-ARIA
  • The <ruby> and <rt> Elements
  • The <rp> Element
  • The <keygen> Element
  • Summary

Chapter 6. Forms

  • The form Attribute
  • The placeholder Attribute
  • Form Field Types
  • Forms and Validation
  • The required Attribute
  • The number input type
  • The pattern Attribute
  • The range and date input types
  • The <datalist> Element
  • The autofocus and oninput Attributes
  • HTML5 CSS Pseudo-Classes
  • Summary

Chapter 7. Canvas

  • The <canvas> Element
  • <canvas> vs. <svg>
  • Browser Support for <canvas>
  • Creating the Canvas
  • Using the Context
  • Using Color
  • Painting Gradients
  • Drawing Paths
  • Painting Patterns
  • Transformers
  • Summary

Chapter 8. Video and Audio

  • HTML5 Video/Audio Overview
  • New Elements for Video/Audio
  • Using the <audio> Element
  • The <video> Element
  • Specifying More Than One Audio or Video File
  • The poster Attribute
  • Other <audio> and <video> Attributes
  • JavaScript and Media Elements
  • Summary

Chapter 9. Geolocation

  • Geolocation Concepts
  • Geolocation API
  • Functions and Options
  • Example
  • Example(cont'd)
  • Success Function
  • Error Function
  • Options
  • Users Need to Agree!
  • watchPosition API
  • How does it work?
  • Summary

Chapter 10. Web Storage and Web SQL

  • Data Storage
  • Data Storage Options
  • Web Storage
  • Programming Interface – Storage/Retrieval
  • Programming Interface – Enumerating the Values
  • Programming Interface – Removing Items
  • Example – Storing a value
  • Example – Retrieving a value
  • Example – Listing all the keys
  • “Expandos”
  • Storing JavaScript Objects
  • Retrieving JavaScript Objects
  • Web SQL Databases
  • Using a Web SQL Database
  • Running Queries
  • Running Queries (cont'd)
  • Reading Values
  • IndexedDB
  • Creating an Object Store
  • Loading the Store Shelves
  • Browsing the Shelves
  • Storage Coniderations
  • Summary

Chapter 11. Offline Processing

  • Offline Concepts
  • The Cache Manifest File
  • Contents of the Cache Manifest
  • Contents of the Cache Manifest (cont'd)
  • Serving the Cache Manifest
  • applicationCache
  • Conclusion

Chapter 12. The jQuery Mobile Toolkit

  • Introduction
  • Downloading and Using jQuery Mobile
  • The Basics
  • Example: A Multi-Page HTML
  • The Anatomy of a Page
  • Example of Page Segments
  • Theming
  • Creating a List View
  • Decorating List View Rows
  • Implement Master Detail Navigation Pattern
  • Create a Tabbed View
  • Summary

Chapter 13. Best Practices of Mobile Web Design

  • Introduction
  • URI Consistency
  • Exploit Device Capability
  • Testing
  • Use Short URI
  • Minimize Navigation Bar At Top
  • Balance Navigation Hierarchy
  • Identify Content Type for a Link
  • Minimize Dummy Page Load
  • Limit Page Size
  • Control Scrolling Behavior
  • Avoid using Color to Convey Meaning
  • General HTML Markup Guidelines
  • User Input
  • Summary