Kategoria: web

Internet ja Web, osa jokapäiväistä arkea.

Yip.fi-sivuston uudistaminen WordPressille

Teen ajoittain pienimuotoisia projekteja toiminimellä ja kesälomani aikana uudistin YIP Ympäristöinsinööripalvelut Oy:n -sivuston. Projektissa vanha kaksikielinen HTML-sivusto siirrettiin WordPress-alustalle ja muutamien lisäosien avulla rakennettiin dynaaminen kokonaisuus vastaamaan vanhaa toiminnallisuutta. Pieni projekti, jonka lopputulos helpottaa jatkossa huomattavasti sivuston ylläpitoa ja päivittämistä.

YIP Ym­pä­ris­töin­si­nöö­ri­pal­ve­lut Oy on vuon­na 2005 pe­rus­tet­tu ympäristösuunnittelu ja -konsultointiyritys, joka tekee muun muassa hulevesi-, prosessivesi- ja jätevesisuunnittelua ja ym­pä­ris­tö­lu­pa­- ja maa-aineslupaselvityksiä ja -hakemuksia. Yrityksen vanhat sivut olivat staattiset kaksikieliset HTML-sivut, jotka päätettiin uudistaa WordPress-alustalle isomman sisältöpäivityksen yhteydessä. Näin saataisiin sivujen päivitys jatkossa helpommaksi ja nopeammaksi sekä lisättyä mahdollisuus artikkeleiden kirjoittamiseen.

Yip.fi-sivuston uudistamisessa ei tehty juurikaan muutoksia aikaisempaan HTML-sivustoon, vaan ulkoasu siirrettiin lähes sellaisenaan WordPress-teemaksi. Vain sisältöosan taustaväri vaihdettiin valkoiseksi ja uusina osioina lisättiin tyylit blogi-kirjoituksille. Pieniä muutoksia tarvittiin myös Internet Explorerin vanhempien versioiden ja HTML5:n osalta.

WordPress-teeman rakentaminen

En alkanut rakentamaan uutta teemaa aivan tyhjästä, tai pohjautuen esimerkiksi WordPressin oletusteemoihin, vaan käytin hyväksi todettua Automatticin _s, eli underscores -teemaa, joka tarjoaa selkeän lähtötilanteen uuden teeman rakentamiseksi. Aloitusteema sisältää minimaalisen ja hyvin jäsennellyn CSS:n, HTML5-sivupohjat ja 5 eri taittoa ja muutamia yleisiä navigointiin ja teeman rakentamiseen liittyviä lisäyksiä. Eli juuri riittävästi perustusta, jonka päälle rakentaa oma kokonaisuus.

Underscores-aloitusteema tarjoaa myös pohjan teeman lokalisoinnille POT-käännöstiedoston kautta, mutta ei tarjoa valmista käännöstä eri kielille kuten WordPressin oletusteemat. Sanojen ja lauseiden kääntäminen onnistuu suhteellisen helposti esimerkiksi Poedit-ohjelmalla, kun vielä hyödyntää oletusteemojen suomennoksia apuna.

Vanhempien Internet Explorer -selainversioiden HTML5 -yhteensopivuuden takaamiseksi sivustolle asetettiin html5shiv-skripti, joka mahdollistaa HTML5 elementtien käytön.

Käytetyt lisäosat

WordPress tarjoaa suoraan paketista hyvän perustan sivuston rakentamiseksi ja erilaisten lisäosien avulla se taipuu monenlaisiin käyttötarkoituksiin. Yip.fi-sivusto on toiminnaltaan suhteellisen yksinkertainen ja käytetyt lisäosat liittyvät pääosin kaksikielisyyteen, yhteydenottolomakkeeseen ja hakukonenäkyvyyteen.

Monikielisyyden toteuttamiseen käytin WPML-lisäosaa, joka aikaisempien kokemuksien perusteella toimii paremmin kuin qTranslate, tai ratkaisut jotka hyödyntävät multisite-toimintoa kuten Multilingual Press. Jatkossa pitänee testata myös Polylangia.

