2. A rendszertervben használt terminológia ismertetése

Beállít, vezérel
Jelen dokumentum értelmezési környezetében a "vezérel" és "beállít" igék közös jelentésmozzanata az irányítás, melyet a felhasználó gyakorolhat a felület megjelenése, a weboldal működése, a stílusok visszaadása és egyéb, előírt tényezők felett. A két fogalom közötti fő különbség a tartósság tényezője. Ha a felhasználó "vezérlés" útján változtat a működési feltételeken, az eszközölt változások általában csak a weboldal adott, egyszeri használata során érvényesek. A "beállítás" eredményei azonban általában hosszabb távon, többszöri futtatásra is érvényesek. Továbbá a "vezérel" kifejezés általában arra is utal, hogy a változtatás egyszerűen végrehajtható (például gyorsbillentyű útján, lásd később ) és eredménye többnyire azonnal jelentkezik. A "beállítás" ezzel szemben viszonylag jelentősebb időráfordítással is munkával jár (például többszörösen lenyíló menükkel elérhető dialógusablakok útján).

Mind a beállításokhoz, mind a vezérléshez szükség van arra, hogy a felhasználó be tudja "írni" és el tudja "olvasni" a megváltoztatandó paraméterek értékeit. A beállítások értékeit többnyire profilok tárolják.

A beállítás és a vezérlés különböző "szinteken" léphet életbe: a web-forrás egész sorára nézve, vagy egyes komponenseire (pl. elemenként).A VMEK oldalán a globális (egyidejű) beállítási lehetőség a web-forrás minden elemére érvényes.

Vezérlőelemek aktiválása
Ahhoz, hogy egy vezérlőelemet használni tudjunk, azt aktiválni kell. Ez egy természetes folyamat, egy linket vagy egy gombot kattintással aktiválunk, ugyanígy egy szövegbeviteli mezőt is. Emellett a kattintás mellett más aktiválási lehetőségeink is vannak, ezek:

Vezérlőelemek sorban történő elérése:
A módszer lényege az, hogy létezik egy billentyű (általában a TAB gomb), amelynek ismételt megnyomásával változtathatjuk a fókuszt egyik elemről a másikra.

Vezérlőelemek közvetlen elérése
Ezen módszer segítségével egy közvetlen billentyűkombináció lenyomásával azonnal áthelyezhetjük a fókuszt egy tetszőleges elemre. Az egyes elemekhez tartozó ilyen billentyűt az ACCESSKEY paraméternél megadott karakterrel tárolhatjuk el.

FÓKUSZ

Tartalmi fókusz:
A tartalmat többféle navigációs mechanizmus segítségével lehessen kezelni, azaz mindig legyen mód a direkt, lépésenkénti és strukturált navigációra, valamint keresésre. Lehetővé kell tenni, hogy a felhasználó szabadon mozoghasson az igényei szerint konfigurálható kimeneten belül a fontosabb tartalmi pontok között, azonosíthassa, hogy milyen objektum- típussal találkozik az egyes pontokon, könnyedén közbeavatkozhasson (ha épp működtethető elemmel van dolga), és láthassa annak közvetlen környezetét (hogy mindig tisztában lehessen azzal, hogy hol tart).

Kezelői fókusz:
A kezelői fókusz hasonlít a tartalmi fókuszra, azzal a különbséggel, hogy míg a tartalmi fókusz a tartalom elemeire irányul, addig a kezelői fókusz a weboldal kezelőfelületének egy vagy zéró, bizonyos eljárással társított vezérlőelemét emelheti ki (pl. radio-gombot, szövegbeviteli mezőt vagy menüt), a felhasználó módosítsa a kezelőfelület vezérlőelemeinek állapotát vagy értékét (pl. jelölőnégyzet vagy szerkeszthető szövegdoboz útján).

Aktuális fókuszHa több kimeneti ablak működik párhuzamosan, adott pillanatban legfeljebb az egyik tartalmi vagy kezelői fókusza reagálhat beviteli eseményekre, ezt hívjuk aktuális fókusznak. A fókusz állapot programszinten vagy kezelőfelület útján "osztható ki" különböző működtethető elemekre. Bizonyos szabványok (pl. HTML, CSS) lehetővé teszik, hogy a fókuszban álló vagy fókuszon kívüli eseményekhez különböző eljárásokat társítsunk.
Ha egy működtethető elemet fókuszba állítottunk, a továbbiakban egyéb, az adott elemhez társított eljárásokat indíthatunk be (pl. a felhasználó hivatkozást nyithat meg, vagy megváltoztathatja egy űrlap adott vezérlőelemének állapotát). Ezeket az eljárásokat beindíthatja programművelet vagy a felhasználói felületen végzett beavatkozás (pl. billentyű-művelet).

A gyorsbillentyű
azt jelenti, hogy egyetlen billentyű lenyomásával (módosító nélkül) el lehet indítani adott feladatot, vagy közvetlenül el lehet jutni az adott tartalmi részhez. A "gyorsbillentyű-mód" alkalmazásával minden, a rendelkezésben előírt funkció elérhető egyetlen billentyű lenyomásával. A "billentyű" a klaviatúra egyetlen gombját jelenti (nem pedig a karakterkészlet egy elemét).
A közvetlen navigáció (pl. ugrás adott hivatkozásra) gyorsabb, mint a lépésenkénti, de általában feltételezi a tartalom valamelyes ismeretét. A közvetlen navigáció nagyon fontos egyes mozgáskorlátozottaknak (akiknek például nehézséget jelenthetnek a finom kézmozdulatok), valamint a vakok és csökkentlátók számára. Nagyban megkönnyítheti ugyanakkor a gyakorlott felhasználók munkáját is. A közvetlen navigáció egér vagy billentyűzet útján lehetséges (utóbbi esetben gyorsbillentyű segítségével).

A strukturált navigáció előnye, hogy gyors és könnyen elérhetővé teszi a közvetlen tartalmi környezetet. Ajánlatos, hogy lehetővé tegyük a strukturális szempontból fontos részek - részegységek, űrlapok és működtethető elemek - közvetlen elérését.

A fogyatékkal élő felhasználók (sőt, minden felhasználó) munkáját megkönnyíti, ha többféle keresési és navigációs mechanizmus áll rendelkezésre. A navigáció és a keresés nagyon fontos a soros hozzáféréssel rendelkező felhasználók számára, illetve lépésenkénti navigáció esetén (mikor a fókusz mozgatásával navigálunk).
Soros hozzáférésnek tekintendő minden olyan webtartalmat megjelenítő felhasználói ágens által biztosított felület, mely a webtartalmat nem szimultán módon, kétdimenziós felületként, tehát vizuálisan, hanem azt átalakítva, szekvenciálisan jeleníti meg a felhasználó számára.

A szekvenciális megjelenítés történhet térben, például egysoros kijelzőn, mint amilyen a frissíthető Braille megjelenítők, valamint időben, ennek tipikus esetei a látássérültek számára beszédtámogatással kiegészített web-böngésző rendszerek.

3. A fejlesztés során alkalmazható irányelvek és technikák

A weben böngésző felhasználók nem egyforma képességekkel rendelkeznek, ezért szükség lehet arra, hogy saját igényeikhez igazíthassák a weboldal működését a stílusok, a kezelőfelület és gyorsbillentyűk tekintetében. Az irányelv legtöbb pontja a beviteli konfigurációkra vonatkozik: hogyan vezérelhető a weboldal működése billentyűzettel, vagy egérrel. Egy beviteli konfiguráció azt jelenti, hogy a kezelőfelület adott beviteli mechanizmusai a weboldal mely adott funkcióival vannak "összekötve".

