Inventive Design
19.2.2007 Lasse Larvanko

Kuinka ratkaiset verkkopalveluiden laatuongelmat

Web-standardien oikeellisuus laatukriteerinä

Huono käyttöliittymäkoodi sulkee pois osan asiakkaista ja saattaa estää Googlea löytämästä sivujasi. Käyttöliittymän laatua on vaikea mitata. On kuitenkin olemassa World Wide Web Consortiumin web-standardit. Lue kuinka käytät web-standardeja laatukriteerinä.

Visuaalisesti samannäköisen sivun saa tuotettua lukemattomilla tavoilla. Visuaalisuus ei kuitenkaan ole oikea lähtökohta verkkopalvelun käyttöliittymän rakentamiseen. Web ei ole vain visuaalinen media, vaan asioiden merkitys määrää kuinka käyttöliittymä tulisi rakentaa. Esimerkiksi kuvan käyttö otsikkona ilman oikeaa rakennetta hävittää otsikon semanttisen merkityksen ja ilman alt-tekstiä otsikon tietokaan ei välity verkkosivua ei-visuaalisesti lukevalle, kuten Googlelle.

Mitä hyötyä on web-standardeista ja automaattisista oikeellisuuden tarkistajista

Ilman laatuprosessia jää käyttöliittymäkoodin laadun tarkastaminen helposti tekemättä. Web standardien automaattiset tarkistustyökalut ovat kuitenkin nopeita keinoja laadun tarkistamiseen. Aikaisemmin olen jo kertonut web-standardien hyödyistä:

  • Verkkopalvelun ylläpito ja kehitys on hallittua laatukriteeristön ansiosta
  • Verkkopalvelu on saavutettavampi web-standardien avulla
  • Verkkopalvelun on hakukonelöydettävämpi web-standardien avulla

Kuinka tarkastat verkkopalvelun laadun

W3c tarjoaa verkkosivun rakenteen ja tyylitiedoston oikeellisuuden tarkistamista automaattisella työkalulla.

Verkkopalvelun rakenteen tarkistaminen

Verkkopalvelun rakenteen, oli se sitten html tai xhtml, onnistuu osoitteessa validator.w3.org. Kerroin tästä jo artikkelissa Onko sivusi Da Vinci-koodia Googlelle.

Laadun tarkkailussa pyritään virheettömään toteutukseen. Sivun ollessa merkinnältään virheetön, on selaintestaus ja verkkopalvelun kehittäminen huomattavasti yksinkertaisempaa. Validi sivun näkyy selaimissa pääasiassa samoin tavoin selaimista toiseen. Vaikka poikkeavuuksia selaimissa on paljonkin, on näiden eroavaisuuksien löytäminen ja korjaaminen huomattavasti helpompaa validilla merkinnällä.

Verkkopalvelun visuaalisuuden – tyylitiedoston tarkistaminen

Myös sivun visuaalisuuden määrittelyn tekevä css-tyylitiedosto voidaan tarkistaa automaattisesti. Toiminto on hyvin samanlainen kuin merkinnän tarkistajallakin.

Verkkopalvelun saavutettavuuden tarkistaminen

Saavutettavuuden tarkistaminen on jo hankalampaa, kuin pelkästään web-standardien käytön oikeellisuuden tarkistaminen. Erilaisia saavutettavuuden kansainvälisiä ohjeistoja löytyy useita, samoin kuin kansallisia ohjeita: Tieken Esteettömyysopas, Esteetön sisällöntuotanto, JHS.. Automaattisiakin tarkistajiakin on listattu monta. Mitä näistä siis kannattaa käyttää? Minä käytän niitä joiden käyttö on niin nopeaa että tarkistus tulee tehtyä. Siinä auttaa huomattavasti seuraava.

Kuinka testaat nopeasti ja pienellä vaivalla

Lisää Firefox selaimeesi automaattisen testaamisen työkaluksi web developer toolbar. Tämä lisäosa on enemmän kuin painonsa arvoinen kultaa. Käyttöliittymän tutkimiseen ja kehittelyn lisäksi se on paras ja nopein tapa testata verkkosivun rakenteen ja css:n oikeellisuus.

Lataa web developer ja asenna se.

Kuinka web developeria käytetään

Web developer työkalussa on työkaluriovi, josta sitä varsinaisesti käytetään sekä oikeellisuus liikennevalo, josta näkee suoraan sivun oikeellisuuden

Web developer toolbar käytössä.

Kuvassa 1:llä merkitty alue on varsinainen web developer toolbar, josta kaikki toiminnallisuudet valitaan. Tool valikossa on mm validate css, validate html, validate wai, validate section 508.

Tämän lisäksi oikeassa alanurkassa 2:lla merkityssä kohdassa on sivun rakenteen validoinnin tulos. Mikäli sivu näyttää vihreää, on kaikki kunnossa. Jos taas sivu näyttää keltaista varoituskolmiota on sivulla joitakin virheitä. Varoituskolmiota klikkaamalla aukeaa sivun lähdekoodi virhelistalla, ja virhelistaa klikkaamalla pääsee kyseiselle riville katsomaan missä virhe on. Näin virheiden löytäminen on todella nopeaa. Ne kaksi muuta vihreää ovat tails, mikroformaattien tunnistaja sekä Firebug-kehitystyökalu.

Tekeekö automaattitestaus autuaaksi?

Automaattiset tarkistajat ovat vain yksi tapa lisätä käyttöliittymän laatua. Ne ovat kuitenkin varsin yksinkertaisia ja nopeita tarkistusmetodeja, jotka eivät korvaa hyvää suunnittelua. Itse käytän niitä hyvin paljon laadun tarkkailussa ja virheiden etsinnässä.

Pidä kuitenkin mielessä että, automaattiset tarkistajat eivät takaa hyvää laatua, ne takaavat koodin oikeellisuuden. Se on jo hyvä alku ja loistava laatukriteeri. Verkkopalvelu tulee kuitenkin suunnitella vastuullisesti ja merkitä semanttisesti oikein. Automaattiset työkalut eivät tee eroa huonosti tehdyn, mutta oikeellisen ja vastuullisen, semanttisen koodin välillä.

Esimerkiksi:

<div id="nosto">
<div id="iso-punainen-otsikko">
Kuinka ratkaiset verkkopalveluiden laatuongelmat</div>
</div>

on aivan yhtä oikein koodillisesti kuin:

<h1>Kuinka ratkaiset verkkopalveluiden laatuongelmat</h1>

Mutta jälkimmäinen on lisäksi semanttisesti oikein, eli se arvotetaan mm hakukoneissa sivun pääotsikoksi ja se toimii oikein ruudunlukulaitteilla. Semanttinen koodi on saavutettavampaa ja hakukoneystävällisempää.

Yhteenveto

Web-standardien oikeellisuuden tarkistaminen on hyvin helppo, mitattavia tuloksia antava laatukriteeri verkkoon. Oikeellisuuden tarkistaminen on nopeaa automaattisella työkalulla ja siksi onkin osa vastuullisen suunnittelijan ja kehittäjän verkkopalvelun rakennusprosessia.

Web-standardien oikeellisuuden tarkistaminen on hyvin helppo, mitattavia tuloksia antava laatukriteeri verkkoon."



Sivun alkuun