HTML5 Introduction by Dhepthi L
-
Upload
spritle-software-private-limit-ed -
Category
Technology
-
view
1.074 -
download
1
description
Transcript of HTML5 Introduction by Dhepthi L
![Page 1: HTML5 Introduction by Dhepthi L](https://reader036.fdocuments.in/reader036/viewer/2022070315/55514fbeb4c905f2288b5440/html5/thumbnails/1.jpg)
Spritle Software Private Limited | Spritle.com
An Introductionon
HTML5
ByDhepthi. L
![Page 2: HTML5 Introduction by Dhepthi L](https://reader036.fdocuments.in/reader036/viewer/2022070315/55514fbeb4c905f2288b5440/html5/thumbnails/2.jpg)
AGENDA
IntroductionHTML 4.1 VS HTML 5.0Semantic structureFeaturesConclusionQuestions
http://www.Spritle.comCopyright: Spritle Software Private Limited
![Page 3: HTML5 Introduction by Dhepthi L](https://reader036.fdocuments.in/reader036/viewer/2022070315/55514fbeb4c905f2288b5440/html5/thumbnails/3.jpg)
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
![Page 4: HTML5 Introduction by Dhepthi L](https://reader036.fdocuments.in/reader036/viewer/2022070315/55514fbeb4c905f2288b5440/html5/thumbnails/4.jpg)
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 ..
![Page 5: HTML5 Introduction by Dhepthi L](https://reader036.fdocuments.in/reader036/viewer/2022070315/55514fbeb4c905f2288b5440/html5/thumbnails/5.jpg)
SEMANTIC STRUCTURE
![Page 6: HTML5 Introduction by Dhepthi L](https://reader036.fdocuments.in/reader036/viewer/2022070315/55514fbeb4c905f2288b5440/html5/thumbnails/6.jpg)
MULTIMEDIA EFFECTS HTML + JS AUDIO AND VIDEO ELEMENT
•<audio> and <video> elements
![Page 7: HTML5 Introduction by Dhepthi L](https://reader036.fdocuments.in/reader036/viewer/2022070315/55514fbeb4c905f2288b5440/html5/thumbnails/7.jpg)
GRAPHICS EFFECTS HTML + JS CANVAS 2D AND SVG ELEMENT
<canvas> tag used for drawing paths,
boxes, circles, characters and adding images
with JS manipulation.
![Page 8: HTML5 Introduction by Dhepthi L](https://reader036.fdocuments.in/reader036/viewer/2022070315/55514fbeb4c905f2288b5440/html5/thumbnails/8.jpg)
FILE/HARDWARE ACCESS
JS NATIVE DRAG AND DROP
Drag and Drop of text and images
handled through listeners.
![Page 9: HTML5 Introduction by Dhepthi L](https://reader036.fdocuments.in/reader036/viewer/2022070315/55514fbeb4c905f2288b5440/html5/thumbnails/9.jpg)
GEOLOCATIONJS GOOGLE API V3 FOR GEOLOCATION
HTML5 uses Google API V3
navigator.geolocation.getCurrentPosition(p),
p.coords.lat,lon
![Page 10: HTML5 Introduction by Dhepthi L](https://reader036.fdocuments.in/reader036/viewer/2022070315/55514fbeb4c905f2288b5440/html5/thumbnails/10.jpg)
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.
![Page 11: HTML5 Introduction by Dhepthi L](https://reader036.fdocuments.in/reader036/viewer/2022070315/55514fbeb4c905f2288b5440/html5/thumbnails/11.jpg)
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);
![Page 12: HTML5 Introduction by Dhepthi L](https://reader036.fdocuments.in/reader036/viewer/2022070315/55514fbeb4c905f2288b5440/html5/thumbnails/12.jpg)
MARKUP ELEMENTS IN HTML5
HTML METER AND PROGESS ELEMENT
![Page 13: HTML5 Introduction by Dhepthi L](https://reader036.fdocuments.in/reader036/viewer/2022070315/55514fbeb4c905f2288b5440/html5/thumbnails/13.jpg)
HTML MENU AND COMMAND ELEMENT
MARKUP ELEMENTS IN HTML5
![Page 14: HTML5 Introduction by Dhepthi L](https://reader036.fdocuments.in/reader036/viewer/2022070315/55514fbeb4c905f2288b5440/html5/thumbnails/14.jpg)
CSS SELECTORS
CSS3 ELEMENTS IN HTML5
![Page 15: HTML5 Introduction by Dhepthi L](https://reader036.fdocuments.in/reader036/viewer/2022070315/55514fbeb4c905f2288b5440/html5/thumbnails/15.jpg)
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
![Page 16: HTML5 Introduction by Dhepthi L](https://reader036.fdocuments.in/reader036/viewer/2022070315/55514fbeb4c905f2288b5440/html5/thumbnails/16.jpg)
END NOTE
http://www.Spritle.comCopyright: Spritle Software Private Limited
![Page 17: HTML5 Introduction by Dhepthi L](https://reader036.fdocuments.in/reader036/viewer/2022070315/55514fbeb4c905f2288b5440/html5/thumbnails/17.jpg)
Any Questions
http://www.Spritle.comCopyright: Spritle Software Private Limited
![Page 18: HTML5 Introduction by Dhepthi L](https://reader036.fdocuments.in/reader036/viewer/2022070315/55514fbeb4c905f2288b5440/html5/thumbnails/18.jpg)
http://www.Spritle.comCopyright: Spritle Software Private Limited