Sari Nieminen

Avat 2014-2015

PROJEKTIDOKUMENTAATIO

RR Site Service Oy

1 ASIAKKAAN ESITTELY ........................................................... 4

1.1 RR Site Service Oy ........................................................... 4

1.2 Tarvekartoitus ................................................................. 4

1.2.1 Muita projekteja ....................................................... 5

1.3 Aikataulutus .................................................................... 6

1.4 Sopimukset ..................................................................... 6

2 SIVUSTON LUONTI ............................................................... 7

2.1 Rakenne ......................................................................... 7

2.2 Layout ............................................................................ 7

2.3 Navigointikaavio ............................................................. 11

2.3.1 Englanninkielinen navigointi ..................................... 12

2.4 Yhteystiedot ................................................................... 12

3 SIVUSTON TYYLIMÄÄRITYKSET ............................................. 13

3.1 Sivuston kokomääritykset ja responsiivisuus ...................... 13

3.2 Värit ............................................................................. 14

4 SIVUJEN SISÄLTÖ ............................................................... 15

4.1 Etusivu eli Index ............................................................. 15

4.2 Tekstit ........................................................................... 15

4.3 Kuvat ............................................................................ 16

4.3.1 Kuvien käsittely ...................................................... 16

5 TOTEUTUS .......................................................................... 17

5.1 Toteutusmenetelmän valinta ............................................ 17

5.2 Esivalmistelut ................................................................. 17

5.3 Template ....................................................................... 18

5.4 Sivuston luominen .......................................................... 19

5.5 Kaksikielinen navigointi ................................................... 20

5.6 Lomake ......................................................................... 21

6 PROJEKTISUUNNITELMA ....................................................... 22

6.1 Projektin eteneminen ...................................................... 22

6.1.1 Vanhan sivuston siirto ............................................. 22

6.1.2 Sähköpostit ............................................................ 23

6.2 Projektin alustava aikataulutus ......................................... 23

6.3 Projektikaavio ................................................................ 24

6.4 Toteutunut aikataulu ....................................................... 24

7 TESTAUS ............................................................................ 25

7.1 Selaimet ........................................................................ 25

7.2 Eri laitteet ...................................................................... 25

7.3 Muu testaaminen ............................................................ 25

8 KUSTANNUSLASKELMA ........................................................ 26

8.1 Kustannuslaskelmat ........................................................ 26

9 PÄIVITTÄMINEN JA SIVUSTON SIIRTO ................................... 27

9.1 Päivitysten sopiminen ja aikataulu .................................... 27

9.2 Sivuston siirto ................................................................ 27

10 TEKIJÄNOIKEUDET ............................................................ 27

10.1 Sertifikaatit ................................................................. 27

10.2 Kuvat ......................................................................... 28

11 YHTEENVETO .................................................................... 28

11.1 Omat huomiot ............................................................. 28

11.2 Asiakkaan kommentit ................................................... 30

4

1 ASIAKKAAN ESITTELY

1.1 RR Site Service Oy

RR Site Service oy on Eurajokelainen yritys, joka toimii telakka-,

voimala- ja laivanrakennusalalla palvellen yrityksiä suunnittelu-,

valvonta-, testaus- ja tarkastusasioissa. Yritys hoitaa kotimaisia

(48%) ja ulkomaisia (52%) projektinjohdollisia töitä kaikilla yllä

mainituilla osa-alueilla. Yrityksessä toimii tällä hetkellä 14

työntekijää.

1.2 Tarvekartoitus

Ensimmäisellä tapaamisella 7.11.2014 tutustuin asiakkaan tarpeisiin

ja ennen kaikkea toiveisiin. Keskusteluissa tiedustelin heidän

ajatuksistaan, mikä on ollut hyvää vanhoilla sivuilla ja missä löytyy

parantamisenvaraa tai löytyykö sivustoilta kenties joitain puutteita.

Keskusteluissa kävi ilmi, että vanhat sivut jotka ovat vuodelta 2007,

ovat auttamattomasti jääneet vanhanaikaisiksi. Sivuilla on liikaa

vanhaa tietoa, joka on palvellut hyvin tuolloin markkina-aseman

saavuttamista. Nyt tietoisuuden levittyä yrityksestä ja tunnettuuden

tietyissä asiakaspiireissä jo saavutettuaan, yritys haluaa suunnata

tulevaisuuteen ja kertoa, sekä uusille että vanhoille asiakkailleen,

mitä heillä on tarjottavana tulevaisuudessa. Sivujen pitäisi pysyä

valideina seuraavat kaksi vuotta minimissään.

