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
![Page 1: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/1.jpg)
BEST FRIENDS
- They make our site more powerful..
![Page 2: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/2.jpg)
HTML CSS JavaScript
Images source Xbox.com
![Page 3: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/3.jpg)
Build prefect site with CSS, JS and HTML
Images source Xbox.com
![Page 4: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/4.jpg)
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
![Page 5: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/5.jpg)
What is in Next Slides? (about HTML5)• What and Why HTML5• New Elements• New Attributes• Storage• Offline• What's good and bad
![Page 6: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/6.jpg)
What is in Next Slides? (about CSS3)• Background• Animations• Media query
![Page 7: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/7.jpg)
What is in Next Slides? (about JS)• Web workers• Web socket
![Page 8: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/8.jpg)
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
![Page 9: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/9.jpg)
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)
![Page 10: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/10.jpg)
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)
![Page 11: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/11.jpg)
So, it comes with..
Graphics
Location
Database
Speed
Audio
Video
Offline
![Page 12: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/12.jpg)
Basic HTML5 structure
<header><nav>
<footer>
<section><section>
<article>
<article>
<aside>
![Page 13: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/13.jpg)
New Elements
• <canvas> and <svg>• <video> and <audio>• New Form inputs• Datalist
“HTML5 could do everything Flash did” - Steve Jobs
![Page 14: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/14.jpg)
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 :
![Page 15: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/15.jpg)
WHEN <canvas><svg>
…Please use web to get more content about topic.
![Page 16: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/16.jpg)
“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
![Page 17: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/17.jpg)
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
![Page 18: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/18.jpg)
<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
![Page 19: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/19.jpg)
Audio file format V/S Browser
MP3 Wav OGG
![Page 20: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/20.jpg)
New Form inputs
![Page 21: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/21.jpg)
New Form inputs
![Page 22: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/22.jpg)
<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
![Page 23: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/23.jpg)
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”
![Page 24: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/24.jpg)
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.. }
![Page 25: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/25.jpg)
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.. }
![Page 26: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/26.jpg)
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
![Page 27: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/27.jpg)
Local Storage
![Page 28: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/28.jpg)
Offline
• Offline browsing• Speed• Reduced server load• HTML:
<!DOCTYPE HTML><html>
<body>The content of the document......</body>
</html>
![Page 29: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/29.jpg)
Offline
• Offline browsing• Speed• Reduced server load• HTML:
<!DOCTYPE HTML><html manifest="demo.appcache">
<body>The content of the document......</body>
</html>
![Page 30: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/30.jpg)
Offline - Manifest File
CACHE MANIFEST# v1.0 – Update by Harish/theme.css/logo.gif/main.js
NETWORK:login.asp
FALLBACK:/html/ /offline.html
![Page 31: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/31.jpg)
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
![Page 32: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/32.jpg)
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
![Page 33: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/33.jpg)
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.
![Page 34: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/34.jpg)
What is CSS?According to me,
“If HTML is Girl…
![Page 35: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/35.jpg)
What is CSS?…CSS is her makeup kit
”
![Page 36: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/36.jpg)
Background
• Multiple Background Images• Background origin• Background size• Background clip
Demo http://www.w3schools.com/css/css3_backgrounds.asp
![Page 37: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/37.jpg)
A B
![Page 38: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/38.jpg)
X Y
Animations will help us for better user experience (UX)
![Page 39: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/39.jpg)
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;}}
![Page 40: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/40.jpg)
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);
![Page 41: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/41.jpg)
• 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
![Page 42: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/42.jpg)
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 { /* …. */ }
![Page 43: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/43.jpg)
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 */ }
![Page 44: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/44.jpg)
CSS ready frameworks
• Twitter bootstraphttp://getbootstrap.com/
• jQuery mobilehttp://jquerymobile.com/
• Foundationhttp://foundation.zurb.com/
• jQuery UIhttp://jqueryui.com/
![Page 45: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/45.jpg)
JavaScript
According to me,
“Without JavaScript our site will be lifeless
”
![Page 46: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/46.jpg)
JavaScript – Two new things
• Web workers• Web socket
“2% or less disable JavaScript support” - Yahoo
![Page 47: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/47.jpg)
Web workers
![Page 48: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/48.jpg)
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.
![Page 49: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/49.jpg)
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”);
![Page 50: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/50.jpg)
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
![Page 51: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/51.jpg)
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
![Page 52: About Best friends - HTML, CSS and JS](https://reader035.vdocument.in/reader035/viewer/2022062418/55498b29b4c90583678b50e4/html5/thumbnails/52.jpg)
<ThankYou loop=“true”/>
NAGA HARISH MSoftware engineer
W: www.shareourideas.com
facebook.com/shareourideas twitter.com/nagaharishmovva