20
Introduction to Mobile Safari Alberto, Gilles and Marc

Safari Mobile

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Safari Mobile

Introduction toMobile Safari

Alberto, Gilles and Marc

Page 2: Safari Mobile

Mobile Safari24/10/2009

www.antistatique.net

Content

- Introduction

- Mobile Safari- GIS

- Client-side storage

- Demo

2

Page 3: Safari Mobile

Mobile Safari24/10/2009

www.antistatique.net

Introduction

- About us

- Web guru

- iPhone fans

- Symfony framework

3

Page 4: Safari Mobile

Mobile Safari24/10/2009

www.antistatique.net

Mobile Safari

- CSS (animations)

- Geolocalisation support (OS 3.x)

- Client-Side Storage (OS 2.1)

4

Page 5: Safari Mobile

Mobile Safari24/10/2009

www.antistatique.net

Geolocalisation

navigator.geolocation.getCurrentPosition(

successCallback,

errorCallback,

option

)

5

Page 6: Safari Mobile

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 };);

Page 7: Safari Mobile

Mobile Safari24/10/2009

www.antistatique.net

Client-side storage

- 5 Mb

- SQLite

7

Page 8: Safari Mobile

//// OPEN LOCAL DATABASEvar db;if (window.openDatabase) db = openDatabase("as_note", "1.0", "AS Note", 200000);

//// DO A SELECTdb.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) { /* ... */ });});

Page 9: Safari Mobile

//// CREATE TABLE IF NOT EXISTSfunction 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(); }); }); });}

Page 10: Safari Mobile

Mobile Safari24/10/2009

www.antistatique.net

Little web app

- Write notes

- Localize them

- Do it offline

- Take your iPhone : http://note.antistatique.net

10

Page 11: Safari Mobile
Page 12: Safari Mobile
Page 13: Safari Mobile
Page 14: Safari Mobile
Page 15: Safari Mobile
Page 16: Safari Mobile
Page 17: Safari Mobile

Mobile Safari24/10/2009

www.antistatique.net

Further development

- Account system

- Server synchronisation

17

Page 18: Safari Mobile

Mobile Safari24/10/2009

www.antistatique.net

Benefits of webApps

- Easy to develop, update

- No install required

- Apple free ~

18

Page 19: Safari Mobile

Mobile Safari24/10/2009

www.antistatique.net

Backwards

- Interactions with native apps

- Animation

- More

19

Page 20: Safari Mobile

Mobile Safari24/10/2009

www.antistatique.net

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

20