Basics of html5, data_storage, css3

Basics of HTML5, Data Storage & CSS3 Sreejith M Akhilraj N S Jones V Rajan Anurag R S POD 5

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 Canvas example

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 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

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 databases Open / 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

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 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)-----*/

Basics of html5, data_storage, css3

More Related Content

What's hot (12)

Viewers also liked (20)

Similar to Basics of html5, data_storage, css3 (20)

Recently uploaded (20)

Basics of html5, data_storage, css3