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 Cont<strong>in</strong>ues
� In 1995 Netscape <strong>in</strong>troduced JavaScript
� In 1999, Microsoft <strong>in</strong>troduces XMLHTTP
� In 2002, Mozilla 1.0 <strong>in</strong>cludes XMLHttpRequest natively
� ... Then web applications started tak<strong>in</strong>g off ...
� In 2004, Gmail launches as a beta
� In 2005, AJAX takes off (e.g. Google Maps)
�Now web applications are demand<strong>in</strong>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-<strong>in</strong>stalled on
iPhones, iPads, Android ..
�Scribd/YouTube to HTML5
�Apple push<strong>in</strong>g back on Flash - why?
�Google Gears no longer be supported <strong>in</strong>favor of
HTML5

What’s new?

HTML 5 Features
�Client-side Database Storage
�sessionStorage
�Application Cache - Offl<strong>in</strong>e
�SQLite <strong>in</strong> browser
�2D Graphics – Canvas/SVG
�Video/Audio
�Geo location
�Speed
�Web Workers
�UI tools
�Forms 2.0

• new structural elements
,,,,...
• new <strong>in</strong>l<strong>in</strong>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
• offl<strong>in</strong>e webapplications
new Javascript APIs
• Custom content handlers, p<strong>in</strong>g attribute, crossdocument
messag<strong>in</strong>g, Audio <strong>in</strong>terface, video element,
Server-sent DOM events, contenteditable attribute, Drag
& drop, DOMContentLoaded, Web Workers, Offl<strong>in</strong>e Web
applications, MathML, <strong>in</strong>l<strong>in</strong>e SVG, Web Forms 2.0
•

TAGS

HTML 4.01
web-pages
design
HTML5
web-applications
user-<strong>in</strong>terface

Layout/Structure

Web site design

A Simple Web site design

FORMS 2.0

AUDIO/VIDEO

�Allows a page to natively play video
�No plug<strong>in</strong>s required
�As simple as <strong>in</strong>clud<strong>in</strong>g an image - Not
supported
�Has built-<strong>in</strong> playback controls
�Stop, Pause, Play,
�Scriptable, <strong>in</strong> 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 <strong>in</strong>tr<strong>in</strong>sic part of the web
�Embedded <strong>in</strong>to web platform
�HTML
�DOM
�Fits directly <strong>in</strong>to CSS3 and JS scriptable
SVG & Canvas

�HTML like tags for draw<strong>in</strong>g
�Draw <strong>in</strong>to the page …
�Make it <strong>in</strong>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 Animat<strong>in</strong>
� Tree of Objects
�Canvas
� Low level
� No mouse <strong>in</strong>teraction
� High animation
� JS Centric
� More Bookkeep<strong>in</strong>g

�http://code.google.com/p/svgweb/
SVG Demos
�http://cod<strong>in</strong>g<strong>in</strong>paradise.org/projects/svgweb/sampl
es/demo.html
�http://cod<strong>in</strong>g<strong>in</strong>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 draw<strong>in</strong>g graphics <strong>in</strong> the browser.
� Javascript can be used to control graphic render<strong>in</strong>g via the
canvas.
� x,y coord<strong>in</strong>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.createL<strong>in</strong>earGradient(0,200,0,400);
gr.addColorStop(0.5, "#ddd");
gr.addColorStop(1, "green");
ctx.fillStyle = gr;
ctx.fillRect(0,0,400,400);
ctx.beg<strong>in</strong>Path();
ctx.strokeStyle = "#000";
ctx.l<strong>in</strong>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 rema<strong>in</strong>s
(reproduced from http://www.whatwg.org/specs/webapps/currentwork/#
canvas with permission)

context.fillStyle = '#00f'; // blue
context.strokeStyle = '#f00'; // red
context.l<strong>in</strong>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, l<strong>in</strong>es, Rect

Set the style properties.
context.fillStyle = '#00f';
context.strokeStyle = '#f00';
context.l<strong>in</strong>eWidth = 4;
context.beg<strong>in</strong>Path();
// Start from the top-left po<strong>in</strong>t.
context.moveTo(10, 10); // give the (x,y)
coord<strong>in</strong>ates
context.l<strong>in</strong>eTo(100, 10);
context.l<strong>in</strong>eTo(10, 100);
context.l<strong>in</strong>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 <strong>in</strong> 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)";
l<strong>in</strong>eWidth = value
l<strong>in</strong>eCap = type
l<strong>in</strong>eJo<strong>in</strong> = type
miterLimit = value
createL<strong>in</strong>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 s<strong>in</strong> = Math.s<strong>in</strong>(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/<strong>in</strong>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.b<strong>in</strong>dInfoW<strong>in</strong>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 <strong>in</strong> the background without clogg<strong>in</strong>g the UI threads
Come <strong>in</strong> 3 flavors
– Dedicated (th<strong>in</strong>k: bound to a s<strong>in</strong>gle tab)
– Shared (shared among multiple w<strong>in</strong>dows <strong>in</strong> an orig<strong>in</strong>)
– Persistent (run when the browser is “closed”)

WEB Sockets
Allows bi-directional communication between
client and server <strong>in</strong> a cleaner, more efficient
form than hang<strong>in</strong>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 offl<strong>in</strong>e and it just works
�Web pages can provide a manifest of files that
should be cached locally
�These pages can be accessed offl<strong>in</strong>e
�Enables web pages to work without the user be<strong>in</strong>g
connected to the Internet
�Database and app cache store together can do a
great job
�Go<strong>in</strong>g Offl<strong>in</strong>e <strong>in</strong> Gmail – what happens?
�Gmail on iPhone – how it works?
�Google stopped support<strong>in</strong>g Gears <strong>in</strong> favor of HTML5

Manifest sample contents:
CACHE MANIFEST
<strong>in</strong>dex.html
contents.html
application.js
image.jpg
# force onl<strong>in</strong>e:
NETWORK:
onl<strong>in</strong>e-logo.png
# provide fallback
FALLBACK:
images/ images/fallback-image.png
offl<strong>in</strong>e webapplication

STORAGE

�Provides a way to store data client side
Local Storage
�Useful for many classes of applications, especially <strong>in</strong>
conjunction with offl<strong>in</strong>e capabilities
�2 ma<strong>in</strong> APIs provided: a database API (expos<strong>in</strong>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);
DoSometh<strong>in</strong>g(row['column']);
}
});
});

