BEST FRIENDS

- They make our site more powerful..

HTML CSS JavaScript

Images source Xbox.com

Build prefect site with CSS, JS and HTML

Images source Xbox.com

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

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 HTMLAccess 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 HTML5Access 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

New Form inputs

New Form inputs

<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

Local Storage

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

A B

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.05.0 -moz- 4.0 -webkit-

15.0 -webkit-12.112.0 -o-

animation 10.0 4.0 -webkit- 16.05.0 -moz- 4.0 -webkit-

15.0 -webkit-12.112.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 bootstraphttp://getbootstrap.com/

• jQuery mobilehttp://jquerymobile.com/

• Foundationhttp://foundation.zurb.com/

• jQuery UIhttp://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

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 andMozilla link

// in demo_workers.jsvar 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

<ThankYou loop=“true”/>

NAGA HARISH MSoftware engineer

E: nagaharish.movva@gmail.com

W: www.shareourideas.com

facebook.com/shareourideas twitter.com/nagaharishmovva