• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html and i_phone_mobile-2
 

Html and i_phone_mobile-2

on

  • 2,548 views

 

Statistics

Views

Total Views
2,548
Views on SlideShare
2,537
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)