HTML5
ContentsHTML5Origin IntroductionFeaturesWhy HTMl5?ResourcesDemo HTML5 Applications.
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
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
FeaturesStorage
File Access
Offline
Multimedia
Graphics
Geolocation
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
StorageTwo 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”)
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”)
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
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);
File Access
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.
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
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
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.
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>
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.
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>
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.
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>
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
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.
Resources http://w3c.orghttp://html5readiness.comhttps://developer.mozilla.org/en/HTML/HTML5http://w3schools.com/html5http://caniuse.comhttp://html5test.comhttp://dev.chromium.org/developers/web-plat
form-statushttp://html5demos.comhttp://developer.apple.com/safari
Demo
Demo