Safari Mobile

Introduction to Mobile Safari Alberto, Gilles and Marc

Mobile Safari 24/10/2009 Content - Introduction - Mobile Safari - GIS - Client-side storage - Demo www.antistatique.net 2

Mobile Safari 24/10/2009 Introduction - About us - Web guru - iPhone fans - Symfony framework www.antistatique.net 3

Mobile Safari 24/10/2009 Mobile Safari - CSS (animations) - Geolocalisation support (OS 3.x) - Client-Side Storage (OS 2.1) www.antistatique.net 4

Mobile Safari 24/10/2009 Geolocalisation navigator.geolocation.getCurrentPosition( successCallback, errorCallback, option ) www.antistatique.net 5

navigator.geolocation.getCurrentPosition( function(pos){ var lat = pos.coords.latitude; var lng = pos.coords.longitude; }, function(error){ switch(error.code){ /*[...]*/ } }, { enableHighAccuracy: true, timeout: 45000, // in millisecond maximumAge: 60000 }; );

Mobile Safari 24/10/2009 Client-side storage - 5 Mb - SQLite www.antistatique.net 7

//// OPEN LOCAL DATABASE var db; if (window.openDatabase) db = openDatabase("as_note", "1.0", "AS Note", 200000); //// DO A SELECT db.transaction(function(tx) { tx.executeSql("SELECT id, note FROM MyTable WHERE id = ?", [27], function(tx, rs) { for (var i = 0; i < rs.rows.length; ++i) { /* ... */ renderNote(rs.rows.item(i)); } }, function(tx, error) { /* ... */ }); });

//// CREATE TABLE IF NOT EXISTS function init() { db.transaction(function(tx) { tx.executeSql("SELECT COUNT(*) FROM MyTable", [], function(result) { doSomething(); }, function(tx, error) { tx.executeSql("CREATE TABLE MyTable ( id INTEGER PRIMARY KEY, note TEXT, timestamp REAL)", [], function(rs){ doSomething(); }); }); }); }

Mobile Safari 24/10/2009 Little web app - Write notes - Localize them - Do it offline - Take your iPhone : http://note.antistatique.net www.antistatique.net 10

Mobile Safari 24/10/2009 Further development - Account system - Server synchronisation www.antistatique.net 17

Mobile Safari 24/10/2009 Benefits of webApps - Easy to develop, update - No install required - Apple free ~ www.antistatique.net 18

Mobile Safari 24/10/2009 Backwards - Interactions with native apps - Animation - More www.antistatique.net 19

Mobile Safari 24/10/2009 Sources - http://developer.apple.com/ - Safari and iPhone - http://dev.w3.org/geo/api/spec-source.html - Geolocation API Specification - http://www.w3.org/TR/offline-webapps/ - Offline Web Applications - http://www.jqtouch.com/ - plugin for mobile web development on the iPhone, Android, Palm Pre www.antistatique.net 20

Safari Mobile

by Antistatique.net on Feb 23, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 24

Statistics

Safari Mobile — Presentation Transcript