Your SlideShare is downloading. ×
HTML5 and web technology update
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 and web technology update


Published on

An introduction to modern web technologies …

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
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1.
    • HTML5 Offline, Storage, and Canvas
    • 2. Embedded JavaScript
    • 3. RESTful WebServices using MVC 3, jQuery, and JSON
    • 4. Go mobile with PhoneGap
    Doug Domeny
    Principal Software Engineer, Newforma, Inc.
    September 2011
  • 5. HTML5 Features
    Canvas (i.e., graphics API)
    Offline support
    Storage (i.e., database)
    Form Elements
  • 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" />
  • 7. HTML5 Elements
    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.
    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.
    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
    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.
    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
    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.
    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>
  • 10. HTML5 Document
    <!DOCTYPE html>
    <html lang="en">
        <meta charset="utf-8" />
  • 11. 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
  • 12. EMbeddedJavascript (EJS)
    for (var i = 0; i < items.length; i++) 

        var item = items[i]; 
            <td><%= item.description %></td>
            <td><%= item.location %></td>
            <td><%= item.discipline %></td>
            <td><%= item.status %></td>
  • 13. EJS
    <script src="js/ejs.js" type="text/javascript"></script>
  • 14. RESTfulWebService using ASP.NET MVC 3
    public JsonResult Locations() { SelectionList list = _lists.GetLocations("json"); return Json(list, JsonRequestBehavior.AllowGet);}
    {"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"}]}
    JavaScript Object Notation
  • 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
  • 17. localStorage
     if (Modernizr.localstorage)                             {                                 // localStorage is always a string localStorage[key] = value; }
  • 18. 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);
  • 19. Modernizr: feature detection
    Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies:
    Geolocation API
    Touch Events
    <script src=“js/modernizr-1.7.js" type="text/javascript"></script>
  • 20. Visual Studio
    HTML5 ASP.Net Controls
    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
  • 21. Visual Studio 2010
  • 22. HTML5 Canvas
    <canvas id="floorplan" width="300" height="225"></canvas>
    var canvas = $("#floorplan").get(0);var c = canvas.getContext("2d");;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();
  • 23. HTML 5 canvas cheat sheet
  • 24. Phonegap
    function () {
        if ( {
            setInterval(function () {
    privateNetwork, {});
            }, 5000);
        if (navigator.compass) {
            function (heading) {
               heading += window.orientation;
                drawCompass(heading, window.orientation);
            }, { frequency: 2000 });
       if ( {
  • 25. Resources
    HTML 5 canvas cheat sheet
    Android Apps
    iPhone Apps