Your SlideShare is downloading. ×
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,064

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

×