Downloaded 98 times
Uploaded bySreejith Nair
Basics of html5, data_storage, css3
This document provides an overview of HTML5, CSS3, and client-side data storage. It discusses new HTML5 semantic tags, forms, and APIs for audio, video, and canvas. It also covers CSS3 features like rounded corners, shadows, gradients, transitions and animations. For data storage, it explains Web Storage APIs like localStorage and sessionStorage, as well as client-side databases in some browsers. Code examples are provided for HTML5, CSS3 effects, and using the Storage APIs.
More Related Content
![4.5. Contests [extras]](https://cdn.slidesharecdn.com/ss_thumbnails/5-150409134359-conversion-gate01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
- 1. Basics of HTML5, Data Storage & CSS3 Sreejith M Akhilraj N S Jones V Rajan Anurag R S POD 5
- 2.
- 3.
- 4. Syntax <!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> HTML 5: <!doctype html> <html> <head> <meta charset="utf-8"> Basics of HTML5
- 5. Basics of HTML5Semantic Tags
- 6. Basics of HTML5New form types
- 7. Basics of HTML5Markup for applications
- 8. Basics of HTML5Native Drag & Drop
- 9. Basics of HTML5Geolocation
- 10. Basics of HTML5Audio & Video
- 11. Basics of HTML5Canvas example
- 12. Basics of HTML5Inline SVG
- 13.
- 14. 1. Web Storage Supported in all latest browsers sessionStorage localStorage 2. Web SQL Databases opera, chrome & safari client-side databases Client-side Data Storage
- 15. Javascript API commonfor localStorage and sessionStorage interface Storage { readonly attribute unsigned long length; getter DOMString key(in unsigned long index); getter any getItem(in DOMString key); setter creator void setItem(in DOMString key, in any value); deleter void removeItem(in DOMString key); void clear(); }; Client-side Data Storage Web Storage Note: For firefox web storage causes security warning and break out your js, if cookies aren't enabled
- 16. temporary key/value pairsone session per tab/window replace cookies for session tracking extensive Javascript methods & events Client-side Data Storage sessionStorage
- 17. sessionStorage.setItem('key','value'); sessionStorage.getItem('key'); sessionStorage.length;sessionStorage.removeItem('key') Client-side Data Storage sessionStorage - Methods
- 18. var videoDetails ={ author: ‘bruce’, description: ‘how to leverage synergies’, rating: ‘-2’ }; sessionStorage.setItem(‘videoDetails’, JSON.stringify(videoDetails) ); Client-side Data Storage sessionStorage - e.g. Storing Video information
- 19. // later on,as in page reloads later, we can extract the stored data var videoDetails = JSON.parse(sessionStorage.getItem(‘videoDetails’)); Client-side Data Storage sessionStorage
- 20. like sessionStorage, butpersistent global Client-side Data Storage localStorage
- 21. same as sessionStoragee.g. localStorage.getItem('key'); localStorage.clear(); Client-side Data Storage localStorage - methods
- 22. SQLite - lots ofstructured, relational data asynchronous callback based fast Client-side Data Storage client-side databases
- 23. Client-side Data Storage client-side databasesOpen / Create database Create table Insert
- 24.
- 25. Code inspectors firebug(firefox) dragonfly (opera) webkit's (for safari and chrome) Client-side Data Storage Inspecting Client-side Data Storage Value
- 26. Client-side Data Storage Inspecting Client-sideData Storage Value
- 27.
- 28. CSS level1 CSS level 2 CSS level 2.1 CSS level 3 CSS, An Introduction
- 29. Whats new inCSS Level 3? Rounded Corners Box-Shadow Background Decoration Text Effects 2D Transforms 3D Transforms Transitions Animations
- 30. CSS 3 CODE div { border-radius:25px; -moz-border-radius:25px; /* Firefox */ -webkit-border-radius:25px; /* Safari and Chrome */ -o-border-radius:25px; /* Opera */ }
- 31. CSS 3 v/sCSS 2
- 32. Example 1 DesignDemo
- 33. CSS 3 h1 { text-shadow: -3px 2px 0px #514d46; } #nav { -moz-box-shadow: 0px 0px 12px rgba(88, 83, 74, .7); -webkit-box-shadow: 0px 0px 12px rgba(88, 83, 74, .7); box-shadow: 0px 0px 12px rgba(88, 83, 74, .7); background-image: -moz-linear-gradient(top, #5c5850, #48473e); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #5c5850),color-stop(1, #48473e)); background-image: -webkit-linear-gradient(#5c5850, #48473e); background-image: linear-gradient(top, #5c5850, #48473e); } nav a { -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; } nav a:hover { background-color: #3a3e38; background-color: rgba(47, 54, 48, .7); } nav a.active { background-color: #070807; background-color: rgba(7, 8, 7, .7); } body { background-image: -webkit-gradient(radial, 50% 10%, 0, 50% 10%, 500, from(#FBF8E3), to(#E6E3D0)); background-image: -moz-radial-gradient(50% 10%, farthest-side, #FBF8E3, #E6E3D0); }
- 34. CSS 3 #learn_more, #details img { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0px 0px 8px rgba(88, 83, 74, .2); -moz-box-shadow: inset 1px 0px 1px rgba(88, 83, 74, .2); box-shadow: inset 0px 0px 1px rgba(88, 83, 74, .2); } #learn_more a { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; background-color: #cc3b23; background-image: -moz-linear-gradient(top, #cc3b23, #c00b00); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #cc3b23),color-stop(1, #c00b00)); background-image: -webkit-linear-gradient(#cc3b23, #c00b00); background-image: linear-gradient(top, #cc3b23, #c00b00); } a { -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } /*-----CSS3 Finished Total Time Taken (49 minutes) -----*/
- 35. CSS 2 #header{ background: url(../img/navbg.png) left top repeat-x; } body { background: #e6e3d0 url(../img/radial_gradient.jpg) no-repeat center top; } #nav { background-color: transparent; } h1 { background: url(../img/mercuryautomobiles.png) no-repeat center center;text-indent: -9999px; } #learn_more { background-image: url(../img/learn_morebg.jpg);} #details img { background-image: url(../img/detailsbg.jpg);} #learn_more a { background: url(../img/learn_more_abg.jpg) no-repeat;} .css3 { background: url(../img/css3_hover.png) no-repeat center top; }
- 36. CSS 2 .backend{ background: url(../img/smashing_hover.png) no-repeat center top; } .trent { background: url(../img/trentwalton_hover.png) no-repeat center top;} .css3:hover { background: url(../img/css3_hover.png) no-repeat center -20px;} .css:hover { background: url(../img/css_hover.png) no-repeat center -20px;} .smashing:hover { background: url(../img/smashing_hover.png) no-repeat center -20px;} .trent:hover { background: url(../img/trentwalton_hover.png) no-repeat center -20px; } .css { background: url(../img/css_hover.png) no-repeat center -50px; } /*-----CSS (the image-based approach) Total time taken (1 hour and 13 minutes)-----*/
- 37.
- 38. Thank You POD 5