HTML5 - Future of Web

Future of WWW

What is HTML5?

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

HTML5 ~= HTML + CSS + JS

AIM

Its core aims have been to

*Improve the language with support for the latest multimedia.

* Easily readable by humans

*Consistently understood by computers and devices (web browsers, parsers etc.).

Semantics & Markup

Existing

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

HTML 5

<!DOCTYPE html>

That’s it. Just 15 characters. It’s so easy.

Semantics & Markup

New Input

New Input in Phone

Offline / Storage

*Web Storage

*Web SQL Database

*Application Cache

Web StorageSave text value on the client side

Example

window.localStorage.setItem('value', “Test Value”);

Retrieve

window.localStorage.getItem('value');

Web SQL DatabaseStore information in client side in SQL database structure

Examplevar db = window.openDatabase("DBName", "1.0", "description", 5*1024*1024); //Create Database 5MB

db.transaction(function (tx) { tx.executeSql('CREATE TABLE foo (id unique, text)');}); // Create a Table

db.transaction(function (tx) { tx.executeSql('INSERT INTO foo (id, text) VALUES (1, “Whoa!")');}); // Insert vlaue

tx.executeSql('SELECT * FROM foo', [], function (tx, results) { var len = results.rows.length, i; for (i = 0; i < len; i++) { alert(results.rows.item(i).text); }}); // Fetching data

Application CacheCache your application in browser so it can run without internetPut in your HTML file

<html manifest="cache.appcache">

cache.appcache:

CACHE MANIFEST# version 1.0.0

CACHE:/html5/src/logic.js/html5/src/style.css/html5/src/background.png

NETWORK:*

WebSocket

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.

Example:

var socket = new WebSocket('ws://html5rocks.websocket.org/echo');

socket.onopen = function(event) {

socket.send('Hello, WebSocket');

};

socket.onmessage = function(event) { alert(event.data); }

socket.onclose = function(event) { alert('closed'); }

Geolocation

You can get user latitude and longitude from user

browser (computer, phone).

User needs to give permission to share location.

Example:

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(function(position) {

var latLng = new google.maps.LatLng(

position.coords.latitude, position.coords.longitude);

var marker = new google.maps.Marker({position: latLng, map: map});

map.setCenter(latLng);

}, errorHandler);

}

Graphics / Multimedia

*Audio + Video

*Canvas 2D

*Canvas 3D (WebGL)

*Inline SVG

Audio + Video

Audio Example:

<audio id="audio" src="sound.mp3"

controls></audio>

document.getElementById("audio").muted = false;

Video Example:

<video id="video" src="movie.webm" autoplay

controls></video>

document.getElementById("video").play();

Canvas 2D<canvas id="canvas" width="838" height="220"></canvas>

<script>

var canvasContext = 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>

Canvas 3D (WebGL)

*WebGL is a Web-based Graphics Library.

* It extends the capability of the JavaScript programming language to

allow it to generate interactive 3D graphics within any compatible web

browser.

Inline SVG

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

<html>

<svg>

<circle id="myCircle" class="important" cx="50%" cy="50%" r="100"

fill="url(#myGradient)"

onmousedown="alert('hello');"/>

</svg>

</html>

Other Features*History API

* Element.classList

*New Selectors

*Device Orientation

* FileSystem APIs

*Desktop Drag-Out

*Desktop Drag-In (File API)

*Native Drag & Drop

*Notifications

* Speech Input

* Form validation

CSS 3* Selectors

* Image-like display

* Specific attributes

*Negation

*More specific targeting

*Web fonts

* Text wrapping

* Columns

* Text stroke

* Opacity

*Hue/saturation/luminance color

* Rounded corners

* Gradients

* Shadows

* Reflection

* Background enhancements

* Transitions

* Animations

* And Lot

*For demo go to http://slides.html5rocks.com/#css3-title

Working with HTML5

How to detect if your browser support a HTML5

component?

You can check using JS

function supports_canvas() {

return !!document.createElement('canvas').getContext;

}

Modernizr

Modernizr is an open source, MIT-licensed JavaScript library that detects

support for many HTML5 & CSS3 features (http://www.modernizr.com/).

Put this script in head tag

<script src="modernizr.min.js"></script>

Example testing canvas capability using modernizr

if (Modernizr.canvas) {

// let's draw some shapes!

}

else {

// no native canvas support available :(

}

Download the slides

You can go to this following link and download this slide.

http://thirdeye.ibtgames.com/

References

*http://en.wikipedia.org/wiki/HTML5

*http://diveintohtml5.org/

*http://slides.html5rocks.com

*http://diveintohtml5.org/peeks-pokes-and-pointers.html

Who am I?

Mirza [email protected]

CTO & Co-Founder of

Infrablue Technology Ltd

IBTGames Ltd

PibLabs Ltd

Question

HTML5 - Future of Web

Technology

Transcript of HTML5 - Future of Web