SlideShare a Scribd company logo

Html and i_phone_mobile-2

•Download as PPT, PDF•
•
T
tonvanbart

The document discusses HTML5 features such as new structural elements, form types, media elements, and JavaScript APIs for canvas, local storage, web databases, web workers, websockets, geolocation, and offline web applications. It also covers tools and techniques for building mobile web apps, including jQtouch for iPhone styling, feature detection over browser detection, and PhoneGap for compiling HTML5 apps to native mobile apps. While HTML5 provides many capabilities for mobile, native apps still have advantages in accessing device hardware and approval processes.

Related slideshows

Jquery 1
Jquery 1Jquery 1
Jquery 1
 
Daejeon IT Developer Conference Web Service Practice
Daejeon IT Developer Conference Web Service PracticeDaejeon IT Developer Conference Web Service Practice
Daejeon IT Developer Conference Web Service Practice
 
Workshop 5: JavaScript testing
Workshop 5: JavaScript testingWorkshop 5: JavaScript testing
Workshop 5: JavaScript testing
 
1 of 21
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)

More Related Content

Html and i_phone_mobile-2

  • 1. HTML5 and iPhone/mobile (apps without C)
  • 3. <!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 
  • 4. new Javascript APIs <canvas> and graphics context    local and session storage    web database    web worker    websocket    geolocation    offline webapplications  
  • 5. 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');      }
  • 6. 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);  
  • 7. 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');
  • 8. 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);'          );        }    ); });
  • 9. 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; }
  • 10. 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();    } }
  • 11. 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    } }
  • 12. 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
  • 13. 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));
  • 14. 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)
  • 15. 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 }    
  • 16. 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, ...
  • 17. 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>
  • 18. 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>
  • 19. 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
  • 20. 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()
  • 21. 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)