Koe14 MuotinäytösprojektiWeb-suunnittelu ja toteutus

Raportti/työpäiväkirja ja tiivistelmä

Tiariia Tamminen05MUL13

Lahden Muotoiluinstituutti28.5.2014

Sivusto kaikessa ensimmäisentallennetun versionkauneudessaan...(10.3.2014)

... ja sama vä-hän myöhemmin. (12.5.2014)

Teoreettisesti jakaisin työskentelyni kuuteen eri vaiheeseen, ensimmäisestä kokouksesta aina viimeiseen päivitykseen. Kaikilla vaiheilla oli tietty vaikutus oppimiseen, vaikka kokemukset eivät aina olleet positiivisia. Korjausvaatimukset pakottivat ottamaan senhetkisen sivuston materiaalit uudelle kierrokselle, ja melkein aina jotain aiempaa koodia tarvittiin uudestaan, kun tilanteet muuttuivat. Missään kohtaa ei aloitettu alusta, vaan kaikki kierrätettiin eri tavalla. Tästä syystä en pidä yhtäkään tehtyä työtuntia perustelemattomana, sillä kaikella tekemisellä oli olennainen vaikutus projektin kulkuun ja oman osaamisen ja ymmärryksen syventämiseen itsenäisen opiskelun kautta. Facebook-palavereita ei ole laskettu mukaan tuntimäärään.

Ensimmäinen vaihe (28.1. lähtien) sisälsi kokouksia projektiryhmän, ja myös kolmistaan graafikoiden, kanssa. Tällöin arvioitiin ideoiden toteutumismahdollisuuksia web-sivustolla ja sivuston visuaalista ilmettä. En tehnyt lupauksia, joita en pystynyt myöhemmin pitämään, vaikka liikuimme idealistisella tasolla. Graafikoiden tuottaman visuaalisen ilmeen keskeneräisyyden takia web-sivuston rakentamisen aloittaminen myöhästyi alkuperäisestä päivämäärästä 26.2.2014.

Toisessa vaiheessa (10.3. lähtien) kaikki grafiikat eivät vielä olleet valmiita, mutta materiaalia oli tarpeeksi ulkoasun rakentamiseen, mikä perustui responsiiviseen pohjakoodiin. Heti alkuun muiden myöhästely aiheutti minulle sen, että jouduin kiihdyttämään omaa tahtiani pysyäkseni aikataulussa. Erityisesti juuri ennen sivuston ensimmäistä julkaisua kuvamateriaalia ja tekstien perään täytyi aktiivisesti kysellä. Tein alati töitä parin päivän päässä oleva deadline mielessä. Ongelmanratkaisua täytyi tehdä paljon, kun kyseessä olivat ehdottomat visuaaliset vaatimukset ja toiminnot. Usein muokkasin kuvia itse niiden koon puolesta. Graafikot olivat kuitenkin aina saatavilla vaikeissa tilanteissa.

Kolmannessa vaiheessa (25.3. lähtien) sivuston rakennetta täytyi uudistaa visuaalisen ilmeen ja toimivuuden kannalta. Toisen ja tämän kolmannen vaiheen elementtejä tarvittiin usein myöhemmin uudelleen, joten varmuuskopioinnista oli monesti hyötyä. Sivusto ei vielä ihan muistuttanut lopullista tuotosta. Graafikoiden toimittamista korjauksia havainnollistavista PDF-tiedostoista alkoi tulla normi, joka seurasi aina yhden version päivittämistä. Alun innostus alkoi hiipua, kun omat taidot eivät tuntuneet millään riittävän vaatimusten täyttämiseen. Jälkiviisautena olisi pitänyt hyvissä ajoin kysyä multimediatuotannon puolen opettajilta neuvoa asioihin. Kun allekirjoittaneen kestokyky alkoi rivinvälien viilauksen kohdalla olla kyseenalainen, täytyi ottaa aikalisä ja yhteys projektin vetäjään yhteisen kokouksen merkeissä.

Neljäs vaihe (3.4. lähtien) alkoi välikokouksella, jossa käsiteltiin laajasti resurssiasioista. Toiveenani oli, että kokous olisi vaikuttanut olennaisesti turhaan pilkunviilaamiseen ulkoasussa. Hoidettavaa oli tarpeeksi ilmankin, ja myöhässä olevat materiaalit pitivät koko graafisen työryhmän varpaillaan. Sivuston mobiililaiteystävällisyys korostui, ja ensin yritettiin muokata sivustoa sopivaksi molempiin alustoihin, mutta lopulta päädyttiin sivuston jakoon normaaliversioksi ja mobiiliversioksi. Jotkin elementit kokivat muodonmuutoksen graafikoiden kanssa käytyjen keskusteluiden johdosta. Mobiiliversion rakentamisen tueksi oltiin alunperin sovittu

Antti Heinosen konsultointia, mutta graafikot eivät olleet sopineet hänen kanssaan ajasta kokouksemme pohjaksi. Toimiva mobiilisivusto syntyi kuitenkin normaalisivuston ja kompromissiversion pohjalta parin täysipainoisen työpäivämäisen työstön ja korjaus-PDF-tiedoston päätteeksi.

Viidettä vaihetta (15.4. lähtien) kuvailisin tavallaan rennoimmaksi projektin vaiheeksi. Blogin päivittäminen oli tervetullutta vaihtelua alituisen koodikamppailun jälkeen. Tietysti mobiiliversion luominen oli aiheuttanut sen, että ulkoasumuutokset ja sisällöt täytyi siitä lähtien päivittää kahteen eri paikkaan. Piia toimi pääasiallisena blogimateriaalien toimittajana, ja materiaalit tulivat minulle jatkuvasti myöhässä blogiaikataulusta. Itse iskin materiaaleja sivuille aina saman vuorokauden aikana tai muun sopimuksen mukaan. Ikävää oli edelleen se, etten koskaan voinut suunnitella etukäteen työskentelyaikojani. Pienensin blogimerkintöjen kokoja ja formatoin tekstejä, mihin kului oma aikansa.

Kuudes vaihe (12.5. lähtien) sisälsi paljon erilaisia tehtäviä; verkkotunnuksen vanheneminen aiheutti koko muva.fi (ja sen myötä koe14) sivuston kaatumisen, ja sivut piti siirtää väliaikaisesti muotoiluinstituutti.fi serverille. Mielenkiintoisinta oli se, kun näytöspäivänä aamuseitsemältä sain kolme logoa, jotka oli puolessa tunnissa saatava sivustolle. Näytöskuvat oli tarkoitus päivittää sivustolle mahdollisimman nopeasti näytöksen jälkeen, mutta kului viikko kunnes sain kuvat haltuuni. Laitoin saamani kuvat sellaisinaan sivustolle graafikoiden ohjeistuksen mukaan, ja niiden ulkoasusta tuli minun kannaltani aiheetonta kritiikkiä hyvin pian päivityksen jälkeen. Ohjeistus näytös-sivun päivittämiseen tuli pari päivää ennen kuvia, sekin oli puutteellinen ja graafikot muuttivat mieltään asioista kun olin ehtinyt jo työstää sivun ohjeenmukaisesti. Materiaaleja tuli minulle vielä keskiviikkona 28.5., kaksi iltaa ennen loppukokousta. On kohtuutonta vaatia, että raportin ja kesätöiden ohella minun tulisi rukata muiden virheistä johtuneita asioita sivustolle kahden päivän varoitusajalla.

Itsepäisyys ja sisukkuus olivat projektin aikana monesti sekä kirous että lahja. Viestintätaidot, työryhmien roolituksen ymmärtäminen ja annetuissa aikatauluissa pysyminen saivat yhä enemmän painoarvoa, mitä pidemmälle projektissa edettiin. Usein minun täytyi korvata muiden systemaattista myöhästymistä tekemällä oman osuuteni suunniteltua ripeämmin, minkä koin jatkuvana stressin aiheena. Tein lupauksia kuitenkin vain silloin, kun minulla oli resurssit niiden täyttämiseen. Tein töitä pitkälti yksin, ja sain vain versioiden välillä paljon koottua palautetta (pääasiassa graafikoilta), oman jaksamisen tarkkailusta tuli elintärkeää. Koodimaailman nykyinen kompleksisuus avautui minulle käytännön kautta, ja mullisti ajatteluni ja tekemiseni web-julkaisun suhteen. Nykyään osaan suunnitella web-julkaisua uudesta näkökulmasta, ja pohtia myös ulkoisten apuvälineiden integroimista osaksi sivustoa. Sain portfoliooni merkittävää materiaalia ja konkreettista projektityöskentelykokemusta. Oli hienoa lopulta nähdä oma nimensä työryhmälistassa.

