HTML5:n hyödyntäminen verkkopohjaisen kuvagallerian käyttöliittymässä
Manninen, Iikka (2012)
Manninen, Iikka
Oulun seudun ammattikorkeakoulu
2012
All rights reserved
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-201205117594
https://urn.fi/URN:NBN:fi:amk-201205117594
Tiivistelmä
HTML5 on verkkosivujen rakenteen kuvailemiseen käytetyn HTML-kielen uusin versio. Opinnäytetyö tehtiin oululaiselle mainostoimisto Rapid Riverille, jonka verkossa toimiva kuvagalleria oli opinnäytetyön kehitystehtävien kohteena. Työn tarkoituksena oli tutustua HTML5-kieleen ja tutkia, kuinka sen tuomia uusia ominaisuuksia voisi hyödyntää toimeksiantajan kuvagalleriassa. HTML5-standardista rajattiin kehitystehtäviksi alkuvaiheessa neljä eri kokonaisuutta, joita olivat semanttiset elementit, raahaus ja pudotus -rajapinta, lomakkeet ja videoiden näyttämiseen tarkoitettu video-elementti. Työn tavoitteena oli luoda kuvagalleriaan HTML5-kieltä hyödyntävä käyttöliittymä niin, että mahdollisuus aikaisempien HTML-versioiden käyttöön kuitenkin säilytettäisiin.
Viitekehyksessä käsiteltiin lyhyesti HTML5:n historiaa ja sen suunnitteluperiaatteita sekä kerrottiin yleisesti kehitystehtävien kohteena olevien toimintojen ja rakenteiden käytöstä verkossa. Käytännön työn raportointi tehtiin pääosin HTML:n näkökulmasta, vaikka työhön kuului myös PHP- ja JavaScript-ohjelmointia. Lähteinä käytettiin pääasiassa verkkolähteitä, joista HTML-standardeja hallinnoivan W3C:n virallinen spesifikaatio oli selkeästi hyödyllisin.
Kehitystehtävien tulokset olivat vaihtelevia. Semanttisten elementtien havaittiin olevan suurimmaksi osaksi merkitykseltään sellaisia, etteivät ne soveltuneet kuvagalleriatyyppisen sisällön semanttiseen määrittelyyn. Osittain tähän oli syynä myös se, että W3C:n viralliset määritykset elementtien käyttötarkoituksille olivat vaikeasti tulkittavia tai sovellettavia. Raahaus ja pudotus-rajapintaan liittyvää tehtävää voitiin taas pitää onnistuneena, koska rajapinnan avulla saatiin toteutettua sama toiminnallisuus kuin JavaScriptillä ja jQuery-kirjastolla luodussa versiossa.
Lomakkeiden kohdalla uusien attribuuttien käytöstä oli nähtävissä selkeää hyötyä, sillä varsinkin syötteiden tarkastaminen oli HTML5:n avulla huomattavasti helpompi toteuttaa. Selaintuen vähäisyydestä johtuen suurin osa uusista syöte- eli input-kentistä jäi opinnäytetyössä käsittelemättä. Käyttöliittymässä käytettyjen input-kenttien osalta suurempia puutteita ei ilmennyt, vaikka niistä saavutettu hyöty jäikin vain syötteentarkistukseen liittyviin asioihin. Videoelementin suurimmat ongelmat olivat eri selainten vaihtelevassa videoformaattien tuessa, minkä johdosta kyseisen elementin käyttäminen kuvagalleriassa ei ole tällä hetkellä järkevää.
Kuvagallerian jatkokehittämistä ajatellen opinnäytetyön teon aikana nousi esiin erityisesti raahaustoiminnon käyttäminen tiedostojen lataamiseen käyttäjän tietokoneelta. Myös videoelementtiin liittyviin ongelmiin voi olla mahdollista löytää vaihtoehtoisia ratkaisuja esimerkiksi muuttamalla tiedostojen lataamisprosessia.
Viitekehyksessä käsiteltiin lyhyesti HTML5:n historiaa ja sen suunnitteluperiaatteita sekä kerrottiin yleisesti kehitystehtävien kohteena olevien toimintojen ja rakenteiden käytöstä verkossa. Käytännön työn raportointi tehtiin pääosin HTML:n näkökulmasta, vaikka työhön kuului myös PHP- ja JavaScript-ohjelmointia. Lähteinä käytettiin pääasiassa verkkolähteitä, joista HTML-standardeja hallinnoivan W3C:n virallinen spesifikaatio oli selkeästi hyödyllisin.
Kehitystehtävien tulokset olivat vaihtelevia. Semanttisten elementtien havaittiin olevan suurimmaksi osaksi merkitykseltään sellaisia, etteivät ne soveltuneet kuvagalleriatyyppisen sisällön semanttiseen määrittelyyn. Osittain tähän oli syynä myös se, että W3C:n viralliset määritykset elementtien käyttötarkoituksille olivat vaikeasti tulkittavia tai sovellettavia. Raahaus ja pudotus-rajapintaan liittyvää tehtävää voitiin taas pitää onnistuneena, koska rajapinnan avulla saatiin toteutettua sama toiminnallisuus kuin JavaScriptillä ja jQuery-kirjastolla luodussa versiossa.
Lomakkeiden kohdalla uusien attribuuttien käytöstä oli nähtävissä selkeää hyötyä, sillä varsinkin syötteiden tarkastaminen oli HTML5:n avulla huomattavasti helpompi toteuttaa. Selaintuen vähäisyydestä johtuen suurin osa uusista syöte- eli input-kentistä jäi opinnäytetyössä käsittelemättä. Käyttöliittymässä käytettyjen input-kenttien osalta suurempia puutteita ei ilmennyt, vaikka niistä saavutettu hyöty jäikin vain syötteentarkistukseen liittyviin asioihin. Videoelementin suurimmat ongelmat olivat eri selainten vaihtelevassa videoformaattien tuessa, minkä johdosta kyseisen elementin käyttäminen kuvagalleriassa ei ole tällä hetkellä järkevää.
Kuvagallerian jatkokehittämistä ajatellen opinnäytetyön teon aikana nousi esiin erityisesti raahaustoiminnon käyttäminen tiedostojen lataamiseen käyttäjän tietokoneelta. Myös videoelementtiin liittyviin ongelmiin voi olla mahdollista löytää vaihtoehtoisia ratkaisuja esimerkiksi muuttamalla tiedostojen lataamisprosessia.