Ryhmälleni uusi ilme

Mekanismin wikimoottori, PmWiki, tarjoaa mahdollisuuden ryhmäkohtaisesti tuunattuun ulkonäköön. Joitakin esimerkkejä:

Ylläolevien esimerkkien graafisesta ilmeestä voi olla montaa mieltä. Tässä ohjeessa kaavaillaan kuitenkin vain miten esimerkkien kaltaisten muutosten tekeminen teknisesti onnistuu.

Ilmeen rakenne

Kutsutaan "wikisaittia" kokonaisuutena wikiksi, s.e. wiki käsittää sekä käyttäjien muokkaaman sisällön kuten myös alustana toimivan wikimoottorin. Kutsutaan wikimoottoria lyhyemmin moottoriksi. Tämä wiki, Mekanismi, toimii PmWiki-nimisellä moottorilla. Mekanismin sisältöä ovat innokkaiden käyttäjien muokkaama, roolipelejä käsittelevä materiaali. Sisältö on jaettu hyvin pitkälti omiksi ryhmikseen, joita myös projekteiksi kutsutaan.

Asennettu PmWiki sisältää aluksi vain tietyn perusilmeen, jota käytetään jokaisessa uudessa ryhmässä. Mekanismissa tätä perusilmettä on hieman muokattu -- esimerkiksi muokkausruutu ladotaan kirjoitetun koodin esikatseluikkunan alle, eikä päälle kuten perusasennuksessa. (Hieman tarkemmin ottaen kyseinen muutos on tehty itse editointisivuun, ei edes perusilmeeseen)

Kokeneempien käyttäjien kannalta mielenkiintoinen ryhmän ulkonäön muokkaus käsittää kaksi erillistä vaihetta. Ulkonäkö asemoidaan ensin karkeasti aihiolla (eng. template) ja sen jälkeen kirjasimien kokoon ja ladontaan vaikutetaan CSS-tyylitiedostoilla (lyh. tyylit). Molemmat vaiheet on hyvä kirjoittaa erillisiin tiedostoihin. Uuden ilmeen luominen on hyvä aloittaa kopioimalla jotakin olemassaolevaa ilmettä. Em. esimerkkien lisäksi PmWikin sivusto sisältää roppakaupalla valmiita ilmeitä.

Tiedostojen luomiseen liittyy myös ryhmäkohtaisen tuunaamisen pahin ongelma, eli itse tiedostojen kirjoitus. Tietoturvasyistä Mekanismi ei pysty vielä (eikä välttämättä ikinä)) tarjoamaan jokaiselle käyttäjälle oikeuksia komentoriville. Kaavailen myöhemmin tapoja ohittaa tämä ongelma. Niin aihiot kuin tyylitkin sijaitsevat wikin asennuksen jälkeen hakemistossa ../pub/skins/. Hyvä tapa pysyä kärryillä tämän ohjeen suhteen on hakea ja purkaa PmWikin asennuspaketti.

Aihiot

Mekanismin oletusaihio sijaitsee tiedostossa ../pub/skins/mod-pmwiki/pmwiki.tmpl. Nimike mod-pmwiki tarkoittaa hyvin kevyesti muokattua moottorin perusilmettä. Kyseinen nimike korvattaisiin uutta ryhmäilmettä luodessa vaikkapa kyseisen ryhmän nimellä. Esimerkiksi Sydäntuli-ryhmän käyttämät tiedostot ovat hakemistossa ../pub/skins/sydantuli/. Mahdollisesti kuvat ja muu sisältö kannattaa sijoittaa saman ryhmän alihakemistoihin.

Aihio sisältää sekä HTML-koodia että PHP-koodin kaltaista, moottorin käyttämää pseudokoodia. Pseudokoodin tarkoitus on kertoa, missä järjestyksessä moottori latoo sivuun liittyvät pakolliset osiot. Tällaisia ovat yleensä, mutta eivät välttämättä, navbar, header, footer ja sivun varsinainen teksti. Täydellinen listaus pseudokoodista löytyy PmWikin englanninkieliseltä sivulta PmWiki:SkinTemplates. Perusaihiossa ../pub/skins/pmwiki/pmwiki.tmpl on lisäksi joitakin muuttujia (kuten $PageLogoUrl), jotka on määritelty moottorin asetuksia sisältävään tiedostoon ../local/config.php.

Tyylit

Ryhmän UV ilme on Lt960, johon on lisätty UV.Astray-Lt960 -sivun CSS. Tälläinen "Ilmeen päivitys" muutamalla CSS-värillä ja/tai taustakuvalla - lienee helpoin tapa saada ryhmälle omaa ilmettä.

Yllämainittu perusaihio tekee sisällön ja esityksen erottelun kannalta varsin huonoa jälkeä. Esimerkiksi sivupalkki (navbar) ladotaan HTML:n kolmosversion (harhaopin!) tapaan taulukoilla vasempaan reunaan. Mikään ei kuitenkaan estä käyttämästä uudempaa (X)HTML:ää ja divejä. Aihion virittelyn jälkeen on nimittäin joka tapauksessa vuorossa CSS:n muokkaus.

