HTML5 Overview

HTML

Original Purpose of HTML

  • Linking
  • Connecting

Connecting to rich media, not just static documents

Web applications seem native

Ubiquitous

  • Code once. Use Everywhere
  • HTML, CSS, JavaScript
  • All devices
  • Responsive development
  • Upgradable (downgradeable)

Web v. Native

  • Code once. Use Everywhere
  • HTML, CSS, JavaScript
  • All devices
  • Responsive development
  • Upgradable (downgradeable)
  • Do you need Device API? Likely not
  • App store Overlords

Why use native?

  • Native hardware access
    • Camera
    • Phone*
    • File System*
  • Access to other device applications
    • Address Book*
  • Sales / Revenue

Hybrid Applications

Hybrid Apps

  • mix of native and web
  • Native WebView: web pages in native apps

Allows for:

  • Iteration of components without app store delay / approval
  • Allows for access to hardware and software if necessary

Tools

  • PhoneGap / Apache Cordova Tutorial
  • Titanium

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

Hover over the above to see which are part of HTML5

CSS

  • @font-face Web fonts
  • calc() in CSS
  • Generated content
  • Gradients
  • display values
  • Multiple backgrounds
  • background image properties
  • Border images
  • Border-radius
  • Box-shadow
  • Box-sizing
  • New Colors
  • Alpha-transparency
  • 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
  • New last week: WHATWG may be back under purvue of W3C

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

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]-->