• Save
HTML5 and web technology update
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

HTML5 and web technology update

  • 2,645 views
Uploaded 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

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,645
On Slideshare
2,643
From Embeds
2
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 2

http://localhost 1
http://www.linkedin.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
    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
  • 10. HTML5 Document
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title></title>
      </head>
      <body></body>
    </html>
  • 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)
    <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>
  • 13. EJS
    <script src="js/ejs.js" type="text/javascript"></script>
    http://embeddedjs.com/getting_started.html
  • 14. 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
  • 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:
    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
  • 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.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();
  • 23. HTML 5 canvas cheat sheet
    http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
  • 24. Phonegap
    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();
        }
    }
  • 25. Resources
    diveintohtml5.org/
    html5demos.com/
    HTML 5 canvas cheat sheet
    jquery.com/
    embeddedjs.com/
    www.phonegap.com/
    Android Apps
    iPhone Apps