PmWikin ilmeiden luonnin kannalta CSS:n muokkaus on mielestäni prosessin masentavin vaihe. Perustiedosto ../pmwiki.css sisältää monenmoista tunnistetta, eikä aina kovin hyvin dokumentoituna. Syy-seuraus-suhteiden metsästämiseen, eli "mikä muuttaa mitäkin" -vaiheeseen voi helposti mennä tunnin verran töitä ja kymmeniä selaimen reloadin painalluksia. Tässäkin tapauksessa perustiedoston voi kopioida ja karsia haluamansa kaltaiseksi, tai sitten voi aloittaa kokonaan puhtaalta pöydältä ja lisätä tunnisteet yksi kerrallaan. Koska moottori voi helposti muuttua käyttökelvottomaksi liian tyhjällä tyylitiedostolla, suosittelen vanhojen tyylien kopiointia.

Hieman enemmän alkutyötä vaativa oikopolku on hankkia Firefox ja asentaa siihen Firebug-liitännäinen (eng. plugin). Firebug näyttää ladatut tyylit, antaa muokata niitä lennossa ja kertoo lisäksi mistä tiedostoista tai asetuksista mikäkin elementti saa muotoilunsa.

Chromen puolelta löytyy suoraan selaimesta "Inspect element" -työkalu, jonka täydelliseen oppimiseen voi mennä päiviäkin.

Käytännön vihjeet

Kuinka siis toimia käytännössä? Em. vaiheista selviää, että kopioimalla olemassaolevia tyylejä pääsee jotenkuten alkuun. Pahin ongelma on silti yhä tiedostojen muokkaus. Koska ulkonäön esikatselu vaatii käytännössä avukseen PHP-tuen sisältävän www-palvelimen, täytyy muutokset joko tehdä omaan kopioon PmWikistä tai pyytää Mekanismin ylläpitoa linkittämään ryhmän tiedostot muualle. Jälkimmäisessä tapauksessa muutokset tehdään siis "livekopioon", eli niin onnistuneet kuin epäonnistuneetkin muutokset ovat näkyvissä käyttäjille heti.

CSS-tyylitiedoston linkitys käyttäjän omalle palvelimelle on toistaiseksi paras tapa muokata tietyn ryhmän ulkonäköä. Käytännössä käyttäjä siis kopioi tiedoston http://mekanismi.sange.fi/pmwiki/pub/skins/mod-pmwiki/pmwiki.css omalle palvelimelleen ja tekee kopioimaansa tiedostoon haluamansa muutokset. Käyttäjä voi myös muokata pelkästään yksinkertaisempaa "muutostiedostoa", jonka sisältö (kts. alla) laajentaa ja tarvittaessa ohittaa perustyylejä. Menetelmällä on se kiistaton etu, että käyttäjä voi tehdä muutoksia niin usein kun haluaa, eikä ole sidottu ylläpitäjien reagointinopeuteen ja tyylitiedoston lähettelyyn esim. sähköpostilla tai attachmenttina.

Jos oletetaan että attach oikeuden omaava on luotettava, voitaisiin perustemplateen lisätä muissa kuin main, mekanismi,ja site ryhmässä mukaan ${GroupId}/${GroupId}?action=download&upname=groupstyles.css. Tässä on tietysti omat luottamusongelmansa. --vtakanen 2008-02-04 17:22
Mainittu attachmentin käyttö on tosiaan vaihtoehto, ja attach-oikeuden voi ryhmäkohtaisesti tai sivukohtaisesti määritelläkin. Mä en vain jotenkin pidä ajatuksesta, että jokainen ryhmä hakisi lähtökohtaisesti olematonta tiedostoa... Ylläolevassa ohjeistuksessa olen siis suositellut ulkoista liittämistä. --Pervilä 2008-05-30 16:42

Näin toimien voidaan helposti luoda perusulkonäkö, jossa on yksi navbar sijoiteltuna vasemmalle. Navbarin sisältöhän voidaan ryhmäkohtaisesti muuttaa GroupName.SideBar -sivun avulla (Kts. Harhapolku tai NR. Aihion tapauksessa tilanne on monimutkaisempi, sillä jotkut asetukset tulevat suoraan sieltä. En ole ihan varma, saisiko esimerkiksi navbarin sijoittelua kikkailtua muuhunkin kohtaan layoutia vain CSS:n avulla.

Kolmas vaihtoehto on komentorivioikeudet Mekanismiin. Tämän jälkeen oman ryhmän ilmeen muokkaaminen voidaan suorittaa SSH:n ja lempitekstieditorin avulla. Näin toimien onnistuu myös aihioiden muokkaaminen. Ymmärrettävistä tietoturvasyistä myönnän käyttäjätunnuksia perin nihkeästi. Tärkeä kriteeri on, että tiedän tyypin kotiosoitteen mahd. erimielisyyksien selvittelyä varten.

Yleistä keskustelua

Niin, no siksi ehdotinkin tyyli-, eli css-tiedostojen, ei suinkaan aihioiden liittämistä. Niissä isoin ongelma on se että niihin voi upottaa javascriptillä ilkeyksiä. (tyylitiedostossa voi sitten sanoa td#wikileft{display-style:block;float-left:clear:left}, jos on ahdistunut tablesta (mikä ei tietystikään korjaa itse tietoteoreettista käpyä))--vtakanen 2008-02-05 13:14

Mekanismin wiki pyörii PmWikin päällä ulkoasunaan UnStrapped