Web-sovelluksen käyttöliittymän prototypointi

Olen kesän aikana työstänyt opiskeluitani kohti valmistumista ja välituloksena sain aikaan kandidaatintyön otsikolla ”Web-sovelluksen käyttöliittymän prototypointi”. Työssä käsittelin erilaisten prototypointimenetelmien soveltuvuutta Web-sovellusten käyttöliittymien mallintamiseen ja siihen liittyviä asioita ja työvälineitä. Näkökulma oli hieman katsauksen tyylinen, eikä työssä varsinaisesti toteutettu mitään ja se kyllä näkyy työn tuloksissa: enemmän pohdintaa kuin konkreettisia asioita.

Kandidaatintyöni alkoi alkukesästä alkuraportin kirjoittamisella, ja koska havahduin kesäkurssin alkamiseen hieman myöhään, keräsin lähteet, käsittelin ohjaajan kommentit, tein aiheanomuksen ja kirjailin raportin kasaan parin viikon aikana. Onneksi alkutalvesta oli tullut hieman pohdittua aihetta ja mietittyä työn suurpiirteinen rakenne jo kuntoon, sillä alkuraportista 10 minuutin seminaariesityksen pitäminen kesäkuun alussa tulikin eteen nopeasti. Kun muiden raportteja ja professorin kommentteja kuunteli, oli omani hyvällä pohjalla muun muassa rakenteen ja lähteiden suhteen. Ensimmäinen vaihe sujui siis hyvin, vaikka jos olisin ollut hieman aikaisemmin liikkeellä, olisin voinut esittää raportin 7 hengen ryhmässä, kun nyt piti tyytyä kolme kertaa isompaan porukkaan. Se päivä hieman venyi, sillä esitysten päälle piti vielä matkustaa Helsingistä Lappeenrantaan ja takaisin.

Alkuraportin esittämisen jälkeen iskikin sitten pienoinen jatkamisen vaikeus ja kesällä työ eteni suhteellisen hitaasti. Muutamaan viikkoon en tainnut saada mitään aikaan ja kelitkin olivat mitä mainioimpia. Lopulta löysin taas oikeanlaista motivaatiota työn edistämiseen ja heinäkuun puolenvälin jälkeen loppuraportti alkoi jo muodostumaan ihan käsiteltäväksi kokonaisuudeksi. Elokuun alkupuolella sitten painettiinkin näppäimiä oikein urakalla ja muutaman kommenttikierroksen ja hienosäätämisen jälkeen oli loppuraportti esittämiskunnossa. Onneksi töissä oli kesälomien aikana hieman hiljaisempaa, jolloin aikaa jäi muullekin kuin töille.

Elokuun loppupuolella oli taas aika matkustaa Lappeenrantaan esittämään loppuraportti ja tällä kertaa ehdin aikaisempaan ryhmään 10 muun henkilön kanssa. Paljon miellyttävämpää. Jos alkuraportti oli hyvällä mallilla, ei loppuraportti aivan samalle tasolle yltänyt. Hieman teoriapainotteisuudesta ja asioiden arvioivasta otteesta johtuen työn tulokset jäivät hieman vähäisiksi, mutta onneksi eivät kyllä muidenkaan töiden tulokset mitään kovin erikoisia olleet, ainakaan sen perusteella mitä esityksistä pystyi päättelemään. Vasta työn valmistumisen jälkeen oikeastaan näki, miten aihetta olisi voinut (paremmin) käsitellä, rajata käsittelyä hieman suppeammaksi ja tarkentaa tiettyihin osiin.

Työn arvosteltavaksi lähettämistä ja kandidaatintyöksi paketoimista varten jäi siis vielä hieman hiottavaa, vaikka suuria muutoksia tässä vaiheessa ei oikein ollut aikaa toteuttaa. Hieman tarkennusta käytännön osioon, kieliasun tarkistamista ja pilkun viilausta. Lopulta työni sisälsi 43 sivua, 1 kuvan, 2 taulukkoa, 27 viitettä ja 0 liitettä. Eli hieman turhan lavea, kun ohjeistus sanoo työn mitaksi 1/3 diplomityöstä, noin 25-35 sivua. Kaikkiaan ”Kandidaatintyö ja seminaari” -kurssi koostui seuraavista kokonaisuuksista:

