Az én weblapom szabványos! És az Öné?

Státusz

Jelen cikk a W3C Minőségbiztosítási Csoport munkájának részeként készült. Minden publikus visszajelzés a nyilvánosan archívált levezelőlistára (public-evangelist@w3.org), a privát visszajelzések a karl@w3.org címre küldhetők. A szerző méltányolja mindazok hozzászólásait, akik időt áldoztak visszajelzéseik és ötleteik megosztására.

A cikk számos nyelvi fordításban elérhető.

Bevezetés

Itt olyan egyszerű, problémamentes technikák és ötletek kerülnek ismertetésre, melyek javítják a weblapok minőségét és szabványoknak való megfelelőségét. A dokumentum a HTML-t használóknak, a webalkalmazásokkal dolgozó fejlesztőknek és webmestereknek készült.

A Weben található weblapok többsége nem szabványos. Feltételhető, hogy ez a weblapok 99%-ára igaz, de nincsenek ezt alátámasztó statisztikák. A fenti állítást igazoló vizsgálat igazán érdekes lenne.

Miért?

A HTML és a szabványok

Általános közvélemény

Számos megjegyzést és fecsegést hallottam a témáról. A legtöbb gyakran a hiányos ismeretre és a HTML érvényességének meg nem értésére utal. Álljon itt néhány példa:

Steve, vezérigazgató: Ha a weblapom a szabványok felhasználásával készülne, az unalmas lenne és vásárlókat veszítenék.

A W3C szabványokkal nagyon izgalmas weblapok készülhetnek. Egy szabványokat betartó honlap készítésének semmi köze sincs a kizárólag szöveges tartalmú weblapokhoz.

A W3C jelenleg is számos nagyon jó intergált technológiát ajánl. Egy teljes multimédiás weblapot fedezhetünk fel az olyan már létező és működő W3C technológiákkal, mint az XHTML (struktúrált XML jelölés), a CSS (stíluslapok), az SVG (2D animált vektorgrafika) és a SMIL (szinkronizált multimédia). Ezen technológiák a webes piac különböző szereplőinek együttműködésén alapszanak.
Alan, szakmai igazgató: Nincs pénzem rá, hogy a weblapomon törődjek a szabványokkal. Túl sokba kerülne!

A szabványokkal tervezve egy weblapot annak kódja egyszerűbbé válik, mivel nincs több verzió a különböző böngészőknek. Oldalai hosszabb életűek lesznek és nem függ többé a nem egyértelmű technológiáktól. Így a webes szabványokkal készített honlap tervezése valójában kevesebbe kerül. A szabványokkal történő tervezés leegyszerűsíti a weblapok forráskódjának karbantartását, mivel a különféle böngészőkhöz nincs szükség több változatra. Az oldalak hosszabb életűek és a kiforratlan technológiáktól mentesek lehetnek. Ezért a webes szabványokkal történő fejlesztés valójában olcsóbb.
Dean, művészeti igazgató: Ha figyelembe venném a szabványokat, az akadályozná a kreativitásomat.

Minden művészeti médiumnak megvannak a maga technikai megkötései, legyen szó akár rajzolásról, szobrászatról vagy weblapok tervezéséről. Az akvarelleknek és olajfestményeknek is megvannak a saját megkötései, de ezek a technikák nem szabnak határt a kreativitásnak, sőt inkább kínálják a kreativitás kifejezését.

A honlapok szabványos szerkesztése új lehetőségeket kínál, különösen a média, a szakma és a nagyközönség számára. Ezen a területen még rengeteg dolgok vár felfedezésre. A szabványokon alapuló multédiás tapasztalatok előnyeit még csak most kezdik felfedezni.
Claudia, grafikus: Nem foglalkozom az akadálymentességgel. Az akadályozottak nem tartoznak az általam megcélzott közönségbe.

Az akadálymentesség figyelembevétele a tervezés során igencsak előnyös. Az emberiség 8-10%-a akadályozott. Ezért célszerű az akadálymentességi irányelveket (és ezzel együtt a webes ajánlásokat) betartó weboldalak fenntartása (and therefore Web standards). A weblap forgalma nő, a tartalomhoz pedig többféle böngésző fog hozzáférni.

