This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
4. Here is the Website ;)
Images source Xbox.com
HTML : Help to show content in browsers
CSS : Help to style the content
JS : Help to interact with content
5. What is in Next Slides? (about HTML5)
• What and Why HTML5
• New Elements
• New Attributes
• Storage
• Offline
• What's good and bad
6. What is in Next Slides? (about CSS3)
• Background
• Animations
• Media query
7. What is in Next Slides? (about JS)
• Web workers
• Web socket
8. What is HTML5?
• It’s not just next version of HTML
• Make web more powerful
• Easy for developers and computer program
“HTML5 was proposed by Opera Software and Mozilla Foundation in June,2004”- WWW
9. Why HTML5?
“Web developers be proud, what we wrote will run in any device*”- Evol
*Conditions apply ;)
OLD HTML
Access to the local system's
resources/GPU
Works in Offline
Heavy graphics and quality UI
So, we need to depend on plugins (Like Flash and Silverlight)
10. Why HTML5?
“Web developers be proud, what we wrote will run in any device*”- Evol
*Conditions apply ;)
OLD HTML HTML5
Access to the local system's
resources/GPU
Works in Offline
Heavy graphics and quality UI
So, we need to depend on plugins (Like Flash and Silverlight)
11. So, it comes with..
Graphics
Location
Database
Speed
Audio
Video
Offline
13. New Elements
• <canvas> and <svg>
• <video> and <audio>
• New Form inputs
• Datalist
“HTML5 could do everything Flash did”- Steve Jobs
14. Canvas and SVG
Canvas (scriptable image tag) SVG
HTML:
<canvas id="myCanvas" width="200" height="100">
Your browser does not support the HTML5 canvas tag.
</canvas>
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,200,100);
Output :
HTML:
<svg width="400" height="110">
<rect width=“200" height="100"
style="fill:rgb(255,0,0); ">
Sorry, your browser does not support inline SVG.
</svg>
JavaScript:
//For now need any action
Output :
16. “In this world there are 30+ browsers”- WWW
<Video>
• Help to add video to our site.
• HTML :
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>
http://www.w3schools.com/tags/tag_video.asp
17. Video file format V/S Browser
http:/www.w3schools.com/html/html5_video.asp and http://www.w3.org/2010/05/video/mediaevents.html
MP4 WebM OGG
18. <audio>
• Help to add audio to our site.
• HTML :
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.wav" type="audio/wav">
Your browser does not support the audio element.
</audio> http://www.w3schools.com/tags/tag_audio.asp
“The first web browser was called WorldWideWeb (Nexus), invented in 1990 -
1991 and had 4 million users.”- WWW
22. <datalist>
• This tag specifies a list of pre-defined options for an <input> element.
• HTML :
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Demo : http://www.w3schools.com/TAgs/tag_datalist.asp
23. New Attributes
• autocomplete
• autofocus
• pattern (regexp)
• placeholder
• required
Demo : http://www.w3schools.com/html/html5_form_attributes.asp
and http://www.w3schools.com/tags/ref_eventattributes.asp
“Custom attributes use data- prefix. E.g. :- data-SOMETHING”
24. Local Storage
• window.localStorage - stores data with no expiration date
• code.sessionStorage - stores data for one session (data is lost when the tab
is closed)
• JavaScript:
if(typeof(Storage)!=="undefined")
{
// Code for localStorage/sessionStorage.
}
else
{
// Sorry! No Web Storage support..
}
25. Local Storage
• window.localStorage - stores data with no expiration date
• code.sessionStorage - stores data for one session (data is lost when the tab
is closed)
• JavaScript:
if(typeof(Storage)!=="undefined") //('localStorage' in window && window['localStorage'] !== null)
{
localStorage.setItem("lastname", "Smith");
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
}
else
{
// Sorry! No Web Storage support..
}
26. Local Storage
• Web SQL Database works in Safari, Chrome and Opera (!IE and !FF)
• JavaScript:
openDatabase('documents', '1.0', 'Local document storage', 5*1024*1024,
function (db) {
db.changeVersion('', '1.0', function (t) {
t.executeSql('CREATE TABLE docids (id, name)');
}, error);
});
• IndexDB -- https://dvcs.w3.org/hg/IndexedDB/raw-
file/tip/Overview.html
31. Offline - Updating the cache triggers
• The user clears the browser's cache
• The manifest file is modified
• The application cache is programmatically updated
Demo : http://www.bennadel.com/blog/2029-using-html5-offline-
application-cache-events-in-javascript.htm and
www.htmlgoodies.com/html5/tutorials/introduction-to-offline-web-
applications-using-html5.html
32. 2012 2013 2014 2015 2016
HTML 5.0 Candidate Rec Call for Review Recommendation
HTML 5.1
1st Working
Draft
Last Call Candidate Rec Recommendation
HTML 5.2
1st Working
Draft
- Wiki
33. What's good and bad?
“Betting on HTML5 was a mistake”- Mark Zuckenberg
“We have definity shifted from HTML5 to native”- LinkedIn
…Please use web to get more content about topic.
39. Animations
• animation: myfirst 5s; /*@keyframe name and time delay (s/ms) */
• We can also set timing function, delay, iteration count, direction
• About @Keyframe rule is “where the animation is created”.
• CSS:
Demo http://www.w3schools.com/css/css3_animations.asp
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
41. • Web fonts allow to use font that are not installed on the end user
computer.
• Google is providing free fonts
e.g. : http://fonts.googleapis.com/css?family=Butterfly+Kids:400
• CSS:
Custom fonts
@font-face
{
font-family: myFont;
src: url(sansation_light.woff);
}
Demo : http://www.w3schools.com/css/css3_fonts.asp
42. Media query
• The @media rule allows different style rules for different media in the
same style sheet.
• CSS:
Demo http://www.w3schools.com/css/css_mediatypes.asp
@media screen { /* …. */ }
@media print { /* …. */ }
@media screen,print { /* …. */ }
43. Media query
• We can even apply different styles based on device
• width and height
• Orientation
• Aspect ratio / Pixel ratio
• CSS:
Demo http://www.w3schools.com/css/css_mediatypes.asp
@media only screen and (max-device-
width: 480px) { /* …. For mobile device
less than 480 px width*/ }
@media only screen and (min-device-
width: 768px) and (max-device-width:
1024px) { /* styles for iPad */ }
44. CSS ready frameworks
• Twitter bootstrap
http://getbootstrap.com/
• jQuery mobile
http://jquerymobile.com/
• Foundation
http://foundation.zurb.com/
• jQuery UI
http://jqueryui.com/
48. Web workers
• A web worker is a JavaScript that runs in the background,
independently of other scripts, without affecting the performance of
the page. You can continue to do whatever you want: clicking,
selecting things, etc., while the web worker runs in the background.
49. Web workers
• A web worker is a JavaScript that runs in the background,
independently of other scripts, without affecting the performance of
the page. You can continue to do whatever you want: clicking,
selecting things, etc., while the web worker runs in the background.
Demo : http://www.w3schools.com/html/html5_webworkers.asp and
Mozilla link
// in demo_workers.js
var i = 0;
onmessage = function (oEvent) {
timedCount();
postMessage("Hi " + oEvent.data);
};
function timedCount()
{
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
if(typeof(w) == "undefined" && typeof(Worker) !== "undefined")
{
w = new Worker("demo_workers.js");
}
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
function stopWorker() { w.terminate(); }
w. postMessage(“Started”);
50. Web socket
• WebSocket is a protocol providing full-duplex communications
channels over a single TCP connection.
• That makes it possible to open an interactive communication session
between the user's browser and a server.
Socket : http://docs.oracle.com/javase/tutorial/networking/sockets/definition.html
51. Web socket - Example
if ("WebSocket" in window)
{
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function()
{
ws.send("Message to send");
alert("Message is sent...");
};
ws.onmessage = function (evt)
{
var received_msg = evt.data;
alert("Message is received...");
};
ws.onclose = function() {alert("Connection is closed..."); };
}
Demo http://www.tutorialspoint.com/html5/html5_websocket.htm and
https://www.youtube.com/watch?v=Z897fkPn7Rw