Webtervezés alapjai előadás
Levelező tagozat
2022/2023 II. félév

Alapadatok

• A tantárgy kódja: ITLA2714e.
• Kreditérték: 2.
• Heti óraszám: 6.
• A tantárgy típusa és értékelés módja: előadás, kollokvium.
• A kurzus felvételének feltételei:
  1. a Programozás alapjai vagy a Programozási alapismeretek (C ismeretek) gyakorlatok valamelyikének előzetes teljesítése, ÉS
  2. a Webtervezés alapjai gyakorlat párhuzamos felvétele vagy előzetes teljesítése.
• Felelős oktató: Dr. Holló Csaba, egyetemi adjunktus, Szoftverfejlesztés Tanszék.

A tantárgy célja

• A hallgató képes legyen jó minőségű statikus weboldalakat készíteni.
• A hallgató ismerje a webtervezés alapjait és megértéssel viszonyuljon a weboldalakat különböző körülmények között vagy nehézségekkel kezelő felhasználókhoz.

Tematika

1. HTML és CSS.
   1. HTML és CSS szintaxis.
   2. Általános formázások. Stílusok elhelyezése. Hozzárendelési feltételek. Kijelölések. Értékek, mértékegységek (hosszúság, URL, szög, színek). Objektumok általános formázása (háttér, margó, belső margó, szegély). Rangsor és hatás.
   3. Helyzetmegadás.
   4. Weboldalak strukturálása. Beágyazott keretek (lebegőkeretek).
   5. Szövegek jellemzői, strukturális egységei és azok formázása. Hivatkozások elhelyezése és formázása.
   6. Felsorolások. Menük elhelyezése és formázása.
   7. Táblázatok készítése.
   8. Űrlapok készítése. Űrlapelemek, elemfeliratok, működési jellemzők.
   9. Multimédiás elemek beágyazása.
   10. A HTML és CSS további lehetőségei.
2. Webtervezés, webdesign és webes akadálymentesítés alapismeretek.

Ajánlott irodalom

• HTML, CSS
  1. Abonyi-Tóth Andor, ELTE IK: A weblapkészítés technikája (HTML5, CSS3) és ergonómiája, elte.hu, tankonyvtar.hu.
  2. Cservenák Bence gyakorlati jegyzete.
  3. Vancsics Béla által gondozott gyakorlati jegyzet.
  4. HTML5 weboldalak készítése - webfejlesztes.gtportal.eu
  5. Holló Csaba: Üzleti webtechnológiák, Typotex Kiadó, 2011.
  6. Virginia DeBolt: HTML és CSS. Webszerkesztés stílusosan. Kiskapu Kft, 2005.
  7. (angol) HTML5 - MDN web docs (Mozilla)
  8. (angol) HTML5 Tutorial - w3schools.com
  9. (angol) Estelle Weyl: HTML5 v. XHTML5
• Webtervezés.
  1. Abonyi-Tóth Andor, ELTE IK: A weblapkészítés technikája (HTML5, CSS3) és ergonómiája, elte.hu, tankonyvtar.hu.
  2. Jakob Nielsen, Web-design, Typotex, 2004.
  3. Webergonómia Jakob Nielsen nyomán, szerkesztő: Leiszter Attila, Typotex Kiadó, 2011, ISBN : 9632795782.
  4. Walter, Aarron: Keresők és Webhelyek, Kiskapu Kiadó, 2009, ISBN : 9639637597.
  5. W3C Magyar Iroda: Honlapok akadálymentesítése
  6. Szántai Károly: Akadálymentes web
  7. HVG: Akadálymentes honlap - valakinek kötelező, valakinek ajánlott
  8. optimizer.hu: Web akadálymentesítés és SEO
  9. Edelényi Zsolt: Akadálymentes honlapok,
  10. Google: Google Keresőmotor-optimalizálási útmutató kezdőknek
  11. Google: Útmutató webmestereknek
  12. Papp Gábor: Keresőoptimalizálás: bevezetés és alapok.
  13. Longhand: Keresőoptimalizálás.
  14. Honlapra Fel!: Keresőoptimalizálás.
  15. optimizer.hu: Sebesség optimalizálás és teljesítménynövelés

A tantárgy elvárt kimeneti követelményei (a tantárggyal kialakítandó konkrét tanulási eredmények)

A kurzus végére, az egyes osztályzatokat elérő hallgató, az egyes témakörökben az ott megjelölt kompetenciákkal rendelkezik, melyek részben kiválthatók a nagyobb jegyeknél megjelölt kompeetenciákkal.

