Responsiivisen ulkoasupäivityksen toteuttaminen Plone-sivustolle

Abstract

Opinnäytetyön tavoitteena oli toteuttaa ulkoasupäivitys Each One Teach One -Plone-sivustolle Diazo-teemoitusrajapintaa hyödyntämällä. Työn toimeksiantajana toimi Jyväskylän yliopiston IT-palveluiden Kehittämispalvelut. Sivuston vanha ulkoasu on ollut käytössä jo useita vuosia, mutta sivusto on yhä aktiivisessa käytössä. Ulkoasu-uudistuksesta tuli ajankohtainen, sillä sivuston Plone-versio tullaan päivittämään syksyllä 2015.

Työssä käsiteltiin Plonen ominaisuuksia yleisellä tasolla sekä Plonen teemoittamisen mahdollistavaa Diazo-tekniikkaa. Nykyään sivustojen tarvitsee olla toiminnallisuudeltaan päätelaitteesta riippumattomia, joten myös responsiivinen verkkosuunnittelu oli tärkeässä osassa. Tärkeintä oli ulkoasun päivittäminen helpommin ymmärrettäväksi Each One Teach One -sivuston loppukäyttäjiä, eli kurssin suorittajia varten.

Ulkoasupäivitys toteutettiin Plone 4.3 -sisällönhallintajärjestelmää varten. Toteuttaminen aloitettiin luomalla responsiivinen sivustopohja, jonka responsiivisuus toteutettiin hyödyntäen CSS3-tyylittelyä sekä jQuery JavaScript-kirjastoa. Sivustopohja yhdistettiin Plonen sisällön kanssa Diazon teemoitusmoottorin tarjoamien XML-pohjaisten sääntojen sekä XSLT-määrittelyjen avulla.

Opinnäytetyön tuloksena saatiin Ploneen asennettava Diazoteema, joka päivittää Each One Teach One -sivuston ulkoasun responsiiviseksi sekä helpommin hahmotettavaksi kokonaisuudeksi. Ulkoasupäivitys sivustolle toteutetaan vasta syksyllä 2015, joten ulkoasun kehittäminen jatkuu opinnäytetyön päättymisen jälkeenkin.

The aim of this bachelor's thesis was to update the looks of Each One Teach One web site by using Diazo theming engine. The project was implemented in cooperation with Development Services of IT Services at University of Jyväskylä. The old appearance of the web page has been in use for many years, however, the site is still in active use. Creating a new appearance came in to the picture, because the Plone version of the web page will be updated in Autumn 2015.

The work deals with Plone functionality in general and Diazo theming engine, which enabled theming Plone. Nowadays web pages need to work in all kinds of devices, therefore responsive web design was also an important part of the process. The most important part was updating the looks for Each One Teach One web pages' end users, the course participants.

The updated looks were created for Plone 4.3 content management system. The process began with creating a responsive web page layout. CSS3 styling and jQuery JavaScript library were implemented for this purpose. The layout was merged with the content of Plone by using XML based rules and XSLT coding provided by Diazo theming engine.

The end-product was a Plone theme made possible by Diazo, which updated the looks of Each One Teach One web page to be a responsive and more cohesive entity. The new Plone version will be updated for production in Autumn 2015, therefore the work with the new layout will continue further after this bachelor's thesis has been finished.