introduction to html5
TRANSCRIPT
![Page 1: Introduction to HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052504/554bb1bdb4c905b8618b5a94/html5/thumbnails/1.jpg)
Introduction to HTML5 By Kunal Johar
Brown Bag Presentations
![Page 2: Introduction to HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052504/554bb1bdb4c905b8618b5a94/html5/thumbnails/2.jpg)
• 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
Brown Bag Presentations
![Page 3: Introduction to HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052504/554bb1bdb4c905b8618b5a94/html5/thumbnails/3.jpg)
• 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?
Brown Bag Presentations
Not exactly HTML5
![Page 4: Introduction to HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052504/554bb1bdb4c905b8618b5a94/html5/thumbnails/4.jpg)
• 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?
Brown Bag Presentations
![Page 5: Introduction to HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052504/554bb1bdb4c905b8618b5a94/html5/thumbnails/5.jpg)
WHAT!?
Introduction to HTML5 By Kunal Johar WHAT!?
Brown Bag Presentations
![Page 6: Introduction to HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052504/554bb1bdb4c905b8618b5a94/html5/thumbnails/6.jpg)
• 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
Brown Bag Presentations
![Page 7: Introduction to HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052504/554bb1bdb4c905b8618b5a94/html5/thumbnails/7.jpg)
• 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
Brown Bag Presentations
![Page 8: Introduction to HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052504/554bb1bdb4c905b8618b5a94/html5/thumbnails/8.jpg)
• 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
Brown Bag Presentations
![Page 9: Introduction to HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052504/554bb1bdb4c905b8618b5a94/html5/thumbnails/9.jpg)
• 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
Brown Bag Presentations
Remember to
degrade nicely
![Page 10: Introduction to HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052504/554bb1bdb4c905b8618b5a94/html5/thumbnails/10.jpg)
• <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
Brown Bag Presentations
![Page 11: Introduction to HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052504/554bb1bdb4c905b8618b5a94/html5/thumbnails/11.jpg)
• <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
Brown Bag Presentations
![Page 12: Introduction to HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052504/554bb1bdb4c905b8618b5a94/html5/thumbnails/12.jpg)
• 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
Brown Bag Presentations
![Page 13: Introduction to HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052504/554bb1bdb4c905b8618b5a94/html5/thumbnails/13.jpg)
• 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
Brown Bag Presentations
![Page 14: Introduction to HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052504/554bb1bdb4c905b8618b5a94/html5/thumbnails/14.jpg)
• 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
Brown Bag Presentations
![Page 15: Introduction to HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052504/554bb1bdb4c905b8618b5a94/html5/thumbnails/15.jpg)
• 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
Brown Bag Presentations
![Page 16: Introduction to HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052504/554bb1bdb4c905b8618b5a94/html5/thumbnails/16.jpg)
• 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
Brown Bag Presentations
![Page 17: Introduction to HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052504/554bb1bdb4c905b8618b5a94/html5/thumbnails/17.jpg)
• Helper Functions
• Placeholder text
• Autofocus
• Validation
• New Fields
Introduction to HTML5 By Kunal Johar Form Improvements
Brown Bag Presentations
![Page 18: Introduction to HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052504/554bb1bdb4c905b8618b5a94/html5/thumbnails/18.jpg)
• 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
Brown Bag Presentations
![Page 19: Introduction to HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052504/554bb1bdb4c905b8618b5a94/html5/thumbnails/19.jpg)
• 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
Brown Bag Presentations
![Page 20: Introduction to HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052504/554bb1bdb4c905b8618b5a94/html5/thumbnails/20.jpg)
• 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
Brown Bag Presentations
![Page 21: Introduction to HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052504/554bb1bdb4c905b8618b5a94/html5/thumbnails/21.jpg)
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