0
Future of WWW<br />
What is HTML5?<br />HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology o...
AIM<br />Its core aims have been to<br />Improve the language with support for the latest multimedia.<br /> Easily readabl...
Semantics & Markup<br />Existing<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...
Semantics & Markup<br />
New Input<br />
New Input in Phone<br />
Offline / Storage<br />Web Storage<br />Web SQL Database<br />Application Cache<br />
Web Storage<br />Save text value on the client side<br />Example<br />window.localStorage.setItem('value', “Test Value”);<...
Web SQL Database<br />Store information in client side in SQL database structure<br />Example<br />vardb = window.openData...
Application Cache<br />Cache your application in browser so it can run without internet<br />Put in your HTML file<br /><h...
WebSocket<br />Full-duplex, bi-directional communication over the Web: Both the server and client can send data at any tim...
Geolocation<br />You can get user latitude and longitude from user browser (computer, phone).<br />User needs to give perm...
Graphics / Multimedia<br />Audio + Video<br />Canvas 2D<br />Canvas 3D (WebGL)<br />Inline SVG<br />
Audio + Video<br />Audio Example:<br /><audio id="audio" src="sound.mp3" controls></audio>document.getElementById("audio")...
Canvas 2D<br /><canvas id="canvas" width="838" height="220"></canvas><script>  varcanvasContext = document.getElementById(...
Canvas 3D (WebGL)<br />WebGL is a Web-based Graphics Library.<br />It extends the capability of the JavaScript programming...
Inline SVG<br />Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for describing tw...
Other Features<br />History API<br />Element.classList<br />New Selectors<br />Device Orientation<br />FileSystemAPIs<br /...
CSS 3<br />Hue/saturation/luminance color<br />Rounded corners<br />Gradients<br />Shadows<br />Reflection<br />Background...
Working with HTML5<br />How to detect if your browser support a HTML5 component?<br />You can check using JS<br />function...
Modernizr<br />Modernizr is an open source, MIT-licensed JavaScript library that detects support for many HTML5 & CSS3 fea...
Download the slides<br />You can go to this following link and download this slide.<br />http://thirdeye.ibtgames.com/<br />
References<br />http://en.wikipedia.org/wiki/HTML5<br />http://diveintohtml5.org/<br />http://slides.html5rocks.com<br />h...
Who am I?<br />MirzaAsif<br />mirza.asif@bluebd.com<br />CTO & Co-Founder of<br />Infrablue Technology Ltd<br />IBTGames L...
Question<br />
Upcoming SlideShare
Loading in...5
×

HTML5 - Future of Web

3,346

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,346
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
141
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 - Future of Web"

  1. 1. Future of WWW<br />
  2. 2. What is HTML5?<br />HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the latest revision of the HTML standard (originally created in 1990) and currently remains under development. <br />HTML5 ~= HTML + CSS + JS<br />
  3. 3. AIM<br />Its core aims have been to<br />Improve the language with support for the latest multimedia.<br /> Easily readable by humans<br />Consistently understood by computers and devices (web browsers, parsers etc.).<br />
  4. 4. Semantics & Markup<br />Existing<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"><br />HTML 5<br /><!DOCTYPE html><br />That’s it. Just 15 characters. It’s so easy.<br />
  5. 5. Semantics & Markup<br />
  6. 6. New Input<br />
  7. 7. New Input in Phone<br />
  8. 8. Offline / Storage<br />Web Storage<br />Web SQL Database<br />Application Cache<br />
  9. 9. Web Storage<br />Save text value on the client side<br />Example<br />window.localStorage.setItem('value', “Test Value”);<br />Retrieve<br />window.localStorage.getItem('value');<br />
  10. 10. Web SQL Database<br />Store information in client side in SQL database structure<br />Example<br />vardb = window.openDatabase("DBName", "1.0", "description", 5*1024*1024); //Create Database 5MB<br />db.transaction(function (tx) {  tx.executeSql('CREATE TABLE foo (id unique, text)');}); // Create a Table<br />db.transaction(function (tx) {   tx.executeSql('INSERT INTO foo (id, text) VALUES (1, “Whoa!")');}); // Insert vlaue<br />tx.executeSql('SELECT * FROM foo', [], function (tx, results) {  varlen = results.rows.length, i;  for (i = 0; i < len; i++) {    alert(results.rows.item(i).text);  }}); // Fetching data<br />
  11. 11. Application Cache<br />Cache your application in browser so it can run without internet<br />Put in your HTML file<br /><html manifest="cache.appcache"><br />cache.appcache:<br />CACHE MANIFEST# version 1.0.0CACHE:/html5/src/logic.js/html5/src/style.css/html5/src/background.pngNETWORK:*<br />
  12. 12. WebSocket<br />Full-duplex, bi-directional communication over the Web: Both the server and client can send data at any time, or even at the same time. Only the data itself is sent, without the overhead of HTTP headers, dramatically reducing band width.<br />Example:<br />var socket = new WebSocket('ws://html5rocks.websocket.org/echo');<br />socket.onopen = function(event) {<br />socket.send('Hello, WebSocket');<br />};<br />socket.onmessage = function(event) { alert(event.data); }<br />socket.onclose = function(event) { alert('closed'); }<br />
  13. 13. Geolocation<br />You can get user latitude and longitude from user browser (computer, phone).<br />User needs to give permission to share location.<br />Example:<br />if (navigator.geolocation) {<br />navigator.geolocation.getCurrentPosition(function(position) {<br />varlatLng = new google.maps.LatLng(<br />position.coords.latitude, position.coords.longitude);<br />var marker = new google.maps.Marker({position: latLng, map: map});<br />map.setCenter(latLng);<br /> }, errorHandler);<br />}<br />
  14. 14. Graphics / Multimedia<br />Audio + Video<br />Canvas 2D<br />Canvas 3D (WebGL)<br />Inline SVG<br />
  15. 15. Audio + Video<br />Audio Example:<br /><audio id="audio" src="sound.mp3" controls></audio>document.getElementById("audio").muted = false;<br />Video Example:<br /><video id="video" src="movie.webm" autoplay controls></video>document.getElementById("video").play();<br />
  16. 16. Canvas 2D<br /><canvas id="canvas" width="838" height="220"></canvas><script>  varcanvasContext = document.getElementById("canvas").getContext("2d");  canvasContext.fillRect(250, 25, 150, 100);  canvasContext.beginPath();  canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);  canvasContext.lineWidth = 15;  canvasContext.lineCap = 'round';  canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';  canvasContext.stroke();</script><br />
  17. 17. Canvas 3D (WebGL)<br />WebGL is a Web-based Graphics Library.<br />It extends the capability of the JavaScript programming language to allow it to generate interactive 3D graphics within any compatible web browser.<br />
  18. 18. Inline SVG<br />Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated).<br /><html>  <svg>    <circle id="myCircle" class="important" cx="50%" cy="50%" r="100"         fill="url(#myGradient)"        onmousedown="alert('hello');"/>  </svg></html><br />
  19. 19. Other Features<br />History API<br />Element.classList<br />New Selectors<br />Device Orientation<br />FileSystemAPIs<br />Desktop Drag-Out<br />Desktop Drag-In (File API)<br />Native Drag & Drop<br />Notifications<br />Speech Input<br />Form validation<br />
  20. 20. CSS 3<br />Hue/saturation/luminance color<br />Rounded corners<br />Gradients<br />Shadows<br />Reflection<br />Background enhancements<br />Transitions<br />Animations<br />And Lot<br />Selectors<br />Image-like display<br />Specific attributes<br />Negation<br />More specific targeting<br />Web fonts<br />Text wrapping<br />Columns<br />Text stroke<br />Opacity<br />*For demo go to http://slides.html5rocks.com/#css3-title<br />
  21. 21. Working with HTML5<br />How to detect if your browser support a HTML5 component?<br />You can check using JS<br />function supports_canvas() { <br />return !!document.createElement('canvas').getContext; <br />} <br />
  22. 22. Modernizr<br />Modernizr is an open source, MIT-licensed JavaScript library that detects support for many HTML5 & CSS3 features (http://www.modernizr.com/).<br />Put this script in head tag<br /><script src="modernizr.min.js"></script><br />Example testing canvas capability using modernizr<br />if (Modernizr.canvas) { <br />// let's draw some shapes! <br />} <br />else { <br />// no native canvas support available :( <br />}<br />
  23. 23. Download the slides<br />You can go to this following link and download this slide.<br />http://thirdeye.ibtgames.com/<br />
  24. 24. References<br />http://en.wikipedia.org/wiki/HTML5<br />http://diveintohtml5.org/<br />http://slides.html5rocks.com<br />http://diveintohtml5.org/peeks-pokes-and-pointers.html<br />
  25. 25. Who am I?<br />MirzaAsif<br />mirza.asif@bluebd.com<br />CTO & Co-Founder of<br />Infrablue Technology Ltd<br />IBTGames Ltd<br />PibLabs Ltd<br />
  26. 26. Question<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×