• Like
  • Save
HTML5 és akadálymentesség az ELTE Informatikai Kar kurzusaiban és fejlesztéseiben
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

HTML5 és akadálymentesség az ELTE Informatikai Kar kurzusaiban és fejlesztéseiben

  • 1,998 views
Published

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

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

Published in Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,998
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Abonyi-Tóth Andor, Egyetemi tanársegédELTE 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. 19HTML5 é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 szimmetrikusanelhelyezett 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 egyiknagymesteré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édabonyita@inf.elte.huhttp://abonyita.inf.elte.huELTE IK, Média- és Oktatásinformatikai Tanszék HTML5 és akadálymentesítés műhelykonferencia - 2012. szeptember 13. 50