5

Sovimme että vanha logo säilytetään, sillä uusi aiheuttaisi kaikkien

materiaalien uusimisen.

Kuva 1 / RRSS Oy logo

Sivuille tulee kaksi erilaista täytettävää kaavaketta. Toinen

suuntautuu rekrytointiin, jossa työnhakijat voivat jättää omat

tietonsa, sekä ansioluettelonsa. Toinen kaavake on tarkoitettu

potentiaalisten uusien asiakkaiden käyttöön. Siinä asiakas voi jättää

yhteydenottopyynnön

RR Site Servicen asiakkaista suurin osa tulee kaikkialta maailmasta.

Tällä hetkellä asiakkaita on esimerkiksi Kiinasta, Venäjältä,

Yhdysvalloista ja Norjasta. Suunnittelussa tämä kaikki on hyvä ottaa

huomioon, jotta sivut miellyttäisivät esteettisesti laajaa kirjoa

kansalaisuuksia. Se tuo myös hieman vaikeusastetta suunnittelulle.

1.2.1 Muita projekteja

Projektin edetessä sain tehtäväkseni myös Powerpoint esityksen

päivittämisen, esitteen tekemisen ja lomakkeiden päivityksen.

Asiakas toivoi, että koko yrityksen ilme ja heidän käyttämänsä

tuotteet olisivat kaikki yhdenmukaisia uuden sivuston kanssa.

6

1.3 Aikataulutus

Projektin alustavaan suunnitteluun käytin runsaasti aikaa projektin

ollessa todella laaja. Pidimme 5 suunnittelukokousta ennen sivuston

koodaamisen aloittamista. Kokouksissa kävimme läpi yrityksen

tarpeet, kohderyhmät, tekstit ja tekstien laatimisen jakamiset,

sisältöä, valokuvia, navigoinnin rakennetta ja ulkoasusuunnittelua.

Suunnittelun tein syksyllä 2014 ja sivujen varsinaisen valmistamisen

maalis-huhtikuussa 2015. Projekti jatkuu vielä kesäkuulle asti

asiakkaideni työkiireiden johdosta.

1.4 Sopimukset

Sovimme kirjallisesti, että minä teen kaiken sivustoon kuuluvan

suunnittelun. Heiltä saan tekstit, jotka editoin sivustolle sopiviksi

verkkotekstiksi. Samoin saan valokuvat ulkomaisista kohteista.

Ainoat valokuvat otin hallilta ja toimistolta Eurajoella.

Sivustolle teen muutamia osioita, joita he voivat itse päivittää.

Itsepäivitettäviä osioita ovat uutiset ja referenssien lisääminen.

Näihin kirjoitan selkeät ohjeet ja käyn myös kouluttamassa

paikanpäällä. Suuremmat päivitykset, kuten kuvien vaihto tai sivujen

mahdollinen lisäys pyydetään minulta erikseen.

7

2 SIVUSTON LUONTI

2.1 Rakenne

Sivuston navigointirakenne täytyy pitää erittäin helppona ja

ymmärrettävänä. Rakenteessa ja muussakin suunnittelussa on

otettava huomioon hyvin erilaiset käyttäjäryhmät yrityksen

asiakkaiden tullessa ympäri maailmaa. Mobiilikäyttäjät on myös

otettava huomioon.

2.2 Layout

Etusivun ulkoasulla pyrin tekemään potentiaalisille asiakkaille heti

mahdollisimman selväksi, mitä yritys tekee ja ketä se palvelee.

Kuvilla tämä onnistuu helpoiten. Kuvat puhuvat enemmän kuin tuhat

sanaa, varsinkin kun netissä ensivaikutelma on tehtävä parin

sekunnin sisällä.

Etusivu on edellä mainitusta syystä kuvitettu mahdollisimman paljon.

Kaikista osa-alueista löytyy heti ymmärrettävä kuva yhdistettynä

kiteytettyyn otsikkoon. Kuvat valitsin myös niin että ne sopivat

yrityksen omiin väreihin (sininen ja oranssinkeltainen) ja korostavat

niitä sopivalla tavalla.

Ensimmäiset ulkoasusuunnitelmat tein Illustratorilla. Navigoinnin

havainnollistamiseksi tein jokaisesta sivusta A4 suunnitelman ja

esittelin sivut kansiorakenteena. Näin pystyimme karsimaan myös

turhat sivut pois ja yksinkertaistamaan rakennetta

käyttäjäystävälliseksi.

8

Kuva 2 / Sivujen mitat

ETUSIVU

Logo Logoalue Teksti