A WAI ajánlás előírja, hogy minden kimenet legfeljebb egy tartalmi és egy kezelői fókusszal rendelkezzen. Az ajánlás tartalmaz: csak a tartalmi fókuszra, csak a kezelői fókuszra és egyidejűleg mindkettőre vonatkozó előírásokat is. Ez utóbbi esetben a "fókusz" kifejezést használja.
Emiatt a továbbfejlesztés során arra törekedtük, hogy a tartalmat többféle navigációs mechanizmus segítségével lehessen kezelni, azaz mindig legyen mód a direkt, lépésenkénti és strukturált navigációra, valamint keresésre.
Lehetővé kellett tenni, hogy a felhasználó gyorsan, könnyedén mozoghasson a gyorsbillentyűk használatával a fontosabb tartalmi pontok között, láthassa annak közvetlen környezetét (hogy mindig tisztában lehessen azzal, hogy hol tart).

Ezeket az itt együttesen megfogalmazott célkitűzéseket bontottuk le a fejlesztés jelen fázisában az I., a II. és a II. számú célkitűzésekre, melyek megvalósítása mind a figyelembe vett irányelveket, mind az alkalmazott módszereket tekintve igen nagy mértékben különböznek egymástól.
A fejlesztés jelen fázisára kitűzött célok megvalósítása közben mindvégig meg kellett őrizni a VMEK 2.0 előző fázisában megvalósított eddigi akadálymentességgel kapcsolatos eredményeket, az akadálymentesség kiterjesztésének további szintjeinek nem szabad lerontaniuk vagy csökkenteniük a megelőző fejlesztések által elért eredményeket.

A stíluslapok alkalmazása magában rejti a lehetőséget a honlap testreszabhatóságának hatékony megvalósítására. E célból a honlap interaktivitásának fokát tovább kellett növelni. Ennek fő eszközeként olyan beállítópanel beillesztésére került sor a VMEK 2.0 fejlesztésének előző fázisában, mely lehetőséget biztosít a felhasználók számára a honlap megjelenésének saját igények szerinti átformálására.

A beállítópanel lehetőséget ad a gyengénlátó felhasználó számára a honlapon használt előtér- és háttérszínek, a betűk méretének és a megjelenített betűkészletek kiválasztására egy előre definiált halmazból. A halmaz elemeit a nemzetközi gyakorlat által is igazolt, bevált szín és betűnagyság és méret kombinációinak a hazai viszonyokra történő illesztése szolgáltatta. Ugyanis gondolnunk kellett arra, hogy a várható hazai felhasználók milyen technikai lehetőségekkel rendelkeznek, mind sávszélesség, mind a megjelenítést biztosító eszközök (monitorok, LCD kijelzők) tekintetében.

A látogatók által kiválasztott megjelenítési opcióknak a honlap egészére történő leképezését a HTML 4.1 által biztosított stíluslapok biztosítják. A felhasználói választás eredményeképp a honlap további megjelenésének milyenségéről a kiválasztott megjelenítési sémához tartozó stíluslap gondoskodik. A stíluslapok a honlapokat szolgáltató kiszolgálógépen kerültek elhelyezésre. Ez szintén összhangban van a HTML 4.1 és a WAI ajánlásaival, mely akadálymentesített honlapok esetében is, de általában is kifejezetten ajánlja a szerveroldali szkriptek és stílusleírók használatát a kliensoldali megvalósításokkal szemben.
A kiválasztott beállítási sémák jellemző adatait a felhasználók gépeire elhelyezett cookie rekorba is letárolja a kezelőrendszer, melynek érvényessége 1 hónapi időtartamra szól.
Ennek köszönhetően az érvényességi időszakon belül a honlap ismételt meglátogatása alkalmával a kezelőrendszer képes ezeknek a jellemzőknek - több más beállítással együtt -, a visszaszerzésére és így mód nyílt a felhasználó által elvégzett utolsó megjelenítési beállítások rekonstruálására is.

A fejlesztés jelen fázisa célul tűzte ki, hogy ezt a VMEK 2.0 teljes felületén már működő testreszabható megjelenítést kiterjessze a MEK gyűjteményét képező dokumentumok minél szélesebb körére is.
Ezzel megvalósul a fejlesztés jelen fázisára kitűzött IV. számú célkitűzés.
A célkitűzés megvalósításához a Cascading Stylesheet (CSS) formaleíró nyelv által biztosított lehetőségek teljes egészében elégségesnek bizonyultak, a feladat megoldásához egyéb, HTMl és CSS nyelven kívüli eszközök igénybevétele nem vált szükségessé. Az akadálymentes megjelenítés kiterjesztését a CSS nyelv által definiált helyzeti szelektorok (contextual selectors) és a HTML által biztosított elemosztályozási lehetőségek (class attribute) együttes alkalmazása biztosította, kombinálva a CSS nyelvben meghatározott direkt (! important attribútum) és sorrendiségi precedenciák felhasználásával.
A IV. számú cél megvalósításának korlátot szab a MEK gyűjteményében található dokumentumok szerkezeti és formai diverzitása.
A dokumentumok szerkezetét sok esetben a tartalmuk jellege eleve meghatározza, ilyen dokumentumoknak tekinthetőek például a tudományos értekezések, szakdolgozatok. Ezek a dokumentumok sok esetben az általános dokumentumszerkezettől eltérő egységeket (táblázatok, diagramok, illusztrációk) tartalmaznak, melyek nem, vagy csak részlegesen illeszthetőek a VMEK 2.0 által szolgáltatott akadálymentes megjelenítési sémákra.
A hagyományosnak tekinthető dokumentumok egy része szintén csak részlegesen illeszthető a VMEK 2.0 akadálymentes megjelenítési sémáira.

Ennek okai az alábbiakban sorolható fel:

a.) A dokumentum olyan formátumban készült, mely akadálymentesen nem jeleníthető meg, a konvertálás akadálymentes felületen megjeleníthető formátumra a dokumentum prezentációs értékének jelentős lerontása nélkül nem megoldható.
Ezek a dokumentumok főképp grafikus formátumok, melyeket az online könyvkiadók használnak, például a .pdf vagy .lit formátumú dokumentumok. Prezentációhelyes megjelenítésükhöz többnyire az adott formátumot értelmezni képes célmegjelenítő programeszköz szükséges.

b.) A dokumentumok ugyan akadálymentes felületen megjeleníthető dokumentumleíró nyelv felhasználásával (többnyire HTML) készültek, de a dokumentum készítője miközben intenzíven alkalmazott megjelenítést leíró elemeket a dokumentumban, eközben mellőzte a dokumentum strukturális tagolását biztosító elemek használatát.

c.) a dokumentumok egy része akadálymentes felületen megjeleníthető dokumentum leíró nyelven készült, tagoltsága megfelelő, formai leíró elemek nem, vagy csak kis mértékben szerepelnek a dokumentumban, de a dokumentum helyes megjelenítését biztosító, a dokumentumba fixen beépített vagy hivatkozott saját stílusleírókat alkalmazott, melyeket a VMEK 2.0 akadálymentes felülete által biztosított stílusleírók vagy csak részlegesen képesek felülbírálni, vagy ha a felülbírálás megtörténik, a dokumentum eredeti megjelenési tulajdonságainak egy része elvész.

A fejlesztés jelen fázisának előkészítő szakaszában a fejlesztők alapkövetelménynek tekintették annak a szabálynak a betartását, hogy a már meglévő dokumentumokon sem tartalmi, sem formai változtatásokat nem eszközölnek, mivel az ehhez szükséges anyagi és emberi erőforrások nem állnak sem most rendelkezésre, sem a jövőre nézve nem fognak rendelkezésre állni.

