How To Build A HTML5 Websites.v1

An Introduction to
HTML5 CSS3 &
Dasharatham Bitla (Dash)

dash@bitlasoft.com | http://weblog.bitlasoft.com
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 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-installed on
iPhones, iPads, Android ..
Scribd/YouTube to HTML5
Apple pushing back on Flash - why?
Google Gears no longer be supported infavor of
HTML5
What’s new?
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
<!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, Ofﬂine Web
applications, MathML, inline SVG, Web Forms 2.0
•
TAGS
HTML 4.01 HTML5
web-pages web-applications
design 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 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
<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
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”);}
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
SVG Demos
http://code.google.com/p/svgweb/
http://codinginparadise.org/projects/svgweb/sampl
es/demo.html
http://codinginparadise.org/projects/svgweb/sampl
es/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 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');
}
ctx.clearRect(0,0,400,400);
<canvas>
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>
// 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)
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);
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 the
stroke.
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
var i = 0;
State: Canvas states are stored on a stack
var sin = Math.sin(Math.PI/6);
save()
var cos = Math.cos(Math.PI/6);
restore()
ctx.translate(200, 200);
translate(x, y)
var c = 0;
rotate(angle)
for (i; i <= 12; i++) {
scale(x, y) c = Math.floor(255 / 12 * i);
transform(m11, m12, m21, m22, dx, dy) ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
setTransform(m11, m12, m21, m22, dx, ctx.fillRect(0, 0, 100, 10);

dy) 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
Drag and Drop & History API
Provides an API for Drap and Drop for

JavaScript
History API - Access Browser history
via JavaScript.
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);
}
);
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();
}
}
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 between
client and server in a cleaner, more efficient
form than hanging 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 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
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
 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
// 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');
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
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;
}
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
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, ...
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)
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
}
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 :(
 }
SmartPhone
Apps using
HTML5 & CSS3
jQtouch
jQuery plugin
adds iPhone styling
adds 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
jQtouch page structure
<body>
<div id="home">
<div class="toolbar">
<h1>RaboTransAct</h1>
<a class="button flip" href="#about">About</a>
</div>
<ul class="edgetoedge">
<li class="arrow"><a href="#location-about">Geolocation demo</a></li>
<li class="arrow"><a href="#information">Information</a></li>
</ul>
</div>
<div id="location">
<h1>Geolocation</h1>
<a class="button back" href="#">Back</a>
</div>
<span id="location-status">Trying to determine location...</span><br/>
<div id="location-map" style="width:300px; height:300px"></div>
</div>
<div id="location-about">
<h1>Geolocation</h1>
<a class="button back" href="#">Back</a>
<a class="button flip" href="#location">Run demo</a>
</div>
<h1>About geolocation</h1>
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
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
http://mobilog.bitlasoft.com/ - READ more here ...
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
Lets see few quick
DEMOs
Demos
http://www.designzzz.com/html-5-tutorial.html
http://apirocks.com/html5/html5.html
http://jqtouch.com/preview/demos/main/
http://www.canvasdemos.com/
http://codinginparadise.org/projects/svgweb/sa
mples/demo.html
http://codinginparadise.org/projects/svgweb/sa
mples/javascript-
samples/svg_dynamic_fancy.html
CSS3
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
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
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
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)
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/

Questions?
Dasharatham Bitla (Dash)
Founder & CEO, BitlaSoft
dash@bitlasoft.com | www.BitlaSoft.com
http://weblog.bitlasoft.com | http://mobilog.bitlasoft.com

How To Build A HTML5 Websites.v1

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

How To Build A HTML5 Websites.v1

Загружено:

Авторское право:

Доступные форматы

An Introduction to

HTML5 CSS3 &

Dasharatham Bitla (Dash)

 In 1995 Netscape introduced JavaScript

Now web applications are demanding more

• new inline elements

• dynamic pages support

• some old elements removed

• Custom content handlers, ping attribute, cross-

Allows a page to natively play video

<video src = “movire.mp4” controls>

For different codecs supported by diff browers

Graphics intrinsic part of the web

 var myRect = doc.getElemntById(“myRect”);

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

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

WebGL based on Open GL for 3d context

// canvas is a reference to a <canvas> element

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

// Draw some rectangles.

// Set the style properties.

quadraticCurveTo(cp1x, cp1y, x, y) // (BROKEN in FF 3.5)

Styles and Colors

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

setTransform(m11, m12, m21, m22, dx, ctx.fillRect(0, 0, 100, 10);

Provides an API for Drap and Drop for

Specification is under active development

Manifest sample contents:

// visible to all windows loaded from same location

// stored in window object, deleted on close

function errorHandler(transaction, error) {

the good news is

• canvas : excanvas.js gives support in IE (all versions)

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

- launch from home screen (as web clip)

But can not:

- access hardware (sound, vibrate)

- abstracts away native API differences

- need SDK for each target device

- open source (MIT license)

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

border-radius - Rounded Corners

A Variety of Selectors provide an interface to apply

An example would be selecting an nth child.

Animations - CSS3 allows for animations of styles

Transitions - Allows styles to change gradually color

Transformations - 2D and 3D transformations,

HSL – hsl(hue, saturation, lightness)

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

Вам также может понравиться