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
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
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
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
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
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
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
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
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