HTML5 – Should you or Should you not?

unevenfitterInternet και Εφαρμογές Web

20 Ιουν 2012 (πριν από 5 χρόνια και 4 μήνες)

314 εμφανίσεις

HTML5


SHOULD YOU OR
SHOULD YOU NOT?

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 <!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


HTML 5


Web Designer Outlook,
Continued….


New attributes



Attribute

Description

Autocomplete

ON/OFF. In case of “on”, browser
獴潲敳 瑨t 癡汵攬 a畴漠晩汬l睨w渠瑨t
畳敲⁶楳e瑳t瑨t 獡se

景牭f湥硴n瑩浥


䅵瑯景A畳

䅵瑯景A畳⸠䥮灵琠晩敬d

楳 景f畳敤e潮o
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