Monikielisyyden takia tarvitsin myös lisäosan, jolla saa määriteltyä omat sivupalkit eri kielille. WooSidebars-lisäosa täytti vaatimuksen, vaikka nyt Ulkoasu > Vimpaimet -sivu on hieman sekava näyttäen kaikkien kielien sivupalkit samalla kertaa. Vaihtoehtoisesti olisin voinut käyttää Dynamic Widgets -lisäosaa, mutta aikaa ei ollut enää sen testaamiseksi. Lisäosa mahdollistaa myös sivupalkkien määrittämisen sivukohtaisesti.

Sivuston title-, description- ja keywords-kenttien päivittämistä varten Add Meta Tags -lisäosa vaikutti toimivalta ratkaisulta ja sen avulla jokaiselle sivulle ja kirjoitukselle voi määritellä omat tiedot suoraan muokkausnäkymästä.

Yhteydenottolomake toimii Contact Form 7 -lisäosan avulla ja Flamingo-lisäosa tallettaa lähetetyn sanoman. Huomasin lomaketta rakentaessa myös virheen lisäosien yhteistyössä, sillä jos lomakkeessa käyttää valintaruutua your-subject-kentässä, ei lomake anna kuittausviestiä, vaikka se lähetetään onnistuneesti.

Sivuston toimintoja varten piti myös toteuttaa oma lisäosa alisivujen näyttämiseksi, sillä en löytänyt lukuisista lisäosista sellaista, joka olisi toiminut kuten haluttiin. Tekemäni Sub Page Menu -lisäosa näyttää sivun alisivut myös lukijan ollessa alisivulla ja alisivujen alisivut vain ollessa alisivulla. Lisäksi viimeisimpien kirjoitusten näyttämiseen piti laajentaa hieman WordPressin vakiovimpainta, jotta vimpaimen otsikko toimii linkkiä artikkeleiden sivulle.

Muut käytetyt lisäosat ovat Google XML Sitemaps sivukarttojen muodostamiseen, jQuery Colorbox kuvien avaamiseksi modaali-ikkunaan ja sivuston kakutuksesta vastaa WP Super Cache.

Yhteenveto

YIP Ympäristöinsinööripalvelut Oy -sivuston uudistaminen WordPress-alustalle staattisen kaksikielisen HTML-sivuston pohjalta oli suhteellisen pieni projekti, mutta sisälsi muutamia enemmän säätöä vaativia vaiheita etenkin monikielisyyden ja sivupalkkien, sekä alisivujen näyttämisen osalta. Vanha ulkoasu muuntui muutamilla muutoksilla WordPress-teemaksi, sillä vanha rakenne muistutti _s-aloitusteeman tarjoamia HTML5-sivupohjia. Lopputuloksena saatiin aikaan ulkoasultaan tuttu sivusto päivitetyllä sisällöllä, jonka päivittäminen on jatkossa helpompaa sekä sisällön että ajankohtaisten artikkeleiden osalta.

yip.fi-sivusto WordPress-alustalla
yip.fi-sivusto WordPress-alustalla

Toiminnallisia Web-sovellusten prototyyppejä Tiggr:llä

Sovelluskehitysprojektissa on toivottavaa, että sovellusta prototypoidaan hyvissä ajoin jo mielellään määrittelyvaiheessa, jolloin sen toiminnasta saadaan tekstiä parempi kuva ja täten nähdään vastaavatko suunnitelmat sitä, mitä ajateltiin. Prototyyppien tekemiseen on erilaisia menetelmiä ja apuvälineitä lähtien yksinkertaisesta ”kynä ja paperi”-menetelmästä, mutta usein on toivottavaa, että tehdyt mallit ovat sähköisiä. Yksi kätevä työväline Web-sovellusten prototyyppien tekemiseen on Exadelin kehittämä Tiggr.

