HTML5 Introduction by Dhepthi L
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML5 Introduction by Dhepthi L

on

  • 1,202 views

An introduction to HTML5 by Dhepthi L.

An introduction to HTML5 by Dhepthi L.

Statistics

Views

Total Views
1,202
Views on SlideShare
1,199
Embed Views
3

Actions

Likes
0
Downloads
33
Comments
0

1 Embed 3

http://localhost 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 Introduction by Dhepthi L Presentation 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