30th Jan 2014 session on HTMl5 by AJay kopperala(RD – Invensys)

1.It is compatible with all browsers even with mobile browsers.

2.ios has safari browser

3.new markup + javascript apis + CSS3 = html5

4. new controls : date input control, time input control, number control .

5. pinching ,zoom etc are the new requirements from mobile applications so they introduced new elements along with div so that we can zoom a particular area.

article aside audio source track
bdi ( Bidirectional isolation . to achieve arabic left to right writing)
canvas (drawing rectangles etc)
details summary
figure – figurecaption
main – screen readers wont touch the content inside main for zooming etc
mark – it will highlight the text
nav : if u want to put ur header on top,side elements on right side ,left side
time : to display the current datetime
wbr : word break. u are asking the browser to break the specified word in wbr tags instead of breaking other words by default.

check url for examples : http://www.w3schools.com

6. youtube is using html5 audio ,video native players coming with html5.

7. target ur application for html5 .it means u r targetting all browsers
all browser companies are targetting their browsers to html5 complaince.
so if u r making ur html5 complaince automatically it works for all browsers.

All browsers are not yet html5 complaince.
ie 10,11

http://www.CanIuse.com website tells you whether html5 feature supports or not for a browser.
(Can I use…

Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.)


New Javascript APIs

indexeddb : to store ur personalized information in ur browser instead of hitting server. a notepad file stores in ur local system
selection :
server-sent events : for push notifications
file api : read a file from ur system and upload to server
microdata : to store data in dom (its not indexeddb)
messaging : chat application . getting content without browser refresh
web sockets :chat application … it will create a communication thread between server and client and doesnt close until user tells.
geolocation : google map aps
offline web applications :
web storage : local storage and session storage
this is the replacement for cookies
at max 5 mb can be stored
web workers : it is like thread concept
we have heavy work for a request. it creates a thread and in the mean time another request came which is a light process. so it creates another thread for the lighter thread too.
xmlhttprequest level 2 : llar ajax request

Detecting HTML5 features with modernizr
Modernizr its a javascript plugin.
if browser supports canvas feature then go .otherwise use svg

11. HTML5 DOM Selection

CSS Selectors : taken concept from jquery
Query selector
Query SelectorAll
iterators : foreach newly introduced
getelementsbyclassname – live result
static result

12. New input elements :
color : its a color picker control
date : control
html4 recognises this as 3 controls textbox,button and a div control
but with html5 browsers renders as date instead of textbox,button,div
Datetime : control

Email,URL & Telephone
earlier we use to put a textbox and a regular expression to validate.but with html5 just put and no need to validate using regular expression
instead of anchor tag
.. helpful for mobile keyboard

value=”yellow submarine” />
patternMismatch : regular expression
rangeUnderflow : min,max,step
stepMismatch :

13. vide0 and audio formats

native video formats
native audio formats supported by html5
server content supports
take help from
http://www.caniuse.com tells u which and all formats video,audio supports.

src,autobuffer, autoplay


15. caption

16. From html5 some elements are removed

17. web storage : replacement to cookies. key value pairs
local storage : repository name storing in local storage. stores data in our system permanently
session storage : stores data in our system but vanishes once session closes.

indexeddb is advanced one stores data in flat file.its also keyvalue pairs

webstorage and indexeddb are not relational models.just these 2 are keyvalue.

notification events

without doing browser refresh with the above concepts we can achieve.


About ambatisreedhar


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s