Your SlideShare is downloading. ×
0
HTML5 Introduction by Dhepthi L
HTML5 Introduction by Dhepthi L
HTML5 Introduction by Dhepthi L
HTML5 Introduction by Dhepthi L
HTML5 Introduction by Dhepthi L
HTML5 Introduction by Dhepthi L
HTML5 Introduction by Dhepthi L
HTML5 Introduction by Dhepthi L
HTML5 Introduction by Dhepthi L
HTML5 Introduction by Dhepthi L
HTML5 Introduction by Dhepthi L
HTML5 Introduction by Dhepthi L
HTML5 Introduction by Dhepthi L
HTML5 Introduction by Dhepthi L
HTML5 Introduction by Dhepthi L
HTML5 Introduction by Dhepthi L
HTML5 Introduction by Dhepthi L
HTML5 Introduction by Dhepthi L
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 Introduction by Dhepthi L

1,089

Published on

An introduction to HTML5 by Dhepthi L. …

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,089
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
36
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. An Introduction on HTML5 Spritle Software Private Limited | Spritle.com By Dhepthi. L
  • 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. 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. http://www.Spritle.com Copyright: Spritle Software Private Limited HTML 4.1 vs HTML5 <ul><li>&lt;!DOCTYPE HTML&gt;. </li></ul><ul><li>&lt;abbr&gt; tag used instead of &lt;acronym&gt;. </li></ul><ul><li>&lt;video&gt; and &lt;audio&gt; 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. SEMANTIC STRUCTURE
  • 6. MULTIMEDIA EFFECTS HTML + JS AUDIO AND VIDEO ELEMENT <ul><li>&lt;audio&gt; and &lt;video&gt; elements </li></ul>
  • 7. GRAPHICS EFFECTS HTML + JS CANVAS 2D AND SVG ELEMENT <ul><li>&lt;canvas&gt; tag used for drawing paths, boxes, circles, characters and adding images with JS manipulation . </li></ul>
  • 8. FILE/HARDWARE ACCESS JS NATIVE DRAG AND DROP <ul><li>Drag and Drop of text and images handled through listeners. </li></ul>
  • 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. 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. 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(&apos;worker.js&apos;); w.onmessage = function (e) { txt= e.data; }; postMessage(data);   </li></ul>
  • 12. MARKUP ELEMENTS IN HTML5 HTML METER AND PROGESS ELEMENT
  • 13. MARKUP ELEMENTS IN HTML5 HTML MENU AND COMMAND ELEMENT
  • 14. CSS3 ELEMENTS IN HTML5 CSS SELECTORS
  • 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. END NOTE http://www.Spritle.com Copyright: Spritle Software Private Limited
  • 17. Any Questions http://www.Spritle.com Copyright: Spritle Software Private Limited
  • 18. http://www.Spritle.com Copyright: Spritle Software Private Limited

×