Naveen Prabhu Quadwave Consulting Pvt.Ltd.

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  The 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 

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 tag but are more semantically well defined in the document structure

HTML 5 – Web Designer Outlook, Continued….  New attributes AttributeDescription AutocompleteON/OFF. In case of “on”, browser stores the value, auto fill when the user visits the same form next time AutofocusAutofocus. Input field is focused on page load. RequiredRequired. Mandates input field value for the form submit action DragabbleTrue/false indicates if the element is dragabble or not

HTML 5 – Web Designer Outlook, Continued….  New type(s) AttributeDescription Number/RangeRestricts 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. Input type for Addresses URLInput field for URL address

HTML 5 – Web Designer Outlook, Continued….  Media Tags   Attributes: autoplay, controls, loop, src   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….   creates a fixed size drawing surface that exposes one or more rendering contexts  getContext(“2d”)

HTML 5 – Web Programmer Outlook, Continued….  Drag and Drop  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    Bing html5 demos for more…

Thank You!