An Introduction to



HTML5 CSS3                   &



           Dasharatham Bitla (Dash)
dash@bitlasoft.com   | http://...
Browsers Started a Revolution that Continues

   In 1995 Netscape introduced JavaScript
   In 1999, Microsoft introduce...
HTML5
Necessary for modern web apps
Standardization
Cross-platform
Apple Safari, Google Chrome, Mozilla Firefox, and
 Opera
...
What’s new?
HTML 5 Features
Client-side Database Storage
sessionStorage
Application Cache - Offline
SQLite in browser
2D Graphics...
<!doctype html>
• new structural elements
  <section>,<header>,<footer>,<nav>,...



• new inline elements

• dynamic page...
new Javascript APIs
•   <canvas> and graphics context
•   local and session storage
•   web database
•   web worker
•   we...
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....
<video>

<video src = “movire.mp4” controls>
</video>

For different codecs supported by diff browers
  <video controls>
...
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...
SVG
HTML like tags for drawing
Draw into the page …
Make it interactive …
Scale it without any distortion/pixelation …...
http://www.mozilla.com/en-US/firefox/stats/
SVG
   Highlevel
   Import/Export
   Easy Uis
   Intractive
   Medium A...
SVG Demos
http://code.google.com/p/svgweb/
http://codinginparadise.org/projects/svgweb/sampl
 es/demo.html
http://codin...
Canvas API
JS API – Scriptable Image API

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


var canvas = document....
<canvas>
 Create a virtual canvas for drawing graphics in the browser.
 Javascript can be used to control graphic render...
ctx.clearRect(0,0,400,400);
                                         <canvas>
var gr =

