Köyliön Jalkahoitola Www-projektin kuvaus

Transkriptio

1 Köyliön Jalkahoitola Www-projektin kuvaus Minne Seppälä Avat 2014 Dokumentaatio

2 1 PROJEKTIN KUVAUS Projektin aloitus Aikataulu Kustannusarvio ULKOASU Sivuston testaus Sivuston julkaisu Sivujen päivitys KOKONAISUUS Itsearviointi Asiakkaan arviointi... 11

3 3 1 PROJEKTIN KUVAUS Projekti käsittelee jalkahoitolan www-sivujen suunnittelun ja luomisen, sekä domainin eli www-osoitteen ja webhotellin eli sivutilan hankinnan. Sivuston pääasiallisena tarkoituksena on mainostaa ja bonuksena sivusto antaa asiakkaille hinta- ja yhteystiedot myös kotiin. Asiakkaan pyynnöstä sivustosta ei saanut tulla liian naisellista, jotta miespuolisten henkilöiden kynnys pienenisi hoitolaa kohtaan. Yritin siis luoda sivut, joita miesasiakkaat voivat myös käyttää. 1.1 Projektin aloitus Suunnittelu lähti käyntiin kun kävin tapaamassa asiakasta Köyliössä hoitolan tiloissa. Asiakkaani tiesi kertoa minulle, että haluaa navigoinnin sivun yläreunaan, josta se olisi heti löydettävissä. Muita kriteereitä sivustolle oli selkeys ja asiakas toivoi myös, että sivusto ei karkottaisi kaikkia miesasiakkaita pois, joten sivustosta ei saisi tulla liian naisellista. Kävimme myös läpi muutamia jalkahoitoloiden sivuja esimerkinomaisesti. Teimme mind map- tekniikalla sivuston rakenteen. Asiakas luetteli kaikki asiat, jotka nettisivuissa hänen mielestään on tärkeää ottaa huomioon. Puhuimme asiakasryhmistä, jotka koostuvat hyvin erilaisista ihmisistä.

4 4 Kuva 1 Kävimme myös läpi domain- ja webhotelliasiat. Tein asiakkaalle kirjalliset ohjeet sähköpostilla tilauksen tekemiseen. Asiakas tilasi domainin ja webhotellin heti alkuun, koska niiden aukeamiseen voi mennä aikaa jopa muutama viikko. 1.2 Aikataulu oli työssäoppimisjakso, mutta koska minulla oli kaksi asiakasta tuolle ajalle ja asiakkaallani oli paljon kiireitä, jouduin toisen työn tekemään työssäoppimisjakson ulkopuolella. Minulla oli projektin kaikki materiaalit , koska asiakkaani ei ehtinyt lähettää minulle materiaaleja aikaisemmin. Sen jälkeen sivuston julkaisu tapahtui 4. tammikuuta.

5 5 1.3 Kustannusarvio Asiakkaan toiveet webhotellin, eli sivutilan osalta oli hyvä asiakaspalvelu sekä helppokäyttöisyys ja mahdollisimman edullinen hinta. Sivuston koko on hyvin pieni, joten tarjosin asiakkaalle Suncomet webhotellia ja Starttipakettia. Hintaa kertyy 22 / vuosi. Asiakas valitsi domaininsa itse, hän päätyi.fi-päätteiseen osoitteeseen, joka maksaa vuodelta 30. Kustannusarvio tälle työlle olisi noin 372 euroa. Tämän kokoinen sivusto olisi noin alv 24 %. Alv:n kanssa yhteenlaskettuna 372. Yhteensä asiakkaalle tulisi maksettavaa 372 ja sen jälkeen juoksevat kulut noin 52 vuodessa. 2 ULKOASU Tapasin asiakkaan hoitolassa, jotta pystyimme keskustelemaan sivuston tekemisestä. Asiakkaani ei tiennyt nettisivuista juuri mitään, joten turvauduin ruutupaperiin ja kynään. Kävimme läpi mind map- tekniikalla sivuston varsinaisen rakenteen, kaikki mitä asiakas halusi nettisivuihin, laitettiin paperille.

