Digitekniikat - Responsiivinen sivusto (Bootstrap & jQuery) ja sen testaus

Tehtävänanto:

Osa 1: responsiivinen sivusto (35 % arvosanasta)

Etätehtävän tarkoituksena on ottaa haltuun kurssilla käsiteltyjä tekniikoita sekä etsimään ja kokeilemaan myös uusia ideoita & tekniikoita.
Tee responsiivinen ja interaktiivinen HTML5-sivusto, jossa on:

sivurakenne tehty html5:lla
navigoinnissa hyödynnetty javascriptiä (esim. bootstrap tai jQuery)
slideshow ja kuvagalleria
erilaisia animoituja rakenne-elementtejä, esim. haitarimalli, slide, pop-up-ikkuna…
lomake toteutettuna uusilla HTML5:n lomake-elementeillä ja jQueryllä
3 osapuolen palvelun integroiminen sivulle (esim. karttoja, säätietoja…)
tiedon haku ja talletus firebaseen

Aihe on vapaa, esim. omat sivusi, jonkin seuran tai firman sivusto tai harrastesivut.

Osa 2: Työseloste ja testusraportti (15 % arvosanasta)

Palauta tehtävän yhteydessä työseloste & testausraportti, jossa kerrot seuraavat asiat:

sivuston aihe
sivuston tavoite ja kohderyhmä
käytetyt työtavat & kirjastot & tietokantahaut
testausraportti korjausehdotuksineen

Etätehtävän arvioinnissa käytetyt kriteerit:

idea
sisältö
visuaalisuus ja selkeys
sama tyyli läpi esityksen
responsiivisuus
javascript-kirjastojen tehokas & monipuolinen käyttö
tietokannan käyttö
toimivuus uusimmilla selaimilla (testaa)
sivujen latautumisaika kohtuullinen (testaa)

Palautus zippipakettina moodleen tai url-osoite moodleen.

Työseloste

Sivuston aihe ja tavoite

Sivusto on verkkokauppa kuvitteelliselle Desktop Customs yritykselle, joka valmistaa käsin tehtyjä valmistietokoneita tilauksesta. Tavoitteena on käytännössä poiketa tyypillisistä laitevalmistajista vähemmän aggressiivisella markkinointikampanjalla ja vähentää yleisluuloja valmis konepaketeista. Teeman puolesta tavoittelin suhteellisen modernia ja eleganttia ulkoasua. Käyttöliittymä puolestaan nojautuu enemmän työpöytäkäyttöön mobiilin sijasta. Responsiivisuutta ei kuitenkaan ole unohdettu, joskin siinä on parantamisen varaa.
Sivuston URL:
http://myy.haaga-helia.fi/~a1503896/

Sivuston kohderyhmä

Palvelun kohderyhmiä yhdistää nopean laitehankinnan tarve ja halu saada kone mahdollisimman vähällä vaivalla. Tietämättömyys tietotekniikasta ei ole este palvelun käytettävyydelle, vaan päinvastoin. Palvelu ei kuitenkaan rajaa sivuston kohderyhmää vaan tuohon tiettyyn asiakassegmenttiin, sillä palvelusta hyötyvät myös tietotekniikasta ja tietokoneista kiinnostuneet, jotka haluavat säästää aikaa ja tietävät täsmälleen, mitä haluavat tietokoneeltaan. Palvelun valttina on se, että kaikkien tietokoneiden komponentit kerrotaan yksityiskohtaisesti, jolloin asiakas voi itse varmentaa kokoonpanon laadukkuuden. Näin ei ole monien valmistietokoneiden kohdalla.

Käytetyt työtavat

Kirjastot

