Helppokäyttöinen sivustonmuokkaus

Abstract

Tämän opinnäytetyön tarkoituksena oli kehittää helppokäyttöinen web-sovellus sivuston muokkausta varten. Sovellus on osa Kemijärven seurakunnan nuorisotyölle kehitettäviä sivustoja, joten sen käytöstä oli tehtävä yksinkertaista myös sellaisille henkilöille, jolla ei lainkaan kokemusta tai taitoja ohjelmointiin liittyen. Projektin tavoitteena oli kehittää perustyökalut sivustojen muokkaamiseen, jotta käyttäjä voi lisätä sivustolle haluamiaan tekstejä ja kuvia.

Sovellus toteutettiin Next.js-ohjelmistokehystä ja Material-UI-kirjastoa käyttämällä, ja sen toimintaan hyödynnettiin lohkorakenteista mallia. Työssä kehitettiin mahdollisuus kahteen erityyppiseen lohkoon: tekstilohkoon ja kuvalohkoon. Tekstilohkon ominaisuuksiin kuuluu tekstin värin, koon ja tasauksen valinta. Kuvalohkoon vastaavasti voi lisätä kuvan tuomalla tai raahaamalla sen lohkon sisään. Kuvaa voi myös säätää haluamansa kokoiseksi. Näiden ominaisuuksien lisäksi työssä mahdollistettiin yksittäisen lohkon jakaminen kahteen rinnakkaiseen osaan, sekä usean lohkon lisäämiseen allekkain.

Toimivuudeltaan työ on onnistunut, ja se täytti asetetut tavoitteet. Sovellus on kehitetty selkeäksi, ja sitä on helppo lähteä kehittämään tarvittavaan suuntaan sivustoja rakentaessa.

The intention of this bachelor’s thesis was to develop a user-friendly web application for site editing. Application is a part of a website that is going to be designed for the youth work in Kemijärvi parish. For that reason, it needed to be simple to use without any necessary coding skills. The aim for this project was to develop basic tools for editing websites so that the user can add text and pictures to the page.

The application was implemented with Next.js framework and Material-UI library, and block styled models were utilized for its functions. Two kind of options were developed for the editing: a block for a picture or a text. The user can change the color, the size and the align in a text block. A picture can be imported or dragged to a block intended for a picture, and its size can be modified. In addition, it is possible to have multiple blocks in a page and you can split one block vertically.

All the functions work well in the application and it achieved the objective. The web application is clear, and it is easy to develop it further.