mobee.in - enabling email on any mobile using SMS

siliconindia

mobee.in - enabling email on any mobile using SMS

An Introduction to

HTML5 & CSS3

Dasharatham Bitla (Dash)

dash@bitlasoft.com | http://weblog.bitlasoft.com

www.BitlaSoft.com


�Browsers Started a Revolution that Contong>inong>ues

� In 1995 Netscape ong>inong>troduced JavaScript

� In 1999, Microsoft ong>inong>troduces XMLHTTP

� In 2002, Mozilla 1.0 ong>inong>cludes XMLHttpRequest natively

� ... Then web applications started takong>inong>g off ...

� In 2004, Gmail launches as a beta

� In 2005, AJAX takes off (e.g. Google Maps)

�Now web applications are demandong>inong>g more

capabilities


HTML5


�Necessary for modern web apps

�Standardization

�Cross-platform

�Apple Safari, Google Chrome, Mozilla Firefox, and

Opera

�Even IE9 will support HTML5

mobile web browsers that come pre-ong>inong>stalled on

iPhones, iPads, Android ..

�Scribd/YouTube to HTML5

�Apple pushong>inong>g back on Flash - why?

�Google Gears no longer be supported ong>inong>favor of

HTML5


What’s new?


HTML 5 Features

�Client-side Database Storage

�sessionStorage

�Application Cache - Offlong>inong>e

�SQLite ong>inong> browser

�2D Graphics – Canvas/SVG

�Video/Audio

�Geo location

�Speed

�Web Workers

�UI tools

�Forms 2.0


• new structural elements

,,,,...

• new ong>inong>long>inong>e elements

• dynamic pages support

• form types

• media elements

,,

• some old elements removed

• getElementsByClassName


• and graphics context

• local and session storage

• web database

• web worker

• websocket

• geolocation

• offlong>inong>e webapplications

new Javascript APIs

• Custom content handlers, pong>inong>g attribute, crossdocument

messagong>inong>g, Audio ong>inong>terface, video element,

Server-sent DOM events, contenteditable attribute, Drag

& drop, DOMContentLoaded, Web Workers, Offlong>inong>e Web

applications, MathML, ong>inong>long>inong>e SVG, Web Forms 2.0


TAGS


HTML 4.01

web-pages

design

HTML5

web-applications

user-ong>inong>terface


Layout/Structure


Web site design


A Simple Web site design


FORMS 2.0


AUDIO/VIDEO


�Allows a page to natively play video

�No plugong>inong>s required

�As simple as ong>inong>cludong>inong>g an image - Not

supported

�Has built-ong>inong> playback controls

�Stop, Pause, Play,


�Scriptable, ong>inong> case you want your own dynamic

control




�For different codecs supported by diff browers






�var vid = doc.getByTagname(“video”)[0];

�vid.play();


SVG Tag & CANVAS (API)


�Could not draw on the web

�Flash etc was there … but

�Graphics ong>inong>trong>inong>sic part of the web

�Embedded ong>inong>to web platform

�HTML

�DOM

�Fits directly ong>inong>to CSS3 and JS scriptable

SVG & Canvas


�HTML like tags for drawong>inong>g

�Draw ong>inong>to the page …

�Make it ong>inong>teractive …

�Scale it without any distortion/pixelation

�What can you do with this now???

SVG



�http://www.mozilla.com/en-US/firefox/stats/

�SVG

� Highlevel

� Import/Export

� Easy Uis

� Intractive

� Medium Animatong>inong>

� Tree of Objects

�Canvas

� Low level

� No mouse ong>inong>teraction

� High animation

� JS Centric

� More Bookkeepong>inong>g


�http://code.google.com/p/svgweb/

SVG Demos

�http://codong>inong>gong>inong>paradise.org/projects/svgweb/sampl

es/demo.html

�http://codong>inong>gong>inong>paradise.org/projects/svgweb/sampl

es/javascript-samples/svg_dynamic_fancy.html


�JS API – Scriptable Image API



var canvas = document.getElementById(“myCan”);

Vat ctx = canvas.getContext(„2d‟);

ctx.fillStyle=“rgb(200,0,0)”;

ctx.fillRect (10,10,55,50);

ctx.fillStyle=“rgba(200,0,0,0.5)”;

ctx.fillRect (30,30,55,50);

�WebGL based on Open GL for 3d context

Canvas API


� Create a virtual canvas for drawong>inong>g graphics ong>inong> the browser.

� Javascript can be used to control graphic renderong>inong>g via the

canvas.

� x,y coordong>inong>ate system

html:


this is displayed when the tag is not supported...


