1. HTML5, are we there yet?
Jax CodeCamp, Oct 2012
Ovidiu Dimulescu
Saturday, October 6, 12
2. Agenda
• What is HTML5?
• Features
• Polyfills and shims
• Status
• Resources
• Q&A
Saturday, October 6, 12
3. About @odimulescu
• Working on the Web since 1997
• Into startup and engineering cultures
• Speaker at user groups
• Organizer for JaxMUG.com
• Co-Organizer for Jax Big Data meetup
Saturday, October 6, 12
5. HTML- A bit of history
* Credit evolutionofweb.appspot.com
Saturday, October 6, 12
6. HTML- A bit of history
* Credit evolutionofweb.appspot.com
Saturday, October 6, 12
7. HTML- A bit of history
* Credit evolutionofweb.appspot.com
Saturday, October 6, 12
8. HTML5- What is it?
• W3C, WHATWG
• HTML, DHTML, XHTML, Quirks mode
• JSON, AJAX, Web Forms, Web Sockets, Web Workers
• Navigation History State, CORS
• DOM (Style, Events, HTML)
• CSS, Media Queries, Web Fonts
• Canvas, SVG, Audio,Video, WebGL
• Local Storage, Offline Apps
• HTML5 App, Single Page app
Saturday, October 6, 12
9. HTML5 - What is it?
An evolution of HTML4
• New DOM elements
• New JavaScript APIs
HTML5 is a “brand”
• CSS3
• Additional Rich APIs
• Umbrella term for cool web things
Saturday, October 6, 12
18. HTML5 - Semantic Tags
Browser Support
Modern Browser, IE9 +
Problems with unknown tags
1. Default style inline + Styles not applied (oldIE)
2. DOM incorrect (oldIE)
Workarounds
1. header, footer, nav, section { display: block}
2. <script>document.createElement("article");</script>
code.google.com/p/html5shim/
Saturday, October 6, 12
19. HTML5 - Forms
New Input Types
tel, url, email, number, range, color, search, datetime, date,
month, week, time, datetime-local
New Form and Input Type Attributes
placeholder, required, autofocus, autocomplete, pattern,
step, list, min, max, range, accept, multiple
New Elements
progress, meter, datalist, output
Saturday, October 6, 12
20. HTML5 - Forms
“Roaming” Form elements
• Can be outside of form elements
• Can belong to multiple forms
Validation Pseudo selectors
:invalid and :required *
Constraint Validation API
checkValidity, setCustomValidity, willValidate
DOM-less Form Submissions
FormData -> XMLHttpRequest.send()
Saturday, October 6, 12
21. HTML5 - Forms - Status
wufoo.com/html5
Saturday, October 6, 12
22. HTML5 - Offline applications
Advantages
• UX - Offline usage
• UX - Speed
• Server - Reduced load
Caveats
• No love from IE < 10
• Size limitation 5MB (iOS 6 is up to 25MB)
• Server side add text/cache-manifest mime-type
Reference
• Extension is not important but mime-type is
• Absolute (same origin) and relative URI
• Cached as a regular HTTP resource headers*
Saturday, October 6, 12
23. HTML5 - Offline Apps - Manifest
• CACHE MANIFEST is a required first line
• CACHE section is implicit, default behavior
• Syntax checking *very* strict. Any error aborts caching
• If any resources fails loading aborts cache update
• CACHE does not support wildcards. Explicit path needed
• A page referencing a manifest file is implicitly cached
• Relative URIs are relative to the cache manifest's URI
See appcachefacts.info for various quirks
Saturday, October 6, 12
25. HTML5 - Web Storage
Old Way
Cookies, Flash, Silverlight, AIR, userData in IE, Google Gears
New Way
• Isolation per sub-domain and per protocol. Does not expire until cleared
• 5MB limit.Values are Strings. Webkit stores UTF-16 -> 2.5MB effective storage
• No mechanism when quota is exceeded to prompt the user
• Prompts the user first time for permission to store data
• Well supported: IE8+. Use history.js shim for older browsers
Saturday, October 6, 12
26. HTML5 - Geolocation
Geo location detection
Global Positioning System (GPS)
Inferred: IP address, MAC, Cellphone IDs, etc.
User Input
Required Attributes
latitude, longitude and accuracy are guaranteed in supporting browsers
Other attributes will just return null if the information cannot be provided
Browser Support
IE9+, Modern Browser
Privacy Concerns
User agent has to explicitly ask for user permission to obtain location
Recipients must disclose the data usage:
How long the location data is stored?
Is it shared with other sites/partners?
Can the location data be updated or deleted by the end user?
Saturday, October 6, 12
28. HTML5 - Canvas
Old Way
• Using plugins such as Flash, Silverlight, JavaFX, SVG,VML
• VML (Vector Markup Language) only works in IE
• SVG, IE support since 9+
New Way
• <canvas> element, lacks border and content by default
• JavaScript 2D API
Browser Support
IE9+, Modern Browser
Older IEs - use explorercanvas.js (emulates Canvas via VML)
WebGL 3D API - Full support in Chrome only
Saturday, October 6, 12