• Elégséges (2) szint
  • Azonosítja az XHTML, HTML5 és CSS3 szabványok, illetve a jól formált kód legfontosabb előírásait és célját, és a szabványosság ellenőrzési lehetőségeit. Ismeri a HTML és CSS szerepét, a HTML objektumok szintaktikáját, egymásba ágyazási lehetőségeit, a blokkszintű és sorszintű objektumok jellegzetességeit. Felismeri a HTML5 dokumentum kötelező részeit és leírja azok megvalósítását. Összehasonlítja a webes szabványokat. Szabványos és jól formált weboldalakat ír. Összehasonlítja és felismeri a legfontosaabb sorszintű és blokkszintű objektumokat. Fontosabb azonosítók, fogalmak: üres típusú objektum, html, head, body, title, meta charset, div, span.
  • Ismeri a CSS szabályok részeit és általános szintaktikáját, a stílusok elhelyezésének lehetőségeit és alkalmazási szempontjait. A stílusokat céljuknak megfelelően adja meg. Kiválasztja a használni kívánt stílusok HTML tartalmakkal történő legjobb összekötési lehetőségeit. Fontosabb azonosítók, jelölések: style, link, rel, href, @import.
  • Felsorolja az objektumok egyedi, illetve csoportos azonosításának, és kijelölésének lehetőségeit, ismerteti azokhoz CSS szabályok megadásának módját. Érti az öröklés működését. Fontosabb azonosítók, jelölések: id, class, ., #.
  • Listázza a formázáshoz használt legfontosabb mértékegységeket. Fontosabb azonosítók, jelölések: mm, cm, in, pt, pc, %, em, px, ex, vw, vh, deg, rad, grad, url.
  • Leírja a színek megadásának lehetőségeit névvel és kóddal, érti azok logikáját. Fontosabb azonosítók, jelölések: rgb, hsl.
  • Szemlélteti az objektumok részeinek (tartalom, belső térköz, margó, szegély, körvonal) elhelyezkedését, megvalósítását, és speciális formázásait. Fontosabb azonosítók, jelölések: width, height, min-width, max-width, min-height, max-height, padding, –top, -right, -bottom, -left, margin, border, border-width, border-style, border-color, border-radius, outline, outline-color, outline-width, outline-style, outline-offset.
  • Ismeri a háttérszín és háttérkép elvi megadási lehetőségeit, felismeri az ezeket megvalósító parancsokat, érti azok működését. Fontosabb azonosítók, jelölések: background-color, background-image, url(képnév), none.
  • Ismeri az objektumok pozícionálásának megadási lehetőségeit, szintaxisát, érti azok működését. Fontosabb azonosítók, jelölések: position, static, fixed, top, bottom, left, right, relative, absolute, inherit, float, clear, z-index.
  • Felsorolja a listák típusait, azok tulajdonságait, formázási lehetőségeit, felismeri az ezek megvalósítására szolgáló parancsokat, és érti azok működését. Fontosabb azonosítók: ul, li, list-style-type, disc, circle, square, list-style-image, url(kep), list-style-position, outside, inside, ol, value, reversed, start, type, list-style-type, none, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, dl, dt, dd.
  • Megnevezi a táblázatok strukturális kialakítására, a cellák fejlécekhez történő társítására, használható parancsokat, és érti azok működését. Ismeri a táblázatos megjelenítés parancsait és működését. Fontosabb azonosítók: table, tr, td, th, rowspan, colspan, headers, table, table-row, table-cell, display, table-header-group, table-footer-group, table-row-group, table-caption, table-column-group, table-column.
  • Felsorolja az űrlapok működéséhez tartozó funkciókat, felismeri az azokat megvalósító tulajdonságokat és értékeket, és érti azok működését. Fontosabb azonosítók: form, action, method, get, post, enctype, text/plain, multipart/form-data, application/x-www-form-urlencoded, autocomplete, on, off, novalidate, target, _self, _blank, _parent, _top.
  • Tudja, hogy milyen űrlapmezőtípusok és azoknak milyen tulajdonságai vannak, felismeri az azokat megvalósító parancsokat. Fontosabb azonosítók: input, name, size, maxlength, value, min, max, step, placeholder, autofocus, required, pattern, autocomplete, on, off, form, readOnly, disabled, type, hidden, text, search, password, number, range, tel, url, email, multiple, color, datetime, datetime-local, date, month, time, week, file, textarea, name, rows, cols, radio, checkbox, select, size, selected, reset, submit, image, button.
  • Érti a címke-elemek (elemfeliratok) használatának célját és megvalósítását. Fontosabb azonosítók: label, for.
  • Megnevezi az űrlapmezők csoportosításához használható parancsokat. Fontosabb azonosítók: fieldset, legend.
  • Leírja a képek beágyazására szolgáló parancsot, annak paramétereit, és azok célját. Fontosabb azonosítók: img, src, width, height, alt, longdesc, usemap, ismap.
  • Leírja a szövegek nyelvének, karakterkódolásának, illetve speciális karakterek megadásának módját. Fontosabb azonosítók, jelölések: lang, meta charset, &#kód, &#név.
  • Felsorolja a szövegek tagolásának lehetőségeit és parancsait. Fontosabb azonosítók, jelölések: p, br, wbr, pre.
  • Leírja a hivatkozások megadásának szintaxisát. Felsorolja a hivatkozások formázásához használt kijelöléseket és azok megvalósítását. Fontosabb azonosítók, jelölések: a, href, #, base, a:link, a:visited, a:hover, a:active.
  • Szövegek formázására vonatkozóan felsorolja a különböző jellegű távolságok megadására szolgáló tulajdonságokat, helyesen értelmezi a white-space tulajdonság értékeit. Fontosabb azonosítók, jelölések: letter-spacing, word-spacing, line-height, white-space.
  • Felsorolja a font-jellemzők megadására szolgáló tulajdonságokat, és helyesen értelmezi azok értékeit. Fontosabb azonosítók, jelölések: font-family, font-size, font-style, oblique, italic, font-weight: bold.
  • Példát mond az átmeneti siketség, vakság, gyengénlátás, színvakság, színtévesztés, mozgáskorlátozottság, értelmi akadályozottság, technikai problémák eseteire. Felsorolja az akadálymentesítés történetének legfontosabb mérföldköveit, elmondja a jelenleg érvényes akadálymentesítésre vonatkozó 2018. évi LXXV. törvény lényegét, a benne foglalt határidőket. Megfogalmazza, hogy miért érdemes akadálymentesíteni. Felsorolja az akadálymentesítésben érintett felhasználói csoportokat és alapvető jellemzőiket. Felsorolja a böngészők akadálymentesség szempontjából mérvadó kiegészítő szolgáltatásait. Felsorolja a WCAG szabvány irányelveit, alapvető előírásait, az egyes HTML objektumok akadálymentesítéséhez szükséges legfontosabb technikákat.
  • Felsorolja a látogatók csoportosításának, gyűjtésének, megtartásának legfontosabb szempontjait és eszközeit. Felsorolja a platformfüggetlen megjelenítés legfontosabb technikáit. Leírja, hogy mik a legfontosabb teendők annak érdekében, hogy a tartalom minden körülmények között elfogadható sebességgel letöltődjön. Leírja a linkek formázásával kapcsolatos legfontosabb elvárásokat.
