Responsiivinen mobiilisivusto CSS-ohjelmistokehyksellä
Selonen, Juha (2020)
2020
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-202004296523
https://urn.fi/URN:NBN:fi:amk-202004296523
Tiivistelmä
Insinöörityön tarkoituksena oli tehdä Bootstrap-CSS-ohjelmistokehyksen avulla responsiivinen internetsivusto, joka on ensisijaisesti tarkoitettu käytettäväksi älypuhelimen näytöltä. Insinöörityössä perehdyttiin responsiiviseen suunnitteluun ja teknologioihin, joilla CSS-ohjelmistokehys on toteutettu. Tutkittuja teknologioita olivat HTML5 ja CSS. CSS:n osalta selvitettiin Flexbox- ja CSS Grid -teknologioita. Työssä tutkittiin responsiivisen suunnittelun filosofiaa. Niin sanottu mobiili ensin -suunnittelu lähtee pienimmästä näyttökoosta ja skaalautuu myös isoille näytöille. Työssä selvitettiin, miten suosikkikuvakkeet rakennetaan mobiilissa ympäristössä käytettäviksi. Insinöörityössä tehtiin Bootstrap-ohjelmistokehyksen avulla internetsivut.
Työssä tutkittiin, mikä on käytetyin CSS-ohjelmistokehys internetsivujen tekemiseen ja käytetyin kehittäjien keskuudessa. Suosituin CSS-ohjelmistokehys on Bootstrap, jota käytetään eniten internetsivujen tekemiseen. Myös kehittäjien keskuudessa se on suosituin. Työssä tutkittiin myös Materialize CSS -ohjelmistokehystä sen vuoksi, että työssä ei haluttu verrata kahta suosituinta, vaan erilaisia CSS-ohjelmistokehyksiä. Muiden CSS-ohjelmistokehyksien osalta käytetyimmät olivat Bootstrap, Foundation, UIkit, Materialize, Semantic UI ja Bulma.
Insinöörityön lopputuloksena syntyi responsiivinen mobiilisivusto. Sivuston aihe on tekijän oman osaamisen esittely potentiaalisille työnantajille. Sivusto onnistui hyvin ja toimii mobiilissa ympäristössä. Insinöörityöraportissa esitellään, miten sivusto on suunniteltu ja toteutettu. Työssä esitellään sivuston rakenne ja layout-kaaviot sekä se, mihin tarkoitukseen sivusto on tehty ja mikä on sen kohdeyleisö.
Työssä tutkittiin, mikä on käytetyin CSS-ohjelmistokehys internetsivujen tekemiseen ja käytetyin kehittäjien keskuudessa. Suosituin CSS-ohjelmistokehys on Bootstrap, jota käytetään eniten internetsivujen tekemiseen. Myös kehittäjien keskuudessa se on suosituin. Työssä tutkittiin myös Materialize CSS -ohjelmistokehystä sen vuoksi, että työssä ei haluttu verrata kahta suosituinta, vaan erilaisia CSS-ohjelmistokehyksiä. Muiden CSS-ohjelmistokehyksien osalta käytetyimmät olivat Bootstrap, Foundation, UIkit, Materialize, Semantic UI ja Bulma.
Insinöörityön lopputuloksena syntyi responsiivinen mobiilisivusto. Sivuston aihe on tekijän oman osaamisen esittely potentiaalisille työnantajille. Sivusto onnistui hyvin ja toimii mobiilissa ympäristössä. Insinöörityöraportissa esitellään, miten sivusto on suunniteltu ja toteutettu. Työssä esitellään sivuston rakenne ja layout-kaaviot sekä se, mihin tarkoitukseen sivusto on tehty ja mikä on sen kohdeyleisö.