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
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)
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.
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.)
indexeddb : to store ur personalized information in ur browser instead of hitting server. a notepad file stores in ur local system
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
if browser supports canvas feature then go .otherwise use svg
11. HTML5 DOM Selection
CSS Selectors : taken concept from jquery
iterators : foreach newly introduced
getelementsbyclassname – live 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
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.
14. HTML5 AUDIO
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.
without doing browser refresh with the above concepts we can achieve.