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
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
Tekniker som används
• HTML5 – markupen
Tekniker som används
• HTML5 – markupen
• jQTouch – beteendet, temat
Tekniker som används
• HTML5 – markupen
• jQTouch – beteendet, temat
• sessionStorage – lagra värden temporärt
Tekniker som används
• HTML5 – markupen
• jQTouch – beteendet, temat
• sessionStorage – lagra värden temporärt
• web stora...
Tekniker som används
• HTML5 – markupen
• jQTouch – beteendet, temat
• sessionStorage – lagra värden temporärt
• web stora...
Tekniker som används
• HTML5 – markupen
• jQTouch – beteendet, temat
• sessionStorage – lagra värden temporärt
• web stora...
Tekniker som används
• HTML5 – markupen
• jQTouch – beteendet, temat
• sessionStorage – lagra värden temporärt
• web stora...
Tekniker som används
• HTML5 – markupen
• jQTouch – beteendet, temat
• sessionStorage – lagra värden temporärt
• web stora...
Tekniker som används
• HTML5 – markupen
• jQTouch – beteendet, temat
• sessionStorage – lagra värden temporärt
• web stora...
Arbeta nedkopplat
CACHE MANIFEST
birdnotes.js
index.html
i/
jqtouch/jqtouch.min.css
jqtouch/jqtouch.min.js
jqtouch/jquery....
jQTouch
• Imiterar iPhone-utseendet och beteendet med
 HTML/CSS3 + jQuery

• Stöder egna teman – ”leather” heter mitt
• By...
…HTML-exempel
<div id="home" class="current">
  <div class="toolbar">
    <h1>Birdnotes</h1>
  </div>
  <h2>Observationer<...
…HTML-exempel
<div id="home" class="current">
  <div class="toolbar">
    <h1>Birdnotes</h1>
  </div>
  <h2>Observationer<...
