Your SlideShare is downloading. ×
0
Html and i_phone_mobile-2
Html and i_phone_mobile-2
Html and i_phone_mobile-2
Html and i_phone_mobile-2
Html and i_phone_mobile-2
Html and i_phone_mobile-2
Html and i_phone_mobile-2
Html and i_phone_mobile-2
Html and i_phone_mobile-2
Html and i_phone_mobile-2
Html and i_phone_mobile-2
Html and i_phone_mobile-2
Html and i_phone_mobile-2
Html and i_phone_mobile-2
Html and i_phone_mobile-2
Html and i_phone_mobile-2
Html and i_phone_mobile-2
Html and i_phone_mobile-2
Html and i_phone_mobile-2
Html and i_phone_mobile-2
Html and i_phone_mobile-2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html and i_phone_mobile-2

2,059

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,059
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
45
Comments
0
Likes
3
Embeds 0
No embeds

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

×