Ammattijärjestäjä Aulasvuori Www-projektin kuvaus

Transkriptio

1 Ammattijärjestäjä Aulasvuori 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... 10

3 3 1 PROJEKTIN KUVAUS Projektina on tehdä www-sivut ammattijärjestelijä Aulasvuorelle. Sivuston tarkoituksena on helpottaa asiakkaiden hankintaa ja antaa positiivista mainosta ihmisille. Kohderyhmä on suuri ja kattaa kaikki ihmiset opiskelijasta eläkeläisiin. Tarkoituksena on luoda web-sivujen lisäksi myös logo, jota voi käyttää käyntikorteissa ja oheistuotteissa. Tein asiakkaalle myös yhden käyntikortin valmiiksi. 1.1 Projektin aloitus Aloitin projektin asiakastapaamisella. Ensimmäisessä palaverissa kirjoitimme sopimuksen, jossa sovimme, että suunnittelen ja toteutan logon, käyntikortin ja nettisivut. Tein mind map-kartan sivuston rakenteesta, jotta idean kasaaminen itselleni olisi helpompaa. (Ks. kuva 1.0) Kuva 1.0

4 4 Sovimme asiakkaan kanssa värit, navigoinnin, sivuston rakenteen ja domain sekä webhotelli-asiat. Hän halusi raikkaat ja selkeät sivut, josta käy selvästi ilmi mitä yrittäjä tekee ja missä. Tämän pohjalta lähdin rakentamaan sivuja. 1.2 Aikataulu Aikataulutimme asiakkaan kanssa ensin niin, että projekti on valmis viimeisenä työssäoppimispäivänä , mutta tämä ei sopinut kummankaan osapuolen aikatauluun, joten jatkoin töitä vielä työssäoppimisjakson ulkopuolella. Asiakas toimitti tekstit ja muun sisällön sivuille ja sivusto julkaistiin viimein Kustannusarvio Valitsin asiakkaalle pienen ja edullisen webhotellin, koska hänen sivunsa soveltuvat pieneen tilaan hyvin. Webhotellille hintaa tulee 22 / vuosi. Asiakas valitsi domaininsa itse, hän päätyi.net-päätteiseen osoitteeseen, joka maksaa vuodelta 13. Kustannusarvio tälle työlle olisi noin 350 euroa. Tämän kokoinen sivusto on alv 24 %. Alv:n kanssa yhteenlaskettuna 310.

5 5 2 ULKOASU Asiakas toivoi ulkoasuun kirkasta ja raikasta väriä, kuten oranssia tai vihreää. Hahmottelin ulkoasun ensin photoshopilla hyvin yksinkertaisesti. Kuva 2.0 Suunnittelun jälkeen lähdin totteuttamaan ulkoasua koodaamalla ensin kehyksen ja sen sisään kasasin kaikki tarvittavat laatikot, jotka olin etukäteen suunnitellut. Tein html-koodauksen ohella myös csstyylitiedostoa, joka määrittelee miltä sivu ulospäin näyttää. Kuva 2.1

6 6 Kokeilin ulkoasua pyöristetyillä kulmilla ja asiakkaan toiveiden mukaan muutamilla eri väreillä. Haastavaa oli yrittää löytää raikas ja hyvä vihreä, joka sopii ulkoasuun, joten päädyimme yhdessä oranssiin versioon. Kuva 2.2 Seuraavaksi työstin asiakkaan logon, jotta saisin tehtyä siitä www-sivujen otsikkobannerin. Asiakkaani toivoi logoon palapelin palasia, sekä samaa raikasta oranssia, jota laitoin www-sivuille. Tekstin fonttina käytin Trajan Pro- nimistä fonttia. Kuva 2.3 Asiakas toimitti sisällön sivuille sähköpostin kautta ja lisäsin tekstit tarkastuksen jälkeen sivuille.

7 7 Etusivun teksti sisältää toimintafilosofiaa lyhyesti ja ytimekkäästi. Mitä ja miksi?- sivulla kerrotaan tarkemmin ammattijärjestäjän työstä ja tilanteista, joissa järjestäjää kaivataan. Hinnasto löytyy saman nimisen linkin alta. Gallerian koodasin valmiiksi, vaikka asiakkaalla ei vielä sivuille laitettavia kuvia olekaan, jotta asiakkaan olisi helpompi lisätä kuvat sivuille jälkeenpäin näin tahtoessaan. Yhteystiedot sivulle mietin monenlaista ratkaisua. Ensimmäinen olisi ollut vain osoite-, puhelin- ja karttatiedot esille. Toinen suunnitelmani oli lomake, jolla voi lähettää sähköpostia yrittäjälle, päädyin lomakkeeseen. Lomakkeen toteutuksessa päädyin yksinkertaiseen php-lomakkeeseen. Toteutin peruslomakkeen, jota suurinosa sivuston käyttäjistä ainakin osaa käyttää ilman ongelmia. Lomakkeeseen tuli kaksi osaa, lomakkeen html-koodi sivulle, jonne lomake halutaan ja php-sivu, jolla on lomakkeen tiedot ja sähköpostiosoite, jonne palaute menee. Php-sivulla on myös vikailmoitukset, jos lomaketta ei ole täyttänyt kunnolla. Testasin lomakkeen toimivuuden omalla sähköpostillani useita kertoja eri tavoilla.

8 8 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. Resoluutioista testasin 1440x900, 1280x1024 ja 1366x768, kaikilla näytti hyvältä. Käytin myös koodiin validaattoria, joka tarkastaa onko koodissa virheitä. Sekä html- että css-koodi menivät läpi ilman virheitä. 2.2 Sivuston julkaisu Sivuston julkaisu tapahtui asiakkaan toiveesta minun toimestani. Julkaisin sivut Suncometin webhotelliin cpanel:in avulla.

9 9 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 Kokonaisuudessaan www-sivut valmistuivat (ks. Kuva 3.0). Kokonaisuuden huomioon ottamisessa vaikuttaa kaikki pienet yksityiskohdat. Kuten koodien kommentointi päivityksiä varten ja csstiedoston validointi. Jotta kokonaisuus olisi toimiva, täytyy osata tarkastella sivustoa myös sen kävijöiden kannalta. Täytyy osata ottaa huomioon näkyykö tekstit, toimiiko linkit ja miltä väriyhdistelmät näyttävät eri asiakaskuntien silmiin. Kuva 3.0

10 Itsearviointi Mielestäni suoriuduin projektista kunnialla. Kaikkein haastavinta oli aikataulujen luominen ja niiden noudattaminen. Millään ei tahtonut pysyä sovituissa päivämäärissä ja työt venyivät yllättävistä paikoista. Mielestäni onnistuin parhaiten ulkoasun asettelussa ja väreissä, pyöreys pehmentää oranssin tehoa hienosti. Olisin voinut suoriutua paremmin, mutta olen hyvin tyytyväinen tulokseen.