Oy Karltek Ltd internet-sivujen uusiminen Eveliina Aaltonen Audiovisuaalisen viestinnän ammattitutkinto Eurajoen kristillinen opisto, 2015
1 ASIAKAS JA PROJEKTI... 3 1.1 Asiakas...3 1.2 Projektin kuvaus...3 1.3 Aloituspalaveri...3 2 DOMAINSIIRTO WEBBISELLE... 4 3 ULKOASUA, LOGO, SIVUSTORAKENNETTA JA SISÄLTÖJÄ... 4 3.1 Ulkoasua ja logo...4 4 JOOMLA, SIVUPOHJAN VALINTA JA KOODIN MUOKKAUS... 7 4.1 Joomlan asennus...7 4.2 Sivupohjan valinta...7 4.3 Ulkoasun ja rakenteen muuttaminen koodia muokkaamalla...7 4.4 Sivuston kuvamateriaali...9 Käytetyt tunnit ja niiden jakautuminen 6.5.2015 mennessä...9
3 1 ASIAKAS JA PROJEKTIN KUVAUS 1.1 Asiakas Oy Karltek Ltd on Nakkilassa sijaitseva ilmastointialan yritys. Henkilö yrityksessä, johon olin yhteydessä projektiin liittyen, oli Petri Nurminen. 1.2 Projektin kuvaus Yritys tarvitsi uudet internet-sivut vanhojen tilalle. Vanha sivusto oli pistetty pystyyn Domainkeskuksen webhotelliin SiteBuilderin avulla. Osalla sivuista tekstinä oli vain type contet here, joten uudistusta todella tarvittiin. 1.3 Aloituspalaveri Ennen kuin tapasin asiakkaan lähetin hänelle sähköpostia, jossa listasin asioita, joita toivoisin hänen miettivän sekä kysyin, mikä webhotelli heillä oli käytössään ja saisinko tunnukset hotelliin, jotta pääsisin katsomaan sivujen rakennetta. Heidän käyttämänsä webhotelli oli Domainkeskuksen tarjoama. Asiakas kysyi, onko webhotelli hyvä. Kerroin sen olevan hyvä, vaikkakin kallis. Tavatessamme keskustelimme, mitä hän sivuilta odottaa. Sovimme esimerkiksi, että värimaailman voi ottaa vanhasta sivustosta. Asiak-
4 kaalla ei ollut oikeastaan minkäänlaista ajatusta, mitä sivuilta odotti tai halusi. Koska yritys on Kaukomarkkinat-yrityksen jälleenmyyjä, kertoi asiakas, että voin käyttää sivustoa tehdessäni heidän sivustoaan kaukomarkkinat.fi hyväkseni sisältöjä varten, mitä tuotteisiin tulee. Asiakas lupasi lähettää minulle sähköpostitse listan heidän myymistään tuotteista sekä tiedot siitä, mitä eri kohtia tarjouspyyntölomakkeeseen laitetaan. Kerroin tekeväni sivut Joomla-hallintajärjestelmällä. Kerroin hänelle, että tällöin esimerkiksi yhteydenottolomakkeesta saadaan paremmin interaktiivinen, koska käytössä ovat tietokanta ja php kaiut. 2 DOMAINSIIRTO WEBBISELLE Kun vihdoin kirjauduin yrityksen käyttämään webhotelliin, kävi ilmi, ettei asiakkaan valitsemaan ja maksamaan pakettiin kuulunutkaan MySQL:ää. Olin siis yhteydessä asiakkaaseen tästä. Koska hinta heidän käyttämällään hotellilla oli huomattavasti korkeampi kuin myös hyvin toimivalla Webbinen-webhotellilla, pienen järkeilyn jälkeen ajattelin, että asiakasta olisi reilu infota tästä. Asiakas oli sitä mieltä, että domainsiirto tehdään. Kävimme samalla läpi sähköpostiasioita. Tekisin uuteen palveluun sähköpostitilit ja kertoisin heille, mitä heidän pitää sähköpostiohjelmiinsa muuttaa, jotta sähköpostit tulisivat perille ja lähtisivät maailmalle domainsiirron jälkeen. Olin yhteydessä siis Webbiseen ja domainsiirto laitettiin alkuun. Otin vanhasta talteen sen materiaalin, mitä tarvitsin, avasin uuteen hotelliin sähköpostitilit ja domain siirrettiin. 3 ULKOASUA, LOGO, SIVUSTORAKENNETTA JA SISÄLTÖJÄ 3.1 Ulkoasua ja logo Ulkoasun visioimiseen oli materiaalia vähän, sillä minulla ei ollut kuin yksi varsinainen kuva vanhasta sivustosta. Myöskään yrityksen logoa minulla ei ollut. En myöskään saanut täysin selville asiakkaalta, oliko heillä oikeastaan logoa ollenkaan. Koska oikein muuta ei ollut, aloin
5 työstää ensin yrityksen logoa vanhasta sivustosta otetun screen shotin pohjalta. Tein tämän Illustrator-ohjelmalla. Asiakas valitsi logoista liukuvärilliset versiot, kun lähetin ne hänelle katsottavaksi pdf-tiedostona. Jo logoa tehdessä olin hahmotellut paperille kynän kanssa sivuston rakennetta, rautalankamallilla sivustorakenteen ja lootamallilla layouttia. Käytin apunani vanhan sivuston navigaatiota ja sisältöjä. Layoutista tuli yksinkertainen, koska tiesin, ettei käytössäni olisi juuri minkäänlaista kuvamateriaalia, en ollut myöskään tietoinen sivuille tulevan tekstin määrästä. Suunnitellessani otin jälleen yhteyttä asiakkaaseen ja muistutin tätä sovituista listauksista, jotka hän lupasi minulle tavatessamme lähettää. En kuitenkaan saanut listausta vieläkään.
6
7 4 JOOMLA, SIVUPOHJAN VALINTA JA KOODIN MUOKKAUS 4.1 Joomlan asennus Asiakaan webhotelli käyttää hallintapaneelinaan Cpanelia, joka sisältää Softaculous-nimisen ohjelmistopaketin, jonka kautta Joomla asennetaan. Asennus käy nopeasti ja kätevästi. Asentaessa mietin tarkasti esim. tietokannan nimeä ja salasanaa, jotta se on tarpeeksi monimutkainen ja näin suojaa sivustoa mahdollisimman hyvin. Kun asennus oli valmis, kävin asentamassa sivun offline-tilaan ja lisäsin tekstin, jolla ilmoitetaan uusien sivujen avautuvan pian ja jolla ovat yrityksen yhteystiedot. 4.2 Sivupohjan valinta Kävin läpi eri sivupohjia, mutta valitsin lopulta kuitenkin toisen Joomlan oletussivupohjista, BEEZ3:en. Päädyin tähän, koska pohja on yksinkertaisuudestaan huolimatta hyvin muokattavissa. Lisäksi, koska kyseessä on oletussivupohja, on se luultavasti stabiilimpi ja turvallisempi kuin monet ladattavat pohjat. 4.3 Ulkoasun ja rakenteen muuttaminen koodia muokkaamalla Jotta sain sivuista haluamani näköiset, aloin työstää sivupohjan eri css-ja php-tiedostoja. Poistin elementit, joita en halunnut/tarvinnut ja muutin värejä, lisäsin kuvia, muutin linkkien käyttäytymisiä, esim. kursorin osuessa linkkiin (a:hover), muutin footerin koon, poistin heittovarjoja elementeistä ja pyöristyksiä kulmista jne. Muokatessani sivupohjaa käytin Safari-selaimen ja Operan inspect element -työkaluja. Tarkastin myös, että löysin varmasti kaikki elementit, jotka responsiivisuudesta johtuen muuttuivat sivupohjassa, ettei mitään oletusarvoja jäänyt näkyviin sivuja skaalatessa. Tehdessäni muutoksia eri tiedostoihin, kirjoitin itselleni ylös muistiinpanoja, joissa on tiedoston nimi, rivi, jolta kyseinen koodi löytyy sekä viittaus, mihin sivuston osaan se vaikuttaa.
8
9 4.4 Sivuston kuvamateriaali Sivustoilla olevan kuvamateriaalin kokosin kaukomarkkinat.fi-sivuston kuvamateriaaleista käyttämällä screen shottia ja muokkaamalla näitä Photoshop (CS4) ohjelmassa. Käytetyt tunnit ja niiden jakautuminen 6.5.2015 mennessä: Suunnittelu 5 h Logo 2 h Tuotanto 20 h Projektihallinta, domainsiirto 8 h YHTEENSÄ 35 h