about best friends - html, css and js
DESCRIPTION
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.TRANSCRIPT
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
W: www.shareourideas.com
facebook.com/shareourideas twitter.com/nagaharishmovva