Naveen Prabhu Quadwave Consulting Pvt.Ltd.. Agenda HTML 5 – The Standards Browsers and HTML5...
-
Upload
maximillian-doyle -
Category
Documents
-
view
216 -
download
2
Transcript of 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
HTML 5 – Web Designer Outlook, Continued….
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
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!