ctx.createLinearGradient(0,200,0,4...
<canvas>

// canvas is a reference to a <canvas> element
   var context = canvas.getContext('2d');
   context.fillRect(0,0...
fill, stroke, lines, Rect


context.fillStyle = '#00f'; // blue
context.strokeStyle = '#f00'; // red
context.lineWidth = 4...
Path




// Set the style properties.
context.fillStyle = '#00f';
context.strokeStyle = '#f00';
context.lineWidth = 4;
con...
Arcs, Curves
arc(x, y, radius, startAngle, endAngle, anticlockwise)


quadraticCurveTo(cp1x, cp1y, x, y) // (BROKEN in FF ...
Images: draw, scale, slice


//drawImage(image, sx, sy, sWidth, sHeight, dx, dy,
dWidth, dHeight)// Draw slice
ctx.drawIma...
Transformations
                                             var i = 0;
State: Canvas states are stored on a stack
       ...
Canvas Demos

http://www.canvasdemos.com/type/applications/
http://code.edspencer.net/Bean/index.html
http://www.xarg.org/...
API
Drag and Drop & History API


Provides an API for Drap and Drop for
JavaScript
History API - Access Browser history
via Ja...
GEO-LOCATION
Geo Location
Browsers are now location enabled
iPhone, Android leverages it too

  Navigator.geolcation.getCurrentPositi...
geolocation
function doLocation() {
   if (navigationSupported() ) {
      navigator.geolocation.getCurrentPosition(
     ...
WEB-WORKERS
Native apps have threads and processes
Workers provide web apps with a means for concurrency
Can offload heavy computation...
WEB Sockets
Allows bi-directional communication between
client and server in a cleaner, more efficient
form than hanging g...
OFFLINE
Application Cache
Application cache solves the problem of how to
 make it such that one can load an application URL
 whil...
offline webapplication
<html manifest="demo.manifest">

Manifest sample contents:
CACHE MANIFEST
index.html
contents.html
...
STORAGE
Local Storage
 Provides a way to store data client side
 Useful for many classes of applications, especially in
  conjun...
localStorage / sessionStorage

// visible to all windows loaded from same location
localStorage.setItem('currency','EUR');...
web database
$(document).ready(function() {
    var shortName = "Shopping";
    var version = "1.0";
    var displayName =...
web database
function addarticle() {
   var article = $('#article').val();
   var row = $('#row').val();
   var section = ...
What are the benefits of using HTML5
 Cleaner markup
 Additional semantics of new elements like <header>,
  <nav>, and <...
What are the downsides to using HTML5
The spec isn’t finished and is likely to change
Not everything works in every brow...
can I use ... ?
support still incomplete across browsers
IE9 promise to offer full support
for some features, javascript w...
can I use ... ?
Use feature detection, not browser detection

Modernizr (http://www.modernizr.com/) creates a global objec...
Detecting
Using Modernizr - http://www.modernizr.com/
   <!DOCTYPE html>
   <html>
   <head>
    <meta charset="utf-8...
SmartPhone
  Apps using
HTML5 & CSS3
jQtouch
jQuery plugin
adds iPhone styling
adds transitions using CSS3 support

<script type="text/javascript"
   src="jqto...
jQtouch page structure
<body>
   <div id="home">
        <div class="toolbar">
           <h1>RaboTransAct</h1>
          ...
preview on desktop
This can now:

- launch from home screen (as web clip)
- run fullscreen on phone
- store data locally
-...
PhoneGap
- compiles to native app for iPhone, Android, Blackberry

- abstracts away native API differences

- need SDK for...
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 Flas...
Lets see few quick


DEMOs
Demos

http://www.designzzz.com/html-5-tutorial.html
http://apirocks.com/html5/html5.html
http://jqtouch.com/preview/de...
CSS3
New Styles

border-radius - Rounded Corners
border-colors - Gradient Borders
box-shadow - Drop Shadows
text-shadow - T...
Selectors



A Variety of Selectors provide an interface to apply
 styles more precisely.
getElementByClassName

An exa...
Animation and Motion

Animations - CSS3 allows for animations of styles

Transitions - Allows styles to change gradually...
New color formats in CSS3

HSL – hsl(hue, saturation, lightness)
CMYK – cmyk(cyan, magenta, yellow, black)
HSLA – hsl(h...
More Resources

 HTML 5 Doctor - http://html5doctor.com/
 HTML 5 Spec - http://dev.w3.org/html5/spec/Overview.html
 htt...
Questions?
Dasharatham Bitla (Dash)
Founder & CEO, BitlaSoft
dash@bitlasoft.com | www.BitlaSoft.com
http://weblog.bitlasof...
How to build a html5 websites.v1
How to build a html5 websites.v1
How to build a html5 websites.v1
How to build a html5 websites.v1
How to build a html5 websites.v1
How to build a html5 websites.v1
How to build a html5 websites.v1
How to build a html5 websites.v1
How to build a html5 websites.v1
How to build a html5 websites.v1
How to build a html5 websites.v1
How to build a html5 websites.v1
How to build a html5 websites.v1
How to build a html5 websites.v1
How to build a html5 websites.v1
Upcoming SlideShare
Loading in …5
×

How to build a html5 websites.v1

8,610 views

Published on

Published in: Technology
0 Comments
20 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,610
On SlideShare
0
From Embeds
0
Number of Embeds
785
Actions
Shares
0
Downloads
0
Comments
0
Likes
20
Embeds 0
No embeds

No notes for slide

How to build a html5 websites.v1

  1. 1. An Introduction to HTML5 CSS3 & Dasharatham Bitla (Dash) dash@bitlasoft.com | http://weblog.bitlasoft.com www.BitlaSoft.com
  2. 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
  3. 3. HTML5
  4. 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
  5. 5. What’s new?
  6. 6. 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
  7. 7. <!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. 8. 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 •
  9. 9. TAGS
  10. 10. HTML 4.01 HTML5 web-pages web-applications design user-interface
  11. 11. Layout/Structure
  12. 12. Web site design
  13. 13. A Simple Web site design
  14. 14. FORMS 2.0
  15. 15. AUDIO/VIDEO
  16. 16. <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
  17. 17. <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();
  18. 18. SVG Tag & CANVAS (API)
  19. 19. 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
  20. 20. 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”);}
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. <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'); }
  25. 25. 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);
  26. 26. <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)
  27. 27. 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);
  28. 28. 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();
  29. 29. 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)
  30. 30. 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();
  31. 31. 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);
  32. 32. 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/
  33. 33. API
  34. 34. Drag and Drop & History API Provides an API for Drap and Drop for JavaScript History API - Access Browser history via JavaScript.
  35. 35. GEO-LOCATION
  36. 36. 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); } );
  37. 37. 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(); } }
  38. 38. WEB-WORKERS
  39. 39. 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”)
  40. 40. 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
  41. 41. OFFLINE
  42. 42. 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
  43. 43. 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
  44. 44. STORAGE
  45. 45. 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']); } }); });
  46. 46. 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');
  47. 47. 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);' ); } ); });
  48. 48. 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; }
  49. 49. 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
  50. 50. 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, ...
  51. 51. 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)
  52. 52. 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 }
  53. 53. 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 :(  }
  54. 54. SmartPhone Apps using HTML5 & CSS3
  55. 55. 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
  56. 56. 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>
  57. 57. 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
  58. 58. 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()
  59. 59. Rhodes http://mobilog.bitlasoft.com/ - READ more here ...
  60. 60. 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
  61. 61. Lets see few quick DEMOs
  62. 62. 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
  63. 63. CSS3
  64. 64. 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
  65. 65. 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
  66. 66. 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
  67. 67. 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)
  68. 68. 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/ 
  69. 69. Questions? Dasharatham Bitla (Dash) Founder & CEO, BitlaSoft dash@bitlasoft.com | www.BitlaSoft.com http://weblog.bitlasoft.com | http://mobilog.bitlasoft.com

×