Egyes országokban törvény írja elő az akadálymentességet, például Ausztráliában az Akadályozottság diszkriminációs történye testületének feljegyzései, 3.1 verzió, 1999. május [2009. március 31-től elérhető a 3.3.1. verzió – a fordító megjegyzése ], az Egyesült Államokban az 508-as paragrafus (Web-alapú intranet és internet információk és alkalmazások). Európa is dolgozik egy hasonló terven (e-akadálymentesség).
Aminata, webprogramozó: Miért kellene foglalkoznom a szabványokkal? A Web egy szabad hely.

A Web valóban szabad, de számos ismeretlen igényű felhasználóval van megosztva. A szabványok kidolgozásának oka az összes lehetséges közönség figyelemben tartása. A webes közösség kihívása a webes szabványokkal való fejlesztés, vállalkozásoktól és egyéni technológiáktól függetlenül. Platform-független technológiák alkalmazhatók.
Karl, webfejlesztő: Egyszerűen csak követtem a könyvek utasításait.

Sajnos számos könyv nem a helyes webprogramozást tanítja. Weblapok létrehozásakor ellenőrizni kell a forráskód helyességét. Amennyiben Ön webfejlesztő, legyen óvatos a könyvekkel alkalmazása fejlesztése során, és olvassa el azokat a specifikációkat, melyeket implementálni próbál.

Néhány weblap jó gyűjtemény a W3C szabványokkal összhangban történő tervezés elősegítésére [pl. az A List Apart, a W3 Geeks vagy a W3 Schools – a ford. megjegyzése]. A W3C honlapján az oktatóanyagok egyre növekvő listája található, a jó gyakorlások elősegítésére.

A W3C-nél néhányan fejlesztettek saját használatra ingyenesen elérhető szoftvereket. Használja őket, amikor csak lehetséges. Ezekbe a szoftvercsomagokba W3C technológiák vannak implementálva.
Tim, könyvelő: A weblapszerkesztőm nem szabványos kódot generál.

Számos fejlesztőeszköz generál nem szabványos kódot. Néhánynak beépített sziktaktikai ellenőrzője van, mások helyesen működnek, de számos program nem szabványos forráskódot készít. Az egyik haladó megoldás, hogy egy HTML kiértékelővel ellenőrizzük a forráskódot. Ugyanakkor kapcsolatba kell lépni a szoftverfejlesztővel (e-mailben, telefonon vagy levélben) és tudatni kell velük a problémákat. Ha elegen kérjük őket, a vállalatok ki fogják javítani a hibákat.
Valérie, webes közzétevő: Nem az én hibám, hanem a sablonok nem megfelelő tervezése (webes felületű rendszereken gyakori).

Igaza van. Gyakran nem az Ön hibája. Ha egy egyszerű űrlapról van szó és soha nem írt még HTML-forráskódot, a felhasználói felület fejlesztőjének vagy az oldal fenntartójának kell írni, amíg meg nem oldják a problémát. Ha nem biztos benne, hogy a létrehozott tartalom megfelel a W3C szabványoknak, értékelje ki a tartalmat a HTML kiértékelővel, és továbbítsa az eredményt a rendszergazdának, illetve a tartalomkezelő rendszerért felelős személynek.
Ning, szoftverfejlesztő: Nem áll rendelkezésre olyan anyag, ami segítségemre lenne. Minden, amit találtam, angolul van.

Néhányan lefordítottak dokumentumokat és specifikációkat más nyelvekre. A W3C fenntart egy listát a fordításokról.

A HTML egy szabvány (és az XHTML szintúgy!)

A HTML fokozatosan formálódott fejlesztése alatt, így számos verzió létezik. Ezek mindegyik szabvány, melyekből választani lehet igényeinknek megfelelően. A legtöbb esetben a legutóbbi változat a legjobb választás, hacsak nem egy nagyon különleges közönséget, esetleg régebbi böngészőket célzunk meg. A kiválasztott verzió határozza meg a használható elemeket és attribútumokat.

A HTML 4.01-hez például meg van határozva az elemlista és az attribútum-lista, melyek használata engedélyezett. Az oldalak manuálisan szerkeszthetők, ezt szokás "kézi kódolásnak" vagy "forráskód-szerkesztésnek" is hívni.

