Igényesség a Weben

Legutóbbi számunkban arról írtam, hogy a kiadványkészítésnél milyen alapvető dolgokra kell odafigyelni, most a honlapkészítéssel kapcsolatban teszem ugyanezt.

Manapság mindenkinek lehet honlapja. Nem kerül semmibe, akinek egyébként nincs sehol accountja, a rengeteg ingyenes lehetőséggel élve az is felkerülhet a Webre. Ez azzal is jár, hogy sok igénytelenül összerakott, ízléstelen oldallal találkozhatunk.

Cikkemben abból indulok ki, hogy ha valaki honlapot készít, azzal az internetes közösséget szeretné gazdagítani valami értékessel, legyen az információ vagy művészi alkotás.

A Web nyelve jelenleg a HTML (HyperText Markup Language), annak is a 4-es verziója. Mikor ezt a leíró nyelvet kitalálták, az információra helyezték a hangsúlyt, nem a kinézetre, ezért sok mindent a mai napig csak nehézkesen vagy egyáltalán nem lehet megcsinálni. Ezzel együtt azért sokat fejlődött a nyelv, és jól használható maradt. Egyszerű, így hamar megtanulhatja bárki, és ha van esztétikai érzéke is hozzá, gyorsan komoly sikerélményei lehetnek.

Fontos különbség a kiadványkészítéshez képest, hogy nem lehet előre tudni, hogy egy oldal pontosan hogyan fog megjelenni a látogató böngészőjében – ez az ottani rendszertől is függ.

Homepage-ek készítésénél a legtöbb gond a különböző browserekkel van. A legelterjedtebb böngésző manapság az Internet Explorer (amelyből sajnos elkészült az 5-ös is), de nem szabad elfeledkeznünk a Netscape-ről és a néhány frissebb próbálkozásról (pl. Opera) sem.

Nem csak a böngészők különbsége miatt nézhet ki eltérő rendszereken másképp az oldal. A szöveg csak olyan betűtípussal jelenhet meg, amilyen a látogató gépén telepítve van – ez egy nagyon fontos korlátozás, bármilyen triviálisnak is tűnik. Érdemes inkább a fejlécben beállítani a kódkiosztást (magyar szöveg esetében ez a ISO-8859-2, más néven Latin-2), ez helyesen beállított böngészővel ékezethelyes megjelenítést eredményez. Ehhez egyrészt a fejlécbe a

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2">

sort kell beírnunk, másrészt az ékezeteknél az ű és ő betűket (kicsit és nagyot is) karakterként írjuk a szövegbe, ne û és õ formában (a kódok: ő - 0245, Ő - 0213, ű - 0251, Ű - 0219), és a szövegnek ne határozzunk meg betűtípust, így a böngésző jó beállítás mellett a megfelelő fontot fogja használni. Egyébként sem érdemes két-három betűtípusnál többet használni, mert inkább stílustalan, igénymentes hatást érünk el.

Hasonló probléma a képernyő-felbontás kérdése: különböző felbontásoknál másképp fog kinézni oldalunk. Célszerű 800x600-ra tervezni az oldalt (ez ma már alapnak számít) úgy, hogy azért nagyobb felbontásoknál se legyen csúnya (pl. a szöveget tartalmazó frame növekedjen, és a képek úgy legyenek rendezve, hogy ilyenkor se csússzanak el).

Akad, aki az inkompatibilitáson és hibás működésen keresztülrágva magát olyan oldalakat készít, amelyek minden fontosabb böngészővel nagyjából ugyanúgy látszanak, és akad, aki egyszerűen kiírja az oldalra, hogy milyen böngészőre és milyen képernyőfelbontásra tervezte homepage-ét.

Ha minden böngészőn jól látszó oldalt szeretnénk, sajnos pont a Netscape Navigator miatt szívhatjuk sokat a fogunkat. A frame-eket véletlenszerűen, a színeket pedig sajátosan kvantálja, így nagyon meg lehet szenvedni, ha két frame határán találkozik két kép, és pontosan szeretnénk illeszteni őket. A színek kérdését azzal lehet áthidalni, hogy a hátteret nem színként adjuk meg, hanem készítünk egy pici, háttérszínű képet, és ezt tesszük be háttérként. Célszerű legalább 3x3-as méretet választani, mert az ennél kisebb képeket véletlenszerűen néha nem tölti be háttérként.

A képek esete bonyolultabb: a Netscape-nak egy másik sajnálatos tulajdonsága, hogy ha képet helyezünk el az oldalon, azt mindenképpen egy pixeles margóval rajzolja ki, így sajnos a pontos illesztés csak úgy érhető el, hogy háttérképnek tesszük be az adott képet.

Szintén különbözik a két browser hibaérzékenysége: a Netscape sokkal kevésbé rugalmasan jeleníti meg a hibás oldalakat, pl. hibásan lezárt táblázatot meg sem jelenít.

Gyakran láthatunk olyan oldalakat, amelyeknél össze-vissza változik a szövegen belül a betűméret és a betűtípus. Ezeket egész egyszerűen kiexportálták Word-ből – sajnos sok helyen mindenre ezt a szerencsétlen szövegszerkesztőt használják, bármennyire is rossz. A feleslegesen megnövekvő file-méret mellett a Wordből exportált dokumentum ronda, ezért használatát csak úgy javaslom, ha utána egy HTML szerkesztővel (vagy kézzel) kiszedjük a felesleges és rossz helyen lévő tageket.

Gondolnunk kell a lassú Internet-kapcsolattal rendelkezőkre is: a file-méretek mindig a lehető legkisebbek legyenek. A HTML kódot is érdemes optimalizálni, néha nagy méretcsökkenés érhető el – de ennél sokkal fontosabb, hogy a képek megfelelő formátumban, megfelelő tömörítéssel kerüljenek fel az oldalra.

A Weben három képformátum használatos:

– A gif (Graphics Interchange Format) a Compuserve bejegyzett formátuma. Van egy nagy hátránya: az LZW tömörítési algoritmus, amelyet használ, jogdíjköteles, és ezt a Unisys meglehetősen gusztustalanul ki is használta. Nem szeretnék ebbe részletesen belemenni, mert nagyon hosszú lenne, és én az ilyen szintű pénzhajhászást rendkívül utálom, akit érdekel a téma, a http://burnallgifs.org címen olvashat róla részletesen. Ha egyszerűen csak Web-oldalakat szerkesztünk, ez nem is érint minket közvetlenül. Technikai hátránya a formátumnak, hogy maximum 256 színt használhatunk egy képben. Előnye, hogy támogatja az átlátszó képeket és az animációt, valamint veszteségmentesen tömörít, tehát a fileméret-csökkenés nem jár semmilyen minőségvesztéssel.

– A jpeg formátum jellegzetessége a veszteséges tömörítés. Ez ebben az esetben nem negatívum, hiszen – kihasználva az emberi szem korlátozott képességeit – nagy mértékben csökkenti a file méretét a veszteségmentes tömörítéshez képest. Sajnos nem támogatja az átlátszóságot.

– A png (Portable Network Graphics) – mint a nevéből is kiderül – egyenesen a hálózatra készült. A gif helyett találták ki, ennek a hiányosságait pótolja: veszteségmentesen, hatékonyan tömörít akár true-color (24 bites színmélységű, azaz több mint 16 millió színt támogató) képeket, és emellett támogatja az átlátszóságot.

A jpeg formátum az esetek túlnyomó részében megfelelő eredményt ad. Jól használható jpeg-ek készítéséhez az Adobe cég ImageReady nevű programja, amelynek 2.0-ás változata a PhotoShop 5.5-ben is megtalálható (az 1.0-ás még külön program volt). A program nagy erőssége, hogy a tömörítés erősségének finomhangolásával gyorsan találhatunk kompromisszumot a méret és a minőség között.

Háttérképnek kis méretű, textúra-jellegű ("önmagában" folytatódó), nem túl kontrasztos képet használjunk. Kerüljük az össze nem illő színeket (pl. lila háttéren zöld betűk) – ez is triviálisnak hat, de sok ilyet látni!