6 6 Kuva 2 Tein myös asiakkaalle selkeitä malleja ulkoasun rakenteesta. Selasimme myös muutamia jalkahoitoloiden sivuja yhdessä, jolloin hän tiesi kertoa, että haluaa linkit sivun yläreunaan. Keskustelimme webhotellista ja domainista ja kirjoitin hänelle sähköpostiin ohjeet niiden tilaukseen. Piirsimme asiakkaani kanssa yhdessä paperille erilaisia vaihtoehtoja, joista asiakas päätyi selkeästi yhteen rakenteeseen. Kuva 3

7 7 Tämän ympärille on hyvä aloittaa sivujen kasaaminen. Ensin koodaan pohjan valmiiksi ja sitten muokkaan css-tiedoston alkuun. Minulla ei ollut valmiina pohjaa, jossa olisi ollut navigointi sivun yläreunassa. Ensimmäisen pohjan koodasin käsin alusta loppuun, tähän pohjaan tien asiakkaalle muutaman erilaisen version ulkoasusta. Näistä vaihtoehdoista asiakas kokosi yhteen valmiin ulkoasun. Tein monia pohjia, jotta asiakas ei päätyisi vain yhteen ajatukseen, halusin antaa vaihtoehtoja. Kuva neljä (4) on ensimmäinen luomus. Sekä minun, että asiakkaan näkemys pohjasta oli liian kylmä. Rakenne ja asettelu kuitenkin oli asiakkaan mielestä hyvä jo tässä ulkoasussa. Väreinä käytin sinistä, koska asiakas toivoi, että väri olisi sekä naisille että miehille. Lisäsin yläreunan banneriin häivytyksen valkoiseen, jottei ulkoasu olisi niin kova. Toinen tekemäni pohja oli liian tummanpuhuva (ks. kuva 5). Asiakas piti tiloissa olleesta raidallisesta verhosta, jota on käytetty otsikkopalkissa kuvana. Lisäsin tähän pohjaan jalanjälkiä, jotta banneri ei olisi niin tylsä. Värimaailma muuttui radikaalisti, koska asiakas ei antanut suoraan värejä, joita tulisi käyttää. Kolmas vedos (ks. kuva 6) on muuten samanlainen kuin edellinen, mutta kokeilin tähän pohjaan myös häivytystä banneriin, jotta ulkoasusta tulisi yhtenäisempi ja valoisampi. Ulkoasu oli edelleen mielestäni liian tumma jalkahoitolalle ja asiakas oli samaa mieltä kanssani. Seuraavaan pohjaan päätin tehdä jotain erilaista, jotta asiakkaalla olisi vaihtoehtoja. Käytin kuvapankista otettua rantakuvaa bannerissa (ks. kuva 7), siitä huokuaa lämpö ja iloisuus. Kuva ei ole mielestäni liian

8 8 naisellinen, joten se sopii myös miehille, jotka asiakkaani halusi ottaa huomioon ulkoasussa. Sivupalkissa on myös kuva hoitolan hoitotuolista, kuvan valotusta on muokattu sopimaan paremmin sivujen tunnelmaan. Alapalkkiin olen laittanut sivuston copyright oikeudet. Kuva 4 Kuva 5

9 9 Kuva 6 Kuva Sivuston testaus Testasin sivuston useilla selaimilla ja muutamilla resoluutioilla, sekä mobiili-laiteella. Sivusto toimi moitteettomasti ainakin selaimilla Google Chrome 34, Mozilla Firefox 27, Opera 12 sekä Internet Explorer 10 ja 11. Myös android versiolla toimiva kosketunäyttöpuhelin näytti sivuston oikein.

10 10 Resoluutioista testasin 1440x900, 1280x1024 ja 1366x768, kaikilla näytti hyvältä. Sivuston valmistumisen jälkeen käytin sekä css- että html-validatoria ja validoin koodin. Koodista ei löytyny virheitä. Lisäksi kävin koodin kommentoinnin läpi ja katsoin, että koodissa on tarpeelliset kommentit ja poistin turhat kommentit rakennusvaiheilta. Jätin koodit paikalleen, jotta sivustoa olisi helpompi päivittää ja muokata jälkikäteen. 2.2 Sivuston julkaisu Sivuston julkaisu minun toimestani. Julkaisin sivut Suncometin webhotelliin cpanel:in avulla. Myöhemmin muokkasin sivuja FileZilla nimisellä ftp-ohjelmalla, jolla voi siirtää tiedostoja palvelimelle ja sieltä tietokoneelle. 2.3 Sivujen päivitys Asiakas päivittää sivuja itse. Kirjoitin asiakkaalle kirjalliset ohjeet sivujen päivitystä varten sähköpostiin. Tarjouduin myös auttamaan asiakasta, jos ilmenee ongelmia sivuston kanssa. 3 KOKONAISUUS Kokonaisuudessa on yritetty ottaa huomioon sivuston kaikki mahdolliset käyttäjät kuin myös sivuston päivittäjät. Olen kommentoinut sekä htmlettä css-koodia, jotta muokkaajan olisi helpompi päästä sisään koodiin, eli ymmärtää sitä.

