Načrtovanje in razvoj spletnih aplikacij

API - Application programming interface

HTML5 je prinesel kar nekaj novih vtičnikov API:

Drag and Drop

Implementacija vmesnika brez vtičnika je bila odvisna le od kompleksne JavaScript kode ali knjižnice JavaScript. Sedaj lahko tehniko »drag & drop« uporabimo v HTML 5 kar z vtičnikom vmesnika API.

Vlečenje oziroma »drag & drop« v računalniškem grafičnem smislu je dejanje, ki ga izvedemo z dogodkom mousedown (klik na nek element, objekt), nato mu sledi serija dogodkov mousemove (premikanje z miško po zaslonu) ter dogodek drop (spustimo miško) s katerim spustimo objekt, element na neko površino, ki to omogoča.

Implementacija vmesnika »drag & drop« brez vtičnika je bila odvisna le od kompleksne JavaScript kode ali knjižnice JavaScript kot na primer script.aculo.us. Sedaj pa lahko tehniko »drag & drop« uporabimo v HTML5 kar z vtičnikom vmesnika API.

Značilnosti vmestnika »drag & drop« API:

  • draggable – nov atribut HTML5 elementa s katerim omogočimo vlečenje elementa. HTML element slika ali hiperpovezava ima privzeto vlečenje.

Naslednji dogodki sestavljajo delovanje »drag & drop«:

  • dragstart – se sproži, ko pričenemo vleči objekt
  • drag – se sproži vsakič, ko z miško vlečemo objekt
  • dragenter – se sproži, ko je objekt, ki ga vlečemo, prvič povlečen v ciljni objekt
  • dragover – se sproži vsakič, ko je objekt, ki ga vlečemo, premaknjen v ciljni objekt
  • dragleave – se sproži vedno, ko je vlečen objekt povlečen izven ciljnega objekta
  • drop – se sproži vedno, ko je vlečen objekt spuščen v ciljni objekt
  • dragend – se sproži, ko spustimo miško in s tem objekt, ki smo ga vlekli

Potrebno je napisati funkcije za upravljanje dogodkov (ang. event handlers) s katerimi poskrbimo za to, kar potrebujemo v trenutku, ko bodo ti dogodki sproženi.
Dogodki »drag & drop« nam omogočajo tudi prenos podatkov preko objekta, ki ga vlečemo. To dosežemo z metodama getData in setData preko lastnosti dogodka dataTransfer.


Primer: Razvrščanje žog s tehniko »drag & drop«

<script>   
  function allowDrop(ev){   
	ev.preventDefault(); 
  } 
  function drag(ev){   
	ev.dataTransfer.setData("Text",ev.target.id); 
  } 
  function drop(ev){   
	ev.preventDefault();   
	var data=ev.dataTransfer.getData("Text");   
	ev.target.appendChild(document.getElementById(data)); 
  } 
</script> 

<div>Razvrsti žoge s tehniko »drag &amp; drop«: <br /><br /></div> 
<article onDrop="drop(event)" onDragOver="allowDrop(event)">   
  <img src="../slike/kosarka.png" id="kosarka" ondragstart="drag(event)" alt="košarkaška žoga" />   
  <img src="../slike/medicinka.png" id="medicinka" ondragstart="drag(event)" alt="medicinka" />   
  <img src="../slike/napihljiva.png" id="napihljiva" ondragstart="drag(event)"alt="napihljiva žoga" />   
  <img src="../slike/nogometna.png" id="nogomet" ondragstart="drag(event)" alt="nogometna žoga" />   
  <img src="../slike/odbojka.png" id="odbojka" ondragstart="drag(event)" alt="žoga za odbojko" /> 
</article>

Razvrsti žoge s tehniko »drag & drop«:

košarkaška žoga medicinka napihljiva žoga nogometna žoga žoga za odbojko

Geolocation

HTML5 Geolocation API se uporablja za določitev uporabnikovega geografskega položaj. Zaradi uporabnikove zasebnosti, je ta funkcija v brskalnikih privzeto onemogočena. Geolokacija je možno uporabiti samo, če jo uporabnik dovoli, ko brskalnik opozori in vpraša, če želimo deliti geolokacijo ali ne. V obvestilu brskalnik sporoča, katera stran zahteva informacijo o geolokaciji, in nas sprašuje, ali želimo informacijo posredovati ali ne (ali pa tudi, če naj si izbiro zapomni). To obvestilo ne prekine brskanja v ostalih oknih/zavihkih in ga stran ne more zaobiti.