Arvostelun osalta ohjaaja arvioi eri osa-alueita arvostelumatriisin perusteella. Kieliasun ja johdonmukaisuuden osalta olisi voinut päästä parempaan lopputulokseen ja lähteiden analysointia olisi voinut tehdä enemmän. Työn tulokset muodostuivat nyt sellaisiksi kuin ovat ja osaltaan palvelevat aiheen jatkokäsittelyä, mutta eivät oikein yksinään tarjoa kovin erikoisia havaintoja. Ainahan sitä olisi voinut panostaa enemmän aikaa kokonaisuuden hiomiseen, mutta näillä resursseilla osa-alueet muodostuivat seuraavasti:

  • Työn suunnittelu (15%): 4.5
  • Työn tulokset (30%) : 4
  • Tekijän itsenäisyys / omintakeisuus (15%) : 5
  • Esityksen johdonmukaisuus ja huolellisuus (15%) : 4
  • Tutkielman kieliasu (10%) : 4
  • Kirjallisuuden valinta ja käyttö (15%) : 4.5

Kirjoitin työn alusta alkaen käyttäen LaTeXia, ja vaikka aivan mutkatonta ei työskentely ollutkaan, oli kirjoittaminen helppoa ja muotoiluihin ei tarvinnut erikseen panostaa. Samalla tuli tutustuttua paremmin LaTeXin käyttöön. Etenkin viitteiden ja viittausten hallinta oli erittäin kätevää BibTeX:llä: valmiit viitetiedot sai suoraan liitettyä muun muassa ACM:stä ja IEEE Xploresta. Vastaavasti oikoluvun puute teetti hieman lisätyötä ja taulukoiden, sekä kuvien joustava sijainti tekstin seassa hieman ärsytti.

Onneksi kirjoittamista ei tarvinnut aloittaa aivan tyhjältä pohjalta, vaan sovelsin jonkun Lappeenrantalaisen tekemää LaTeX-mallipohjaa englanninkielistä diplomityötä varten. Laitan jatkokehittelemäni suomenkielisen mallipohjan saataville, kunhan saan sen muokattua julkaistavaan kuntoon. Suurimmat muutokset tein lähinnä PDFLaTeXin käytössä (PNG- ja JPG-kuvat) ja viitteiden esittämisen muodossa.

Periaatteessa nyt olisi jo kasassa tekniikan kandidaatti -tutkinto (alempi korkeakoulututkinto), mutta koska opiskelen diplomi-insinööriksi vanhan tutkintorakenteen mukaisesti, on kandidaatintyö vain ”Erikoistyö”-kurssin korvaava välietappi. No, tavoite on kuitenkin korkeammalla ja siihen liittyen diplomityön kirjoittaminen alkaa siitä, mitä kandintyössä aiheen jatkokäsittelyssä pohdittiin.

Web-koodausta Espressolla ja sokerilla

Web-sivuja voi rakennella monilla ohjelmilla, mutta helpoiten se onnistuu, kun apuna on työkalu, joka oikeasti toimii. Mac OS X:ssä Eclipse-pohjainen Aptana on mitä Eclipse yleensäkin on, eli kankea, raskas ja ei oikein ole Mac-maailmaan yhteensopiva. Onneksi muitakin vaihtoehtoja on, mutta ilmaisohjelmien tarjonnan suhteen hieman nihkeästi. Kaupallisella puolella vastaavasti on muutamia hyviä vaihtoehtoja kuten Panicin Coda ja MacRabbitin Espresso.

