TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
How to build a html5 websites.v1
1. An Introduction to
HTML5 CSS3 &
Dasharatham Bitla (Dash)
dash@bitlasoft.com | http://weblog.bitlasoft.com
www.BitlaSoft.com
2. 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 more
capabilities
4. 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-installed on
iPhones, iPads, Android ..
Scribd/YouTube to HTML5
Apple pushing back on Flash - why?
Google Gears no longer be supported infavor of
HTML5
12. HTML 5 Features
Client-side Database Storage
sessionStorage
Application Cache - Offline
SQLite in browser
2D Graphics – Canvas/SVG
Video/Audio
Geo location
Speed
Web Workers
UI tools
Forms 2.0
13. <!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
14. 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 Web
applications, MathML, inline SVG, Web Forms 2.0
•
26. <video>
Allows a page to natively play video
No plugins required
As simple as including an image - <video
src=“video.mp4” controls autoplay> Not
supported</video>
Has built-in playback controls
Stop, Pause, Play,
Scriptable, in case you want your own dynamic
control
31. 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
32. SVG
HTML like tags for drawing
Draw into the page …
Make it interactive …
Scale it without any distortion/pixelation …
What can you do with this now???
<rect width="300" height="100” style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)“ id=“myRect”/>
<circle cx="100" cy="50" r="40" stroke="black“ stroke-width="2"
fill="red"/>
var myRect = doc.getElemntById(“myRect”);
myRect.style.fill = „green‟;
myRect.onclick = function() {alert(“hello”);}
33. http://www.mozilla.com/en-US/firefox/stats/
SVG
Highlevel
Import/Export
Easy Uis
Intractive
Medium Animatin
Tree of Objects
Canvas
Low level
No mouse interaction
High animation
JS Centric
More Bookkeeping
35. 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
36.
37. <canvas>
Create a virtual canvas for drawing graphics in the browser.
Javascript can be used to control graphic rendering via the
canvas.
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');
}
39. <canvas>
// 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)
40. fill, stroke, lines, Rect
context.fillStyle = '#00f'; // blue
context.strokeStyle = '#f00'; // red
context.lineWidth = 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);
41. 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);
context.lineTo(10, 100);
context.lineTo(10, 10);
// Done! Now fill the shape, and draw the
stroke.
context.fill();
context.stroke();
context.closePath();
42. 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)
49. 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);
}
);
50. geolocation
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.bindInfoWindowHtml("You are here");
map.setUIToDefault();
}
}
52. 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”)
53.
54. WEB Sockets
Allows bi-directional communication between
client and server in a cleaner, more efficient
form than hanging gets (or a series of
XMLHttpRequests)
Specification is under active development
56. Application Cache
Application cache solves the problem of how to
make it such that one can load an application URL
while offline and it just works
Web 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 being
connected to the Internet
Database and app cache store together can do a
great job
Going Offline in Gmail – what happens?
Gmail on iPhone – how it works?
Google stopped supporting Gears in favor of HTML5
60. 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']);
}
});
});
61. localStorage / sessionStorage
// visible to all windows loaded from same location
localStorage.setItem('currency','EUR');
var currency = localStorage.getItem('currency');
// stored in window object, deleted on close
sessionStorage.setItem('currency','EUR');
var currency = sessionStorage.getItem('currency');
62. 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);'
);
}
);
});
63. web database
function 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;
}
64. What are the benefits of using HTML5
Cleaner markup
Additional semantics of new elements like <header>,
<nav>, and <footer>
make it a lot easier for search engines and
screenreaders to navigate our pages, and improve the
web experience for everyone
New form input types and attributes that will (and in
Opera‟s case, do) take the hassle out of scripting forms
Staying ahead of the curve before HTML5 becomes the
mainstream markup language. Use this as a selling point
when talking with your clients
HTML5 and iPhone/smartphone (apps without C)
– PhoneGap, Rhodes, Titanium
65. What are the downsides to using HTML5
The spec isn’t finished and is likely to change
Not everything works in every browser (but you could
say the same about CSS, right?
the good news is
in the mobile world, the situation is much better
iPhone, Android use WebKit based browsers
supports offline web app, web database, canvas,
geolocation, ...
66. 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: html5shiv
fixes DOM tree and adds styling
check
http://caniuse.com
(among others)
67. can I use ... ?
Use feature detection, not browser detection
Modernizr (http://www.modernizr.com/) creates a global object
that you can check:
if (Modernizr.video) {
// video element is supported
} else {
// fall back
}
68. Detecting
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 :(
}
72. preview on desktop
This 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
73. 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()
75. 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
development
Rhodes if you are a Ruby Geek
some of this can be used now
79. New Styles
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
80. Selectors
A Variety of Selectors provide an interface to apply
styles 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
81. 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
82. New color formats in CSS3
HSL – hsl(hue, saturation, lightness)
CMYK – cmyk(cyan, magenta, yellow, black)
HSLA – hsl(hue, saturation, lightness, alpha)
RGBA – rgba(red, green, blue, alpha)
83. 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://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/
