Download - Basics of html5, data_storage, css3
![Page 1: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/1.jpg)
Basics ofHTML5, Data Storage & CSS3
Sreejith MAkhilraj N S
Jones V RajanAnurag R S
POD 5
![Page 2: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/2.jpg)
Basics Of HTML5
![Page 3: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/3.jpg)
Basics of HTML5
![Page 4: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/4.jpg)
Syntax
<!DOCTYPE html 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
![Page 5: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/5.jpg)
Basics of HTML5
Semantic Tags
![Page 6: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/6.jpg)
Basics of HTML5
New form types
![Page 7: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/7.jpg)
Basics of HTML5
Markup for applications
![Page 8: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/8.jpg)
Basics of HTML5
Native Drag & Drop
![Page 9: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/9.jpg)
Basics of HTML5
Geolocation
![Page 10: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/10.jpg)
Basics of HTML5
Audio & Video
![Page 11: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/11.jpg)
Basics of HTML5
Canvas example
![Page 12: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/12.jpg)
Basics of HTML5
Inline SVG
![Page 13: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/13.jpg)
Client-side Data Storage
![Page 14: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/14.jpg)
1. Web Storage Supported in all latest browsers• sessionStorage• localStorage
2. Web SQL Databases opera, chrome & safari• client-side databases
Client-side Data Storage
![Page 15: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/15.jpg)
Javascript API common for localStorage and sessionStorageinterface 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
![Page 16: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/16.jpg)
• temporary key/value pairs• one session per tab/window• replace cookies for session tracking• extensive Javascript methods & events
Client-side Data Storage
sessionStorage
![Page 17: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/17.jpg)
• sessionStorage.setItem('key','value');• sessionStorage.getItem('key');• sessionStorage.length;• sessionStorage.removeItem('key')
Client-side Data Storage
sessionStorage - Methods
![Page 18: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/18.jpg)
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
![Page 19: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/19.jpg)
// 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
![Page 20: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/20.jpg)
• like sessionStorage, but• persistent• global
Client-side Data Storage
localStorage
![Page 21: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/21.jpg)
• same as sessionStorage
e.g. localStorage.getItem('key'); localStorage.clear();
Client-side Data Storage
localStorage - methods
![Page 22: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/22.jpg)
• SQLite - lots of structured, relational data• asynchronous• callback based• fast
Client-side Data Storage
client-side databases
![Page 23: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/23.jpg)
Client-side Data Storage
client-side databasesOpen / Create database
Create table
Insert
![Page 24: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/24.jpg)
Client-side Data Storage
client-side databases - Select
![Page 25: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/25.jpg)
Code inspectors• firebug (firefox)• dragonfly (opera)• webkit's (for safari and chrome)
Client-side Data Storage
Inspecting Client-side Data Storage Value
![Page 26: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/26.jpg)
Client-side Data Storage
Inspecting Client-side Data Storage Value
![Page 27: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/27.jpg)
Basics Of CSS3
![Page 28: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/28.jpg)
CSS level 1 CSS level 2 CSS level 2.1 CSS level 3
CSS, An Introduction
![Page 29: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/29.jpg)
Whats new in CSS Level 3?
• Rounded Corners• Box-Shadow• Background Decoration• Text Effects • 2D Transforms• 3D Transforms • Transitions• Animations
![Page 30: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/30.jpg)
CSS 3 CODE div{border-radius:25px;-moz-border-radius:25px;/* Firefox */-webkit-border-radius:25px;/* Safari and Chrome */-o-border-radius:25px;/* Opera */}
![Page 31: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/31.jpg)
CSS 3 v/s CSS 2
![Page 32: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/32.jpg)
Example 1
Design Demo
![Page 33: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/33.jpg)
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); }
![Page 34: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/34.jpg)
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) -----*/
![Page 35: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/35.jpg)
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; }
![Page 36: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/36.jpg)
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)-----*/
![Page 37: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/37.jpg)
Comparison
![Page 38: Basics of html5, data_storage, css3](https://reader033.vdocument.in/reader033/viewer/2022061117/54590410b1af9f37608b551e/html5/thumbnails/38.jpg)
Thank You POD 5