Html5 and css3
Download as pptx, pdf0 likes640 views
The document provides an overview of Denis Platonov's experience with web technologies from 2008 to 2011 focusing on HTML, CSS, and JavaScript. It then discusses the evolution of the web from HTML 4.01 to HTML5, highlighting new CSS3 features and the introduction of HTML5. The document outlines several HTML5 features including offline storage, web workers, web sockets, geolocation, new form input types, the <canvas> element, and audio/video support. It encourages using feature detection with Modernizr to support HTML5 and CSS3 across browsers.
![Offline data Storage - Web Storage
//Getter
var foo = localStorage["bar"];
//Setter
localStorage["bar"] = foo;
//Getter for integer
var foo =
parseInt(localStorage["bar"]);
8](https://image.slidesharecdn.com/html5andcss3-121012025451-phpapp01/85/Html5-and-css3-8-320.jpg)
Html5 and css3
- 1. Denis Platonov 1
- 2. About me 2008 – 2011 HTML CSS Since 2011 JavaScript Front-End 2
- 3. Evolution of the web HTML HTML 4.01 Today 12 years of silence HTML5 http://evolutionofweb.appspot.com/?hl=en 3
- 4. CSS3 Gradients Border radius Box shadow Font face 4
- 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. 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. 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. Offline data Storage - Web Storage //Getter var foo = localStorage["bar"]; //Setter localStorage["bar"] = foo; //Getter for integer var foo = parseInt(localStorage["bar"]); 8
- 9. Offline web applications <!DOCTYPE HTML> <html manifest="/cache.manifest"> <body> </body> </html> 9
- 10. Offline web applications CACHE MANIFEST # Version 1 CACHE: /style.css /javascript.js NETWORK: /script.cgi FALLBACK: / /offline.html 10
- 11. Web workers Background JavaScript Multiple threads 11
- 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. Geolocation IP address Triangulation: Wi-Fi, GSM or GPS http://html5demos.com/geo 13
- 14. <form> type="text" type="password" type="checkbox" type="radio" select type="button" type="submit" type="file" textarea 14
- 15. <form> - input types <input type="email"> <input type="url"> <input type="tel"> 15
- 16. <form> - input types Default layout type="email" type="url" type="tel" 16
- 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. <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. <form> - input types <input type="search"> <input type="color"> 19
- 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. <form> - Placeholder text <input type="text” placeholder="search this site"> 21
- 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. <form> - autofocus <input type="text" autofocus /> 23
- 24. <form> - validation <input type="email"> <input type="text" required> http://miketaylr.com/pres/html5/forms2.html 24
- 25. <canvas> - introduction Bitmap 2D JavaScript Simple shapes, lines, gradients, text, images 25
- 26. <canvas> - IE support excanvas.js 26
- 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. <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. Feature detect Detects support for HTML5 & CSS3 features http://www.modernizr.com/ Do not reinvent the wheel Use Modernizr! 29
- 30. Yes, You Can Use HTML5 Today! 30
- 31. Questions & answers? 31
- 32. 32