960x110 250x55

Navi Navi Navi 940x30

Taustakuva Tekstialue

940x420 560x245

TEKSTIÄ

Kuva Kuva Kuva

220x165 220x165 220x165

Teksti Teksti Teksti

220x175 220x175 220x175

Sertifikaattialue 940x100 link link

70x50 70x50

Alatunniste 1020x35

ALASIVUT

Logo Logoalue Teksti

960x110 250x55

Navi Navi Navi 940x30

Alanavi tekstialue

220xkork 720x480

marg. marg.

20px 20px

kuva kuva kuva

230x165 240x165 230x165

teksti teksti teksti

230x100 240x100 230x100

space kork.30

alatunniste 1020x35

9

Kuva 3 / Ensimmäinen layout malli

Ensimmäinen ulkoasumallini ei edennyt etusivua kauemman vaan

hylkäsin sen alkuvaiheessa. Asiakastapaamisen jälkeen, jossa asiakas

kertoi minulle toiminnastaan, kiteytin heidän osaamisalueensa

neljään, joten layout ei olisi toiminut tässä tilanteessa. Malli antoi

kuitenkin hyvän suunnan uudelle layout mallille ja sille miten tulisin

käyttämään paljon kuvia ja 12 kolumnin gridiä responsiivisessa

suunnittelussa.

Kuva 4 / Toinen layout malli

10

Toinen malli päätyi asiakkaalle, jonka he hyväksyivät. Heidän

mielestään ulkoasu on menossa juuri siihen suuntaan kuin pitikin:

modernimpi, kertovampi ja visuaalisesti mielenkiintoinen.

Muutoksia tuli teksteihin ja otsikkoihin. Niitä piti tarkentaa, mutta

suuntaviivat olivat oikeat. Yhteystiedot siirrän siniseen osaan ja

valkoinen alue alhaalla jää sertifikaateille ja yhteydenotto- sekä

rekrytointilinkeille.

Sivuston ulkoasu vaihtui hieman vaaleammaksi ja väljemmäksi

koodauksen alettua. Myöhemmissä tapaamisissa sovimme vielä

lisättäväksi sivut halli ja sertifikaatit, sekä poistimme kohteet -sivun

ja yhdistimme sen referensseihin.

11

2.3 Navigointikaavio

Kuva 5 / Navigointikaavio

ETUSIVU ETUSIVUN YLÄNAVI PALVELUT -sivu

Sisältö: - PALVELUT aukeaa sivulle:

- REFERENSSIT - TARKASTUSTOIMINTA JA TESTAUS

PALVELUT - SERTIFIKAATIT muita alasivuja

luettelona ja linkki sivulle - HISTORIA - PROJEKTIHALLINTA

- TARKASTUSTOIMINTA - REKRYTOINTI - PROJEKTISUUNNITTELU

- TESTAUS - YHTEYSTIEDOT - HALLI

- PROJEKTIHALLINTA

- PROJEKTISUUNNITTELU REFERENSSIT -sivu

aukeaa sivulle:

- REFERENSSIT

highlights kuvalla (4kpl) - joka listaa kaikki kohteet

-LAIVANRAKENNUS muita alasivuja:

- TEOLLISUUSRAKENTAMINEN - LAIVANRAKENNUS

- OFFSHORE - TEOLLISUUSRAKENTAMINEN

- VOIMALAITOKSET - OFFSHORE

- VOIMALAITOKSET

ALATUNNISTE - KARTTA

Sertifikaattien logot

joista linkit: SERTIFIKAATIT -sivu

- SERTIFIKAATIT sivulle aukeaa sivulle:

- SERTIFIKAATIT

NAPIT linkit sertifikaattien myöntäjien

OTA YHTEYTTÄ sivuille

josta linkki: ei alasivuja

- YHTEYSTIEDOT -sivulle

ja siellä yht.otto.lomake HISTORIA -sivu

aukeaa sivulle:

REKRYTOINTI - HISTORIA

josta linkki: ei alasivuja

- REKRYTOINTI -sivulle

ja siellä rekry lomakkeeseen

REKRYTOINTI -sivu

aukeaa sivulle:

- REKRYTOINTI

sivulla on lomake

ei alasivuja

YHTEYSTIEDOT -sivu

RR SITE SERVICE OY aukeaa sivulle:

NAVIGOINTIKAAVIO - YHTEYSTIEDOT

kaikki nimet luetteltuna

kuva? Puh.nro, s-posti

ei alasivuja

12

Navigointikaavioon tuli vielä loppuvaiheessa uusi sivu ”uutiset”.

