Birdnotes

Birdnotes
andreasson.org/birdnotes

Vad?
• Ett sätt att föra dagbok över
fåglarna i vår nya trädgård

• Ett sätt att lära mig tillverka
en webapp

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

• Quicksilver – JS-adaption av OS X Spotlight
• LiveSearch – jQuery-plugin (använder QS)

Arbeta nedkopplat
CACHE MANIFEST
birdnotes.js
index.html
i/
jqtouch/jqtouch.min.css
jqtouch/jqtouch.min.js
jqtouch/jquery.min.js
js/quicksilver.js
js/jquery.livesearch.js
extensions/jqt.offline.js
themes/leather/theme.css
themes/leather/img/cover.png
…
touchmaplite/

FALLBACK:
i/ i/offline.png

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

…HTML-exempel
<div id="home" class="current">
  <div class="toolbar">
  <h1>Birdnotes</h1>
  </div>
  <h2>Observationer</h2>
  <ul class="rounded">
  <li class="arrow"><a href="#new">Ny observation</
a></li>
  <li class="arrow"><a href="#list">Lista
observationer</a></li>
  </ul>
  <a class="button slideup" href="#about">Om</a>
</div>

…CSS-exempel
a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.in, .out {
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-duration: 350ms;
}
.slide.in {
  -webkit-animation-name: slideinfromright;
}
.slide.out {
  -webkit-animation-name: slideouttoleft;
}

…CSS-exempel
@-webkit-keyframes swapinfromright {
  0% {
  -webkit-transform: translate3d(0px, 0px, -800px)
rotateY(70deg);
  -webkit-animation-timing-function: ease-out;
  }
  50% {
  -webkit-transform: translate3d(-180px, 0px,
-400px) rotateY(20deg);
  -webkit-animation-timing-function: ease-in-out;
  }
  100% {
  -webkit-transform: translate3d(0px, 0px, 0px)
rotateY(0deg);
  }
}

491 arter = många events
$('ul.edgetoedge li').each(function(i){
$(this).data('bird', i);
});

$('ul.edgetoedge a').click(function(e){
var bird = $(this).closest('li').data('bird');
//alert(bird); => 234
e.preventDefault();
});

…vilket kräver optimering
$('ul.edgetoedge li').each(function(i){
$(this).data('bird', i);
});

$('ul.edgetoedge').click(function(e){
  var elm = $(e.target);
  if(elm.is('a')) {
var bird = elm.closest('li').data('bird');
//alert(bird); => 234
  };
e.preventDefault();
});

Var? – hämta koordinater
var lookup = jQT.updateLocation(function(coords) {
  if (coords) {
  sessionStorage.latitude = coords.latitude;
  sessionStorage.longitude = coords.longitude;
  } else {
  self.text('Device not capable of geo-location.');
  }
});

GeoNames – ”var” i klartext
var urlJSON = 'http://ws.geonames.org/findNearbyJSON?
formatted=true&lat=' +
  sessionStorage.latitude + '&lng=' +
  sessionStorage.longitude + '&callback=?';
$.getJSON(urlJSON, {}, function(data) {
//alert(data.geonames[0].name); => Nolby
   //alert(data.geonames[0].countryName); => Alingsås
});

…och ihopslaget:
var lookup = jQT.updateLocation(function(coords) {
  if (coords) {
  sessionStorage.latitude = coords.latitude;
  sessionStorage.longitude = coords.longitude;
  var urlJSON = 'http://ws.geonames.org/
findNearbyJSON?formatted=true&lat=' +
  sessionStorage.latitude + '&lng=' +
  sessionStorage.longitude + '&callback=?';
  $.getJSON(urlJSON, {}, function(data) {
  //alert(data.geonames[0].name); => Nolby
   //alert(data.geonames[0].countryName); => Alingsås
  });
  } else {
  self.text('Device not capable of geo-location.');
  }
});

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

…populera med arter
function ensureLocalDB() {
  db.transaction(
  '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
  );
  }
  );
}

…populera med arter
function ensureLocalDB() {
  db.transaction(
  '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]
var birds_lat = [
['name'], birds_lat[key]['name_sv']); name: 'Accipiter gentilis', name_sv: 'Duvhök' },
  { id: '1',
  }   { id: '2', name: 'Accipiter nisus', name_sv: 'Sparvhök' },
  { id: '3', name: 'Acrocephalus agricola', name_sv: 'Fältsångare' },
  });   { id: '4', name: 'Acrocephalus arundinaceus', name_sv: 'Trastsångare' },
  }   { id: '5', name: 'Acrocephalus dumetorum', name_sv: 'Busksångare' },
  { id: '6', name: 'Acrocephalus paludicola', name_sv: 'Vattensångare' },
  },   { id: '7', name: 'Acrocephalus palustris', name_sv: 'Kärrsångare' },
  errorHandler   { id: '8', name: 'Acrocephalus schoenobaenus', name_sv: 'Sävsångare' },
  { id: '9', name: 'Acrocephalus scirpaceus', name_sv: 'Rörsångare' },
  );   { id: '10', name: 'Actitis hypoleucos', name_sv: 'Drillsnäppa' },
  }   …
];
  );
}

…spara en observation
function addObservation(bird_id, no, date, longitude,
latitude) {
  db.transaction(
  'INSERT INTO observations (bird_id, no, date,
longitude, latitude) VALUES (?, ?, ?, ?, ?);',
  [bird_id, no, date, longitude, latitude],
  resetAdd,
  errorHandler
  );
  }
  );
}

Visa på karta
touchMap = new touchMapLite("viewer");
touchMap.lat = parseFloat(sessionStorage.latitude);
touchMap.lon = parseFloat(sessionStorage.longitude);
touchMap.zoom = parseInt(14);
touchMap.init();

Lärda läxor
• Mobile Safari ≠ position:ﬁxed

Lärda läxor
• Flytta kartan laggar fett

Lärda läxor
• Scrollning upplevs trögare än Cocoa-appar

Lärda läxor
• Safari ≠ geo location

Lärda läxor
• WebKit nightly är din räddning

Lärda läxor
• WebKit nightly är din räddning
• iPhone-simulatorn, MobileSafari och Safari kan
ge olika resultat

Kvar att göra
• Synka mot online-konto

Kvar att göra
• Stöd för ”då” och ”där”

Kvar att göra
• Integration mot Artportalen

Kvar att göra
• Fler språk

Kvar att göra
• Fler språk
• PhoneGap – App Store?

Mer läsning
• http://building-iphone-apps.labs.oreilly.com/
• http://www.jqtouch.com/
• http://www.opentouchmap.org/
• http://www.phonegap.com/

Birdnotes

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Birdnotes

Notes de l'éditeur