basics of html5, data_storage, css3
DESCRIPTION
Basic intro to HTML5, its feature data storage and CSS3TRANSCRIPT
Basics ofHTML5, Data Storage & CSS3
Sreejith MAkhilraj N S
Jones V RajanAnurag R S
POD 5
Basics Of HTML5
Basics of HTML5
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
Basics of HTML5
Semantic Tags
Basics of HTML5
New form types
Basics of HTML5
Markup for applications
Basics of HTML5
Native Drag & Drop
Basics of HTML5
Geolocation
Basics of HTML5
Audio & Video
Basics of HTML5
Canvas example
Basics of HTML5
Inline SVG
Client-side Data Storage
1. Web Storage Supported in all latest browsers• sessionStorage• localStorage
2. Web SQL Databases opera, chrome & safari• client-side databases
Client-side Data Storage
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
• temporary key/value pairs• one session per tab/window• replace cookies for session tracking• extensive Javascript methods & events
Client-side Data Storage
sessionStorage
• sessionStorage.setItem('key','value');• sessionStorage.getItem('key');• sessionStorage.length;• sessionStorage.removeItem('key')
Client-side Data Storage
sessionStorage - Methods
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
// 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
• like sessionStorage, but• persistent• global
Client-side Data Storage
localStorage
• same as sessionStorage
e.g. localStorage.getItem('key'); localStorage.clear();
Client-side Data Storage
localStorage - methods
• SQLite - lots of structured, relational data• asynchronous• callback based• fast
Client-side Data Storage
client-side databases
Client-side Data Storage
client-side databasesOpen / Create database
Create table
Insert
Client-side Data Storage
client-side databases - Select
Code inspectors• firebug (firefox)• dragonfly (opera)• webkit's (for safari and chrome)
Client-side Data Storage
Inspecting Client-side Data Storage Value
Client-side Data Storage
Inspecting Client-side Data Storage Value
Basics Of CSS3
CSS level 1 CSS level 2 CSS level 2.1 CSS level 3
CSS, An Introduction
Whats new in CSS Level 3?
• Rounded Corners• Box-Shadow• Background Decoration• Text Effects • 2D Transforms• 3D Transforms • Transitions• Animations
CSS 3 CODE div{border-radius:25px;-moz-border-radius:25px;/* Firefox */-webkit-border-radius:25px;/* Safari and Chrome */-o-border-radius:25px;/* Opera */}
CSS 3 v/s CSS 2
Example 1
Design Demo
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); }
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) -----*/
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; }
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)-----*/
Comparison
Thank You POD 5