html and i_phone_mobile-2
DESCRIPTION
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
canvashtml:
<canvas id="graph" width="400" height="400"> 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'); }
canvasctx.clearRect(0,0,400,400);var gr = ctx.createLinearGradient(0,200,0,400);gr.addColorStop(0.5, "#ddd");gr.addColorStop(1, "green");ctx.fillStyle = gr;ctx.fillRect(0,0,400,400);
ctx.beginPath();ctx.strokeStyle = "#000";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 = "bottom";ctx.font = "64pt Arial";ctx.strokeStyle = "red";ctx.strokeText("demo",100,200);
localStorage / sessionStorage
// visible to all windows loaded from same locationlocalStorage.setItem('currency','EUR');var currency = localStorage.getItem('currency');
// stored in window object, deleted on closesessionStorage.setItem('currency','EUR');var currency = sessionStorage.getItem('currency');
web database$(document).ready(function() { var shortName = "Shopping"; var version = "1.0"; var displayName = "Shopping"; 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 databasefunction 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;}
geolocationfunction 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("location-map")); var weAreHere = new GLatLng(lat, lon); map.setCenter(weAreHere, 13); var marker = new GMarker(weAreHere); map.addOverlay( marker ); marker.bindInfoWindowHtml("You are here"); map.setUIToDefault(); }}
geolocationfunction 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="demo.manifest">
Manifest sample contents:
CACHE MANIFESTindex.htmlcontents.htmlapplication.jsimage.jpg
# force online:NETWORK:online-logo.png
# provide fallbackFALLBACK:images/ images/fallback-image.png
offline manifest generationmap 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 manifestwhen manifest is changed, all offline content is refreshedexclude contents of WEB-INF from manifest and hash
resp.setContentType("text/cache-manifest");if (new File(realPath).isDirectory()) { try { listDirectory(new File(realPath), resp.getWriter(), realPath, md5); } catch (NoSuchAlgorithmException e) { throw new ServletException("unable to generate cache manifest", e); } }BigInteger bigInt = new BigInteger(1, md5.digest());resp.getWriter().println("# Hash: " + bigInt.toString(16));
can I use ... ?support still incomplete across browsersIE9 promise to offer full supportfor some features, javascript workaround available:
• canvas : excanvas.js gives support in IE (all versions)<canvas> can be used today
• HTML5 elements: html5shivfixes 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 pluginadds iPhone stylingadds transitions using CSS3 support
<script type="text/javascript" src="jqtouch/jquery.js"></script><script type="text/javascript" src="jqtouch/jqtouch.js"></script><script type="text/javascript"> var jQT = $.jQTouch({ icon: 'logo.png', statusBar: 'black' });</script>
jQtouch page structure<body> <div id="home"> <div class="toolbar"> <h1>RaboTransAct</h1> <a class="button flip" href="#about">About</a> </div> <ul class="edgetoedge"> <li class="arrow"><a href="#location-about">Geolocation demo</a></li> <li class="arrow"><a href="#information">Information</a></li> </ul> </div> <div id="location"> <div class="toolbar"> <h1>Geolocation</h1> <a class="button back" href="#">Back</a> </div> <span id="location-status">Trying to determine location...</span><br/> <div id="location-map" style="width:300px; height:300px"></div> </div> <div id="location-about"> <div class="toolbar"> <h1>Geolocation</h1> <a class="button back" href="#">Back</a> <a class="button flip" href="#location">Run demo</a> </div> <h1>About geolocation</h1>
preview on desktopThis 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)