Bootstrap (http://getbootstrap.com/)
JQuery UI (https://jqueryui.com/)
Lightbox (http://lokeshdhakar.com/projects/lightbox2/)
Google Firebase (https://firebase.google.com/)
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
https://fonts.googleapis.com/css?family=Orbitron
css/lopputyyli.css
css/jquery-ui-1.10.4.custom.min.css
https://code.jquery.com/ui/1.12.1/jquery-ui.js
js/lightbox.js
css/lightbox.css
https://code.jquery.com/jquery-3.1.0.js
https://www.gstatic.com/firebasejs/3.7.2/firebase.js

Tekniikat

Navigointipalkki
Sivuston yläosasan navigointipalkki on toteutettu Bootstapin NavBar elementillä: https://www.w3schools.com/bootstrap/bootstrap_navbar.asp.

Navigointipalkissa on myös käytetty paljon Bootstrapin Glyphiconeja: http://getbootstrap.com/components/.
Pienellä näytöllä navigointi menee oikeassa reunassa olevan painikkeen alle:

Slideshow
Etusivun slideshow on tehty Bootstrapin karuselli elementillä: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp.

Tein Gimpillä kaksi mainosbanneria, jotka pyörivät siinä automaattisesti vuorotellen.
Grids
Kaikki sivut perustuvat suurelta osin Bootstrapin Grid-palstoihin. Ne on tyypillisesti jaettu kahteen yhtä tai kolmeen yhtä suureen palstaan, mutta myös erikokoisia palstoja on paljon: https://v4-alpha.getbootstrap.com/layout/grid/.

Esimerkiksi tuossa ylläolevassa kuvassa sivuston perusrakenne on jaettu kahteen eri suuruiseen palstaan, jossa suuremman palstan sisältö on myös jaettu omiin yksittäisiin palstoihin (tuotekuva ja tuotekuvaus).
Wells
Sivustossa on hyödynnetty myös paljon Bootstrapin well-classeja, joiden avulla on tehty suurin osa tuotekuvista ja -kuvauksista. Reunat on pääasiassa suorakulmaisia.

Accordion
Etu- ja infosivulla on jQueryn accordion-elementti, jonka sisälle olen piilottanut tietokantaan kirjoittamiseen ja sieltä lukemiseen tarvittavat html-elementit. Etusivulla on esimerkiksi Bootstrapin lomake, jolla asiakas voi lähettää palautetta sivustosta.

jQuery Tabs
Tuotetietodot on sisällytetty jQueryn tabs-elementtiin, joka on jaettu kahden otsikon alle: https://jqueryui.com/tabs/.

jQuery Menu
Tietokoneet-sivun vasemmassa reunassa oleva pystysuora navigointipalkki on toteutettu jQueryn Menulla: https://jqueryui.com/menu/. Se on jaettu eri käyttötarkoituskategorioihin, jotta asiakas voi rajata tuotehakuja helpommin tarpeisiinsa perustuen.

Lightbox galleria
Kaikkien tuotteiden kohdalla on kuvagalleria, joka on toteutettu Lightboxilla: http://lokeshdhakar.com/projects/lightbox2/. Kuvat saa suuremmaksi painamalla niitä, jonka jälkeen voi nuolilla siirtyä seuraavaan kuvaan.

Google Map Api
Info-sivulle olen integroinut yhteystietojen viereen Googlen kartta API:n, joka osoittaa automaattisesti Haaga-Helian ammattikorkeakouluun.

Bootstrap-lomakkeet
Lomakkeita käytin useammassakin kohdassa, mutta info-sivun takuupalautushakemuksen lomake on hyvä esimerkki tilanteesta, jossa olen sisällyttänyt omaa javascriptiä lomakkeeseen.

Lähetä-painike näyttää piilotetun div-elementin ja sen sisällön sekä piilottaa painetun napin. Vastaavia hide ja show javascript attribuutteja käytettiin myös tietokantaan kirjoittavissa lomakkeissa.
Google Firebase
Googlen tietokantaa käytin sivustolla asiakaspalautteen lähettämiseen ja lukemiseen. Etusivun accordionin sisään piilotin palautelomakkeen, joka kirjoittaa tietokantaan. Kun käyttäjä on lähettänyt palautetta, lomake vaihtuu seuraavaan näkymään:

Linkkiä seuratessa pääsee lukemaan muiden käyttäjien lähettämää palautetta, joka on myös piilotettu accordionin sisään info-sivulla:

Näkymä tietokannassa:

Footer
Sivuston alareunassa on Bootsnipp käyttäjän webenlance kehittämä footer, johon olen tehnyt omia html ja css-muutoksia. Alkuperäinen footer oli lisensoitu MIT-lisenssillä ja se löytyy täältä: http://bootsnipp.com/snippets/1KEEq

Footerin linkit ovat toimivia ja Facebook-linkki johtaa Haaga-Helian facebook-sivulle.

Työseloste

Käyttöliittymän testaus

Kehitysehdotukset

Visuaaliseen ulkoasuun olen tyytyväinen työpöytäkäytössä. Seuraavaksi lähtisin kehittämään responsiivisuutta mobiilissa; esimerkiksi etusivun kuvat ovat turhan suuria kännykän näytöllä, eivätkä täysin keskellä ruutua. Sama pätee myös, kun ollaan työpöytäkäytössä ikkunassa, joka on kooltaan puolet 1920x1080px näytön koosta tai pienempi.
Tietokoneet sivun kategorianavigointipalkki saisi myös mennä vaakasuoraan pienemmällä näytöllä.
Olennaistahan palvelun toimivuuden kannalta olisi kehittää ostoskori ja tuotteiden lisääminen sinne toimivaksi kokonaisuudeksi. Tätä aihepiiriä ei kuitenkaan käsitelty Digitekniikat-kurssilla, vaan se vaatisi käsittääkseni laajempaa tietokanta/palvelinohjelmointia, jota en ICT-infrastruktuuripuolen opiskelijana osaa toteuttaa. Muutenkin olisi huomionarvoista, että vastaava verkkokauppa toteutettaisiin hyvin todennäköisesti CMS-alustaan päälle. Tässä tapauksessa tällainen staattinen sivusto voisi olla vielä melko hallittavissa, koska tuotteita on hyvin vähän. En kuitenkaan oikeasti lähtisi rakentamaan oikeaa verkkokauppaa ilman WordPressin kaltaista sisällönhallintajärjestelmää.

Toimivuus eri selaimilla

Sivuston kehitysvaiheissa testasin sivustoa pääasiassa Google Chromella, mikä johti siihen, että loppuvaiheilla huomasin, että muutamat visuaaliset elementit linkkien kohdalla eivät toimikaan täysin samalla tavalla esimerkiksi Firefoxissa ja Edgessä. Minulla ei ole nyt aikaa enää korjata niitä eroavaisuuksia, mutta korjasin ongelman ainakin Firefoxista. Chromella ja Firefoxilla testatessa pitäisi siis näkyä oikein. Edgessä saattaa näkyä Tietokoneet-sivun navigointipalkissa alleviivaus, vaikka näin ei kuulu olla. Käymättömien linkkien värit saattavat myös vaihdella Edgen ja kahden muun selaimen välillä.