Introduction to html5

HTML5: INTRODUCTION
By Muktadiur Rahman
March 14, 2012

HTML5
 http://www.20thingsilearned.com/en-US/theend/1
 http://cinema-series.orange.fr/evenement/universeries/en/
 http://agent8ball.com/
 http://www.nakshart.com/#
 http://www.ro.me/film
 http://www.20thingsilearned.com/en-US

Agenda
 HTML5 Structure & Semantic
 Web Form
 Web Worker
 HTML5 Storage
 Audio &Video, Geo location
 Web Sockets
 Web Messaging
 Microdata, History API
 CSS3 & Best Practices
 Drag & Drop
 Canvas

Web From
http://slides.html5rocks.com/#new-form-types

Web Worker
 HTML5 Web Workers are essentially threads that
are created via JavaScript. Yes, that's right, the
ability to create new threads in the browser

 http://www.w3schools.com/html5/html5_webworke
rs.asp

Web Storage
 Session Storage
 Local Storage
 Database Storage
 File API

http://slides.html5rocks.com/#web-storage

Microdata
 Microdata is a standardized way to provide additional
semantics in your web pages.
 Microdata lets you define your own customized elements and
start embedding custom properties in your web pages. At a
high level, microdata consists of a group of name-value pairs.
 The groups are called items, and each name-value pair is
a property. Items and properties are represented by regular
elements.

http://slides.html5rocks.com/#link-relations

History API
 HTML5 introducing the new history API.
 The history API has been around for quite a long time now. It
has been used in the past to force the browser to go back to
its previous state
 Following event is fired off when someone has pressed
forward or backward :
window.history.pushState(stateObj,title,url)
window.history.replaceState(stateObj,title,url)
window.onpopstate = function(event) { /** **/ }
http://slides.html5rocks.com/#history-api

Audio & Video
 Audio
 Video

http://slides.html5rocks.com/#video-audio

Geo location
 The HTML5 Geolocation API is used to get the
geographical position of a user.
 Since this can compromise user privacy, the position
is not available unless the user approves it

http://slides.html5rocks.com/#geolocation

Web Sockets
 Web Sockets is a next-generation bidirectional
communication technology for web applications which
operates over a single socket and is exposed via a JavaScript
interface in HTML 5 compliant browsers.
 Once you get a Web Socket connection with the web server,
you can send data from browser to server by calling
a send() method, and receive data from server to browser by
an onmessageevent handler.

http://slides.html5rocks.com/#web-workers

Web Messaging
 Communicate across domains
 Across window objects
 With web worker
 String Transfer only

CSS3 & Best Practices
http://slides.html5rocks.com/#css-selectors

Drag & Drop

 Now HTML 5 came up with a Drag and Drop (DnD)
API that brings native DnD support to the browser
making it much easier to code up.
 HTML 5 DnD is supported by all the major browsers
like Chrome, Firefox 3.5 and Safari 4 etc

http://slides.html5rocks.com/#hardware-access-title

Canvas
 The HTML5 <canvas> element is used to draw
graphics, on the fly, via scripting (usually
JavaScript).
 The <canvas> element is only a container for
graphics, you must use a script to actually draw the
graphics.
 A canvas is a drawable region defined in HTML
code with height and width attributes.

http://slides.html5rocks.com/#canvas-2d

Resources
 https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-
browser-Polyfills
 http://www.whatwg.org/specs/web-apps/current-
work/multipage/
 http://html5doctor.com/element-index/
 http://www.w3schools.com/html5/html5_new_elements.asp

Introduction to html5

More Related Content

What's hot

Similar to Introduction to html5

Recently uploaded

Introduction to html5