Introduction to Mobile Safari

1,506 views

Published on

Introduction to Mobile Safari
by Alberto, Gilles and Marc (www.antistatique.net)

Published in: Technology
1 Comment
1 Like
Statistics
Notes
  • Interview about 'iPhone developers abandoning app model for HTML5' in the same field ...
    http://scobleizer.com/2009/12/16/iphone-developers-abandoning-app-model-for-html5/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,506
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
13
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Introduction to Mobile Safari

  1. 1. Introduction to Mobile Safari Alberto, Gilles and Marc
  2. 2. Mobile Safari 24/10/2009 Content - Introduction - Mobile Safari - GIS - Client-side storage - Demo www.antistatique.net 2
  3. 3. Mobile Safari 24/10/2009 Introduction - About us - Web guru - iPhone fans - Symfony framework www.antistatique.net 3
  4. 4. Mobile Safari 24/10/2009 Mobile Safari - CSS (animations) - Geolocalisation support (OS 3.x) - Client-Side Storage (OS 2.1) www.antistatique.net 4
  5. 5. Mobile Safari 24/10/2009 Geolocalisation navigator.geolocation.getCurrentPosition( successCallback, errorCallback, option ) www.antistatique.net 5
  6. 6. 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 }; );
  7. 7. Mobile Safari 24/10/2009 Client-side storage - 5 Mb - SQLite www.antistatique.net 7
  8. 8. //// 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) { /* ... */ }); });
  9. 9. //// 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(); }); }); }); }
  10. 10. 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
  11. 11. Mobile Safari 24/10/2009 Further development - Account system - Server synchronisation www.antistatique.net 17
  12. 12. Mobile Safari 24/10/2009 Benefits of webApps - Easy to develop, update - No install required - Apple free ~ www.antistatique.net 18
  13. 13. Mobile Safari 24/10/2009 Backwards - Interactions with native apps - Animation - More www.antistatique.net 19
  14. 14. 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

×