7. Tekniker som används
• HTML5 – markupen
• jQTouch – beteendet, temat
• sessionStorage – lagra värden temporärt
8. Tekniker som används
• HTML5 – markupen
• jQTouch – beteendet, temat
• sessionStorage – lagra värden temporärt
• web storage – lagra värden i SQLite
9. Tekniker som används
• HTML5 – markupen
• jQTouch – beteendet, temat
• sessionStorage – lagra värden temporärt
• web storage – lagra värden i SQLite
• touchMapLite – visa på karta (OSM)
10. Tekniker som används
• HTML5 – markupen
• jQTouch – beteendet, temat
• sessionStorage – lagra värden temporärt
• web storage – lagra värden i SQLite
• touchMapLite – visa på karta (OSM)
• PanoJS – ingår i touchMapLite
11. Tekniker som används
• HTML5 – markupen
• jQTouch – beteendet, temat
• sessionStorage – lagra värden temporärt
• web storage – lagra värden i SQLite
• touchMapLite – visa på karta (OSM)
• PanoJS – ingår i touchMapLite
• GeoNames – reverse geolocation
12. Tekniker som används
• HTML5 – markupen
• jQTouch – beteendet, temat
• sessionStorage – lagra värden temporärt
• web storage – lagra värden i SQLite
• touchMapLite – visa på karta (OSM)
• PanoJS – ingår i touchMapLite
• GeoNames – reverse geolocation
• Quicksilver – JS-adaption av OS X Spotlight
13. Tekniker som används
• HTML5 – markupen
• jQTouch – beteendet, temat
• sessionStorage – lagra värden temporärt
• web storage – lagra värden i SQLite
• touchMapLite – visa på karta (OSM)
• PanoJS – ingår i touchMapLite
• GeoNames – reverse geolocation
• Quicksilver – JS-adaption av OS X Spotlight
• LiveSearch – jQuery-plugin (använder QS)
15. jQTouch
• Imiterar iPhone-utseendet och beteendet med
HTML/CSS3 + jQuery
• Stöder egna teman – ”leather” heter mitt
• Bygger på ”slides” med fast struktur
• Använder -webkit-animation för att optimera
animeringar
28. Skapa databas
var shortName = 'Birdnotes';
var version = '1.0';
var displayName = 'Birdnotes';
var maxSize = 65536;
db = openDatabase(shortName, version, displayName, maxSize);
db.transaction(
function(transaction) {
transaction.executeSql(
'CREATE TABLE IF NOT EXISTS birds (id INTEGER NOT NULL
PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, name_sv TEXT NOT
NULL);'
);
transaction.executeSql(
'CREATE TABLE IF NOT EXISTS observations (id INTEGER NOT NULL
PRIMARY KEY AUTOINCREMENT, bird_id INTEGER NOT NULL, no INTEGER NOT
NULL, date DATETIME NOT NULL, longitude TEXT, latitude TEXT);'
);
}
);
29. Skapa databas
var shortName = 'Birdnotes';
var version = '1.0';
var displayName = 'Birdnotes';
var maxSize = 65536;
db = openDatabase(shortName, version, displayName, maxSize);
db.transaction(
function(transaction) {
transaction.executeSql(
'CREATE TABLE IF NOT EXISTS birds (id INTEGER NOT NULL
PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, name_sv TEXT NOT
NULL);'
);
transaction.executeSql(
'CREATE TABLE IF NOT EXISTS observations (id INTEGER NOT NULL
PRIMARY KEY AUTOINCREMENT, bird_id INTEGER NOT NULL, no INTEGER NOT
NULL, date DATETIME NOT NULL, longitude TEXT, latitude TEXT);'
);
}
);
30. …populera med arter
function ensureLocalDB() {
db.transaction(
function(transaction) {
transaction.executeSql(
'SELECT id FROM birds LIMIT 1;',
null,
function(transaction, result) {
if (result.rows.length < 1) {
$.getScript("birds_latin.js", function() {
for (var key in birds_lat) {
populateDatabase(birds_lat[key]['id'], birds_lat[key]
['name'], birds_lat[key]['name_sv']);
}
});
}
},
errorHandler
);
}
);
}
33. …spara en observation
function addObservation(bird_id, no, date, longitude,
latitude) {
db.transaction(
function(transaction) {
transaction.executeSql(
'INSERT INTO observations (bird_id, no, date,
longitude, latitude) VALUES (?, ?, ?, ?, ?);',
[bird_id, no, date, longitude, latitude],
resetAdd,
errorHandler
);
}
);
}
34. …spara en observation
function addObservation(bird_id, no, date, longitude,
latitude) {
db.transaction(
function(transaction) {
transaction.executeSql(
'INSERT INTO observations (bird_id, no, date,
longitude, latitude) VALUES (?, ?, ?, ?, ?);',
[bird_id, no, date, longitude, latitude],
resetAdd,
errorHandler
);
}
);
}
35. Visa på karta
touchMap = new touchMapLite("viewer");
touchMap.lat = parseFloat(sessionStorage.latitude);
touchMap.lon = parseFloat(sessionStorage.longitude);
touchMap.zoom = parseInt(14);
touchMap.init();
36. Visa på karta
touchMap = new touchMapLite("viewer");
touchMap.lat = parseFloat(sessionStorage.latitude);
touchMap.lon = parseFloat(sessionStorage.longitude);
touchMap.zoom = parseInt(14);
touchMap.init();
40. Lärda läxor
• Mobile Safari ≠ position:fixed
• Flytta kartan laggar fett
• Scrollning upplevs trögare än Cocoa-appar
41. Lärda läxor
• Mobile Safari ≠ position:fixed
• Flytta kartan laggar fett
• Scrollning upplevs trögare än Cocoa-appar
• Safari ≠ geo location
42. Lärda läxor
• Mobile Safari ≠ position:fixed
• Flytta kartan laggar fett
• Scrollning upplevs trögare än Cocoa-appar
• Safari ≠ geo location
• WebKit nightly är din räddning
43. Lärda läxor
• Mobile Safari ≠ position:fixed
• Flytta kartan laggar fett
• Scrollning upplevs trögare än Cocoa-appar
• Safari ≠ geo location
• WebKit nightly är din räddning
• iPhone-simulatorn, MobileSafari och Safari kan
ge olika resultat