localStorage / sessionStorage
// visible to all w<strong>in</strong>dows loaded from same location
localStorage.setItem('currency','EUR');
var currency = localStorage.getItem('currency');
// stored <strong>in</strong> w<strong>in</strong>dow object, deleted on close
sessionStorage.setItem('currency','EUR');
var currency = sessionStorage.getItem('currency');

web database
$(document).ready(function() {
var shortName = "Shopp<strong>in</strong>g";
var version = "1.0";
var displayName = "Shopp<strong>in</strong>g";
var maxSize = 65536; // <strong>in</strong> kilobytes
db = openDatabase(shortName, version, displayName, maxSize);
db.transaction(
function(transaction) {
transaction.executeSql(
'create table if not exists entries ' +
'(id <strong>in</strong>teger not null primary key auto<strong>in</strong>crement, ' +
' name text not null, row <strong>in</strong>teger not null, section
<strong>in</strong>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(
'<strong>in</strong>sert <strong>in</strong>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 +')');
// return<strong>in</strong>g true halts execution and rolls back
return true;
}

�Cleaner markup
What are the benefits of us<strong>in</strong>g HTML5
�Additional semantics of new elements like ,
, and
�make it a lot easier for search eng<strong>in</strong>es and
screenreaders to navigate our pages, and improve the
web experience for everyone
�New form <strong>in</strong>put types and attributes that will (and <strong>in</strong>
Opera‟s case, do) take the hassle out of script<strong>in</strong>g forms
�Stay<strong>in</strong>g ahead of the curve before HTML5 becomes the
ma<strong>in</strong>stream markup language. Use this as a sell<strong>in</strong>g po<strong>in</strong>t
when talk<strong>in</strong>g with your clients
�HTML5 and iPhone/smartphone (apps without C)
– PhoneGap, Rhodes, Titanium

What are the downsides to us<strong>in</strong>g HTML5
�The spec isn’t f<strong>in</strong>ished and is likely to change
�Not everyth<strong>in</strong>g works <strong>in</strong> every browser (but you could
say the same about CSS, right?
the good news is
�<strong>in</strong> the mobile world, the situation is much better
�iPhone, Android use WebKit based browsers
�supports offl<strong>in</strong>e web app, web database, canvas,
geolocation, ...

can I use ... ?
support still <strong>in</strong>complete across browsers
IE9 promise to offer full support
for some features, javascript workaround available:
• canvas : excanvas.js gives support <strong>in</strong> IE (all versions)
can be used today
• HTML5 elements: html5shiv
fixes DOM tree and adds styl<strong>in</strong>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
}

�Us<strong>in</strong>g Modernizr - http://www.modernizr.com/
�
�
�
�
� Dive Into HTML5
�
�
�
� ...
�
�
� if (Modernizr.canvas) {
� // let's draw some shapes!
� } else {
� // no native canvas support available :(
� }
Detect<strong>in</strong>g

SmartPhone
Apps us<strong>in</strong>g
HTML5 & CSS3

jQuery plug<strong>in</strong>
adds iPhone styl<strong>in</strong>g
adds transitions us<strong>in</strong>g CSS3 support
var jQT = $.jQTouch({
icon: 'logo.png',
statusBar: 'black'
});
jQtouch
http://jqtouch.com/preview/demos/ma<strong>in</strong>/ DEMO

jQtouch page structure
RaboTransAct
About
Geolocation demo
Information
Geolocation
Back
Try<strong>in</strong>g to determ<strong>in</strong>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 offl<strong>in</strong>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/ma<strong>in</strong>/
�http://www.canvasdemos.com/
Demos
�http://cod<strong>in</strong>g<strong>in</strong>paradise.org/projects/svgweb/sa
mples/demo.html
�http://cod<strong>in</strong>g<strong>in</strong>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 <strong>in</strong>terface to apply
styles more precisely.
�getElementByClassName
�An example would be select<strong>in</strong>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 <strong>in</strong> 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/ma<strong>in</strong>/
� http://www.w3schools.com/svg/
� http://www.canvasdemos.com/
� http://motyar.blogspot.com/2010/04/draw<strong>in</strong>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