81,25 on kertyneiden tuntien määrä 28.5.2014 mennessä, mikä oikeuttaa kolmeen (3) opintopisteeseen, kun 27 tuntia = 1 op.

RAPORTIN / TYÖPÄIVÄKIRJAN TIIVISTELMÄ

Joulukuun 2013 alussa sain tekstiviestin Muotoiluinstituutin vaatesuunnittelulinjalla opiskelevalta ystävältäni Minnaleena Jaakkolalta, joka kysyi haluaisinko koodaamaan muvan kevään muotinäytöksen nettisivuja. Lähdin mukaan melko innokkaana, sillä web-sivujen käsin koodaaminen oli ollut harrastukseni ala-asteelta lähtien, ja ylläpidän nykyäänkin web-portfoliota omalla domainillani. En kuitenkaan ollut käynyt yhtäkään kurssia tai parin tunnin keskitettyä ohjausta kummempaa koulutusta web-julkaisun alueella. Joka tapauksessa omien taitojen hyödyntäminen oikean elämän projektissa ja yhteistyö eri alojen opiskelijoiden kanssa kiinnosti.

28.1.2014 / klo 12:00 – 13:00 / 1 h / kokousMahdollisimman monet projektiryhmän jäsenet kokoava tapaaminen koski aikataulullisia asioita, sponsoreita ja visuaalista ilmettä. Sain tietää, että nettisivu-työryhmä sisältäisi yksin minut, mikä siinä vaiheessa tuntui hyvältä: pääsisin työstämään asioita omalla aikataululla. Yksin työskentely muuttui kaksijakoiseksi asiaksi koko projektin ajaksi. Nettisivuideoinnissa mietittiin sivujen sisällöiksi flash-sisältöä (joka jäi pois ja korvautui giffeillä toimivuuden takia), pop-up galleria (jäi pois ja sivuille laitettiin sen sijaan kuvat kauniisiin grideihin näytöksen jälkeen) ja muiden sivujen keskeiset sisällöt. Kokouksessa pohdittu kolmisivuinen kokonaisuus muotoutui myöhemmin nelisivuiseksi, mikä oli hyvä ratkaisu sisällön jaottelun kannalta. Ylipäätään sivuista haluttiin minimalistiset, toimivat ja selkeät. Avoimelle brainstorming-vaiheelle tyypillisesti liikuimme siis hyvin idealistisella tasolla. Näihin aikoihin koin hieman epäselvänä, miten visuaaliset ja web-puolen asiat jakautuisivat graafikoiden (Tino Nyman ja Ilmari Kumpunen) ja allekirjoittaneen välillä. Epäselvyys aiheutti vaikeuksia myöhemmin työstössä, kun jouduin muokkaamaan vääränkokoisia tai puutteellisia kuvia enkä ymmärtänyt vaatia graafikoilta heidän osuutensa tekemistä nettisivujen tarpeiden mukaisesti. Projektin loppua kohden jäsentyi paremmin graafikon ja webmasterin roolin ero, jolloin työskentely helpottui edes vähän. Sosiaalisen median hoitaminen delegoitui Polinalle pian, kun ymmärsin, että nettisivuissa tulisi olemaan minulle aivan tarpeeksi tekemistä yksinään. 18.2.2014 / klo 16:00 – 16:30 / 0.5 h / kokousTapasin Ilmarin Muotoiluinstituutin B-rakennuksen aulassa, ja kävimme läpi graafikoiden visuaalista suunnitelmaa. Graafikoiden kanssa kokoustamisesta tuli hyvin tuttua koko projektin ajan, mikä oli selkeyden kannalta tärkeää. Graafikoiden palaute omasta tekemisestäni oli toisinaan hermostuttavaa, mutta se ajoi työskentelyäni visuaalisen ilmeen tueksi. Oman osaamisen tunteminen (meta-tieto) oli läpi koko projektin merkittävä taito, sillä muilla projektin osanottajilla riitti aina toiveita, muttei ehkä ymmärrystä niiden toteuttamismahdollisuuksista (mikä tiedostettiin ääneen). Tässä vaiheessa oma ideani sivuston pohjakoodista oli hyvin erilainen kuin nykyinen lopputulos, mikä heijastelee oppimistani web-julkaisun perustuksista. Vasta ensimmäisen työstövaiheen jälkeen kävi selväksi, ettei oma ideani koodista menisi yksiin graafikoiden toiveiden kanssa. Jotkin elementit jäivät perustellusti pois pelkästään visuaalisen ilmeen takia.

Muut Ilmarin kanssa käydyssä palaverissa lupaamani asiat säilyivät lopulliseen versioon, mutta osasin toteuttaa ne sittemmin eri tekniikalla. Esimerkiksi liikkuvaa kuvaa tuli lopulliseen versioon vähemmän, ja suunnittelijasivuston linkkijärjestelmä oli käyttäjäystävällisintä toteuttaa rullauksella, ei erillisillä sivuilla. Ilmari lupaili palaverissa visuaalisen suunnitelman valmistumista 26.2. mennessä, mutta oikeasti pääsin vasta 10.3. aloittamaan sivujen työstöä omasta aloitteestani. 5.3.2014 / klo 16:00 – 17:00 / 1 h / kokousKokouksessa käsiteltiin käsiohjelmien ja nettisivujen graafista ilmettä edellisen kokouksen parannusehdotusten pohjalta. Graafikoiden presentaatio sivujen ulkoasusta keräsi rakentavaa kritiikkiä. Materiaalit olivat edelleen vaiheessa ja ennen kuin ulkoasu olisi valmis, en voisi aloittaa koodaamista. Minulle luvattiin työskentelyaikaa tasan viikon verran viikolla 11. Työskentely tosiaan alkoi silloin, vaikka grafiikat eivät olleet edelleenkään valmiita. Onneksi omakaan deadlineni ei pysynyt viikossa, vaan sain lisäaikaa materiaalien puutteen takia. Olen saanut muiden kokemuksia kuunnellessani työelämän projektityöskentelystä sellaisen kuvan, että materiaaleilla on tapana myöhästyä inhimillisten asioiden takia, mutta materiaalinen korvaus työnteosta helpottaa myöhästelystä aiheutunutta stressiä kummasti.Kokouksessa omalta osalta olennaista oli nettisivujen rakenteen ideointi yksityiskohtaisemmin. Etusivuille ajateltiin samantyyppistä ratkaisua kuin mikä päätyi lopulliseen versioon, mutta eri funktiolla. Ideana oli, että tapahtuman juliste olisi etusivulla ja sitä klikkaamalla pääsisi itse sivustolle. Suunnittelijaprofiilit eivät olisi pelkkänä skrollina vaan eri suunnittelijoihin on oltava nopea hypätä esim. sivupalkin kautta, ja niihin sisältyisivät suunnittelijakuvat, lopputyömalliston lyhyt kuvaus ja avainsanat (suunnitelma toteutui lopuksi hybridinä). Blogiin tulisi teasermateriaalia ja ajankohtaisia asioita, tasaisin väliajoin päivittyvää kuvamateriaalia. Näytös-sivu kulki vielä nimellä ”galleria”, jonne tulisivat kuvat näytöksestä tapahtuman jälkeen, ja ennen näytöstä virallista promootiomateriaalia. Sponsoreiden logot aiottiin tässä vaiheessa toteuttaa niin, että ne olisivat kokoajan näkyvillä, toisin kuin edellisen vuoden sivustolla jossa ne olivat joka sivun pohjalla. Päädyimme edellisen vuoden sivuston ratkaisuun lopuksi, mutta idea jatkuvasti esillä olevista sponsorilogoista pysyi pinnalla pitkään. 10.3.2014 / klo 16:00 – 17:00 / 1.25 h / kokousKokous pidettiin muvalaisten ja graafikoiden kanssa, ja pääaiheena edelleen nettisivujen rakenne. Edelleenkään kaikki grafiikat eivät olleet valmiina, mutta koin parhaaksi aloittaa jo koodin rakentamista, koska pohja oli selvillä. Pyysin siis visuaalisen ilmeen PDF-tiedoston ja ryhdyin toimeen. Tässäkin vaiheessa kaikki oli kovin innostavaa ja ihmeellistä, kun käytännön kompastuskivet eivät vielä olleet hypänneet mukaan yhtälöön. En myöskään osannut odottaa graafikoiden ehdottomuutta visuaalisen puolen pilkuntarkkuudessa. Asiat lähtivät tästä vähän kivisemmille poluille, kun työryhmien kesken alkoi välienselvittely

