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

HTML5 and web technology update

on

  • 2,485 views

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

Statistics

Views

Total Views
2,485
Views on SlideShare
2,483
Embed Views
2

Actions

Likes
1
Downloads
0
Comments
0

2 Embeds 2

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

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 and web technology update HTML5 and web technology update Presentation Transcript

      • 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.
      September 2011
    • 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=“2009-10-22”>October 22, 2009</time>
      http://diveintohtml5.org/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: * # 2011-05-12 12:46:40Z
    • 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>
    • EJS
      <script src="js/ejs.js" type="text/javascript"></script>
      http://embeddedjs.com/getting_started.html
    • 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
    • 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
    • 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();
          }
      }
    • Resources
      diveintohtml5.org/
      html5demos.com/
      HTML 5 canvas cheat sheet
      jquery.com/
      embeddedjs.com/
      www.phonegap.com/
      Android Apps
      iPhone Apps