One of the strange-but-truisms of
minor peddling is that using the
computer and other Fetish fodder
somehow empowers children - plug
in, log on, attend a good
college on full scholarship, and
get the hell out of the house.
Utóbb a teljes kimenetet tt (typewriter, azaz írógép) címkék közé zárták. Így érték el, hogy a kor grafikus böngészõi – tehát mindenekelõtt a Netscape 1.1 – a szöveget állandó szélességû betûtípussal, például Courierrel, vagy Monacóval jelenítsék meg. Az eredmény képes volt kezdetleges módszerekkel befolyásolni az alkalmazott tipográfiát, és nyers erõ alkalmazásával megoldotta a behúzást is. 1995-ben az ilyen kontárkodáson kívül nem kínálkozott más módszer a weboldalak formázására. (A 2.1. ábra már 1996-ban készült, amikor a Suck.com egy fokkal több grafikus elemet tartalmazott az elsõ változatnál, de azért még távolról sem sokat. Az eredeti formázás elveszett az internetes múlt ködében.)
33
34
Szabványkövetõ webtervezés Az elrendezés megoldására sok hasonlóan kreatív módszert dolgoztak ki, és használtak elterjedten, sõt olyan szerzõk, mint Lynda Weinman és David Siegel (olyan úttörõkrõl van szó, akiknek minden webtervezõ örök hálával tartozik) közkinccsé is tették õket a webtervezésrõl szóló korai könyveikben. A HTML nyelv megalkotói a hajukat tépték, amikor a HTML ilyen durva megalázásával szembesültek, de a webtervezõk nem tehettek mást: az ügyfelek hangosan követelték a vonzóbb külsejû weboldalakat. Sok webtervezõ a mai napig is használ ilyen és ehhez hasonló módszereket, és sok könyv tanítja mindmáig ezeket az elavult – és ma már kifejezetten ellenjavallt, termelékenységrontónak számító – eljárásokat. Egy webtervezésrõl szóló, egyébként remek könyv minden pironkodás nélkül javasolja azt az olvasóinak, hogy használjanak font címkéket és „HTMLparancsfájlokat” a tipográfia kialakítására. A font címke már régen elavultnak számít – a W3C „elavult” alatt azt érti, hogy „Felejtsétek már el ezt a régi szutykot, kérlek!” – a HTML pedig nem parancsnyelv. Mégis egyre újabb és újabb, a webtervezésrõl szóló sikerlistás könyvekben találkozunk az elõzõhöz hasonló rossz vagy értelmetlen tanácsokkal. A butaság és a figyelmetlenség örökké újratermeli magát.
Mi volt az ára a webtervezésnek a szabványok megjelenése elõtt? A HTML kreatív használatával a Suck.com webhely valóban egyedi kinézetre tett szert, de az árát kétszer is megfizette: voltak, akiket kizárt az olvasók körébõl, és a készítõinek állandó nehézséget okozott az oldal frissítése. A korai, barkácsolt képernyõolvasókban (a látási problémákkal küzdõk számára készülõ böngészõbõvítményekrõl van szó) a
címkék szüntelen puffogtatása miatt a Suck.com oldalain olvasható szöveg felolvasását végzõ hang néhány szavanként rövid szünetet tartott, ami nem tett jó a Suck.com egyébként kitûnõ vezércikkei élvezhetõségének: One of the strange-but-truisms of ... [idegesítõ megakadás] minor peddling is that using the ... [idegesítõ megakadás] computer and other Fetish fodder ... [idegesítõ megakadás] somehow empowers children—plug ... [idegesítõ megakadás] in, log on, attend a good ... [idegesítõ megakadás] college on full scholarship, and ... [idegesítõ megakadás] get the hell out of the house.
A Suck.com kitekert, ideális körülmények között is nehezen értelmezhetõ mondatszerkezetei a szöveg értelmét nem tükrözõ
címkék miatt már-már a Zen megfoghatatlanságával kezdtek vetekedni. A képernyõolvasót használók számára leküzdhetetlen értelmezési nehézséget jelentettek ezek a felolvasási szünetek, és a webhely az õ számukra használhatatlanná vált. Azok a HTML-trükkök, amelyek a Suck.com grafikus böngészõkben látható elrendezésének kialakítói voltak, nemcsak az olvasók egy részének keserítették meg az életét, hanem a Suck.com webhely készítõinek is, mégpedig minden alkalommal, amikor az oldalt frissí-
2. fejezet • Szabványos webhelyek tervezése és építése teni kellett. Minthogy a tervezés alapját Perl-parancsfájlok és HTML-barkácsolások jelentették, sablont készíteni az oldalhoz reménytelen volt. Minden nap számos munkaórát vett igénybe, hogy az aznapi frissítések kikerüljenek az oldalra. Ahogy az oldal egyre népszerûbb lett – ez egyébként utóbb az oldal felvásárlásához vezetett –, a készítõi arra kényszerültek, hogy újabb szerzõk mellett a mûszaki részleget is újabb alkalmazottakkal erõsítsék. A Suck.com mindennapi megjelenésével nem volt összeegyeztethetõ az a sok emberi közremûködést igénylõ munka, ami a megjelenéshez szükséges volt. Egy tökéletesebb világban az ilyen nehézségek nem élhették volna túl a saját korukat, és mostanra csak a korai kereskedelmi webhelyek történetérõl szóló anekdoták között találkozhatnánk velük. A hõskor webfejlesztõi zsenialitásának csodálata mellett mosolyt fakasztana még a gondolat is, hogy a webfejlesztés ilyen nyakatekert lehet. A szabványok megjelenése ellenére azonban a legtöbb kereskedelmi webhely továbbra is nyomasztóan sok munkaigényes barkácsolást, hegesztést igényel, és tovább küzd az említett módszerek okozta problémákkal. A gyakorlat annyira elterjedt, hogy sok webtervezõnek és -fejlesztõnek eszébe sem jut, hogy ez másképp is lehet.
Modern webhely, õsi módszerekkel
2.3. ábra A Hooked címû film weboldala (www.hookmitchell.com), bár 2003-ban készült, a kódja 1998-at idézi. Ellenállhatatlan látvány, ellenérzéseket kiváltó kód
35
36
Szabványkövetõ webtervezés
2.4. ábra Az elõzõ webhely, de ezúttal láthatóvá tettük a táblázat határolóvonalait. Megfigyelhetõ a webhely készítõinek munkamódszere, és látszik az is, hogy mitõl kapnak majd fejfájást, ha hozzá kell nyúlni az oldalhoz
Hagyjuk ott 1995-öt, és lépjünk át 2003-ba. Ekkor készül el a Hooked: The Legend of Demetrius „Hook” Mitchell címû film. Bár elképzelhetõ, hogy a Hooked nem tartozik az Olvasó örökös kedvencei közé, ez az életrajzi ihletésû film több mint húsz filmfesztiválon szerepelt, és több díjat is nyert. A film népszerûsítése végett a Hooked készítõi létrehozták a film webhelyét is (www.hookmitchell.com, lásd a 2.3. ábrát). Szépen megtervezett oldal volt, sõt máig is annak számít, de az alapját egy olyan munkaigényes táblázatos elrendezés képezi, amelynek már nincs helye a modern Weben. A film egy olyan legendás amatõr kosárlabdázó életérõl szól, akinek az utcán töltött nehéz élete kosárlabda-játékosi pályáját is kerékbe törte. A webhely látványterve a régi amatõr felvételeket idézõ, a filmben is használt szemcsézettség-motívumra épül, és ez a döcögõs mintázat sajnos a weboldal technikai megvalósításában is megfigyelhetõ. A táblázatokkal terhelt és távtartóként használt GIF-képekre támaszkodó elrendezés több kórságban is szenved:
2. fejezet • Szabványos webhelyek tervezése és építése
2.5. ábra A Lynx-hez (lynx.isc.org) hasonló szöveges böngészõk számára a weboldal nem szolgál információval. A képek kötelezõ alt jellemzõjét nem adták meg, így az ember számára olvasható hivatkozáscímek helyett fájlnevek jelennek meg. Ha kíváncsiak vagyunk rá, hogy a weboldalaink miként jelennek meg egy szöveges böngészõben, akkor próbáljuk ki õket a Lynx-ben, valamilyen Lynx-emulátorban, vagy egy képernyõolvasóval – ez lehet például a JAWS vagy az OS X-re készült VoiceOver. Létezik egy ingyenes internetes Lynx-emulátor (www.delorie.com/web/lynxview.html), de csak olyan oldalakon tudjuk használni, amelyeket mi készítettünk
• Ha a film készítõi változtatni szeretnének az oldalon – akárcsak annyit, hogy egy új hivatkozást helyeznek el rajta –, akkor a honlap teljes HTML-kódját újra kellene írni. Ha csak egyetlen kép méretét is megváltoztatják, a képszeletekbõl felépített HTML-táblázat (lásd a 2.4. ábrát) darabjaira hullik szét. • Ennek folyománya, hogy az oldalt érintõ legkisebb változtatás is jelentõs költségekkel járna. Át kellene alakítani a grafikát, majd újra szét kellene vágni, optimalizálni, a táblázat kódját frissíteni, nem is beszélve arról a JavaScript-kódról, ami a menüt vezérli. Ha egy olyan alapmûvelet, mint egy hivatkozás elhelyezése, több órás munkával jár, akkor valami nincs rendben. • Az oldal sok lehetséges látogatót kizár. Mostani megvalósítása mellett a webhely a képernyõolvasót használók és a mobileszközzel böngészõk számára használhatatlan. Ha egy szöveges böngészõvel tévedünk az oldalra (lásd a 2.5. ábrát), akkor a teljes tartalma az alábbiakban összegezhetõ:
37
38
Szabványkövetõ webtervezés
spacer.gif spacer.gif spacer.gif spacer.gif [És ez így spacer.gif bottom.jpg
spacer.gif spacer.gif megy tovább...] spacer.gif
Szöveges tartalom hiányában a keresõmotorok sem tudnak semmi használhatót kimazsolázni a honlapról, holott a honlap célja az információk elhintése (lásd a 2.6. ábrát). A Hooked készítõinek tényleg csupán annyi a mondanivalójuk a filmrõl a látogatók számára, hogy „spacer.gif”? Nem túl valószínû.
2.6. ábra Az, hogy a Hooked weboldalán valódi tartalom helyett csak képfájlok értelmetlen neveit találják a keresõk, aligha javítja a webhely besorolását. Amikor a filmrõl információt keresve annyit látunk, hogy „spacer.gif, bottom.jpg”, nem érzünk ellenállhatatlan késztetetést az oldal meglátogatására – legalábbis a könyv írója szerint
A képek elhelyezése persze nem hiba, és a bonyolult oldalterv sem mindenképp az. Éppen ellenkezõleg, a képek elengedhetetlenek, a szép külsõ követelmény, és a Hooked weboldala valóban emlékezetes internetes élmény. Az élménynek azonban akadálymentesnek kellene lennie. Bár a látvány vonzó, a Hooked webhelye sok-sok olyan dolgot egyesít magában, ami a régimódi oldalelrendezések szégyenteljes hagyatéka. Az oldal kódjában rejtõzködõ rémségek között az akadálymentességi elvek semmibevétele éppúgy fellelhetõ, mint a hatékonynak nem, de költségesnek nyugodtan nevezhetõ munkamenet. Hál’ Istennek