Html5 and web technology update

• 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

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=“2012-05-12”>May 12, 2012</time>

http://diveintohtml5.info/semantics.html#new-elements

HTML5 Document

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

 <!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

<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://code.google.com/p/embeddedjavascript

 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"}
]}

 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();
}
}
});

 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

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

 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

 <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();

HTML 5 canvas cheat sheet
 http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

Adobe PhoneGap
open source hybrid framework
document.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();
}
}

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 weeks
appMobi press release: June 25, 2012
http://www.marketwatch.com/story/appmobi-crosses-100-million-hybrid-html5-app-starts-2012-06-25

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

Html5 and web technology update

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Viewers also liked

Viewers also liked (6)

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