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

1. HTML5

2. Contents
HTML5
 Origin
 Introduction
 Features
 Why HTMl5?
 Resources
 Demo HTML5 Applications.

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. 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. Features
 Storage
 File Access
 Offline
 Multimedia
 Graphics
 Geolocation

6. Storage
 With HTML5, web pages can store data locally within
the user's 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 website's
performance.
 The data is stored in key/value pairs, and a web page
can only access data stored by itself

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. 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. File Access
 HTML5 provides very powerful APIs to interact with
binary data and a user's 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 upload's
mimetype matches its file extension or restrict the size
of an upload

10. File Access
function 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. File Access

12. Offline
 It's becoming increasingly important for web-based
applications to be accessible offline.
 Yes, all browsers have caching mechanisms, but they're
unreliable and don't 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
they're 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. 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. 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. 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. 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. 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. 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. 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 doesn't care how the
browser determines location, so long as clients can
request and receive location data in a standard way.

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. 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. 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. 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. Demo

25. Demo