Uuden tuoreen vuoden alku laittoi minut katsomaan ajassa taaksepäin. Löysin koneelta vahingossa kansion, jossa oli ruutukaappauksia vanhoista nettisivuistani. Ihan kaikista vanhoista nettisivuistani ja nettisivuversioista ei ole olemassa ruutukaappausta, mutta melko monesta minulla on jopa koodit tallessa. Löysin Sipping Designsista vanhan blogipostauksen, jota varten kuvakaappaukset on ilmeisesti otettu. Aikani kuluksi päivitin samaiseen kansioon uudempia ja myös joitain vanhempia nettisivuja. Harmillisesti yhden vuonna 2010 käytössä olleen WordPress-teeman leiskaa en pysty “valokuvaamaan” ja siitä on tallennettavissa vain pieni thumbnail. Jatkossa aion pitää kansion arkiston paremmin ajantasalla uusia leiskoja tehdessäni.

Vanhoja nettisivuleiskoja katsellessani törmäsin moneen sellaiseen ulkoasuun, jonka olin täysin unohtanut. Osan kohdalla voi sanoa “onneksi”, jotkut olivat positiivisia yllätyksiä. Pelkästään omien nettisivujeni perusteella voi sanoa, että suunnittelussani tapahtui harppaus vuonna 2009. Vielä alkuvuodesta olin suunnitellut räikeän harrastelijamaisen ulkoasun, loppuvuodesta olin löytänyt rauhallisen ja minimalistisen tyylin, jonka kehittämistä olen toivottavasti jatkanut sen jälkeenkin.

Huomasin myös, että tämä Sipping Designsissa käytössä oleva ulkoasu on kohta kaksi vuotta vanha. Se on otettu käyttöön maaliskuussa 2010. Ja edelleen pidän siitä. Se näyttää ainakin minun silmiini raikkaalta ja tuoreelta. Olen monesti aikonut suunnitella blogille uuden ulkoasun, mutta miksi vaihtaa hyvää toiseen?

Toivoisin kuitenkin, että vuosi 2012 toisi minulle aikaa ja mielenkiintoa kehittyä samaan tapaan kuin kehityin vuonna 2009. Sen jälkeen olen ollut (muka) liian kiireinen keskittyäkseni web-suunnitteluun sen ansaitsemalla panoksella. Olisi hienoa, jos pystyisin luomaan nahkani jälleen tänä vuonna.

(klikkaa isommaksi)

Ei Sipping Designsille, mutta toiselle blogilleni on tulossa uusi ilme — kunhan saan wireframen käännettyä WordPress-teemaksi. Roll A Week-valokuvausblogini nykyinen leiska on viime kesältä, ja kyllästyminenhän tässä on ehtinyt syntyä.

Uudella ulkomuodolla haen yksinkertaisuutta ja keveyttä. Värimaailma pysyy harmaan, mutta aavistuksen vaaleampana nykyiseen verrattuna. Jätän tekstuurit, liukuvärit ja kikkailut tällä kertaa kokonaan väliin. Kasvatan kuvaleveyden 500 pikselistä 600:aan.

Samalla reseptillä syntyi kohta puolitoista vuotta sitten tämän blogin ulkoasu, johon en ole vieläkään kyllästynyt.

Google muuten tarjoaa ilmaiseksi käyttöön web-fontteja (www.google.com/webfonts), jotka pystyy kahdella koodirivillä ottamaan käyttöön missä tahansa nettisivuleiskassa. Olen aiemmin käyttänyt Cufón-konetta erikoisfonttien upottamiseen, mutta Google Web Fonts vaikuttaa näppärämmältä, ja se mahdollistaa myös erikoisfontin maalamisen. Fonttien määrä on rajallinen, mutta kivoja fontteja löytyy laidasta laitaan. Kokeilen Google Web Fontsia ensimmäisen kerran Roll A Weekin uudessa leiskassa.

Kirjassa on 89 sivua ja siihen on tiivistetty HTML5:n 900-sivuinen spesifikaatio yksiin kansiin. HTML5 tulee korvaamaan HTML 4.x:n ja osittain myös XHTML 1.x:n webbisuunittelun päätekniikkana. Tässä kohtaa tunnustan, että ostin kirjan siksi, että tiedän HTML5:sta hyvin vähän, vain sen mitä lyhyissä “what’s new”-listauksissa on kerrottu (uudet elementit mm. videolle). Kirja toivottavasti auttaa minut alkuun uuden HTML-speksin kanssa. HTML5 on kuitenkin se tekniikka, joka jatkossa on kaikkein loppukäyttäjäystävällisin ja yhteensopivin.

