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

TAG | HTML 5

okt/11

6

En HTML5-basert app som bruker device access data

Innspill: 4 kommentarer · Kategori: Data og teknologi · Tagger: , ,

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 :-)

jun/10

21

HTML5 video på web

Innspill: 1 kommentar · Kategori: Data og teknologi · Tagger: , , , , , ,

Av: Atle Nes, høgskolelektor og faglærer i programmeringsfag og webfag

HTML5 gir oss en helt ny standard måte å inkludere video i en webside ved å introdusere et nytt <video> element. Tanken bak er at det skal være like enkelt å legge til video på en webside som det er å legge til bilder med <image> elementet. Før HTML5 kom var inkludering av video nemlig kun mulig ved å bruke tredjeparts plugin til nettleseren, slik som QuickTime, RealPlayer eller Flash. Dette skjer ofte så automatisk at du ikke engang legger merke til at du bruker en plugin. Problemet oppstår først når du forsøker å se video på en platform/enhet som ikke har tilhørende plugin. YouTube.com bruker som kjent Flash, men har i den seneste tiden i tillegg gitt brukere muligheten til å velge HTML5 video.

HTML5 <video> elementet støttes av Firefox, Safari og Opera. Som du kanskje ser mangler den mest utbredte nettleseren Internet Explorer, som er ventet å få HTML5-støtte først i neste versjon (IE9). For 64-bit versjonen av IE8 … les resten av innlegget

Dette innlegget har 1 kommentar. Gjerne bidra :-)

Theme Design by devolux.nh2.me
To top