introduction to html5

Introduction to HTML5 By Kunal Johar

Brown Bag Presentations

• 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?creativeASIN=0596806027

Introduction to HTML5 By Kunal Johar Reference


http://diveintohtml5.org/

http://www.amazon.com/HTML5-Up-Running-Mark-Pilgrim/dp/0596806027?creativeASIN=0596806027










• 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

Introduction to HTML5 By Kunal Johar What is HTML5?


Not exactly HTML5

• 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

Introduction to HTML5 By Kunal Johar Why HTML5?


WHAT!?

Introduction to HTML5 By Kunal Johar WHAT!?


• 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

Introduction to HTML5 By Kunal Johar WHAT / W3C


• 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

Introduction to HTML5 By Kunal Johar How to Use HTML5


• 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})

Introduction to HTML5 By Kunal Johar HTML5 Feature Detection


• Canvas

• Video

• Local Storage

• Web Worker

• Offline Support

• Semantic Web (Microdata)

• Geolocation (not exactly HTML5)

• History APIs

• Form Improvements

Introduction to HTML5 By Kunal Johar HTML5 Features


Remember to

degrade nicely

• <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

Introduction to HTML5 By Kunal Johar Canvas


• <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

Introduction to HTML5 By Kunal Johar Video


• 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

Introduction to HTML5 By Kunal Johar Data Storage


• 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

Introduction to HTML5 By Kunal Johar Web Workers


• 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>

Introduction to HTML5 By Kunal Johar Offline Support, Semantic Web


• 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

Introduction to HTML5 By Kunal Johar History APIs


• 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?

Introduction to HTML5 By Kunal Johar Geolocation


• Helper Functions

• Placeholder text

• Autofocus

• Validation

• New Fields

Introduction to HTML5 By Kunal Johar Form Improvements


• 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

Introduction to HTML5 By Kunal Johar Form Improvements: Helper Functions


• 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

Introduction to HTML5 By Kunal Johar Form Improvements: Validation


• 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

Introduction to HTML5 By Kunal Johar Form Improvements: New Types


Thank You [email protected]

1629 K St NW, STE 300, Washington, DC 20006

Phone (202) 478-9620

Fax (888) 647-6110 web: www.vofficeware.com

introduction to html5

Education