Paulan korusivut

Viime viikolla työskentelin pääasiassa Paulan korusivujen uudistamisen parissa. Alkuperäinen sivu oli melko askeettinen ja nopeasti tehty:

Uuden sivun suunnittelussa lähtökohtina oli:

• Korujen saaminen paremmin esille
• Myytävien korujen erottaminen myydyistä
• Navigaation parantaminen

Vanhan sivun ulkoasussa oli paljon toivomisen varaa. Uudessa päädyin lopulta hyvin pelkistettyyn layouttiin, jossa itse korut ovat pääosassa. Kokeilin aluksi asettaa neljä korua vierekkäin samalle riville, mutta vähensin määrän lopulta kolmeen, jotta yksittäisiin koruihin olisi helpompi keskittyä.

Navigaatiosta tuli samalla kaksitasoinen, jossa korut on jaoteltu ensin myytäviin ja myytyihin (galleria) ja tämän lisäksi eri korutyyppeihin (kaulakorut, korvakorut ja rannekorut). Navigaatiota voisi vielä parantaa, en ole aivan varma näkyykö valittu sivu tarpeeksi selkeästi. Navigaatiota voisi helpottaa käyttämällä esimerkiksi bread crumbeja.

Käytetyt tekniikat

Sivuston koodaamisessa käytin seuraavia tekniikoita ja valmiita palikoita. Jokaisesta voisi melkein kirjoittaa oman blogipostin, mutta kerron tässä lyhyesti mitä eri palikat tekevät ja missä roolissa ne toimivat Paulan korusivulla.

Smarty template engine

Smarty on PHP-paketti, jolla koodi ja ulkoasu voidaan erottaa toisistaan helposti. Koodin puolella kaikki dynaamisesti kerättävä tieto tallennetaan muuttujiin. Sivun näyttämiseen käytetään tämän jälkeen omaa template-tiedostoa, jossa on säännöt muuttujien sisältämän tiedon esittämiselle.

Esimerkiksi navigaation piirtäminen hoituu suurein piirtein seuraavanlaisella rakenteella: (olen rakentanut Smartyn päälle oman “sivu”-luokan, joka piilottaa muuttujien rekisteröinnin ja sivun piirtokutsun.)

index.php:

$navigaatio = array("1"=>array("href"=>"index.php", name="Myynnissä"),
                           ...
$sivu->assign("navigaatio", $navigaatio);
$sivu->display("index.tpl");

index.tpl:

<ul id="navigaatio">
    {foreach from=$navigaatio item=navi}
        <li><a href="{$navi.href}">{$navi.name}</a></li>
    {/foreach}
</ul>

Kaikki sivuston sivut käyttävät jotakin templatea. Tällä tavoin sivuille yhteiset rakenteet on saatu siivottua yhteen templateen ja vain sivujen sisällöt eroavat toisistaan.

Yahoo UI: Reset, Fonts, Grids ja Base

Lyhyesti kerrottuna Reset poistaa kaikki HTML-elementtien valmiit muotoilut, jotka saattavat erota eri selaimissa. Tämän jälkeen kaikki selaimet näyttävät peruselementit kuten tekstikappaleet ja listat periaatteessa samalla tavalla.

Resetin jälkeen kaikkien elementtien marginit ja paddingit ovat nollassa, mikä ei yleensä ole haluttu lopputulos. Näitä ei onneksi tarvitse muuttaa käsin, vaan apuun tulee Base-CSS, joka määrittelee tietyt yleisimmät perusmuotoilut, kuten esimerkiksi listojen sisennykset.

Fonts auttaa fonttikokojen yhtenäistämisessä eri selaimien välillä. Grids CSS:ää olen sivunnut aikaisemmin.

jQuery

jQuery on JavaScript-kirjasto, joka on tarkoitettu helpottamaan JavaScriptin yhdistämistä HTML:ään. Perinteisesti HTML-sivun eri elementteihin on JavaScriptissä viitattu käyttämällä getElementBy*-funktioita. jQueryssä voi sen sijaan käyttää paljon yksinkertaisempaa koodia eri elementtien hakemiseen. Kirjastossa on paljon erilaisia funktioita animaatioihin ja ajax-juttuihin, joihin en ole vielä tutustunut kunnolla.

Paulan korusivulla jQueryä käytetään varjostuksen lisäämiseksi kuville. Kuvat on tässä määritelty kattamaan .kuvat-divien sisällä olevat <img>-tagit.

$(document).ready(function(){
	   $('.kuva img').shadow({
		offset: 5,
		opacity: 0.11
	   });
	});

Kannattaa huomata, että shadow-funktio vaatii toimiakseen jQuery-peruspaketin lisäksi myös jquery.dimensions.js ja fx.shadow.js -tiedostot.

Varjotukset eivät valitettavasti toimi aivan täydellisesti. Varjot menevät IE6:lla rikki ja jäävät joskus näkymättä uudemmillakin selaimilla.

mod_rewrite

Sivuston käyttämät URLit on siivottu käyttäen apachen mod_rewrite-sääntöjä. Esimerkki:

RewriteEngine On
RewriteRule ^([a-z\-]+)/([0-9]+)$ index.php?kategoria=$1&sivu=$2

Kyseinen sääntö muuttaisi esimerkiksi URLin

http://www.paulaminni.fi/korvakorut/1

muotoon

http://www.paulaminni.fi/index.php?kategoria=korvakorut&sivu=1

Tämän avulla käyttäjille näkyy siistimmät URLit. Sivuston URLit voidaan myös säilyttää samana, vaikka sivuston tekniikka muuttuisi muuten. Edellä olevassa esimerkissä index.php voidaan nimetä uudestaan tai parametrien nimet vaihtaa ilman että käyttäjät tai hakukoneet huomaavat eroa.

Smart Image Resizer

Etusivulla ja galleriassa näkyvät pikkukuvat on kaikki tehty käyttäen Smart Image Resizer -PHP-skriptiä. Skriptille annetaan kuvan osoite ja haluttu koko, johon kuvat muutetaan. Paulan korusivulla kuvien URLit ovat esimerkiksi:

<img src="/paula/image.php/Kaulakorut/_DSC0060.jpg?width=200&height=200&cropratio=1:1&image=/paula/kategoriat/Kaulakorut/_DSC0060.jpg" alt="" />

Pahaksi onneksi skripti käyttää imageconvolution()-funktiota, jota ei löydy PHP:n valmiiksi käännetyistä GD-kirjastoista. Netistä löytyy kuitenkin PHP:lla kirjoitettu imageconvolution-funktio, joka ajaa saman asian, mutta on erittäin hidas. Sivuston kuvat eivät onneksi muutu kovin usein ja valmiiksi pienennetyt kuvat tallennetaan palvelimelle, eikä niitä tarvitse laskea uudestaan.

Yhteenveto

Paljon siis mahtuu yksinkertaisenkin sivuston toteutukseen. Osaa tekniikoista (jQuery, mod_rewrite, smart image resizer) kyllä käytin lähinnä sen takia, että halusin tietää miten ne toimivat.

Paulan korusivu ei ole missään nimessä valmis, jatkan pienimuotoisia parannustöitä muiden töiden ohessa. Seuraavaksi listalla olisi mm. RSS-syötteen tekeminen uusista koruista. Kommentteja ja parannusehdotuksia saa myös laittaa.