Tiggr on Web-pohjainen nopeaan prototypointiin tarkoitettu sovellus, jonka avulla voidaan luoda, jakaa, tehdä yhdessä ja esitellä sekä Web- että mobiilikäyttöliittymien malleja. Ideana on tarjota työvälineet interaktiivisten mallien tekemiseen sovelluksesta, jotka näyttävät ja toimivat kuten lopullinen sovellus. Käytännössä tämä toteutuu siten, että Flex-pohjaisessa sovelluksessa vedetään käyttöliittymään eri komponentteja ja kokonaisuudesta tuotetaan HTML, JavaScript ja CSS -pohjainen klikkailtava malli. Tiggr on ilmainen ja suunnitteilla on lisäksi maksullinen versio.

Tiggr:n käyttöliittymä muistuttaa perinteistä sovellusta, jossa toisella laidalla on tarjolla olevat komponentit ja toisella niiden ominaisuudet. Komponenttien siirtely ja hienosäätö on helppoa, jota ei voi esimerkiksi kuvankäsittelyohjelmalla tai vastaavalla sovelluksella tehdyistä malleista sanoa. Käytettävissä olevat komponentit pohjaavat siihen, mitä JSF:ssä ja RichFacesissa, Exadelin työstämässä Java EE -komponenttikirjastossa, on tarjolla.

En ole vielä kovin kattavasti testannut Tiggr:n ominaisuuksia, mutta toiminta vaikuttaa erittäin kätevältä ja monipuoliselta, vaikka osiltaan tarjolla olevat ovat rajattuja. Tarvittaessa malliin voi ladata omia komponenttejaan kuvina, mutta tällöin menettää niiden osalta mallin toiminnallisuus-aspektin. Tiggr:n etuna on, jos lopullisessa sovelluksessa käytetään myös RichFaces-komponentteja, jotka löytyvät jo valmiiksi. Myös mahdollisuus jakaa prototyyppien tekoa ja tuotoksia helposti muiden kanssa on suuri etu, sillä se edesauttaa eri osapuolten kommunikointia ja täten suunnittelu- ja kehitysprosessia.

Tiggr:iä kehitetään aktiivisesti eteenpäin ja tulossa on muun muassa prototyyppien annotointi, eli mahdollisuus lisätä kuvaavia tekstejä, sivupohjat ja toiminnallisen HTML-prototyypin laajentaminen. Jo nyt sovellus on hyvin käyttökelpoinen vaihtoehto enemmän tai vähemmän toiminnallisten ja lopullista tuotosta mallintavien prototyyppien tekemiseen.

LibraryThing listaa kirjahyllysi sisällön

Työn ja liikuntaharrastusten vastapainona tulee luettua jonkin verran kirjoja ja järjestelmällisenä ihmisenä tykkään pitää kirjaa erilaisista asioista, kuten luetuista ja lukulistalla olevista kirjoista. Aikaisemmin käytin tähän WordPressin Now Reading -lisäosaa, mutta sen toiminta jätti hieman toivomisen varaa etenkin kun siitä hajosi kirjojen tietojen hakeminen Amazonista. Eli oli aika etsiä vastaavia toiminnallisuuksia, jotka voisi myös liittää tavalla tai toisella blogiin. Löysin uudestaan LibraryThingin.

LibraryThing on kirjoihin keskittynyt web-palvelu, jossa yhdistyy kirjahyllyn teosten tiedot, kirjaston hakukone ja lukemisen seuranta. Perustoiminnot löytyvät kirjojen lukemiseen liittyvistä asioista ja osittain sosiaalisista aspekteista kuten lukijoiden kirja-arvosteluista ja keskusteluista. Kirjojen listauksen ja lukuaikojen lisäksi teoksia voi luokitella kategorioihin kuten ”luettavana”, ”lukulistalla” ja ”luetut” ja määritellä niitä tagien avulla. Kirjojen tietojen syöttö onnistuu esimerkiksi ISBN-numeron perusteella ja ne haetaan muun muassa Amazonista tai jopa Helsingin alueen kirjastoista. Kätevää. LibraryThingin ilmaiseen käyttäjätiliin saa talletettua 200 kirjan tiedot ja rajaton määrä irtoaa pienimmillään dollarilla vuodessa ja eliniäksi 19 dollarilla.