Ennek következményeként a VMEK 2.0 akadálymentes felületét biztosító mechanizmusoknak oly módon kell biztosítaniuk a lehetőségek szerinti minél akadálymentesebb megjelenést a MEK gyűjteményét képező dokumentumok esetében, hogy azok integritása eközben sértetlen maradjon.

Az I. számú célkitűzés megvalósítására többféle megoldás képzelhető el.

A html 4.0 szabvány definiál a legtöbb interaktív html elem számára egy accesskey nevű tulajdonságot (property), mely azt a célt szolgálja, hogy a tulajdonság értékeként megadott karaktert, mint közvetlen elérést biztosító elemet rendelje hozzá az adott elemhez.

A módszer alkalmazásától a VMEK 2.0 fejlesztőinek el kellett állniuk, mivel az akadálymentességet a testi fogyatékossággal élő felhasználók széles körére ki kívánták terjeszteni, s ebbe a körbe beletartozónak tekintették azokat a súlyos mozgásszervi fogyatékossággal élőket is, akik számára nem megoldható vagy nehézkes a számítógép billentyűzetén gombkombinációk együttes leütése.

Az accesskey attribútum nyújtotta lehetőség a VMEK 2.0 fejlesztése során két fontos ok miatt nem jöhetett szóba.

a.) Az accesskey paraméterben meghatározott betűbillentyűt nem önmagában kell használni, hanem valamilyen módosító gomb (Microsoft Windows alapú rendszerekben ez az billentyű), mely a fent leírtak miatt már önmagában is kizárja e megoldás célszerűségét.

b.) azon gombkombinációk nagy része, melyek az accesskey paraméterben megadható karakterek gombjainak és az adott operációs rendszerben használatos módosító gomb együttes leütésével kiadhatóak, a súlyosan látássérültek által használt ernyőolvasó programok (screen reading software) számára már lefoglalt gyorsgomboknak tekinthetőek, sőt a különböző, általánosan használt web-böngésző kliensprogramok is gyakran lefoglalnak közülük néhányat vagy egy részük kiadását nem támogatják.

A VMEK 2.0 fejlesztésének jelen fázisában tehát más megoldás után kellett nézni.
Valamennyi, a VMEK eddigi fejlesztése közben és a fejlesztés jelen fázisában meghatározott akadálymentességi szempontot szem előtt tartva a grafikus operációs rendszerek alatt működő grafikus böngészők által támogatott javascript szkriptnyelv által biztosított eseménykezelési lehetőségek felhasználása bizonyult csak hatékonyan megvalósítható és az elvárásoknak megfelelően működő megoldásnak.

Ez ugyan látszólag ellentmond annak az általánosan megfogalmazható irányelvnek, hogy az akadálymentes honlapokon lehetőség szerint kerülendőek a kliensoldali megoldások, mint amilyen a javascript is, de az ide vonatkozó ajánlások figyelmes áttanulmányozása során nyilvánvalóvá válik, hogy a kliensoldali megoldásokat csak azokban az esetekben kell kerülni, ha azok alkalmazása ellehetetleníti a vizuális elemek akadálymentes megjelenítését (például az asszisztív technológiák számára), vagy megakadályozza az interaktív elemek (hiperlinkek, szerkesztődobozok, form beviteli gombok) rendeltetésszerű kezelését a fogyatékkal élők számára.

A VMEK 2.0 fejlesztői azonban pontosan ezzel ellentétes módon kívánták felhasználni e kliensoldali megoldásban rejlő lehetőségeket, amennyiben a javascript által kezelt billentyűesemények éppen a hatékony, direkt navigáció megvalósítását teszik lehetővé olyan eseménykezelő rutinoknak a honlapba történő integrálásával, melyek lehetővé teszik a módosító gombok használata nélkül kiadható gyorsbillentyűk hozzárendelését a honlap kitüntetett szereppel bíró részeihez, egyes, a honlap által nyújtott szolgáltatásokhoz.

A VMEK 2.0 fejlesztésének jelen fázisában kitűzött II. és III. számú célkitűzések megvalósítására szintén több lehetőség mutatkozott.

A html 4.1 szabvány a legtöbb interaktivitást biztosító html elemhez definiál úgy nevezett intrinsic eseményeket. Ezek az események az adott elem viselkedését, megjelenítésének mikéntjét és a web-böngésző, tehát indirekt módon az elem és a felhasználó kapcsolatát szabályozzák.

Legtöbbjük azt szabályozza, hogy mi történjen az adott elemmel, ha a böngészés folyamata során a felhasználó a billentyűzet vagy az egér segítségével olyan eseményt generál, melynek lekezelése az adott html elem feladata, pontosabban meghatározva a web- böngészőnek az adott elemre nézve történő viselkedését írja le. Ilyen események például az onkeypress, onclick, onmouse, onbluron, onbluroff, onfocus és még sok más attribútum által meghatározott intrinsic esemény.
Az intrinsic események kezelési módját megadó property értéke azonban sajnos mindig egy script.

Mivel az I. számú cél megvalósítására már a fejlesztés jelen fázisában kénytelenek voltunk kliensoldali scriptnyelv által biztosított megoldást alkalmazni, a kliensoldalra áthárított eseménykezelési terheket nem kívántuk tovább növelni. Egyrészt félő volt, hogy az I. számú cél megoldása során alkalmazott billentyűeseményeket kezelő scriptek összeütközésbe kerülnek a II. és III. számú célkitűzés megvalósítására használandó újabb scriptekkel, mivel azok maguk is részben billentyűesemény-kezelők lennének, másrészt a sokféle kliensoldali eseménykezelő az asszisztív technológiák egy részénél súlyos működési zavarokat idézhetnek elő. Különösen a beszédtámogatást biztosító technológiák nagyon érzékenyek a más, velük szimultán és párhuzamosan futtatott, ciklikusan futó eseménykezelőkre.

A megoldásra kínálkozó lehetőségek gondos tanulmányozása után a VMEK 2.0 fejlesztői egy sokkal természetesebben adódó, ráadásul könnyebben kivitelezhető megoldás mellett döntöttek.

A Cascading Stylesheet nyelv definiál úgy nevezett álosztályokat (pseudoclass) és álelemeket (pseudoelement), melyeket a html elemekhez társított szelektorokba beépítve nagyfokú befolyás gyakorolható az adott html elem pillanatnyi megjelenítésének módjára a felhasználói navigációs eseményekkel kapcsolatban. Ilyen esemény például az, amikor a felhasználó az egérmutatót az elemre helyezi vagy a gombbal a fókuszt átviszi egy interaktív vizuális elemre.

Ez a CSS nyelvben meglévő lehetőség úgy biztosít az egérrel illetve a billentyűzet bizonyos gombjaival kapcsolatban megjelenítési alternatívákat, hogy közben nem kell sem a honlap szerveroldali kezelőrendszerét, sem a kliensoldali böngészőt újabb eseménykezelő, programjellegű kiegészítésekkel terhelni.

Bár ez a megoldási lehetőség böngészőfüggő megoldást nyújt, mégis elmondható, hogy a fogyatékossággal élő felhasználók által általánosan használt operációs rendszerekre és a rajtuk futtatott webkliensekre nézve kielégítően teljeskörűnek és nagyon jó hatékonyságúnak tekinthető.

Az alkalmazott megoldás érvényességi körének nem generális volta abból a megváltoztathatatlan tényből következik, hogy a webkliensek nem mindegyike értelmezi és dolgozza fel a CSS formaleíró nyelvet a CSS szabványban kifejezetten előírt vagy javasolt módon.

4. A fejlesztés során megvalósított szolgáltatások