…CSS-exempel
a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.in, .out {
  -webkit-animation-timing-function: ease-in...
…CSS-exempel
@-webkit-keyframes swapinfromright {
    0% {
        -webkit-transform: translate3d(0px, 0px, -800px)
rotate...
491 arter = många events
$('ul.edgetoedge li').each(function(i){
  $(this).data('bird', i);
});

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

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

$('ul.edgetoedge').click...
Var? – hämta koordinater
var lookup = jQT.updateLocation(function(coords) {
  if (coords) {
    sessionStorage.latitude = ...
Var? – hämta koordinater
var lookup = jQT.updateLocation(function(coords) {
  if (coords) {
    sessionStorage.latitude = ...
GeoNames – ”var” i klartext
var urlJSON = 'http://ws.geonames.org/findNearbyJSON?
formatted=true&lat=' +
    sessionStorag...
GeoNames – ”var” i klartext
var urlJSON = 'http://ws.geonames.org/findNearbyJSON?
formatted=true&lat=' +
    sessionStorag...
…och ihopslaget:
var lookup = jQT.updateLocation(function(coords) {
  if (coords) {
    sessionStorage.latitude = coords.l...
Skapa databas
var shortName = 'Birdnotes';
var version = '1.0';
var displayName = 'Birdnotes';
var maxSize = 65536;
db = o...
Skapa databas
var shortName = 'Birdnotes';
var version = '1.0';
var displayName = 'Birdnotes';
var maxSize = 65536;
db = o...
…populera med arter
function ensureLocalDB() {
  db.transaction(
    function(transaction) {
      transaction.executeSql(...
…populera med arter
function ensureLocalDB() {
  db.transaction(
    function(transaction) {
      transaction.executeSql(...
…populera med arter
function ensureLocalDB() {
  db.transaction(
    function(transaction) {
      transaction.executeSql(...
…spara en observation
function addObservation(bird_id, no, date, longitude,
latitude) {
  db.transaction(
    function(tra...
…spara en observation
function addObservation(bird_id, no, date, longitude,
latitude) {
  db.transaction(
    function(tra...
Visa på karta
touchMap = new touchMapLite("viewer");
touchMap.lat = parseFloat(sessionStorage.latitude);
touchMap.lon = pa...
Visa på karta
touchMap = new touchMapLite("viewer");
touchMap.lat = parseFloat(sessionStorage.latitude);
touchMap.lon = pa...
Lärda läxor
Lärda läxor
• Mobile Safari ≠ position:fixed
Lärda läxor
• Mobile Safari ≠ position:fixed
• Flytta kartan laggar fett
Lärda läxor
• Mobile Safari ≠ position:fixed
• Flytta kartan laggar fett
• Scrollning upplevs trögare än Cocoa-appar
Lärda läxor
• Mobile Safari ≠ position:fixed
• Flytta kartan laggar fett
• Scrollning upplevs trögare än Cocoa-appar
• Safa...
Lärda läxor
• Mobile Safari ≠ position:fixed
• Flytta kartan laggar fett
• Scrollning upplevs trögare än Cocoa-appar
• Safa...
Lärda läxor
• Mobile Safari ≠ position:fixed
• Flytta kartan laggar fett
• Scrollning upplevs trögare än Cocoa-appar
• Safa...
Kvar att göra
Kvar att göra
• Synka mot online-konto
Kvar att göra
• Synka mot online-konto
• Stöd för ”då” och ”där”
Kvar att göra
• Synka mot online-konto
• Stöd för ”då” och ”där”
• Integration mot Artportalen
Kvar att göra
• Synka mot online-konto
• Stöd för ”då” och ”där”
• Integration mot Artportalen
• Fler språk
Kvar att göra
• Synka mot online-konto
• Stöd för ”då” och ”där”
• Integration mot Artportalen
• Fler språk
• PhoneGap – A...
Mer läsning
• http://building-iphone-apps.labs.oreilly.com/
• http://www.jqtouch.com/
• http://www.opentouchmap.org/
• htt...
Tack!
Upcoming SlideShare
Loading in...5
×

Birdnotes

1,614

Published on

Från min Geekmeet Gbg-presentation 24/3, 2010

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,614
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide




















































































  • Birdnotes

    1. 1. Birdnotes andreasson.org/birdnotes
    2. 2. 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
    3. 3. 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
    4. 4. Tekniker som används
    5. 5. Tekniker som används • HTML5 – markupen
    6. 6. Tekniker som används • HTML5 – markupen • jQTouch – beteendet, temat
    7. 7. Tekniker som används • HTML5 – markupen • jQTouch – beteendet, temat • sessionStorage – lagra värden temporärt
    8. 8. Tekniker som används • HTML5 – markupen • jQTouch – beteendet, temat • sessionStorage – lagra värden temporärt • web storage – lagra värden i SQLite
    9. 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. 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. 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. 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. 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)
    14. 14. 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
    15. 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
    16. 16. …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>
    17. 17. …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>
    18. 18. …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; }
    19. 19. …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);     } }
    20. 20. 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(); });
    21. 21. 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(); });
    22. 22. …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(); });
    23. 23. 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.');   } });
    24. 24. 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.');   } });
    25. 25. 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 });
    26. 26. 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 });
    27. 27. …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.');   } });
    28. 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. 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. 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       );     }   ); }
    31. 31. …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] 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' },     }   … ];   ); }
    32. 32. …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] 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' },     }   … ];   ); }
    33. 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. 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. 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. 36. Visa på karta touchMap = new touchMapLite("viewer"); touchMap.lat = parseFloat(sessionStorage.latitude); touchMap.lon = parseFloat(sessionStorage.longitude); touchMap.zoom = parseInt(14); touchMap.init();
    37. 37. Lärda läxor
    38. 38. Lärda läxor • Mobile Safari ≠ position:fixed
    39. 39. Lärda läxor • Mobile Safari ≠ position:fixed • Flytta kartan laggar fett
    40. 40. Lärda läxor • Mobile Safari ≠ position:fixed • Flytta kartan laggar fett • Scrollning upplevs trögare än Cocoa-appar
    41. 41. Lärda läxor • Mobile Safari ≠ position:fixed • Flytta kartan laggar fett • Scrollning upplevs trögare än Cocoa-appar • Safari ≠ geo location
    42. 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. 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
    44. 44. Kvar att göra
    45. 45. Kvar att göra • Synka mot online-konto
    46. 46. Kvar att göra • Synka mot online-konto • Stöd för ”då” och ”där”
    47. 47. Kvar att göra • Synka mot online-konto • Stöd för ”då” och ”där” • Integration mot Artportalen
    48. 48. Kvar att göra • Synka mot online-konto • Stöd för ”då” och ”där” • Integration mot Artportalen • Fler språk
    49. 49. Kvar att göra • Synka mot online-konto • Stöd för ”då” och ”där” • Integration mot Artportalen • Fler språk • PhoneGap – App Store?
    50. 50. Mer läsning • http://building-iphone-apps.labs.oreilly.com/ • http://www.jqtouch.com/ • http://www.opentouchmap.org/ • http://www.phonegap.com/
    51. 51. Tack!

    ×