Olin jo aikoinaan miettinyt kirjojen listaamista LibraryThingissä, mutta koska palvelun ulkoasu ei ollut niitä hehkeimpiä ja tarpeet eivät siihen pakottaneet, jäi palvelun käyttöönotto tekemättä. Ei LibraryThing edelleenkään ole ulkoasultaan mihinkään muuttunut. Palvelu on toteutettu perinteiseen insinöörimäiseen tyyliin ”tekee kaikkea mahdollista, vaikka käyttäjä ei haluisi” ja käytettävyyteen ei ole panostettu ollenkaan. Vanhanaikainen ja vaikeaselkoinen ulkoasu häiritsee edelleen palvelun mielekästä käyttöä, mutta alkutotuttelun jälkeen ei kuitenkaan liikaa. Ulkoasua voi jonkin verran muokata haluamakseen, mutta itselle tarpeettomia elementtejä ei saa kokonaan piiloon. Toiminnoiltaan LibraryThing on kattava ja erilaisia asetuksia ja toimintoja on runsaasti, eikä kaikkien tarkoituksesta ole aivan selvyyttä. Oikeastaan LibraryThing on aika sekava kokonaisuus, mutta ilmeisesti toimiva sellainen, sillä aktiivisia käyttäjiä sillä on enemmän kuin muilla vastaavilla palveluilla.

Muutamia ruudunkaappauksia LibraryThingin oleellisista osista:

Oma kirjahyllyni palvelussa on vielä aika vajavainen, mutta pitänee jossain vaiheessa luoda peräkkäistiedosto lukemistani kirjoista ja syöttää hyllyyn. Oman kirjahyllynsä tiedot saa tuotua csv- ja xls-muotoihin, joten tiedot eivät järjestelmään häviä, ja kirjahyllyyn saa vietyä kirjoja erilaisissa muodoissa. Tällä hetkellä palvelu tuntuu toimivan omiin käyttötarkoituksiini. Käyttäjäkunta ja ”kehitystiimi” on aktiivinen, sillä aika nopeasti widgettien toiminnassa ollut omituisuus korjattiin, kun sellaisesta LibraryThingin foorumilla raportoin. Nyt Kirjasto-sivuni näyttää oikein eri kategoriaan merkityt kirjat.

Tietenkin netissä on tarjolla useita erilaisia kirjastosovelluksia, kuten Goodreads, mutta koska olen enemmän kiinnostunut kirjoista, joihin juuri kirjastonhoitajien kehittämä LibraryThing on keskittynyt, en jaksanut sosiaalisiin puoliin keskittynyttä Goodreadsia testata. Ja kun yhden palvelun on aikanaan valinnut, on kynnys vaihtamiseen suuri, vaikka tarjolla olisi tuonti- ja vientitoimintoja. Goodreadsin ja Librarything eroista on myös hyvin valaiseva kirjoitus, jonka kommentit ovat myös lukemisen arvoisia.

Pitäisikö Web-sovelluksilla olla yhtenäinen tyyli ja logiikka?

Nykyään suuri osa sovelluksista toimii Web-selaimissa ja sovellusten osalta on havaittavissa siirtymää työpöydältä Web-sovelluksiksi, jolloin aikaisemmin suhteellisen samanlailla toimivat ja näyttävät käyttöliittymät muuttuvat monimuotoisiksi. Web-maailmassa ei ole yhtenäistä tapaa toteuttaa asioita, vaan jokainen suunnittelija tekee kuten parhaimmakseen näkee ja sovellusten ulkoasut vaihtelevat suuresti. Perinteisten työpöytäsovellusten osalta eri sovellukset toimivat suurin piirtein samoilla periaatteilla ja toimintopainikkeet sekä näyttävät samoilta että löytyvät tutuista paikoista.

Usability Post kysyykin, pitäisikö Web-sovelluksilla olla yhtenäinen käyttöliittymä, eli ulkoasu näyttäisi ja toimisi visuaalisesti samoilla periaatteilla, kuten työpöytäsovelluksissakin eri käyttöjärjestelmissä sovellukset ovat usein yhtenäisiä keskenään. Tutut toiminnot näyttäisivät samoilta eri Web-sovellusten välillä, kun nyt painikkeiden ja komponenttien ulkoasut vaihtelevat enemmän tai vähemmän eri sovellusten välillä.

