Skip to content

WV-H11 - Kurssin lopputyö

Kurssin arviointi perustuu tähän lopputyöhön. Harjoitustyö voi olla jonkinlainen verkkosivusto/palvelu, joka tuotetaan Gitlabin Pages toiminnon avulla valmiiksi verkkosivuksi. Dokumentaatio tulee olla Gitlab-repositorion wikissä tai .md tiedostona. Raportissa tulee pohtia seuraavia asioita:

  • Resursointi (ajankäyttö)
  • Teknologiavalinnat perusteluineen
  • Yleisiä mietteitä työn kulusta ja mitä tuli opittua
  • Arvosana-ehdotus itselle, perusteluineen

Kurssilla minimivaatimus on ottaa käyttöön jokin CSS-kirjasto tai framework ja toteuttaa responsiivinen verkkosivu käyttäen GIT versiohallintaa. Sivuston tulee löytyä Gitlab-repositoriosta joka toimii Gitlab Pagesin avulla myös suoraan verkkosivuna. Vitosen työssä tarvii verkkosivuston olla jo kattava, toteutuksen oltava visuaalisesti näyttävä ja sisältää edistyneitä teknologioita.

Mikäli et ole viikkoharkoissa vielä käyttänyt GIT:iä, Gitlabia ja sen Pages toimintoa, aloita suoraan sen opiskelusta ennenkä lähdet sivustoa toteuttamaan! GIT-versionhallinta on jatkoa ajatellen aivan ehdoton työkalu osata. Gitlab Pagesin käyttöönottoon löytyy kurssisivulta videotutoriaaleja.

Muista kysyä opettajalta välikommentteja, että tiedät mihin suuntaan ollaan menossa!

Arvioinnissa katsotaan erityisesti:

  • Kirjastojen/frameworkkien järkevää käyttöä
    • Onko kirjaston elementit ollut kehityksessä alusta asti, vai onko kirjasto lyöty valmiin sivuston päälle ja otettu nopeasti pari elementtiä käyttöön
    • Teknologinen haastavuus
  • Responsiivista toteutusta
    • Opettaja katsoo kuinka sivusto venyy ja paukkuu eri selaimilla, myös IE:llä emuloiden vanhempia IE versioita!
    • Muista mobile first periaate!
  • CSS-esiprosessorin käyttö
    • Kolmosen työstä lähtien pitäisi käyttää CSS-esiprosessoria (SASS/LESS)
    • Onko käyttö edistyksellistä, hyödyttikö se vrt. normaali CSS
  • Visuaalisuus
    • Kuvat
    • Animaatio
    • Typografia
  • Sivuston performancea
Arvosana Tavoitteet Esimerkkitekniikoita
5 Haastava toteutus joka on näyttävä ja skaalautuu hyvin eri alustoille. Toteutus sisältää staattisen visualisoinnin lisäksi myös animaatiota. Omaa SVG-grafiikkaa on hyödynnetty. Sisältää jo käyttöliittymäsuunnittelua. Esiprosessorin käyttö on edistynyttä (modulaarisuus, muuttujat..). Hyvä selaintuki. Raportoinnissa opiskelija osaa vertailla ja perustella valintojansa. Verkkokauppasivusto, Bootstrap/Bulma, Flexbox, NodeJS + NPM, taskrunner (gulp, webpack), SASS/LESS, Google Material Design, GIT, etc.
4 Näyttävä toteutus joka skaalautuu hyvin eri alustoille. Toteutus sisältää staattisen visualisoinnin lisäksi myös animaatiota ja käyttöliittymääkin on mietitty. Omaa SVG-grafiikkaa on hyödynnetty. Hyvä selaintuki. Opiskelija on käyttänyt CSS-esiprosessoria. Raportoinnissa opiskelija osaa vertailla ja perustella valintojansa. Verkkokauppasivusto, Flexbox/Grid, Bootstrap/Bulma, Google Material Design, SASS/LESS, GIT
3 Näyttävä toteutus joka skaalautuu hyvin eri alustoille. CSS-esiprosessori otettu käyttöön. Portfoliosivu, Bootstrap/Bulma, SASS/LESS, Flexbox/Grid, GIT, etc.
2 Yksinkertainen toteutus jossa on visuaalisuutta jo mietitty. Skaalautuu välttävästi. Tukee yleisimpiä selaimia hyvin. Yksinkertainen portfoliosivu, css-kirjaston elementtejä muokattu omanlaiseksi, GIT
1 Yksinkertainen toteutus, jossa käytetty valmiita elementtä copy-pastella. Skaalautuu välttävästi. Huono selaintuki. CSS-kirjaston vakioelementit muokkaamatta, GIT

Taulukon arvostelu suuntaa-antava. Opettajalta saa kysyessä arvion mihin suuntaan työ on kehittymässä. Voit kompensoida sivuston sisällön määrää näyttävyydellä ja haastavilla tekniikoilla. Esim. portfoliosivustakin voi saada vitosenkin, mikäli on esimerkiksi toteuttanut paljon animoitua ja näyttävää svg-grafiikka!