itfag | Teknologi. Data. Læring. Deling.

okt/11

6

En HTML5-basert app som bruker device access data

Av: Svend Andreas Horgen. Høgskolelektor. Underviser i HTML5

Er det mulig å lage HTML5-baserte app-er som konkurrerer med dedikerte app-er utviklet for Android, iOs og Windows?

Visste du at moderne nettlesere på mobile enheter har tilgang til fysisk maskinvare som GPS, aksellerometer, gyroskop, kompass, kamera og liknende? Det kommer stadig bedre støtte for å aksessere maskinvare gjennom API-er også direkte i nettleseren, via JavaScript og HTML5. Dette kan webutviklere benytte seg av for å lage bedre og mer spennende mobile webløsninger.

Her er en veldig enkel demo-app hvor en logo flyttes rundt avhengig av hvordan telefonen holdes:

Du kan også teste koden på din egen mobile enhet (testet på iPhone sin Safari, men skal i teorien fungere også på Chrome og Opera)

Hva skal til for å lage en slik app? Du trenger:

  • en ny html-fil som starter med koden <!doctype html> for å varsle fra til nettlesere som forstår HTML5 at dette er en HTML5-side
  • et bilde med en id som vi kan vise til med JavaScript-kode
  • span eller div-elementer som har id-er vi kan vise til med JavaScript-kode
  • En liten JavaScript-kodesnutt som hele tiden lytter etter (og fanger opp) nye data sendt fra enheten gjennom hendelsen DeviceOrientation
  • En liten JavaScript-kodesnutt som bruker dataene slik vi vil, for eksempel ved å endre pikselverdiene til logoen i DOM slik at ny pikselverdi tilsvarer tallverdiene snappet opp fra enhetens orientering

Vil du se hele koden, så gå til denne siden og velg «vis kildekode», eller se på kildekoden direkte på denne siden.

Ser du for deg andre ting vi kan lage med HTML5? Hvilken rolle tror du HTML5-apper vil spille i fremtiden?

Dette innlegget har 4 kommentarer. Gjerne bidra :-)

Skrevet av: Svend Andreas Horgen (totalt 133 blogginnlegg)

4 comments

  • Ola · 6. oktober, 2011, kl. 21:51

    Er dette mulig å gjøre i android, evt. hvordan?

  • Leif · 6. oktober, 2011, kl. 22:45

    Fungerer i alle fall i Firefox for Android 🙂

  • Ola · 6. oktober, 2011, kl. 22:56

    Fungerer bra det. Fungerte ikke i orginalleseren.

  • Author comment by Svend Andreas Horgen · 7. oktober, 2011, kl. 07:22

    Flott! Støtten for HTML5 blir bare bedre og bedre, men ulike nettlesere gjør typisk ting på litt ulik måte. I koden jeg har laget har jeg ikke tatt noen spesielle hensyn til ulike nettlesere. Bruk av rammeverk når en koder kan i så måte være lurt, så tar rammeverket seg av forskjellene.

<<

>>

Theme Design by devolux.nh2.me