Web-sivujen kehitys ja mobiilioptimointi käytettäessä Bootstrap-alustaa

Abstract

Opinnäytetyön aihe perustuu omakohtaiseen kokemukseen web-kehityksestä. Taustana toimi myös aiemmin hyvinkääläiselle yritykselle tehty Bootstrap-projekti. Tarkoituksena oli esitellä Bootstrap-koodikirjastoa ja sitä, kuinka sitä voi käyttää alustana käytännön web-kehityksessä ja mobiilioptimoinnissa. Tavoitteena oli saada lukija ymmärtämään, mikä Bootstrap on ja mitä web-sivujen mobiilioptimointi tarkoittaa. Lisäksi tarkoituksena oli käytännön esimerkkiprojektin avulla näyttää, miten Bootstrapia on mahdollista käyttää www-sivujen kehityksessä ja mobiilioptimoinnissa.

Työssä sovellettiin aiempaa web-kehittämisen osaamista yhdessä Bootstrapin ohjeiden kanssa. Opinnäytetyö rajattiin käsittelemään Bootstrapiin liittyvää www-kehitystä ja mobiilioptimointia. Työssä käytiin läpi Bootstrapin ja mobiilioptimoinnin taustoja ja tarvetta. Lisäksi tutustuttiin Bootstrapin keskeisiin komponentteihin ja ominaisuuksiin sekä yleisimpiin web-tekniikoihin.

Työn keskeinen osa oli sitä varten kehitetty esimerkkiprojekti, jossa käytiin läpi web-sivujen kehitystä ja mobiilioptimointia Bootstrap-alustalla. Sivut toteutettiin käyttämällä HTML5- ja CSS3-kieliä yhdessä Bootstrapin ja sen mukana tulleiden JavaScript- ja jQuery-funktioiden kanssa. Projektissa käytiin läpi vaiheittain pienimuotoisen verkkosivuston kehitysprosessia. Havainnollistamiseen käytettiin koodiesimerkkejä ja mallikuvia.

Bootstrapin käyttöä argumentoitiin sillä, että näin säästyy runsaalta CSS-koodin kirjoittamiselta. Esimerkkiprojekti todisti väitteen oikeaksi sisältämällä melko vähän CSS-koodia – ottaen huomioon kuinka paljon sitä olisi tarvittu ilman Bootstrapia. Samalla ilmeni myös Bootstrapin haittapuoli, sillä projektin HTML-sivut olivat hyvin koodi-intensiivisiä ja sisälsivät paljon HTML-koodia. Opinnäytetyön loppuun oli sijoitettu case-esimerkki oikeasta, yritykselle tehdystä Bootstrap-projektista.

The subject of this thesis is based on personal experience as a web-developer as well as on a real Bootstrap project carried out for a company located at Hyvinkää. The purpose was to showcase the Bootstrap framework and demonstrate how it could be used for web-development and mobile optimization. The aim was to give the reader an idea of what Bootstrap and mobile optimization are and how they work. This aim was illustrated by including a sample project in which the use of Bootstrap was showcased.

Previous knowledge was applied into this thesis project alongside the official Bootstrap instructions. The thesis itself was limited to include only Bootstrap-based web-development and mobile optimization. The background as well as need for Bootstrap and mobile optimization are examined. In addition, the most central components and properties of Bootstrap are examined alongside an introduction to the most common web technologies.

The central issue in the thesis was the sample project, in which the processes of website development and mobile optimization were examined and presented. The pages used HTML5 and CSS3 together with Bootstrap, which included custom JavaScript- and jQuery-plugins. The project included step-by-step instructions on how to develop a small Bootstrap-enabled, mobile optimized website. Examples on codes and images were included into the thesis to demonstrate the process.

The argument for the use of Bootstrap was that using it saves the developer from writing a lot of CSS code. The sample project proved the argument right, as it demonstrated how little CSS code was finally required in the end to accomplish such a website with all the functionalities. At the same time, a disadvantage in using Bootstrap was discovered, as it ended up being very code intensive, meaning that a lot of HTML code was required. As an appendix to this thesis there is a sample case of a real Bootstrap project carried out for a company located at Hyvinkää, Finland.