Espresso on Web-koodaukseen tarkoitettu editori, joka tarjoaa hyvät teksti- ja CSS-editorit ja niiden ympärille rakennetun toimivan kokonaisuuden. Tekstieditorista löytyy tagien ehdotus ja täydennys ja blokkeja voi piilottaa. Koodausta voi helpottaa koodipätkillä eli snippeteillä kuten TextMate tyyliset tekstieditori-toiminnoilla. Yksi kätevä ominaisuus on sivun toteutuksen seuraaminen reaaliajassa, sillä esikatselun saa auki omaan ikkunaan ja se päivittyy sitä mukaa, kun koodiin tehdään muutoksia. Ohjelmaa avatessa avautuvat myös edellisellä kerralla auki olleet ikkunat, jolloin työympäristö on nopeasti käyttövalmiina.

Espresso

Espresso tukee vakiona HTML:ää, CSS:ää, XML:ää, JavaScriptiä ja PHP:tä, mutta sokerilla (Sugar) voi viritellä ohjelmaan tuen uusille kielille kuten jQuerylle, Rubylle ja Djangolle. Sivuston julkaiseminen on mahdollistettu käyttäen FTP:tä, SFTP:tä, FTP/SSL:ää tai Amazon S3:sta. Lompakkoa ohjelma keventää noin 60 euron verran.

Osallistuin alkutalvesta MacHeistiin, jossa jaettiin ohjelmia ilmaiseksi ja lisäksi ostin lopulta edullisen MacHeist Bundlen, jossa mukana tuli muun muassa World Of Goo, Hit List ja Espresso. Olen aikaisemmin tyytynyt pienet Web-sivujen rakennustarpeet toteuttamaan joko TextWranglerilla tai isomman muutoksen tapauksessa Aptanalla, mutta näihin verrattuna Espresso on toisesta maailmasta, paremmasta sellaisesta. Käytännössä Espresso on vastaava ja osittain parempi kuin kuin kehuttu Coda, jota myös nopeasti testailin.

Käyttöliittymän hahmottelua luonnostelemalla

Käyttöliittymien suunnittelussa ideoiden hahmottelu ja visualisointi käsiteltävään muotoon on yksi ensimmäisiä vaiheita ennen koodiin sukeltamista. Visualisointia voi suorittaa monella tapaa ja yksi kätevä keino on luonnostelu, eli piirtämällä kynällä karkea malli halutusta lopputuloksesta paperille. Yksinkertaista, helppoa ja nopeaa prototypointia, vaikka paperimallit eivät ole kovin joustavia ja muutokset ovat työläitä.

Luonnostelu on yksi yleisimmistä tekniikoista matalan tarkkuuden prototyyppien luomiseen. Menetelmässä käytetty ”kynä ja paperi-menetelmä on luonnollinen ja vähän vaivaa vaativa tekniikka, joka mahdollistaa abstraktien ideoiden siirtämisen konseptista nopeasti kiinteämmälle pohjalle. Erityisen hyödyllisen menetelmän tekee sen luovuuteen ja ajatteluun rohkaiseva luonne. Lisäksi luonnostelu rohkaisee useamman eri tekijän osallistumisen mallin luontiin, kun visuaalinen malli ja tekniikka on kaikille tuttua. Asiat jäävät myös riittävän epätarkoiksi, joka sallii tarkennusten tekemisen myöhemmin, estämättä luovuutta mallin kehittämisen aikana.

Luonnostelua voi suorittaa myös tietokoneella, hyödyntämällä Washingtonin yliopistossa kehitettyä avoimen lähdekoodin BSD-lisenssillä julkaistua DENIM-ohjelmistoa. Ohjelma tarjoaa käytännössä paperintapaisen käyttöliittymän mallien luontiin. DENIM on tarkoitettu tukemaan Web-kehittäjien alkuvaiheen suunnittelua informatiivisen luonnostelun kautta, ja tarjoaa suunnittelun tueksi kynällä luonnostelua, eri tarkkuuksille kohdentamista (sivukartta, kuvakäsikirjoitus, sivu), sivujen linkittämistä kuvakäsikirjoitusta varten, mallin ajamista esittämistä ja vuorovaikutusta varten ja mahdollisuuden luoda uudelleenkäytettäviä komponentteja. Lopputuloksen voi myös viedä linkitetyiksi HTML-sivuiksi. Javalla toteutettu DENIM on saatavilla Windowsille, Unixille ja Mac OS X:lle.

