Html and i_phone_mobile-2
-
Upload
tonvanbart -
Category
Documents
-
view
6 -
download
0
description
Transcript of Html and i_phone_mobile-2
![Page 1: Html and i_phone_mobile-2](https://reader033.fdocuments.in/reader033/viewer/2022061111/5454de84af79593f778b800e/html5/thumbnails/1.jpg)
HTML5 and iPhone/mobile(apps without C)
![Page 2: Html and i_phone_mobile-2](https://reader033.fdocuments.in/reader033/viewer/2022061111/5454de84af79593f778b800e/html5/thumbnails/2.jpg)
(very) short history
![Page 3: Html and i_phone_mobile-2](https://reader033.fdocuments.in/reader033/viewer/2022061111/5454de84af79593f778b800e/html5/thumbnails/3.jpg)
<!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
![Page 4: Html and i_phone_mobile-2](https://reader033.fdocuments.in/reader033/viewer/2022061111/5454de84af79593f778b800e/html5/thumbnails/4.jpg)
new Javascript APIs• <canvas> and graphics context
• local and session storage
• web database
• web worker
• websocket
• geolocation
• offline webapplications
![Page 5: Html and i_phone_mobile-2](https://reader033.fdocuments.in/reader033/viewer/2022061111/5454de84af79593f778b800e/html5/thumbnails/5.jpg)
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'); }
![Page 6: Html and i_phone_mobile-2](https://reader033.fdocuments.in/reader033/viewer/2022061111/5454de84af79593f778b800e/html5/thumbnails/6.jpg)
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);
![Page 7: Html and i_phone_mobile-2](https://reader033.fdocuments.in/reader033/viewer/2022061111/5454de84af79593f778b800e/html5/thumbnails/7.jpg)
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');
![Page 8: Html and i_phone_mobile-2](https://reader033.fdocuments.in/reader033/viewer/2022061111/5454de84af79593f778b800e/html5/thumbnails/8.jpg)
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);' ); } );});
![Page 9: Html and i_phone_mobile-2](https://reader033.fdocuments.in/reader033/viewer/2022061111/5454de84af79593f778b800e/html5/thumbnails/9.jpg)
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;}
![Page 10: Html and i_phone_mobile-2](https://reader033.fdocuments.in/reader033/viewer/2022061111/5454de84af79593f778b800e/html5/thumbnails/10.jpg)
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(); }}
![Page 11: Html and i_phone_mobile-2](https://reader033.fdocuments.in/reader033/viewer/2022061111/5454de84af79593f778b800e/html5/thumbnails/11.jpg)
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 }}
![Page 12: Html and i_phone_mobile-2](https://reader033.fdocuments.in/reader033/viewer/2022061111/5454de84af79593f778b800e/html5/thumbnails/12.jpg)
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
![Page 13: Html and i_phone_mobile-2](https://reader033.fdocuments.in/reader033/viewer/2022061111/5454de84af79593f778b800e/html5/thumbnails/13.jpg)
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));
![Page 14: Html and i_phone_mobile-2](https://reader033.fdocuments.in/reader033/viewer/2022061111/5454de84af79593f778b800e/html5/thumbnails/14.jpg)
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)
![Page 15: Html and i_phone_mobile-2](https://reader033.fdocuments.in/reader033/viewer/2022061111/5454de84af79593f778b800e/html5/thumbnails/15.jpg)
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}
![Page 16: Html and i_phone_mobile-2](https://reader033.fdocuments.in/reader033/viewer/2022061111/5454de84af79593f778b800e/html5/thumbnails/16.jpg)
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, ...
![Page 17: Html and i_phone_mobile-2](https://reader033.fdocuments.in/reader033/viewer/2022061111/5454de84af79593f778b800e/html5/thumbnails/17.jpg)
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>
![Page 18: Html and i_phone_mobile-2](https://reader033.fdocuments.in/reader033/viewer/2022061111/5454de84af79593f778b800e/html5/thumbnails/18.jpg)
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>
![Page 19: Html and i_phone_mobile-2](https://reader033.fdocuments.in/reader033/viewer/2022061111/5454de84af79593f778b800e/html5/thumbnails/19.jpg)
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
![Page 20: Html and i_phone_mobile-2](https://reader033.fdocuments.in/reader033/viewer/2022061111/5454de84af79593f778b800e/html5/thumbnails/20.jpg)
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()
![Page 21: Html and i_phone_mobile-2](https://reader033.fdocuments.in/reader033/viewer/2022061111/5454de84af79593f778b800e/html5/thumbnails/21.jpg)
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)