Tähän sivuun lisättiin nappi alatunnisteeseen rekrytoinnin ja

yhteydenotto napin lisäksi. Muita lisäyksiä olivat pdf-dokumentit

sertifikaateista, jotka linkitin alatunnisteen sertifikaattien logoista ja

sertifikaatti-sivun teksteistä aukeamaan omille sivuilleen.

2.3.1 Englanninkielinen navigointi

Käänsin kaikki suomenkieliset sivut englanniksi, ja tein jokaista

suomenkielistä sivua vastaavan englanninkielisen sivun. Jotkut

sivuista tulivat molempien kielten käyttöön, mutta niistä myöhemmin

Joomlan yhteydessä.

2.4 Yhteystiedot

Yhteystietosivuilta sovittiin poistettavaksi faksinumero. Kerroin

asiakkaalle, että sivuille saisi enemmän persoonallisuutta ja tekisi

yrityksestä helposti lähestyttävän, laittamalla jokaisesta henkilöstä

myös kuva yhteystietojen viereen. Näin on helppo tunnistaa ihminen

seuraavalla tapaamiskerralla.

Valokuvista tuli ristiriitaisia kommentteja, eivätkä kaikki olleet

valmiita laittamaan kuvaa sivulle. Ehdotin, ettei kuviksi laitettaisi

passikuvia vaan sellaisia, joissa jokainen olisi oman työnsä touhussa.

Tämä kuva kertoisi asiakkaille myös enemmän kuin pelkkä passikuva.

Kuvista tuli kuitenkin osalle ylitsepääsemätön asia, joten päätimme

jättää kuvat pois.

Yhteystieto-sivulle laitoin Google-kartan.

13

3 SIVUSTON TYYLIMÄÄRITYKSET

3.1 Sivuston kokomääritykset ja responsiivisuus

Päätin tehdä sivustosta responsiiviset, koska sivujen on kestettävä

aikaa ja responsiivisuus on kuitenkin tulossa kovaa vauhtia. Minun oli

otettava myös huomioon että sivuja katsellaan paljon erikokoisilla

näytöillä, ja niiden tulee näyttää yhtä hyviltä, oli näytön koko mikä

tahansa.

Kuva 6 / Esimerkki toisesta sivusta

14

3.2 Värit

Yrityksen värit on määritelty jo alkuperäisen logon

suunnitteluvaiheessa ja joista sain erinomaiset tulosteet ja ohjeiston.

Kuva 7 / RR Site Service värit

Määriteltyjen värien lisäksi sivuille tulee taustaväriksi harmaa.

15

4 SIVUJEN SISÄLTÖ

4.1 Etusivu eli Index

Etusivusta tein erilaisen muihin sivuihin nähden. Etusivun tulee

mielestäni olla visuaalisesti kiinnostavampi ja herättää asiakkaitten

mielenkiinto yritystä kohtaan. Etusivulta on myös heti käytävä

selväksi, mitä yritys tekee.

4.2 Tekstit

Tekstit ovat erittäin teknisesti painottuneita ja spesifisiä, joten

tekstien pohjat tulevat RR Site Servicen johdolta ja työntekijöiltä.

Kokouksessa jaoimme tekstien kirjoitustaakkaa hieman. Lähetin

muutamille työntekijöille kokousmuistion, jossa jaoimme

kirjoitusvastuuta ja jossa nimesimme mahdolliset tekstien kirjoittajat.

Tekstien editointi verkkoon jäi kuitenkin minun huolekseni.

Tekstien hiominen vei runsaasti aikaa. Kävimme tekstejä läpi monissa

tapaamisissa.

Editoin historia-sivun tekstin verkkotekstin muotoon ja lisäsin

väliotsikot lukemista helpottamaan.

Sivusto täytyy myös olla englannin kielisenä. Huolehdin sivuston

kääntämisestä itse.

16

4.3 Kuvat

Suurin osa kuvista löytyi Juha Rinteen ja Pekka Rajalan omista

arkistoista. He olivat ottaneet paljon kuvia työmaakohteista ympäri

maailmaa. Osa kuvista tuli yhteistyökumppaneilta, joilta luonnollisesti

kysyttiin myös lupa kuvien käyttöön.

Minua pyydettiin ottamaan valokuvia Eurajoella sijaitsevasta hallista

ja sen toiminnasta sekä toimistolta.

4.3.1 Kuvien käsittely

Käsittelin kaikki kuvat oikeaan kokoon ja tallennusmuotoon, ennen

kuin laitoin ne sivustolle. Kuvia tuntui olevan paljon, mutta loppujen

