About Best friends - HTML, CSS and JS

BEST FRIENDS
- They make our site more

HTML CSS JavaScript
Images source Xbox.com

Build prefect site with CSS,
JS and HTML

Here is the Website ;)
HTML : Help to show content in browsers
CSS : Help to style the content
JS : Help to interact with content

What is in Next Slides? (about HTML5)
• What and Why HTML5
• New Elements
• New Attributes
• Storage
• Offline
• What's good and bad

What is in Next Slides? (about CSS3)
• Background
• Animations
• Media query

What is in Next Slides? (about JS)
• Web workers
• Web socket

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

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)

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)

So, it comes with..
Graphics
Location
Database
Speed
Audio
Video
Offline

Basic HTML5 structure
<header>
<nav>
<footer>
<section>
<section>
<article>
<article>
<aside>

New Elements
• <canvas> and <svg>
• <video> and <audio>
• New Form inputs
• Datalist
“HTML5 could do everything Flash did”- Steve Jobs

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 :

WHEN<canvas>
<svg>
…Please use web to get more content about topic.

“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

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
  
  
  
  
  

<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

Audio file format V/S Browser
MP3 Wav OGG
  
  
  
  
  

<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

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”

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

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

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

Offline
• Offline browsing
• Speed
• Reduced server load
• HTML:
<!DOCTYPE HTML>
<html>
<body>
The content of the document......
</body>
</html>

Offline
• Offline browsing
• Speed
• Reduced server load
• HTML:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>

Offline - Manifest File
CACHE MANIFEST
# v1.0 – Update by Harish
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html

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

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

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.

What is CSS?
According to me,
“If HTML is Girl…

What is CSS?
…CSS is her makeup kit ”

Background
• Multiple Background Images
• Background origin
• Background size
• Background clip
Demo http://www.w3schools.com/css/css3_backgrounds.asp

X Y
Animations will help us for better user experience (UX)

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;}
}

CSS Hacks
Property
@keyframes 10.0 4.0 -webkit-
16.0
5.0 -moz-
4.0 -webkit-
15.0 -webkit-
12.1
12.0 -o-
animation 10.0 4.0 -webkit-
16.0
5.0 -moz-
4.0 -webkit-
15.0 -webkit-
12.1
12.0 -o-
• Opacity, in IE 8 or older -- filter:Alpha(opacity=50);

• 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

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 { /* …. */ }

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 */ }

CSS ready frameworks
• Twitter bootstrap
http://getbootstrap.com/
• jQuery mobile
http://jquerymobile.com/
• Foundation
http://foundation.zurb.com/
• jQuery UI
http://jqueryui.com/

JavaScript
According to me,
“Without JavaScript our site will be lifeless ”

JavaScript – Two new things
• Web workers
• Web socket
“2% or less disable JavaScript support”- Yahoo

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.

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”);

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

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

NAGA HARISH M
Software engineer
E: nagaharish.movva@gmail.com
W: www.shareourideas.com
facebook.com/shareourideas twitter.com/nagaharishmovva

About Best friends - HTML, CSS and JS

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to About Best friends - HTML, CSS and JS

Similar to About Best friends - HTML, CSS and JS (20)

More from Naga Harish M

More from Naga Harish M (14)

Recently uploaded

Recently uploaded (20)

About Best friends - HTML, CSS and JS