toimivuuden ja visuaalisuuden optimoinnista.

RAPORTTI / TYÖPÄIVÄKIRJA1. Kokouksia, suunnittelua ja pohjamateriaalien odottelua (3.75 h)

10.3.2014 / klo 16:30 – 21:30 / 5 h / työstöKoodin sisälle pääseminen ja varsinkin aloittaminen vaatii paneutumista, minkä takia työskentelen mieluiten keskitetysti monta tuntia kerrallaan lyhyillä tauoilla höystettynä. Työskentely projektin aikana oli tehokkainta niin. Toisaalta yritin omalla työskentelyaikataulullani simuloida työpäivämäistä työskentelyä, minkä mukaan koen mielekkääksi työstää asioita. Suunnitelmani oli rakentaa sivut siten, että ulkoasu olisi vain yhdellä sivulla, ja kyseiseen sivuun olisi upotettu etusivu, näytös-sivu, suunnittelijat-sivu ja blogi-sivu. Ennen ulkoasuun pääsyä osoite muva.fi/koe14 veisi julisteeseen, jota klikkaamalla pääsee ulkoasuun. Syvätyissä sivuissa (ns. inside frame) on se hyvä puoli, että jos ulkoasuun tulee muutoksia, ainoastaan yhtä tiedostoa tulee muokata.

Olin tutustunut konseptiin nimeltä Fluid Grid Skeleton. Käytännössä se on ilmainen avoimen lähdekoodin pohja, jonka rakenne mahdollistaa sivuston elementtien automaattisen muuttumisen selainikkunan koon mukaan. Koska sivuston oli tarkoitus toimia kaikilla nettiin pääsevillä laitteilla, toiminto oli tärkeä. Latasin siis pohjan, jota olin aiemminkin käyttänyt nettisivutoteutuksissa, ja rakensin ulkoasun ja syvättävät sivut. Piilotettavan sponsoripalkin rakentaminen oli ensimmäinen vastaan tullut täysin uusi asia. Aloin ymmärtää div-koodin käytännöllisyyttä ja monipuolisuutta – ne saa nimittäin kasautumaan päällekkäin kun selainikkuna kaventuu, mutta muuten ne ovat vierekkäin. Divit mainittiin ohimennen syksyllä vuorovaikutteisen animaation kurssilla, joka ei keskittynyt nettisivuihin, vuorovaikutteisuuten eikä oikein animaatioonkaan. Koin, että minun tuli opetella asia itsenäisesti koe14-projektin tarpeisiin.

12.3.2014 / klo 14:00 – 14:30 / 0.5 h / kokousKävimme Tino Nymanin kanssa läpi käytännön asioita, ja loput graafiset materiaalit luvattiin maanantaihin mennessä, mihin asti voisin käyttää niitä simuloivia korvauskuvia rakennusprosessia varten.

”Mutta joo valmis materiaali tulee sunnuntaina....viimeistään maanantaina saat materiaalit. Mutta esim. giffit ja etc... kokeile mallikuvilla, sitten oikeat ja lopulliset päivitellään rauhassa. Blogiin ekana materiaali....näytös osioon tulee se ”mainos” jossa on se elementti ja näyttelytiedot.... suunnittelija osio päivitetään myöhemmin kun saadaan tytöiltä tekstit ja kuvat. Ja etu sivulle tulee sitten se gif (joka tehään) ja siihen tulee ajankohtaista tietoa sitten aika ajoin”

Seuraavina päivinä lupailtua:

17.3.2014 / klo 17:30 – 23:00 + 01:00 – 03:00 / 8 h / työstö18.3.2014 / klo 14:30 – 16:15 / 2.25 h / työstöEdeltävän viikonlopun aikana sain grafiikoita ja pääsin ensimmäisen ja viimeisen kerran työskentelemään aikataulullisesti kuten oli sovittu. Kaikkea sisältöä ei vielä oltu toimitettu, mutta pääsisin sentään eteenpäin. Tässä vaiheessa nettisivut haluttiin kahdessa päivässä julkaisuun, mikä ei mielestäni oikein simuloi työelämän olosuhteita. Se, että muut ovat myöhässä aikatauluista ei oikeuta sitä, että minulle annetaan vain kaksi iltaa aikaa rakentaa nettisivut. Koin olevani puun ja kuoren välissä, kun oma kello tikitti ja minulle ei oltu edes annettu kaikkia resursseja. Olen luonteeltani tehokas suorittaja, enkä kokenut alituista materiaalien odottelua ja varpaillaan olemista hyvänä omaa työskentelyäni tukevana asiana. Grafiikoiden lisäksi minulta uupui tekstejä, mikä teki palstoitustyöstä haastavaa. Toisaalta alituinen materiaalien odottelu pakotti minua ylläpitämään tarkkaa to-do-listaa, mikä ehkäisi aina säätöä työskentelysessioiden alussa ja auttoi minua pysymään kärryillä irtonaisista asioista.Keskustelimme lounasaikaan Ilmari Kumpusen kanssa nettisivuasioita selviksi, mutta jo itse PDF-tiedostosta sai hyvän kuvan graafikoiden vaatimuksista. Nettisivut etenivät illan ja aamuyön aikana kohti niukkojen sisältöjen määrän sallimaa vaihetta.

2. Koodaamista, graafikkotöitä, kritiikkiä ja hajoamista (27.75 h)

Taustakuvat asettelin paikoilleen niin, että ne rullaavat muun materiaalin mukana. Alunperin graafikot toivoivat taustakuvaksi liikkuvaa kuvaa, ja opin pienellä taustatutkimuksella, että sekin on mahdollista. Asia ei kuitenkaan toteutunut lopulliseen versioon, mikä oli positiivista latausajan lyhentämisen suhteen. Koe14-etusivun gif-animaatio ja suunnittelijasivustolla alunperin ollut pallo ovat koko projektin ajan kokenut muodonmuutoksia funktion ja konkreettisen sijainnin suhteen, mitä on ollut hauska seurata. Alkuperäisen iframe-rakenteen kanssa ensimmäiset ongelmat ilmenivät, kun en saanut Ylös-nappia toimimaan halutulla tavalla. Rikoin graafikoiden millintarkkaa suunnitelmaa asettelemalla leijuvan Ylös-napin syvättyihin sivuihin, jolloin se reagoi sisältöön. Käytännölliset ja ihanat divit auttoivat tässäkin, se koodinkokonaisuus on ollut ehkä merkittävin oppi projektissa. Opiskelin ongelmanratkaisun kautta Javascriptiä, eli vuorovaikutteista ja yleisesti käytännöllistä koodia. Menulinkkien kuvatiedostot piti saada reagoimaan hiiren leijumiseen ja klikkaamiseen. Varsinkin info-nappulan kanssa säätö oli hauskaa ja avartavaa. Puolituntinen jonka olin käyttänyt ylös-napin säätämiseen toi tälle vaiheelle paljon hyötyä. Sponsoreiden oman divipalkin vääntäminen ei ollut enää niin haastavaa, kun hiireen reagoivia kuvia oli tullut tehtyä aiemmin illan aikana. Iso osa sponsorinappuloista pääsi paikoilleen ja linkitin ne sponsoreiden sivuille.

Tein tämän työstösession aikana sen virheen, että otin kontilleni graafikoiden töitä. Jotkin grafiikat olivat megasuuria, joten kävin pienentämään niitä ja tietysti graafikoiden mielestä ne näyttivät edelleen vääränkokoisilta. Asiaan on sinänsä vaikea keksiä selkeää ratkaisua, sillä graafikot eivät voi tietää minkä kokoiset nappulat näyttävät web-kokonaisuudessa hyviltä ilman aiempia malleja. Olin kuitenkin joutunut odottamaan materiaaleja niin kauan, että halusin päästä etenemään. Puolustuksekseni voin sanoa myös, että kuvankäsittelyohjelmiin on kirjoitettu scriptejä, joiden avulla kokonaisen kansiollisen kuvia voi muokata parilla klikkauksella. Kyseessä ei siis ollut iso homma, mutta myöhemmin opin jättämään graafikoiden hommat suosiolla graafikoille, sillä nettisivujen rakentelu oli päätehtäväni.Palaveria pidettiin Facebookin välityksellä aina, kun jokin asia oli graafikoiden PDF-tiedostossa oli epäselvää.

Keskusteluissa materiaalien alkuperäiset deadlinet saivat peräänsä arvioidut myöhästymiset heti:

