Web-standardien edut kävijöille, asiakkaille ja sinulle!

Sisältö

1. Web-standardit

Web standards are intended to be a common base… a foundation for the world wide web so that browsers and other software understand the same basic vocabulary. (Web-standardit on tarkoitettu peruslähtökohdaksi… WWW:n perustaksi, jotta selaimet ja muut ohjelmistot ymmärtäisivät samaa perussanastoa.)
Eric Meyer

W3C (World Wide Web Consortium) ja muut standardointilaitokset ovat määritelleet teknologioita verkkopohjaisen sisällön luomiseen ja tulkintaan. Varsinaiset standardit ovat:

Rakenteelliset kielet: Extensible Hypertext Markup Language (XHTML) 1.0; XHTML 1.1; Extensible Markup Language (XML) 1.0
Esityskielet: Cascading Style Sheets (CSS) Level 1; CSS Level 2; CSS Level 3
Objektimallit (Object Models): Document Object Model (DOM) Level 1 (Core); DOM Level 2
Skriptikielet: ECMAScript 262 (Javascriptin standardi versio)
Muita esityskieliä (Markup): Mathematical Markup Language (MathML) 1.01; MathML 2.0; Scalable Vector Graphics (SVG) 1.0

2. Mistä web-standardeissa on kysymys?

Web-standardit on suunniteltu:

tuomaan suurinta mahdollista hyötyä mahdollisimman suurelle joukolle www:n käyttäjiä
varmistamaan minkä tahansa www-dokumentin pitkäikäisyys
yksinkertaistamaan koodia ja pienentämään valmistuskustannuksia
saamaan aikaan sivustoja, jotka ovat suuremman ihmisjoukon ja laitevalikoiman tavoitettavissa
toimimaan oikein huolimatta selainten kehityksestä ja uusien laitteiden saapumisesta markkinoille

Web-suunnittelijoille ja kehittäjille web-standardeissa on kyse standardien (rakenteellisten, esityksellisten, objekti- ja skriptauskielten) käytöstä sekä niiden hyödyntämisestä parhaalla mahdollisella tavalla (pätevä, semanttisesti oikea ja esteetön koodi) hyödyttämään käyttäjiä, asiakkaita ja sinua.

3. Muutos ajattelutavassa

Perinteinen web-sivusto

Perinteinen web-sivuston kehittäminen on jatkoa painetulle medialle – sen tarkoitus on saada sivustot näyttämään viimeistä pikseliä myöten täydellisiltä 5-6 yleisimmässä selaimessa. Yleisiä ominaisuuksia ovat:

Taulukko -pohjaiset taitot
Ulkoasumäärittelyt sisällön sisällä (font-tagit)
Koodi, joka ei ole validia
Esteellinen koodi
Semanttisesti väärä koodi

Web-standardien mukainen sivusto

Web-standardeissa on kysymys siitä, että ajatellaan verkkoa laajana kommunikointivälineenä, jonka voi tavoittaa monimuotoinen joukko käyttäjiä ja valikoima laitteita. Tyypillisiä ominaisuuksia ovat:

Semanttisesti oikeaoppinen merkintätapa (markup)
Pätevä (validi) koodi
Esteetön koodi (ihmisille ja laitteille)
Tyylitiedostot (CSS) sisällön ja ulkoasun erottamiseen

4. Semanttisesti oikea merkintätapa (markup)

Semanttisesti oikea merkintätapa (markup) käyttää html -elementtejä niin kuin ne on tarkoitettu. Hyvin muotoillulla HTML:llä on rakenteellista merkitystä laajalle joukolle käyttäjiä (selaimet ilman tyylitiedostoja, tekstiselaimet, PDA:t, hakukoneet jne.)

Käytä standardinmukaisia HTML-elementtejä ja vältä HTML-elementtien muotoilemista näyttämään toisilta HTML-elementeiltä. Yksinkertaistaen:

käytä otsikoita varten otsikko -elementtejä alkaen elementistä H1
käytä tekstikappaleita varten kappale -elementtiä
käytä listoja varten lista -elementtejä

5. Mitä on pätevä koodi?

Validointi on prosessi, missä tarkistetaan, että dokumentti vastaa virallista standardia, kuten W3C:n julkaisemat. Dokumentti, joka on tarkistettu ja joka on läpäissyt tarkistuksen, käsitetään päteväksi.

Miksi käyttää pätevää koodia?

