0
An Introduction on HTML5 Spritle Software Private Limited | Spritle.com By Dhepthi. L
AGENDA <ul><li>Introduction </li></ul><ul><li>HTML 4.1 VS HTML 5.0 </li></ul><ul><li>Semantic structure </li></ul><ul><li>...
INTRODUCTION <ul><li>HTML5    HTML + JS + CSS </li></ul><ul><li>W3C + WHATWG </li></ul><ul><li>Target: </li></ul><ul><ul>...
http://www.Spritle.com Copyright: Spritle Software Private Limited  HTML 4.1 vs HTML5 <ul><li><!DOCTYPE HTML>. </li></ul><...
SEMANTIC STRUCTURE
MULTIMEDIA EFFECTS  HTML + JS  AUDIO  AND VIDEO ELEMENT <ul><li><audio>  and  <video>  elements </li></ul>
GRAPHICS EFFECTS  HTML + JS  CANVAS 2D  AND SVG  ELEMENT <ul><li><canvas>  tag used for drawing paths, boxes, circles, cha...
FILE/HARDWARE ACCESS  JS  NATIVE DRAG AND DROP <ul><li>Drag and Drop of text and images handled through listeners. </li></ul>
GEOLOCATION JS  GOOGLE  API  V3  FOR GEOLOCATION <ul><li>HTML5 uses Google API V3 </li></ul><ul><li>navigator.geolocation....
WEB STORAGE JS  LOCAL/SESSION STORAGE FOR PERSISTENCE <ul><li>HTML5 uses localStorage(no time limit) for persistent storag...
REAL TIME COMMUNICATION JS  WEB WORKERS <ul><li>To handle load-heavy operations in a web browser, web workers are used. </...
MARKUP ELEMENTS IN HTML5  HTML METER AND PROGESS ELEMENT
MARKUP ELEMENTS IN HTML5  HTML MENU AND COMMAND ELEMENT
CSS3 ELEMENTS IN HTML5  CSS SELECTORS
CSS3 ELEMENTS IN HTML5  CSS Gradient Background, Shadow Effect <ul><li>-box-shadow: 1px 9px 9px rgba(0, 0, 128, 0.247);  <...
END NOTE http://www.Spritle.com Copyright: Spritle Software Private Limited
Any Questions http://www.Spritle.com Copyright: Spritle Software Private Limited
http://www.Spritle.com Copyright: Spritle Software Private Limited
Upcoming SlideShare
Loading in...5
×

HTML5 Introduction by Dhepthi L

1,097

Published on

An introduction to HTML5 by Dhepthi L.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,097
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
36
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 Introduction by Dhepthi L"

  1. 1. An Introduction on HTML5 Spritle Software Private Limited | Spritle.com By Dhepthi. L
  2. 2. AGENDA <ul><li>Introduction </li></ul><ul><li>HTML 4.1 VS HTML 5.0 </li></ul><ul><li>Semantic structure </li></ul><ul><li>Features </li></ul><ul><li>Conclusion </li></ul><ul><li>Questions </li></ul>http://www.Spritle.com Copyright: Spritle Software Private Limited
  3. 3. INTRODUCTION <ul><li>HTML5  HTML + JS + CSS </li></ul><ul><li>W3C + WHATWG </li></ul><ul><li>Target: </li></ul><ul><ul><li>Platform for streaming video capabilities into browser applications </li></ul></ul><ul><ul><li>Reduce the need for external plug-ins (like Flash) </li></ul></ul><ul><ul><li>Better error handling </li></ul></ul><ul><ul><li>Local off-line storage </li></ul></ul><ul><ul><li>Improved User Experience with Meter, Progress, drag-n-drop and so on. </li></ul></ul>http://www.Spritle.com Copyright: Spritle Software Private Limited
  4. 4. http://www.Spritle.com Copyright: Spritle Software Private Limited HTML 4.1 vs HTML5 <ul><li><!DOCTYPE HTML>. </li></ul><ul><li><abbr> tag used instead of <acronym>. </li></ul><ul><li><video> and <audio> elements </li></ul><ul><li>getElementByClassName(),querySelectorAll(), querySelector() s electors. </li></ul><ul><li>ClassList elements add(), remove(), contains() </li></ul><ul><li>onbeforeonload, onerror, ondrag, onplay, onpause .. </li></ul>
  5. 5. SEMANTIC STRUCTURE
  6. 6. MULTIMEDIA EFFECTS HTML + JS AUDIO AND VIDEO ELEMENT <ul><li><audio> and <video> elements </li></ul>
  7. 7. GRAPHICS EFFECTS HTML + JS CANVAS 2D AND SVG ELEMENT <ul><li><canvas> tag used for drawing paths, boxes, circles, characters and adding images with JS manipulation . </li></ul>
  8. 8. FILE/HARDWARE ACCESS JS NATIVE DRAG AND DROP <ul><li>Drag and Drop of text and images handled through listeners. </li></ul>
  9. 9. GEOLOCATION JS GOOGLE API V3 FOR GEOLOCATION <ul><li>HTML5 uses Google API V3 </li></ul><ul><li>navigator.geolocation.getCurrentPosition(p), p.coords.lat,lon </li></ul>
  10. 10. WEB STORAGE JS LOCAL/SESSION STORAGE FOR PERSISTENCE <ul><li>HTML5 uses localStorage(no time limit) for persistent storage and use sessionStorage for per tab storage. </li></ul><ul><li>getItem() and setItem(key,value) for retrieval and storage. </li></ul>
  11. 11. REAL TIME COMMUNICATION JS WEB WORKERS <ul><li>To handle load-heavy operations in a web browser, web workers are used. </li></ul><ul><li>Web Workers loads the JavaScript file dynamically and process code in a background level, not affecting the user interface. </li></ul><ul><li>Example: var w = new Worker('worker.js'); w.onmessage = function (e) { txt= e.data; }; postMessage(data);   </li></ul>
  12. 12. MARKUP ELEMENTS IN HTML5 HTML METER AND PROGESS ELEMENT
  13. 13. MARKUP ELEMENTS IN HTML5 HTML MENU AND COMMAND ELEMENT
  14. 14. CSS3 ELEMENTS IN HTML5 CSS SELECTORS
  15. 15. CSS3 ELEMENTS IN HTML5 CSS Gradient Background, Shadow Effect <ul><li>-box-shadow: 1px 9px 9px rgba(0, 0, 128, 0.247); </li></ul><ul><li>text-shadow: rgba(64, 64, 64, 0.496094) 0px 0px 0px; </li></ul>
  16. 16. END NOTE http://www.Spritle.com Copyright: Spritle Software Private Limited
  17. 17. Any Questions http://www.Spritle.com Copyright: Spritle Software Private Limited
  18. 18. http://www.Spritle.com Copyright: Spritle Software Private Limited
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×