Käytän WordPressin päälle rakennetussa blogissani Sociable-lisäosaa, jolla postauksiin saa jakonapit. Jakonapit saa joko automaattisesti Sociablen asetuksilla jokaisen postauksen (ja halutessaan myös sivun) loppuun, mutta nappien paikan voi myös määritellä itse. Myös näytettävät palvelut voi valita ja järjestää itse melkein sadan joukosta..

Jos Sociable-nappien paikan haluaa määrittää itse, se tehdään ulkoasuteeman tiedostoihin lisäämällä seuraava koodi sopivaan kohtaan.

<?php
if (function_exists('sociable_html')) {
 echo sociable_html();
}
?>

Halutessaan koodin voi laittaa esimerkiksi <div class="share"></div> -tagien väliin helpottamaan CSS-muotoilua. Kun paikan määrittelee itse, kannattaa ruksit ottaa pois Sociablen asetuksista otsakkeen Position alta. Samoin Tagline-rivi kannattaa tyhjentää. Muut asetukset voi laittaa kuten haluaa.

Ja sitten kirjoituksen varsinaiseen aiheeseen…

Sociable-lisäosa tuottaa kullekin jakopalvelulle omanlaisensa linkin, jonka avulla postauksen nimi ja osoite (URL), ja joissain tapauksissa myös postauksen katkelma, siirretään jakopalveluun. Näitä linkkirimpsuja voi halutessaan (osatessaan) muokata haluamakseen. Lisäosaa voi muokata suoraan WordPressin hallintapaneelissa: Lisäosat > valitse Sociablen kohdalta Muokkaa.

Ensimmäisenä WordPressin editoriin aukeaa sociable.php-tiedosto, joka onkin ainoa, joka tarvitsee muutoksia. sociable.php-tiedostossa on jokaisen valittavissa olevan palvelun rimpsut ja jonkin verran muuta koodia. Rimpsut voi halutessaan muokata uuteen muotoon. Kussakin rimpsussa vilahtelee kaksi tai kolme seuraavista: PERMALINK, TITLE ja ENTRY. PERMALINK lisää rimpsuun postauksen osoitteen, TITLE postauksen otsikon ja ENTRY tarvittaessa katkelman.

Jos käytössäsi on WordPressin nätit URLit, jotka ovat muotoa http://www.omaosoite.fi/2010/08/06/postauksen-otsikko, PERMALINK pidentää lopullista rimpsua melkoisesti. Varsinkin Twitterissä merkit ovat kultaakin kalliimpia, koska yksi tweet on maksimissaan 140 merkkiä pitkä, joten lyhyt osoite olisi parempi kuin pitkä. Postauksen osoite pitää tietenkin pitää mukana, joten sitä ei voi rimpsusta poistaa, mutta keksin keinon, jolla linkistä saa lyhyemmän hukkaamatta osoitteesta omaa domainia.

PERMALINKin tuottaman osoitteen muokkaus on yksinkertaista. Etsi sociable.php-tiedostosta seuraava kohta. Siinä $permalink-rivi määrittää, mitä PERMALINKin tilalle laitetaan. Oletuskoodi siis hakee postauksen normaalin osoitteen, on käytössäsi minkälainen WordPress-URL tahansa.

// Clean the excerpt for use with links
$excerpt = str_replace('+','%20',$excerpt);
$permalink = urlencode(get_permalink($post->ID));
$title = str_replace('+','%20',urlencode($post->post_title));

