Html5 and web technology update
Post on 20-Jan-2015
1699 Views
Preview:
DESCRIPTION
Transcript
Doug DomenyPrincipal Software Engineer, Newforma, Inc.
• HTML5 Offline, Storage, and Canvas
• Embedded JavaScript
• RESTful WebServices using MVC 3, jQuery, and JSON
• Go mobile with PhoneGap
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>
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: * # 2012-05-12 12:46:40Z
EMBEDDED JAVASCRIPT (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://code.google.com/p/embeddedjavascript
RESTFUL WEBSERVICE 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
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
Visual Studio 2010
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();
HTML 5 canvas cheat sheet http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
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(); }}
Adobe PhoneGapopen source hybrid framework
appMobiappMobi
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, 2012http://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
top related