naveen prabhu quadwave consulting pvt ltd l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
HTML5 – Should you or Should you not? PowerPoint Presentation
Download Presentation
HTML5 – Should you or Should you not?

Loading in 2 Seconds...

play fullscreen
1 / 24

HTML5 – Should you or Should you not? - PowerPoint PPT Presentation


  • 253 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'HTML5 – Should you or Should you not?' - arnaldo


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
agenda
Agenda
  • HTML 5 – The Standards
  • Browsers and HTML5 support
  • HTML5 Learnability
  • Perspectives of Web Designer, Developer and End User
html5 the standards
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
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
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
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
HTML 5 – Different Perspective
  • Browser Implementation Outlook
  • Web Designer Outlook
  • Web Programmer Outlook
  • End User Outlook
html 5 browser 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
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 continued10
HTML 5 – Browser Outlook, Continued…
  • Standards remain, Rendering differs
html 5 web designer outlook
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>

html 5 web designer outlook continued
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 continued15
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
HTML 5 – Web Programmer Outlook
  • HTML5 APIs
    • Canvas
    • Drag and Drop
    • Offline Applications
    • Local Storage
    • Extension to HTMLDocument
html 5 web programmer outlook continued
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 continued18
HTML 5 – Web Programmer Outlook, Continued….
  • Drag and Drop
    • <element> attribute draggable = “true”
    • Events: dragstart, dragstop
html 5 web programmer outlook continued19
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 continued20
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 continued21
HTML 5 – Web Programmer Outlook, Continued….
  • HTMLDocument Object Extensions:
    • getElementsByClassName()
    • innerHTML
    • hasFocus
    • getSelection()
html 5 end user outlook
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
HTML5 – Reference sites
  • www.beautyoftheweb.com
  • http://ie.microsoft.com/testdrive
  • Bing html5 demos for more…
slide24

Thank You!

naveen@quadave.com