Kun koodi muutetaan seuraavaan muotoon (korvaa http://omaosoite.fi omalla domainillasi ilman www:tä), pitkäksi venähtävän osoitteen tilalle sijoitetaan WordPressin oletusmuotoinen URL http://omaosoite.fi/?p=10. Alla olevassa koodissa $post->ID tulostaa osoitteeseen postauksen ID-numeron, joka on juokseva numero ykkösestä eteenpäin.

// Clean the excerpt for use with links
$excerpt = str_replace('+','%20',$excerpt);
$permalink = 'http://omaosoite.fi/?p='.$post->ID;
$title = str_replace('+','%20',urlencode($post->post_title));

WordPress-blogisi osaa ohjata lyhennetylläkin linkillä oikeaan osoitteeseen ilman, että sinun tarvitsee tehdä muita muutoksia. Muutoksen jälkeen kaikkissa valitsemissasi jakolinkeissä postaukseen osoittava linkki on lyhyttä muotoa.

Lyhentämällä linkit näin, lyhennetty linkki on luotettavamman näköinen kuin verkosta löytyvillä URL-lyhennyspalveluilla toteutetut linkit, jotka ovat yleensä sekalaisten merkkien jono.

Esimerkiksi tämän postauksen lyhennetty URL on http://sippingdesigns.com/?p=1151. Toimii!

Lisämuutoksia

Itse olen muokannut myös Twitter-rimpsua erikseen, koska haluan, että Twitter-nimimerkkini näkyy vierailjoiden jakamissa tweeteissä, jos he eivät sitä poista. Alla on oletusmuotoinen Twitter-rimpsu.

'Twitter' => Array(
'favicon' => 'twitter.png',
'awesm_channel' => 'twitter',
'url' => 'http://twitter.com/home?status=TITLE%20-%20PERMALINK',
'spriteCoordinates' => Array(343,55),
'supportsIframe' => false,
),

Olen muokannut sen seuraavaan muotoon. Olen lisännyt oletusrimpsun alkuun “RT @perminna: “-pätkän. Rimpussa välilyönnit pitää korvata %20-merkinnällä. Rimpsun alkuosaan ei saa kajota, jos haluaa että Twitter-jakolinkki toimii oikein. Muutoksia saa tehdä =-merkistä alkaen.

'Twitter' => Array(
'favicon' => 'twitter.png',
'awesm_channel' => 'twitter',
'url' => 'http://twitter.com/home?status=RT%20@perminna:%20TITLE%20-%20PERMALINK',
'spriteCoordinates' => Array(343,55),
'supportsIframe' => false,
),

Alla olevaan kuvakaappaukseen olen merkinnyt punaisella kohdat, jotka näkyvät lopullisessa tweetissä, jossei sitä jakaja muokkaa.

Samaan tapaan voisi muokata myös muiden jakopalvelujen rimpsut.

Niin ja se blogi… sen nimi on Roll A Week ja sen osoite on www.rollaweek.com. Uusi blogi tulee keskittymään pelkästään valokuvaukseen ja siihen liittyviin tekniikoihin ja laitteisiin. Valokuvauksen piti olla pieni osa Sipping Designs -blogia, mutta viime kuukausien aikana valokuvajorinat ovat täyttäneet sen melkein kokonaan. Päätin siis avata kuva-asioille oman blogin ja ne poistuvat käytännössä kokonaan tästä blogista.

Uudessa blogissa yritän jälleen englanniksi kirjoittamista, mikä tyrehtyi parissa kuukaudessa Sipping Designsissa.

Kesän kunniaksi päätin ottaa ohjat omiin käsiini ja siirtää domainit godaddy.comille, omiin nimiini ja samalla yhdistää palvelintilat yksiin kansiin. Domainit olen jo laittanut siirtymään (ensimmäisen vuoden hinta noin 6,5 euroa kappaleelta), mutta palvelintila pitää vielä tilata. Näillä näkymin otan palvelintilan Bluehostilta, jonka palvelu maksaa 6,95 Yhdysvaltain dollaria kuukaudessa, mikä tekee noin 66 euroa vuodessa. Domainien kanssa yhteiskustannus on vuodessa noin 80 euroa, mikä on vähemmän, mitä olen tähän mennessä maksanut kahdelle eri toimijalle. Bluehostin hyvät puolet ovat rajaton tallennustila, rajaton kaista ja rajaton määrä domaineja. Toisin sanoen voin halutessani kehitellä uusiakin sivustoja samalle palvelintilalle pelkän domain-kustannuksen hinnalla.

Neljän viikon kesäloma alkaa elokuun alusta, joten teen siirtotoimenpiteet loppukesästä. Blogi ja portfoliosivusto saattavat olla joitain tunteja tai päiviä pois langoilta niihin aikoihin.

Thatsabsurd.net-domainnimen keksin muuten aikoinaan House-televisiosarjan Dr. Gregory Housen lausahduksesta “That’s absurd. I love it!”.

Sivujen lisäksi suunnittelin yritykselle logon ja käyntikortin ja kuvitin yrityksen prosessikaavion.

Uuden version myötä myötä vapaan lähdekoodin sisällönhallinta- ja julkaisujärjestelmään tulee useita uusia ominaisuuksia:

• Käyttäjänimen ja salasanan valinta heti asennusvaiheessa. Aiemminhan WordPress on luonus oletuskäyttäjän admin ja tälle konegeneroidun salasanan. Nyt blogin käyttäjätunnuksen ja salasanan voi valita ennen asennusta, samalla sivulla blogin nimen valinnan kanssa.
• Usean blogin pyörittäminen samalla asennuksella. Aiemmin usean blogin pyörittämiseen on pitänyt käyttää WordPress MU (multi user) -alustaa, mutta 3.0:ssa nämä ominaisuudet on liitetty WordPressin ytimeen.
• Uusi oletusteema. 3.0:n myötä WordPressin oletusteema päivittyy. Uusi on nimetty Twenty Teniksi ja sitä voi demota WordPressin kehitysblogissa.
• Kustomoidut artikkelileiskat (suomennos hakusessa) tulevat kategorioiden ja avainsanojen (tag) rinnalle lokeroimaan artikkeleita. Uuden ominaisuuden avulla eri tyyppiset artikkelit voidaan julkaista omanlaisiensa muotoilujen kera. Esimerkiksi arvostelu-artikkelit ja tuoteuutuus-artikkelit voisivat näyttää erilaisilta. Lisää artikkelikohtaisista leiskoista WP Engineerissä.
• Dynaaminen drag&drop -valikkohallinta mahdollistaa sivuston valikon hallinnoinnin WordPressin Ohjausnäkymästä käsin. 3.0:sta lähtien sivuston valikon järjestystä voidaan hallita samaan tapaan kuin sivupaneelien vimpaimia, raahamalla ja pudottamalla. Lisää uudesta valikkohallinnasta WP Engineerissä.
• Taustakuvien hallinnointi tuodaan uudessa WordPressissä myös Ohjausnäkymään. Ominaisuus mahdollista sivuston taustakuvien vaihtamisen (itse kuva, asemointi, toisto) ilman tyylitiedostosörkkimistä. Ominaisuus vaatii yhden rivin lisäyksen teeman functions.php-tiedostoon: add_custom_background();
• Kirjoittajakohtaiset templaatit tuovat blogeihin laajemmat mahdollisuudet erotella eri kirjoittajien artikkelit. Templaatit nimetään kirjoittajan nimen tai id-numeron perusteella.
• Tästä lähin käyttäjille tarjotaan tervetuloesittely käyttönoton helpottamiseksi, jotta uudet WordPress-käyttäjät pääsevät nopeammin sisälle blogiohjelmistonsa vinkeisiin.
• Lisäosista tulee uuden WordPressin myötä standardisoidumpia (“canonical”), jotta käyttäjien ei tarvitse WordPressiä päivittäessään murehtia, rikkuuko osa sivustosta yhteensopimattomien lisäosien vuoksi.

Via WPcookies, Crenk ja Template Monster Blog.

Kun aloitin opinnot Vaasan yliopistossa, toteutin yliopiston www-palvelimelle ensimmäiset vähän oikeammat kotisivut, oikeaoppisesti rakenteen ja tyylitiedoston erillään pitäen, XHTML- ja CSS-tekniikoita käyttäen. Nämä olivat yliopistokotisivuinani koko opintojeni ajan (kuvakaappaus oikealla). Vielä syksyllä nekin olivat verkossa, mutta näemmä nyt ne on poistettu palvelimelta.

Kesällä 2006 ostin ensimmäisen verkko-osoitteeni ja siihen www-palvelintilan. Osoite oli www.thatsabsurd.net, joka toimii edelleen, ohjaten tähän uuteen domainiin. Thatsabsurd.netin alla pyöritin kotisivujani ja blogejani useamman vuoden ajan. Ajoittain sivuston ulkoau ja nimi muuttui. Viimeisimmät ajat (1,5-2 vuotta) blogi ja sivusto oli nimeltään Minnan nettikolo ja sillä olikin melko laaja lukijakunta. Kiinnostui johtui pääosin runsaasta tietotekniikkakirjoittelustani, erityisesti suosiota toi miniläppärijorinat.

Keväällä 2007 aloitin suunnittelemaan nettisivuja myös asiakkaille. Perustin Thatsabsurd.netin alle web-suunnittelua varten esittelysivut. Keväällä 2009 ostin oman domainin ja palvelintilan web-suunnittelua varten. Minnaperala.comissa on tällä hetkellä toisen generaation ulkoasu, jonka päivitykseen 2.5G:ksi haluaisin löytää aikaa, vaikka olen sivujen nykyiseen tilaan kuitenkin pääasiassa tyytyväinen.

Syksyllä 2009, turhautumisen vimmassa päätin vetää thatsabsurd.netin blogin sileäksi. Jäljelle ei jäänyt mitään. Ajattelin, että verkko-osoitteen ja kielen vaihtaminen ja blogin uudelleenbrändääminen auttaisi tuskaan. Toteutin uudelle blogille uuden, mielestäni melko onnistuneen harmaan ulkoasun.

Nyt olen kuitenkin tässä, eri tilanteessa. Päädomain on uusi, se jonka syksyllä 2009 hankin thatsabsurd.netin rinnalle, mutta olen palannut tuttuuun kotimaiseen. Nykyinen ulkoasu on vähintään kymmenes erilainen, jonka olen omaa käyttöäni varten toimivaksi asti toteuttanut. Toivon, että kehitystä on ollut havaittavissa.

WordPress-julkaisujärjestelmän otin käyttöön muistaakseni alkuvuodesta 2008. Siihen asti toteutin sivut PHP-XHTML-CSS-pakettina, melkein staattisina sivustoina, mikä toki onnistuu tarvittaessa vieläkin.