how to build a html5 websites.v1
TRANSCRIPT
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
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 2/84
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
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 3/84
HTML5
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 4/84
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
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 5/84
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 6/84
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 7/84
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 8/84
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 9/84
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 10/84
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 11/84
What’s new?
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 12/84
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
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 13/84
<!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
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 14/84
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
•
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 15/84
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 16/84
TAGS
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 17/84
HTML 4.01
web-pages
design
HTML5
web-applications
user-interface
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 18/84
Layout/Structure
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 19/84
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 20/84
Web site design
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 21/84
A Simple Web site design
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 22/84
FORMS 2.0
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 23/84
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 24/84
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 25/84
AUDIO/VIDEO
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 26/84
<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
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 27/84
<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();
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 28/84
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 29/84
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 30/84
SVG Tag & CANVAS (API)
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 31/84
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
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 32/84
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 33/84
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
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 34/84
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
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 35/84
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
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 36/84
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 37/84
<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');
}
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 38/84
<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);
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 39/84
// 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>
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 40/84
Path
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 41/84
// 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);
context.lineTo(10, 100);
context.lineTo(10, 10);
// Done! Now fill the shape, and draw thestroke.
context.fill();
context.stroke();
context.closePath();
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 42/84
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)
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 43/84
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();
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 44/84
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);
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 45/84
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/
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 46/84
API
d i
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 47/84
Provides an API for Drap and Drop forJavaScript
History API - Access Browser history via JavaScript.
Drag and Drop & History API
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 48/84
GEO-LOCATION
Geo Location
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 49/84
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
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 50/84
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();
}
}
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 51/84
WEB-WORKERS
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 52/84
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”)
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 53/84
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 54/84
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
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 55/84
OFFLINE
Application Cache
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 56/84
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
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 57/84
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
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 58/84
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 59/84
STORAGE
Local Storage
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 60/84
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
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 61/84
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
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 62/84
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
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 63/84
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;
}
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 64/84
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 65/84
can I use ?
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 66/84
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 ?
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 67/84
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
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 68/84
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 :(
}
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 69/84
SmartPhone
Apps using
HTML5 & CSS3
jQtouch
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 70/84
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
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 71/84
preview on desktop
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 72/84
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
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 73/84
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
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 74/84
Rhodes
http://mobilog.bitlasoft.com/ - READ more here ...
Conclusions
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 75/84
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
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 76/84
Lets see few quick
DEMOs
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 77/84
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 78/84
New Styles
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 79/84
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
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 80/84
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
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 81/84
Animations - CSS3 allows for animations of styles
Transitions - Allows styles to change gradually color
shifts
Transformations - 2D and 3D transformations,
stretch, move, etc
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 82/84
More Resources
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 83/84
HTML 5 Doctor - http://html5doctor.com/
HTML 5 Spec - http://dev.w3.org/html5/spec/Overview.html http://apirocks.com/html5/html5.html
http://jqtouch.com/preview/demos/main/
http://www.w3schools.com/svg/
http://www.canvasdemos.com/
http://motyar.blogspot.com/2010/04/drawing-on-web-with-canvas-
and-jquery.html
http://code.google.com/p/svgweb/
8/7/2019 How to Build a HTML5 Websites.v1
http://slidepdf.com/reader/full/how-to-build-a-html5-websitesv1 84/84
Dasharatham Bitla (Dash)
Founder & CEO, [email protected] | www.BitlaSoft.comhttp://weblog.bitlasoft.com | http://mobilog.bitlasoft.com
Questions?