WWW.TRIP-SITE.NET Sivuston rakentaminen ja kehitysvaiheet Annette Asikainen 17.2.2016
Annette Asikainen www.trip-site.net 2/10 www.trip-site.net sivusto Olen kehittänyt ja rakentanut sivustoni Digitaalisen muotoilun koulutuksessa Arcada AMK:ssa. Koulutus oli suunnattu henkilöille joilla halu oppia ja hallita useita graafisen alan osa-alueita sekä soveltaa oppimaansa käytäntöön. Koulutuksen moduulit muodostuivat mm. kuvankäsittelystä, verkkosivujen suunnittelusta ja ylläpidosta, digitaalisesta videoeditoinnista sekä dokumenttisuunnittelusta. Koulutuksen laajuus oli 30 opintopistettä. Koulutus toteutui monimuoto-opiskeluna ja lähiopetusta oli muutaman tunnin kaksi kertaa viikossa. Tässä dokumentissa esitän vaiheittain kuinka kehitin ja rakensin trip-site.net sivustoni. Koulutuksen aikana minulla oli tarkoitus oppia suunnittelemaan ja toetuttamaan web sivusto nykyajan HTML5 ja CSS3 tekniikalla. Ohjelmistona hyödynsin Adobe Creative Cloud ohjelmistoa. Jatkossa ylläpidän ja kehitän sivustoa ja omaa osaamistani. Sivusto sisältää ja rakentuu minun omista matkakokemuksista, tuottamistani teksteistä ja ottamistani kuviasta. Sisältönä on reissun aikana vastaantulleet mielenkiintoiset ja mieleenpainuneet kohteet. Sivupohjat Sivuppohjien suunnittelussa hyödynsin ilmaista Evolus Pencil ohjelmaa. Etusivu index.html
Annette Asikainen www.trip-site.net 3/10 Matkakohde Berliini berliini.html
Annette Asikainen www.trip-site.net 4/10 Sivuston Palaute palaute.html Projektin aikataulutus Gantt kaavion avulla Kuukausi Syys Loka Marras Joulu Tammi Helmi Projektin suunnitelmadokumentti Tekstien tuottaminen Kuvien etsiminen ja tuottaminen Sisällön toteutus Testaus Julkaisu verkkoon Lopullinen julkaisu
Annette Asikainen www.trip-site.net 5/10 Leiskan rakentaminen, testi ja optimointi Leiskan rakentamisvaiheessa käytin kuvien piirrossa kynää ja paperia, skanneria ja Adobe Illustrator vektorigrafiikka- sekä Adobe Photoshop kuvankäsittelyohjelmaa. Mielessäni oli tietyn näköinen leiska ja ajatelmieni kautta lähdin rakentamaan ja kasaamaan sitä. Leiskan yläpalkin kuvana oli ajatus lentokoneesta joka lentää aurinkoon eli ranta- tai kaupunkilomakohteisiin. Tässä esimerkkiä kuinka aloitin ja toteutin leiskan oleellisimmat kuvaelementit. Lentokoneen piirtämisen aloitin hahmottelemalla sen paperille ja skannasin koneelle. Otin pohjaksi skannatun kuvan. Rakensin, muotoilin ja väritin sen Adobe Illustratorilla. Seuraavaksi taivuttelin Adobe Illustratorilla sivustolleni keksimän otsikkotekstin. Aurinko joka on otsikkotekstissä mukana, on myös ikonina selaimen välilehdellä.
Annette Asikainen www.trip-site.net 6/10 fivesecondtest.com testauspalvelu Kokeilin fivesecondtest.com testauspalvelua ja kysyin mielipidettä leiskan header kuvasta. Eroavaisuutta kuvissa on vain oikeassa yläreunassa. Vaihtoehdossa 1 on kuu ja tähdet mustana ja vaihtoehdossa 2 niissä on mukana enemmän värejä. Oli mielenkiintoista seurata kuinka tulos testaajien mielipiteistä eteni. Alussa vaihtoehdot jakaantuivat testissä tasaisesti mutta loppuakohti vaihtoehto 2 kiri selkeäksi voittajaksi. (Tämähän oli kuin selostus Vermon raveissa ;)). Pidin itsekin vaihtoehtoa 2 parempana ja otin sen käyttöön headerin pohjakuvaksi. Sivuston prototyyppi Hahmottelin sivuston asettelua ja värejä Adobe Photoshopilla. Tässä kuva alustavasta etusivun leiskasta.
Annette Asikainen www.trip-site.net 7/10 Sivuston rakentaminen Rakensin sivuston Adoben Dreamweaver ohjelmalla ja testailin Chrome ja Firefox selaimilla. Sivuston rakenne perustuu.dwt-pohjalle jossa on lukittuna perusjutut eli jotka eivät sivulla vaihdu. Yksittäisillä sivuilla muokkausta tarvitsevat meta tiedot, css ja jquery tiedostot sekä sivun sisältö ja toiminta. Sivuston sisältönä on kertomusta matkakohteen nähtävyyksistä ja kuvia. Useamman kuin kolmen kuvan näyttämisestä on tehty kuvasarjoja flexsliderilla. Tällähetkellä sivuilla on kokeilun vuoksi myös Google Map. Ulkoasunäytettä sivulta berliini Kuvassa on osa sivusta berliini.html jossa näkyy sivulla käytettyjä tyylejä, tekstiä ja kuvia. Useamman kuin kolmen kuvan näyttämisestä on tehty kuvasarjoja flexsliderilla joka näkyy alla olevassa kuvassa. Kuville on aseteltu reunat ja varjostus CSS:llä.
Annette Asikainen www.trip-site.net 8/10 Palautesivu Palautesivussa on käytettty pientä lomaketta jossa käyttäjä voi antaa mielipidettä ja palautetta sivustosta. Mielipiteestä ja palautteesta voin saada vinkkejä sivun jatkokehityksessä. Verkkoanalytiikka ja Some Ostin palvelintilaa ja oman osoitteen webhotelli.fi:stä. Verkkosivuston osoitteen keksimisessä täytyi laittaa mielikuvitusta laukkaamaan sillä ajattelemani osoite oli sillä hetkellä mennyt kun varasin osoitteen. Milestäni sivuston kuvaavaksi osoitteksi vapaana oli osoite: www.trip-site.net Raportit Google analyticsissa Tein ja tutkin Google analyticsin mittareita. Pyysin ystäviäni käymään sivustollani jotta pystyin samaan ja tutkimaan palvelusta saatavia raportteja. KPI mittari sivustot Laitoin mittarit etusivulle ja videolle joka on sivustolla. KPI tavoitteet Tavoitteena oli nähdä mistä sijainnillisesti sivulle tullaan, millä sivuilla käydään ja kuinka kauan vieraillaan.
Annette Asikainen www.trip-site.net 9/10 Kuvassa esimerkki Google analyticsin raportista Somen hyödyntäminen sivustolla Somepalveluista olen hyödyntänyt Add this palvelua. Palvelulla voi jakaa esim. kavereille löytämäänsä sivua. Kaikille sivuille en katsonut aiheelliseksi heti laittaa. Tulevaisuudessa sivuja päivitellessä luultavasti hyödynnän lisää tätä palvelua. Facebookeen olen tehnyt blogisivun Traveling the World https://www.facebook.com/annettetraveling/ Blogisivulle laitan ilmoitusta ja linkkiä kun olen tehnyt verkkosivustolle uusia julkaisuja. Ajatuksena on laittaa myös linkkkijakoa sopivista matkailuaiheisista uutisia. Facebook tilin olen linkittänyt Twitteriin ja julkaisuvaiheessa myös sinne menee päivitys.
Annette Asikainen www.trip-site.net 10/10 Lopuksi Traveling the World sivuston kehitys oli antoisa projekti ja pääsin tekemään ja toteuttamaan siinä kaikkea mitä haluan tulevaisuudessa tehdä työssäni. Sivusto elää nyt kokoajan ja toteutuksen aikanakin se muuttui uusilla ideoilla ja kokeiluilla.