A oldalon lévő túl sok mozgástól olyan érzése támad a látogatónak, hogy a jellegtelen tartalmat ezzel akarja az oldal készítője feldobni, ezért csínján bánjunk az animált gifekkel, villogó szövegekkel és a mindent mindenhol változtató JavaScriptekkel.

Egy rosszabbul sikerült saját készítésű kép is sokkal többet ér egy valahonnan lelopott remekműnél – ez utóbbi egyébként nem is etikus.

Ha szöveget tartalmazó képet készítünk, figyeljünk oda, hogy magyar ékezeteket használjunk! Nagyon el tud rontani egy egyébként szép site-ot a sok hullámos ő – sajnos ilyet nagyon gyakran látni.

Szerkesztő programok

Ha nem sima text editorban írjuk a HTML kódot, kétféle programot hívhatunk segítségül. Az egyik a WYSIWYG típusú programok halmaza, amelyekkel az oldalt vizuálisan, kattingatva szerkeszthetjük, aztán a program generál belőle valamilyen kódot. Ezek a programok gyakran sok felesleges taget és formázást beletesznek a file-ba, ezért érdemes utána kézzel optimalizálni.

A szerkesztő programok másik fajtája csak segít minket a kód írásában syntax highlighting-gal (értelmezi a beírt szöveget, és jelentés szerint más színnel jeleníti meg pl. a HTML tageket), előre definiált tagekkel, esetleg előre megírt JavaScript mintákkal. Általában hasznos mindkét fajtából választani egy nekünk megfelelő programot, és kombinálva használni őket.

Előbbiekből a Macromedia Dreamweaver-t és az Adobe PageMill-t ajánlom, utóbbiakból az AceExpert és a HotDog programokat, de létezik még sok ügyes program ezeken kívül – főleg a második kategóriából.

HTML szerkesztésénél gyakori feladat több file-ban ugyanazt a cserét elvégezni (pl. egy együttes web-oldalán minden albumnál át kell alakítani a fejlécet). Ilyenkor vehetjük nagy hasznát az EditPad nevű kis Delphi-programnak (http://www.jgsoft.com). Az EditPad cardware: ha tetszik a program és használod, küldj egy szép levelezőlapot az írójának (én még nem küldtem, de fogok).

A HTML-ben nem használható tabulátor a hagyományos módon, az ilyen jellegű formázásokat táblázatokkal lehet megoldani. Ha a táblázatnak keretet is adunk, az üres celláknál nem látszik a keret, ezt a problémát a cellába egy non-breakable space-t ( ) téve tudjuk megoldani. Netscape barátunk a táblázatoknál is ad még egy kis plusz munkát: üres celláknál figyelmen kívül hagyja a magasság és szélesség beállításait, és erre sajnos nem minden esetben jó a non-breakable space-es megoldás, mert nem tudunk tetszőlegesen kicsi betűt írni, még ha az egy szóköz is.

A Web rövidtávú jövőjének az XHTML-t tartják, amelynek 1.0-ás változata már hivatalos World Wide Web Consortium (W3C) ajánlás. A specifikáció elkészítésénél szerencsére szem előtt tartották, hogy a Weben lévő, már elkészített dokumentumok se váljanak hirtelen elavulttá, ezért a HTML 4-ből indultak ki, és az XHTML egy összekötő lépcsőfok lesz a már elterjedt HTML és a távolabbi jövő XML-je között. Az XML – melynek már két éve elkészült a W3C ajánlása – megpróbál átlépni a HTML korlátain. Bevezetése azért ilyen nehézkes, mert köztes lépcsőre van szükség, hiszen a HTML már túlságosan elterjedt.

Egy biztos: a Web hatalmas mértékben hozzájárult az Internet elterjedéséhez, és még mindig hihetetlen lehetőségek rejlenek benne – de vigyáznunk kell rá, hogy ne váljon a cégek (és a Nagytestvér) öncélúan felhasznált médiumává.

Tom