Geolocirajnje je postopek ugotavljanja, kje na svetu sploh smo in morebitno deljenje te informacije z ljudmi, ki jim zaupamo. Obstaja veliko načinov, kakolahko ugotovimo, kje smo: s pomočjo naslova IP, brezžične povezave, celicemobilnega omrežja ali z namensko napravo GPS. Geografska dolžina in širina sta dostopna JavaScriptu na strani, ki jih lahko tudi posreduje strežniku za prilagoditev vsebine lokaciji uporabnika.

Uporabnikov položaj določimo z uporabo metode getCurrentPosition(). Najpreprostejša uporabageolocation API izgleda nekako tako:

function get_location() {
   navigator.geolocation.getCurrentPosition(pokazi_zemljevid);
}

Primer:

<p id="demo">Pridobi podatke o geolokaciji:</p> 
<button onclick="getLocation()">Pokaži lokacijo</button>

<script> var x = document.getElementById("demo"); 
function getLocation() {     
   if (navigator.geolocation) {         
	  navigator.geolocation.getCurrentPosition(pokaziLokacijo);     
   } else {          
	  x.innerHTML = "V tem brskalniku geolokacija ni podprta.";     
   } 
} 
function pokaziLokacijo(position) {     
   x.innerHTML="Geografska širina: " + position.coords.latitude +      
   "<br />Geografska dolžina: " + position.coords.longitude;	 
}
</script>

Pridobi podatke o geolokaciji:

API - Geolocation: napake

Zgornji primer pa ne obravnava nobenih izjem in napak. Če uporabnik ne želi posredovati informacije o lokaciji je koda:

navigator.geolocation.getCurrentPosition(pokaziLokacijo,obravnavajNapako)

Funkcija getCurrentPositions prejme tudi drugi argument, ki kaže na funkcijo za obravnavo napak. V primeru napake se tako izvede funkcija obravnavajNapako s parametrom tipa PositionError. Objekt PositionError ima lastnost code (1) - oštevilčena vrednost napake, ki ima naslednje vrednosti:

  • PERMISSION_DENIED(1) - če uporabnik izbere, da noče delitiinformacije, ali kako drugače zavrne dostop do njegovelokacijske informacije
  • POSITION_UNAVAILABLE(2) - če ni omrežne povezave alisateliti niso dosegljivi
  • TIMEOUT(3) - če pridobivanje informacije traja preveč časa;kako določiti, koliko je to, je prikazano v nadaljevanju
  • UNKNOWN_ERROR(0) - če gre narobe kaj drugega

Primer z obravnavo napak:

<p id="demo">Pridobi podatke o geolokaciji:</p> 
<button onclick="getLocation()">Pokaži lokacijo</button>

<script> var x = document.getElementById("demo"); 
function getLocation() {     
   if (navigator.geolocation) {         
	  navigator.geolocation.getCurrentPosition(pokaziLokacijo,pokaziNapako);     
   } else {          
	  x.innerHTML = "V tem brskalniku geolokacija ni podprta.";     
   } 
} function pokaziLokacijo(position) {     
   x.innerHTML="Geografska širina: " + position.coords.latitude +      
   "<br />Geografska dolžina: " + position.coords.longitude;	 
}

function pokaziNapako(error) {     
  switch(error.code) {         
	case error.PERMISSION_DENIED:             
	  x.innerHTML = "Uporabnik je zavrnil posredovanje geolokacije."             
	break;         
	case error.POSITION_UNAVAILABLE:             
	  x.innerHTML = "Pridobitev podatkov o geolokaciji ni mogoča."             
	break;         
	case error.TIMEOUT:             
	  x.innerHTML = "Poizvedba o geolokaciji je časovno potekla."             
	break;         
	case error.UNKNOWN_ERROR:             
	  x.innerHTML = "Pojavila se je neznana napaka."             
	break;     
  } 
}
</script>

Pridobi podatke o geolokaciji:

API - Geolocation: prikaz na zemljevidu

Za prikaz podatkov o lokaciji na zemljevidu, je potreben dostop do servisa zemljevidov, ki zna prikazati geografsko širino in dolžino, ko je na primer Google Maps.

Primer:

<p id="demo">Pridobi podatke o geolokaciji:</p> 
<button onclick="getLocation()">Pokaži lokacijo</button>

<script> var x = document.getElementById("demo"); 
function getLocation() {     
   if (navigator.geolocation) {         
	  navigator.geolocation.getCurrentPosition(pokaziLokacijo,pokaziNapako);     
   } else {          
	  x.innerHTML = "V tem brskalniku geolokacija ni podprta.";     
   } 

} function pokaziLokacijo(position) {     
   var latlon = position.coords.latitude+","+position.coords.longitude;     
   var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="     
   +latlon+"&zoom=14&size=400x300&sensor=false";     
   document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>"; 
}

