• Like
HTML5 Introduction by Dhepthi L
Upcoming SlideShare
Loading in...5
×
Uploaded on

An introduction to HTML5 by Dhepthi L. …

An introduction to HTML5 by Dhepthi L.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
993
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
33
Comments
0
Likes
0

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