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
  2. Specificity
  3. Generated Content
  4. Media Queries
  5. Debugging
  6. Colors & Transparency
  7. Fonts / Typography
  8. Backgrounds & Borders
  9. Gradients
  10. Transforms
  11. Transitions & Animation
  12. Other Features

HTML5 Forms

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

    • 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