HTML5 and web technology update


Published on

An introduction to modern web technologies

HTML5, including Offline, Storage, and Canvas
Embedded JavaScript
RESTful WebServices using MVC 3, jQuery, and JSON
Going mobile with PhoneGap and HTML and CSS

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

HTML5 and web technology update

  1. 1. <ul><li> HTML5 Offline, Storage, and Canvas
  2. 2. Embedded JavaScript
  3. 3. RESTful WebServices using MVC 3, jQuery, and JSON
  4. 4. Go mobile with PhoneGap</li></ul>Doug Domeny<br />Principal Software Engineer, Newforma, Inc.<br />September 2011<br />
  5. 5. HTML5 Features<br />Video<br />Canvas (i.e., graphics API)<br />Offline support<br />Storage (i.e., database)<br />Geolocation<br />Form Elements<br /><br />
  6. 6. HTML5 Form Elements<br /><input type="search" name="q" placeholder="Search" autofocus /><br /><input type="email" placeholder="Enter your email address" /><br /><input type="url" placeholder="Enter your web address" /><br /><input type="number" min="1" max="12" value="12" /><br /><input type="range" min="1" max="12" value="12" /><br /><input type="date" /><br /><input type="datetime" /><br /><input type="color" /><br />http://localhost/html5cap/form.html<br />
  7. 7. HTML5 Elements<br /><header><br />The header element represents a group of introductory or navigational aids. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos. <br /><hgroup><br />The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines. <br /><footer><br />The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. <br />
  8. 8. HTML5 Elements<br /><nav><br />The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. <br /><article><br />The article element represents a component of a page that consists of a self-contained composition that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a Web log entry, or any other independent item of content. <br />
  9. 9. HTML5 Elements<br /><section><br />The section element represents a generic document or application section. Examples of sections would be chapters, the tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. <br /><aside><br />The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element. Such sections are often represented as sidebars in printed typography. <br /><time datetime=“2009-10-22”>October 22, 2009</time><br /><br />
  10. 10. HTML5 Document<br /><!DOCTYPE html><br /><html lang="en"><br />  <head><br />    <meta charset="utf-8" /><br />    <title></title><br />  </head><br />  <body></body><br /></html><br />
  11. 11. HTML5 Offline<br /><!DOCTYPE html><html lang="en" manifest="CacheManifest.ashx"><br />CACHE MANIFEST /HoneyDoList/css/style.css /HoneyDoList/ejs/HoneyDoListItemRow.htm /HoneyDoList/ejs/SelectList.htm /HoneyDoList/images/810%20Floor%20Plan.jpg /HoneyDoList/js/appCacheEventLogger.js/HoneyDoList/js/ejs.js /HoneyDoList/js/jquery-1.5.1.min.js /HoneyDoList/js/json2.js /HoneyDoList/js/modernizr-1.7.min.js /HoneyDoList/HoneyDoList.html /HoneyDoList/HoneyDoListItemForm.html … NETWORK: * # 2011-05-12 12:46:40Z<br />
  12. 12. EMbeddedJavascript (EJS)<br /><table><br />    <thead><br />        <tr><br />            <th>Description</th><br />            <th>Location</th><br />            <th>Discipline</th><br />            <th>Status</th><br />        </tr><br />    </thead><br />    <tbody><br /><% <br />for (var i = 0; i < items.length; i++) <br />{ <br />    var item = items[i]; <br />%><br />    <tr><br />        <td><%= item.description %></td><br />        <td><%= item.location %></td><br />        <td><%= item.discipline %></td><br />        <td><%= item.status %></td><br />    </tr><br /><%<br />}<br />%><br />    </tbody><br /></table><br />
  13. 13. EJS<br /><script src="js/ejs.js" type="text/javascript"></script><br /><br />
  14. 14. RESTfulWebService using ASP.NET MVC 3<br />public JsonResult Locations() { SelectionList list = _lists.GetLocations("json"); return Json(list, JsonRequestBehavior.AllowGet);}<br />http://localhost/HoneyDo/Lists/Locations<br />{"items":[{"val": "Kitchen", "txt": "Kitchen"},{"val": "Living", "txt": "Living Room"},{"val": "Dining", "txt": "Dining Room"},{"val": "Base", "txt": "Basement"},{"val": "BedRm", "txt": "Bedroom"},{"val": "Garage", "txt": "Garage"},{"val": "Deck", "txt": "Deck"},{"val": "Lav", "txt": "Bathroom"},{"val": "Stairs", "txt": "Stairs"}]}<br />JSON<br />JavaScript Object Notation<br /><br />
  15. 15. Client-Side AJAX to get JSON<br />jQuery.ajax(  {url: "http://localhost/HoneyDo/Lists/" + list.key,   dataType: "text",   context: list,   success: function (data) {         var json = data;         if (Modernizr.localstorage )  {               // localStorage is always a string               localStorage[this.key] = json;         }                              updateList(this.key, json);         numListsUpdated++;         if (numListsUpdated == lists.length) {                clearTimeout(timer);                initdb();     }  } }); <br />
  16. 16. HTML5 Storage<br />localStorage (key/value strings)<br />5 MB limit<br />Supported by all browsers<br />WebSqlDatabase (SQLite)<br />Safari, Chrome, Opera<br />NOT FireFox (has IndexedDB instead)<br />IE doesn’t have any database yet<br />
  17. 17. localStorage<br /> if (Modernizr.localstorage)                             {                                 // localStorage is always a string localStorage[key] = value; } <br />
  18. 18. WebSqlDatabase<br />if (Modernizr.websqldatabase) { db = openDatabase(“honeydodb", "0.1",  “HoneyDo Database",  10 * 1024 * 1024);<br />db.transaction(function (tx) {    tx.executeSql("insert into HoneyDoList  (location, description, discipline, status)  values (?,?,?,?);",  values, nullDataHandler, errorHandler);}, myTransactionErrorCallback, myTransactionSuccessCallback);<br />
  19. 19. Modernizr: feature detection<br />Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies: <br />HTML5<br />CSS3<br />Geolocation API<br />SVG<br />Touch Events<br />WebGL<br /><script src=“js/modernizr-1.7.js" type="text/javascript"></script><br /><br />http://localhost/html5cap/index.html<br />
  20. 20. Visual Studio<br />HTML5 ASP.Net Controls<br /><br />Inputs with Custom Keyboards<br />Inputs with Placeholder Text<br />Dynamically created email links<br />tappable phone numbers<br />Map Links with Start and Finish addresses<br />Visual Studio 2010 HTML5 Templates<br />HTML5 Page Template with jQuery 1.5.1 & Modernizr 1.7<br />HTML5 Web Site Template with jQuery 1.5.1 & Modernizr 1.7<br />
  21. 21. Visual Studio 2010<br />
  22. 22. HTML5 Canvas<br /><canvas id="floorplan" width="300" height="225"></canvas><br />var canvas = $("#floorplan").get(0);var c = canvas.getContext("2d");;c.lineWidth = 1;c.lineJoin = "round";var flipped = (y < 3 * r + 5);c.translate(x, y);if (flipped) {      c.rotate(180 * deg);}// number background outlinec.strokeStyle = "#F00";c.beginPath();c.moveTo(-r, 0);c.lineTo(-r, -3 * r);c.lineTo(r, -3 * r);c.lineTo(r, 0);// circlec.arc(0, 0, r, 0, Math.PI * 2, true);c.stroke();c.restore();<br />
  23. 23. HTML 5 canvas cheat sheet<br /><br />
  24. 24. Phonegap<br />document.addEventListener("deviceready", <br />function () {<br />    if ( {<br />        setInterval(function () {<br /> <br />"localhost", <br />privateNetwork, {});<br />        }, 5000);<br />    }<br />    if (navigator.compass) {<br />        navigator.compass.watchHeading(<br />        function (heading) {<br />           heading += window.orientation;<br />            drawCompass(heading, window.orientation);<br />        }, { frequency: 2000 });<br />    }<br />    if ( {<br />        $("#cameraSection").show();<br />    }<br />}<br />
  25. 25. Resources<br /><br /><br />HTML 5 canvas cheat sheet <br /><br /><br /><br />Android Apps <br />iPhone Apps<br />