HTML 5 - A step towards semantic web<br />SachinKhosla<br />Founder, digimantra<br />
What’s coming ?<br />HTML – Show me what is it ?<br />Latest in the WEB<br />Web Workers<br />WEB storage API<br />CSS3<br...
HTML5<br />What ? When ? How ?<br />W3C & WHATWG<br />Web Hypertext Application<br /> Technology Working Group<br /> Logo<...
HTML5 structured page<br /><header><h1>Hello</h1></header><br />  	<nav><p>Menu</p></nav><br />  <section><br />  	  <p>Se...
Image credits – Sitepoint.com<br />
What else ?<br />Forms<br />Required field<br />Autofocus<br />Date<br />Slider<br />Audio & Video<br />Canvas (dynamic sc...
RIA<br />Adobe Flash<br />Microsoft SilverlightApache Pivot  <br />		Sun JavaFX<br />
Get involved ?<br />http://www.whatwg.org/news/start<br />Mailing list<br />Twitter account<br />IRC<br />
Web Workers – what is it ?<br />
Spawning a worker<br />varmyWorker = new Worker('my_worker.js');<br />myWorker.onmessage = function(event) <br />{<br />	/...
Web Storage<br />Why do we require this ?<br />How do we do it ?<br />Cookie<br />Hidden form values<br />Query string<br ...
Why not cookie ?<br /><ul><li> Low size
 Bad taste (multiple tabs)
 Cross site scripting</li></li></ul><li>What’s better then ?<br />You know what’s better for you<br />
The cake<br />It isn't a cake – its Web Storage<br />Session Storage<br />Local Storage<br />
Recipe<br />Session Storage Recipe<br />sessionStorage.setItem(key,value);<br />Local Storage Recipe<br />localStorage.set...
What good is CSS3 <br />Transparency<br />rgba(255, 0, 0, 0.2);<br />Web Fonts<br />@font-face {   src: url("gargi.ttf"); ...
Semantic web<br />HOW ?<br />
Upcoming SlideShare
Loading in …5
×

Html 5 a step towards semantic web

2,815 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,815
On SlideShare
0
From Embeds
0
Number of Embeds
184
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html 5 a step towards semantic web

  1. 1. HTML 5 - A step towards semantic web<br />SachinKhosla<br />Founder, digimantra<br />
  2. 2. What’s coming ?<br />HTML – Show me what is it ?<br />Latest in the WEB<br />Web Workers<br />WEB storage API<br />CSS3<br />Semantic WEB<br />DEMOS<br />
  3. 3. HTML5<br />What ? When ? How ?<br />W3C & WHATWG<br />Web Hypertext Application<br /> Technology Working Group<br /> Logo<br />
  4. 4. HTML5 structured page<br /><header><h1>Hello</h1></header><br /> <nav><p>Menu</p></nav><br /> <section><br /> <p>Section</p><br /> <article><p>article 1</p></article><br /> <article><p>article 2</p></article><br /> </section><br /> <footer><p>The footer</p></footer><br />
  5. 5. Image credits – Sitepoint.com<br />
  6. 6. What else ?<br />Forms<br />Required field<br />Autofocus<br />Date<br />Slider<br />Audio & Video<br />Canvas (dynamic scriptable rendering of 2D bitmap images)<br />Auto-complete using datalist<br />
  7. 7. RIA<br />Adobe Flash<br />Microsoft SilverlightApache Pivot <br /> Sun JavaFX<br />
  8. 8. Get involved ?<br />http://www.whatwg.org/news/start<br />Mailing list<br />Twitter account<br />IRC<br />
  9. 9. Web Workers – what is it ?<br />
  10. 10. Spawning a worker<br />varmyWorker = new Worker('my_worker.js');<br />myWorker.onmessage = function(event) <br />{<br /> //event has the data or the return values<br /> alert("Called back by the worker! ");<br />};<br />
  11. 11. Web Storage<br />Why do we require this ?<br />How do we do it ?<br />Cookie<br />Hidden form values<br />Query string<br />http://dev.w3.org/html5/webstorage/<br />
  12. 12. Why not cookie ?<br /><ul><li> Low size
  13. 13. Bad taste (multiple tabs)
  14. 14. Cross site scripting</li></li></ul><li>What’s better then ?<br />You know what’s better for you<br />
  15. 15. The cake<br />It isn't a cake – its Web Storage<br />Session Storage<br />Local Storage<br />
  16. 16. Recipe<br />Session Storage Recipe<br />sessionStorage.setItem(key,value);<br />Local Storage Recipe<br />localStorage.setItem(key,value);<br />
  17. 17. What good is CSS3 <br />Transparency<br />rgba(255, 0, 0, 0.2);<br />Web Fonts<br />@font-face { src: url("gargi.ttf"); <br />font-family: "gargi"; <br />}<br />Text shadow<br /> text-shadow: 2px 2px2px #000;<br />
  18. 18. Semantic web<br />HOW ?<br />
  19. 19. THANKS<br />Web – http://digimantra.com<br />Twitter - @realin<br />Facebook – http://facebook.com/sachinkhosla<br />

×