javascript:

var g = document.getElementById('graph');

if (g && g.getContext) {

var c = g.getContext('2d');

}


ctx.clearRect(0,0,400,400);

var gr =

ctx.createLong>inong>earGradient(0,200,0,400);

gr.addColorStop(0.5, "#ddd");

gr.addColorStop(1, "green");

ctx.fillStyle = gr;

ctx.fillRect(0,0,400,400);

ctx.begong>inong>Path();

ctx.strokeStyle = "#000";

ctx.long>inong>eWidth = 0.2;

for (i = 0; i


canvas is a reference to a element

var context = canvas.getContext('2d');

context.fillRect(0,0,50,50);

canvas.setAttribute('width', '300'); // clears the canvas

context.fillRect(0,100,50,50);

canvas.width = canvas.width; // clears the canvas

context.fillRect(100,0,50,50); // only this square remaong>inong>s

(reproduced from http://www.whatwg.org/specs/webapps/currentwork/#

canvas with permission)


context.fillStyle = '#00f'; // blue

context.strokeStyle = '#f00'; // red

context.long>inong>eWidth = 4;

// Draw some rectangles.

context.fillRect (0, 0, 150, 50);

context.strokeRect(0, 60, 150, 50);

context.clearRect (30, 25, 90, 60);

context.strokeRect(30, 25, 90, 60);

fill, stroke, long>inong>es, Rect


Set the style properties.

context.fillStyle = '#00f';

context.strokeStyle = '#f00';

context.long>inong>eWidth = 4;

context.begong>inong>Path();

// Start from the top-left poong>inong>t.

context.moveTo(10, 10); // give the (x,y)

coordong>inong>ates

context.long>inong>eTo(100, 10);

context.long>inong>eTo(10, 100);

context.long>inong>eTo(10, 10);

// Done! Now fill the shape, and draw the

stroke.

context.fill();

context.stroke();

context.closePath();

Path


arc(x, y, radius, startAngle, endAngle, anticlockwise)

quadraticCurveTo(cp1x, cp1y, x, y) // (BROKEN ong>inong> FF 3.5)

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Styles and Colors

ctx.fillStyle = "orange";

ctx.fillStyle = "#FFA500";

ctx.fillStyle = "rgb(255,165,0)";

ctx.strokeStyle = "rgba(255,0,0,0.5)";

long>inong>eWidth = value

long>inong>eCap = type

long>inong>eJoong>inong> = type

miterLimit = value

createLong>inong>earGradient(x1,y1,x2,y2)

createRadialGradient(x1,y1,r1,x2,y2,r2)

addColorStop(position, color)

createPattern(image,type)

Arcs, Curves


Images: draw, scale, slice

//drawImage(image, sx, sy, sWidth, sHeight, dx, dy,

dWidth, dHeight)// Draw slice

ctx.drawImage(document.getElementById('source'),

33,71,104,124,21,20,87,104);

// Draw frame

ctx.drawImage(document.getElementById('frame'),

0,0);context.stroke();context.closePath();


State: Canvas states are stored on a stack

save()

restore()

translate(x, y)

rotate(angle)

scale(x, y)

transform(m11, m12, m21, m22, dx, dy)

setTransform(m11, m12, m21, m22, dx,

dy)

Transformations

var i = 0;

var song>inong> = Math.song>inong>(Math.PI/6);

var cos = Math.cos(Math.PI/6);

ctx.translate(200, 200);

var c = 0;

for (i; i


Canvas Demos

http://www.canvasdemos.com/type/applications/

http://code.edspencer.net/Bean/ong>inong>dex.html

http://www.xarg.org/project/chrome-experiment/

http://www.canvasdemos.com/2010/05/06/catch-it/


API


Drag and Drop & History API

Provides an API for Drap and Drop for

JavaScript

History API - Access Browser history

via JavaScript.


GEO-LOCATION


�Browsers are now location enabled

�iPhone, Android leverages it too

Navigator.geolcation.getCurrentPosition(

);

function(position) {

}

var lat = position.,coords.latitude;

var lan = position.,coords.longiture;

showLocation(lat, lan);

Geo Location


function doLocation() {

if (navigationSupported() ) {

navigator.geolocation.getCurrentPosition(

showPosition,

positionError,

{

enableHighAccuracy:false,

timeout:10000,

maximumAge:300000

}

);

}

}

function showPosition(position) {

var lat = position.coords.latitude;

var lon = position.coords.longitude;

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("location-map"));

var weAreHere = new GLatLng(lat, lon);

map.setCenter(weAreHere, 13);

var marker = new GMarker(weAreHere);

map.addOverlay( marker );

marker.bong>inong>dInfoWong>inong>dowHtml("You are here");

map.setUIToDefault();

}

}

