naveen prabhu quadwave consulting pvt.ltd.. agenda html 5 – the standards browsers and html5...

HTML5 – SHOULD YOU OR SHOULD YOU NOT?

Naveen PrabhuQuadwave 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 <!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 <section> <header> <nav> <article> <aside> <footer>

<header>

<nav>

<aside>

<footer>

<section>

<header>

<header>

<footer>

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


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


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


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”)


Drag and Drop <element> attribute draggable = “true” Events: dragstart, dragstop


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


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)


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…

http://www.beautyoftheweb.com/

Thank You!

[email protected]