Pätevä koodi toimii nopeammin kuin virheellinen koodi
Pätevä koodi toimii paremmin kuin virheellinen koodi
Selaimet kehittyvät enemmän standardeja tukeviksi, jolloin on yhä tärkeämpää kirjoittaa pätevää ja standardien mukaista HTML:ia.

Miten tarkistat onko koodisi pätevää?

W3C Markup Validation Service
W3C CSS Validation Service
WDG HTML Validator
Stylesheets.com CSS Validator
Monet ohjelmistotuotteet sisältävät nykyään valmiiksi työkaluja validointiin

Miten teet koodisi päteväksi?

Aloita oikealla dokumenttityypillä (doctype)
Huomioi dokumenttityypin moodit (modes) (standardien mukaisuus, quirks mode jne.)
Käytä character set -määritettä
Sulje HTML-elementit
Käytä alt-attribuuttia kuvissa
Vältä HTML-hakkeja (hacks)
Käytä HTML-validointia säännöllisesti
Korjaa kaikki virheet ennen sivuston julkaisua
Tee validoinnista osa normaalia työprosessiasi

6. Miksi käyttää esteetöntä koodia?

Mahdollistaa sivustosi saavutettavuuden laajemmalle yleisölle (näkövammaiset, motorisista ongelmista kärsivät, kognitiivisista ongelmista kärsivät)
Mahdollistaa sivustosi saavutettavuuden useammalle laitteelle (käsitietokoneet, näytönlukijat [screen readers], tekstiselaimet, hakukoneet)
On vaatimuksena viranomaissivustoille joissakin maissa

Miten teet koodisi esteettömäksi?

Tarjoa tekstivaihtoehdot ei-tekstuaalisille elementeille
Käytä esteettömiä taulukoita (nimeä rivi- ja sarakeotsakkeet)
Käytä esteettömiä lomakkeita (label for, id, fieldset, selitykset)
Käytä mieluummin merkintää kuin kuvia tiedon välittämiseen.
Tarjoa näkyviä tapoja ohittaa valikot
Tarjoa valintanäppäin -toiminto (antaa mahdollisuuden siirtyä linkistä toiselle sivulle näppäinyhdistelmän avulla)
Käytä tyylitiedostoissa vain suhteellisia mittayksiköitä määrittämään taittoa ja ulkoasua
Huolehdi, että dokumentit ovat luettavissa myös ilman tyylitiedostoja
Sisällytä metadata semanttisen informaation lisäämiseksi

7. Miksi käyttää CSS:ia erottamaan sisältö esitystavasta?

Web-kehittäjien tavoite on poistaa kaikki ulkoasumääritteet html-koodista, joka näin jäisi siistiksi ja rakenteellisesti oikeaksi.

Useamman laitteen saavutettavissa
Helpompaa tehdä koko sivuston laajuisia muutoksia – yksi tyylitiedosto mieluummin kuin kaikilla sivuilla erikseen
Pienemmät tiedostot / nopeampi lataus – vähemmän koodia sivulla
Vähemmän koodia sivulla – helpompaa koodata
Sallii käyttäjien muokata sivua omiin tarpeisiinsa – tyylin vaihtajat
Koodi paremmin hallinnassa – mahdollista tarjota koodia halutussa järjestyksessä näytönlukijoille

Esitystapa määritellään kaikissa HTML-sivuissa

Esitystapa määritellään erillisessä tyylitiedostossa

Erilliset tyylitiedostot uusille selaimille, tulostimille ja vanhoille selaimille

8. Kuinka CSS:lla toteutettu sivusto toimii?

Yksi CSS:n vahvoista puolista on se, että sisältö voidaan kohdentaa uudelleen vastaamaan tarpeita paremmin – ilman, että riviäkään html-koodia muutetaan.

9. Miten kävijät hyötyvät web-standardeista?

Tiedostot latautuvat nopeammin (vähemmän koodia, ei taulukoita, pätevä koodi)
Sisältö on laajemman käyttäjäkunnan saavutettavissa (peruskäyttäjät, sokeat käyttäjät, näkövammaiset käyttäjät, lukihäiriöiset käyttäjät, motorisista häiriöistä kärsivät käyttäjät jne.)
Sisältö on useampien laitteiden saavutettavissa (näytönlukijat, selaimet, tekstiselaimet, käsitietokoneet, hakurobotit, tulostimet, jääkaapit jne.)
Sallii käyttäjien muokata sivuston ulkoasua (tyylinvaihtajat)
Tarjoaa tulostukseen soveltuvia versioita kaikista sivuista

