Tehtävänsuorittajien ja esikäsittelijöiden käyttö verkkosivukehityksessä

Abstract

Insinöörityön tarkoituksena oli uudistaa kuntoutusyhdistyksen verkkosivut ajan tasalle. Yhdistyksen tavoitteena on yhdistää kuntoutuksen parissa työskenteleviä ihmisiä, mutta sen verkkosivut olivat vanhentuneet eikä sillä ollut toimivia sosiaalisen median kanavia.

Työssä perehdyttiin nykyaikaisen verkkosivun vaatimuksiin, mikä sisältää ulkonäölliset, toiminnalliset ja sisällölliset asiat. Työssä käytiin läpi myös verkkosivukehityksen työnkulkua ja sen kehittämiseksi ja nopeuttamiseksi luotuja JavaScript-apuvälineitä. Näitä apuvälineitä ovat esimerkiksi Grunt, Gulp, Bower, Less ja Sass, ja ne toimivat lokaalisti Node.js JavaScript-suoritusympäristössä.

Sivusto toteutettiin Wordpress-sisällönhallintajärjestelmään. Pohjana käytettiin muokattua Roots-teemapohjaa ja Bootstrap-apukirjastoa. Sivuston kehitystyö tehtiin lokaalisti XAMPP-kehitysympäristössä. Kehitystä varten asennettiin myös Node.js-suoritusympäristö ja Grunt-tehtävänsuorittaja ja sen tarvitsemat lisäosamoduulit. Kehitystyössä käytettiin myös Less-esikäsittelijää ja jQuery-apukirjastoa.

Lopputuotteena syntyi valmis responsiivinen Wordpress-teema, joka asennettiin asiakkaan palvelimelle. Sisällönhallintajärjestelmään syötettiin asiakkaan luoma sisältö ja tuotiin erillisessä Blogger-palvelussa ollut kuntoutusblogi. Verkkosivun lisäksi yhdistykselle tehtiin uusi logo, suunniteltiin yhtenäinen verkkoilme, luotiin sosiaalisen median kanavat Twitteriin ja Facebookiin sekä uutiskirjepohja MailChimp-palveluun. Asiakkaalle luotiin ohjeistus Wordpressin käyttöön ja annettiin käyttäjätunnukset sosiaalisen median käyttöä varten.

The purpose of this final year project was to redesign the website of a rehabilitation association. The aim of the association is to connect the people working in the field of rehabilitation, but its website was getting old and it did not have proper social media channels.

The thesis analyzes the modern requirements of a web page, which includes aesthetic, functional and content issues. The work looks into the web development workflow and how to improve and speed it up with JavaScript tools. These tools are, for example, Grunt, Gulp, Bower, Less and Sass, and they work locally in the Node.js JavaScript runtime environment.

The website was made using the WordPress content management system and a modified skeleton theme named Roots and the Bootstrap library. The development work was carried out locally on the XAMPP development environment. For development purposes the Node.js runtime environment was also installed, as well as the Grunt task runner and the plugins it requires. In the development work also the Less preprocessor and the jQuery library were used.

The finished product was a responsive WordPress theme, which was installed on the customer’s server. Text content to the content management system was imported from the client’s old website, and the content of a blog on rehabilitation was imported from Blogger. In addition to the web page, a new logo and web identity were designed and social media channels were created on Twitter and Facebook as well as the MailChimp newsletter template. Also a WordPress guide was created for the client as well as instructions and credentials for the social media accounts.