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
4. Go mobile with PhoneGapDoug Domeny Principal Software Engineer, Newforma, Inc. September 2011
5. HTML5 Features Video Canvas (i.e., graphics API) Offline support Storage (i.e., database) Geolocation Form Elements http://html5demos.com/
6. 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
7. 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.
8. 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.
9. 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
15. 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(); } } });
16. 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
19. 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
20. 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