HTML5 Introduction by Dhepthi L

An Introduction on HTML5 Spritle Software Private Limited | Spritle.com By Dhepthi. L

AGENDA
Introduction
HTML 4.1 VS HTML 5.0
Semantic structure
Features
Conclusion
Questions
http://www.Spritle.com Copyright: Spritle Software Private Limited

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 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 ..

SEMANTIC STRUCTURE

MULTIMEDIA EFFECTS HTML + JS AUDIO AND VIDEO ELEMENT
<audio> and <video> elements

GRAPHICS EFFECTS HTML + JS CANVAS 2D AND SVG ELEMENT
<canvas> tag used for drawing paths, boxes, circles, characters and adding images with JS manipulation .

FILE/HARDWARE ACCESS JS NATIVE DRAG AND DROP
Drag and Drop of text and images handled through listeners.

GEOLOCATION JS GOOGLE API V3 FOR GEOLOCATION
HTML5 uses Google API V3
navigator.geolocation.getCurrentPosition(p), p.coords.lat,lon

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.

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);

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
-box-shadow: 1px 9px 9px rgba(0, 0, 128, 0.247);
text-shadow: rgba(64, 64, 64, 0.496094) 0px 0px 0px;

END NOTE http://www.Spritle.com Copyright: Spritle Software Private Limited

Any Questions http://www.Spritle.com Copyright: Spritle Software Private Limited

HTML5 Introduction by Dhepthi L

by SPRITLE SOFTWARE PRIVATE LIMIT ED

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 3

Statistics

HTML5 Introduction by Dhepthi L Presentation Transcript