HTML5 and web technology update

RESTful WebServices using MVC 3, jQuery, and JSON

Go mobile with PhoneGapDoug Domeny Principal Software Engineer, Newforma, Inc. September 2011

HTML5 Features Video Canvas (i.e., graphics API) Offline support Storage (i.e., database) Geolocation Form Elements http://html5demos.com/

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

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.

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.

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=“2009-10-22”>October 22, 2009</time> http://diveintohtml5.org/semantics.html#new-elements

HTML5 Document <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body></body> </html>

HTML5 Offline <!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: * # 2011-05-12 12:46:40Z

EMbeddedJavascript (EJS) <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>

EJS <script src="js/ejs.js" type="text/javascript"></script> http://embeddedjs.com/getting_started.html

RESTfulWebService using ASP.NET MVC 3 public JsonResult Locations() { SelectionList list = _lists.GetLocations("json"); return Json(list, JsonRequestBehavior.AllowGet);} http://localhost/HoneyDo/Lists/Locations {"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"}]} JSON JavaScript Object Notation http://www.json.org

Client-Side AJAX to get JSON 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(); } } });

HTML5 Storage 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

localStorage if (Modernizr.localstorage) { // localStorage is always a string localStorage[key] = value; }

WebSqlDatabase 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);

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

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

HTML5 Canvas <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 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();

HTML5 and web technology update

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to HTML5 and web technology update

Similar to HTML5 and web technology update (20)

Recently uploaded

Recently uploaded (20)

HTML5 and web technology update