Jatkoin seuraavana päivänä sen verran, mitä edelliseltä illalta oli jäänyt tekemättä, ja mitä kykenin tekemään sisällöillä. Muokkasin osoitepalkkiin ikonin ja rakensin sivujen palstajaot. Tein ulkoasuja valmiiksi, että materiaalien asettelu olisi helppoa myöhemmin.Seuraavana päivänä minulta uupui vielä etusivuteksti, jotta olisin saanut nettisivut työstettyä julkaisukuntoon. Kyselin tekstejä klo 16 facebookissa, mutta en kyennyt etenemään sivujen suhteen, kiitos muiden myöhästelyn.

Sivusto 18.3.2014

Sivusto 18.3.2014

20.3.2014 / klo 18:30 – 21:45 + 22:20 – 02:20 / 7.25 h / työstöSain paljon materiaalia muvalaisilta ja graafikoilta. Sponsorilogoja (Trendi, Lily, Pullapojat) joutui taas pienentelemään, ja ne päätyivät liikkuvan letkan jatkeeksi. Sponsorit eivät missään vaiheessa ennen muotinäytöspäivää olleet koossa, vaan viimeisin tuli päivittää vielä näytöspäivän jälkeen. Laitoin paikoilleen etusivun tekstit rakentamiini palstoihin, ja törmäsin ongelmaan: selain ei jostain syystä osannut näyttää suomalaisen aakkoston erikoisempia merkkejä. Tajusin, että käyttämässäni koodipohjassa kieli oli asetettu englanniksi (lang=”en”), eli muutin sen suomeksi (lang=”fi”). Homma ei vielä toiminut tällä, vaan minun piti kaivella vähän resursseja ennen kuin opin ratkaisun ja sitä kautta taas käytännön nettitoimivuutta. Ongelmanratkaisukykyä vaati myös rullapalkin asettelu, joka johtui tiedosto-ominaisuuksien haravoinnin päätteeksi yhdestä eksyneestä koodinpätkästä. Graafikoiden toiveena oli suunnittelijoiden nimilista, jota ympäröi musta kehys ja jonka takana pyörisi 3d-mallinnettu pallo. Koska elementtien piti olla päällekkäin ja läpinäkyviä, oli taas itsenäisen opiskelun paikka. Vastaus oli z-indeksi ja päällekkäiset divit. En ollut koskaan kuullutkaan asiasta aiemmin, mutta se alkoi pelittää. Koko ilta oli melko ristiriitainen – pitkiä tunteja tietokoneen edessä, mutta myös sieltä täältä pirskahtelevia onnistumisen tunteita. Tein suunnittelijasivuston valmiiksi niillä materiaaleilla, joita minulle on tähän mennessä annettu. Sivuston pohja oli helppo toteuttaa taulukoilla, ja hiiren kanssa interaktiivisia profiilikuvia täytyi jälleen koodata interaktiivisiksi. Tein myöhempiä tekstejä varten erillisen html-pohjan, mutta julkaisuun tässä vaiheessa menisivät vain kuvalliset osuudet linkkeineen. Puuttuvia kuvia simuloin väliaikaisilla kuvilla, jotka voisi myöhemmin korvata.

21.3.2014 / klo 10:45 – 15:00 / 4.75 h / työstö + ensimmäisen version julkaisu

Blogiosuus oli oma projektinsa seuraavalle päivälle. Saamani kuvat olivat jättikokoisia, joten minun tuli pienentää ne. Onneksi Dreamweaverilla on helppo asemoida tekstiä visuaalisesti, ettei blogiin tarvinnut viljellä rivinvaihtoja käsin. Aiempaa leijuvaa divikoodia oli helppo hyödyntää blogin arkistolaatikossa, mikä oli kokonaan oma ideani ja graafikot sattuivat tykästymään siihen. Ilmeisesti ideointi voi venyä hyväksytysti työryhmien ylikin tällä tavoin.

Nähtävästi minulla olisi kuulunut olla kaikkien paitsi Marinan kuvat ja tekstit, mikä tuli ilmi kun Piialla ja Leonilla oli sama blogiteksti, ja kysyin kummalle se kuuluu. Piia lähetti minulle Justuksen puuttuvat blogin kuvamateriaalit ja Leonin tekstit. Marinalta puuttuivat kaikki aineistot, sillä hän oli reissussa. Kun kyselin Iinan ja Justuksen suunnittelijaprofiilikuvia, sain vain InDesign-pohjat enkä kuvatiedostoja... Kysyin siis Tinolta niitä ja sain ne aika pian. Vielä tässä vaiheessa projektia oli normaalia, että sain materiaaleja sieltä täältä, enkä keskitetysti graafikoilta kuten myöhemmin. Eri puolilta tulevat materiaalit sekoittivat turhaan, ja grafiikat tulivat missä muodossa sattui. Kun sitten sain sivut julkaisuun, sain saman tien puhelinsoiton perääni Ilmarilta, ja soiton sisältö oli kiteytettynä se, että voidaanko tavata koululla, nuo sivut ovat rikki, ne pitää korjata totaalisesti. Ehdotin mieluummin tapaamista seuraavalle viikolle. Ilmarin soiton jälkeen Tino hyppäsi facebookissa mukaan ja lähetti minulle PDF:än korjauksista. En pystynyt edes avaamaan sitä, olin sen verran lopussa nettisivutyöskentelyn suhteen. Joten pidin suosiolla viikonlopputauon että jaksaisin käydä uuteen urakkaan seuraavalla viikolla.

Sivusto 21.3.2014

25.3.2014 / Klo 13:00 – 13:30 / 0.5 h / kokousPidimme Tinon ja Ilmarin kanssa palaverin heidän ehdottamiensa korjausten suhteen. Sivuston toimivuuden kannalta oli tärkeää hakea ero syvätyistä sivuista ja tehdä vaan nöyrästi jokaiselle sivulle oma rakennesivu, vaikka niiden päivittäminen ja muokkaaminen vaikeutuisikin. Tämä varmistaisi sivuston toimivuuden, mutta se tietysti aiheuttaisi moninkertaisesti työtä kun ulkoasua pitäisi muuttaa tai sponsorilogoja lisätä (mitä tulisi tapahtumaan paljon). Tässä vaiheessa neljän sivun päivittely tuntui vielä inhimilliseltä pieneltä pahalta, kun tiedossa ei ollut erillisen mobiilisivuston tarvetta.

27.3.2014 / klo 18:30 – 20:00 + 20:45 + 23:00 / 3.75 h / työstöSivuston perustusten uusiminen hyötyi vanhasta versiosta paljon. Materiaalit oli jo ryhmitelty hierarkioihin, ne oli muokattu oikeisiin kokoihin, ja suurin osa koodista pääsi kierrätykseen sillä samat toiminnot haluttiin edelleen sivustolle. Sivuston käytettävyysongelmat täytyi vain kokea käytännön kautta, enkä usko, että olisin vieläkään perillä divien käytännöllisyydestä muuten. Uusin sivuston rakennetta tekemällä ensin uuden pohjan, jossa menunappulat päätyivät omalle divilleen. Koodasin sisällön skaalautumaan horisontaalisesti selainikkunan mukaan ja divin venymään vertikaalisesti sisällön mukaan. Tässä vaiheessa sponsorit haluttiin edelleen pitää esillä ja piilotettavina koko ajan, joten ne menivät omaan diviinsä. Sosiaalisen median sivustot oli vihdoin luotu, joten ne piti linkittää paikoilleen. Kun pohjan sai valmiiksi, täytyi vain kopioida se neljän eri sivun pohjaksi ja integroida siihen jos valmiiksi koodattuja sisältöjä.

3. Kompromisseja ja uudelleenrakennusta (19 h)

28.3.2014 / klo 19:45 – 23:00 / 3.25 h / työstöPääsin taas graafikkohommiin, kun kuvatiedostoja täytyi pienentää suuret määrät kerrallaan ja testailla miltä erikokoiset kuvat näyttäisivät muun sivuston kanssa. Tein jokaiselle omalle sivulle sen tietyn sivulinkin aktiiviseksi, kuten pojat alunperin olivat halunneet. Omana ideanani toimineet horizontaaliset viivat hylättiin tylysti, joten niiden tilalle tuli paremmin minimalistista imagoa tukevia läpinäkyviä tilanjakajia.

