Building HTML5 Based Mobile Web Sites Training

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