• Közepes (3) szint
  • Rendelkezik az elégséges (2) szint kompetenciáival.
  • Érti a dokumentumfa felépítési logikáját és kapcsolatát a HTML megvalósítással. Elkészíti a dokumentumfa alapján a HTML kódot, illetve a HTML kódhoz tartozó dokumentumfát.
  • Ismeri a CSS hozzárendelési feltételek (médiakérések) megadásának módját, azokat céljuknak megfelelően adja meg. Fontosabb azonosítók, jelölések: @media, not, only, print, screen, speech, all, min-width, max-width, min-height, max-height, orientation, portrait, landscape, min-resolution, max-resolution.
  • Ismeri a háttér ismétlésének, pozícionálásának, rögzítésének, átméretezésének, szélek levágásának elvi megadási lehetőségeit, felismeri az ezeket megvalósító parancsokat, érti azok működését. Fontosabb azonosítók, jelölések: background-repeat, no-repeat, repeat, repeat-x, repeat-y, space, round, background-position, left, right, top, bottom, center, background-origin, border-box, padding-box, content-box, background-attachment, scroll, fixed, local, background-size, auto, contain, cover, background-clip, border-box, padding-box, content-box.
  • Ismeri a túlcsordulás és megjelenítés szabályozását, felismeri az ezeket megvalósító parancsokat, érti azok működését. Fontosabb azonosítók, jelölések: overflow, overflow-x, overflow-y, visible, hidden, scroll, auto, display, inline, block, inline-block, run-in, none.
  • Bármilyen weboldalon kiválasztja azokat az objektumokat, melyekre egy tetszőleges kijelölő érvényes, illetve hatékonyan kijelöli azokat az objektumokat, melyeket formázni kell. Fontosabb azonosítók, jelölések: *, :active, :hover, ::selection, , >, +, ~, , , :root, :empty, :only-child, :only-of-type, :first-child, :first-of-type, :nth-child(n), :nth-of-type(n), :nth-last-child(n), :nth-last-of-type(n), :last-child, :last-of-type, :first-letter, :first-line, :before, :after, k[tul], k[tul="ertek"], k[tul*="ertek"], k[tul~="ertek"], k[tul^="ertek"], k[tul$="ertek"], k[tul|="ertek"], :lang(ertek), :not(szelektor).
  • Megnevezi a táblázatok tagolására, az oszlopok csoportosítására, a táblázat formázására használható parancsokat, és érti azok működését. Fontosabb azonosítók, jelölések: caption, thead, tbody, tfoot, colgroup, col, border-collapse, separate, collapse, border-spacing, table-layout, auto, fixed, caption-side, top, bottom, vertical-align, middle.
  • Tudja, hogy hang- és videóállományok beágyazásánál milyen tulajdonságok adhatók meg, felismeri az azokat megvalósító parancsokat. Fontosabb azonosítók, jelölések: audio, video, source, controls, autoplay, loop, muted, preload, mediagroup, width, height, poster, src, type.
  • Felsorolja a legfontosabb oldalszerkezet elemeket, azok parancsait, érti azok célját és használatát. Fontosabb azonosítók, jelölések: main, article, section, figure, figcaption, aside, nav, header, footer, h1 - h6.
  • Tudja, hogy szövegek megadásakor milyen kiemeléseket, szerkesztéseket lehet használni, érti ezek jelentését, és felismeri az ezeket megvalósító parancsokat. Fontosabb azonosítók, jelölések: em, strong, b, mark, i, del, ins.
  • Megadja, hogy egy hivatkozás céloldala hol jelenjen meg. Fontosabb azonosítók, jelölések: target, _parent, _top, _self, _blank.
  • Felsorolja a szövegek igazítására szolgáló tulajdonságokat, helyesen értelmezi azok értékeit. Fontosabb azonosítók, jelölések: text-align, left, right, center, justify, start, end, vertical-align, super, sub, baseline, text-top, top, text-bottom, bottom, middle, text-indent.
  • Webdesign alapjai. Felsorolja a linkekkel együtt, a linkek által mutatott oldalakra vonatkozó, megadandó információkat. Leírja az első oldallal kapcsolatos elvárásokat. Ismeri a tartalommal, az átláthatósággal, és az animációkkal kapcsolatos legfontosabb elvárásokat.