On totta, että sitä toivoisi sovellusten toimivan edes suurin piirtein samoilla periaatteilla, ettei aina tarvitsisi arpoa miten asiat nyt tässä toimivatkaan, mutta yleisesti ottaen on vaikea nähdä, että eri Web-sovellukset näyttäisivät peruspiirteiltään samanlaisilta, toimisivat samalla tavalla tai käyttäisivät samoja komponentteja. Web on visuaalisesti toinen maailma verrattuna työpöytäsovelluksiin, joka myös heijastuu sovellusten toimintoihin. Webin osalta ei oikeastaan odoteta, että eri sovellukset näyttäisivät yhtenäisiltä, vaan ollaan jo totuttu, että jokaisen sovelluksen kohdalla pitää aina oppia uudestaan perustoiminnot ja logiikka. Onneksi suunnittelijat tekevät sovellukset usein helposti opittaviksi ja joissa asiat toimivat kuten niiden olettaa toimivan. Tai ainakin näin haluaisi uskoa, sillä todellisuus on välillä aivan jotain muuta.

Kun asiaa ajatellaan pienemmällä skaalalla, olisi sovelluskehittäjällä hyvä olla karkealla tasolla välineet yhtenäisen käyttöliittymän toteuttamiseksi, ainakin saman asiakkaan sovellusten osalta. Toki usein saman kehittäjän sovelluksissa toistuvat samat ratkaisut ja uudestaan käytettävät palikat, joilla yhtenäisyyttä syntyy kuin itsestään. Miksi keksiä asioita uudestaan, kun ne ovat jo kerran toteutettu, ellei asiaa keksi ”paremmin”. Suunnittelun ja ratkaisujen avuksi löytyy myös apuvälineitä, joilla visuaalista ilmettä ja sovellusmaista toimintaa voidaan tukea.

Webissä ei ole yhtä ja oikeaa tapaa toteuttaa asioita, vaan monet ratkaisut ovat yhtä hyviä. Mallia voi ottaa esimerkiksi useilta suunnittelumalli-sivustoilta kuten UI Patterns, YPatterns ja UI Pattern Factory. Lisäksi erilaiset komponenttikehykset kuten JQuery UI ja Java EE -maailmassa RichFaces ja PrimeFaces tarjoavat omia ehdotuksiaan toiminnoille. Vaihtoehtoja on monia ja lopputulos on usein eri ratkaisujen yhdistelemistä, jolloin sovellus koostuu useista erilaisista käyttöliittymäratkaisuista. Harvoin eri valmiiden ratkaisujen mallit toimivat suoraan omiin tarpeisiin nähden ja niitä joudutaan vähintäänkin visuaalisen ilmeen osalta virittelemään.

Koska Web perustuu pohjimmiltaan HTML:ään ja CSS:ään, voidaan valmiita komponentteja yleensä muokata ulkoasultaan tarpeiden mukaan ja soveltaa toisaalla havaittuja hyviä asioita. Esimerkiksi Web-sovelluksen käyttöliittymää varten voidaan soveltaa Cappucino tai Sproutcore -kehysten Creative Commons Attribution Share-alike -lisenssin alaisuudessa olevia Ace- ja Aristo-teemoja, jotka näyttävät siisteiltä ja tarjoavat yhtenäisen ulkoasun eri komponenttien välille.

Molemmat teemat näyttävät nykyaikaisilta ja niillä on enemmän yhteistä kuin eroa, jonka voi todeta lyhyestä vertailusta. Enemmän teemojen toiminnasta saa selville, kun vierailee teemojen demosivuilla. Sproutcoren Ace-teemasta on havaittavissa yhtäläisyyksiä OS X:n Aqua-teemaan ja SproutCoren kehitys onkin Applen sponsoroimaa. Cappucinon Aristo-teema ei ole niin silmiinpistävä kuin Ace, keskittyy näyttämään hyvältä sekä Windowsissa että OS X:ssä ja sopii paremmin vakavampiin sovelluksiin.

