1.
Introduction to
Mobile Safari
Alberto, Gilles and Marc

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

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

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.
Mobile Safari
24/10/2009
Geolocalisation
navigator.geolocation.getCurrentPosition(
successCallback,
errorCallback,
option
)
www.antistatique.net 5

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.
Mobile Safari
24/10/2009
Client-side storage
- 5 Mb
- SQLite
www.antistatique.net 7

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.
//// 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.
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.
Mobile Safari
24/10/2009
Further development
- Account system
- Server synchronisation
www.antistatique.net 17

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

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

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