Introduction to HTML5

Introduction to HTML5
By Kunal Johar

Brown Bag Presentations

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


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 


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


WHAT!? By Kunal Johar

WHAT!?

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


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


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


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


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


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


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


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


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>


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


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?


Form Improvements By Kunal Johar

• Helper Functions
• Placeholder text
• Autofocus

• Validation

• New Fields


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


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


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


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

Introduction to HTML5

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Introduction to HTML5

Semelhante a Introduction to HTML5 (20)

Mais de Kunal Johar

Mais de Kunal Johar (6)

Último

Último (20)

Introduction to HTML5