11 11 Kävijöiden kannalta on otettava huomioon ulkoasun lisäksi myös käytettävyys. Käytettävyyteen kuuluu monta eri kohtaa, mutta erityisselaimille tarkoitettu sivusto on kuitenkin helppo rakentaa. Sivuston asettelun tulee olla selkeä ja yksinkertainen, navigoinnin tulee olla helposti esillä ja kuvissa tulee olla alt-teksti, jolloin myös esimerkiksi sokeat voivat lukea kuvan. 3.1 Itsearviointi Mielestäni tämä asiakasprojekti oli opettavainen ja mielenkiintoinen. Omasta mielestäni suoriuduin tehtävästä kohtuullisesti. Matkalla oli paljon mutkia ja pähkinöitä purtavaksi. Selätin suurimmat ongelmat etsimällä ratkaisut internetistä. Mielestäni onnistuin parhaiten saamaan oikean tunnelman sivuille. Sivuilla on harmooninen tunnelma ja rantakuva antaa lämpimän säväyksen sivuille. Vähiten minua miellytti navigointi. Mielestäni navigointi olisi voinut olla pystysuunnassa vasemmassa reunassa. Sain kuitenkin sivuston näyttämään ehjältä vaakanavigoinnin kanssa. 3.2 Asiakkaan arviointi Olen tekemiisi sivuihin erittäin tyytyväinen. Työskentely kanssasi sujui mukavasti viestittelemällä ja välillä puhelimitsekin. Ilmoitin heti alussa, etten ole suuremmin perehtynyt tietotekniikkaan enkä sen vuoksi hallitse muuta kuin ns. pakolliset jokanaisen toiminnot. Domainit ja web-hotellit olivat minulle aivan utopiaa. Sinä hoitelit ne ja vastailit tyhmiin kysymyksiini siinä sivussa. Mietin mitä muuta voisin luomastasi sivusta

12 12 sanoa kuin, että ihan OK ja hyvät. Löysin netistä joitakin kriteereitä hyvälle yrityssivustolle. 1. Käyttäjäystävällinen Mielestäni tämä asia toimii sivuilla hyvin. Tarpeelliset tiedot löytyvät helposti. 2. Rakenna etusivulle tehokas viesti ja esittely Etusivu on haluamani näköinen. Annoit vaihtoehtoja, joista oli helppo valita. Muokkasit sitä useaan kertaan toiveitteni mukaan. Se on mielestäni selkeä. Siitä selviää yhdellä silmäyksellä mistä on kyse. Sivulta on helppo lähteä etsimään tarkempaa tietoa. 5. Panosta sivuston ulkoasuun Yrityksellämme ei ole kunnon logoa eikä graafista teemaa. Siitä huolimatta sait sivustosta tyylikkään. Kuvia sivuilla ei suuremmin ole. Teit kuvien eteen kyllä kiitettävästi töitä, kun tulit itse paikan päälle kuvaamaan. Sivuilla olevat kuvat ovat hyviä. Varsinkin hoitotuoli-kuvan versiosta pidän. Se on houkuttelevan ja pehmeän näköinen. 6. Tee kävijöille yhteydenotto helpoksi Tätä asiaa olen nyt jälkeenpäin pohtinut. Yhteystiedoissamme on vain puhelinnumerot ja käyntiosoite. Olisi varmaan ollut järkevää lisätä sinne myös sähköpostiosoitteet. Nehän toki pystyy lisäämään milloin tahansa. Saan siihen apua lähipiiristä. 7. Esitä sisältö selkeästi ja asianmukaisesti Sivusto on selkeä ja helppolukuinen.