function pokaziNapako(error) {     
  switch(error.code) {         
	case error.PERMISSION_DENIED:             
	  x.innerHTML = "Uporabnik je zavrnil posredovanje geolokacije."             
	break;         
	case error.POSITION_UNAVAILABLE:             
	  x.innerHTML = "Pridobitev podatkov o geolokaciji ni mogoča."             
	break;         
	case error.TIMEOUT:             
	  x.innerHTML = "Poizvedba o geolokaciji je časovno potekla."             
	break;         
	case error.UNKNOWN_ERROR:             
	  x.innerHTML = "Pojavila se je neznana napaka."             
	break;     
  } 
}
</script>

Pridobi podatke o geolokaciji:

Web storage

HTML5 shramba (storage) ponuja prostor spletnim stranem za shranjevanje informacij na vašem računalniku, ki jih lahko kasneje ponovno uporabijo. Koncept je podoben piškotkom s to razliko, da je namenjen večjemu obsegu informacij.

Web storage je aplikacijski programski vmesnik za obstojno shranjevanje podatkov v spletnih brskalnikih. Sprva je bil del specifikacije HTML5, sedaj pa je samostojna standarizirana specifikacija W3C.

Specifikacija Web Storage prinaša dva nova atributa za kratkoročno in dolgoročno ohranitev podatkov, podobno kot so seje HTTP in piškotki. Atributa sta naslednja:

  • sessionStorage: atribut uporabimo za shranjevanje podatka, kadar želimo, da je shranjen podatek prisoten toliko časa, kot je odprta spletna stran v oknu ali zavihku brskalnika.
  • localStorage: atribut uporabimo, kadar želimo shraniti podatek za daljše obdobje. Podatek ostane v brskalnikovem pomnilniku tudi, če ponovno zaženemo brskalnik ali računalnik.

Spodnji primer prikazuje preprost števec strani, ki šteje toliko časa, kot bo stran v brskalniku odprta.

Primer uporabe atributa localStorage:

To stran si obiskal <b> 
<script>   
   if (!localStorage.pageCounter)     
	  localStorage.setItem('pageCounter',0);   
   localStorage.setItem('pageCounter',parseInt(localStorage.pageCounter)+1);   
   document.write(localStorage.pageCounter); 
</script>  
</b> krat.<br /> 
<input value="Počisti localStorage" type="button" 
  onClick="localStorage.clear();location.reload(true);" /> 
<input value="Ponovno naloži stran" type="button" onClick="location.reload(true);" />
To stran si obiskal krat.

Primer uporabe atributa sessionStorage:

To stran si obiskal <b> 
<script>   
   if (!sessionStorage.pageCounter)     
	  sessionStorage.setItem('pageCounter',0);   
   sessionStorage.setItem('pageCounter',parseInt(sessionStorage.pageCounter)+1);   
   document.write(sessionStorage.pageCounter); 
</script>  
</b> krat.<br /> 
<input value="Počisti sessionStorage" type="button" 
  onClick="sessionStorage.clear();location.reload(true);" /> 
<input value="Ponovno naloži stran" type="button" onClick="location.reload(true);" />
To stran si obiskal krat.

Atribut sessionStorage števec šteje toliko časa, dokler je odprta stran oziroma zavihek strani. Če zamenjamo atribut sessionStorage z localStorage, se bo števec shranil in naprej štel obiske strani tudi v primeru, če računalnik ali brskalnik ponovno zaženemo.

Na Web Storage lahko enostavno gledamo kot izboljšavo piškotkov, le da nam ponuja veliko večjo pomnilniško kapaciteto (5MB za posamezno domeno v spletnih brskalnikih Mozilla Firefox, Google Chrome in Opera, 10MB za spletni brskalnik Internet Explorer).

Web Storage je vmesnik na odjemalčevi strani (client-side interface). Do piškotkov smo lahko dostopali tako na strežniški kot odjemalčevi strani. Web Storage pa je namenjen za skriptiranje izključno na odjemalčevi strani. Podatki spletnega skladišča Web Storage niso poslani do strežnika za vsak HTTP request in strežnik ne more direktno pisati v spletno skladišče Web Storage.

Offline apps

