Introduction to HTML5
Upcoming SlideShare
Loading in...5
×
 

Introduction to HTML5

on

  • 1,997 views

 

Statistics

Views

Total Views
1,997
Views on SlideShare
1,893
Embed Views
104

Actions

Likes
1
Downloads
59
Comments
0

1 Embed 104

http://www.vofficeware.com 104

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction to HTML5 Introduction to HTML5 Presentation Transcript

  • 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