Tematika¶

02.05:: Bevezetés: Követelmények, ütemezés ismertetése, oktatásszervezési kérdések megbeszélése. Követelmények, a tárgy teljesítésének feltételi és az érdemjegy megállapításának módja. Határidők, szükséges szoftverek, kötelező és ajánlott olvasmányok áttekintése. A web alapjai, kérés-válasz modell, http és https protokoll működése, http metódusok és státuszkódok, a böngészők fejlesztő és diagnosztikai eszközei. A kérések és válaszok vizsgálata (Google Chrome, Mozilla Firefox, Postman).
02.12:: Bevezetés a Visual Studio Code-ba. A HTML felépítése és alapfogalmai, DOCTYPE definíciók és szabványok, HTML validáció és validátorok használata, HTML oldalak felépítése (csontváz, kötelező elemek), legfontosabb meta elemek, címsorok, bekezdések, előformázott szövegek, szövegformázási lehetőségek. Felsorolások, táblázatok készítése, űrlapok és űrlapelemek készítése, konfigurálása HTML5 alapokon, GET és POST kérés. Az elkészített weboldalak feltöltése egy publikus webszerverre.
02.19:: Link és horgony, kép és multimédia elem beágyazása, HTML5 oldalszekciók, konténerelem. Egyéb HTML elemek és attribútumaik. Gyakorlat.
02.26:: ZH-1. CSS: CSS szerepe a webprogramozásban, szintaktikai szabályok, a nyelv felépítése. A HTML és CSS elemek összekapcsolásának lehetőségei, az egyes lehetőségek előnyei és hátrányai. Szöveg- és színtulajdonságok, háttér és háttérképek tulajdonságai.
03.04:: CSS2 és CSS gyakorlatok. Dobozmodell, kiterjedés, táblázat és listák tulajdonságai, pozicionálás: position és float, flexbox és grid, áttűnések és színátmenetek. és animáció, médiakritériumok, kiegészítő lehetőségek a CSS-ben.
03.11:: Bootstrap. Bootstrap jellemzők, kapcsolása a HTML oldalhoz (letöltés, CDN), a Bootstrap filozófiája, konténerek, a grid rendszer használata és működése, reszponzív nézetek készítésének lehetőségei.Gombok, űrlapok, képek kezelésének lehetőségei a Bootstrap segítségével. Felsorolások, táblázatok a Bootstrapben. Kiegészítő Bootstrap ismertek.
03.18:: JavaScript: JavaScript beágyazás, use strict direktíva, változók, deklarációk (let, const, var), adattípusok (Number, BigInt, String, Boolean, Null, Undefined), alert, prompt, confirm, típus konverziók, típusellenőrzés, operátorok. JavaScript vezérlési szerkezetek: elágazások, hármas operátor, ?? operátor, ciklusok (while, do-while, for), break, continue.
04.29:: JavaScript függvények: alprogramok (eljárások és függvények) definiálása, lokális és outer változók, függvény argumentumok, argumentumok alapértelmezett értékkel, az arguments tömb jelentősége, callback függvények. Függvények és függvénykifejezések készítése, használata. DOM modell felépítése, működése. A HTML és a JavaScript összekapcsolása (események, eseményre való feliratkozás, az egyes események paramétereinek vizsgálata). A DOM tree bejárása és feldolgozása, keresés a DOM-ban, a DOM tartalmának szerkesztése és kezelése, tartalmak dinamikus létrehozása. Fontosabb és gyakran használt DOM események.
05.06:: Tömbök készítése és kezelése JavaScriptben, objektumok készítése literálok segítésével. Objektumok feldolgozása, kezelőfüggvények alkalmazása. Érték és referenciatípus közti különbség, másolás, értékadás jelentősége a különböző altípusok között. Alapvető algoritmusok JavaScriptben, algoritmizálási készség fejlesztése.
Póthét:: ZH-2. Zárás, gyakorlati jegy megszerzése.

A levelezős képzésben sajnos csak 3 jelenléti alkalom áll rendelkezésre, ezért a tananyag egy részét önállóan kell feldolgoznia.

A gyakorlai jegy megszerzésének feltételei

A kurzus egyes témaköreihez kapcsolódóan 3 beadandó feladatot kell adott határidőre elkészíteni és benyújtani. A feladatokra kapott pontszámok átlaga határozza meg az féléves érdemjegyet. A határidőre be nem adott feladatok 0 pontot érnek. Az elégtelen érdemjegyet a szorgalmi időszak végén egy jelenléti alkalommal lehet pótolni, melynek tartalma a félév teljes anyaga. A gyakorlati jegy kiszámítása az alábbi táblázat alapján történik.