• Jó (4) szint
  • Rendelkezik a közepes (3) szint kompetenciáival.
  • Érti a CSS rangsor működését. A CSS rangsor szabályainak ismeretében meghatározza, hogy adott objektumra vonatkozóan mi lesz az egymást kiegészítő, illetve egymásnak ellentmondó stílusok hatása. Fontosabb azonosítók, jelölések: !important.
  • Ismeri az űrlapok automatikus kiegészítésének működését és annak parancsait. Fontosabb azonosítók, jelölések: datalist, option, value, list, label.
  • Felismeri a kliensoldali képtérképek készítéséhez használható parancsokat, érti azok működését. Fontosabb azonosítók, jelölések: map, name, area, shape, coords, href, rect, poly, circle.
  • Felsorolja a multimédiás feliratokra vonatkozó legfontosabb elvárásokat. Tudja, hogy multimédiás tartalmakhoz milyen jellegű feliratokat lehet megadni, ismeri a csatolást végző parancsot, helyesen értelmezi a feliratok jellegének megadására szolgáló tulajdonságokat. Fontosabb azonosítók, jelölések: track, default, kind, captions, descriptions, subtitles, chapters, metadata, src, srclang, label.
  • Webdesign alapjai. Leírja a linkek osztályozását. Felsorolja a navigációs modelleket. Definiálja és érti a szélesség és mélység fogalmakat. Ismeri a hozzáférés könnyűségéve kapcsolatosan megválaszolandó kérdéseket, a választási lehetőségek ajánlott határait.
