About Best friends - HTML, CSS and JS

2,629 views

Published on

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.

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,629
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
88
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

About Best friends - HTML, CSS and JS

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

×