Molempien teemojen soveltuvuus omaan käyttötarkoitukseen riippuu toteutettavasta sovelluksesta, mutta niistä voi ainakin ottaa hieman mallia, miltä peruskomponentit voisivat näyttää. Cappucinon Aristo-teema on hieman helpommin otettavissa testiin ja se on saatavissa PSD -kuvina ja kolmannen osapuolen CSS 3 toteutuksena. Sproutcoren Ace-teema löytyy vastaavasti vain sprite-kuvina, joten teemaus pitää hoitaa itse loppuun, mutta se tarjoaa kattavamman valikoiman eri komponentteja ja malleja.

Ikävä tosiasia valitettavasti on, että sovelluksen ulkoasun eteen joudutaan aina askartelemaan enemmän tai vähemmän. Esimerkiksi jos sovelluksessa otetaan käyttöön jokin valmis komponentti, pitää sen ulkoasua joko muokata vastaamaan muuta sovellusta, tai käyttää valittua kirjastoa kaikilta osin jokaisen komponentin kanssa, jolloin eroavaisuuksia on mahdollisimman vähän. Valituista ratkaisuista riippuen tämä on enemmän tai vähemmän helppoa. Esimerkiksi JQuery UI:n komponenteille voi määritellä haluamansa ulkoasun kätevästi Theme Rollerin avulla, mutta vastaavasti samanlainen teemanrakentaja tarvittaisiin myös RichFaces-komponenteille, joiden teemaus on suhteellisen työlästä ja osittain arpapeliä. Muutenkin aina tuntuu, että useat valmiit ratkaisut eivät toimi kuten niiden haluaisi toimivan, eikä niitä usein voi myöskään helposti muokata riittävällä tasolla.

Kaikenkaikkiaan Web-käyttöliittymä voi näyttää upealta, jos siihen viitsii panostaa, mutta Web-sovelluksilla ei mielestäni tarvitse olla yhtenäisiä periaatteita. Web on monimuotoinen ja asiat saavat toimia, kuten ne parhaimmikseen näkee, kunhan ne silti toimivat loogisesti ja ymmärrettävästi. Toki yhtenäiset ratkaisut helpottavat käyttäjän elämää. Toisaalta Webin käyttöliittymät eivät helposti vertaudu perinteisiin työpöytäsovelluksiin, ainakaan nykyisillä teknologioilla ennen HTML5:n ja CSS 3:n yleistymistä, joten sallittakoon niille myös omat tyylinsä, kunhan ne ovat hyvällä maulla toteutettuja.

Pitääkin tässä edistää työlistalle hautautunutta tehtävää jalostaa omaa visuaalisesti yksinkertaista komponettiteemaa eteenpäin ja rakentaa vastaava teemaus myös RichFaces-komponenteille, jolloin asiakkaan sovellus saisi vielä nykyistä yhtenäisemmän ulkoasun.

HTML-teknologian hyödyntäminen Web-sovelluksen prototypoinnissa

Alkutalvi ja kevät on ollut kiireistä aikaa, mutta viimeinkin pitkäjänteinen työ tuottaa tulosta ja sain viime viikolla valmiiksi diplomityöni. Jee. Kun diplomityön aihe on ”HTML-teknologian hyödyntäminen Web-sovelluksen prototypoinnissa” (työ Lutin julkaisujärjestelmässä), voi helposti aavistella mitä työ käsittelee, eikä varmasti kovin paljon harhaan mene. Tarkemmin ottaen työ sisältää asiaa prototypoinnista hieman laajemmin sovelluskehitysprojektin kokonaisuuden näkökulmasta.

Kokonaisuutena työ pohjaa viime syksynä tekemääni kandidaatin työhön, jossa käsittelin aihetta hieman laajemmin ja pintapuolisemmin. Tuolta perustalta oli helpohkoa jatkaa diplomityössä ja kohtalaisen nopeasti se työ lopulta valmistuikin, mutta vaati useita iltoja töiden jälkeen puurtamista ja useampia viikonloppuja aherrusta. Lisäksi viimeinen viikko, kun työ oli jo saanut painoluvan ja muutamia kommentteja ohjaajilta, meni aika lailla dippaa ajatellen ja viimeistellen. Tekstin hiomista, pilkkujen viilaamista ja kirjoitusvirheiden etsimistä. Tuntui, että viimeistely, byrokratian anomusten täyttäminen ja dipan sitomoon saattaminen oli paljon raskaampaa, kuin varsinaisen työn kirjoittaminen.

