• HTML5 Offline, Storage, and Canvas                   • Embedded JavaScript               • RESTful WebServices using    ...
HTML5 Features   Video   Canvas (i.e., graphics API)   Offline support   Storage (i.e., database)   Geolocation   Fo...
HTML5 Form Elements   <input type="search" name="q" placeholder="Search"    autofocus />   <input type="email" placehold...
HTML5 Elements   <header>     The header element represents a group of introductory or       navigational aids. The heade...
HTML5 Elements   <nav>    The nav element represents a section of a page that links to      other pages or to parts withi...
HTML5 Elements   <section>    The section element represents a generic document or      application section. Examples of ...
HTML5 Document   <!DOCTYPE html>   <html lang="en">    <head>     <meta charset="utf-8" />     <title></title>    </...
   <!DOCTYPE html>    <html lang="en" manifest="CacheManifest.ashx">   CACHE MANIFEST    /HoneyDoList/css/style.css    /...
<table>    <thead>        <tr>            <th>Description</th>            <th>Location</th>            <th>Discipline</th>...
EJS   <script src="js/ejs.js"    type="text/javascript"></script>   http://code.google.com/p/embeddedjavascript
   public JsonResult Locations() {        SelectionList list = _lists.GetLocations("json");        return Json(list, Json...
   jQuery.ajax( {       url: "http://localhost/HoneyDo/Lists/" + list.key,       dataType: "text",       context: list,  ...
   localStorage (key/value strings)       5 MB limit       Supported by all browsers   WebSqlDatabase (SQLite)       ...
   if (Modernizr.localstorage)    {       // localStorage is always a string       localStorage[key] = value;    }
   if (Modernizr.websqldatabase) {       db = openDatabase(“honeydodb", "0.1",         “HoneyDo Database",         10 * 1...
Modernizr: feature detection   Modernizr is a small JavaScript library that detects the    availability of native impleme...
Visual Studio   HTML5 ASP.Net Controls    http://sourceforge.net/projects/html5asp/       Inputs with Custom Keyboards  ...
Visual Studio 2010
   <canvas id="floorplan" width="300" height="225"></canvas>   var canvas = $("#floorplan").get(0);    var c = canvas.ge...
HTML 5 canvas cheat sheet   http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
Adobe PhoneGap    open source hybrid frameworkdocument.addEventListener("deviceready",function () {    if (navigator.netwo...
appMobi    50,000+ active developers; 25% created 3 or more    Types of apps: 40% media, 35% games, 15% retail    Apps ...
Resources   diveintohtml5.info/   html5demos.com/   HTML 5 canvas cheat sheet   jquery.com/   embedded javascript   ...
Upcoming SlideShare
Loading in …5
×

Html5 and web technology update

1,840 views
1,801 views

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,840
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 and web technology update

  1. 1. • HTML5 Offline, Storage, and Canvas • Embedded JavaScript • RESTful WebServices using MVC 3, jQuery, and JSON • Go mobile with PhoneGap Doug Domeny Principal Software Engineer, Newforma, Inc.July 2012
  2. 2. HTML5 Features Video Canvas (i.e., graphics API) Offline support Storage (i.e., database) Geolocation Form Elements http://html5demos.com/
  3. 3. HTML5 Form Elements <input type="search" name="q" placeholder="Search" autofocus /> <input type="email" placeholder="Enter your email address" /> <input type="url" placeholder="Enter your web address" /> <input type="number" min="1" max="12" value="12" /> <input type="range" min="1" max="12" value="12" /> <input type="date" /> <input type="datetime" /> <input type="color" /> http://localhost/html5cap/form.html
  4. 4. HTML5 Elements <header> 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. <hgroup> 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. <footer> 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.
  5. 5. HTML5 Elements <nav> 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. <article> 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.
  6. 6. HTML5 Elements <section> 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. <aside> 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. <time datetime=“2012-05-12”>May 12, 2012</time>http://diveintohtml5.info/semantics.html#new-elements
  7. 7. HTML5 Document <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body></body> </html>
  8. 8.  <!DOCTYPE html> <html lang="en" manifest="CacheManifest.ashx"> 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: * # 2012-05-12 12:46:40Z
  9. 9. <table> <thead> <tr> <th>Description</th> <th>Location</th> <th>Discipline</th> <th>Status</th> </tr> </thead> <tbody><%for (var i = 0; i < items.length; i++){ var item = items[i];%> <tr> <td><%= item.description %></td> <td><%= item.location %></td> <td><%= item.discipline %></td> <td><%= item.status %></td> </tr><%}%> </tbody></table>
  10. 10. EJS <script src="js/ejs.js" type="text/javascript"></script> http://code.google.com/p/embeddedjavascript
  11. 11.  public JsonResult Locations() { SelectionList list = _lists.GetLocations("json"); return Json(list, JsonRequestBehavior.AllowGet); } http://localhost/HoneyDo/Lists/Locations {"items":[ {"val": "Kitchen", "txt": "Kitchen"}, JSON {"val": "Living", "txt": "Living Room"}, JavaScript Object Notation {"val": "Dining", "txt": "Dining Room"}, http://www.json.org {"val": "Base", "txt": "Basement"}, {"val": "BedRm", "txt": "Bedroom"}, {"val": "Garage", "txt": "Garage"}, {"val": "Deck", "txt": "Deck"}, {"val": "Lav", "txt": "Bathroom"}, {"val": "Stairs", "txt": "Stairs"} ]}
  12. 12.  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(); } } });
  13. 13.  localStorage (key/value strings)  5 MB limit  Supported by all browsers WebSqlDatabase (SQLite)  Safari, Chrome, Opera  NOT FireFox (has IndexedDB instead)  IE doesn’t have any database yet
  14. 14.  if (Modernizr.localstorage) { // localStorage is always a string localStorage[key] = value; }
  15. 15.  if (Modernizr.websqldatabase) { db = openDatabase(“honeydodb", "0.1", “HoneyDo Database", 10 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql("insert into HoneyDoList (location, description, discipline, status) values (?,?,?,?);", values, nullDataHandler, errorHandler); }, myTransactionErrorCallback, myTransactionSuccessCallback);
  16. 16. Modernizr: feature detection Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies:  HTML5  CSS3  Geolocation API  SVG  Touch Events  WebGL <script src=“js/modernizr-1.7.js" type="text/javascript"></script> http://www.modernizr.com/ http://localhost/html5cap/index.html
  17. 17. Visual Studio HTML5 ASP.Net Controls http://sourceforge.net/projects/html5asp/  Inputs with Custom Keyboards  Inputs with Placeholder Text  Dynamically created email links  tappable phone numbers  Map Links with Start and Finish addresses Visual Studio 2010 HTML5 Templates  HTML5 Page Template with jQuery 1.5.1 & Modernizr 1.7  HTML5 Web Site Template with jQuery 1.5.1 & Modernizr 1.7
  18. 18. Visual Studio 2010
  19. 19.  <canvas id="floorplan" width="300" height="225"></canvas> var canvas = $("#floorplan").get(0); var c = canvas.getContext("2d"); c.save(); c.lineWidth = 1; c.lineJoin = "round"; var flipped = (y < 3 * r + 5); c.translate(x, y); if (flipped) { c.rotate(180 * deg); } // number background outline c.strokeStyle = "#F00"; c.beginPath(); c.moveTo(-r, 0); c.lineTo(-r, -3 * r); c.lineTo(r, -3 * r); c.lineTo(r, 0); // circle c.arc(0, 0, r, 0, Math.PI * 2, true); c.stroke(); c.restore();
  20. 20. HTML 5 canvas cheat sheet http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
  21. 21. Adobe PhoneGap open source hybrid frameworkdocument.addEventListener("deviceready",function () { if (navigator.network) { setInterval(function () { navigator.network.isReachable( "localhost", privateNetwork, {}); }, 5000); } if (navigator.compass) { navigator.compass.watchHeading( function (heading) { heading += window.orientation; drawCompass(heading, window.orientation); }, { frequency: 2000 }); } if (navigator.camera) { $("#cameraSection").show(); }}
  22. 22. appMobi 50,000+ active developers; 25% created 3 or more Types of apps: 40% media, 35% games, 15% retail Apps run over 100 million times Majority of apps published to both iOS and Android In past 12 months, average time to complete halved to just 8 weeksappMobi press release: June 25, 2012http://www.marketwatch.com/story/appmobi-crosses-100-million-hybrid-html5-app-starts-2012-06-25
  23. 23. Resources diveintohtml5.info/ html5demos.com/ HTML 5 canvas cheat sheet jquery.com/ embedded javascript www.phonegap.com/ Android Apps iPhone Apps HTML5 apps on Windows Phone with PhoneGap

×