HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13.

1. Abonyi-Tóth Andor, Egyetemi tanársegéd
ELTE IK, Média- és Oktatásinformatikai Tanszék 1

2.  A HTML5 és az akadálymentesség
megjelenése a kurzusaink tematikájában,
követelményeiben
 Tapasztalatok
 Ízelítő a hallgatók bevonásával végzett
fejlesztésekből
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 2

3. HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 3

4. (heti 1 előadás + 2 gyakorlat)
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 4

5.  Az A,B,C szakirányos hallgatók számára
kötelezően választható kurzus
 A szakirány: Modellező informatikus
 B szakirány: Szoftverfejlesztő informatikus
 C szakirány: Szoftveralkalmazó informatikus
 T (tanári) szakirányos hallgatóknak kötelező
 Népszerű kurzus, ~300 hallgató végzi el
szemeszterenként
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 5

6.  HTML alapok, a különböző szabványok
(HTML 4.01, XHTML 1.0, HTML 5) közti
különbségek, újdonságok
 Stíluslapok (CSS 1,2,3) használata
 Web-ergonómiai elvek
 Akadálymentesség
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 6

7.  2012. szeptemberétől a korábban
kifejlesztett HTML 4.01 és XHTML
tananyagaink mellett megjelentek a HTML5
és CSS3 témakört feldolgozó digitális
tananyagaink is.
 Ezen tananyagok hallgatók bevonásával
készültek, diplomamunkaként.
 HTML5 tananyag készítője: Nemes Adriána
 CSS3 tananyag készítője: Tárnok Tamás Attila
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 7

8. HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 8

9.  TAMOP-412-A-1-11-1 pályázatban új web-es
tananyagokat fejlesztünk, amelyek szabadon
elérhetőek lesznek
 A weblapkészítés technikája (HTML5, CSS3) és
ergonómiája
▪ Honlapkészítés HTML5 és CSS3 alapokon, sok ergonómiai,
akadálymentességi kitekintővel
 Honlapok funkcionális- és arculati tervezése,
megvalósítása
 Mock-up készítés, arculati tervezés, site-build, stb.
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 9

10.  Az aktuális szemeszterben a követelményeket
jelentősen megváltoztattuk
 A kiadott irányelveknek megfelelő honlap készítése
(66 irányelv, köztük számos akadálymentességi elv)
▪ Értékelés az irányelvek teljesítési aránynak és az önellenőrzés
szakmaisága alapján
 Részvétel egy szemantikus wiki adatbázis
létrehozásában (HTML5, CSS3 és WCAG 2.0
témakörben)
▪ Értékelés a címszavak szakmai minősége alapján történik
 Érdekes, hasznos témakörről blogbejegyzés készítése
a Web-fejlesztés blogon
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 10

11.  66 irányelv
 Ezek egy része kötelezően
betartandó, minimális
követelmények
 A hallgatók arra is
pontszámot kapnak, hogy a
saját honlapjukra vonatkozó
elemzésük mennyire volt
szakmailag helyes
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 11

12.  Cél
 Közös tudásépítés
 Használható leírások a tag-ekre, attribútumokra,
irányelvekre, teljesítési feltételekre, stb. vonatkozóan
 A megértést segítendő magyarázó forráskódok,
interaktív példák, önellenőrző kérdések elhelyezése
 Az egyes elemek közti szemantikus kapcsolatok
beállítása (hatékony keresés, egymással összefüggő
elemek azonosítása)
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 12

13. HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 13

14.  [[Kategória:WCAG 2.0 teljesítési feltétel]]
 [[Kategória:WCAG 2.0 teljesítési feltétel]][[Szint (WCAG)::A]]
 [[Szint (WCAG)::A]] OR [[Szint (WCAG)::AA]]
 [[Kapcsolódó irányelv (WCAG)::1.1 Szövegalternatívák]]
[[Kapcsolódó HTML tagek (WCAG)::figure]]
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 14

15. HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 15

16.  A hallgatók plusz
feladatként a HTML5,
CSS3, Ergonómia,
Akadálymentesség
témakörében
blogbejegyzéseket
készítenek
http://webfejlesztes.elte.hu/
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 16

17. (heti 2 gyakorlat)
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 17

18.  Webmarketing, keresőmarketing, keresőoptimalizálás a
gyakorlatban.
 Céges weboldalak, webshopok ergonómiája.
 Funkcionális tervezés módszerei, eszközei (paper
prototype, mockup tervek).
 Grafikus programok használata az arculattervezés során
 Arculati kézikönyv formai és tartalmi elemei, logótervezés
elvei, logótervezés a gyakorlatban.
 Layout megvalósítása, tartalom és megjelenés
szétválasztása, sablonok és stíluslapok alkalmazása
 Komplex weboldal önálló megvalósítása HTML5 alapokon,
specifikáció alapján önálló munka keretében (arculatterv,
layout, tartalom feltöltés).
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 18

19. 19
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13.

20. (heti 2 gyakorlat)
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 20

