Html5 and css3

995 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
995
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 and css3

  1. 1. Denis Platonov 1
  2. 2. About me 2008 – 2011 HTML CSS Since 2011 JavaScript Front-End 2
  3. 3. Evolution of the webHTML HTML 4.01 Today 12 years of silence HTML5 http://evolutionofweb.appspot.com/?hl=en 3
  4. 4. CSS3Gradients Border radius Box shadow Font face 4
  5. 5. HTML5 is backwards compatible <br> valid HTML5  <br /> valid HTML5  <BR> valid HTML5  <BR /> valid HTML5  <META CHARSET="UTF-8"> valid HTML5  <meta charset=utf-8> valid HTML5  <meta charset="utf-8"> valid HTML5  <meta charset="utf-8" />valid HTML5  <MeTa CHARset=utF-8> valid HTML5  5
  6. 6. HTML5 – keeping it simple <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm l1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru" xml:lang="ru"> <!DOCTYPE html> <html lang="ru"> 6
  7. 7. Offline data Storage - overview Web Storage  Store key/value pairs locally  Same-origin restriction  Each origin gets 5MB of storage space ○ QUOTA_EXCEEDED_ERR exception Indexed Database API Web SQL Database File API: Directories and System 7
  8. 8. Offline data Storage - Web Storage //Getter var foo = localStorage["bar"]; //Setter localStorage["bar"] = foo; //Getter for integer var foo = parseInt(localStorage["bar"]); 8
  9. 9. Offline web applications <!DOCTYPE HTML> <html manifest="/cache.manifest"> <body> </body> </html> 9
  10. 10. Offline web applicationsCACHE MANIFEST# Version 1CACHE:/style.css/javascript.jsNETWORK:/script.cgiFALLBACK:/ /offline.html 10
  11. 11. Web workers Background JavaScript Multiple threads 11
  12. 12. Web sockets Full-duplex communication channel Web Sockets provide an enormous reduction in unnecessary network traffic Use case A: Use case B: 1,000 clients 10,000 clients polling every second polling every second Use case C: 100,000 clients polling every second 12
  13. 13. Geolocation IP address Triangulation:  Wi-Fi, GSM or GPS http://html5demos.com/geo 13
  14. 14. <form> type="text" type="password" type="checkbox" type="radio" select type="button" type="submit" type="file" textarea 14
  15. 15. <form> - input types<input type="email"><input type="url"><input type="tel"> 15
  16. 16. <form> - input types Default layout type="email" type="url" type="tel" 16
  17. 17. <form> - input types <input type="number" min="0" max="10" step="2" value="6"> <input type="range" min="0" max="10" step="2" value="6"> 17
  18. 18. <form> - input types<input type="date"><input type="datetime"><input type="datetime-local"><input type="month"><input type="week"> time datetime-local<input type="time">date datetime month week 18
  19. 19. <form> - input types<input type="search"><input type="color"> 19
  20. 20. <form> - Placeholder text<input type="text“ onblur="if (this.value == ) {this.value = search this site;}“ onfocus="if(this.value == search this site) {this.value = ;}“ value="search this site"> 20
  21. 21. <form> - Placeholder text<input type="text” placeholder="search this site"> 21
  22. 22. <form> - datalist<input type="search" list="search- suggestions"/><datalist id="search-suggestions"> <option label="DM" value="Depeche Mode"> <option label="Moz" value="Morrissey"> <option label="NO" value="New Order"> <option label="TC" value="The Cure"></datalist> 22
  23. 23. <form> - autofocus<input type="text" autofocus /> 23
  24. 24. <form> - validation <input type="email"> <input type="text" required> http://miketaylr.com/pres/html5/forms2.html 24
  25. 25. <canvas> - introduction Bitmap 2D JavaScript Simple shapes, lines, gradients, text, images 25
  26. 26. <canvas> - IE support excanvas.js 26
  27. 27. <audio>, <video> - markup<audio controls> <source src="music.ogg" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg"> <!-- Flash fallback (flowplayer.org) --></audio><video width="300" height="200" controls> <source src="video.mp4" type=video/mp4; codecs="avc1.42E01E, mp4a.40.2"> <source src="video.webm" type=video/webm; codecs="vp8, vorbis"> <source src="video.ogv" type=video/ogg; codecs="theora, vorbis"> <!-- Flash fallback (flowplayer.org) --></video> 27
  28. 28. <audio>, <video> - browser support Browser (H.264/AAC) (VP8/Vorbis) (Theora/Vorbis) .MPEG-4 .WebM .Ogg Mozilla Firefox 3.6+ a a<video> Opera 10.63+ a a Google Chrome 8.0+ a a a Apple Safari 5.0.3+ a Microsoft IE9+ a a Browser (MP3) (Vorbis) .MPEG-4 .Ogg Mozilla Firefox 3.6+ a<audio> Opera 10.63+ a Google Chrome 8.0+ a a Apple Safari 5.0.3+ a Microsoft IE9+ a 28
  29. 29. Feature detect  Detects support for HTML5 & CSS3 features  http://www.modernizr.com/Do not reinvent the wheel Use Modernizr! 29
  30. 30. Yes, You Can Use HTML5Today! 30
  31. 31. Questions & answers? 31
  32. 32. 32

×