How to Build a HTML5 Websites.v1

8/7/2019 How to Build a HTML5 Websites.v1

http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 1/84

Dasharatham Bitla (Dash)[email protected] | http://weblog.bitlasoft.com

www.BitlaSoft.com

An Introduction to

HTML5 & CSS3

mailto:[email protected]

http://weblog.bitlasoft.com/

http://www.bitlasoft.com/






Browsers Started a Revolution that Continues

In 1995 Netscape introduced JavaScript

In 1999, Microsoft introduces XMLHTTP

In 2002, Mozilla 1.0 includes XMLHttpRequest natively

... Then web applications started taking off ...

In 2004, Gmail launches as a beta

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

Now web applications are demanding morecapabilities



HTML5



Necessary for modern web apps

StandardizationCross-platform

Apple Safari, Google Chrome, Mozilla Firefox, and

Opera

Even IE9 will support HTML5

mobile web browsers that come pre-installed on

iPhones, iPads, Android ..

Scribd/YouTube to HTML5Apple pushing back on Flash - why?

Google Gears no longer be supported infavor of HTML5















What’s new?



HTML 5 Features

Client-side Database StoragesessionStorage

Application Cache - Offline

SQLite in browser

2D Graphics – Canvas/SVG

Video/Audio

Geo location

SpeedWeb Workers

UI tools

Forms 2.0



<!doctype html>

• new structural elements

<section>,<header>,<footer>,<nav>,...

• new inline elements

•

dynamic pages support

• form types

• media elements<canvas>,<video>,<audio>

• some old elements removed

• getElementsByClassName



new Javascript APIs

• <canvas> and graphics context

• local and session storage• web database

• web worker

• websocket

•geolocation

• offline webapplications

• Custom content handlers, ping attribute, cross-

document messaging, Audio interface, video element,Server-sent DOM events, contenteditable attribute, Drag& drop, DOMContentLoaded, Web Workers, Offline Webapplications, MathML, inline SVG, Web Forms 2.0

•





TAGS



HTML 4.01

web-pages

design

HTML5

web-applications

user-interface



Layout/Structure





Web site design



A Simple Web site design



FORMS 2.0







AUDIO/VIDEO



<video>

Allows a page to natively play video

No plugins requiredAs simple as including an image - <video

src=“video.mp4” controls autoplay> Notsupported</video>

Has built-in playback controls

Stop, Pause, Play,

Scriptable, in case you want your own dynamic

control



<video>

<video src = “movire.mp4” controls>

</video>

For different codecs supported by diff browers

<video controls><source src = “foo.ogg” type=“video/ogg”>

<source src =“foo.mp4”>

…

</video>

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

vid.play();







SVG Tag & CANVAS (API)



SVG & Canvas

Could not draw on the web

Flash etc was there … but

Graphics intrinsic part of the web

Embedded into web platform

HTML

DOM

Fits directly into CSS3 and JS scriptable





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

SVGHighlevel

Import/Export

Easy Uis

IntractiveMedium Animatin

Tree of Objects

Canvas

Low levelNo mouse interaction

High animation

JS Centric

More Bookkeeping

S G







SVG Demos

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

http://codinginparadise.org/projects/svgweb/samples/demo.html

http://codinginparadise.org/projects/svgweb/sampl

es/javascript-samples/svg_dynamic_fancy.html

C API




http://codinginparadise.org/projects/svgweb/samples/javascript-samples/svg_dynamic_fancy.html











Canvas API

JS API – Scriptable Image API

<canvas id=“myCan” width=“200” height=“200”>

</canvas>

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>

Create a virtual canvas for drawing graphics in the browser.

Javascript can be used to control graphic rendering via thecanvas.

x,y coordinate system

html:<canvas id="graph" width="400" height="400">

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

</canvas>

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

if (g && g.getContext) {

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

}



<canvas>ctx.clearRect(0,0,400,400);

var gr =

ctx.createLinearGradient(0,200,0,400);

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

gr.addColorStop(1, "green");

ctx.fillStyle = gr;

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

ctx.beginPath();

ctx.strokeStyle = "#000";

ctx.lineWidth = 0.2;

for (i = 0; i<20; i++) {

ctx.moveTo(0, i*20);

ctx.lineTo(400, i*20);

}

ctx.stroke();ctx.closePath();

ctx.lineWidth = 0.8;

ctx.textBaseline = "bottom";

ctx.font = "64pt Arial";

ctx.strokeStyle = "red";ctx.strokeText("demo",100,200);



// canvas is a reference to a <canvas> 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 remains

(reproduced from http://www.whatwg.org/specs/web-apps/currentwork/#

canvas with permission)

<canvas>



Path



// Set the style properties.

context.fillStyle = '#00f';

context.strokeStyle = '#f00';

context.lineWidth = 4;

context.beginPath();

// Start from the top-left point.

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

context.lineTo(100, 10);



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

context.fill();

context.stroke();

context.closePath();



Arcs, Curves

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

quadraticCurveTo(cp1x, cp1y, x, y) // (BROKEN in 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)";

lineWidth = value

lineCap = type

lineJoin = type

miterLimit = value

createLinearGradient(x1,y1,x2,y2)

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

addColorStop(position, color)

createPattern(image,type)



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



Transformations

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)

var i = 0;

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

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

ctx.translate(200, 200);

var c = 0;

for (i; i <= 12; i++) {

c = Math.floor(255 / 12 * i);ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";

ctx.fillRect(0, 0, 100, 10);

ctx.transform(cos, sin, -sin, cos, 0, 0);

}

ctx.setTransform(-1, 0, 0, 1, 200, 200);

ctx.fillStyle = "rgba(255, 128, 255, 0.5)";

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