lopuksi hyvänlaatuisia vähän. Esimerkiksi banneri tekemiseen sopivan

kokoista ja terävää kuvaa oli vaikea löytää.

Banneriin tekemäni kuvan käsittelin ja muokkasin Photoshopilla ja

tekstit Illustratorilla. Myös vanha logo kaipasi käsittelyä kokonsa

puolesta ennen sivustolle päätymistä. Mainostoimistolta saamani

materiaali oli hienosti tallennettu myös ai-versiona.

17

5 TOTEUTUS

5.1 Toteutusmenetelmän valinta

Toteutusmenetelmäksi valitsin Joomlan, koska sillä on helpompi

toteuttaa eritasoon tulevia navigointeja ja sillä on helppo pitää

kasassa suurempaa sivustoa. Asiakas toivoi myös pääsevänsä itse

päivittämään joiltain osin sivustoaan, ja Joomlalla pystyn

toteuttamaan tämän toiveen.

5.2 Esivalmistelut

Ennen kuin aloitin Joomlalla sivujen kokoamisen, tein hyvin tarkat

suunnitelmat kategorioista, sivuston rakenteesta ja tarvittavista

moduuleista. Tämä helpotti huomattavasti laajan sivuston

kokoonpanoa ja navigoinnin tekemistä.

18

Kuva 8 / Joomla rakenne (suomeksi)

5.3 Template

Ensiksi minun oli löydettävä sopiva template sivuston pohjaksi,

tekemieni layout suunnitelmien pohjalta. Templaten etsimiseen

minulta meni suhteellisen pitkä aika. Templaten käytettävyys ja

joustavuus pitää ensin tarkistaa perusteellisesti.

JOOMLA

Tarvittavat kategotiat Tarvittavat sivut Tarvittavat modulit

PÄÄKATEGORIAT ETUSIVU Logo

- FIN

- ENG PALVELUT ETUSIVULLE

- TARKASTUSTOIMINTA - laivanrakennus

MUUT - TESTAUS - teollisuusrakentaminen

- yhtiö - PROJEKTIHALLINTA - offshore

- company - PROJEKTISUUNNITTELU - voimalaitokset

- palvelut - HALLI

- services REFERENSSIT FOOTER

- referenssit - LAIVANRAKENNUS - yht.tiedot

- references - TEOLLISUUSRAKENTAMINEN - sertifikaatti 1

- OFFSHORE - sertifikaatti 2

- VOIMALAITOKSET - rekry ym. Nappulat

- KARTTA

Kartta

SERTIFIKAATIT

Language switcher

HISTORIA

REKRYTOINTI

YHTEYSTIEDOT

Lisätty jälkeenpäin: Lisätty jälkeenpäin:

- UUTISET Uutisia

- NEWS News

19

Teemaksi valikoitui Shaper Helix 3. Tässä templatessa on hyvä

dokumentaatio ja You Tubesta löytyi muutamia videoita. Siinä löytyy

myös tekemistä helpottavia osioita esimerkiksi oma CSS ja moduulien

rakentamista helpottava osio.

Kuva 9 / Shaper Helix 3 template, oma CSS

5.4 Sivuston luominen

Ensin hain suomenkielisen kielipaketin ja asensin sen. Muita

komponentteja joita asensin olivat: JCE-editor, Akeeba Backup ja JA

Image Hotspot.

Kaksikielisyyttä varten loin suomalaiset ja englantilaiset

pääkategoriat ja niille alakategoriat. Tämän jälkeen loin artikkelit,

moduulit ja menut, ja yhdistin ne sivustoksi.

Layout puolella lisäilin muutamia moduulipaikkoja. Niillä sain

aseteltua kuvat ja tekstit suunnittelemiini kohtiin. Muutamille sivuille,

jotka jäivät molempien kielten yhteiseen käyttöön, lisäsin moduuleita

kummallekin kielelle erikseen omansa.

20

Sivustolle olen kirjoittanut hieman omaa CSS:ää ja vaihtanut

esimerkiksi värejä yrityksen omiin. Kaikki oma CSS on kommentoitu.

5.5 Kaksikielinen navigointi

Navigointia varten loin kaksi uutta menuta, suomenkielisen ja

englanninkielisen. Joomlan sisäänrakennettua Main menuta ei saanut

poistaa, mutta piti ottaa pois käytöstä.

Kuva 10 / uudet menut

Kaksikielinen menu kuitenkin aiheutti suurta päänvaivaa. Netistä

löysin erittäin hyvät ja selkeät ohjeet navigoinnin tekemiseen