Denim Denim

DENIMillä luodut prototyypit muistuttavat kynällä ja paperilla luonnosteltuja malleja sekä hyvässä että pahassa, ja koska nyt piirtovälineenä toimii hiiri, on piirtojälki kynääkin karkeampaa. Paperimalleihin verrattuna sähköinen media tarjoaa mahdollisuuden elementtien siirtelyyn ja muokkaamiseen ja lopputuloksen dokumentointi ja säilöminen myöhempää käyttöä varten on helpompaa. Tietenkin kuten kynällä ja paperilla luonnostellessa, jää käyttöliittymän vuorovaikutuksen esittäminen ja mallin myöhempi hyödyntäminen vähäiseksi. DENIMin käyttö on suhteellisen yksinkertaista ja opasteen avulla hieman erikoinen käyttöliittymä ja sen tarjoamat toiminnot selviävät nopeasti, mutta tämänkin jälkeen työskentely on hieman hidasta ja monimutkaisen tuntuista.

DENIM tarjoaa mahdollisuuden sähköiseen luonnosteluun, mutta käyttö on hieman kömpelöä, joka tosin johtunee suurilta osin piirtovälineenä käytettävästä hiirestä. Piirtopöydällä käytettynä DENIM voisi olla pätevä apuväline, mutta nyt osa sovelluksen kätevyydestä menee hiiren epätarkkuuden kanssa hukkaan, vaikka ohjelmisto suoristeleekin piirrettyjä viivoja. Myös isolla kosketusnäytöllä, jolloin useampi henkilö voisi yhtä aikaa ilmaista ideoitaan, voisi ohjelman käyttö olla kätevää. Toisaalta, kynällä ja paperilla saa edelleen luotua nopeammin ja helpommin luonnoksia ja piirrosjälki on tarkempaa ja mahdollistaa pienempien ja tarkempien elementtien hahmottelun.

Mario AI Competition 2009: tekoälyn ohjaama Mario

Pelaamista voi harrastaa myös hieman erikoisemmalla tavalla, opettamalla tekoälylle keinot selvitä pelissä. Tekoälyihin liittyen onkin erilaisia kilpailuita ja yksi tällainen on Mario AI Competition 2009, jossa pitää kehittää ”ohjain”, joka selviää Super Mario Bros -tyylisessä pelissä mahdollisimman monta asteittain vaikeutuvaa kenttää läpi.

Kilpailu pohjaa muokattuun Markus Perssonin Infinite Mario Bros -peliin (Java), joka on Javalla toteutettu versio Nintendon Super Mario Bros -pelistä, lisättynä loppumattomilla satunnaisesti luoduilla kentillä. ”Ohjaimen” on tietyissä ajanjaksossa päätettävä minkä toiminnon suorittaa, vastatakseen peliympäristön haasteisiin. Kilpailua varten kehittäjillä on saatavilla pelin lähdekoodit, joiden pohjalta tekoälyn toimintaa voi kehittää.

Asiaa voi lähestyä varmasti monella tapaa ja Robin Baumgarten visualisoi Youtube-videoissa omaa ratkaisuaan muutamalla videolla: Infinite Mario AI – Long Level ja Infinite Mario AI: Mario follows Mouse, jossa Mario seuraa hiiren kursoria. Robin kertoo redditin ketjussa, että hyödyntää pelikehyksen tekniikkaa muun muassa fysiikkamoottorin osalta luoden vastaavan tilan ja suunnittelemaan sekunnin tai pari eteenpäin.

