1 / 24

HTML5 – Should you or Should you not?

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.

arnaldo
Download Presentation

HTML5 – Should you or Should you not?

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Naveen Prabhu Quadwave Consulting Pvt.Ltd. HTML5 – Should you or Should you not?

  2. Agenda • HTML 5 – The Standards • Browsers and HTML5 support • HTML5 Learnability • Perspectives of Web Designer, Developer and End User

  3. 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

  4. 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

  5. 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

  6. 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

  7. HTML 5 – Different Perspective • Browser Implementation Outlook • Web Designer Outlook • Web Programmer Outlook • End User Outlook

  8. 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

  9. 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

  10. HTML 5 – Browser Outlook, Continued… • Standards remain, Rendering differs

  11. HTML 5 – Web Designer Outlook • Better Layout Structure: New Structural Elements • <section> • <header> • <nav> • <article> • <aside> • <footer> <header> <section> <nav> <aside> <header> <header> <footer> <footer>

  12. 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

  13. HTML 5 – Web Designer Outlook, Continued…. • New attributes

  14. HTML 5 – Web Designer Outlook, Continued…. • New <input> type(s)

  15. HTML 5 – Web Designer Outlook, Continued…. • Media Tags • <audio> • Attributes: autoplay, controls, loop, src • <video> • Attributes: autoplay, controls, loop, height, width, src

  16. HTML 5 – Web Programmer Outlook • HTML5 APIs • Canvas • Drag and Drop • Offline Applications • Local Storage • Extension to HTMLDocument

  17. HTML 5 – Web Programmer Outlook, Continued…. • <Canvas> • creates a fixed size drawing surface that exposes one or more rendering contexts • getContext(“2d”)

  18. HTML 5 – Web Programmer Outlook, Continued…. • Drag and Drop • <element> attribute draggable = “true” • Events: dragstart, dragstop

  19. 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()

  20. 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)

  21. HTML 5 – Web Programmer Outlook, Continued…. • HTMLDocument Object Extensions: • getElementsByClassName() • innerHTML • hasFocus • getSelection()

  22. HTML 5 – End User Outlook • Provides a very rich user experience without Plug-ins • RIA replacement? • Better Performance • Leverages GPU for better graphical experience

  23. HTML5 – Reference sites • www.beautyoftheweb.com • http://ie.microsoft.com/testdrive • Bing html5 demos for more…

  24. Thank You! naveen@quadave.com

More Related