introduction to html5
TRANSCRIPT
![Page 1: Introduction to html5](https://reader036.vdocument.in/reader036/viewer/2022062303/554bb253b4c90594278b457c/html5/thumbnails/1.jpg)
HTML5: INTRODUCTIONBy Muktadiur Rahman
March 14, 2012
![Page 2: Introduction to html5](https://reader036.vdocument.in/reader036/viewer/2022062303/554bb253b4c90594278b457c/html5/thumbnails/2.jpg)
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
![Page 3: Introduction to html5](https://reader036.vdocument.in/reader036/viewer/2022062303/554bb253b4c90594278b457c/html5/thumbnails/3.jpg)
HTML5
![Page 4: Introduction to html5](https://reader036.vdocument.in/reader036/viewer/2022062303/554bb253b4c90594278b457c/html5/thumbnails/4.jpg)
HTML5
![Page 5: Introduction to html5](https://reader036.vdocument.in/reader036/viewer/2022062303/554bb253b4c90594278b457c/html5/thumbnails/5.jpg)
HTML5
![Page 6: Introduction to html5](https://reader036.vdocument.in/reader036/viewer/2022062303/554bb253b4c90594278b457c/html5/thumbnails/6.jpg)
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
![Page 7: Introduction to html5](https://reader036.vdocument.in/reader036/viewer/2022062303/554bb253b4c90594278b457c/html5/thumbnails/7.jpg)
HTML5 Structural & Semantic
![Page 8: Introduction to html5](https://reader036.vdocument.in/reader036/viewer/2022062303/554bb253b4c90594278b457c/html5/thumbnails/8.jpg)
HTML5 Structural & Semantic
![Page 9: Introduction to html5](https://reader036.vdocument.in/reader036/viewer/2022062303/554bb253b4c90594278b457c/html5/thumbnails/9.jpg)
HTML5 Structural & Semantic
![Page 10: Introduction to html5](https://reader036.vdocument.in/reader036/viewer/2022062303/554bb253b4c90594278b457c/html5/thumbnails/10.jpg)
Web From
http://slides.html5rocks.com/#new-form-types
![Page 11: Introduction to html5](https://reader036.vdocument.in/reader036/viewer/2022062303/554bb253b4c90594278b457c/html5/thumbnails/11.jpg)
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
![Page 12: Introduction to html5](https://reader036.vdocument.in/reader036/viewer/2022062303/554bb253b4c90594278b457c/html5/thumbnails/12.jpg)
Web Storage
Session Storage Local Storage Database Storage File API
http://slides.html5rocks.com/#web-storage
![Page 13: Introduction to html5](https://reader036.vdocument.in/reader036/viewer/2022062303/554bb253b4c90594278b457c/html5/thumbnails/13.jpg)
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
![Page 14: Introduction to html5](https://reader036.vdocument.in/reader036/viewer/2022062303/554bb253b4c90594278b457c/html5/thumbnails/14.jpg)
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
![Page 16: Introduction to html5](https://reader036.vdocument.in/reader036/viewer/2022062303/554bb253b4c90594278b457c/html5/thumbnails/16.jpg)
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
![Page 17: Introduction to html5](https://reader036.vdocument.in/reader036/viewer/2022062303/554bb253b4c90594278b457c/html5/thumbnails/17.jpg)
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
![Page 18: Introduction to html5](https://reader036.vdocument.in/reader036/viewer/2022062303/554bb253b4c90594278b457c/html5/thumbnails/18.jpg)
Web Messaging
Communicate across domains Across window objects With web worker String Transfer only
![Page 19: Introduction to html5](https://reader036.vdocument.in/reader036/viewer/2022062303/554bb253b4c90594278b457c/html5/thumbnails/19.jpg)
CSS3 & Best Practices
http://slides.html5rocks.com/#css-selectors
![Page 20: Introduction to html5](https://reader036.vdocument.in/reader036/viewer/2022062303/554bb253b4c90594278b457c/html5/thumbnails/20.jpg)
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
![Page 21: Introduction to html5](https://reader036.vdocument.in/reader036/viewer/2022062303/554bb253b4c90594278b457c/html5/thumbnails/21.jpg)
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
![Page 22: Introduction to html5](https://reader036.vdocument.in/reader036/viewer/2022062303/554bb253b4c90594278b457c/html5/thumbnails/22.jpg)
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