21.  A2008/09-es tanév tavaszi félévében indítottuk
útjára (Abonyi-Tóth Andor, Helfenbein Henrik
(ELTE IK), Pataki Máté (MTA SZTAKI)
 A képzés a TÁMOP 5.4.5 „A fizikai és info-
kommunikációs akadálymentesítés szakmai
hátterének fejlesztése” című kiemelt projekt
támogatásával jött létre, amelyet a Fogyatékos
Személyek Esélyegyenlőségéért Közalapítvány
koordinált. A projektről részletes információkat
találunk a http://www.hozzaferes.hu/ oldalon.
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 21

22.  Bárki aki maga fogyatékos, vagy a közvetlen
környezetében található fogyatékos, és segítséget
szeretne kapni a számítógép – szoftver és hardver –
használatában, a kisegítő lehetőségek
megismerésében.
 Aki mások számára telepít/beállít számítógépeket,
például rendszergazdák, könyvtárosok, tanárok.
 Informatikusok, programozók, holnapkészítők és -
tervezők, akik honlapokat és különböző
alkalmazásokat fejlesztenek.
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 22

23.  A legfontosabb alapfogalmak és a különböző
fogyatékossági csoportok – mint például
beszéd-, hallás-, látás-, mozgássérültek és
értelmi fogyatékosok – jellemzői, problémái
 Speciális hardver és szoftver eszközök
 Akadálymentes tartalmak létrehozásának
módja
 Web akadálymentesítési útmutató (WCAG
2.0)
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 23

24.  A honlapok akadálymentesen tartásával
kapcsolatos tudnivalók
 Multimédiás tananyag készítése hátrányos
helyzetű csoportok számára
 Technológia trendek, érdekességek
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 24

25.  Válasszon ki egy olyan oldalt, ahol nem működik alapesetben a betűméret
nagyítás, vagy más okokból (pl. színösszeállítás) nehezen olvasható a szöveg
gyengénlátók számára. Készítsen olyan egyéni stíluslapot, amellyel az oldal
jobban olvashatóvá válik (inverz színséma, betűméret, hivatkozások színe, stb.
beállítása).
 A következő témakörök egyike szerint készítsen egy esszét (2-3 oldal
terjedelemben)!
 Hogyan változna meg egy napom, ha X fogyatékossággal élnék?
 Hogyan tudnám a jelenlegi munkámat elvégezni X fogyatékossággal?
 Lakhelyem hogyan kellene átalakítani, ha X fogyatékossággal élnék?
 Kedvenc időtöltésem hogyan változna a különböző fogyatékosságok miatt?
 Élményem egy fogyatékos személlyel.
 Ideiglenes fogyatékosságom (pl. láb/kéztörés, betegség) élményei.
 Feliratozzon egy legalább 3 perc hosszúságú videót (zárt felirattal) és töltse fel a
Youtube portálra. Készítse el a videó teljes szövegű leírását is! A portfolióban a
forrás állomány és feliratállomány, valamint a teljes szövegű átírás is legyen
elérhető.
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 25

26.  Készítse el egy tetszőleges irodalmi alkotás (vagy annak
részletének) dramatizált elektronikus könyv változatát a
DEX alkalmazás segítségével.
 A WCAG 2.0 ajánlásban foglaltak alapján gyűjtsön 3-3-3
olyan példát, ahol egy-egy A, AA, és AAA irányelv
megfelelően teljesül egy (lehetőleg magyar nyelvű)
weboldalon. A dokumentumban szerepeltesse az irányelvet,
a honlap url-jét, és egy képernyőképet
 Elemezze az ELTE E-learning rendszerét akadálymentességi
szempontból a WCAG 2.0 szabvány irányelvei alapján. A
leírásnál hivatkozzon a megfelelő WCAG 2.0 irányelvre!
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 26

27.  A portfoliót egy akadálymentes weblap formájában
kell benyújtani, amely tartalmazza a félév során
kiadott feladatok leírását és megoldását
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 27

28.  A bemutatott példák és ellenpéldák jól összegzik az
egész féléves munkát és az oktató munkáját is
megkönnyítik
 A portfolióban elhelyezett esszé jellegű feladatok is
nagyon élvezetesek
 Az érzékenyítő órákon is nagy aktivitást mutattak a
hallgatók
 A kurzus végén sokan beszámoltak arról, hogy a
tanult elvek alapján hogyan módosították az általuk
létrehozott honlapokat
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 28

29.  Új, akadálymentesítéssel kapcsolatos
diplomamunka témákat is meg lehet hirdetni
 A hallgatókat be tudtuk vonni konkrét
akadálymentesítési munkák részfeladatainak
megoldásába
 Kooperatív képzésben, illetve szakmai
gyakorlatban előnyt jelent a megszerzett
tudás
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 29

30. HTML5 , akadálymentesség témakörében
Ízelítő az utolsó szemeszter munkáiból
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 30

31.  Infokommunikációs akadálymentesítés kérdései
látássérült felhasználók vonatkozásában
 A Jaws és Magic programok viselkedése az
operációs rendszerben és fontosabb
alkalmazásokban
 Weboldalak validitásának akadálymentességi
szempontokkal való összefüggései
 A Moodle rendszer akadálymentességének
elemzése
Doktori téma: Webes tartalom akadálymentes használatát biztosító
technológiák vizsgálata és kidolgozása
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 31

32. HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 32

33. http://racer.nomo.hu/
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 33

34. HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 34

35.  Gradwohl Ankó: A HTML5 grafikai
újdonságainak bemutatása
 CANVAS, CANVAS transzformációk, Animációk,
Grafikonok
 Csesztanovits Anna: HTML5 és CSS3
lehetőségeinek bemutatása különböző
esettanulmányok segítségével
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 35

36. Akadálymentes tananyagok fejlesztéséhez
© Abonyi-Tóth Andor, Sipos György
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 36

37.  „A fizikai és info-kommunikációs
akadálymentesítés szakmai hátterének
kialakítása” című TÁMOP 5.4.5 projekt
 FSZK: Fogyatékos Személyek
Esélyegyenlőségéért Közhasznú Nonprofit Kft.
 Képzések fejlesztése, tananyagok fejlesztése
▪ Az akadálymentes tananyagok készítéséhez
használtunk saját fejlesztésű scripteket (Pataki Máté,
Abonyi-Tóth Andor)
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 37

38.  A keretrendszert a specifikáció (©ATA)
alapján Sipos György (prog. terv.
informatikus hallgató) készítette 2011-2012-
ben.
 A keretrendszer fejlesztését a TÁMOP
4.1.2/A/2-10/1-2010-0011 (INFOTÁRS) projekt
támogatásával valósult meg.
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 38

39.  A keretrendszer segíti az akadálymentes
HTML alapú tananyagok fejlesztését, a
megfelelő SCORM metaelemek automatikus
létrehozásával
 Cél az e-tananyagok sokrétű
felhasználhatósága
 Web, LMS, DVD, pendrive, helyi hálózat, helyi
számítógép
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 39

40.  Szabványok betartása (HTML, CSS, SCORM,
WCAG)
 Ergonómia, akadálymentes hozzáférés
 Az e-tananyagok sokrétű felhasználhatósága
 Web, LMS, DVD, pendrive, helyi hálózat, helyi
számítógép
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13.
40

41.  A web-fejlesztő számára biztosítani kell az
akadálymentes publikáláshoz szükséges
információkat.
• A Magyar Nemzeti Múzeum épülete
• Példa egy légifelvételre
• Az épület alaprajza keresztirányban megnyújtott.
Négyszöges tömbön belül 2 szimmetrikusan
elhelyezett udvaralap látható.
• A múzeumkert, amelyben tölgyfák, gesztenyefák,
fenyőfák és páfrányfenyők is találhatóak
• A magyar klasszicista építészet egyik
nagymesterének, Pollack Mihálynak főműve
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 41

42.  A tananyag szerzőitől nem várhatunk el
magas szintű informatikai ismereteket.
 A szükséges információkat felhasználóbarát
módon kell összegyűjteni.
 Sablonokat hoztunk létre, amelyekben
megadhatók a szükséges információk
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 42

43.  Tananyag modul sablonja
 (Word dokumentum)
 Tananyag elemek sablonja
 (Excel állomány)
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 43

44. HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 44

45.  Sablonok és fájlok ellenőrzése
 Hiányzó metainformációk kiszűrése
 Tartalmi ellenőrzés (megfelelő mennyiségű és
minőségű kitöltöttség)
 Nyelvi lektorálás
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 45

46.  A keretrendszer elvégzi a szabványos HTML
kódra alakítást, a médiaelemek (képek,
videók) konverzióját, az önellenőrző kérdések
(vak felhasználók által is használható)
konvertálását, a metaelemek létrehozását,
fogalmak beillesztését a megadott helyekre.
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 46

47.  Bonyolult táblázatok átalakítása manuálisan
történik (valid HTML kód, scope, headers, id
attribútumok), ellenőrzés JAWS
alkalmazásban is
 A Videók jellemző képkockáiból előképeket
kell generálni.
 A videókat feliratozni kell.
 A teljes szövegű leírásoknál a megfelelő
stílusokat (pl. narrátor, férfi, nő) be kell
állítani.
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 47

48. HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 48

49.  Nagy mértékben meggyorsítja, megkönnyíti
a tananyagok fejlesztését a keretrendszer
 A tananyagok frissítése, a próbaképzések
tapasztalatai alapján történő átdolgozások
könnyen megoldhatók
 A szerzők örülnek a rendszer nyitottságának,
az egyedi elemek beillesztése is megoldott.
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 49

50. Abonyi-Tóth Andor, Egyetemi tanársegéd
abonyita@inf.elte.hu
http://abonyita.inf.elte.hu
ELTE IK, Média- és Oktatásinformatikai Tanszék
HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 50