Canvas Demos

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

http://code.edspencer.net/Bean/index.html

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

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















API

d i



Provides an API for Drap and Drop forJavaScript

History API - Access Browser history via JavaScript.

Drag and Drop & History API



GEO-LOCATION

Geo Location



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

}

);

l ti



geolocationfunction 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.bindInfoWindowHtml("You are here");

map.setUIToDefault();

}

}



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 in the background without clogging the UI threads

Come in 3 flavors

– Dedicated (think: bound to a single tab)

– Shared (shared among multiple windows in an origin)

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





WEB Sockets

Allows bi-directional communication betweenclient and server in a cleaner, more efficientform than hanging gets (or a series of XMLHttpRequests)

Specification is under active development



OFFLINE

Application Cache



Application Cache

Application cache solves the problem of how tomake it such that one can load an application URL

while offline and it just worksWeb pages can provide a manifest of files that

should be cached locally

These pages can be accessed offline

Enables web pages to work without the user beingconnected to the Internet

Database and app cache store together can do a

great jobGoing Offline in Gmail – what happens?

Gmail on iPhone – how it works?

Google stopped supporting Gears in favor of HTML5

offline webapplication



offline webapplication<html manifest="demo.manifest">

Manifest sample contents:

CACHE MANIFEST

index.html

contents.html

application.js

image.jpg

# force online:

NETWORK:

online-logo.png

# provide fallback

FALLBACK:

images/ images/fallback-image.png





STORAGE

Local Storage



Local Storage

Provides a way to store data client side

Useful for many classes of applications, especially in

conjunction with offline capabilities

2 main APIs provided: a database API (exposing 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);

DoSomething(row['column']);

}

});

});

localStorage / sessionStorage



localStorage / sessionStorage

// visible to all windows loaded from same locationlocalStorage.setItem('currency','EUR');

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

// stored in window object, deleted on close

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

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

web database



web database$(document).ready(function() {

var shortName = "Shopping";

var version = "1.0";var displayName = "Shopping";

var maxSize = 65536; // in kilobytes

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

db.transaction(

function(transaction) {

transaction.executeSql(

'create table if not exists entries ' +

'(id integer not null primary key autoincrement, ' +

' name text not null, row integer not null, section

integer not null);'

);

}

);});

web database



web databasefunction addarticle() {

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

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

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

db.transaction(

function(transaction) {

transaction.executeSql(

'insert into 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 +')');

// returning true halts execution and rolls back

return true;

}





can I use ?



can I use ... ?support still incomplete across browsers

IE9 promise to offer full support

for some features, javascript workaround available:

• canvas : excanvas.js gives support in IE (all versions)<canvas> can be used today

• HTML5 elements: html5shivfixes DOM tree and adds styling

check

http://caniuse.com

(among others)

can I use ?

http://caniuse.com/

http://caniuse.com/



can I use ... ?

Use feature detection, not browser detection

Modernizr (http://www.modernizr.com/) creates a global objectthat you can check:

if (Modernizr.video) {// video element is supported

} else {

// fall back

}

Detecting



g

Using Modernizr - http://www.modernizr.com/ <!DOCTYPE html>

<html> <head>

<meta charset="utf-8">

<title>Dive Into HTML5</title>

<script src="modernizr.min.js"></script>

</head>

<body>

...

</body>

</html>

if (Modernizr.canvas) {

// let's draw some shapes!

} else {

// no native canvas support available :(

}

http://www.modernizr.com/






SmartPhone

Apps using

HTML5 & CSS3

jQtouch



jQtouch

jQuery plugin

adds iPhone stylingadds transitions using CSS3 support

<script type="text/javascript"

src="jqtouch/jquery.js"></script>

<script type="text/javascript"src="jqtouch/jqtouch.js"></script>

<script type="text/javascript">

var jQT = $.jQTouch({

icon: 'logo.png',

statusBar: 'black'

});

</script>

http://jqtouch.com/preview/demos/main/ DEMO

http://jqtouch.com/preview/demos/main/





preview on desktop



preview on desktopThis can now:

- launch from home screen (as web clip)

- run fullscreen on phone

- store data locally

- run offline

But can not:

- access hardware (sound, vibrate)

- be submitted to app store

PhoneGap



PhoneGap

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

Rhodes



Rhodes

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

Conclusions

http://mobilog.bitlasoft.com/

http://mobilog.bitlasoft.com/



Conclusions

low barrier to entry for mobile

familiar language HTML,CSS and JS

use canvas / excanvas for graphs (no Flash needed)

PhoneGap (and others) for cross-platform

developmentRhodes if you are a Ruby Geek

some of this can be used now



Lets see few quick

DEMOs





New Styles



border-radius - Rounded Corners

border-colors - Gradient Borders

box-shadow - Drop Shadows

text-shadow - Text Drop Shadows

gradient - Gradient backgroundsresize - Resize an Element

background-size - resize background

background - supports multipe images

Selectors



A Variety of Selectors provide an interface to applystyles more precisely.

getElementByClassName

An example would be selecting 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



More Resources



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

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


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

http://www.canvasdemos.com/

http://motyar.blogspot.com/2010/04/drawing-on-web-with-canvas-

and-jquery.html


http://dev.w3.org/html5/spec/Overview.html

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




http://motyar.blogspot.com/2010/04/drawing-on-web-with-canvas-and-jquery.html




















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

http://dev.w3.org/html5/spec/Overview.html



Dasharatham Bitla (Dash)

Founder & CEO, [email protected] | www.BitlaSoft.comhttp://weblog.bitlasoft.com | http://mobilog.bitlasoft.com

Questions?











Documents

How to Build a HTML5 Websites.v1