29.3.2014 / klo 17:15 – 20:15 / 3 h / työstöSuunnittelijalinkkien taulukon kuvaa piti pilkkoa, muuttaa sen kokoa ja muuten testailla. Taulukkokehystä ei saisi ainakaan vaivatta mustaksi suunnittelijoiden nimien ympärille, koska kaikkien muiden kymmenien taulukoiden kehykset on säädetty valkoisiksi. Pyörivä pallo haluttiin edelleen suunnittelijataulukon yhteyteen, mutta sitä ei voinut enää asetella kun sivustosta oli tehty entistäkin responsiivisempi. Olin opetellut pyörivän pallon kanssa elementtien päällekkäisyyttä, jota pääsin soveltamaan leijuvan sponsoripalkin kanssa. Korjasin näytös-sivun giffin koon mukautumaan maksimissaan 65% divin kokoon, eli lisäsin interaktiivisuutta. Blogisivun tekstejä piti formatoida uudestaan ja arkistolaatikkoon tein pienet linkkikuvakkeet, ja sivut päätyivät jälleen nettiin ja kovan kritiikin alaisiksi.

31.3.2014 / klo 17:00 – 18:15 / 1.25 h / kokousKävimme Tinon ja Ilmarin kanssa läpi vielä ”pieniä hiomisia”, joita nettisivu tarvitsi. He olivat lähettäneet PDF:n etukäteen, mutta lupasivat päivittää sitä seuraavalle päivälle yhteisen keskustelumme pohjalta. Annoin graafikoille kuvien kokoja, joiden pohjalta he työstäisivät uusia versioita. Sain myös suunnittelijoiden mallistojen kuvaustekstejä ym. materiaalia, mutta seuraavana päivänä niiden työstäminen olisi mielekkäämpää materiaalien epätasaisen saapumistahdin takia. Muiden deadlinejen venyminen ja paukkuminen on vaatinut kärsivällisyyttä ja oman jaksamisen tunnistamista sekä sen ilmaisemista muille. Kyllä projektiryhmä tykkää vaatia jäseniltään ihan niin paljon kuin nämä ovat valmiita antamaan, eli täytyy vain olla oma-aloitteinen ja vetää rajoja. Vastuuntuntoisuus ja suoritushalu ehkäisevät osaltaan stressin alla taipumista, joten projektin aikana on ollut usein tyypillisempää jatkaa van urheasti eteenpäin.

Sivusto 28.3.2014

Sivusto 29.3.2014

Sivusto 29.3.2014

Tällä kertaa oli tehtävä kunnon to-do lista, kun materiaalia oli tullut niin hajanaisesti jokapaikasta ja PDF:ssä oli tavaraa, jota esimerkiksi FB-viesteissä ei tullut ilmi. Materiaalien arkistointiinkin meni oma aikansa. Info-nappulan liikkeestä ja liikkumattomuudesta oltiin tehty jo paljon vaihtelevia päätöksiä, ja nyt graafikot olivat päätyneet jatkuvasti liikkeellä olevaan giffiin joka ei reagoi hiireen mitenkään. Korjasin some-nappien erottajaviivan jokaiselle sivulle erikseen visuaalisen ilmeen mukaisesti Kiinnitin sponsorinapit alareunaan ja menunapit yläreunaan joka sivulle erikseen. Liikkuvien sponsorinappien sijaan olimme päätyneet kokouksessa gif-tiedostoon, joka niin ikään näyttää kaikki sponsorit ja vilkkuu esteettisesti. Tämäkin oli mielenkiintoinen välivaihe, ja huokaisin helpotuksesta kun minun ei tarvinnut hetkeen linkittää nappuloita erikseen ja minun tarvitsi vain korvata yksi kuvatiedosto uudella, kun pojat muokkasivat sinne satunnaisesti tipahtelevia sponsorinappeja.Koska tyhjä tila oli tärkeää visuaalisella puolella, pudottelin erottajakuvia joka sivun alkuun ja loppuun niin, että materiaalin ja reunan väliin jää tilaa molemminpuolisesti. Graafikoiden mielestä tämä oli vähän liikaa, ja sitten jouduinkin poistamaan pari per sivu kun heidän näkemyksensä muuttui. Etusivun juliste vaihtui pyöriväksi palloksi, jota klikkaamalla pääsi sivustolle. Myöhemmin animaatio lempattiin latausaikojen takia, mutta uudelleenohjaus pysyi kyllä viimeisessä versiossa. Tino lähetti erilaisia taustakuvia eri sivuille, joten ne piti määritellä kaikille sivuille erikseen.Sitten kävin yksittäisten sivujen kimppuun. Palstanvälien hinkkaaminen oli yksi graafikoiden obsessioista (tietysti), mutta onneksi perehdyin Dreamweaverin fonttimuokkausmahdollisuuksiin ja täten rivinvälien ym. määrittely ei ollut niin tuskaista kuin se olisi voinut olla. Englanninkielisen tekstin värin muuttaminen tietyksi väriarvoksi vaati Photoshopiin menemistä ja HEX-desimaaliarvon etsimistä Tinon antamien RGB-arvojen perusteella. Sitten haettiin koodi toisen sivun arkiston värikoodista ja kopioitiin se määritelmiin.

Blogipostaukset tultaisiin arkistoimaan päivämäärien mukaan, eli päivämäärän klikkaaminen vie päivän ensimmäiseen blogipostaukseen, joka on alimpana kuten blogeissa yleensä. Kun käyttäjä skrollaa ylemmäs, hän pääsee tuoreempaan materiaaliin. Selainyhteensopivuus on ollut koko projektin ajan vaikea aspekti, sillä selaimilla on aina oma tyyli käsitellä rivinvälejä ja kuvan ja tekstin interaktiota. Käyttämäni pohja on tarjonnut melko hyvät webkit-koodit asian auttamiseksi, mutta kaikki koodinpätkät eivät aina taivu sen alle.Laitoin mallistonkuvaukset suunnittelijat-osioon. Suunnittelijoiden teksteihin piti koodata graafikoiden haluamat rivinvälit, väritykset, tasaukset erikseen... Graafikot olivat möhlineet grafiikat, eli nimet viittasivat oikeisiin henkilöihin, mutta esim. Polinasta tuli Broci ja kirjoitusvirheitä oli siellä täällä. Noh, lähetinkin siitä facebook-viestin Tinolle ja asia korjautui pian. Marinan kuva vielä puuttui mutta tekstin sain esille blogiin. Isan mallistonkuvausta ei ole edelleenkään kuulunut, vaikka hän lupasi lähettää sen. Molempien henkilöiden materiaaleja sai taas odotella ja kysellä.Tuona iltana tapahtui pienimuotoinen hajoaminen, joka johtui nettisivuihin kohdistuneesta, jatkuvasta hiomiskritiikistä. Graafikoilta oli aina tullut uusi korjauksia täynnä oleva PDF kun olin saanut sivujen uudet versiot julkaisuun, ja korjauksille ei näkynyt loppua. Tuntui siltä, että työtäni ei arvostettu ja mikään ei kelvannut. Yksin työstäminen lisäsi avuttomuuden tunnetta, varsinkin kun kaikki toimivuuden ja visuaalisuuden tasapainotteluun liittyvä oli täysin omalla kontilla. Aina kun koodia lähtee muokkaamaan, täytyy pelätä koko rakenteen kaatumista kun kyse voi olla yhden pienen tagin eksymisestä. Keskusteltuani asiasta läheisen kanssa päätin ottaa yhteyttä muvan vastuuopettaja Minna Cheungiin sähköpostitse, jotta voisin saada selvyyttä siihen, mitä minun tulisi oikeasti vielä tehdä projektin eteen. Tunteja oli kertynyt tähän mennessä yli 50, ja niitä tulisi lisää sovittujen blogipäivitysten merkeissä.

1.4.2014 / klo 14:20 – 15:05 + 18:15 – 23:15 / 5.25 h / työstö

2.4.2014 lähtien suunnittelijapallosta tulikin pääsisäänkäynnin kuvalinkki

2.4.2014 / klo 8:15 – 09:45 / 1.5 h / työstö

Tino lähetti Brocin, Justuksen, Piian ja Marinan uudet suunnittelijanimipalkit korjausehdotuksen mukaan aamulla, ja heitin ne saman tien sivustolle. Piialtakin tuli tavaraa, nimittäin Brocin paranneltu suunnittelijateksti, jonka laitoin 10min sisällä vastaanottamisesta sivustolle. Kontaktitiedot ja portfoliolinkit olivat tiedossa joten ne tuli myös päivittää.Piia lähetti blogipäivityskalenterin, josta oltiin jo valmiiksi jäljessä ja josta oltiin koko projektin ajan myöhässä epäsäännöllisen varmasti. Puuttuviksi materiaaleiksi jäivät vielä edelleen Valkolan ja Marinan avainsanat, Tuovisen ja Väkiparran mallistonkuvaukset ja Urmaksen kontaktitiedot.

3.4.2014 / klo 13:10 – 13:40 / 0.5 h / päivitys