• Jeles (5) szint
  • Rendelkezik a jó (4) szint kompetenciáival.
  • Ismeri a szegélykép megadási lehetőségeit, felismeri az ezeket megvalósító parancsokat, érti azok működését. Fontosabb azonosítók, jelölések: border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat.
  • Űrlapok. Tudja, hogy milyen speciális álosztályokat használhat adott tulajdonsággal rendelkező mezők kijelölésére, felismeri az azokat megvalósító parancsokat. Fontosabb azonosítók, jelölések: :required, :optional, :valid, :invalid, :in-range, :out-of-range, :focus, :checked, :enabled, :disabled, :read-only, :read-write.
  • Multimédia (képek, hang- és videóállományok) és más tartalmak beágyazása. Felsorolja (nem feltétlen multimédiás) külső tartalmak beágyazásának és beillesztésének parancsait és azok legfontosabb tulajdonságait. Fontosabb azonosítók, jelölések: embed, object, param, type, src, width, height, data, name, value.
  • Tudja, hogy szövegek megadásához milyen szemantikus tartalmakat, funkcionális elemeket lehet használni, érti ezek jelentését, és felismeri az ezeket megvalósító parancsokat. Fontosabb azonosítók, jelölések: cite, blockquote, q, dfn, abbr, small, sub, sup, code, var, time, datetime, s, samp, kbd.
  • Tudja, hogy egy hivatkozás milyen módokon kapcsolódhat annak céljához, felismeri és értelmezi a kapcsolatot leíró tulajdonságot és annak értékeit. Fontosabb azonosítók, jelölések: download, hreflang, type, rel, alternate, author, external, help, license, noreferrer, noopener.
  • Felismeri és helyesen értelmezi a szövegátalakításokat, szövegdekorációt és szövegárnyékot megadó tulajdonságokat és azok értékeit. Fontosabb azonosítók, jelölések: text-transform, uppercase, lowercase, none, capitalize, font-variant: small-caps, text-decoration-line, underline, overline, line-through, text-decoration-style, solid, double, dotted, dashed, wavy, text-decoration-color, text-shadow.

A foglalkozásokon való részvétel követelményei és a távolmaradás pótlásának lehetősége

• Az előadások látogatása nem kötelező, azonban az előadásokon elhangzottakat ismerteknek, az esetleges megállapodásokat elfogadottaknak tekintjük, és a hallgató semmilyen célból nem hivatkozhat arra, hogy hiányzása következtében ezekről nem szerzett tudomást. Igazolás nem szükséges, pótlás nem lehetséges.

A félévközi ellenőrzések (beszámolók, zárthelyik) száma, témaköre és időpontja, pótlásuk és javításuk lehetősége

• Az előadások során félévközi ellenőrzések nem lesznek.

A vizsgára jelentkezés feltétele

• A Web tervezés alapjai laboratóriumi gyakorlat előzetes teljesítése.

A kurzus értékelése

• Írásbeli kollokviumon (esetleges online vizsga esetén szükség szerint szóbeli kiegészítéssel) az elért százalék függvényében az osztályzat a következőképpen kerül megállapításra:
  • 50-64 %: elégséges (2),
  • 65-79 %: közepes (3),
  • 80-89 %: jó (4),
  • 90-100 %: jeles (5).
• A fentieknek megfelelően az elérhető pontszám:
  • 50%-a az elégéséges,
  • 25%-a a közepes,
  • 10%-a a jó,
  • 15%-a a jeles
  szint követelményeiből kerül kiválasztásra.

További tudnivalók

• A számonkéréseken a hallgató köteles személyazonosságát igazolni. Amennyiben a diákigazolványban található fénykép alapján nem azonosítható egyértelműen, úgy köteles más érvényes fényképes igazolvánnyal is azonosítani magát.
• A számonkérések során semmilyen segédlet nem használható.
• Felhívjuk a tisztelt hallgatók figyelmét a következőkre:
  1. Az előadó személyes információkat (pl. pontszámot) csak a hallgató http://www.stud.u-szeged.hu/ címen található egyetemi levelező rendszerbeli saját címéről küldött levelére válaszolva, vagy CooSpace üzenetben ad ki.
  2. Levélre, üzenetre az előadó csak akkor válaszol, hogyha az tartalmazza a hallgató nevét, Neptun kódját, pontos szakját (azt is, hogy nappalis vagy levelezős), és a tárgy pontos nevét, amivel kapcsolatban a hallgató megkeresi. Ezen információk hiányában a levél/üzenet válasz nélkül törlésre kerül!