Pelimoottori on sinällään armollinen kehittäjille, sillä ilmeisesti se ei tarjoa mahdollisuutta Super Marioista löytyvien piilotettujen tiilien ja jekkujen toteuttamiseen. Siinä vasta olisikin haastetta. Mario AI Competition 2009 -kilpailu alkoi toukokuussa ja päättyy kaksivaiheisesti elokuun puolivälissä ja syyskuun alussa. Toivottavasti kilpailutöistä tulee samanlaisia video-otoksia, kuin Robinin tuotoksista.

Mplayer OSX Extended ei suostu toistamaan videoita

Mac OS X:ssä asiat yleensä vain toimivat, mutta välillä käyttäjä saa myös asiat hajoamaan. Päivitin taannoin macportsilla asennettuja ohjelmistoja ja kirjastoja, jonka jälkeen Mplayer OS X Extendedillä oli suuria ongelmia toistaa yhtäkään videota. Virheilmoituskin oli taas todella selkeä: ”Playback Error: Abnormal playback termination. Check log file for more information.”

Mutta mikä on rikki, on myös yleensä mahdollista korjata. Hieman asiaa tutkien apu löytyi MPlayer OSX Extendedin foorumilta, jossa neuvottiin seuraavat kolme korjausehdotusta:

  1. Poistaa ohjelman plist-tiedosto (~/Library/Preferences/org.mplayerosx.MplayerOSX.plist)
  2. Tyhjentää käyttäjän font cache (~/.fontconfig/)
  3. Tyhjentää järjestelmän font cache (/opt/local/var/cache/fontconfig/)

Ongelman pääsyy oli macportsista asennettu uusi fontconfig, joka sotki asiat. Font cachen tyhjentämisen jälkeen Mplayer OS X Extended toimii melkein normaalisti, mutta samaa virheilmoitusta näkyy vielä ajoittain. Toivottavasti ohjelman kehittäjä löytää ongelmaan ratkaisun, kuten foorumilla kirjoittaa.

Selkeästi ei pitäisi päivittää toimivaa järjestelmää :)

Mac OS X ja dynaamisten kirjastojen käyttäminen

Olen viime viikkojen aikana yrittänyt saada Firefoxin mozvoikko-lisäosaa toimimaan asiallisesti Mac OS X:ssä ja teoriassa lisäosa toimiikin. Ainoana negatiivisena puolena on, että se vaatii kirjastojen sijoittamisen hakemistoon, jonne ne kääntäessä asennettiin, eli esimerkiksi /usr/local/lib -hakemistoon. Linuxissa ja Windowsissa lisäosa toimii, kunhan vaadittavat kirjastot löytyvät lisäosan sisään leivottuina.

Mac OS X:ssä dynaamiset kirjastot toimivat hieman eri lailla ja haluavat täydellisen polun asennushakemistoonsa. Asiasta löytyy blogikirjoitus ja selventävä ohje, jotka kertovat miten asioiden laita on. Kirjoituksissa neuvotaan toimivien dynaamisten kirjastojen luontiin käyttämällä install_name_toolia ja LDFLAGS-muuttujien käytöllä.

Hieman asian ympärillä iteroiden ei kirjastojen kääntäminen toivotulla lopputuloksella kuitenkaan onnistunut. Vaikka LDFLAGS-muuttujiin laittoi ehdotetun -Wl,-dynamic,-install_name -Wl,@executable_path/kirjasto.dylib -loitsun, eivät lisäosan vaatimat gettext, iconv, glib-2, malaga, suomi-malaga ja voikko -kirjastot suostuneet toimimaan lisäosan sisältä. Gettextin libintl -kirjastoa varten joutui LDFLAGS-muuttujat lisäämään suoraan Makefileen, mutta muuten loitsiminen onnistui configuren parametreina.

En tiedä onko vika kirjoittajassa, vai missä, mutta ei voi sanoa, että asiaa olisi turhan helpoksi tehty. Joku jippo tässä täytyy olla, kun kirjastot kuitenkin /usr/local/lib -hakemistosta toimivat. Ehkä tämäkin asia joskus selkenee.