www.slideshare.net/erictiggeler, mutta silti navigointi ei toiminut,

kuten piti. Englanninkieliseltä sivulta siirryttäessä suomenkieliselle,

suomenkielinen menu katosi. Kun painoi Suomen lipusta toisen

kerran, menu tuli näkyviin.

21

Kysyin Suomalaiselta ja Amerikkalaiselta Joomla foorumilta neuvoja.

Minua neuvottiin ottamaan kaksikielisyys käyttöön heti sivustoa

perustaessani, mutta jälkikäteen neuvosta ei ollut paljoakaan hyötyä.

Joku ehdotti virheen olevan templatessa. Lopulta löysin itse virheen

template managerista. Menu, joka ei ole oletuksena, pitää valita

käyttöön (assign).

Kuva 11 / menun valinta

5.6 Lomake

Rekrytointilomakkeen tein sivustolle Google Forms-ohjelmalla.

Ohjelma kokoaa lähetetyt tiedot Excel-taulukkoon ja yhteydenotot on

helppo hakea Google-tililtä. Se ilmoittaa myös sähköpostilla, kun

hakemus on jätetty. Yhteydenottolomakkeen sisältö on vielä avoin

(toukokuu). Asiakas palaa myöhemmin asiaan, kun sisällölliset asiat

on käsitelty.

22

6 PROJEKTISUUNNITELMA

6.1 Projektin alku

Sivuston alustavaan suunnitteluun ja layouttien tekemiseen käytin

yhteensä viikon, joka jakautui monelle kuukaudelle. Tänä aikana

kävin yrityksessä kuuntelemassa heidän työstään, asiakkaistaan ja

palveluistaan ja kävimme läpi tarvittavia sivuja.

Tekstien hiomiseen käytimme runsaasti aikaa ja monia tapaamisia.

Myös tarvittavien sivujen miettiminen vei aikaa ja asiakkaalta tulikin

ehdotuksia pitkin projektin etenemistä.

Sivujen rakentaminen oli hieman hidasta aluksi, koska Joomla oli

aivan uusi järjestelmä minulle. Sivujen kaksikielisyys aiheutti myös

omat ongelmansa.

6.1.1 Vanhan sivuston siirto

Vanhan sivuston siirto DNA:n Taajamapalvelusta Webbiselle oli

yksinkertaista. Koska Webbisen palvelimella oli samanaikaisesti sekä

vanha sivusto että uusi, oli vanha nimettävä uudelleen

”rrss_vanha.fi” ja linkitettävä yrityksen oikeaan osoitteeseen

www.rrss.fi. Uutta rakensin suoraan palvelimen juureen ja sivustoa

pääsin esikatselemaan osoitteella rrss.fi/index.php. Asiakkaat eivät

siis vahingossa eksyneet rakenteilla olevalle sivustolle ja sivustolla oli

”rakenteilla” etusivu näkyvillä kaiken varalta.

23

6.1.2 Sähköpostit

Vanhan sivuston siirtovaiheessa sähköpostien kanssa oli riittävästi

ongelmia. Webhotellin ylläpitäjä hoiti MX-tietueiden siirron, mutta

loput työt jäivät minulle. Minun piti selvittää oliko postipalvelimena

POP vai IMAP, kuin myös mikä postiohjelma kullakin oli käytössä.

Vaikeusastetta lisäsi se, että osa ryhmästä oli ulkomailla, huonojen

yhteyksien päässä. Kommunikointi heidän kanssaan oli paikoitellen

vaikeaa.

Yrityksen ulkopuolinen tietotekniikasta vastaava oli lukinnut lisäksi

kaikkien käyttöoikeuden Outlookiin. Tästä syystä kukaan ei päässyt

tekemään tarvittavia muutoksia. Lisäksi postipalvelin täyttyi todella

nopeasti, sillä uudessa oli liian vähän tilaa.

Päädyimme peruuttamaan sähköpostien siirron uuteen ja siirsimme

ne takaisin vanhaan. Menen myöhemmin opastamaan henkilökuntaa

webmailin oikeanlaisesta käytöstä ja yhtenäistän yrityksen postien ja

varmuuskopiointien menetelmät. Näin lisäämme yrityksen tietoturvaa

ja eliminoimme mahdolliset tärkeiden tietojen katoamiset.

6.2 Projektin alustava aikataulutus

Projekti aloitettiin suunnittelulla marraskuussa ja suunnittelua

jatkettiin aina helmikuulle asti. Sivuston luominen ajoittui maalis-

