HTML5 * Should you or Should you not?
advertisement
Naveen Prabhu Quadwave Consulting Pvt.Ltd. HTML5 – SHOULD YOU OR SHOULD YOU NOT? Agenda HTML 5 – The Standards Browsers and HTML5 support HTML5 Learnability Perspectives of Web Designer, Developer and End User HTML5 - The standards HTML5 is the next major revision of the HTML standard, currently under development The HTML5 specification was adopted as the starting point of the work of the new HTML working group of the World Wide Web Consortium (W3C) in 2007 The working group published the First Public Working Draft of the specification on January 22, 2008 HTML5 - The standards, continued… The specification is an ongoing work, and is expected to remain so for many years and last heard, It is going to be a “Candidate Recommendation” only by 2012 Complete adoption is scheduled for 2022 HTML 5 - The Current Stand Parts of HTML5 are being and will be implemented in browsers before the whole specification reaches final Recommendation status All standard Browsers today implement support for HTML5 HTML 5 - Learnability HTML5 Syntax is what we know as current HTML and more No learning new syntax Backward compatibility HTML4.0 syntax is fully supported HTML 5 – Different Perspective Browser Implementation Outlook Web Designer Outlook Web Programmer Outlook End User Outlook HTML 5 – Browser Outlook The DOCTYPE A simple <!Doctype html> The <!DOCTYPE> declaration has to be the first line in the HTML document. The declaration is not an HTML tag; its an instruction to the browser HTML 5 – Browser Outlook, Continued… Managing Invalid Documents If a user agent encounters an element it does not recognize, it should try to render the element's content If a user agent encounters an attribute it does not recognize, it should ignore the entire attribute specification (i.e., the attribute and its value) If a user agent encounters an attribute value it doesn't recognize, it should use the default attribute value If it encounters an undeclared entity, the entity should be treated as character data HTML 5 – Browser Outlook, Continued… Standards remain, Rendering differs HTML 5 – Web Designer Outlook Better Layout Structure: New Structural Elements <header> <section> <section> <header> <header> <nav> <article> <nav> <header> <aside> <footer> <footer> <footer> <aside> HTML 5 – Web Designer Outlook, Continued…. Better Layout Structure: New Structural Elements Elements like header and footer are not meant to be only at the top and bottom of the page, meant more to be header and footer of each document section Not very different from <DIV> tag but are more semantically well defined in the document structure HTML 5 – Web Designer Outlook, Continued…. New attributes Attribute Description Autocomplete ON/OFF. In case of “on”, browser stores the value, auto fill when the user visits the same form next time Autofocus Autofocus. Input field is focused on page load. Required Required. Mandates input field value for the form submit action Dragabble True/false indicates if the element is dragabble or not HTML 5 – Web Designer Outlook, Continued…. New <input> type(s) Attribute Description Number/Range Restricts users to enter only numbers. Additional attributes min, max and step and value can convert the input to a slider control or a spin box date, month, week, time, date + time, and date + time - time zone Providers a date picker interface. Email Input type for Email Addresses URL Input field for URL address HTML 5 – Web Designer Outlook, Continued…. Media Tags <audio> Attributes: autoplay, controls, loop, src <video> Attributes: autoplay, controls, loop, height, width, src HTML 5 – Web Programmer Outlook HTML5 APIs Canvas Drag and Drop Offline Applications Local Storage Extension to HTMLDocument HTML 5 – Web Programmer Outlook, Continued…. <Canvas> creates a fixed size drawing surface that exposes one or more rendering contexts getContext(“2d”) HTML 5 – Web Programmer Outlook, Continued…. Drag and Drop <element> attribute draggable = “true” Events: dragstart, dragstop HTML 5 – Web Programmer Outlook, Continued…. Offline Applications Cache manifest file Every page of your web application needs a manifest attribute that points to the cache manifest for the entire application Manifest file should contain Content-Type header (text/cache-manifest) Forcible cache update – applicationCache.updated() HTML 5 – Web Programmer Outlook, Continued…. Local Storage Store data locally Similar to cookies, but can store much larger amount of data Same Origin Restrictions localStorage.setItem(key, value) localStorage.getItem(key) HTML 5 – Web Programmer Outlook, Continued…. HTMLDocument Object Extensions: getElementsByClassName() innerHTML hasFocus getSelection() HTML 5 – End User Outlook Provides a very rich user experience without Plug-ins RIA replacement? Better Performance Leverages GPU for better graphical experience HTML5 – Reference sites www.beautyoftheweb.com http://ie.microsoft.com/testdrive Bing html5 demos for more… Thank You! naveen@quadave.com
