HTML5 Fast Track

Slides: estelle.github.com/html5training

The State of HTML5

HTML

  • Linking
  • Connecting

Connecting to rich media, not just static documents

What is HTML5?

  • New elements & Attributes
  • WAI-ARIA
  • Web Forms 2.0 with validation
  • <video> & <audio>
  • <canvas> & SVG
  • Web storage
  • Offline applications
  • Geolocation
  • Drag & Drop
  • Web Workers
  • Native round corners & gradients
  • Animation & Transitions

CSS

  • @font-face Web fonts
  • calc() in CSS
  • Generated content
  • Gradients
  • display values
  • Mulitiple backgrounds
  • background image properties
  • Border images
  • Border-radius
  • Box-shadow
  • Box-sizing
  • New Colors
  • Alphatransparency
  • Media Queries
  • Multiple column layout
  • object-fit/object-position
  • Opacity
  • CSS3 selectors
  • Text-shadow
  • Transforms
  • Transitions
  • 3D Transforms
  • Animation
  • Word-wrap
  • Flexible Box Layout Module
  • Grid Layout
  • rem (root em) units
  • Masks
  • Reflections
  • text-stroke
  • Text-overflow

HTML5

  • Semantic elements
  • Audio element
  • Canvas
  • contenteditable attribute
  • dataset & data-* attributes
  • Details & Summary elements
  • Drag and Drop
  • HTML5 form features
  • Form validation
  • Datalist element
  • Progress & Meter
  • New semantic elements
  • Offline web applications
  • Ruby annotation
  • Session history management
  • Text API for Canvas
  • Toolbar/context menu
  • Video element
  • WebGL - 3D Canvas graphics

JS API

  • Cross-document messaging
  • Cross-Origin Resource Sharing
  • File API
  • Geolocation
  • Hashchange event
  • IndexedDB
  • JSON parsing
  • Server-sent DOM events
  • Web Notifications
  • Web Sockets
  • Web Storage
  • Web Workers
  • Stream API
  • Web SQL Database
  • SVG

Other

  • classList (DOMTokenList )
  • Data URLs
  • getElementsByClassName
  • MathML
  • MPEG-4/H.264/WebM/VP8/Ogg/Theora video formats
  • querySelector/querySelectorAll
  • Touch events
  • WAI-ARIA Accessibility features
  • Font Formats
  • XHTML served as application/xhtml+xml
  • XMLHttpRequest 2
  • XHTML+SMIL animation

What is HTML5?

  • Semantic elements
  • Audio element
  • Canvas
  • contenteditable attribute
  • dataset & data-* attributes
  • Details & Summary elements
  • Drag and Drop
  • HTML5 form features
  • Form validation
  • Datalist element
  • Progress & Meter
  • Offline web applications
  • Ruby annotation
  • Session history management
  • Text API for Canvas
  • Toolbar/context menu
  • Video element
  • WebGL - 3D Canvas graphics

History And Major Actors

  • Browsers
    • Implementation can lead to specification
    • Refusal to implement kills the chance of becoming a specification
  • W3C
    • Founded 1994
    • World Wide Web Consortium
    • Tim Berners-Lee
  • WHATWG
    • Founded 2004
    • Web Hypertext Application Technology Working Group
    • Ian Hickson - now at Google

HTML5 Design Principles

  • Compatibility
    • Don't break the web (Support v1 & Degrade gracefully)
    • Standardize existing practices
  • Utility
    • Address current and future problems
    • Make sure it works for authors (over browsers)
    • Security
    • Separate layers (content v. presentation v. behavior)
  • Interoperability
    • All browsers should implement (and error) identically
    • minimal complexity
  • Universal Access
    • Media works across different platforms, devices, and media.
    • Internationalization
    • Accessibility

Getting Started With HTML5

Browser Support

  • Browser Support
  • Feature Detection
  • Support For Legacy Browsers
  • Graceful Degradation
  • Emulation
  • Developer Tools

Support For Legacy Browsers

IE6-8 does not style elements that don't exist, so create the elements!

<!--[if IE]> 
<script type="text/javascript"> 
(function(){ 
  var html5elmeents ="article|aside|audio|canvas|...|video";
  html5elmeents.split('|'); 
  for(var i = 0; i < html5elmeents.length; i++){
    document.createElement(html5elmeents[i]); 
  } 
})(); 
</script> 
<![endif]-->  

HTML5:
Getting Started

Go ➹

Forms

Go ➹

Audio And Video

Go ➹

CSS3

Go ➹

HTML5 Canvas

Go ➹

Data Storage

Go ➹

HTML5 Offline Applications

Go ➹

Geolocation

Go ➹

Web Workers

Go ➹

Messaging APIs

Go ➹

Web Sockets

Go ➹

Other JS APIs

Go ➹