2. Introduction to HTML5
Reference By Kunal Johar
• This presentation is based heavily
on information taken from Dive
into HTML5
• http://diveintohtml5.org/
• Buy the book!
http://www.amazon.com/HTML5-
Up-Running-Mark-
Pilgrim/dp/0596806027?creativeAS
IN=0596806027
Brown Bag Presentations
3. Introduction to HTML5
What is HTML5? By Kunal Johar
• A series of upgrades to HTML4
• Makes HTML4/CSS/XHTML Cleaner to write
• Allows for creation of Rich Internet Applications (RIA)
• Allows support for new devices (mobile/tablet)
• Allows for concept of semantic web
• It IS NOT an all or nothing upgrade
• Features of HTML5 have been in use for years
• <canvas> for Cufon support
• Geolocation
Not exactly HTML5
Brown Bag Presentations
4. Introduction to HTML5
Why HTML5? By Kunal Johar
• What is HTML4?
• Standard markup by W3C
• What is a Standard?
• Why do we use <img src=“some_url”>
instead of <embed type=“image” url=“some_url”>
• Why do we now use <img src=“some_url”/>
• Okay so why HTML5 not XHTML 3.0?
• We can ask Lil Jon
Brown Bag Presentations
6. Introduction to HTML5
WHAT / W3C By Kunal Johar
• Web Hypertext Application Technology (WHAT)
Working Group
• Formed in 2004
• Studied how web browsers render HTML
• Then study how they render malformed HTML
• Proposal: Make HTML a living standard
• HTML5 to be “finalized” in 5+ years from now
• WHATWG vs W3C
• Live in unison as long as the other doesn’t do something
stupid
Brown Bag Presentations
7. Introduction to HTML5
How to Use HTML5 By Kunal Johar
• Before the <html> element we specify a doctype
• Right?
• For HTML5 use <!DOCTYPE html>
• What if the current browser is not “HTML5 Compliant”
• “HTML5 Compliance” is a buzzword
• “Does not support {feature x} of HTML5” would be more
appropriate
Brown Bag Presentations
8. Introduction to HTML5
HTML5 Feature Detection By Kunal Johar
• The hard way
• Use javascript to create object of a feature
• If {!!object} {degredation code}
• Modernizr.js
• MIT Licensed library
• if (!Modernizr.geolocation){ degredation code }
• Modernizr.load ({ test: Modernizer.geolocation,
yep: some_library.js, nope: some_library.html4.js})
Brown Bag Presentations
9. Introduction to HTML5
HTML5 Features By Kunal Johar
• Canvas
• Video Remember to
• Local Storage degrade nicely
• Web Worker
• Offline Support
• Semantic Web (Microdata)
• Geolocation (not exactly HTML5)
• History APIs
• Form Improvements
Brown Bag Presentations
10. Introduction to HTML5
Canvas By Kunal Johar
• <canvas>
• Area we can draw in (lines, text*, images)
• 2D Surface
– 3D may come later
• Useful for custom Uis and games
• Can detect events within a region
– On click / on hover
– On touch
• Use excanvas.js for clean degradation
Brown Bag Presentations
11. Introduction to HTML5
Video By Kunal Johar
• <video>
• Does to video what <img> does for images
• Allows video playback without Flash
– File formats could be an issue
– Similar to PNG format for images
• Modernizr can be used for codec detection
Brown Bag Presentations
12. Introduction to HTML5
Data Storage By Kunal Johar
• Improvements to cookies
• Cookies limited to 4K
• Data format as associative array / json
• Fallacies
• Supports Key/Value pairs only
• No standard format for more advanced databases (SQLLite /
IndexDB) across all browsers
• Google Gears / dojox.storage.js for degradation support
Brown Bag Presentations
13. Introduction to HTML5
Web Workers By Kunal Johar
• Background processing of java
• Most implementations run worker in new
thread
• Workers do not have access to DOM
• Great for asynchronous tasks
• Thoughts on some good uses?
• Degradation with jquery timer
Brown Bag Presentations
14. Introduction to HTML5
Offline Support, Semantic Web By Kunal Johar
• Offline Support
• Support for cache.manifest
• Asks browser to download files for offline use
• Combine with local storage / non-standardized database
• Semantic web
• Instead of <h1> <hgroup>
• Instead of <li> <nav>
• Instead of <div> <article> <section>
• Great for search engines and the future!
• <img> <audio> <video>
Brown Bag Presentations
15. Introduction to HTML5
History APIs By Kunal Johar
• Back / Forward
• Works great with static pages
• Painful with dynamic UIs (multiple tab views)
• HTML5 creates api to push state / pop state
– History.pushState(json string)
• Degradation
• Use of window.hash (#somevalue)
• Jquery history.js
Brown Bag Presentations
16. Introduction to HTML5
Geolocation By Kunal Johar
• You said it isn’t HTML5
• W3C Geolocation WG
• Included in HTML5 discussion through marketing of new
web browsers
• Location service (wifi db, cell tower, gps) gives raw data
• Data: Latitude, Longitude, Heading, Accuracy
• Can “request” high or low accuracy
– Device specific of course
• How would you handle degradation?
Brown Bag Presentations
17. Introduction to HTML5
Form Improvements By Kunal Johar
• Helper Functions
• Placeholder text
• Autofocus
• Validation
• New Fields
Brown Bag Presentations
18. Introduction to HTML5
Form Improvements: Helper Functions By Kunal Johar
• Placeholder text
• <input name =“s” placeholder=“Email”>
• Autofocus
• <input name =“s” autofocus>
• Better control of focus when page loads or when pressing tab
• Degrade
• Jquery or javascript du jour
Brown Bag Presentations
19. Introduction to HTML5
Form Improvements: Validation By Kunal Johar
• Examples
• Email validation: <input name =“s” type=“email”>
• Required field: <input name =“s” required>
• Others: type=“url”, “number” with min= and max=
• Stopping Validation
• Validation is on by default for a form with the type specification
• <form novalidate> will prevent this
• Degrade
• Jquery or javascript du jour
Brown Bag Presentations
20. Introduction to HTML5
Form Improvements: New Types By Kunal Johar
• Supports better “selector” views and keyboard prompts
• Types
• Email, Url
• Number (min, max, step, value)
• Range (min, max, step, value)
• Date, month, week, time, etc (opera only)
• Color (opera only)
• Search
• WHATWG found that all browsers degrade to regular text
boxes
Brown Bag Presentations
21. Thank You
kjohar@vofficeware.com
1629 K St NW, STE 300,
Washington, DC 20006
Phone (202) 478-9620
Fax (888) 647-6110
web: www.vofficeware.com
