View
1.073
Download
1
Category
Tags:
Preview:
DESCRIPTION
An introduction to HTML5 by Dhepthi L.
Citation preview
Spritle Software Private Limited | Spritle.com
An Introductionon
HTML5
ByDhepthi. L
AGENDA
IntroductionHTML 4.1 VS HTML 5.0Semantic structureFeaturesConclusionQuestions
http://www.Spritle.comCopyright: 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.comCopyright: Spritle Software Private Limited
http://www.Spritle.comCopyright: Spritle Software Private Limited
HTML 4.1 vs HTML5 <!DOCTYPE HTML>.
<abbr> tag used instead of <acronym>.
<video> and <audio> elements
getElementByClassName(),querySelectorAll
(), querySelector() selectors.
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.
GEOLOCATIONJS GOOGLE API V3 FOR GEOLOCATION
HTML5 uses Google API V3
navigator.geolocation.getCurrentPosition(p),
p.coords.lat,lon
WEB STORAGEJS 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
HTML MENU AND COMMAND ELEMENT
MARKUP 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;
CSS3 ELEMENTS IN HTML5
END NOTE
http://www.Spritle.comCopyright: Spritle Software Private Limited
Any Questions
http://www.Spritle.comCopyright: Spritle Software Private Limited
http://www.Spritle.comCopyright: Spritle Software Private Limited
Recommended