Responsiivisten teemojen suunnittelu ja toteutus Liferay-julkaisujärjestelmään : Case: Obshare.com-käyttöliittymätoteutus

Abstract

Opinnäytetyön tavoitteena on suunnitella ja toteuttaa Liferay-julkaisujärjestelmän teemoitus Observis Oy:n obshare.com-palveluun responsiivisen verkkosuunnittelun periaatteella. Tavoitteena on, että palvelun käyttöliittymä vastaa graafikon ja suunnittelijoiden näkemyksiä ja sen käyttö on sujuvaa myös puhelimien ja tablettien selaimilta selailtuna.

Opinnäytetyön kehittämistehtävänä on perehtyä Liferayn teemojen toteutukseen ja kuinka palvelun sisäiset ohjelmat, portletit, saadaan vastaamaan teeman ulkoasua. Lisäksi tehtävänäni on suunnitella ja toteuttaa obshare.com-palvelun teema responsiivisen verkkosuunnittelun periaatteita hyödyntäen. Tietoa on hankittu Liferay-julkaisujärjestelmän virallisista ohjekirjoista, kuten Liferay User Interface Development ja Liferay In Action, sekä Liferayn kotisivuilta. Lisäksi responsiivisen verkkosuunnittelun lähteenä on käytetty Liferayn User Interface Engineer Nate Cavanaughin blogikirjoituksia sekä Ethan Marcotten vuonna 2010 ilmestynyttä kirjaa Responsive Web Design. Lisäksi haasteena on ollut toteutuksessa käytettyjen Primefaces-elementtien muokkaaminen teemaan ja mobiililaitekäyttöön sopiviksi.

Työ on toteutettu Observis Oy:n kansainvälisessä ohjelmointi- ja suunnittelutiimissä. Käytännön työ on tehty suurimmaksi osaksi yrityksen toimipisteessä ja työkielenä on ollut pääasiassa englanti. Tehtävänäni on ollut toteuttaa obshare.com-verkkopalvelun teema graafikon ohjeiston ja suunnittelutiimin ohjeiden mukaisesti. Lisäksi vastuulleni kuuluu ohjelmoijien tuottamien käyttöliittymäelementtien muokkaaminen tähän teemaan sopiviksi.

Opinnäytetyön alussa on esitelty käytännön työssä käytetyt responsiivisen verkkosuunnittelun ja Liferay-julkaisujärjestelmän tekniikat sekä niiden perusajatukset. Lopussa on käyty läpi teeman käytännön toteutus sekä esitelty obshare.com-palvelun havaintosivujen listanäkymän toteutus esimerkkinä portletin käyttöliittymän responsiivisesta toteutuksesta.

This bachelor’s thesis was about creating a theme for Observis Oy’s product Obshare.com which was created on top of Liferay Portal web platform. The development task was to create a Liferay theme ac-cording to the user-interface designs and graphic design manuals. The user interface of the portal should also be designed for easy browsing with handheld devices.

The purpose of the development task was to learn Liferay’s theme creation methods and to produce a theme for the Obshare.com service by using responsive web design. The task also included learning the methods and producing the correct look and feel for the portal’s internal applications, called portlets. The instructions and guidelines for the theme creation were gathered from the official Liferay manuals such as Liferay User Interface Development and Liferay In Action. The guides and examples for respon-sive web design were from Ethan Marcotte’s book titled Responsive Web Design and from blog-posts by Nate Cavanaugh, a Liferay’s User Interface Engineer.

The development was done in an international development team at Observis Oy. Development team includes back end developers, designers, a graphical designer and me as a front end developer. My re-sponsibility in the development team was to produce the look and feel of the obshare.com service accord-ing to the plans of the designers.

The thesis started with the introduction and concepts of responsive web design and Liferay Portal used in the development task. The rest of this thesis was about the development process. This included an exam-ple of theme creation and the use of responsive web design in the Obshare.com observation page. The development of the user interface of Obshare.com service continues with the knowledge gained from this work.