Pri statičnih straneh offline pregledovanje ni problematično, drugače pa je s spletnimi aplikacijami (kot so Gmail ali Google Docs). Vsaka offline spletna aplikacija se zažene, ko obiščemo neko spletno stran, in strežnik brskalniku pove, katere datoteke potrebuje za offline delovanje. Te datoteke so lahko poljubne - HTML, JavaScript, slike, videi. Ko brskalnik k sebi prenese vse potrebne datoteke, lahko do strani dostopate tudi, ko niste povezani v splet. Brskalnik ve, kdaj niste povezani v splet, in bo uporabil že prenesene datoteke. Ko se ponovno povežete na splet, pa se lahko na strežnik prenesejo morebitne spremembe, ki ste jih naredili v času brez povezave

Večina spletnih brskalnikov shranjuje spletne strani v lokalni predpomnilnik, kar nam omogoča, da jih lahko prebiramo tudi, če imamo prekinjeno internetno povezavo. To deluje predvsem za statične spletne strani. Problem pa se pojavi, če imamo dinamično vsebino, ki deluje v povezavi z podatkovno bazo kot naprimer Gmail, Facebook ali Twitter.

V HTML5 so vključili podporo za spletne aplikacije za delovanje v brezpovezavnem načinu. Brskalnik, ki ima to podporo vključeno prenese vse potrebne datoteke za delovanje aplikacije v brezpovezavnem načinu. Sedaj uporabnik lahko uporablja aplikacijo v brezpovezavnem načinu in vse spremembe se ob ponovni povezavi z internetom prenesejo na strežnik.

Za dlovanje spletne aplikacije v brezpovezavnem načinu je potrebno določiti posebno datoteko, ki se imenuje manifest. V tej datoteki je zapisano katere datoteke je potrebno prenesti za delovanje v brezpovezavnem načinu. V HTML5 datoteki določimo datoteko manifest na naslednji način:

<!DOCTYPE html>
<html manifest="offline.manifest">
<head>
...

Vsaka HTML stran, ki vsebuje <html manifest="offline.manifest">oznako se samodejno prenese v predpomnilnik za delovanje v brezpovezavnem načinu.

Primer:

CACHE MANIFEST 
# Verzija 2012-02-21 v1.0.0 
/slog.css 
/logo.gif 
/main.js 

NETWORK: login.php 

FALLBACK: 
/html/ /offline.html

Prva vrstica nam pove, da gre za datoteko manifest. Pod vrstico CACHE pa določimo katere datoteke je potrebno prenesti v predpomnilnik za delovanje v brezpovezavnem načinu. Pod vrstico NETWORK vpišemo datoteke, ki naj nikoli ne bodo na voljo v brezpovezovalnem načinu. Pod vrstico FALLBACK pa vpišemo lokacijo, kamor naj se shranijo datoteke.

Web workers

Spletni delavci so standarden način, kako spletni brskalniki poganjajo JavaScriptv ozadju. S pomočjo spletnih delavcev lahko sprožimo več niti, z njimi pa lahkov ozadju izvajamo najrazličnejša opravila (kompleksni izračuni, omrežnezahteve, dostop do lokalne shrambe...), medtem ko se v glavni niti stran odzivana akcije uporabnika.

Spletni delavci so standarden način, kako spletni brskalniki poganjajo JavaScript v ozadju. S pomočjo spletnih delavcev lahko sprožimo več niti, z njimi pa lahko v ozadju izvajamo najrazličnejša opravila (kompleksni izračuni, omrežne zahteve, dostop do lokalne shrambe ...), medtem ko se v glavni niti stran odziva na akcije uporabnika.

Če brskalnik podpira Web Workers API, bo imel globalni objekt window lastnost Worker, v nasprotnem primeru pa te lastnosti ne bo imel.

function supports_web_workers() {
   return !!window.Worker;
}

Primer:

<p>Štetje števil: <output id="rezultat"></output></p> 
<button onclick="startWorker()">Zaženi Web Worker</button>  
<button onclick="stopWorker()">Zaustavi Web Worker</button> 
<br /><br /> 
<script> 
var w; 
function startWorker() {     
   if(typeof(Worker) !== "undefined") {         
      if(typeof(w) == "undefined") {             
         w = new Worker("demo_workers.js");         
      }         
      w.onmessage = function(event) {             
         document.getElementById("rezultat").innerHTML = event.data;         
      };     
   } else {         
      document.getElementById("rezultat").innerHTML 
      = "Oprostite, vaš brskalnik ne podpira Web Workers...";     
   } 
} 

function stopWorker() {      
   w.terminate(); 
} 
</script>

Štetje števil: