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

Sisältö

  1. Web-standardit
  2. Mistä web-standardeissa on kysymys?
  3. Muutos ajattelutavassa
  4. Semanttisesti oikea merkintä (markup)
  5. Mitä on pätevä koodi?
  6. Mitä on esteetön koodi?
  7. Miksi käyttää CSS:ia erottamaan sisältö esitystavasta?
  8. Kuinka CSS:lla toteutettu sivusto toimii?
  9. Miten kävijät hyötyvät web-standardeista?
  10. Miten asiakkaat hyötyvät web-standardeista?
  11. Miten SINÄ hyödyt web-standardeista?
  12. Mitkä ovat huonot puolet?
  13. Miten saavutat web-standardit?
  14. Päätelmät
  15. Materiaalia web-standardeista

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:

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ää?

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 kaikissa HTML-sivuissa

Esitystapa määritellään erillisessä tyylitiedostossa

Esitystapa määritellään erillisessä tyylitiedostossa

Erilliset tyylitiedostot uusille selaimille, tulostimille ja vanhoille selaimille

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

Validointi

Käytettävyys

CSS