FUNity-opinnäytetyöjärjestelmän käyttöliittymän kehittäminen : HTML5 ja CSS3 Web-kehityksessä

Abstract

Opinnäytetyön toimeksiantaja toimi FUNity Oy, joka tarjosi aiheen opinnäytetyölle järjestelmän ulkoasun kehittämisen parissa. FUNity on järjestelmä opinnäytetöiden ja työharjoitteluiden budjetointiin, työvaiheiden seurantaan sekä ohjaajien ja opiskelijoiden hallinnoimiseen. Opinnäytetyön tavoitteena oli löytää ratkaisu suurimpaan käytettävyysongelmaan, järjestelmän päävalikkorakenteeseen, uusia HTML5- ja CSS3-tekniikoita hyödyntäen. Samalla opinnäytetyössä kartoitetaan mitä HTML5- ja CSS3-tekniikat ovat ja kuinka paljon niiden uusia ominaisuuksia voidaan jo hyödyntää web-kehityksessä.

Lähteenä opinnäytetyössä hyödynnettiin luotettuja ja tunnettuja Internet-sivustoja sekä suomalaista, että ulkomaista tuoretta kirjallisuutta. Useita lähteitä yhdistelemällä vältyttiin tiedon ristiriitaisuuksilta, sillä HTML5 ja CSS3 ovat vielä kehitysasteella sekä muutosalttiita tekniikoita. Käytännön osuuden tulokset, FUNityn navigointimallit, perustuvat Internetissä suosittuihin navigointiratkaisuihin. Eri navigointimallien hyötyjä analysoin itse ja haastattelujen avulla kartoitettiin navigointiratkaisujen hyviä ja huonoja puolia. Lopputuloksena opinnäytetyö on paketti HTML5:n ja CSS3:n käytöstä ja tekniikoiden hyödyntämisestä osana FUNity-opiskelija- ja ohjaajaportaalin navigointia.

Opinnäytetyön aikana luoduista viidestä erilaisesta navigointiratkaisusta, voidaan jokaista hyödyntää osana FUNitya. Oli tehtävä kompromissi, mille osa-alueelle annetaan eniten painoarvoa: käytettävyys, näyttävyys, teknisyys vai rakenne. Jatkossa navigointia ja koko sivuston käytettävyyttä voidaan kehittää opiskelijoiden näkökulmasta, mikäli sille on tarvetta. Myös mobiiliystävällisen sivuston ja sille sopivan navigoinnin tarvetta tulee miettiä erikseen.

The thesis was commisioned by FUNity Oy. to develop system's front-end. FUNity is a system intended for budgeting the thesis process and practical trainings, following operations and managing students and instructors. The main goal of the thesis was to find a solution to the biggest usability problem, main navigation of the portal, using the latest web techniques HTML5 and CSS3. Also to identify in the process what HTML5- and CSS3-techniques are and how many of the new properties can already be used while developing websites.

Well known, trusted websites and Finnish as well as foreign literature were used as a main source of the thesis. Conflicts of information were avoided by combining multiple sources, because HTML5 and CSS3 are still under development and susceptible to changes. The results of the practical contribution of the thesis, navigation templates of FUNity, are based on popular navigation solutions around Internet. Pros and cons of different navigation solutions were analyzed by the author and the interviewees. As a result the thesis there is a guide of the usage of HTML5- and CSS3-techniques in general and as a part of FUNity student and instructor portal navigations.

Every one of the five different navigation solutions developed under the contribution of the thesis can be used as a part of the FUNity system. A compromise must be made based on which sections are given the most stature: usability, appearance, technicality or structure. In the future the navigation and usability of the whole website can be developed from the students’ point of view, if it is needed. The need for a mobile friendly website and navigation has to be evaluated separately.