HTML5:n ominaisuuksien hyödyntäminen ammattikorkeakoulun viestinnässä

Abstract

Insinöörityön tavoitteena oli tutkia uusien HTML5:nä tunnetuiden tekniikoiden ominaisuuksia ja mahdollisuuksia. Työssä selvitettiin myös suomalaisten ammattikorkeakoulujen sähköisessä yhteisöviestinnässä käyttämiä kanavia. Tutkimuksen tuloksia hyödyntäen Metropolia Ammattikorkeakoulun Tieto- ja viestintäteknologian yksikölle toteutettiin prototyyppi yksikön ajankohtaisten asioiden viestintäkanavasta.

HTML5:llä tarkoitetaan yleensä HTML-, CSS-, ja JavaScript-kielten käyttöä verkkosivujen toteutuksessa. Työssä tutkittiin, millä tavoin HTML-kielen syntaksi on yksinkertaistunut uuden version myötä ja kuinka uudet semanttiset elementit parantavat käyttökokemusta ja lisäävät rakenteen merkityssuhteita. Videon ja graafisten piirtoelementtien käyttöä ja hyödyntämistä osana verkkosivua selvitettiin erilaisten käyttötapojen kautta. CSS:n ominaisuuksista perehdyttiin elementtien muotoilujen lisäksi mukautuvien verkkosivujen suunnittelun mahdollistaviin mediakyselyihin ja omien kirjasinten käytön tekniikkaan.

Prototyypin toteutuksella tutkittiin, kuinka HTML5:n käyttö vaikuttaa verkkosivun toteutukseen. Sivuston käyttöliittymän luomiseen käytettiin jQuery JavaScript-kirjastoa hyödyntävää liitännäistä jQuery Booklet pluginia. Liitännäisen käyttöönotto ja muokkaus oli yksinkertaista, koska sen muokkaaminen tapahtuu yhden HTML-tiedoston kautta.

Työn tuloksena voidaan todeta HTML5:n ominaisuuksien soveltuvan ammattikorkeakoulun viestintään ja prototyypin jatkokehityksellä voitaisiin saada aikaan toimiva uutissivusto. Prototyypissä käytetty jQuery Booklet plugin soveltuu hyvin staattisen sisällön esitykseen, mutta mikäli sisältöä halutaan muokata myöhemmin, tulisi sen yhteyteen suunnitella sisällönsyöttöjärjestelmä uutismateriaalin lisäämistä varten. Kaikki uudet ominaisuudet eivät myöskään toimi vanhemmilla selaimilla, joten kaikille käyttäjäryhmille HTML5:llä tehty sivusto ei vielä sovellu.

The goal of this thesis was to study features and possibilities of various technologies known as HTML5. It was also explored, how the Finnish polytechnics communicate on the web. Prototype of the news site for Metropolia University of Applied Sciences School of ICT was created by making use of the study results.

HTML5 is used as an umbrella term for various new technologies used on the web. Often HTML5 refers to the usage of HTML, CSS and JavaScript technologies. This study analyzed how the syntax of HTML had been simplified by the latest version of the markup language and how the new semantic elements enhance the user experience. Video and graphical elements along with the new CSS styling features have changed the way how web pages are designed these days. CSS3 also introduces two noteworthy features. Media Queries allow the responsive web design and font-face makes it possible to use your own fonts on the internet.

Development of the prototype was used for determining how HTML5 techniques can be applied to the news site. JQuery booklet plugin is an easy to use tool for creating user interfaces and was used in the prototype. Deployment of this flexible tool was simple as it can be modified via HTML document. As a result of the study it can be seen that HTML5 technologies are suitable for the communication of a polytechnic. Further development of the prototype could produce a functional news site. Plugin used in the prototype is suitable for presenting static content but some kind of content editing system is needed for additional data such as news. Not all of the new features of HTML are compatible with older browsers so they can not be used for all purposes.