Intro to HTML5

What is it? Advanced Forms, Microformats, Mobile Apps, Rich Media, & more

Reading Recap

"Five Things You Should Know About HTML5" - Mark Pilgrim

Main points:

  1. Can't detect "HTML5 support".
  2. An improvement on existing HTML4 tags (e.g., sliders, date-pickers, progress bars)
  3. It's already here and ready to be used.
  4. caniuse.com, browser support, html5readiness.com, Modernizr

http://diveintohtml5.info/introduction.html

Reading Recap

"What is HTML5?" - Me

Main points:

  • Multiple technologies under one umbrella (HTML, CSS, & JavaScript)
  • Role switching (rounded corners, transitions, canvas)
  • Paving the cow-paths (advanced forms, rich semantics, audio/video)

http://www.dennisplucinik.com/blog/2012/01/27/what-is-html5/

What is HTML5?

Basically, a bunch of cool new tags and features
  • Offline and Storage Offline & Storage
  • Device Access Device Access
  • Connectivity / Realtime Connectivity / Realtime
  • Performance and Integration Performance & Integration
  • Offline and Storage Multimedia
  • Offline and Storage Semantics
  • Offline and Storage Graphics, 3D & Effects
  • Offline and Storage CSS3 / Styling

Semantics

semantics

Multimedia

  • HTML5 video works on iOS vs. Flash video
  • Easy to make custom skins (Check out Video.js)

Graphics, 3D & Effects

  • The new 'canvas' feature is similar to Flash
  • Videos can be manipulated with JavaScript (Check out CraftyMind.com)

Graphics, 3D & Effects

  • New libraries let you generate smooth 3D interactions (Check out Three.js)

CSS3 / Styling

Even more crazy stuff

Advanced Web Forms

  • Designed to enhance existing form functionality (e.g., iPhones have a different keyboard when entering a phone number or an email address)
  • Again, replacing the functionality of a problem otherwise solved with heavy handed JavaScript (e.g., progress bars)
  • More examples
  • ...even more examples

Questions

?

Assignment

Start applying HTML & CSS to your designs.