A HTML 4.01-es verziója lehetővé teszi, hogy a bekezdéshez egy bekezdés- és egy hivatkozás-azonosítót írjunk, az alábbi módon:

<p id="ref">This is a paragraph</p>

Figyeljünk az elemek egymásba ágyazására! Egyes elemeket nem lehet másokba foglalni, egyes attribútumok pedig csak bizonyos elemekhez tartozhatnak.

A dokumentumokban használható, illetve szoftverekbe implementható elemek a HTML verziótól függnek. Az alábbi táblázat tartalmazza a használható HTML definíciók vagy dokumentum-típusok (DOCTYPE) listáját:

Verzió	DTD lista	DOCTYPE deklaráció a dokumentokban
HTML 2.0	DTD	<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
HTML 3.2	DTD	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
HTML 4.01	Strict, Transitional, Frameset	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0	Strict, Transitional, Frameset	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1	DTD	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Egy dokumentum nem értékelhető ki, ha a fenti dokumentum-típusok (DOCTYPE) közül valamelyik nincs megadva a dokumentum elején. Erről nem szabad megfeletkezni, ha forrásszinten szerkesztjük a dokumentumot.

HTML fejlesztőszközök: Minden HTML fejlesztőeszköznek fel KELL ajánlania egy dokumentum-típust és az adott nyelvverziónak megfelelő jelölést kell alkalmaznia.
HTML sablon: Minden HTML sablonnak KELL rendelkeznie egy dokumentum-típus deklarációval (DOCTYPE).
HTML könyvtár vagy sablon-motor (szerver oldal): Minden HTML könyvtárnak vagy sablon-motornak vissza KELL adnia egy dokumentum-típust (DOCTYPE).

Álljon itt egy példa egy XHTML 1.0 Strict verziójú dokumentum-sablonra:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
        <title>An XHTML 1.0 Strict standard template</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
</head>

<body>

     ... HTML tartalom ...

</body>
</html>

Egy XHTML Strict sablon nagyon egyszerűen archíválható. A dokumentum-módosítás és -kiértékelés egyszerű és következetes.

Dokumentumok kiértékelése

HTML-kiértékelés

A HTML kiértékelők egyszerűen ellenőrzik a dokumentumok helyességét a deklarált dokumentum-típusnak (DOCTYPE) megfelelően.

Ha a végső dokumentumváltozat érvényességét szeretnénk ellenőrizni, mikor a renderelő (például webböngésző) megjeleníti, használható a W3C HTML kiértékelője. A HTML kiértékelő a választott HTML dokumentum-típusnak megfelelő hibák listáját adja vissza. Ha az Ön dokumentuma hibamentes, a No errors found! (=Nem találhatók hibák!) üzenettel tér vissza.

Ha a weblap űrlapok segítségével kerül szerkesztésre (HTML tagek írása nélkül), a hibákat jelezzük a rendszergazdának és kérjük a HTML-forrás generáló javítását.

Ha a weblap manuálisan készül, illetve a forráskódot közvetlenül szerkesztjük és a kiértékelő hibákat ad vissza az oldalra, egyszerűen javítsuk ki a forráskódot. A HTML kiértékelő megadja a hiba helyének sorát is.

A HTML kiértékelő megadja annak a sornak a számát, ahol a hiba feltűnt, így segítve a dokumentum hibáinak felderítését. Az állományt sorról sorra ellenőrzi, az első sortól kezdve. Ennek értelmében a dokumentum elején levő hiba az oldalon több hibát is eredményezhet. Egy jó módszer a hibák javítsára, ha először az első kijelzett hibát korrigáljuk, majd újra kiértékeltetjük a dokumentumot. Gyarkan előfordul, hogy egyetlen probléma javítása a dokumentum elején jónéhány további hibát is megszüntet. Ezt addig kell folytatni, amíg az összes hibát ki nem javítottuk és az eredményül kapott dokumentum szabványos nem lesz.

Ha egy HTML fejlesztőeszközt alkalmazunk és honlapunk a szerkesztés után nem érvényes, a szoftverfejlesztőt vagy vállalatot kell értesíteni. A vállalat szakmai támogatást nyújtó személyével kell felvenni a kapcsolatot.

