Mobile Training: HTML5, CSS3 & JS APIS

Slides: estelle.github.com/html5mobile

HTML5 Overview

  • Why HTML5?
    • Key features
    • Key players
    • Key design principles
  • Separating Presentation and Content
  • Authoring HTML5
  • Helper Libraries
    • IE6-8 Support 
    • Feature Detection 
    • Other polyfills
  • Markup changes
  • HTML5 page structure
  • New elements
  • Changed elements
  • New & Global Attributes
    • tabindex
    • contentEditable
    • data-*
    • Microdata
    • WAI-ARIA - accessibility

PART 2: CSS3 (and CSS)

  1. Selectors - (alternative deck)
  2. Specificity
  3. Generated Content
  4. Media Queries
  5. Debugging
  6. Colors & Transparency
  7. Fonts / Typography
  8. Backgrounds & Borders
  9. Gradients - (alternative deck)
  10. Transforms
  11. Transitions & Animation - (alternative deck)
  12. Other Features

HTML5 Forms

  • HTML5 Form elements
  • New input types 
  • New Attributes 
  • Form validation 
  • CSS UI Form Features 
  • Other new form features 
  • Alternative Deck

Audio And Video

  • Audio and video containers 
  • Audio and video codecs 
  • Styling with CSS3 
  • Controlling with Javascript  
  • <track> and video accessibility 
  • Browser support and polyfills
  • Audio and video APIs

HTML5 Canvas

  • SVG v Canvas v WebGL
  • Canvas API Basics
  • Canvas coordinates
  • Drawing operations 
  • Lines, squares and circles
  • Shadows and Text
  • Canvas pixel data
  • Canvas transforms 
  • Browser Support
  • Lab: Using the Canvas API

Data Storage

  • History of need
  • Local Storage
  • Session Storage
  • WebSQL
  • IndexDB
  • Local Storage Code Lab

HTML5 Offline Applications

  • Purpose of Application Cache
  • manifest attribute
  • manifest file syntax
  • header requirements
  • Application Cache API

Geolocation

  • Example: Find your location
  • Geolocation Methods
  • Position object
  • Error Handling
  • Geolocation code lab

Other JavaScript APIs

  • Web Workers
  • Cross Origin APIs
    • Cross Origin Resources
    • Cross Document Messaging
  • Web Sockets
  • History API
  • Drag & Drop
  • File API
  • querySelector/querySelectorAll
  • getElementsByClassName()
  • classList
  • notifications API

Mobile Web Performance Considerations

  • Performance Optimization
  • Latency
  • Battery Life
  • Memory management
  • UI Responsiveness
  • Mobile Device Limitations
  • Mobile Browser limitations
  • Optimizing images
  • Data URIs
  • Performance Tips