HTML5:n hyödyntäminen verkkopohjaisen kuvagallerian käyttöliittymässä

Abstract

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.

HTML5 is the newest version of the HTML markup language that is used in creating the structure and the content of a web page. The commisioner of this thesis was Rapid River, which is an Oulu-based company that specializes in advertising. The aim of the thesis was to investigate the advantages of using HTML5 in the client's own web-based photo gallery. Four separate development tasks were selected from the HTML5 specification: semantic elements, drag and drop API, web forms and video element. The objective was then to create a HTML5 user interface with the possibility of falling back to earlier versions of HTML if preferred.

The context consisted of a section on the history of HTML5 and its design principles. The sections of each development task discussed the current usage of each structure or action on the web. Finally, the implementation process was then described in its own chapter with each development task allocated its own sub-section. In addition to HTML, PHP and JavaScript were also used during the implementation, but the thesis as whole concentrated on HTML. The source material that was used consisted mainly of W3C's official specification.

The results of the development tasks were varied. Semantic elements were discovered to be not suitable to a photo gallery type of application. Part of this was due to official W3C specification, where the usage guidelines of each element were too vague. Drag and drop API in turn did not differ from the earlier jQuery version; therefore, that task can be considered successful.

With forms a definite advantage could be observed from using them. Input sanitization in particular was considerably easier to implement with the aid of new attributes from HTML5. As a result of inadequate browser support most of the new input elements were not part of the final user interface. However, the elements that were implemented did not have any problems associated with them although the advantages of using them were limited to input sanitization. At the moment, the video element was not usable in its current state as most of the current browsers do not support the same codecs thus making the use of the tag impractical.

For future development purposes the drag and drop API could be used for uploading files from user's computer. Also the difficulties in using the video element could be possibly solved by modifying the photo gallery's current upload process.