Html and i_phone_mobile-2
Upcoming SlideShare
Loading in...5
×
 

Html and i_phone_mobile-2

on

  • 2,612 views

 

Statistics

Views

Total Views
2,612
Views on SlideShare
2,601
Embed Views
11

Actions

Likes
3
Downloads
44
Comments
0

3 Embeds 11

http://www.slideshare.net 7
http://localhost 3
http://www.techgig.com 1

Accessibility

Categories

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

Html and i_phone_mobile-2 Html and i_phone_mobile-2 Presentation Transcript

  • HTML5 and iPhone/mobile (apps without C)
  • (very) short history
    •  
  • <!doctype html>
      • new structural elements <section>,<header>,<footer>,<nav>,...      
      • new inline elements     
      • dynamic pages support     
      • form types     
      • media elements <canvas>,<video>,<audio>      
      • some old elements removed 
  • new Javascript APIs
      • <canvas> and graphics context   
      • local and session storage   
      • web database   
      • web worker   
      • websocket   
      • geolocation   
      • offline webapplications  
  • canvas
    • html:
    •      <canvas id=&quot;graph&quot; width=&quot;400&quot; height=&quot;400&quot;>
    •          this is displayed when the tag is not supported...
    •      </canvas>
    • javascript:
    •      var g = document.getElementById('graph');
    •      if (g && g.getContext) {
    • var c = g.getContext('2d');
    •      }
  • canvas
    • ctx.clearRect(0,0,400,400);
    • var gr =
    • ctx.createLinearGradient(0,200,0,400);
    • gr.addColorStop(0.5, &quot;#ddd&quot;);
    • gr.addColorStop(1, &quot;green&quot;);
    • ctx.fillStyle = gr;
    • ctx.fillRect(0,0,400,400);
    • ctx.beginPath();
    • ctx.strokeStyle = &quot;#000&quot;;
    • ctx.lineWidth = 0.2;
    • for (i = 0; i<20; i++) {
    • ctx.moveTo(0, i*20);
    • ctx.lineTo(400, i*20);
    • }
    • ctx.stroke();
    • ctx.closePath();
    • ctx.lineWidth = 0.8;
    • ctx.textBaseline = &quot;bottom&quot;;
    • ctx.font = &quot;64pt Arial&quot;;
    • ctx.strokeStyle = &quot;red&quot;;
    • ctx.strokeText(&quot;demo&quot;,100,200);
    •  
  • localStorage / sessionStorage
    • // visible to all windows loaded from same location
    • localStorage.setItem('currency','EUR');
    • var currency = localStorage.getItem('currency');
    • // stored in window object, deleted on close
    • sessionStorage.setItem('currency','EUR');
    • var currency = sessionStorage.getItem('currency');
  • web database
    • $(document).ready(function() {
    •    var shortName = &quot;Shopping&quot;;
    •    var version = &quot;1.0&quot;;
    •    var displayName = &quot;Shopping&quot;;
    •    var maxSize = 65536;  // in kilobytes
    •    db = openDatabase(shortName, version, displayName, maxSize);
    •    db.transaction(
    •        function(transaction) {
    •          transaction.executeSql(
    •              'create table if not exists entries ' +
    •              '(id integer not null primary key autoincrement, ' +
    •              ' name text not null, row integer not null, section integer not null);'
    •          );
    •        }
    •    );
    • });
  • web database
    • function addarticle() {
    •    var article = $('#article').val();
    •    var row = $('#row').val();
    •    var section = $('#section').val();
    •    db.transaction(
    •        function(transaction) {
    • transaction.executeSql(
    •              'insert into entries(name,row,section) values(?,?,?);',
    •              [article, row, section],
    •              function() {
    •                refreshEntries();
    •                jQT.goBack();
    •              },
    • errorHandler
    •          );
    •        }
    •    );
    •    $('#articleform')[0].reset();
    •    return false;
    • }
    • function errorHandler(transaction, error) {
    •    alert('Sorry, save failed - ' + error.message + '(code:' + error.code +')');
    •    // returning true halts execution and rolls back
    •    return true;
    • }
  • geolocation
    • function doLocation() {
    •    if (navigationSupported() ) {
    •        navigator.geolocation.getCurrentPosition(
    •          showPosition, 
    •          positionError,
    •          { 
    •              enableHighAccuracy:false,      
    •              timeout:10000,                 
    •              maximumAge:300000              
    •          }
    •        );
    •    }
    • }
    • function showPosition(position) {
    •    var lat = position.coords.latitude;
    •    var lon = position.coords.longitude;
    •    if (GBrowserIsCompatible()) {
    •        var map = new GMap2(document.getElementById(&quot;location-map&quot;));
    •        var weAreHere = new GLatLng(lat, lon);
    •        map.setCenter(weAreHere, 13);
    •        var marker = new GMarker(weAreHere);
    •        map.addOverlay( marker );
    •        marker.bindInfoWindowHtml(&quot;You are here&quot;);
    •        map.setUIToDefault();
    •    }
    • }
  • geolocation
    • function positionError(error) {
    •    if (error.code == 1) {
    •        // user denied geolocation
    •    } else if (error.code == 2) {
    •        // position unavailable for whatever reason (no satellite or network down)
    •    } else if (error.code == 3) {
    •        // timeout value exceeded
    •    } else {
    •        // other / unknown
    •    }
    • }
  • offline webapplication
    • <html manifest=&quot;demo.manifest&quot;>
    • Manifest sample contents:
    • CACHE MANIFEST
    • index.html
    • contents.html
    • application.js
    • image.jpg
    • # force online:
    • NETWORK:
    • online-logo.png
    • # provide fallback
    • FALLBACK:
    • images/ images/fallback-image.png
  • offline manifest generation
    • map request for demo.manifest to servlet
    • content-type must be text/cache-manifest
    • make sure manifest changes when code changes: create hash 
    • of all your offline content, and add as comment in the manifest
    • when manifest is changed, all offline content is refreshed
    • exclude contents of WEB-INF from manifest and hash
    • resp.setContentType(&quot;text/cache-manifest&quot;);
    • if (new File(realPath).isDirectory()) {
    •    try {
    •          listDirectory(new File(realPath), resp.getWriter(), realPath, md5);
    •        } catch (NoSuchAlgorithmException e) {
    •          throw new ServletException(&quot;unable to generate cache manifest&quot;, e);
    •        }
    •    }
    • BigInteger bigInt = new BigInteger(1, md5.digest());
    • resp.getWriter().println(&quot;# Hash: &quot; + bigInt.toString(16));
  • can I use ... ?
    • support still incomplete across browsers
    • IE9 promise to offer full support
    • for some features, javascript workaround available:
      • canvas : excanvas.js gives support in IE (all versions) <canvas> can be used today
      • HTML5 elements: html5shiv fixes DOM tree and adds styling
    check http://caniuse.com  (among others)
  • can I use ... ?
    • Use feature detection, not browser detection
    • Modernizr (http://www.modernizr.com/) creates a global object that you can check:
    • if (Modernizr.video) {
    •    // video element is supported
    • } else {
    •    // fall back
    • }
    •    
  • the good news
    • in the mobile world, the situation is much better
    • iPhone, Android use WebKit based browsers
    • supports offline web app, web database, canvas, geolocation, ...
  • jQtouch
    • jQuery plugin
    • adds iPhone styling
    • adds transitions using CSS3 support
    • <script type=&quot;text/javascript&quot;
    •    src=&quot;jqtouch/jquery.js&quot;></script>
    • <script type=&quot;text/javascript&quot;
    •    src=&quot;jqtouch/jqtouch.js&quot;></script>
    • <script type=&quot;text/javascript&quot;>
    •      var jQT = $.jQTouch({
    •          icon: 'logo.png',
    •          statusBar: 'black'
    •      });
    • </script>
  • jQtouch page structure
    • <body>
    •    <div id=&quot;home&quot;>
    •        <div class=&quot;toolbar&quot;>
    •            <h1>RaboTransAct</h1>
    •            <a class=&quot;button flip&quot; href=&quot;#about&quot;>About</a>
    •        </div>
    •        <ul class=&quot;edgetoedge&quot;>
    •            <li class=&quot;arrow&quot;><a href=&quot;#location-about&quot;>Geolocation demo</a></li>
    •            <li class=&quot;arrow&quot;><a href=&quot;#information&quot;>Information</a></li>
    •        </ul>
    •    </div>
    •    <div id=&quot;location&quot;>
    •        <div class=&quot;toolbar&quot;>
    •          <h1>Geolocation</h1>
    •          <a class=&quot;button back&quot; href=&quot;#&quot;>Back</a>
    •        </div>
    •        <span id=&quot;location-status&quot;>Trying to determine location...</span><br/>
    •        <div id=&quot;location-map&quot; style=&quot;width:300px; height:300px&quot;></div>
    •    </div>
    •    <div id=&quot;location-about&quot;>
    •        <div class=&quot;toolbar&quot;>
    •          <h1>Geolocation</h1>
    •          <a class=&quot;button back&quot; href=&quot;#&quot;>Back</a>
    •          <a class=&quot;button flip&quot; href=&quot;#location&quot;>Run demo</a>
    •        </div>
    •        <h1>About geolocation</h1>
  • preview on desktop
    • This can now:
    • - launch from home screen (as web clip)
    • - run fullscreen on phone
    • - store data locally
    • - run offline
    • But can not:
    • - access hardware (sound, vibrate)
    • - be submitted to app store
  • PhoneGap
    • - compiles to native app for iPhone, Android, Blackberry
    • - abstracts away native API differences
    • - need SDK for each target device
    • - open source (MIT license)
    • - navigator.notification.vibrate() , .beep(), .alert()
  • conclusions
    • + low barrier to entry for mobile
    • + familiar language
    • + use canvas / excanvas for graphs (no Flash needed)
    • + PhoneGap (and others) for cross-platform development
    • + some of this can be used now
    • -  depends on App Store approval process
    • - Apple can block 3rd party tooling - Adobe, Appcelerator
    • - close but not as good as native (but good enough)