A sablonok, szerkesztőprogramok és tartalomkezelő rendszerek fejlesztői a HTML kiértékelőt implementációik hibáinak javítására is használhatják. A programokban esetleg hivatkozni is lehet a HTML kiértékelőre. A HTML kiértékelő forráskódja ingyenesen hozzáférhető. A kiértékelő naponta fejlődik és Ön is hozzájárulhat a fejlesztéshez.

Megjegyzés: Egyes dokumentumok csupán a DTD szempontjából szabványosak, a HTML specifikáció szempontjából azonban nem. A közeli jövőben meg fog jelenni egy lista azokról a hibákról, melyeket a HTML kiértékelő nem jelez.

HTML kiértékelők

Hivatkozások kiértékelése

Egy másik fontos dolog sok weblapnál az URI-k állandósága. Dokumentumainkban más weblapokra való hivatkozásokat elhelyezekor feltételezzük, hogy ezek a hivatkozások stabilak és állandók maradnak. Ez azt jelenti, hogy az információ, melyre a hivatkozás mutat, akkor is ott van, amikor honlap olvasója az általunk megadott hivatkozásra kattint. Ellenőrizni és garantálni kell, hogy a megadott, más oldalakra mutató hivatkozások is hibamentesek legyenek. Erre a célra készült eszköz a W3C Link Checker (=W3C hivatkozás-ellenőrző).

A hivatkozás-ellenőrző egy hivatkozás-listát készít. A jelentés hossza az oldalunkon levő hivatkozások hozzáféréséhez és ellenőrzéséhez szükséges időtől függ. A hivatkozás ellenőrzéséhez a program a dokumentum egy HEAD HTTP kérését használja fel. Ha a szerver nem megfelelően van konfigurálva, a jelentésben a hivatkozás hibás lesz, még akkor is, ha maga a hivatkozás jó, csak a szerver nem tud HEAD-et kiszolgálni. Ebben az esetben írni kell a webmesternek, hogy javítsa a szerver konfigurációját.

Checking link http://webstandards.org/
HEAD http://webstandards.org/  fetched in 0.1s

Fent látható egy példa. A hivatkozás eléréséhez szükséges idő is fel van tüntetve.

A lista után a megszűnt vagy átirányított hivatkozások felsorolása következik, mely segít a helytelen hivatkozások javításában.

További információk találhatók a hivatkozások fontosságáról Tim Berners-Lee Cool URIs don't change (A jó URI-k nem változnak) című munkájában.

Ha Ön webmesterként szeretne telepíteni egy programot a weblapjára, mely segít a hivatkozások ellenőrzésében, felhasználhatja a W3C hivatkozás-ellenőrzőjének ingyenesen hozzáférhető forráskódját.

CSS kiértékelés

1996 óta a stíluslapok (Cascading Style Sheets, CSS) kínálják a szerkezet és stílus elkülönítésének elegáns és hatékony lehetőségét. 2001-ben számos böngészőbe bekerült a CSS1 és a CSS2 támogatás. A stíluslapok használata segít egyetelen helyen felügyelni dokumentumaink stílusait.

Jelen cikk írása idején a CSS 1 és CSS 2 közül választhatunk dokumentumaink stílusainak definiálásához [már létezik a CSS 3 ajánlás is – a ford.].

A stíluslapos fejlesztésnek számos előnye van, mint például a weblaptervezés költségének csökkentése és a megfelelő működés különféle böngészőkön. A weboldal különféle böngészőkre táblázatokkal és JavaScriptekkel fejlesztett többféle változata az eredeti költséget akár 30%-kal is növelheti.

Ne alkalmazzuk a FONT elemet a FACE attribútummal. Ezt a megoldás nemzetközi szempontok szerint is hátrányos. A font elem használatának kiküszöbölését és stíluslapok alkalmazását taglalja Todd Fahrner Beyond the FONT tag: Practical HTML text styling (=Túl a FONT tagen: Gyakorlati HTML szövegformázás) c. írása.

Ahogy a W3C HTML kiértékelő szolgáltatásával a jelölőnyelvet, úgy a W3C CSS kiértékelő szolgáltatásával a stíluslapokat ellenőrizhetjük. A dokumentum által meghívott külső stíluslapok érvényessége is ellenőrizhető. Ha egyéni igényei szerint szeretné testreszabni az eszközt, felhasználhatja a CSS kiértékelő ingyenesen hozzáférhető forráskódját.