Tulostuksen, sidonnan ja yliopistolle toimittamisen osalta hoiti Lappeenrantalainen Saimaprint homman hyvin kokonaispakettina. Helpotti paljon aikataulutusta, kun työtä ei tarvinnut luottaa postin harteille tai lähteä itse sitä viemään. Hinnat olivat muistaakseni: mustavalkosivu 0,1e; värisivu 0,7e; sidonta 22,5e/kirja; toimitus yliopistolle 20e; käsittely- ja postikulut jotain. Eihän toi halpaa touhua ole, mutta enemmän sitä olisi palanut rahaa ja aikaa, jos olisi etsinyt halvimman vaihtoehdon ja ajellut yhtenä päivänä vajaat 600 km:iä.

Diplomityössäni käsittelin käyttöliittymän ja sen toiminnallisuuksien prototypointia projektin eri vaiheissa. Alkuosa oli teoriaa eri menetelmistä ja teknologioista, ja käytännön osuudessa käytin mallina viime vuonna ollutta projektia, jonka aikana sovelsin eri prototypointimenetelmiä sovelluksen määrittelyssä, suunnittelussa ja toteutuksessa. Eli alkuun piirtelin paperille hahmotelmia miltä sovellus voisi näyttää ja myöhemmin toteutin käyttöliittymästä mallin HTML:llä. Ihan opettavainen projekti kaikin puolin, jossa myös käytettiin itselleni uusia JSF-teknologioita.

Oikeastaan pitää kiittää tutkintorakenneuudistusta, joka tavallaan pakotti valmistumaan ”Wanha tutkinto valmiiksi” -aikataulussa, johon nähden sain kaiken valmiiksi hyvissä ajoin. Koska 31.7.2010 päivämäärän jälkeen voi valmistua vain uuden kaksiportaisen tutkintorakenteen mukaan ja mahdollisesti lisäkursseja suorittaen, on tänä keväänä ja kesänä erityisen paljon valmistuvia. Itsekin olen diplomityötä hautonut useamman vuoden, mutta se vain vaati kunnollisen määräajan, johon mennessä se oli saatava valmiiksi.

Hieman kiireinen aikataulu tosin vaikutti myös työn tieteelliseen laatuun, sillä näin jälkeenpäin kun työtä lueskelee ja katselee, huomaa miten aihetta olisi voinut paremmin ja kattavammin käsitellä. Etenkin käytännön osuuteen olisi voinut lisätä tarinaa prototypointiprosessista ja toteutetuista malleista. No, työ on nyt kuitenkin tehty ja vaikka kaikki tietous ei kansien väliin päätynytkään, on se korvien välissä tallessa. Lisäksi työ ei nyt mitään järisyttävän uutta asiaa tuo prototypoinnista esille, vaan karkeasti sanottuna on katsaus miksi ja miten asioita voi projektissa mallintaa. Kyllähän kaikki tietää, että kynällä ja paperilla on helppo piirrellä kuvia sovelluksesta ja HTML:llä saa paljon aikaan nopeasti verrattuna Java-toteutukseen.

Kandidaatintyöni tapaan kirjoitin myös diplomityön LaTeXilla ja kirjoitusprosessiin soveltuu samat sanat kuin kesälläkin:

Vaikka aivan mutkatonta ei työskentely ollutkaan, oli kirjoittaminen helppoa ja muotoiluihin ei tarvinnut erikseen panostaa. 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.

