Introduction to HTML5

Introduction to HTML5 By Kunal Johar Brown Bag Presentations

Introduction to HTML5Reference 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=0596806027Brown Bag Presentations

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

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

Introduction to HTML5WHAT!? By Kunal Johar WHAT!?Brown Bag Presentations

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

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

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

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

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

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

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 / dojox.storage.js for degradation supportBrown Bag Presentations

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

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

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

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

Introduction to HTML5Form Improvements By Kunal Johar • Helper Functions • Placeholder text • Autofocus • Validation • New FieldsBrown Bag Presentations

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

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

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

Thank Youkjohar@vofficeware.com 1629 K St NW, STE 300, Washington, DC 20006 Phone (202) 478-9620 Fax (888) 647-6110 web: www.vofficeware.com

Introduction to HTML5

by Kunal Johar on Jul 28, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 50

Statistics

Introduction to HTML5 — Presentation Transcript