Post on 15-May-2015
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 Asifmirza.asif@bluebd.com
CTO & Co-Founder of
Infrablue Technology Ltd
IBTGames Ltd
PibLabs Ltd
Question