Százalék	Jegy
90-100%	Jeles
78-89%	Jó
65-77%	Közepes
50-64%	Elégséges
50% alatt	Elégtelen

A levelezős képzésben egyes konzultációk az alábbi témaköröket ölelik fel:

1. Bevezetés, HTML

Bevezetés: Követelmények, ütemezés ismertetése, oktatásszervezési kérdések, a tárgy teljesítésének feltételei és az érdemjegy megállapításának módja. Határidők, szükséges szoftverek, kötelező és ajánlott olvasmányok áttekintése. A web alapjai, kérés-válasz modell, http és https protokoll működése, http metódusok és státuszkódok, a böngészők fejlesztő és diagnosztikai eszközei. A kérések és válaszok vizsgálata (Google Chrome, Mozilla Firefox, Postman). Bevezetés a Visual Studio Code-ba. A HTML felépítése és alapfogalmai, DOCTYPE definíciók és szabványok, HTML validáció és validátorok használata, HTML oldalak felépítése (csontváz, kötelező elemek), legfontosabb meta elemek, címsorok, bekezdések, előformázott szövegek, szövegformázási lehetőségek. Felsorolások, táblázatok készítése, űrlapok és űrlapelemek készítése, konfigurálása HTML5 alapokon, GET és POST kérés. Link és horgony, kép és multimédia elem beágyazása, HTML5 oldalszekciók, konténerelem. Egyéb HTML elemek és attribútumaik. Az elkészített weboldalak feltöltése egy publikus webszerverre.

2. CSS és Bootstrap

A CSS szerepe a webprogramozásban, szintaktikai szabályok, a nyelv felépítése. A HTML és CSS elemek összekapcsolásának lehetőségei, az egyes lehetőségek előnyei és hátrányai. Szöveg- és színtulajdonságok, háttér és háttérképek tulajdonságai. CSS gyakorlatok. Dobozmodell, kiterjedés, táblázat és listák tulajdonságai, pozicionálás: position és float, flexbox és grid, áttűnések és színátmenetek. és animáció, médiakritériumok, kiegészítő lehetőségek a CSS-ben. Bootstrap. Bootstrap jellemzők, kapcsolása a HTML oldalhoz (letöltés, CDN), a Bootstrap filozófiája, konténerek, a grid rendszer használata és működése, reszponzív nézetek készítésének lehetőségei.Gombok, űrlapok, képek kezelésének lehetőségei a Bootstrap segítségével. Felsorolások, táblázatok a Bootstrapben. Kiegészítő Bootstrap ismeretek.

3. Bevezetés a Javascriptbe

JavaScript. JavaScript beágyazás, use strict direktíva, változók, deklarációk (let, const, var), adattípusok (Number, BigInt, String, Boolean, Null, Undefined), alert, prompt, confirm, típus konverziók, típusellenőrzés, operátorok. JavaScript vezérlési szerkezetek: elágazások, hármas operátor, ?? operátor, ciklusok (while, do-while, for), break, continue. JavaScript függvények: alprogramok (eljárások és függvények) definiálása, lokális és outer változók, függvény argumentumok, argumentumok alapértelmezett értékkel, az arguments tömb jelentősége, callback függvények. Függvények és függvénykifejezések készítése, használata. DOM modell felépítése, működése. A HTML és a JavaScript összekapcsolása (események, eseményre való feliratkozás, az egyes események paramétereinek vizsgálata). A DOM tree bejárása és feldolgozása, keresés a DOM-ban, a DOM tartalmának szerkesztése és kezelése, tartalmak dinamikus létrehozása. Fontosabb és gyakran használt DOM események. Tömbök készítése és kezelése JavaScriptben, objektumok készítése literálok segítésével. Objektumok feldolgozása, kezelőfüggvények alkalmazása. Érték és referenciatípus közti különbség, másolás, értékadás jelentősége a különböző altípusok között. Alapvető algoritmusok JavaScriptben, algoritmizálási készség fejlesztése.

Irodalom

Mark Pilgrim: HTML5 az új szabvány, Kiskapu Kiadó, 2011. (https://people.inf.elte.hu/zirtaai/html_ebooks/HTML5.az.uj.szabvany.2011.eBOOk-AnAhTaR.pdf)
Szabó Bálint: Webprogramozás 1. Eszterházy Károly Főiskola, 2013. (Részletek.) https://mek.oszk.hu/14000/14068/pdf/14068.pdf
Ben Frain: Responsive Web Design with HTML5 and CSS3, Packt Publishing, 2012.
Douglas Crockford: JavaScript: The Good Parts: The Good Parts, O’Reilly Media, 2008.
John Buckett: Web Design with HTML, CSS, JavaScript and JQuery Set, Wiley, 2014.