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

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 •

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); context.lineTo(10, 100); context.lineTo(10, 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/

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"> <div class="toolbar"> <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"> <div class="toolbar"> <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

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

http://weblog.bitlasoft.com	250
http://localhost	80
http://www.slideshare.net	39
http://paper.li	7
http://redesocial.uvigo.es	4
http://www.blogger.com	1
http://thetechnicalweb.blogspot.com	1

How to build a html5 websites.v1

by Bitla Software on May 15, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

7 Embeds 382

Statistics

How to build a html5 websites.v1 — Presentation Transcript