Introduction to html5
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Introduction to html5

on

  • 775 views

 

Statistics

Views

Total Views
775
Views on SlideShare
775
Embed Views
0

Actions

Likes
1
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction to html5 Presentation Transcript

  • 1. HTML5: INTRODUCTIONBy Muktadiur RahmanMarch 14, 2012
  • 2. 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
  • 3. HTML5
  • 4. HTML5
  • 5. HTML5
  • 6. 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
  • 7. HTML5 Structural & Semantic
  • 8. HTML5 Structural & Semantic
  • 9. HTML5 Structural & Semantic
  • 10. Web Fromhttp://slides.html5rocks.com/#new-form-types
  • 11. Web Worker HTML5 Web Workers are essentially threads that are created via JavaScript. Yes, thats right, the ability to create new threads in the browser http://www.w3schools.com/html5/html5_webworke rs.asp
  • 12. Web Storage Session Storage Local Storage Database Storage File APIhttp://slides.html5rocks.com/#web-storage
  • 13. 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
  • 14. 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
  • 15. Audio & Video Audio Videohttp://slides.html5rocks.com/#video-audio
  • 16. 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 ithttp://slides.html5rocks.com/#geolocation
  • 17. 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
  • 18. Web Messaging Communicate across domains Across window objects With web worker String Transfer only
  • 19. CSS3 & Best Practiceshttp://slides.html5rocks.com/#css-selectors
  • 20. 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 etchttp://slides.html5rocks.com/#hardware-access-title
  • 21. 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
  • 22. 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