Valinnaiset tutkinnon osat: Verkkopalveluiden tuotannon toteuttaminen

Opiskelija tai tutkinnon suorittaja osaa

Suunnitella ulkoasun verkkosivustolle, -palvelulle ja multimediatuotteelle

Yleensä aloitan sivuston suunnittelun hahmottamalla asiakkaan tarpeet ja sivun aiheen päätarpeen.

Onko kyseessä palveluiden myynti, asian ja tiedon jakaminen tai aatteen/ideologian promotointi, henkilökohtainen sivusto vai mikä? Esimerkiksi jos kyseessä on tuote tai palvelu, mallia voi hakea muiden vastaavien palveluiden sivustoilta. Korostetaanko hintaa, ominaisuuksia vai eri malleja tai mallistoja. Tästä muodostuu yleensä asiakkaan kanssa pohtien sivuston navigaatio, mitä olennaista siellä pitäisi olla esillä ja mikä on tärkein elementti, jonka yleensä tulisi olla jo etusivulla. Vai onko etusivulla tärkeintä kenties olla jatkuvasti päivittyvä uutis- ja artikkelinäkymä.

Verkkolehdessämme Korpimaassa tarkoitus oli saada etusivulle runsaasti luettavaa, mutta kuitenkin siten, että navigaatio pysyy mahdollisimman kompaktina. Lähtökohtana oli siis ensisilmäyksellä avautuva niinsanottu runsaudenpula, mutta kuitenkin siten, että etusivulla olisi aina vaihtuva sisältö, eli siinä ei saisi roikkua sama artikkeli edes 2. tai 3. sijalla pitkään. Niimpä etusivulla näkyy vain kolme uusinta artikkelia.

Laatia toteutuksessa tarvittavat suunnitteludokumentit

Työryhmän koosta riippuen suunnittteludokumentti voi olla esimerkiksi Trello-muistiopöytä, kuten olemme käyttäneet Tuhma aikuisten värityskirjan suunnittelussa.  Vähimmillään kahden hengen työtiimissä suunnitteludokumentti on ollut ruutupaperille piirretty näkymä siitä miltä sivuston tulisi näyttää ja varmistus siitä, että molemmat työn suorittajat/tekijät ovat kartalla siitä, mitä lähdetään tavoittelemaan ja että missä esimerkiksi Twitter-feedi, Instagram-kuvat tai sisäänkirjautumispalikka sijaitsevat sivustolla.

Toteuttaa ajanmukaisia standardeja noudattavan verkkosivuston

Nykyään Google ei edes enää näytä hakutuloksissa sivustoja, jotka eivät ole responsiivisia, tai ne ainakin painuvat hakutuloksissa viimeisimmäksi. Responsiiviset sivustot ovat siis ehdoton nykyaikana. On hirvittävää katsella nettisivuja, joitka on ilmiselvästi tehty joskus 90-luvun puolivälissä ja ovat vieläkin olemassa ja joita on päivitelty palapelimäisesti sopimattomilla palasilla vuosien saatossa. Jopa sisältö, kuten esimerkiksi elintärkeät puhelinnumerot ja sähköpostiosoitteet saattavat olla vanhoja. Responsiivisuuden edellytykset saa täytettyä yksinkertaisimmin sillä, että valitsee nettisivuilleen responsiivisen teeman ja testailee sitä vielä itse mahdollisimman monella eri laitteella ja käyttöjärjestelmällä, ennenkuin valitsee kyseisen teeman loppuratkaisuksi.

Hyödyntää ohjelmoinnin perusteita ja erilaisia sivunkuvauskieliä sekä käyttää sivustoeditoria ja sisällönhallintajärjestelmiä

Olemme käyttäneet Adobe Dreamweaveria sivujen teossa, sekä opetelleet Bootstrapin alkeet. Vaikka olen tutustunut html-alkeisiin jo aikaisemmin ennen kouluun tuloa, joten se ei ollut täysin uutta minulle, olisi noita taitoja kuitenkin paras pitää yllä jatkuvalla koodaamisella ja tällä hetkellä minulla ei siihen tunnu olevan oikein aikaa. Olen siis valinnut toimia WordPressin kanssa teemoilla, kuten myös Joomlankin kanssa. Kotona minulla on ilmainen Brackets ohjelma, jolla olen harjoitellut joitakin koodinpätkiä, mutta on kuitenkin todettava, että valmiit teemat ovat kuitenkin niin yksinkertaisia. Koodaria minusta ei tule, joten on parempi keskittyä siihen mitä osaa. Ymmärrän kuitenkin CSS ja HTML-koodeista sen verran, että osaan lisätä sivupohjaan koodinpätkiä, tiedän minne ne sijoittuvat sivustolla ja osaan etsiä virheitä koodista tai käydä muokkaamassa valmista koodia värin, marginaalien, kuvien koon yms. puolesta. Tämä on mielestäni vähimmäisvaatimus myös silloin vaikka toimisikin valmiiden teemojen pohjilta.