geolocation


WEB-WORKERS


Native apps have threads and processes

Workers provide web apps with a means for concurrency

Can offload heavy computation onto a separate thread so

your app doesn’t block

Run JS ong>inong> the background without cloggong>inong>g the UI threads

Come ong>inong> 3 flavors

– Dedicated (thong>inong>k: bound to a song>inong>gle tab)

– Shared (shared among multiple wong>inong>dows ong>inong> an origong>inong>)

– Persistent (run when the browser is “closed”)


WEB Sockets

Allows bi-directional communication between

client and server ong>inong> a cleaner, more efficient

form than hangong>inong>g gets (or a series of

XMLHttpRequests)

Specification is under active development


OFFLINE


Application Cache

�Application cache solves the problem of how to

make it such that one can load an application URL

while offlong>inong>e and it just works

�Web pages can provide a manifest of files that

should be cached locally

�These pages can be accessed offlong>inong>e

�Enables web pages to work without the user beong>inong>g

connected to the Internet

�Database and app cache store together can do a

great job

�Goong>inong>g Offlong>inong>e ong>inong> Gmail – what happens?

�Gmail on iPhone – how it works?

�Google stopped supportong>inong>g Gears ong>inong> favor of HTML5


Manifest sample contents:

CACHE MANIFEST

ong>inong>dex.html

contents.html

application.js

image.jpg

# force onlong>inong>e:

NETWORK:

onlong>inong>e-logo.png

# provide fallback

FALLBACK:

images/ images/fallback-image.png

offlong>inong>e webapplication


STORAGE


�Provides a way to store data client side

Local Storage

�Useful for many classes of applications, especially ong>inong>

conjunction with offlong>inong>e capabilities

�2 maong>inong> APIs provided: a database API (exposong>inong>g a SQLite

database) and a structured storage api (key/value pairs)

db.transaction(function(tx) {

tx.executeSql('SELECT * FROM MyTable', [],

function(tx, rs) {

for (var i = 0; i < rs.rows.length; ++i) {

var row = rs.rows.item(i);

DoSomethong>inong>g(row['column']);

}

});

});


localStorage / sessionStorage

// visible to all wong>inong>dows loaded from same location

localStorage.setItem('currency','EUR');

var currency = localStorage.getItem('currency');

// stored ong>inong> wong>inong>dow object, deleted on close

sessionStorage.setItem('currency','EUR');

var currency = sessionStorage.getItem('currency');


web database

$(document).ready(function() {

var shortName = "Shoppong>inong>g";

var version = "1.0";

var displayName = "Shoppong>inong>g";

var maxSize = 65536; // ong>inong> kilobytes

db = openDatabase(shortName, version, displayName, maxSize);

db.transaction(

function(transaction) {

transaction.executeSql(

'create table if not exists entries ' +

'(id ong>inong>teger not null primary key autoong>inong>crement, ' +

' name text not null, row ong>inong>teger not null, section

ong>inong>teger not null);'

);

}

);

});


web database

function addarticle() {

var article = $('#article').val();

var row = $('#row').val();

var section = $('#section').val();

db.transaction(

function(transaction) {

transaction.executeSql(

'ong>inong>sert ong>inong>to entries(name,row,section) values(?,?,?);',

[article, row, section],

function() {

refreshEntries();

jQT.goBack();

},

errorHandler

);

}

);

$('#articleform')[0].reset();

return false;

}

function errorHandler(transaction, error) {

alert('Sorry, save failed - ' + error.message + '(code:' + error.code +')');

// returnong>inong>g true halts execution and rolls back

return true;

}


�Cleaner markup

What are the benefits of usong>inong>g HTML5

�Additional semantics of new elements like ,

, and

�make it a lot easier for search engong>inong>es and

screenreaders to navigate our pages, and improve the

web experience for everyone

�New form ong>inong>put types and attributes that will (and ong>inong>

Opera‟s case, do) take the hassle out of scriptong>inong>g forms

�Stayong>inong>g ahead of the curve before HTML5 becomes the

maong>inong>stream markup language. Use this as a sellong>inong>g poong>inong>t

when talkong>inong>g with your clients

�HTML5 and iPhone/smartphone (apps without C)

– PhoneGap, Rhodes, Titanium


What are the downsides to usong>inong>g HTML5

�The spec isn’t fong>inong>ished and is likely to change

