Web-sivujen kehitys ja mobiilioptimointi käytettäessä Bootstrap-alustaa
Myhrberg, Mikael (2015)
Myhrberg, Mikael
Hämeen ammattikorkeakoulu
2015
All rights reserved
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2015090214269
https://urn.fi/URN:NBN:fi:amk-2015090214269
Tiivistelmä
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.
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.