10. Miten asiakkaat hyötyvät Web-standardeista?

Helpompi ylläpito (vähemmän koodia, modulaarinen koodi)
Halvemmat palvelinmaksut (vähemmän koodia)
Parempi sijoitus hakukoneissa
Sisältö voidaan muotoilla uudestaan helposti muuttamatta koodia
Tarjoaa käyttäjille muokattavuutta
Tarjoaa tulostettavia versioita ilman sisällön toistamista
Parantaa esteettömyyttä (välttämätöntä viranomaisasiakkaille)

11. Miten sinä hyödyt web-standardeista?

Helpompaa koodata (modulaarinen koodi)
Helpompaa ylläpitää (vähemmän koodia, modulaarinen koodi)
Vähemmän laitekohtaista koodaamista (vakaa laajemmalla laitevalikoimalla)
Tarjoaa kilpailuedun kun maailmalla siirrytään enemmän käyttämään web-standardeja.

12. Mitkä ovat huonot puolet?

Jyrkkä oppimiskäyrä
Selainten yhteensopivuus
Jotkut taitot on helpommin toteutettavissa taulukoilla kuin tyylitiedostoilla

13. Miten saavutat web-standardit?

Web-standardit eivät ole mustavalkoinen asia. Kaikkien kehittäjien pitäisi vähitellen siirtyä kohti web-standardin mukaisia sivustoja.

Muutos perinteisestä web-standardien mukaiseen kehitykseen vaatii aikaa ja harjoitusta. Sen sijaan että hätiköisit ja joutuisit heti turhautumaan, aseta saavutettavissa olevia tavoitteita ja siirry vähitellen kohti web-standardeja. Esimerkiksi:

Perusmuutokset

Lisää oikea dokumenttityyppi (doctype) kaikille sivuille
Lisää alt-teksti kaikkiin kuviin
Lisää tarkoituksenmukaiset otsikot sivuihin

Keskitason muutokset

pätevä koodi
semanttisesti oikeaoppinen koodi
fontti-tagien ja värimääritysten siirto tyylitiedostoon
esteettömät lomakkeet, datataulukot ja oikopolut

Edistyneet muutokset

perusasettelu tyylitiedostolla (padding, marginaalit jne.) kun käytetään taulukoita taiton toteuttamiseen
täydellinen asettelu tyylitiedostolla – ei taulukoita taiton toteuttamiseen

Harjoittele tyylitiedostoilla taittoa

lue CSS-oppaita ja -kirjoja, että ymmärtäisit tyylitiedostojen käytännöllisiä sovelluksia
järjestä aikaa opetellaksesi tyylitiedostoilla asettelua ilman ulkopuolisia paineita
harjoittele useilla tyylitiedostotaitoilla kunnes olet varma itsestäsi

14. Päätelmät

Web-standardeilla saadaan aikaiseksi:

nopeampi tiedostonlataus
esteetöntä koodia laajemmalle kayttäjäkunnalle ja laitevalikoimalle
käyttäjäkohtainen muokkaus
tulostamiseen sopivien versioiden helppo toteutus
pienemmät palvelinkustannukset
parempi sijoitus hakukoneissa
nopeampi ja tehokkaampi sivuston ylläpito
kilpailuetu

Web-standardit hyödyttävät käyttäjiäsi, asiakkaitasi ja sinua.

15. Materiaalia Web-standardeista

Web-standardit

Semanttinen koodi

http://brainstormsandraves.com/articles/semantics/structure/

Validointi

Käytettävyys

CSS

2 comments:

Toni sanoo:

28.10.2008 00:58

Hei!

Jyrkkä oppimiskäyrä tarkoittaa ”helposti opittavaa”, ei ”vaikeasti opittavaa”. Oppimiskäyrässä X-akselilla kuvataan aika ja Y-akselilla taidot, jolloin jos käyrä nousee heti jyrkästi origosta ylöspäin, käyttäjä oppii lyhyessä ajassa paljon… katsokaapa vaikka wikipediasta learning curve.
Pujab sanoo:

03.06.2015 11:57

Kiitti

Kommentointi on suljettu.

Saavutettava.fi

Saavutettavuudesta suomeksi