Your SlideShare is downloading. ×
Introduction to HTML5
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to HTML5


Published on

Published in: Education, Technology

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Introduction to HTML5 By Kunal Johar Brown Bag Presentations
  • 2. Introduction to HTML5Reference By Kunal Johar • This presentation is based heavily on information taken from Dive into HTML5 • • Buy the book! Up-Running-Mark- Pilgrim/dp/0596806027?creativeAS IN=0596806027Brown Bag Presentations
  • 3. Introduction to HTML5What 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 HTML5Why 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 JonBrown Bag Presentations
  • 5. Introduction to HTML5WHAT!? By Kunal Johar WHAT!?Brown Bag Presentations
  • 6. Introduction to HTML5WHAT / 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 stupidBrown Bag Presentations
  • 7. Introduction to HTML5How 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 appropriateBrown Bag Presentations
  • 8. Introduction to HTML5HTML5 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 HTML5HTML5 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 ImprovementsBrown Bag Presentations
  • 10. Introduction to HTML5Canvas 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 degradationBrown Bag Presentations
  • 11. Introduction to HTML5Video 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 detectionBrown Bag Presentations
  • 12. Introduction to HTML5Data 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 / for degradation supportBrown Bag Presentations
  • 13. Introduction to HTML5Web 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 timerBrown Bag Presentations
  • 14. Introduction to HTML5Offline 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 HTML5History 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.jsBrown Bag Presentations
  • 16. Introduction to HTML5Geolocation 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 HTML5Form Improvements By Kunal Johar • Helper Functions • Placeholder text • Autofocus • Validation • New FieldsBrown Bag Presentations
  • 18. Introduction to HTML5Form 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 jourBrown Bag Presentations
  • 19. Introduction to HTML5Form 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 jourBrown Bag Presentations
  • 20. Introduction to HTML5Form 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 boxesBrown Bag Presentations
  • 21. Thank 1629 K St NW, STE 300, Washington, DC 20006 Phone (202) 478-9620 Fax (888) 647-6110 web: