HTML5
ContentsHTML5 Origin Introduction Features Why HTMl5? Resources Demo HTML5 Applications.
Origin   HTML5 introduces many cutting-edge features that    enable developers to create apps and websites with the    fu...
Introduction   HTMl* is the core technology of the World Wide Web   With HTML, authors describe the structure of Web    ...
Features   Storage   File Access   Offline   Multimedia   Graphics   Geolocation
Storage   With HTML5, web pages can store data locally within    the users browser.   Earlier, this was done with cookie...
Storage   Two new objects for storing data on the client side: localStorage - stores data with no expiration date sessi...
Storage   The sessionStorage object is equal to the localStorage    object, except that it stores the data for only one  ...
File Access   HTML5 provides very powerful APIs to interact with    binary data and a users local file system.   The Fil...
File Accessfunction onInitFs(fs) { fs.root.getFile(log.txt, {}, function(fileEntry) {  // Get a File object representing t...
File Access
Offline Its becoming increasingly important for web-based  applications to be accessible offline. Yes, all browsers have...
Offline The manifest file is a simple text file, which tells the  browser what to cache (and what to never cache). The m...
Offline   <!DOCTYPE HTML>    <html manifest="demo.appcache">    </html>   CACHE MANIFEST    # 2012-02-21 v1.0.0    /them...
MultiMedia   Audio and Video became first-class citizens on the Web    with HTML5 the same way that other media types lik...
MultiMedia To play an audio file in HTML5:     <audio controls>     <source src="horse.ogg" type="audio/ogg">    <source s...
Graphics   The web has always been a visual medium, but a    restricted one at best.   Until recently, HTML developers w...
Graphics The HTML5 <canvas> element is used to draw  graphics, on the fly, via scripting (usually JavaScript). The <canv...
Geolocation The HTML5 Geolocation API is used to get the  geographical position of a user. Since this can compromise use...
Geolocation<script>   var x=document.getElementById(“geo");      function getLocation()       {        if (navigator.geolo...
Why HTML5?   Non - Monolithic technology   A collection of features, technologies, and APIs   Fast. Secure. Responsive....
Why HTML5?   Enables you to create complex applications that    previously could be created only for desktop platforms. ...
Resources http://w3c.org http://html5readiness.com https://developer.mozilla.org/en/HTML/HTML5 http://w3schools.com/ht...
Demo
Demo
Upcoming SlideShare
Loading in …5
×

Html5

712 views

Published on

A look at some of exciting features of HTML5, a presentation given by me at Universtiy Seminar in 7th Semester.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
712
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Html5

  1. 1. HTML5
  2. 2. ContentsHTML5 Origin Introduction Features Why HTMl5? Resources Demo HTML5 Applications.
  3. 3. Origin HTML5 introduces many cutting-edge features that enable developers to create apps and websites with the functionality, speed, performance, and experience of desktop applications HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML. Steve Jobs thrashed Adobe Flash in an Open Letter April 2010
  4. 4. Introduction HTMl* is the core technology of the World Wide Web With HTML, authors describe the structure of Web pages using Markup <tags> The new standard for HTML, XML, and HTML DOM New features should be based on HTML, CSS, DOM, and JavaScript Reduce the need for external plugins (like Flash) Better error handling More markup to replace scripting HTML5 should be device independent The development process should be visible to the public
  5. 5. Features Storage File Access Offline Multimedia Graphics Geolocation
  6. 6. Storage With HTML5, web pages can store data locally within the users browser. Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the websites performance. The data is stored in key/value pairs, and a web page can only access data stored by itself
  7. 7. Storage Two new objects for storing data on the client side: localStorage - stores data with no expiration date sessionStorage - stores data for one session The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year. Set an Item Value: localStorage.setItem("bar", foo); Get the Item Value: localStorage.getItem("bar") Remove the Item Value: localStorage.removeItem(“bar”)
  8. 8. Storage The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the browser window. Set an Item Value: sessionStorage.setItem("bar", foo); Get the Item Value: sessionStorage.getItem("bar") Remove the Item Value: sessionStorage.removeItem(“bar”)
  9. 9. File Access HTML5 provides very powerful APIs to interact with binary data and a users local file system. The File APIs give web applications the ability to do things like read files [a]synchronously, create arbitrary Blobs, write files to a temporary location, recursively read a file directory, perform file drag and drop from the desktop to the browser, and upload binary data usingXMLHttpRequest2. You could use client-side logic to verify an uploads mimetype matches its file extension or restrict the size of an upload
  10. 10. File Accessfunction onInitFs(fs) { fs.root.getFile(log.txt, {}, function(fileEntry) { // Get a File object representing the file, // then use FileReader to read its contents. fileEntry.file(function(file) { var reader = new FileReader(); reader.onloadend = function(e) { var txtArea = document.createElement(textarea); txtArea.value = this.result; document.body.appendChild(txtArea); }; reader.readAsText(file); }, errorHandler); }, errorHandler); }window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);
  11. 11. File Access
  12. 12. Offline Its becoming increasingly important for web-based applications to be accessible offline. Yes, all browsers have caching mechanisms, but theyre unreliable and dont always work as you might expect. HTML5 addresses some of the annoyances of being offline with the ApplicationCache interface. Offline browsing - users can navigate your full site when theyre offline Speed - cached resources are local, and therefore load faster. Reduced server load - the browser will only download resources from the server that have changed.
  13. 13. Offline The manifest file is a simple text file, which tells the browser what to cache (and what to never cache). The manifest file has three sections: CACHE MANIFEST - Files listed under this header will be cached after they are downloaded for the first time NETWORK - Files listed under this header require a connection to the server, and will never be cached FALLBACK - Files listed under this header specifies fallback pages if a page is inaccessible
  14. 14. Offline <!DOCTYPE HTML> <html manifest="demo.appcache"> </html> CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html/ /offline.html
  15. 15. MultiMedia Audio and Video became first-class citizens on the Web with HTML5 the same way that other media types like images did in the past. Through their new APIs you can access, control and manipulate timeline data and network states of the files. With the coming additions to the APIs you will be able to read and write raw data to audio files (Audio Data API) or manipulate captions in videos (Timed Track API). But the real power of these new HTML elements stands out when they are combined with the other technologies of the web stack, be it Canvas, SVG, CSS or even WebGL.
  16. 16. MultiMedia To play an audio file in HTML5: <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>To play a Video in HTML5: <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
  17. 17. Graphics The web has always been a visual medium, but a restricted one at best. Until recently, HTML developers were limited to CSS and JavaScript in order to produce animations or visual effects for their websites, or they would have to rely on a plugin like Flash. There are many new features which deal with graphics on the web: 2D Canvas, SVG, 3D CSS transforms etc.
  18. 18. Graphics 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. <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script>
  19. 19. Geolocation 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. This functionality could be used as part of user queries, e.g. to guide someone to a destination point. It could also be used for "geo-tagging" some content the user has created, e.g. to mark where a photo was taken. The API is device-agnostic; it doesnt care how the browser determines location, so long as clients can request and receive location data in a standard way.
  20. 20. Geolocation<script> var x=document.getElementById(“geo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{ x.innerHTML="Geolocation is not supported by this browser."; } } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; }</script>
  21. 21. Why HTML5? Non - Monolithic technology A collection of features, technologies, and APIs Fast. Secure. Responsive. Interactive. Stunningly beautiful – Words associated with HTML5. Accelerates the pace of your innovation Enables you to seamlessly roll out your latest work to all your users simultaneously. Frees your users from the hassles of having to install apps across multiple devices. Fifth revision of the HTML markup language, CSS3, and a series of JavaScript APIs
  22. 22. Why HTML5? Enables you to create complex applications that previously could be created only for desktop platforms. Belong to W3C & WHATWG that includes Google, Microsoft, Apple, Mozilla, Facebook, IBM, HP, Adobe. Next Generation -web Apps can run high-performance graphics, work offline, store a large amount of data on the client, perform calculations fast, More interactivity and collaboration.
  23. 23. Resources http://w3c.org http://html5readiness.com https://developer.mozilla.org/en/HTML/HTML5 http://w3schools.com/html5 http://caniuse.com http://html5test.com http://dev.chromium.org/developers/web-platform- status http://html5demos.com http://developer.apple.com/safari
  24. 24. Demo
  25. 25. Demo

×