Your SlideShare is downloading. ×
0
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
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
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
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

How to build a html5 websites.v1

8,190

Published on

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

No Downloads
Views
Total Views
8,190
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
20
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 3. HTML5
  • 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. What’s new?
  • 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. <!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. 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. TAGS
  • 10. HTML 4.01 HTML5 web-pages web-applications design user-interface
  • 11. Layout/Structure
  • 12. Web site design
  • 13. A Simple Web site design
  • 14. FORMS 2.0
  • 15. AUDIO/VIDEO
  • 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. <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. SVG Tag & CANVAS (API)
  • 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. 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. 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. 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. 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. <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. 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. <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. 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. 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. 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. 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. 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. 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. API
  • 34. Drag and Drop & History API Provides an API for Drap and Drop for JavaScript History API - Access Browser history via JavaScript.
  • 35. GEO-LOCATION
  • 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. 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. WEB-WORKERS
  • 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. 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. OFFLINE
  • 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. 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. STORAGE
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. SmartPhone Apps using HTML5 & CSS3
  • 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. 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. 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. 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. Rhodes http://mobilog.bitlasoft.com/ - READ more here ...
  • 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. Lets see few quick DEMOs
  • 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. CSS3
  • 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. 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. 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. 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. 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. Questions? Dasharatham Bitla (Dash) Founder & CEO, BitlaSoft dash@bitlasoft.com | www.BitlaSoft.com http://weblog.bitlasoft.com | http://mobilog.bitlasoft.com

×