Oma blogisivustoni minnamoira.me on tehty kaksikielisesti Joomla-julkaisujärjestelmällä. Teema on minimalistinen ja kapea ja toimii responsiivisesti. Myönnettäköön, että sivusto ei näytä hirvittävän hyvältä erittäin leveissä näytöissä, mutta en ole vielä päättänyt muutanko sivuston teemaa erilaiseksi. Halusin sivuni olevan selkeästi erilaiset.

Toteuttaa interaktiivisia multimediaelementtejä ja -esityksiä

Flashia ei enää kukaan käytä. Lisäksi pidän itse enemmän simppelistä suunnittelusta. Monilla sivuilla liikkuvalla kuvalla ja äänellä on saatettu leikkiä niin, että sivuston vierailijalle tulee välitön sivustolta poistumisrefleksi. Hyviä esimerkkejä näistä on esimerkiksi Iltalehden ja Ilta-Sanomien järkyttävän suuret mainosbannerit etusivuillaan. Nämä mainosbannerit ovat monesti puolen tietokoneen ruudun kokoisia ja pakottavat sivuilla vierailjan pysähtymään mainoksen eteen. Myös Youtube on ruvennut suosimaan tämän tyyppisiä mainoksia, mikä on puolestaan vähentänyt omaa intoani käyttää kyseistä palvelua. Mielestäni on siis hyvä koittaa pysytellä kohtuudessa ja yksi liikkuva elementti, korkeintaa kaksi, riittää sivustolle. Automaattisesti käynnistyvät taustamusiikit ja pyörimään lähtevät videot ovat myöskin suuria inhokkejani. Toisaalta täytyy muistaa, että keltainen lehdistö pyörii pääasiassa vain mainoksien varassa, joten lukijat hyväksyvät nämä mainokset ja sietävät niitä käyttäessään heidän palveluitaan.

Optimoida sivustojen hakukonenäkyvyyttä

Verkkolehdessämme Korpimaassa käytämme ylimääräistä SEO Yoast pluginia, joka ohjaa kivasti SEO-optimoinnissa liikennevalojen värien mukaisesti. Optimoinnin jälkeen jos valo on vihreä, olet optimoinut artikkelin täydellisesti. Järjestelmän näyttäessä oranssia valoa, olet jättänyt jotakin olennaista tekemättä ja valon ollessa punainen hakukoneoptimointi on erittäin huonoa, tai sitä ei ole ollenkaan. Sivustolle itselleen voi määritellä oman hakukoneoptimoinnin, mutta lisäksi optimoinnin voi tehdä artikkelikohtaisesti. Ohessa kuva erään artikkelin (Tume Fishing tmi, vaapun tekoa) hakukoneoptimoinnin kuvakaappaus.

Hakukoneoptimoinnin voi tehdä suoraan koodiinkin, mutta WP´tä ja Joomlaa käytettäessä hakukoneoptimoinnille varatut kohdat löytyy suoraan järjestelmästä, tai kuten tässä, WP:n lisäosan avulla.

Joomlassa on oma paikkansa hakukoneoptimointiin artikkelin lisäominaisuuksissa, publishing-välilehdellä. Hakusanat ja artikkelin kuvauks voidaan syöttää suoraan tänne.

Lisäksi hakukonejätti Googlea voi houkutella tarttumaan juuri sinun artikkeliisi linkittämällä artikkeliin jo pysyviä, hyviä, jo kauan olemassaolevien sivustojen linkkejä. Näitä ovat tietenkin jo pitkään toimineet www-alkuiset sivustot kuten www.helsinginsanomat.fi, www.koti-kajaani.fi, www.mol.fi, tai www.kela.fi, vain muutamia esimerkkejä mainitakseni.