toukokuulle. Samanaikaisesti sivustoprojektin kanssa tein myös

Powerpointin ja esitteen. Julkaisin sivuston 6.5.2015, mutta sivustolle

tulee vielä kesäkuussa joitain lisäyksiä muun muassa yhteydenotto

lomake.

24

6.3 Projektikaavio

Kuva 12 / Projektikaavio ja tunnit

6.4 Toteutunut aikataulu

Projekti on edennyt tasaista vauhtia syksystä 2014. Suunnittelimme

sivustoa koko syksyn, koska projekti oli määrä toteuttaa Joomla-

käyttöjärjestelmällä, jota opettelin vasta helmikuussa 2015. Projektin

eteneminen on nyt tällä hetkellä (huhtikuun loppu – toukokuun alku)

pysähdyksissä, asiakkaan ulkomaan komennusten vuoksi.

RR Site Service Oy

marras joulu tammi helmi maalis huhti touko kesä

Organisaation suunnittelu

Projektin kartoitus

Määrittelyt ja rakenne

Esite

Powerpoint esitys

Sivuston suunnittelu (tekstit, kuvat)

Kehittäminen, koodaus ja toteutus

Käännöstyöt

Testaus

Päätös ja projektidokumentti

Projektin luovutus ja opastus

Töitä 7.5.2015 mennessä

Tapaamisia 16 h

Opastusta 5 h

Ulkoasun suunnittelua 10 h

Tekstien kirjoittaminen ja suunnittelu 24 h

Käännöstyötä 12 h

Joomla 105 h

Kuvankäsittelyä 12 h

Sähköpostien siirto 10 h

Powerpoint suunnittelu ja toteutus 4 h

Esite 10 h

208 h

Työ (€ 70,00 / tunti) sis.alv 24% 14560,00 €

alv 0 % 11741,94 €

25

7 TESTAUS

7.1 Selaimet

Sivusto on testattu selainversioilla: Firefox 36.0.1, Crome 41 ja

Internet Explorer 11 sekä Safari. Sivusto toimii moitteettomasti.

7.2 Eri laitteet

Testasin sivustoa koko sen valmistumisen ajan myös puhelimellani,

Samsung S3.

Löysin hyvän emulaattorin internetistä www.quirktools.com, josta

löytyy muun muassa kaikki tietokoneiden näyttöjen koot, tabletti ja

erilaisia puhelimia. Tällä ohjelmalla löysin muutamia responsiivisuus

ongelmia sivustolta. Emulaattorit eivät kuitenkaan välttämättä näytä

todellista tilannetta. RR Site Servicen tapauksessa esimerkiksi

International-logo oikeassa yläkulmassa skaalautuu puhelimessa,

mutta ei emulaattoreilla.

7.3 Muu testaaminen

Netistä löytyy satoja erilaisia ilmaisia testereitä sivustoille ja vielä

enemmän maksullisia. Esimerkiksi Nibbler antoi helppolukuisen

arvioinnin käytettävyydestä, linkeistä, kuvista ja niin edelleen.

26

Kuva 13 / Nibbler testaus sivusto

Testi suositteli Google Analyticsiä, jonka liitinkin sivustolle

Asynchronous Google Analytics-liitännäisen kanssa.

8 KUSTANNUSLASKELMA

8.1 Kustannuslaskelmat

Alustavat kustannuslaskelmat osoittavat tehtyjä työtunteja yli 200 ja

tämä kerrottuna 70,00 euron tuntihinnalla, antaa lopputulokseksi yli

14 500,00 euroa. Tämä hinta on hieman ylitse realistisen summan.

Projektiin sisältyy myös kuitenkin käännöstyöt, esite ja Powerpoint

esitys, sekä yleistä IT-neuvontaa, joten hinta-arviona työlle on 120

tunnin mukaan 9 100,00 euroa.

27

9 PÄIVITTÄMINEN JA SIVUSTON SIIRTO

9.1 Päivitysten sopiminen ja aikataulu

Jo ensimmäisellä tapaamisellamme 7.11.2014 sovimme, että minä

hoidan kaikki tarvittavat suuremmat päivitykset tulevaisuudessa.

Pienempiä päivityksiä varten tein käyttäjätunnuksen vähemmillä

oikeuksilla, jotta työ heille olisi helpompaa ja tarvitsematta pelätä

sivujen sotkeutuvan.

9.2 Sivuston siirto

Vanha sivusto löytyi Taajamalta ja sivustoa hallinnoi mainostoimisto

Jabadabaduu. Siirsin vanhan PHP-sivuston Webbiselle ja URL ohjattiin