Az akadálymentesség kiértékelése

Önmagában egy weblap elkészítése még nem elég. Az esetek többségében nem ismerjük az oldal látogatóit, akiknek különböző eszközeik vannak, eltérő böngészőket alkalmaznak és/vagy különféle akadályozottságokkal küzdenek. Számos üzleti előny származik az akadálymentesség biztosításból. Sajnálatos módon az akadálymentesség kevésbé következetesen értékelhető ki [mint a jelölőnyelv vagy a stíluslap esetében – a ford.]. Egyes eszközök, mint amilyen a Bobby is, felhasználhatók ugyan, de nem jelentenek végső megoldást az akadálymentesség kiértékelésére [további példák: Total Validator, Cynthia Says – a ford. megjegyzése]. Szükség van a tartalom emberi ellenőrzésére is. A Web Accessibility Initiative (=Webes akadálymentességi kezdeményezés) fenntart egy dokumentumlistát, mely elősegítheti az akadálymentes weblapok fejlesztését.

Eszközök, melyekkel a minőség lépésről lépésre javítható

Az emberek gyakran azért határolódnak el honlapjaik szabványosításától, mert nagyon sok a nem szabványos oldaluk vagy nem tudják, hogy álljanak neki a szabványosításnak. Pedig meglehetősen egyszerű, csak intelligensnek kell lenni ([az eredeti angol kifejezés betűjáték – a ford.]: Small, Meticulous, Accessible, Regular, Template (Kicsi, Aprólékos, Akadálymentesített, Szabatos, Sablonos). Kis lépésekkel weblapjaink szabványossá tehetők különösebb erőfeszítések és elbátortalanítás nélkül is. Haladó megközelítéssel találhatók olyan megoldások, melyek munkánkat elősegítik.

Az alábbi eszközök segítségével jobbá tehető weblapunk:

HTML Tidy [HTML tisztító – a ford.]

A Tidy nevű programot eredetileg Dave Raggett fejlesztette. A program segít weblapjaink szabványossá tételében. Bizonyos esetekben a Tidy nem tud minden hibát javítani. A Tidy nem fejlesztőeszköz — csupán a szerkesztés megkönnyítésére használható.

Érvénytelen dokumentumok toplistája

Néha nagyon nehéz meghatározni, weblapunk mely oldalai nem szabványosak. Egy minden oldalt átvizsgáló szkript számos lapot találhat, melyek nem szabványosak.

Akkor hát mi a megoldás?

A W3C-nél dolgozó Gerald Oskoboiny kifejlesztett egy progresszív minőségbiztosítási eszközt weblapok számára, ami nem terheli túl a rendszergazdát sem. Az eszköz jelentést küld a tíz leggyakrabban lekért nem szabványos dokumentumról, olyan megjegyzésekkel kiegészítve, melyekkel a hibák javíthatók. A rendszergazda minden héten egy új jelentést kap 10 újabb nem szabványos dokumentummal. Az eszközt nyilvánosságra hozták. Igény szerint felhasználható.

Olivier Théreaux (W3C) kifejlesztette az eszköz sokkal hordozhatóbb és beépülő modulokkal rugalmasabban kezelhető verzióját, a LogValidator‑t.

Az eszköz a webszerver utolsó naplófájljait kiértékelő modulokkal feldolgozza. Ezen kiértékelő modulok ellenőrzik a legnépszerűbb dokumentumok érvényességét egy meghatározott technológia alapján. Az alapértelmezett modul a HTML kiértékelő, de más típusú modulok is elérhetők lesznek.

így weblapjaink gépelési hibáktól mentessé tehetők, a metaadatok véletlenül sem maradnak le, a hivatkozások működése biztosított és így tovább. A fejlesztői dokumentuáció segítségével igény szerint új modulok is készíthetők.

Köszönetnyilvánítás

A következő személyeknek szeretnék köszönetet mondani lektorálási munkájáért: Ian Jacobs, Susan Lesch, Olivier Théreaux, Stephanie Troeth, Jeffrey Zeldman, valamint a nyilvános levelezőlista hozzászólói.

A cikk nem jöhetett volna létre Kim Nylander szakíró lektorálása és segítsége nélkül.