Päivitin Brocin portfoliolinkin suunnittelijat-osioon, ja Tiina Tuovisen mallistotekstin ja avainsanat suunnittelijat-osioon. Sain vihdoin Isan malliston kuvauksen joten pistin senkin suunnittelijat-osioon avainsanojen ja kontaktitietojen kanssa. Ilmari lähetti uuden infogiffin ja sponsorigiffin, eli korvasin vaan kuvatiedostot serverille. Se päätettiin laittaa taas liikkumaan. Poistin yhden erottajakuvan per sivu niiltä sivuilta, joista Ilmari valitti. Aikataulullisesti oli aika päivittää ensimmäiset blogipäivitykset, mutta materiaaleja ei tietenkään ollut kuulunut.

Sivusto 2.4.2014

Sivusto 2.4.2014

Sivusto 2.4.2014

Sivusto 3.4.2014

3.4.2014 / klo 14:05 – 15:05 / 1 h / kokousKokoukseen osallistuivat Ilmari Kumpunen, Tino Nyman, Polina Morgunov, Ida Mohell, Tiariia Tamminen ja Minna Cheung. Pääaiheena olivat resurssien hyötykäyttö ja budjetti-asiat. Omalta kannalta kokous tuli tarpeeseen siinä mielessä, että puheiden pohjalta nettisivujen rivinvälistyksiä tms. toimivuuteen liittymätöntä ei enää viilattaisi eikä siihen käytettäisi työtunteja. Näin kuitenkin kävi myöhemmin, mutta asia oli hyvä saada kokouksessa työryhmän tietoisuuteen. Blogin ja sisällön päivittäminen olisi tärkeintä, ja myös näytöksen livestream-video sekä näytöksen jälkeen näytösvideo mainittiin (mutta kumpikaan ei toteutunut lopuksi). Nettisivujen sisällön kannalta tuli selväksi, että jos jotain puuttui senhetkiseltä sivustolta, asianomaisen tulisi toimittaa se allekirjoittaneelle.Korostettiin myös mobiiliversion toimivuuden tärkeyttä. Sivut toimivat tietokoneella ja tablettilaitteella ok, mutta puhelimen kanssa eivät täysin näkyneet tai toimineet oikein. Graafikot lupasivat sopia Antti Heinosen kanssa tapaamisen mobiilisoveltuvuuden kannalta, mutta sitä ei hoidettu ja asia jäi siihen ja jälleen omille harteilleni täysin.

3.4.2014 / klo 23:30 – 00:15 / 0.75 h / päivityksiä6.4.2014 / klo 23:50 – 00:05 / 0.25 h / päivityksiä9.4.2014 / klo 10:30 – 11:00 / 0.5 h / päivityksiä

Yllä mainittuina aikoina sain Piialta blogimateriaalia eli tekstejä ja kuvia, ja loin itselleni ”varastotyyppisen” kansiojärjestelmän, jonak avulla pysyisin kärryillä siitä, mitä materiaalia olisi vielä julkaisematta. Ideaalitilanne olisi ollut se, että olisin saanut kaikki blogimateriaalit samalla kertaa, jolloin olisin voinut pysyä aikataulussa ja olisin aina tiennyt, milloin päivitän blogin. Välillä tilanne olikin hyvä, ja materiaalia oli jemmassa muutamana päivänä. Koska kaikki tuli myöhässä kirjallisesta aikataulusta, oli päivitysten päivämäärät sovittava aina tilannekohtaisesti, mikä taas teki koko aikataulun turhaksi. Tietenkään syy ei ollut yksin Piian, vaan blogimerkintöjä tuottivat kaikki opinnäytetyömallistoja valmistelevat muvalaiset, ja kyse oli enemmänkin kollektiivisesta priorisoinnista.

4. Resurssien tarkastelua ja mobiilitoimivuuden kanssa kamppailua (13.5 h)

10.4.2014 / klo 12:05 – 12:45 / 0.5 h / kokousPidimme graafikoiden kanssa kokouksen, josta oltiin sovittu viikko aiemmin. Antti Heinosta ei saatu kiinni eikä hänen kanssaan ei oltu (vastoin lupauksia) sovittu tapaamista. Kyseessä oli nykyisten nettisivujen muokkaaminen mobiiliystävällisemmiksi, ja tässä vaiheessa yritettiin pitää sivut yhdessä versiossa joka olisi mahdollisimman monipuolinen. Asiat menivät melko vaikeiksi, kun täytyi tasapainotella kahden eri formaatin välillä. Etusivu otettaisiin kokonaan pois, jotta kävijä pääsisi suoraan nettisivuille ilman ylimääräisiä klikkauksia. Ilmari tekisi uuden giffin etusivuille. Sponsoripalkki haluttiin ensisijaisesti piiloon muualla kuin etusivuilla, minkä kohdalla piti pohtia taas sponsoreiden näkyvyyttä ja käyttäjäystävällisyyttä. Toisaalta ei ole hyvä, että kävijät joutuvat jatkuvasti piilottamaan sponsoripalkkia, mutta sponsoreiden kuuluu saada näkyvyyttä. Ilmari muutti taas mieltään info-giffin suhteen; se on muuttanut luonnettaan ja muotoaan läpi koko projektin ja aika lailla edestakaisin. Tämänkin olisi voinut suunnitella etukäteen ja pysyä suunnitelmassa. Keskustelimme myös mobiiliversion toiminnasta. Olisi tärkeää, että elementit (esimerkiksi menunappulat ja divit) menisivät päällekkäin kun näyttö kaventuu (eli taulukot muutetaan diveiksi). Tino lupasi toimittaa sponsorinappuloita, jotka tulisivat siis muiden sponsorinappuloiden kera jokaisen sivun alalaitaan aina pääasiallisen sisällön jälkeen. Sponsoripalkki putoaisi siis kokonaan pois. Myös suunnittelijakuvia lupailtiin transparentteina, mitä ei kuitenkaan koskaan tapahtunut. Itselle aika samantekevää, ja ei se sivun ulkoasua muuttaisi juurikaan. Työstäisin version, joka toimisi mieluiten niin mobiilissa kuin isollakin ruudulla, ja laittaisin sen Tinon ja Ilmarin testattavaksi erilliselle serverikansiolle.

11.04.2014 / klo 12:45 – 14:15 / 1.5 h / päivitys + työstöPienensin blogimateriaaleja ja päivitin blogin. Ilmarin lupaamia GIF-tiedostoja täytyi kysellä facebookin kautta, mutta sitten ne putosivat melkein heti. Huomasin taas vanhojen sivuston versioiden säilyttämisen tärkeyden, kun aiemmin pois haluttu info-nappula haluttiin kuitenkin takaisin. Ylös-napin otin myös pois joka sivulta graafikoiden toivomuksesta - se häiritsee puhelimella selaamista. Se teki kuitenkin myöhemmin taas paluun, kun päädyimme kahden version (mobiili ja normi erikseen) ratkaisuun.

12.04.2014 / klo 14:30 – 16:45 + 17:00 – 18:45 / 4 h / työstöTino ei ollut kuitenkaan laittanut lupaamiaan sponssinappuloita, eikä facebookin kautta saanut yhteyttä kuin vasta paljon myöhemmin. Jouduin siis säätämään niin mobiilisivustoa kuin normisivustoakin samaan aikaan jälkeenpäin, vaikka olisi ollut hyödyllistä tehdä pohja valmiiksi ja rakentaa sille mobiiliystävällistä versiota. Tein placeholder-kuvia jotka voisi korvata myöhemmin ja pääsin jatkamaan. Otin joka sivulta pois sponssipalkin nuolinäppäimineen, enkä mitenkään rivittänyt sponsorinappuloita, että ne voivat mennä eri riveille miten haluavat. Laitoin sivut näiden päivitysten kanssa nettiin, ennen kuin lähdin tekemään ns. kompromissisivustoa kansiokopioon.

Latasin skeletonin uudelleen ja hyödynsin sen neljän palstan mallia. Some-linkit etusivun alalaitaan, taulukot joustavammiksi diveiksi, menunappulat iskin yksinkertaisesti vierekkäin että ne kasautuisivat päällekkäin. Onnistuin divien kanssa saamaan suunnittelijasivuston responsiiviseksi, mutta sivun pikkuvikoja piti vielä korjailla jälkeenpäin eksyneen tagin takia. Venymisen ja kutistumisen lisäksi oli tärkeää, että sivulla olisi vierityspalkkeja joka suuntaan.Sain kompromissisivuston valmiiksi ja laitoin sen Tinolle ja Ilmarille testattavaksi. En kyennyt käymään facebookissa enää sinä päivänä, sillä aiemmat kokemukset olivat osoittaneet, että aina tulee negatiivista palautetta, vähintäänkin millimetreistä tekstien tai kuvien kanssa. Ja palaute olikin kiteytettynä, että tämä versio ei toimi mobiililla eikä isolla ruudulla, eli kompromissi oli huono idea. Työstäminen ei kuitenkaan todellakaan mennyt hukkaan, mikä nähtiin parin päivän päästä kun graafikoiden kanssa päädyimme siihen, mitä sivujen lopullinen olemus edustaa.