vanhalle sivustolle uusien valmistumisen ajaksi.

10 TEKIJÄNOIKEUDET

10.1 Sertifikaatit

Minun oli otettava tekijänoikeudet huomioon sertifikaatit–sivulla.

Sertifikaatin myöntäjältä sain kirjallisen ohjeistuksen, miten

sertifikaattia sai ja tulisi käyttää. Ohjeistuksessa lueteltiin muun

muassa, mitä pohjaväriä logon alla saa käyttää. Ohjeistus oli

englannin kielisenä, koska sertifikaatti on kansainvälinen.

28

10.2 Kuvat

Kvaerneriltä lainattuihin kuviin on kysytty lupa ja heillä on omalla

sivustollaan lehdistölle tarkoitettuja vapaita kuvia kuvapankissa ja

Flickerissä. Myös muiden yhtiöiden kuvia varten neuvoin kysymään

yhtiöistä kirjallisen luvan kuvien käyttöön.

11 YHTEENVETO

11.1 Omat huomiot

Projekti oli äärimmäisen mielenkiintoinen ja haastava. Jo ainoastaan

aiheen terminologian opettelu ja ymmärtäminen toivat oman

mausteensa tekemiselle. Projektitiimi on ollut erittäin avulias ja

heidän kanssaan on ollut mukava työskennellä.

Projekti opetti minulle Joomlan käytön salat ja siitä muodostuikin

minulle erittäin mieluinen ohjelma. Tulen varmasti tulevaisuudessa

käyttämään Joomlaa sivustojen tekemiseen.

Projekti opetti pienyrityksen tietotekniset haasteet ja miten web

designer voi olla mukana korjaamassa yrityksen vääriä

toimintatapoja esimerkiksi sähköpostien tai tietojen tallentamisen

suhteen, sekä miten tärkeää on ymmärrettävä ja selkeä IT-tuki

kaikissa tietotekniikkaa koskevissa asioissa.

Haasteita siis oli, mutta kaikista selvisin hakemalla tietoja netistä,

lukemalla kirjallisuutta ja ohjeita ja kyselemällä asiaa enemmän

hallitsevilta muun muassa erilaisissa foorumeissa.

29

Kuva 14 / Vanha sivusto 2006 – 2015

Kuva 15 / Helix 3 template Joomla 3:lle

30

Kuva 16 / Uusi sivusto 2015 ja lopputulos

11.2 Asiakkaan kommentit

”Sivut olivat erinomaiset. Linkitin ne täällä (Kiina, Nantung)

muutamalle taholle ja kysyin kommentteja. Kaikki oli positiivista.”

Juha Rinne, RR Site Service Oy

”Tekemämme yhteistyöhanke eli kotisivujen uudistus–projekti on

saatu julkaisukelpoiseksi tänään.

Alun haasteiden (lähdeaineiston toimittamiset Sinulle päin ja

ulkoasun laadinta ja hyväksyntä) jälkeen työ eteni raakaversiointi

vaiheeseen reippaasti. Pyysimme sinulta useissa asioissa layout apua

ja kykenit niihin vastaamaan.

Useat muutosehdotukset, laajennukset, poistot ja väärät luulomme

olit valmis käsittelemään / oikaisemaan, asiallisesti ja riittävällä

tehokkuudella.

31

Sopimamme tavoiteaikataulu täyttyi ja saimme mitä tilasimmekin,

uudistuneet, nykyaikaisesti navigoinnin avulla pyörivät kotisivut

(mobiili -versioineen). Osallistuin hieman lopputilan viimeistelyyn ja

muokkaukset olivat helppoja ja portaali oli helppo ymmärtää,

muokata ja palauttaa ja/tai uudistaa. Juuri niin kuin pyysimmekin.

Asiakkaan näkökulmasta kotisivut–projektimme oli hoidettu

ammatillisesti.

Sivujuonne, joka johtui samanaikaisesti tavoittelemastamme

sähköpostipalvelimen muutoksesta (yhteneväisyys idean takia)

aiheutti yrityksellemme harmaita hiuksia ja turhia yhteydenottoja

lähes joka suuntaan. Tästä seurasi myös kustannuksia niin suoria

kuin välillisiäkin. Samalla selvisi kuitenkin pääsyy

epäonnistumiseemme eli siihen että koneemme / ohjelmistomme

eivät olleetkaan hallinnassamme vaan niitä hallinnoi Tietokeskus Oy.

Sitä on vielä kehitettävä / muutettava mutta se olkoon seuraava

haasteemme.”

Pekka Rajala, RR Site Service Oy