Kuten tuossa WP-esimerkissä, herjaa SEO plugin sitä, ettei päähakusanaksi määritelty Tume Fishing esiinny artikkelin otsikossa. Otsikoinnin vapautta ylläpitääksemme olemme jättäneet otsikon kuitenkin sellaiseksi kuin se on. Lisänäkyvyyttä Googlessa saa myös käyttämällä aukikirjoitettuja, usein haettuja fraaseja. Tässä tapauksessa esimerkiksi kyseisessä artikkelissa voisi käyttää lausetta: “kuinka teen hyvän vaapun?” ja käyttää tuota lausetta myös artikkelitekstissä ja vastata kysymykseen siinä. Lisäksi kysymys olisi hyvä olla myös artikkelin URL-tiedoissa. Tämä ainakin silloin, kun koko artikkelin nimenomaan käsittelee ko. aihetta. Tämä kyseinen artikkelin ainakin nappautuu hakuun Tume Fishing. Sitä voi vaikka kokeilla itse Googlen haussa, jolloin itse Korpimaa verkkolehti tulee kolmanneksi ja artikkeli neljänneksi suoraan Tume Fishing – yrityksen omien sivujen jälkeen.

Käsitellä ja optimoida kuva-, teksti-, video- ja äänimateriaalia verkkoon soveltuvaksi

Tätä osaamista olen osoittanut muissa tämän näyttötutkinnon osissa. Lisäksi kuvien optimoinnista sen verran, että olen sopinut sivustokohtaisesti aina itsekseni, että minkäkokoisena suunnilleen kuvat ko. sivustolle vien. Esimerkiksi tässä portfoliossa olen pyrkinyt pitäytymään max 300 px levyisissä pikkukuvissa/thumbnaileissa, ja nämä kuvat linkittämään sitten 1000/1200 px leveisiin kuviin. Suurempia kuvia ei mielestäni kannata laittaa sivustoille, latauksen optimoinniksi. WP-pohjaisissa sivuissa järjestelmä pienentää itse kuvat, mutta jättää ne mielestäni kuitenkin turhan isoksi. WP:ssä käytän yleensä max 450 px levyisiä kuvia, toisen sivun annan itsekseen tulla sen kokoiseksi kun se automaattisesti skaalautuu kun mittasuhteet säilytetään.

Jos käyttää paljon esim. videomateriaalia sivuillaan, kannattaa ehdottomasit käyttää jo olemassaolevia palveluita, kuten Youtube tai Vimeo, jotka ovat näihin palveluihin erikoistuneet. Heidän sivujensa kautta videot voi upottaa omille sivulle ja koska he ovat erikoistuneet videopalveluihin, voi olla melko varma, että videot on aina saatavilla heidän sivustojensa kautta ja striimauslaatu on hyvälaatuista, riippuen toki omasta nettiyhteydestä.

Samoin suosittelen laajojen kuvagalleroiden ylläpitoa ulkoisessa palvelussa, kuten Flicr, Smugmug etc. josta ne saa koodilla upotettua tai linkattua omille sivuille.

Valmistella aineistoja julkaisukanavan laatuvaatimusten mukaisesti ja toimia eettisesti oikein valmistaessaan aineistoja

Tästäkin olen puhunut muissa näyttötutkinnon osioissa ja mielestäni tämä on minulla hallussa. Julkaisukanavien käyttöohjeet ja käyttöehdot kannattaisi aina lukea, mutta käytännössähän ne jää monelta, jopa minulta lukematta.

Jos tekee luovaa työtä, on jokaisen tekijän interesseissä, että tekijänoikeuksia ja hyvää tapaa noudatetaan. Pyrin käyttämään omaa kuvamateriaalia töissäni ja mikäli sitä ei ole saatavilla, käytän ehdottomasti luotettavia kuvapankkeja tai ostan kuvat käyttööni. Olen ruvennut rakentamaan itselleni omaa työssäni käytettävää kuvapankkia. Kaikilta kuvissa olevilta henkilöiltä pyydetään kuvien julkaisulupa ja kerrotaan minkälaisessa yhteydessä kuvia mahdollisesti voidaan käyttää.

Ottaa huomioon käytettävyyden ja esteettömyyden periaatteet suunnittelussa ja toteutuksessa