4.1. A VMEK 2.0 új megjelenítési tulajdonságainak megvalósítása

Mint az az előző fejezetből kitűnik, a II., III. és IV. számú célkitűzés megvalósításához használható eszközök köre azonos, ezért e három kitűzött cél megvalósítását együttesen tárgyaljuk. Ennek oka az, hogy a megoldás centralizáltan történt, a VMEK 2.0 felület eddigi, akadálymentes felületmegjelenítését biztosító vmek.css stílusleíró állomány továbbfejlesztése útján. Bár az állomány dinamikusan generálódik a felhasználói megjelenítési választásoknak megfelelően, létezik egy prototípus belőle vmek.css néven, mely ugyan VMEK.html állományként generálódik egy vmek.php nevű script által, de valójában csak a stílusleíró szabályokat tartalmazza, valódi html kódot nem.
A VMEK 2.0 kezelését megvalósító php szkriptek ezt a vmek.css állományt csatolják "röptében" a kiküldendő oldalakhoz link hivatkozásként.
Ez a mintafájl az, amely alapjául szolgál a származtatott és a kiszolgáló gép által a felhasználó számára kiküldött html oldalak megjelenítését szabályozó példányoknak.
Jelen rendszerterv számára ezért a legkézenfekvőbb megoldásnak az mutatkozik, ha ez a prototípus példány kerül részletes ismertetésre, oly módon, hogy sorról-sorra leírjuk , hogy a stílusállomány egyes parancsai a VMEK 2.0 és vagy a MEK dokumentumok mely megjelenítési tulajdonságait szabályozzák és ezzel az 1. részben feltüntetett négy általános, a fejlesztés jelen fázisára kitűzött célok közül melyek megvalósításában játszik szerepet.
A könnyebb hivatkozhatóság miatt a stíluslap egyes logikai sorait megszámoztuk, majd a forráskód után már csak a sorszámok alapján ismertetjük az egyes sorokban megadott szabályok által vezérelt megjelenítési tulajdonságot, és a szabály érvényességi körét az esetleges kiegészítő funkciókkal együtt. (Természetesen maga a css kód nem tartalmaz sorszámokat.)

