Original Purpose of HTML

• Linking
• Connecting

Connecting to rich media, not just static documents

Web applications seem native

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

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

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

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

• 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

• 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

• 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

• 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
• Feature Detection
• Support For Legacy Browsers
• Graceful Degradation
• Emulation
• Developer Tools

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

Next ➹