Sivusto 12.4.2014

Sivusto 12.4.2014

Sivusto 12.4.2014

Blogin päivityksen jälkeen alkoi prosessi, joka vihdoin oikeasti jäi viimeiseksi hiomiseksi, ja teki sivustosta käyttäjäystävällisen niin mobiilille, kuin tietokoneen näytöllekin koosta riippumatta. Tässä vaiheessa, noin kuukautta ennen itse näytöstä, voin sanoa tunteneeni iloa jo työskentelyvaiheessa, kun asiat olivat loppua kohden paljon selvemmät kuin alussa ja osasin suhtautua muiden työryhmien jäseniin oikein, aiempaan kokemukseeni perustuen. Aluksi sydän oli kurkussa, kun facebookiin tulvi Polinalta ja graafikoilta pelkkää valitusta kompromissisivuista. Kun luin graafikoiden tekemää PDF:ää, tuntui että pyörimme taas pelkkää ympyrää ja mikään tekemäni ei ollut riittänyt taaskaan. Puhuimme parannuksista Tinon kanssa puhelimitse. Silloiset sivut olivat optimaaliset tietokoneelle eli isolle näytölle, ja tekemäni kompromissisivut olivat oikein hyvä pohja mobiiliystävälliselle versiolle. Ennen kuin kävijä pääsisi katsomaan sivuja, hän valitsisi etusivulta

millä laitteella hän selaa, ja sitä kautta pääsisi omalle laitteelleen optimaaliselle sivustolle. Sain siis ohjeet mobiilisivuston ja normisivuston hiomiseen, ja tällä kertaa ehdotukset tuntuivat oikeasti itsestäkin hyödyllisiltä ja tärkeiltä. Tekeminen oli kokoajan innostavaa ja lopputulosta pidettiin toimivana. Ongelmia aiheuttivat lähinnä pienet eksyneet tagit, mikä on taas tyypillistä web-toteutuksessa. Info-nappi, suunnittelijoiden nimilista, blogin arkiston laatikko ja taustakuvat poistuivat mobiiliversiosta, etteivät ne aiheuttaisi pituutta latausaikoihin. Tekstien tasauksia muokattiin niin, että ne näyttäisivät hyviltä kun tekstipalstat painuvat kapeassa näytössä päällekkäin. Sponsorinappuloita piti nimetä uudelleen, asetella kauniisiin responsiivisiin riveihin ja linkittää taas. Niiden kokoja piti myös vähän muunnella. Lopputulos hyvä, elämä tuntui ihan elettävältä sen jälkeen ja seuraava projektin vaihe olikin melko vaivaton. Tyyntä loppumyrskyn edellä...

14.04.2014 / klo 16:00 – 21:00 / 5 h / päivitys + työstö

Sivuston normaaliversio 14.4.2014

Sivuston normaaliversio 14.4.2014

Sivuston mobiiliversio 14.4.2014

Sivuston mobiiliversio 14.4.2014

7.5.2014 / klo 00:05 – 00:20 + 12:00 – 13:30 / 1.75 h / päivitys ja kokousPäivitin blogin ennen päivän kokousta, johon osallistuivat suuri osa projektiryhmästä. Vähemmän omaan rooliini liittyviä asioita olivat esimerkiksi sponsorirahojen tilanne, laskutuskäytännöt ja sponsorilistat, tulostussaldo, logistiikka, perjantain ohjelma valmisteluiden suhteen, kenkien haku ja julisteiden jako, goodie bagien tilanne, tarvikelista, ruokailut, marengit, juomat, potentiaaliset kävijämäärät ja yleinen roudaus. Nettijulkaisuun liittyen graafikot aikoivat lähettää uuden PDF:än päivitettyjen sponsoreiden mukaan, mutta tätä ei tapahtunut myöhemmin kuitenkaan. En missään vaiheessa saanut parempilaatuista Varpio-logoa vaikka siitä keskusteltiin kokouksessa. Näytöksestä haluttiin live-stream video nettisivuille, ja se olisikin tapahtunut mikäli ruokapalkalla palkattavalla yhteyshenkilöllä ei olisi ollut toista keikkaa. Itselleni homma olisi ollut yksinkertainen, sillä minun olisi pitänyt vain laittaa linkki videosta sivuille. Toukokuun lopulle, raportin palautuspäivälle (30.5.), sovittiin loppuyhteenvetokokous.

8.5.2014 / klo 9:30 – 9:45 / 0.25 h / päivitysBlogipäivitys; Ida Urmaksen editorial-postaus. 9.5.2014 / klo 20:45 – 21:45 / 1 h / päivitysPäivitin Piian editorial-blogipostauksen nettiin ja korjasin Ilmarin bongaaman kirjoitusvirheen. Isa Väkiparta ei tulisi osallistumaan näytökseen, joten hänen suunnittelijaprofiilinsa tuli poistaa sivustolta. Tässä vaiheessa ei vielä poistettu Väkiparran blogipostauksia, ainoastaan suunnittelijaprofiili. 10.5.2014 / klo 12:20 – 12:35 / 0.25 h / päivitysJustus K:n editorial-blogipostaus nettiin. Se jäikin viimeiseksi postaukseksi ennen näytöstä.

5. Blogin ja sisällön päivittämistä ( 9.25 h)

15.4.2014 / klo 15:25 – 15:55 / 0.5 h / päivitysSain Piialta edellisenä yönä kaksi blogimerkintää kolmisen päivää myöhässä. Pistin yhden niistä blogiin. 16.4.2014 / klo 23:30 – 00:30 / 1 h / päivitysBlogipäivitys ja suunnittelijaprofiilitekstien korjailu Ilmarin lähettämän tiedoston mukaisesti. 25.4.2014 / klo 22:00 – 23:00 / 1 h / päivitysSain Piialta iltayhdeksän aikaan neljän blogipäivityksen materiaalit, aikataulun mukaan tänään piti siis päivittää ne. Muvalaiset olivat tietysti taas myöhässä omasta aikataulustaan, mutta itse sain ne ajallaan laitettua. Pienensin kaikki neljä blogikuvaa oikean kokoisiksi ja arkistoin, päivitin Piian pyynnöstä Brocin ja Piian ”working on it” postaukset blogiin. Blogipäivitykseen olisi kuulunut ”Behind the Scenes” -video, jota ei loppujen lopuksi tullut ollenkaan. Muutenkin videomateriaalin kanssa on ollut nihkeää; ainoastaan teaser-video on saatu asiallisen hyvissä ajoin julkaisuun (asiallisen hyvissä ajoin viittaa siihen, että se saatiin sivuille jopa ennen näytöstä). 27.4.2014 / klo 13:00 – 13:15 / 0.25 h / päivitysPäivitin Piian pyynnöstä Caritan ja Ida M:n ”working on it” postaukset blogiin. Tyypillistä aikataulun seuraamisen sijaan olivat tosiaan sopimuksenvaraiset ja tilannekohtaiset päivitysaikataulut. 29.4.2014 / klo 23:30 – 23:45 / 0.25 h / päivitysPäivitin Justuksen ”working on it” postauksen blogiin. Blogipostausmateriaalin olin saanut tasan vuorokausi aiemmin.

1.5.2014 / klo 20:35 – 22:05 / 1.5 h / päivitysPäivitin Ida Urmaksen blogipäivityksen mobiiliin ja yleisversioon. Olin saanut nämäkin blogipäivitysmateriaalit (yllättäen) samana iltana, kun minun odotettiin päivittävän ne nettiin. Facebookiin oli tullut logoja, ja graafikot ilmeisesti vielä lomailivat Barcelonassa, joten otin logot talteen (Dinsko, Jaminthebox, Acolyth), muokkasin ne ja päivitin. ”VAPAA PÄÄSY” teksti pääsi etusivulle Facebook-ryhmän ehdotuksesta.

