Konsepton sivusto: Valmiit komponentit
Sivustojen toteuttajien työtä helpottavia ilmaisia komponentteja löytyy nykyisin valtavasti. Komponenttien laatu vaihtelee kuitenkin paljon ja välillä riittävän laadukkaan komponentin löytäminen voi olla vaikeaa.
Esittelen tässä kirjoituksessa Konsepton sivustolle valitut valmiit komponentit.
Sisällys
- JavaScript-ohjelmistokehys
- Tyylikkäämmät fontit
- Kuvien suurennustoiminto
- Apuviivasto
- Yhteydenottolomake
- Muut ominaisuudet
JavaScript-ohjelmistokehys
Mikäli sivustolle on tulossa JavaScriptin avulla toteutettavia toimintoja, niin koodausta helpottava ohjelmistokehys (framework) on aivan ehdoton lisäys. Ohjelmistokehys on käytännössä ohjelmakirjasto, joka täydentää JavaScriptin valmiita funktioita lukuisilla verkkosivujen kohdalla tarvittavilla toiminnoilla.
JQuery on todennäköisesti suosituin JavaScript-ohjelmistokehys ja se on ollut jo vuosia oma valintani kaikissa uusissa projekteissa. Muita harkitsemisen arvoisia vaihtoehtoja ovat mm. Dojo Toolkit ja Prototype.
JQueryn mainoslause voisi olla, että se lisää JavaScriptiin ominaisuudet, jotka siinä olisi pitänyt olla alusta lähtien. Tärkein ominaisuus on se, että HTML-elementtejä voi valita erittäin tehokkaasti CSS-kielestä tuttujen valitsimien (selectors) avulla. Näin valittuihin elementteihin voidaan lisätä erimerkiksi tapahtumien käsittelykoodia tai niitä voidaan käsitellä muilla tavoin. Valmiita toimintoja ovat mm. elementtien piilottaminen ja näyttäminen, luokkanimien lisääminen ja poistaminen ja animointi.
JQueryn käyttäminen nopeuttaa koodaustyötä valtavasti. Oman karkean arvioni mukaan jQueryn käyttäminen vähentää erilaisiin toimintoihin vaadittavan uuden koodin määrän n. kahdeskymmenesosaan verrattuna pelkkään JavaScript-kieleen.
Lisähyötynä kaikki toiminnot voivat sijaita erillisessä JavaScript-tiedostossa, eikä HTML-koodin joukkoon tarvitse välttämättä lisätä lainkaan JavaScript-koodia. Tämä helpottaa koodin ylläpitoa huomattavasti.
Esimerkki jQueryn käytöstä Konsepton sivustolla:
// Tiedosto konsepto.js // Lisätään välilehtitoiminnot $('.tabs > .labels a').click(function() { $(this).parent().parent().parent().children('.tab').hide().filter(this.hash).show(); $(this).parent().parent().find('a').removeClass('active'); $(this).addClass('active'); return false; });
Yllä oleva koodinpätkä valitsee sivulta luokkanimien perusteella kaikki välilehtien otsakkeiksi tarkoitetut linkkielementit ja lisää niihin toiminnot aktiivisen välilehden sisällön näyttämiseen ja muiden välilehtien sisällön piilottamiseen. Lisäksi se muuttaa valitun otsakkeen visuaalisen tyylin aktiiviseksi ja muiden ei-aktiiviseksi luokkanimiä vaihtamalla. Kaikki tämä on toteutettu kuudella rivillä koodia.
HTML-koodin puolella välilehdet näyttävät tältä:
<!-- Sivu http://konsepto.fi/ota-yhteytta --> <div> <ul> <li><a href="#contact-details">Yhteystiedot</a></li> <li><a href="#contact-form">Yhteydenottolomake</a></li> </ul> <div id="contact-details"> [Yhteystiedot] </div> <div id="contact-form" style="display: none;"> [Yhteydenottolomake] </div> </div>
Välilehdet ovat käytössä täällä.
Kuten aina, uuden tekniikan käyttöönottoa hankaloittaa opetteluun liittyvä aloituskynnys. JQueryn kohdalla aloituskynnys ei onneksi ole korkea ja opettelu maksaa itsensä takaisin ensimmäisessä projektissa. Hyvä dokumentaatio auttaa opettelussa.
Bonuksena jQueryn sivuilta (ja muualta verkosta) löytyy valtavat määrät jQueryn päälle rakennettuja lisäosia (plugins), jotka toteuttavat erilaisia toimintoja ja vähentävät koodaustyötä entisestään.
jQueryn harvoja puutteita on se, että sen valmiit käyttöliittymäkomponentit eivät ole kovin laadukkaita. Muut ominaisuudet ovat kuitenkin niin hyviä, että ne korvaavat tämän puutteen helposti.
Tyylikkäämmät fontit
Jostain syystä tekstityyppejä myyviltä yrityksiltä ei ole löytynyt vielä kiinnostusta mahdollistaa erilaisten kirjaisinten käyttämistä verkossa. Kyseinen päätös on ollut liiketoiminnan kannalta äärimmäisen huono. Vaikka vain yksikin prosentti sivustojen suunnittelijoista olisi ostanut lisenssin fonttitiedostojen jakamiseen sivustonsa mukana, kyseiset yritykset olisivat tienanneet miljardeja euroja.
Toistaiseksi ainoa keino käyttää epätavallisia fontteja piirtämättä kuvia etukäteen käyttää monimutkaisia tekniikoita, jotka korvaavat tekstit kuvilla jälkikäteen. Tähän tarkoitukseen on kehitetty useita eri tekniikoita. Mikään niistä ei ole täydellinen, joten valinta joudutaan tekemään etujen ja haittojen kompromissina.
Konsepton sivuston navigaatioissa ja otsikoissa käytetään fonttia nimeltä Franklin Gothic Demi Condensed. Sen toteuttamiseksi päädyttiin Cufón-nimiseen tekniikkaan.
Cufón toimii siten, että alkuperäinen fonttitiedosto muutetaan etukäteen koordinaatteja sisältäväksi JavaScript-tiedostoksi. Sivun latausvaiheessa Cufón lisää korvattavien tekstien joukkoon canvas-elementtejä ja piirtää tekstit kuvina niihin. Korvattavat elementit valitaan JavaScript-funktioilla, joten HTML-koodiin ei tarvitse tehdä lainkaan korvaamiseen liittyviä lisäyksiä.
Cufónin etuna on se, että tekniikka ei vaadi Flashia toimiakseen. Lisäksi Cufón osaa toteuttaa esimerkiksi tekstin joukosta löytyvät linkit sekä tyylitiedostossa määritellyt tyylit oikein.
Cufónin ongelmana on se, että useimmat fonttien myyjät eivät salli fonttiensa jakamista verkossa edes JavaScript-muunnoksen jälkeen. Adobe kuulemma sallii myymiensä fonttien jakamisen tällä tavoin, mutta sekin kannattaa tarkistaa tapauskohtaisesti.
Toinen ongelma on se, että korvaus lisää alkuperäisen tekstin joukkoon ylimääräisiä elementtejä ja hankaloittaa siten ruudunlukuohjelmien toimintaa.
Kuvien suurennustoiminto
Kuvien suurentaminen hiirellä klikkaamalla on varsin hyödyllinen toiminto sivustoilla, joten sitä varten on kehitetty lukuisia erilaisia komponentteja.
Konsepton sivustolle valittiin Fancybox-niminen komponentti, koska se on erittäin viimeistelty ja visuaalisesti tyylikäs ratkaisu.
Tyylikkyyden lisäksi Fancybox on myös käytettävä. Esimerkiksi sulkemispainike sijoittuu kuvan vasempaan yläreunaan, mikä on yleinen käytäntö Windowsissa. Monessa muussa komponentissa sulkemispainike on sijoitettu selvästi huonompaan paikkaan tai korvattu tekstilinkillä, jota on hankalampi käyttää.
Kolmas tärkeä valintaperuste oli se, että Fancybox on helposti muokattavissa eri käyttötarkoituksia varten. Esimerkiksi suuret kuvat voi avata normaalissa koossa ja sallia ikkunan vierittäminen. Tarvittaessa kuvat voidaan myös skaalata sen mukaan, paljonko tilaa on käytettävissä.
Fancybox on käytössä mm. tällä sivulla.
Apuviivasto
HTML-elementtien asettelu leiskakuvien mukaisesti on usein työlästä. Kuvankäsittelyohjelman apuviivoja (grid, guides) vastaavan apuviivaston näyttäminen sivustolla helpottaa huomattavasti tehtävää.
#grid (tai Hashgrid) on ovela pieni komponentti, joka lisää sivustolle apuviivaston, jonka avulla elementtien ja tekstirivien sijoittelun tarkistaminen on helppoa. Apuviivat piirretään ensin käsin erilliseen läpinäkyvään kuvaan, minkä jälkeen ne saadaan näkyviin sivun sisällön päälle näppäinyhdistelmän avulla.
Näet esimerkin painamalla samanaikaisesti näppäimiä Alt+g Konsepton sivustolla. Sivun sisällön päälle pitäisi ilmestyä apuviivat, joita tekstit ja visuaaliset elementit noudattavat.
Tekstien kohdalla perusviivaston (baseline grid) noudattaminen on työlästä, mutta mahdollista. Perusvaatimuksena on se, että tekstirivin korkeus määritellään samaksi kuin perusviivaston korkeus. Tämän jälkeen pitää vielä korjata ja ratkaista muutamia pieniä eroavaisuuksia ja bugeja eri selainten välillä.
Kannattaa varautua siihen, että komponenttia joutuu hiukan muokkaamaan ja korjailemaan ennen kuin se toimii kunnolla omalla sivustolla. Apuviivasto toimii muissa yleisissä selaimissa paitsi Operassa.
Yhteydenottolomake
PHP-kielen valmiit funktiot sähköpostien lähettämiseen eivät ole kovin kattavia, vaan vaativat paljon koodia ympärilleen toimiakseen monimutkaisemmissa tapauksissa.
Ongelman voi ratkaista helposti ottamalla käyttöön PHPMailer-niminen ohjelmakirjasto.
Konsepton sivustolla sähköpostin lähetystä tarvitaan yhteydenottolomakkeen tietojen lähettämiseen eteenpäin. PHPMailerin avulla onnistui helposti mm. yhteydenottolomakkeen avulla lähetettyjen liitetiedostojen (ks. valinta työnhaku) lähettäminen edelleen haluttuun sähköpostiosoitteeseen.
Muut ominaisuudet
Edellä mainittujen lisäksi sivustolla käytetään vielä paria muuta komponenttia.
Konsepton logon kuva on animoitu siten, että kuva vaihtuu kahdeksan sekunnin välein uuteen. Animaation toteuttamiseen tarvittiin komponentti, joka vaihtaa kuvan tietyin väliajoin seuraavaan häivytysefektin (crossfade) kautta.
Tarkoitusta varten löytyi yksinkertainen jQuery-lisäosa nimeltä dumpCrossFade. Sen avulla efekti voitiin toteuttaa yhdellä koodirivillä sekä muutamalla asetuksella.
Viimeisenä on vielä komponenttipari, joka korjaa pienen käytettävyysongelman selaimissa.
Normaalisti sivunsisäistä linkkiä klikattaessa selain siirtyy välittömästi kyseiseen kohtaan avoimella sivulla. Tällöin käyttäjä ei voi tietää siirryttiinkö ylös tai alas nykyisellä sivulla vai vaihtuiko sivu kokonaan uuteen, mikä on omiaan sekoittamaan käyttäjän suuntavaiston.
Konsepton sivustolla ongelma on korjattu kahden jQuery-lisäosan avulla:
Kyseisten lisäosien avulla kaikkiin sivunsisäisiin linkkeihin lisättiin kolmasosasekunnin mittainen siirtymäanimaatio. Animaatio on lyhyt, mutta riittää ilmaisemaan mitä tapahtui. Tämänkin ominaisuuden lisääminen onnistui yhdellä koodirivillä.
Tämä kirjoitus kuuluu sarjaan Konsepton sivustoa käsitteleviä kirjoituksia. Kirjoitukset ovat:
Kirjoittaja
Uusimmat
Aihepiirit
- hakukoneoptimointi (1)
- käytettävyys (2)
- prosessi (1)
- suunnittelu (2)
- toteutus (2)
- yritys (1)
Kommentit
Aivanko totta