Basics of html5, data_storage, css3

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


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();};


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


sessionStorage

• sessionStorage.setItem('key','value');• sessionStorage.getItem('key');• sessionStorage.length;• sessionStorage.removeItem('key')


sessionStorage - Methods

var videoDetails = { author: ‘bruce’, description: ‘how to leverage synergies’, rating: ‘-2’ };sessionStorage.setItem(‘videoDetails’, JSON.stringify(videoDetails) );


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’));


sessionStorage

• like sessionStorage, but• persistent• global


localStorage

• same as sessionStorage

e.g. localStorage.getItem('key'); localStorage.clear();


localStorage - methods

• SQLite - lots of structured, relational data• asynchronous• callback based• fast


client-side databases


client-side databasesOpen / Create database

Create table

Insert


client-side databases - Select

Code inspectors• firebug (firefox)• dragonfly (opera)• webkit's (for safari and chrome)


Inspecting Client-side Data Storage Value


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

Basics of html5, data_storage, css3

Technology

side data

repeat center

sidedatastorage

side datastorage

repeat center

left top

left bottom

3s ease