1. BODY { FONT-SIZE: medium! important; BACKGROUND-IMAGE: url(valami.gif) ! important; MARGIN: 2% 6% 1%; COLOR: #000000! important; FONT-FAMILY: Times! important; BACKGROUND-COLOR: #fffffc! important }

2. A:link { FONT-SIZE: medium; COLOR: #336699 }

3. A:visited { FONT-SIZE: medium; COLOR: #336699 }

4. A:active { FONT-SIZE: medium; BACKGROUND: #336699; COLOR: #ffffff }

5. A:hover { FONT-SIZE: 100%; BACKGROUND: #336699; COLOR: #ffffff; FONT-FAMILY: Times; TEXT-DECORATION: none }

6. A.menu:link { FONT-WEIGHT: bold; FONT-SIZE: 11pt; VERTICAL-ALIGN: middle; COLOR: #ffffff; FONT-FAMILY: Arial; TEXT-DECORATION: none }

7. A.menu:visited { FONT-WEIGHT: bold; FONT-SIZE: 11pt; VERTICAL-ALIGN: middle; COLOR:#ffffff; FONT-FAMILY: Arial; TEXT-DECORATION: none }

8. A.menu:active { FONT-WEIGHT: bold; FONT-SIZE: medium; BACKGROUND: #336699; VERTICAL-ALIGN: middle; COLOR: #ffffff; FONT-FAMILY: Arial; TEXT-DECORATION: none }

9. A.menu:hover { FONT-WEIGHT: bold; FONT-SIZE: medium; BACKGROUND: #336699; VERTICAL-ALIGN: middle; COLOR: #ffffff; FONT-FAMILY: Arial; TEXT-DECORATION:none }

10. TABLE { FONT-SIZE: 100%! important; FONT-FAMILY: Times !important; BACKGROUND-COLOR: #fffffc! important; TEXT-Valign: middle }

11. PRE { FONT-SIZE: 100%! important; FONT-FAMILY: Times! important }

12. TT { FONT-SIZE: 100%! important; FONT-FAMILY: Times! important }

13. IMG { BORDER-TOP-STYLE: none! important; BORDER-RIGHT-STYLE: none ! important; BORDER-LEFT-STYLE: none! important; BORDER-BOTTOM-STYLE: none ! important }

14. TABLE.tablazat { FONT-SIZE: 100%; FONT-FAMILY: Times }

15. .border { BORDER-RIGHT: #ffffff thin outset; BORDER-TOP: #000000 1px outset; PADDING-LEFT: 5px; FONT-SIZE: medium; BORDER-LEFT: #000000 1px outset; COLOR:#000000; BORDER-BOTTOM: #ffffff thin outset; FONT-FAMILY: Times; BACKGROUND-COLOR: #e8e8e8 }

16. HR { FONT-SIZE: 1px! important; COLOR: #6586a7 }

17. H1 { FONT-WEIGHT: bold! important; FONT-SIZE: 160%! important; LINE-HEIGHT:normal! important; FONT-STYLE: normal! important; TEXT-ALIGN:center; FONT-VARIANT: normal ! important }

18. H2 { FONT-WEIGHT: bold! important; FONT-SIZE: 130%! important; LINE-HEIGHT:normal ! important; FONT-STYLE: normal! important; TEXT-ALIGN:center; FONT-VARIANT: normal ! important }

19. H3 { FONT-WEIGHT: bold! important; FONT-SIZE: 110%! important; LINE-HEIGHT:normal ! important; FONT-STYLE: normal! important; TEXT-ALIGN:center; FONT-VARIANT: normal ! important }

20. H4 { FONT-WEIGHT: bold! important; FONT-SIZE: 100%! important; LINE-HEIGHT:normal! important; FONT-STYLE: normal! important; TEXT- ALIGN:center; FONT-VARIANT: normal ! important }

21. INPUT { FONT: 100% Times; VERTICAL-ALIGN: bottom; BACKGROUND-COLOR: #e8e8e8 }

22. radio { FONT: 100% Times; VERTICAL-ALIGN: bottom }

23. SELECT { FONT: 100% Times; VERTICAL-ALIGN: bottom; BACKGROUND-COLOR: #e8e8e8 }

24. OPTION { FONT: 100% Times; VERTICAL-ALIGN: bottom; BACKGROUND-COLOR: #e8e8e8 }

25. TEXTAREA { FONT-WEIGHT: bold; FONT-SIZE: 100%; FONT-FAMILY: Times; BACKGROUND-COLOR: #e8e8e8 }

26. FONT { FONT-SIZE: medium }

27. TABLE.kiscim { PADDING-RIGHT: 2pt; PADDING-LEFT: 2pt; FONT-SIZE: 120%; PADDING-BOTTOM:2pt; WIDTH: 55%; PADDING-TOP: 2pt; FONT- FAMILY: Arial; BACKGROUND-COLOR: #6586a7; TEXT-ALIGN: center; FONT- COLOR: #ffffff }

A stíluslapban szereplő szabályokat a megjelenés sorrendjében ismertetjük, mivel a CSS nyelvben a szabályok egymásutánisága is fontos szerepet hordoz, amennyiben a később deklarált szabály magasabb precedenciaszintet képvisel, mint az ugyanazon elemosztály megjelenítését megcélzó felette levő szabályok.

1. BODY { FONT-SIZE: medium ! important; BACKGROUND-IMAGE: url(valami.gif) ! important; MARGIN: 2% 6% 1%; COLOR: #000000 ! important; FONT-FAMILY: Times ! important; BACKGROUND-COLOR: #fffffc ! important }

A dokumentum megjelenítéséhez használandó betűméretet és a háttér milyenségét határozza meg. A ! important módosító biztosítja a VMEK 2.0 felületéhez nem tartozó html fájlok (továbbiakban külső lapok) megjelenését.
A medium méretmegadó property érték a stíluslap dinamikus generálása során természetesen a felhasználói beállításoknak megfelelően mindig aktualizálódik.
(Ez a kitétel valamennyi, a vmek.css stíluslapban szereplő betű- és háttérszínnel, betűtípus megadással és szinte mindegyik elemméret definiálással kapcsolatos property értékre nézve hasonlóan történik, így a szabályok ismertetésekor erre a körülményre a továbbiakban már nem térünk ki külön.)
A parancs érvényességi köre mind a VMEK 2.0 akadálymentes felületére, mind a MEK dokumentumaira kiterjed. A html formátumú vagy dinamikusan html formátumra konvertált állományok (továbbiakban html lapok) dokumentumtörzsének általános leírására szolgál.
A ! important módosítóval ellátott tulajdonságok ugyanis elsőbbséget élveznek az adott elem megjelenítésére más módon megadott, ugyanezen megjelenítési tulajdonságot szabályozó paranccsal szemben.
Fontos megjegyezni, hogy a háttérkép property értékének egy nem létező képállomány lett megjelölve.
Ennek oka az, hogy a háttérkép tulajdonság nem öröklődik az adott elem (esetünkben a body) által tartalmazott gyermekelemre (child element), viszont mégis mindig átsejlik a gyermekelem saját hátterén.
A különféle operációs rendszerek alatt használatos leggyakoribb böngészőkkel történt tesztelés azt mutatta, hogy a nem létező állomány megjelölése biztosítja a leginkább a célnak megfelelő megjelenést.

2. A:link { FONT-SIZE: medium; COLOR: #336699 }

3. A:visited { FONT-SIZE: medium; COLOR: #336699 }

4. A:active { FONT-SIZE: medium; BACKGROUND: #336699; COLOR: #ffffff }

E három szabály a CSS nyelvben definiált A pszeudoelemet és annak visited és active pszeudoosztályait használja fel a hiperlinkek színének beállítására.
A három parancs érvényességi köre a VMEK 2.0 akadálymentes felületére korlátozódik, feladata csupán az, hogy felülbírálja a webkliens default linkszín beállításait.

5. A:hover { FONT-SIZE: 100%; BACKGROUND: #336699; COLOR: #ffffff; FONT-FAMILY: Times; TEXT-DECORATION: none }

E szabály a CSS nyelvben definiált A pszeudoelemet és annak hower pszeudoosztályát használja fel a fókuszált hiperlinkek színének beállítására.

A szabály a II. és a III. számú általános célkitűzés szempontjából fontos, ugyanis azt mondja ki, hogy miként kell megváltoznia a html lapokon levő hiperlinkek megjelenítésének, ha az egér mozgatása vagy az leütése azt eredményezi, hogy a hiperlinkek valamelyikére helyzeti fókusz kerül. A parancs érvényességi köre általános, de a ! important módosító hiánya miatt inkább csak a VMEK 2.0 html lapjai számára előírt viselkedést ír le.

A parancs végrehajtása részben böngészőfüggő, ugyanis a billentyű használatával áthelyezett fókusz esetén csak az Internet Explorer és a vele rokon Mozilla web-böngésző hajtja végre, míg az egérrel történő navigálás esetén minden web-böngésző elvégzi a megjelenítés előírt megváltoztatását.

6. A.menu:link { FONT-WEIGHT: bold; FONT-SIZE: 11pt; VERTICAL-ALIGN: middle; COLOR: #ffffff; FONT-FAMILY: Arial; TEXT-DECORATION: none }

7. A.menu:visited { FONT-WEIGHT: bold; FONT-SIZE: 11pt; VERTICAL-ALIGN: middle; COLOR: #ffffff; FONT-FAMILY: Arial; TEXT-DECORATION: none }

8. A.menu:active { FONT-WEIGHT: bold; FONT-SIZE: medium; BACKGROUND: #336699; VERTICAL-ALIGN: middle; COLOR: #ffffff; FONT-FAMILY: Arial; TEXT-DECORATION: none }

9. A.menu:hover { FONT-WEIGHT: bold; FONT-SIZE: medium; BACKGROUND: 36699; VERTICAL-ALIGN: middle; COLOR: #ffffff; FONT-FAMILY: Arial; TEXT-DECORATION: none }

A szabálycsoport az A pszeudoelemet kombinálja egy valódi html osztállyal (menu) és a megfelelő pszeudoosztályokkal.Ez a négy szabály a II. és a III. számú általános célkitűzés szempontjából fontos, ugyanis azt mondja ki, hogy miként kell megváltoznia a majdnem minden VMEK 2.0 lapon megjelenő felső gyorsmenü (1. ábra) elemeinek, ha az egér mozgatása vagy az leütése azt eredményezi, hogy a felső menü pontjaira helyzeti fókusz kerül. (2. ábra)

*1. ábra: a felső kék menü, amikor nincs rajta sehol fókusz.

*2. ábra: a kék menü, amikor valamelyik menüpontján fókusz van.

A szabálycsoport érvényességi köre a menu valódi osztály alkalmazása miatt a VMEK 2.0 felületen belül is korlátozott, ugyanis kizárólag a felső (kék) menü megjelenítésére vonatkozó utasításokat tartalmaz.

A 9. sorszámú parancs végrehajtása részben böngészőfüggő, ugyanis a billentyű használatával áthelyezett fókusz esetén csak az Internet Explorer és a vele rokon Mozilla web-böngésző hajtja végre, míg az egérrel történő navigálás esetén minden web-böngésző elvégzi a megjelenítés előírt megváltoztatását.

10. TABLE { FONT-SIZE: 100% ! important; FONT-FAMILY: Times ! important; BACKGROUND-COLOR: #fffffc! important; text-valign: middle }

A szabályban használt szelektor html elem típus szintjén választja ki a megjelenítés befolyásolásának mikéntjét. A szabály a IV. számú általános célkitűzés megvalósításában játszik kulcsfontosságú szerepet, ugyanis a ! important módosító a html elem (table) szintű, generalizált szelektorral együtt kemény feltételt szab a végrehajtásra, t. i. utasítja a web-böngészőt, hogy minden megjelenítendő html lap table elemére végre kell a parancsot hajtani, még akkor is, ha az adott html lap kódja vagy a hozzá csatolt más stílusleíró kód bármilyen más módon igyekszik is ezt megakadályozni. (3. ábra)

*3. ábra: egy olyan külső MEK dokumentum részlete, mely éppen táblázatot tartalmaz

A szabály abszolút érvényességi körű, köszönhetően az általános, elem szintű szelektornak és a ! important módosítónak, tehát mind a VMEK 2.0, mind a külső html lapokon szereplő táblázatok megjelenítésére vonatkozó, kötelező érvényű utasítást tartalmaz.

11. PRE { FONT-SIZE: 100% ! important; FONT-FAMILY: Times ! important }

A szabályban használt szelektor html elem típus szintjén választja ki a megjelenítés befolyásolásának mikéntjét. A szabály a IV. számú általános célkitűzés megvalósításában játszik kulcsfontosságú szerepet, ugyanis a ! important módosító a html elem (pre) szintű, generalizált szelektorral együtt kemény feltételt szab a végrehajtásra, t. i. utasítja a web-böngészőt, hogy minden megjelenítendő html lap pre elemére végre kell a parancsot hajtani, még akkor is, ha az adott html lap kódja vagy a hozzá csatolt más stílusleíró kód bármilyen más módon igyekszik is ezt megakadályozni. (4. ábra)

*4. ábra: egy külső MEK dokumentum részlete, mely előformázott szöveget tartalmaz

A szabály abszolút érvényességi körű, köszönhetően az általános, elem szintű szelektornak és a ! important módosítónak, tehát mind a VMEK 2.0, mind a külső html lapokon szereplő előformázott szövegblokkok megjelenítésére vonatkozó, kötelező érvényű utasítást tartalmaz.

12. TT { FONT-SIZE: 100% ! important; FONT-FAMILY: Times ! important }

A szabályban használt szelektor html elem típus szintjén választja ki a megjelenítés befolyásolásának mikéntjét.
A szabály a IV. számú általános célkitűzés megvalósításában játszik kulcsfontosságú szerepet, ugyanis a ! important módosító a html elem (tt) szintű, generalizált szelektorral együtt kemény feltételt szab a végrehajtásra, t. i. utasítja a web-böngészőt, hogy minden megjelenítendő html lap tt elemére végre kell a parancsot hajtani, még akkor is, ha az adott html lap kódja vagy a hozzá csatolt más stílusleíró kód bármilyen más módon igyekszik is ezt megakadályozni. (5. ábra)

*5. ábra: külső MEK dokumentum részlete, mely TT elemmel formázott szöveget tartalmaz

A szabály abszolút érvényességi körű, köszönhetően az általános, elem szintű szelektornak és a ! important módosítónak, tehát mind a VMEK 2.0, mind a külső html lapokon szereplő teletype stílusú szövegblokkok megjelenítésére vonatkozó, kötelező érvényű utasítást tartalmaz.

13. IMG { BORDER-TOP-STYLE: none! important; BORDER-RIGHT-STYLE: none! important; BORDER-LEFT-STYLE: none! important; BORDER-BOTTOM- STYLE: none! important }

A szabályban használt szelektor html elem típus szintjén választja ki a megjelenítés befolyásolásának mikéntjét. A szabály a IV. számú általános célkitűzés megvalósításában játszik kulcsfontosságú szerepet, ugyanis a ! important módosító a html elem (TT) szintű, generalizált szelektorral együtt kemény feltételt szab a végrehajtásra, t. i. utasítja a web-böngészőt, hogy minden megjelenítendő html lap img elemére végre kell a parancsot hajtani, még akkor is, ha az adott html lap kódja vagy a hozzá csatolt más stílusleíró kód bármilyen más módon igyekszik is ezt megakadályozni.

A szabály abszolút érvényességi körű, köszönhetően az általános, elem szintű szelektornak és a ! important módosítónak, tehát mind a VMEK 2.0, mind a külső html lapokon szereplő képelem megjelenítésére, a képmező körüli keretek elhagyására vonatkozó, kötelező érvényű utasítást tartalmaz.

14. TABLE.tablazat { FONT-SIZE: 100%; FONT-FAMILY: Times }

A szabály szelektora elemszintű, egy valódi html osztályattribútummal (.tablazat) kombinált szelektor. A szabály a II. számú általános célkitűzés érdekében került beillesztésre, ugyanis az osztályszintű szelektornak köszönhetően a VMEK 2.0 lapjain a tablazat osztályba sorolt táblázatait védi a 10. számú szabály befolyásától. A szabály érvényességi köre a tablazat valódi osztály alkalmazása miatt a VMEK 2.0 felületen belül is korlátozott, ugyanis kizárólag azon táblázatok megjelenítésére gyakorol hatást, melyek ebbe az osztályba lettek besorolva.

15. .border { BORDER-RIGHT: #ffffff thin outset; BORDER-TOP: #000000 1px outset; PADDING-LEFT: 5px; FONT-SIZE: medium; BORDER-LEFT: #000000 1px outset; COLOR: #000000; BORDER-BOTTOM: #ffffff thin outset; FONT-FAMILY: Times; BACKGROUND-COLOR: #e8e8e8 }

A szabály szelektora osztályszintű, csupán egy valódi html osztályattribútumból (.border) szelektor. áll. A szabály a II. számú általános célkitűzés érdekében került beillesztésre, ugyanis az osztályszintű szelektor használata kimondja, hogy csak a VMEK 2.0 lapjain a border osztályba sorolt elemeket (és azok kereteit) kell a szabályban megadott módon megjeleníteni.
A szabály érvényességi köre a border valódi osztály alkalmazása miatt a VMEK 2.0 felületen belül is korlátozott, ugyanis kizárólag azon elemek megjelenítésére gyakorol hatást, melyek ebbe az osztályba lettek besorolva. Ez annak ellenére is így van, hogy a szabály érvényessége nem függ a html elem típusától, csupán annak osztályba tartozásától.

16. HR { FONT-SIZE: 1px ! important; COLOR: #6586a7 }

A szabályban használt szelektor html elem típus szintjén választja ki a megjelenítés befolyásolásának mikéntjét.A szabály a IV. számú általános célkitűzés megvalósításában játszik kulcsfontosságú szerepet, ugyanis a ! important módosító a html elem (hr) szintű, generalizált szelektorral együtt kemény feltételt szab a végrehajtásra, t. i. utasítja a web-böngészőt, hogy minden megjelenítendő html lap hr elemére végre kell az ! important módosítóval kiegészített parancsot hajtani, még akkor is, ha az adott html lap kódja vagy a hozzá csatolt más stílusleíró kód bármilyen más módon igyekszik is ezt megakadályozni. A szabályban meghatározott szín (color) property külső html lapokban történő felülbírálata viszont engedélyezett; az ezen tulajdonságot befolyásoló deklaráció nem tartalmazza a ! important módosítót.
A szabály részben abszolút érvényességi körű, köszönhetően az általános, elem szintű szelektornak és a betűméret megadásakor alkalmazott ! important módosítónak, tehát e tulajdonságra nézve mind a VMEK 2.0, mind a külső html lapokon szereplő vizszintes grafikus delimiterek megjelenítésére vonatkozó, kötelező érvényű utasítást tartalmaz. Ugyanakkor a delimiterek színeit a külső html lapok felülbírálhatják.

17. H1 { FONT-WEIGHT: bold! important; FONT-SIZE: 160%! important; LINE-HEIGHT: normal ! important; FONT-STYLE: normal ! important; TEXT-ALIGN: center; FONT-VARIANT: normal ! important }

18. H2 { FONT-WEIGHT: bold ! important; FONT-SIZE: 130% ! important; LINE-HEIGHT: normal ! important; FONT-STYLE: normal ! important; TEXT-ALIGN: center; FONT-VARIANT: normal ! important }

19. H3 { FONT-WEIGHT: bold ! important; FONT-SIZE: 110% ! important; LINE-HEIGHT: normal ! important; FONT-STYLE: normal ! important; TEXT-ALIGN: center; FONT-VARIANT: normal ! important }

20. H4 { FONT-WEIGHT: bold ! important; FONT-SIZE: 100% ! important; LINE-HEIGHT: normal ! important; FONT-STYLE: normal! important; TEXT-ALIGN: center; FONT-VARIANT: normal ! important }

A négy szabályban használt szelektor html elem típus szintjén választja ki a megjelenítés befolyásolásának mikéntjét. A szabály a IV. számú általános célkitűzés megvalósításában játszik kulcsfontosságú szerepet, ugyanis a ! important módosító a html elem (h1..h4) szintű, generalizált szelektorral együtt kemény feltételt szab a végrehajtásra, t. i. utasítja a web-böngészőt, hogy minden megjelenítendő html lap h1..h4 elemére végre kell a parancsot hajtani, még akkor is, ha az adott html lap kódja vagy a hozzá csatolt más stílusleíró kód bármilyen más módon igyekszik is ezt megakadályozni. (6. és 7. ábrák)

*6. ábra: külső MEK dokumentum fejlécelemet tartalmazó részlete.

*7. ábra: a VMEK 2.0 felületének olyan része, ahol h1..h4 elem található.

A szabály majdnem teljeskörű érvényességgel bír, köszönhetően az általános, elem szintű szelektornak és a legtöbb property esetében használt ! important módosítónak, tehát mind a VMEK 2.0, mind a külső html lapokon szereplő 1., 2., 3. és 4. szintű fejlécszövegek megjelenítésére vonatkozó, kötelező érvényű utasítást tartalmaz. A kivétel a szövegigazítás (text-align) tulajdonság, ahol a középre igazítást (center) a külső html lapok felülbírálhatják.

21. INPUT { FONT: 100% Times; VERTICAL-ALIGN: bottom; BACKGROUND-COLOR: #e8e8e8 }

22. radio { FONT: 100% Times; VERTICAL-ALIGN: bottom }

23. SELECT { FONT: 100% Times; VERTICAL-ALIGN: bottom; BACKGROUND-COLOR: #e8e8e8 }

24. OPTION { FONT: 100% Times; VERTICAL-ALIGN: bottom; BACKGROUND-COLOR: #e8e8e8 }

25. TEXTAREA { FONT-WEIGHT: bold; FONT-SIZE: 100%; FONT-FAMILY: Times; BACKGROUND-COLOR: #e8e8e8 }

Az öt szabály az interaktív elemekre vonatkozó elemszintű szelektorokat tartalmaz, s bár a 10. számú szabályhoz hasonlóan generalizált szelektorokkal operálnak, mégsem viselkednek hasonló módon.
Ez az öt szabály a II. és a III. számú általános célkitűzés szempontjából fontos, ugyanis azt mondja ki, hogy miként kell megjeleníteni a VMEK 2.0 és más html lapon megjelenő interaktív formok beviteli elemeit, jelölőnégyzeteit és választógombjait. (8. és 9. ábrák)

*8. ábra: a VMEK beállítópanelje.

*9. ábra: a VMEK keresőformja.

A szabálycsoport érvényességi köre az elemszintű, osztály nélküli szelektorok alkalmazása miatt teljeskörűnek szánt, tehát mind a VMEK 2.0 felületen belül, mind a külső html lapokon megjelenő form elemekre szól. Mivel azonban a ! important módosító elhagyásra került, ezért a külső html lapoknak módjukban áll a szabályok által megadottól eltérő módon megjeleníteni a szóban forgó interaktív elemeket. Erre azonban a MEK gyűjteményében meglévő dokumentumok esetében szinte soha nem kell számítani, ugyanis a dokumentumok készítői szerencsére csak ritkán élnek a form elemek esetében a html kódba "beégetett" formai leírók alkalmazásának lehetőségével.

26. FONT { FONT-SIZE: medium }

A szabály elemszintű, generalizált szelektort tartalmaz.A szabály a II. és III. számú célkitűzések érdekében került beillesztésre. Feladata az, hogy egyrészt minden olyan egyéb szabály nem magasabb precedenciaosztályú (nem ! important) betűméret megadási direktíváját felülbírálja, amely alkalmas arra, hogy "elrontsa" a html lapok olvashatóságát a nem megfelelő betűméret beállításával; másrészt pedig a külső html lapokon gyakran használt direkt módon beállított fontméreteket bírálja felül, bár nem minden esetben, hiszen a szabályban használt deklaráció nem tartalmaz ! important módosítót.

A szabály tehát részben a stíluslapon belüli elhelyezési sorrendjének köszönhetően fejti ki a kívánt hatást, mivel a később deklarált szabály mindig felülbírálja a vele egy precedenciaosztályba tartozó korábbi szabályokat. A szabály érvényességi köre majdnem teljeskörű, de mivel a ! important módosítót nem tartalmazza, ezért a külső html lapoknak esetenként módjában áll felülbírálniuk.

27. TABLE.kiscim { PADDING-RIGHT: 2pt; PADDING-LEFT: 2pt; FONT-SIZE: 120%; PADDING-BOTTOM: 2pt; WIDTH: 55%; PADDING-TOP: 2pt; FONT-FAMILY: Arial; BACKGROUND-COLOR: #6586a7; TEXT-ALIGN: center; FONT-COLOR: #ffffff }

A szabály szelektora elemszintű, egy valódi html osztályattribútummal (.kiscim) kombinált szelektor.

A szabály a II. számú általános célkitűzés érdekében került beillesztésre, ugyanis az osztályszintű szelektornak köszönhetően a VMEK 2.0 lapjain a kiscim osztályba sorolt táblázatait védi a 10. számú szabály befolyásától. A szabály érvényességi köre a kiscim valódi osztály alkalmazása miatt a VMEK 2.0 felületen belül is korlátozott, ugyanis kizárólag azon táblázatok megjelenítésére gyakorol hatást, melyek ebbe az osztályba lettek besorolva.

4.3. A VMEK 2.0 direkt navigációs lehetőségeinek megvalósítása: a gyorsgombok

a.) azon szerkezeti és funkcionális honlapkomponensek meghatározása, melyekhez szükséges vagy érdemes direkt elérést biztosító gyorsgombokat rendelni,

b.) az a. fázisban kijelölt funkcionális vagy szerkezeti egységekhez tartozó konkrét gyorsgombok kiválasztása.

Az a. fázisban a kiválasztás főbb szempontjai az alábbiakban határozhatóak meg.

I. A főoldalt lehetőség szerint mindenhonnan elérhetővé kell tenni gyorsgomb segítségével.

II. a főoldal felső részén található kék menü elemeit vagy e menü pontjainak értelemszerűen kiválasztott részhalmazát lehetőleg mindenhonnan elérhetővé kell tenni gyorsgombokkal.

III. a nyitó oldal minden jelentősebb, a felhasználók által frekventáltan használt pontját elérhetővé kell tenni gyorsgombok segítségével.

IV. a VMEK 2.0 akadálymentes felületén a fejlesztés előző fázisában kialakított keresőfelületet ki kívántuk egészíteni egy olyan gyorsgombbal hívható funkcióval, mely lehetővé teszi, hogy a honlap bármely részéről le lehessen futtatni a keresőmodullal a legutoljára kiadott keresőfunkciót, függetlenül attól, hogy a felhasználó a két keresés között elhagyta a honlap kezelőfelületét, illetve az utolsó látogatáskor használta-e ezt a gyorsgombot egy még korábban lefuttatott és ekkor eltárolt keresés újrafuttatására.

Mint azt a 3. részben kifejtettük, a konkrét megvalósítás eszközének a webkliensek által általánosan támogatott kliensoldali scriptnyelvet, a javascript-et választottuk. Az I.-IV. pontokban meghatározható választásoknak megfelelően a nyitólaphoz és az abból hiperlink aktiválásával hívható aloldalakhoz más-más javascriptek tartoznak, legalábbis az általuk kezelt gyorsgombok halmaza változik. Így egy kétszintű szelekció valósul meg, ugyanis a főoldalhoz tartozó javascript által kezelt gyorsgombok hatására megnyíló lapok felügyeletét más, egy logikai szinttel lejjebb besorolható javascriptek veszik át.

A b. választást, vagyis a konkrét gyorsgomb-értékek kijelölését irányító legfőbb szempontok azok voltak, hogy a gyorsgombok még akár egy kézzel navigáló mozgáskorlátozott felhasználók esetében is fizikailag könnyen elérhető helyeken legyenek, másrészt az egyes honlapelemekhez, honlapfunkciókhoz tartozó gyorsgombok lehetőség szerint jól megjegyezhetőek, társíthatóak legyenek. Ez utóbbi cél érdekében a gyorsgombok társításakor vagy az adott honlapelem (általában hiperlink) szöveges leírójának kezdőbetűjét vagy egy jellemző karakterét választottuk, vagy ha ez nem volt lehetséges, akkor a kijelölt betű billentyűzeten elfoglalt helyzete segítse a memorizálást.

A fent leírt kétszintű tervezés eredményeképpen a VMEK 2.0 akadálymentes felületére az alábbiakban ismertetendő, kétszintű gyorsgomb-rendszer került kialakításra:

A.) A fő vagy nyitó oldal által kezelt gyorsgombok és a hozzájuk tartozó funkciók és azokat megvalósító honlapelemek táblázata.

B.) "b": Beállítások /VMEK2/beallit.phtml Ez a gyorsgomb a VMEK 2.0 felület akadálymentességi szempontból egyik legfontosabb aloldalára, a beállítópanelre (10. ábra) történő közvetlen eljutást teszi lehetővé.

*10. ábra: a beállítópanel

"k": Keresés /VMEK2/vkeres2.phtml

A gyorsgomb hatására a VMEK 2.0 keresőfelülete töltődik be (11. ábra)

*11. ábra: a VMEK keresőoldala.

"d": Legutóbbi keresés /VMEK2/vkeres23.phtml

E gyorsgomb leütése azzal a hatással jár, hogy a kezelőrendszer generál a felhasználó gépén korábban egy cookie rekordban letárolt legutolsó keresés paramétereivel kitöltött keresőformot, azt elküldi a MEK keresőrendszerébe és a kapott válasz alapján elkészít egy találati lista oldalt. (12. ábra)

*12. ábra: egy "d" hatására generált találati oldal részlete.

Azoknak a felhasználóinknak hasznos ez a gyorsgomb általi direkt navigációs megvalósítás, akik többnyire csak egy dolgot keresnek a MEK-ben és időnként meg akarják nézni, hogy van-e már valami új dokumentum az őket érdeklő témákban, szerzőktől, stb. Ha a cookie- ban fellelhetőek egy korábbi keresés paraméterei, akkor a VMEK kezdőlapról egyetlen gombnyomással elérik a frissített találati listát, nem kell újra a kereső formhoz navigálni és keresési paramétereket begépelni.

"e": Kézikönyvek, egyéb mfajok /html/vgi/vkereses/egyeb2.phtml
"h": Humán területek, kultúra, irodalom /html/vgi/vkereses/human2.phtml
"i": Könyvismertetők https://legeza.oszk.hu
"l": A MEK teljes anyaga, lista /export/VMEKindex.html
"m": Műszaki, gazdasági ágazatok /html/vgi/vkereses/muszaki2.phtml
"r": Társadalomtudományok /html/vgi/vkereses/tarsad2.phtml
"t": Természettudományok /html/vgi/vkereses/termesz2.phtml
"x": Letölthető teljes lista text-ben https://VMEK.oszk.hu/export/MEKindex-txt.zip
"s": Súgó /VMEK2/help.phtml

Ez a gyorsgomb a bárhonnan elérhető fő információs oldalt tölti be, mely a gyorsgombok használatához nyújt centralizált segítséget. (12. ábra)

*12. ábra: a VMEK súgólap.

Az aloldalak által kezelt gyorsgombok és a hozzájuk tartozó funkciók és az azokat megvalósító honlapelemek táblázata

"f": főoldalhoz /VMEK2/index.phtml
"b": Beállítások /VMEK2/beallit.phtml
"k": Keresés /VMEK2/vkeres23.phtml
"s": Súgó /VMEK2/help.phtml
"v": következőre
"c": előzőre

A "v" és "c" gyorsgombok a találati listákon és a vendégkönyvi bejegyzéseket tartalmazó oldalakon használhatóak.

4.3. A VMEK 2.0 felületen megvalósított navigációt segítő információs alrendszer (súgó)

A VMEK 2.0 minden fejlesztési fázisára nézve fontos szempont volt, hogy a felhasználói felület és a mögöttes funkciók dokumentálva legyenek és ezzel megvalósuljon a felületet használó látogatók minél teljeskörűbb tájékoztatása a felület használatának mikéntjével kapcsolatban.
Bár a fejlesztés során igyekeztünk önmagyarázó felületet tervezni, mégis fontosnak tartottuk, hogy mindig elérhető legyen az összes vonatkozó beviteli eseménytípus listája a tartalmi fókuszban található elemmel kapcsolatban.
Az egymáshoz rendelt funkciók és beviteli módok listáját centralizált formában is szolgáltatjuk (hogy a felhasználónak ne kelljen elolvasnia a teljes dokumentumot ahhoz, hogy megtalálja az érvényes kiosztást), valamint disztributíve (a kezelőfelület menüpontjain közölve a megfelelő billentyűgombokat).
Ezt a kettős célt valósítja meg az egyes oldalakon a gyorsgombokkal is elérhető hiperlinkek mellett feltüntetett zárójelezett karakterek feltüntetése,(13. ábra) valamint a centralizált tájékoztatás érdekében elkészített súgó oldal, mely a gyorsgombok listáját tartalmazza a főoldalra és az aloldalakra külön lebontva. (14. ábra)

*13. ábra: a nyitólap gyorsgomb-feliratokat tartalmazó szelete.

*14. ábra: a gyorsgomb-felsorolást tartalmazó súgólap.

Külön segítő tippoldal gondoskodik a felhasználók kiegészítő tájékoztatásáról a beállítópanelen (14. ábra)és a MEK dokumentumaiban történő keresést segítő "Tippek a kereséshez" információs oldal. (15. ábra)

*14. ábra: a cookie engedélyezésről szóló help-oldal.

*15. ábra: a tippek a kereséshez oldal.

5. Összefoglalás, a várható hatások ismertetése

A VMEK 2.0 fejlesztésének jelen fázisa az akadálymentesség lényegesen általánosabb, magasabb szintű megvalósítását jelenti.

A fejlesztési fázis két legfontosabb eredményének a gyorsgombok rendszerének a felületbe történő integrálását tekinthetjük, valamint a VMEK 2.0 felületre jellemző akadálymentes megjelenítés majdnem teljes körű kiterjesztését a MEK dokumentumaira. A gyorsgombok a súlyosan mozgáskorlátozott felhasználók számára jelentenek alapvető fontosságúfejlesztési eredményt, míg a VMEK 2.0 jól olvasható megjelenítési tulajdonságainak exportálása a MEK dokumentumainak szintjére a gyengénlátó felhasználók számára nyit meg új lehetőségeket a művelődésre, információszerzésre és szórakozásra.

A gyorsgombbal hívható, tárolt keresés újrafuttatásának lehetősége a honlap rendszeres látogatói számára jelenthet kellemes és kényelmes kiegészítő szolgáltatást.
A II. és III. számú általános célokban megfogalmazott, differenciáltabb VMEK 2.0 felületmegjelenítés, a fókuszált elemek kiemelése, nagyítása és inverz megjelenítése szintén a látásproblémákkal élők honlaphasználatát segíti.

A fejlesztési fázis ezen eredményeinek köszönhetően a VMEK 2.0 akadálymentes felületének népszerűsége várhatóan tovább fog növekedni. Erre utalnak a felhasználók tesztidőszak alatti visszajelzései (vendégkönyvi bejegyzések) is, melyek arról tanúskodnak, hogy a VMEK fejlesztésének eddigi iránya, célkitűzései és a megvalósítás egyaránt a helyes elvek mentén és megfelelő eszközökkel történtek.