Oikeastaan oli kohtalaisen turhaa kirjoittaa työ LaTeXilla, kun työssä ei kaavoja ollut, mutta kun kerran alkuun oli päästy, niin pitäähän se loppuun asti vängätä. LaTeX-mallipohjaa piti vielä hieman jalostaa muun muassa viiteluettelon, tiivistelmän ja nimiölehden osalta ja pitää siitä julkaistava versio jossain vaiheessa muistaa kasata. Kaikkien kuvien sijoittelu, oikoluku ja työvaiheessa kommentointi ja merkintä olisivat olleet paljon helpompia esimerkiksi Wordilla. Tosin nyt LaTex mahdollisti versionhallinnan ja kirjoittamisen riippumatta käytettävästä koneesta.

Diplomityön valmistuminen päättää myös yhden aikakauden elämässäni. Opiskeluaika on ihmisen elämään suuresti vaikuttava ajanjakso ja ainakin itsellä se tarjosi mukavia hetkiä, uusia ystäviä ja tietenkin paljon uuden oppimista. Hieman ikävä totuus kuitenkin on, että kaikki loppuu aikanaan ja on aika suunnata kohti uusia haasteita. Eiköhän se yhdeksän vuotta opiskelijana ole riittävästi, josta tosin vuosi aikalailla tyhjäkäynnillä ja pari vuotta töissä. Melkein varmaa kuitenkin on, että opiskelut eivät tähän jää, sillä elämä on jatkuvaa uuden oppimista.

Vielä tosin on edessä kypsyysnäytteen kirjoittaminen ja diplomityöesitelmän pitäminen, mutta kunhan työ arvostellaan 5.5.2010 ja saan paperit kouraan 28.5.2010, ovat opiskelut tältä erää paketissa. Paljon se vaati, mutta paljon se antoikin.

Lisäys: 18.7.2010:
Loppujen lopuksi työni sisälsi 65 sivua, 15 kuvaa, 3 taulukkoa, 43 viitettä ja 0 liitettä. Eli kohtalaisen tiivis katsaus aiheeseen, mutta ilmeisen onnistunut, ainakin työn tarkastajien mielestä, sillä arvosanaksi muodostui kiitettävä (5). Työn lausunnossa kehuttiin sujuvaa näkökulman vaihtoa prototypoinnista web-sovelluksiin ja itse toteutettuun sovelluksen prototypointiin, työn tasapuolisuutta, johdonmukaisesti etenevää kokonaisuutta ja mallikasta lähdekirjallisuutta ja sen käyttöä. Arvostelun osa-alueet muodostuivat seuraavasti:

  • Työn tulokset: 5
  • Tekijän itsenäisyys, omintakeisuus ja aikataulun hallinta: 5
  • Esityksen johdonmukaisuus ja huolellisuus: 4
  • Kieliasu: 5
  • Kirjallisuuden valinta ja käyttö: 4

Helvetireader muuttaa Google Readerin minimaaliseksi

Googlen Reader on näppärä web-sovellus uutissyötteiden lukemiseen, mutta sen ulkoasu on perinteistä Googlea eli aivan kauhea. Onneksi eri selaimissa voi lisäosien avulla lisätä haluamilleen sivuille omia lisäominaisuuksia ja niinpä Helvetireader-skriptin avulla Google Readerkin muuttuu huomattavasti mukavammaksi.

Helvetireader muuttaa Google Readerin ulkoasun minimaaliseksi: syötteiden lukemiseen liittymättömät asiat piilotetaan hienovaraisesti ja värimaailmasta muokataan hillityn harmaa. Helvetiredear-käyttäjäskripti toimii kaikissa käyttäjäskriptejä tukevissa selaimissa kuten Firefoxissa Greasemonkey-lisäosan avulla, Operassa, Google Chromessa ja Webkit-pohjaisissa selaimissa (Safari) GreaseKit-lisäosan avulla.

Myös aikaisemmin Google Readerille oli saatavilla gReader-teema, mutta sen ylläpito on lopetettu. Google Reader muuttuu ajoittain ja teemojen pitää aina sen mukaa päivittyä. Tähän mennessä Helvetireader on päivittynyt hyvin ja uuden version ”lataaminen” on vain sivun päivityksen päässä, kun skriptiä ei asenneta vaan se haetaan Internetistä.

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.