October 24, 2020
  • 11:10 pm Microsoft 365 – Salasanan resetointi itsepalveluna (SSPR)
  • 9:12 pm Exchange Online – Roskapostin estäminen top-level domainin (TLD) perusteella
  • 11:26 pm Windows 10 – Fiddler Web Debugger Proxyn asennus ja käyttöönotto
  • 3:00 am Microsoft 365 -käyttäjätilin kaappaamiseen reagointi – Tilanteen normalisointi
  • 12:40 am Microsoft 365 -käyttäjätilin kaappaamiseen reagointi – Tilin turvaaminen

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.
navigointi
Navigointipalkissa on myös käytetty paljon Bootstrapin Glyphiconeja: http://getbootstrap.com/components/.
Pienellä näytöllä navigointi menee oikeassa reunassa olevan painikkeen alle:
navigointimobiili
Slideshow
Etusivun slideshow on tehty Bootstrapin karuselli elementillä: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp.
slideshow
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/.
grids
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.
wells
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.
accordion
jQuery Tabs
Tuotetietodot on sisällytetty jQueryn tabs-elementtiin, joka on jaettu kahden otsikon alle: https://jqueryui.com/tabs/.
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.
menu
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.
lightbox
Google Map Api
Info-sivulle olen integroinut yhteystietojen viereen Googlen kartta API:n, joka osoittaa automaattisesti Haaga-Helian ammattikorkeakouluun.
kartta
Bootstrap-lomakkeet
Lomakkeita käytin useammassakin kohdassa, mutta info-sivun takuupalautushakemuksen lomake on hyvä esimerkki tilanteesta, jossa olen sisällyttänyt omaa javascriptiä lomakkeeseen.
rma
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:
palautevastaus
Linkkiä seuratessa pääsee lukemaan muiden käyttäjien lähettämää palautetta, joka on myös piilotettu accordionin sisään info-sivulla:
palaute.JPG
Näkymä tietokannassa:
firevase
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
footer
Footerin linkit ovat toimivia ja Facebook-linkki johtaa Haaga-Helian facebook-sivulle.


Työseloste

Käyttöliittymän testaus

lista1

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ä.
selaintesti

Latautumisnopeus

SEOmastering Site speed checker. URL: http://www.seomastering.com/site-speed-checker.php
Pingattava palvelin: myy.haaga-helia.fi/~a1503896
latautumisnopeus

Turvallisuustesti

Sucuri SiteCheck. URL: https://sitecheck.sucuri.net/
turvallisuustesti

Toimivuus mobiilissa

Google mobiililaitesoveltuvuustesti. URL: https://search.google.com/search-console/mobile-friendly?utm_source=mft&utm_medium=redirect&utm_campaign=mft-redirect
mobiiligoogle
Bulk Mobile Friendly Test. URL: http://www.urlitor.com/mobile
mobiilibulk


Lopputulos

dc kuva2


TÄTÄ DOKUMENTTIA SAA KOPIOIDA JA MUOKATA GNU GENERAL PUBLIC LICENSE (VERSIO 3 TAI UUDEMPI) MUKAISESTI. HTTP://WWW.GNU.ORG/LICENSES/GPL.HTML
MARKUS PYHÄRANTA
Markus Pyhäranta

RELATED ARTICLES
LEAVE A COMMENT