6.5.2014 / klo 10:30 – 11:00 + 20:05 – 20:50 / 1.5 h / päivitysMuutin blogikuvien kokoja, sain uudet blogimatskut edellisenä päivänä Piialta ja päivitin blogin, lisäsin Shopaliken sponsorilogon sekä joitain graafikoiden uudelleenmuokkaamia logoja. Koulun nettiyhteys oli kuitenkin harvinaisen katkoileva, mistä johtuen tiedostot eivät olleet latautuneet serverille oikein. Sain illalla Ilmarilta paniikkipuhelun, mutta ongelma ratkesi sillä, että latasin sivuston uudelleen serverille omalta koneelta ja omalla internet-yhteydellä.

Teaser-video näytös-sivulla

Sisällönpäivitystä 5. vaiheen aikana

Sisällönpäivitystä 5. vaiheen aikana

6. Viimehetken paniikki ja näytöksen jälkeinen aika (8 h)12.5.2014 / klo 11:45 – 12:30

+ 20:45 – 21:45 / 1.75 h /13.5.2014 / klo 14:30 – 14:45 / 0.25 h /

väliaikainen palvelinmuutto + päivityksiä

Edellisenä iltana oli tullut tieto siitä, että koko muva.fi sivusto eli myös koe14-sivusto oli kaatunut Tapahtui pieni sydänkohtaus, kun pelkäsin sotkeneeni jotain edellisen päivityksen aikana. En kuitenkaan ollut koskenut serveriin tai koodiin kahteen päivään, ja samana aamuna sivusto oli vielä toiminut. Syyksi paljastui lopulta verkkotunnuksen uusimisen tarve, joka tosiaan ratkesi Minna Cheungin toimesta seuraavana päivänä. Tilapäisenä ratkaisuna menimme Piian kanssa lounastauolla Antti Heinosen puheille. Sain käyttäjätiedot Muotoiluinstituutin serverille, jonne Heinonen teki minulle käyttäjän ja kansion. Latasin sivut serverille väliaikaiseen osoitteeseen http://muotoiluinstituutti.fi/muva/. Se ei vaatinut suuria ponnisteluita, koska olen rakentanut sivut paikalliselle levylle, joten kaikki verkossa näkyvä ja rutkasti enemmänkin on tallessa kovalevyillä ja pilvessä. Seuraavana päivänä serverille pääsi taas, ja sivut päätyivät alkuperäiseen osoitteeseensa. Piia ilmoitti, että Isa V:n lisäksi myöskään Tiina ei osallistuisi, eli otin heidän profiiliensa lisäksi myös heidän tekemänsä blogipostaukset pois nettisivuilta.

14.5.2014 / klo 21:25-22:10 / 0.75 h / päivityksiäFondi ja Laatupalvelu olivat tulleet mukaan sponsoroimaan, joten yritysten logot piti lisätä sivuille. En tiennyt mihin linkittää Teollisuuden Laatupalvelu JK OY:tä, eikä ilmeisesti Piia tai Ilmarikaan, joten jätin linkittämättä. Ilmari sai molemmat logot minulle illaksi. Laitoin myös uudelleenohjauksen väliaikaisilta sivuilta muvan serverillä oleville sivuille, varmuudeksi jos joku eksyy tilapäisille sivuille.

16.5.2014 / klo 7:45 - 8:15 / 0.5 h / päivityksiäEdellisenä iltana tuli ilmi, että nettisivuilta puuttui vielä kolme logoa. Minulle ei oltu kerrottu sponsoreista ollenkaan, eikä varsinkaan toimitettu logoja, minkä ilmaisin keskustelussa. Aamulla klo 7.30 huudeilla sain facebookin kautta logot. Koin, ettei niitä olisi sopivaa jättää näytöksen jälkeiseen aikaan, vaan ne olisi asiallista laittaa sivuille ennen näytöstä. Pusersin siis puoli tuntia aamurutiineistani aikaa siihen, että latasin, muokkasin ja lisäsin (taas, kaikille sivuille erikseen) Minna Parikan, Varustelekan ja Zion logot. Ehkä mielenkiintoisin hetki tässä viimeisessä projektin vaiheessa.

23.5.2014 / klo 22:30 – 01:00 / 2.5 h / päivityksiä24.5.2014 / klo 10:00 – 12:15 / 2.25 h / päivityksiä

Jos tämän projektin kanssa jokin asia oli varmaa, niin se, että materiaalit valuivat allekirjoittaneelle aina myöhässä, ja kaiken lisäksi epäsystemaattisen myöhässä. Tino oli lähettänyt ohjeistuksia ja muita materiaaleja edellisenä iltana. Piia oli käynyt pyytämässä sähköpostiosoitteeni päivällä kuvan ja teorian luennon tauolla ja laittoi valokuvat päivän aikana tulemaan. Kuvamateriaalit oli tärkeää saada sivuille, mutta koko projektin luonteeseen sopivasti olen julkaisupuolella pohjimmaisena yrittämässä korjata muiden aikataulukompasteluja. Tino lähetti Shelbyn sponsorilogon, joka piti tietysti lisätä kaikille sivuille erikseen.Suurin osa ajasta kului näytös-sivun rakentamiseen. Teaser-video valui alimmaiseksi, ennen työryhmää ja sponsoreita, kuvamateriaalien jälkeen. Graafikot olivat suunnitelleet toiveikkaasti näytösvideon sivun ylimmäiseksi elementiksi, mutta videota ei näkynyt eikä kuulunut edes raportin viimeistelypäivään mennessä. Otsikot olivat kuvatiedostoina, koska graafikoiden haluamaa fonttia ei saanut selainfonttina. Rakensin niihin aktiiviset ja passiiviset statukset eli aktiivihiirihoverkoodauksen. Diveillä vuorottelin siis yhden palstan (otsikkokuva) ja kolmen palstan (kuvien rivit) välillä – ne menivät

kauniisti päällekkäin kun näyttö kaventuu, eli pääsin soveltamaan samaa koodia mobiiliversiossakin. Etusivun kaksipalstaisuutta pääsi hyödyntämään kiitostekstin kohdalla. Etusivulle uutta oli työryhmälista, muutoin koko nettisivu pysyi muuttumattomana.

Homma tyssäsi perjantai-illalta siihen, että Piia oli kyllä lähettänyt näytöksen valokuvat ja Tino selkeät ohjeet, joissa ei jäänyt hämärään mitään. Ongelma oli se, että en voinut tietää mikä suunnittelija meni minkäkin kuvan alle, tai mikä kuva kuului mihinkin mallistoon. Ilmaisin asian Piialle joka lupasi laittaa tulemaan selvitystä seuraavana päivänä. Tämä ei kuitenkaan ollut tarpeellista, sillä osasin seuraavana aamuna itse kaivaa facebookin koe14-valokuvakansiosta nimetyt kuvat, ja menin sen mukaan. Nimesin kuvatiedostot hierarkisesti, pienensin niitä kun ne olivat tietysti jäätävän isoja, iskin ne rakentamaani gridin malliin ja kärsin vartteja varsinkin opinnäytetyömallistojen kanssa. Kuvien nimeäminen suunnittelijoiden mukaan oli mekaanisen tappavaa, mutta onneksi kaikki yllä luetellut koodaukset sai kätevästi kopioitua ja liitettyä mobiiliversioon.

28.5.2014 / ajatuksia raportin kirjoittamisen jälkeen

Materiaaleja jäi vielä puuttumaan viimeisessä työstövaiheessa ja suurin osa niistä oli editorial-kuvia, jotka saapuivat kaksi iltaa ennen loppukokousta. Näytös-kuvien tuotto riippui näytöksestä ja valokuvasta itsestään ajallisesti, joten ymmärsin niiden suhteellisen myöhästymisen. Valokuvia ei kuitenkaan oltu muokattu tai rajattu, ja menin sillä mikä minulle annettiin. Ohjeistus näytös-sivun päivittämiseen tuli tosiaan 22.5., ja valokuvat 23.5. Valokuvista on tullut yleistä rakentavaa kritiikkiä, mikä tuntuu kohdistuneen minuun vaikka en kuvia ottanut tai muokannut. Ohjeistus oli kuitenkin puutteellinen ja graafikot muuttivat mieltään asioista kun olin ehtinyt jo työstää sivun ohjeen mukaisesti. He lisäsivät vielä jälkikäteen mobiiliversionkin, joka täytyisi muokata nykyisen tilalle, ja kuvien ja tekstien asemointia pitäisi heidän mukaansa muuttaa.

Raportin kirjoittamisen jälkeenkin minun täytyy luultavasti korjata kyseinen sivu täydennettyjen materiaalien pohjalta, kunnes pääsen projektista (ja heittopussin roolista) totaalisesti eroon.En lähtisi mukaan uudestaan, mutta en voi kiistää projektin opettavaista luonnetta.