HTML5 Introduction by Dhepthi L

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.



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


Any Questions



Technology

HTML5 Introduction by Dhepthi L