�Not everythong>inong>g works ong>inong> every browser (but you could

say the same about CSS, right?

the good news is

ong>inong> the mobile world, the situation is much better

�iPhone, Android use WebKit based browsers

�supports offlong>inong>e web app, web database, canvas,

geolocation, ...


can I use ... ?

support still ong>inong>complete across browsers

IE9 promise to offer full support

for some features, javascript workaround available:

• canvas : excanvas.js gives support ong>inong> IE (all versions)

can be used today

• HTML5 elements: html5shiv

fixes DOM tree and adds stylong>inong>g

check

http://caniuse.com

(among others)


Use feature detection, not browser detection

can I use ... ?

Modernizr (http://www.modernizr.com/) creates a global object

that you can check:

if (Modernizr.video) {

// video element is supported

} else {

// fall back

}


�Usong>inong>g Modernizr - http://www.modernizr.com/





� Dive Into HTML5




� ...



� if (Modernizr.canvas) {

� // let's draw some shapes!

� } else {

� // no native canvas support available :(

� }

Detectong>inong>g


SmartPhone

Apps usong>inong>g

HTML5 & CSS3


jQuery plugong>inong>

adds iPhone stylong>inong>g

adds transitions usong>inong>g CSS3 support




var jQT = $.jQTouch({

icon: 'logo.png',

statusBar: 'black'

});


jQtouch

http://jqtouch.com/preview/demos/maong>inong>/ DEMO


jQtouch page structure




RaboTransAct

About



Geolocation demo

Information





Geolocation

Back


Tryong>inong>g to determong>inong>e location...





Geolocation

Back

Run demo


About geolocation


This can now:

- launch from home screen (as web clip)

- run fullscreen on phone

- store data locally

- run offlong>inong>e

But can not:

- access hardware (sound, vibrate)

- be submitted to app store

preview on desktop


- compiles to native app for iPhone, Android, Blackberry

- abstracts away native API differences

- need SDK for each target device

- open source (MIT license)

- navigator.notification.vibrate() , .beep(), .alert()

PhoneGap


http://mobilog.bitlasoft.com/ - READ more here ...

Rhodes


�low barrier to entry for mobile

�familiar language HTML,CSS and JS

Conclusions

�use canvas / excanvas for graphs (no Flash needed)

�PhoneGap (and others) for cross-platform

development

�Rhodes if you are a Ruby Geek

�some of this can be used now


Lets see few quick

DEMOs


�http://www.designzzz.com/html-5-tutorial.html

�http://apirocks.com/html5/html5.html

�http://jqtouch.com/preview/demos/maong>inong>/

�http://www.canvasdemos.com/

Demos

�http://codong>inong>gong>inong>paradise.org/projects/svgweb/sa

mples/demo.html

�http://codong>inong>gong>inong>paradise.org/projects/svgweb/sa

mples/javascriptsamples/svg_dynamic_fancy.html


CSS3


�border-radius - Rounded Corners

�border-colors - Gradient Borders

�box-shadow - Drop Shadows

�text-shadow - Text Drop Shadows

�gradient - Gradient backgrounds

�resize - Resize an Element

�background-size - resize background

�background - supports multipe images

New Styles


Selectors

�A Variety of Selectors provide an ong>inong>terface to apply

styles more precisely.

�getElementByClassName

�An example would be selectong>inong>g an nth child.

�Example: div:nth-child(3) {}

�Columns

�Multi Column Layout is now provided by CSS3


Animation and Motion

�Animations - CSS3 allows for animations of styles

�Transitions - Allows styles to change gradually color

shifts

�Transformations - 2D and 3D transformations,

stretch, move, etc


�HSL – hsl(hue, saturation, lightness)

New color formats ong>inong> CSS3

�CMYK – cmyk(cyan, magenta, yellow, black)

�HSLA – hsl(hue, saturation, lightness, alpha)

�RGBA – rgba(red, green, blue, alpha)


� HTML 5 Doctor - http://html5doctor.com/

More Resources

� HTML 5 Spec - http://dev.w3.org/html5/spec/Overview.html

� http://apirocks.com/html5/html5.html

� http://jqtouch.com/preview/demos/maong>inong>/

� http://www.w3schools.com/svg/

� http://www.canvasdemos.com/

� http://motyar.blogspot.com/2010/04/drawong>inong>g-on-web-with-canvasand-jquery.html

� http://code.google.com/p/svgweb/


Questions?

Dasharatham Bitla (Dash)

Founder & CEO, BitlaSoft

dash@bitlasoft.com | www.BitlaSoft.com

http://weblog.bitlasoft.com | http://mobilog.bitlasoft.com

More magazines by this user
Similar magazines