Kannattaa pitäytyä yleisissä sovelluksissa, helppokäyttöisissä ja yleisesti tunnetuissa järjestelmissä. Lisäksi kannattaa pitäytyä myös yleisesti hyväksyhavaituissa tavoissa tehdä sivuja. Valitettavasti en ole päässyt tekemään sivuja näkö- ja kuulovammaisille, mutta heillekin voi siis tehdä räätälöityija sivuja. Esimerkiksi niinkin yksinkertainen juttu, kuin mahdollisuus suurentaa tai pienentää sivun tekstin kokoa, auttaa osittain näkövammaisen lukukokemusta huomattavasti.

Käyttää yleisimpiä median jakelumenetelmiä

Olen jakanut tekemiäni videoita tikulla, pilvipalvelun kautta, sekä videopalveluiden Youtube ja Vimeo-palveluiden kautta asiakkaalle ja yleiseen jakeluun. Lisäksi Facebookin videolla on eri vaatimukset. Vimeo rajoittaa videoiden kokoa megatavuissa, Youtube puolestaan videoiden pituutta. Nämä vaihtelevat palveluittain, ja palvelut myös itse vaihtavat käyttöehtojaan, yleensä löysentävät käyttöehtojaan tekniikan ja varastotilan kehittyessä. Näistä palveluista Youtube lienee helppokäyttöisin, sillä palvelu tarjoaa itsessään videon ediointimahdollisuutta, sekä ns. pika-korjaus vaihtoehtoa esim. tärisevään kuvaan.

Kuville on vastaavia palveluita kuten Flickr ja Smugmug. Musiikkia tekevät yleensä käyttävät Soundcloud tai Myspace-alustoja.

Hakea ohjeita teknisiin ongelmiin

Tähän sanoisin vain, että Google knows everything. Googlettamalla suomeksi ei varmasi ihan kaikesta maan ja taivaan välisistä asioista löydy tietoa, mutta viimeistään englanninkielellä löytyy materiaalia, ohjevideoita, tutorialeja jne. aiheesta kuin aiheesta. Lisäksi voi aina rekisteröityä aihepiiriä käsittelevän foorumin käyttäjäksi ja pyytää muilta harrastelijoilta tai asiantuntijoilta apua juuri omalle kohdalle sattuneeseen pulmaan.

Optimoida verkkosivujen latautumisaikoja ja toimivuutta eri käyttöympäristöissä

Sivut voi pitää kevyenä ja nopeastilatautuvana rajoittamalla plugineiden eli lisäosien liiallista asentamista ja käyttämällä liikkuvaa kuvaa ja ääntä kohtuudella. Lisäksi mainoksia jne. ei kannata pakata heti etusivulle massiivisen paljon. Jos nettisivun kaikkien palikoiden lataamisessa alkaa mennä 5 sekuntia enemmän aikaa, ei käyttäjä enää siinä vaiheessa ole kiinnostunut jatkamaan sivustolle siirtymistä, vaan voi kärsimättömänä napsauttaa selaimen ruudun kiinni.

Nykyään selaimet toimivat onneksi hyvin pitkälti samalla tavalla ja ainakin kolme yleisintä selainta testattuaan, voi olla melko varma, että suurin osa omalla sivulla vierailijoista näkee sisällön juuri sillä tavalla kun se on tarkoitettu nähtäväksi. Suurimmat ja tunnetuimmat verkkoselaimet tällä hetkellä ovat Internet Explorer, Mozilla ja Googlen Chrome. Näistä yleisin on Chrome 49% markkinaosuudellaan.

Julkaista ja toimittaa työn asiakkaan tarpeet huomioiden

Asiakkaan kanssa yhdessä sovitaan verkkojulkaisulle määräaika ja sitä kannattaa pyrkiä noudattamaan. Sekä WP:ssä ja Joomlassa on toiminto, joita käyttämällä sivustot voi tehdä valmiiksi milloin haluaa, ilman että sivustoa tarvitsee julkaista välittömästi. Lisäksi molemmissa julkaisualustoissa on artikkeleiden ennakkoajastusmahdollisuus, jolloin artikkeli julkaistaan ennaltamäärätyn ajankohdan mukaisesti, ajoitettuna aikana.

Toimia eettisesti käsitellessään ja julkaistessaan aineistoja

Olemme käyneet läpi tekijänoikeudet koulussa. Pyrin käyttämään omia kuvia ja asiakkaan omaa materiaalia niin pitkälti kun se on mahdollista. Jos tekstejä lainataan jostakin muualta, silloin on asianmukaista linkata alkuperäinen artikkeli tai mainita mistä sisältö on saatu.

ITSEARVIOINTI täällä.

This post has already been read 456 times!