HTML5: INTRODUCTIONBy 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

HTML5

HTML5

HTML5

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

HTML5 Structural & Semantic

HTML5 Structural & Semantic

HTML5 Structural & Semantic

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

ments.asp