Download to read offline
![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)
![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/75/Html5-and-css3-8-2048.jpg)
Uploaded byDeniss Platonov
Html5 and css3
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.
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Html5 and css3
- 1.
- 2. About me 2008 – 2011 HTML CSS Since 2011 JavaScript Front-End 2
- 3. Evolution of theweb 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 backwardscompatible <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 – keepingit 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 CACHEMANIFEST # Version 1 CACHE: /style.css /javascript.js NETWORK: /script.cgi FALLBACK: / /offline.html 10
- 11. Web workers BackgroundJavaScript Multiple threads 11
- 12. Web sockets Full-duplexcommunication 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> - inputtypes <input type="email"> <input type="url"> <input type="tel"> 15
- 16. <form> - inputtypes Default layout type="email" type="url" type="tel" 16
- 17. <form> - inputtypes <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> - inputtypes <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> - inputtypes <input type="search"> <input type="color"> 19
- 20. <form> - Placeholdertext <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> - Placeholdertext <input type="text” placeholder="search this site"> 21
- 22. <form> - datalist <inputtype="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 <inputtype="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> - IEsupport 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 CanUse HTML5 Today! 30
- 31.
- 32.