[itk] Számítástechnika kezdőknek

Gyakorlatias webfejlesztés 2. - CSS

[2024. március 03.] [ christo161 ]

Ebben a tananyagrészben a CSS-ről lesz szó, amivel a html tageket, illetve azok tartalmát tudjuk formázni. Például CSS-ben oldjuk meg a szövegek, linkek, képek, listák, táblázatok, űrlapok formázását, az oldal részekre bontását (pl. fejléc, tartalom, lábléc), a reszponzív (mobiltelefon, tablet, asztali számítógép esetén különböző) megjelenést.

Amelyik példakódban van <html></html> nyitó- és záró tag, azt lementhetjük egy html fájlba (pl. something.html), és egy fájlkezelőben dupla kattintással megnyithatjuk a böngészőben, és megnézhetjük hogy néz ki a kód eredménye.
Illetve ha bemásoljuk erre az oldalra: https://codepen.io/pen a html részhez, akkor is megnézhetjük hogy néz ki a kód eredménye.

A gyakorlatban jobb, ha a CSS kódot külön fájlba mentjük, itt ebben a tananyagrészben meg is nézzük, hogy ezt hogyan kell megoldani, de a tananyag példakódjainak egyszerűsítése érdekében a html kódba ágyazzuk be a CSS kódot is.

Ebben a tananyagrészben a CSS formázás működését mutatjuk be, és nem a szép designon lesz a hangsúly.

Teljes bejegyzés megnyitása

Gyakorlatias webfejlesztés 1. - HTML

[2024. február 23.] [ christo161 ]

Ebben a tananyagrészben a HTML-ről lesz szó, ami önmagában (CSS nélkül) jellemzően fekete szöveg fehér háttérrel (kivétel például a képek). Bár a HTML-ben is vannak lehetőségek a formázásra, a webfejlesztésben manapság az a bevett szokás, hogy formázást szinte csak CSS-ben oldunk meg (a kód jobb szervezettsége, és a jobb kereshetőség miatt), talán néhány kivétellel (pl. a <sup></sup>, illetve a <sub></sub> tagek).

Az ebben a tananyagrészben felsorolt, úgynevezett HTML tageket érdemes megtanulni, mert nincs belőlük olyan nagyon sok.

Ebben a tananyagrészben ha olyan példát látunk, aminek a kódjában szerepel nyitó <html> tag, illetve záró </html> tag, akkor azt a kódot lementhetjük egy html fájlba (pl. something.html) és ha duplán rákattintunk a fájlra a fájlkezelőben, akkor megnyithatjuk a böngészőben és megnézhetjük, hogy néz ki a kód eredménye.
Vagy esetleg ha bemásoljuk erre az oldalra: codepen.io/pen a html részhez, akkor szintén megnézhetjük hogy néz ki a kód eredménye.

Teljes bejegyzés megnyitása

Gyakorlatias webfejlesztés 0. - alapvető tudnivalók

[2024. február 20.] [ christo161 ]

Ebben a tananyagban nem lesz szó WYSIWYG (what you see is what you get) honlapszerkesztésről, vagyis a honlapszerkesztés olyan módjáról, ahol manapság jellemzően valamilyen honlapon (régebben pedig valamilyen programban) hozhatjuk létre és állíthatjuk be a honlap tartalmát (ilyesmi megoldások például: Wordpress, Joomla, Drupal, wix.com, gportal).
Ebben a tananyagban plain text (formázást nem tartalmazó) fájlokba (mint például a txt fájlok) fogunk kódot írni például html, css, javascript, php nyelven, és a böngésző ebből a kódból fogja megjeleníteni a honlapunkat.
Ennek például az az előnye, hogyha így készítünk el egy honlapot, akkor a mi kezünkben van a honlap teljes tartalmának és szerkezetének a létrehozása, beállítása.

Ebben a tananyagban a webfejlesztésben alkalmazott gyakorlati megoldásokról lesz szó. Lesz azért benne elmélet is, de a tananyag nem ilyesmikre lesz kiélezve, hogy mit jelent egy változó, tömb, objektum, elágazás, ciklus, függvény, hanem inkább olyasmikre, hogy hogyan valósítsunk meg egy slidert, sticky headert, satöbbi.

Habár sok webfejlesztésről szóló tananyag van, azért döntöttem úgy, hogy én is írok egyet, mert nem egészen értek egyet más tananyagok felépítésével.

Talán majd a tananyag Javascripres része előtt érdemes lehet megnézegetni az itt linkelt tananyagnak a Javascript példáit, mert abban a tananyagban inkább az elméletről van szó, és azzal is érdemes tisztában lenni:

Teljes bejegyzés megnyitása

Programozás kezdőknek - fogalmak, definíciók

[2024. február 18.] [ christo161 ]

Ebben a tananyagban programozással kapcsolatos fogalmak, definíciók szerepelnek viszonylag tömören, többnyire példák nélkül. Ha valaki soha nem látott programkódokat, példaprogramokat, annak a számára ezeket a fogalmakat, definíciókat jó eséllyel nehéz lesz megérteni, de akinek már van némi fogalma a programozásról, annak talán jól jöhet egy ilyen fogalomtár.
Például nem biztos, hogy valaki tudja, hogy a default konstruktor a 0 paraméteres konstruktor, vagy az a konstruktor, ami automatikusan létrejön, ha nem definiálunk konstruktort.
Ez a fogalomtár esetleg vizsgák, zh-k elméleti kérdéseket tartalmazó részéhez is jól jöhet.

Sajnos a fogalmakat nehéz egymásra épülően leírni, mivel a programozásban jellemzően egy hamarabb tárgyalt fogalom összefügghet egy később tárgyalt fogalommal. Például az utasítás vagy kifejezés két legalapabb fogalom a programozásban, de amíg nem vettük a logikai típusokat, addig nem biztos, hogy érthető lesz valaki számára, hogy egy logikai kifejezés mit jelent.

Az itt leírt fogalmak imperatív programozási nyelvekre (pl. nem funkcionális programozási nyelvekre) vonatkoznak. A legtöbb ember, aki programozásra adja a fejét, imperatív programozási nyelvekkel találkozik először.
Ilyen nyelvek pl. C, C++, C#, Java, Basic, Pascal, Ada, Javascript, Python, Perl.
Nem ilyen nyelvek pl. Haskell, Clean, O'Caml, F#.

Vannak olyan tananyagaim, amikben példákon keresztül magyarázom el a programozás alapvető fogalmait, például:

Teljes bejegyzés megnyitása

Programozási alapfogalmak, alapvető kérdések, C++, Javascript példák

[2024. február 12.] [ christo161 ]

Ez egy alapozó, gyorstalpaló tananyag azoknak, aki még soha nem programoztak, és el szeretnék kezdeni. A tananyagban alapvető programozási fogalmakról lesz szó (változó, tömb, osztály/objektum, elágazás, ciklus, függvény), illetve a gyakran feltett kérdésekről is leírom a véleményem (kell-e matek vagy erős számítógép a programozáshoz, milyen programozási nyelvvel érdemes kezdeni), bár bevallom őszintén, ezekről a gyakori kérdésekről azért nem szeretek írni, mert rengeteget lehet rajtuk vitatkozni, és talán nem is lehet rájuk objektív, precíz választ adni, illetve ha valaki ilyen kérdéseket tesz fel valamilyen fórumon vagy facebook csoportban, akkor jellemzően teljesen ellentétes válaszokat kap.

Ebben a tananyagban lesznek példák is, C++ és Javascript nyelven, de a példákban nem oldunk meg minden problémát (pl. ha mondjuk bekérünk egy szám értéket a felhasználótól, de nem számot ad meg, hanem egyéb karaktereket).
A C++ és Javascript nyelv viszonylag hasonlít sok más népszerű programozási nyelvre. A Javascript kódot HTML kódba ágyazzuk be.
A HTML nyelv elemeit, szabályait ebben a tananyagban nem vesszük át nagyon a részletekbe menően, szinte csak annyi HTML-t írunk, hogy a benne lévő Javascript kód működni tudjon.

Ebben a tananyagban nem lesz szó a programozási nyelvek apró sajátosságairól. 

Ajánlom továbbá egy nagyjából elkészült tananyagomat, ami a programozási fogalmak viszonylag részletes megismerését célozza meg (illetve a C++ programnyelv alapvető megismerését):

Tervezek készíteni egy webfejlesztés tananyagot is, ami arra koncentrál, hogy legfőbbképpen csak olyan tudnivalókat tartalmazzon, amik konkrétan egy honlap (legyen az statikus vagy dinamikus) elkészítéséhez szükségesek:

Teljes bejegyzés megnyitása

Linux terminál parancsok kezdőknek

[2022. május 03.] [ christo161 ]

Ebben a tananyagban linuxos parancsokról lesz szó. Az itt felsoroltak közül sok parancs működik a különböző Linux disztribúciókon, vagy akár Unix alapú rendszereken (pl. OS X, MacOS, BSD, Solaris, satöbbi), viszont egyes parancsok csak  Debian/Ubuntu alapú Linux disztribúciókon működnek.
Ebben a tananyagban nem lesz szó programok telepítésről. Arról egy másik tananyag szól: programok telepítése Linuxon.

Teljes bejegyzés megnyitása

C++ programozás kezdőknek - templatek

[2022. március 31.] [ christo161 ]

Ebben a tananyagrészben a template osztályokról lesz szó. A template a C++ nyelv terminológiájában típusparaméterezést jelent, vagyis azt oldja meg, hogy ne kelljen egy adatszerkezetből külön létrehozni olyat, amiben inteket tárolunk, illetve olyat, amiben doubleket tárolunk... satöbbi, hanem a példányosításkor eldönthető, hogy az adott adatszerkezetet milyen típussal (ez nem csak alaptípus lehet) használjuk.

Teljes bejegyzés megnyitása

C++ programozás kezdőknek - függvények

[2022. január 06.] [ christo161 ]

Ebben a tananyagrészben arról lesz szó, hogyan tudunk egy bizonyos kódrészletet a program forráskódjának különböző pontjain végrehajtani, anélkül, hogy ismételten leírnánk. Ezt függvények segítségével oldhatjuk meg.
Bár a függvényeknek nem csak akkor van értelme, ha többször használjuk őket. A kód részfeladatokra bontását is ellátják, ami akkor is átláthatóbbá teszi a kódot, ha van olyan részfeladat, amit csak egyszer hajtunk végre a kódban.
Fontos, hogy egy függvény csak egy feladatot hajtson végre (pl. egy tömb kiíratása vagy számok átlagának kiszámítása), egy függvényen belül ne helyezzünk el több feladatot is végrehajtó utasításokat.

itk_cpp_function_definition.png

Teljes bejegyzés megnyitása

C++ programozás kezdőknek - do-while ciklus, input ellenőrzés

[2021. október 04.] [ christo161 ]

Ebben a tananyagrészben a do-while ciklus alkalmazásairól lesz szó, illetve arról, hogy hogyan kezelhetjük az olyan eseteket, amikor például egy számot kérünk be a felhasználótól, de a felhasználó nem számot ad meg.

Figyelem: ezek a példakódok online fordítókkal (pl. wandbox, rextester) nem próbálhatók ki megfelelően.

Teljes bejegyzés megnyitása

C++ programozás kezdőknek - alapvető típuskonverziók

[2021. június 24.] [ christo161 ]

Az előző tananyagrészekben már volt arról szó, hogy a C++ nyelvben egy változó létrehozásakor meg kell adni, hogy mi legyen a változó típusa, és amíg egy változó létezik, nem változtatható meg a típusa, vagyis ugyanaz marad, amit a létrehozásakor megadtunk.
C++ nyelvben esetleg csak arra van lehetőség, hogy egy adott típusú változó értékét egy nagyjából hasonló típusú változónak adjuk értékül. Az sem biztos, hogy ez egy megszokott értékadással elvégezhető, például szám stringgé, vagy string számmá alakítása C++ nyelvben csak segédfüggvényekkel végezhető el (pl. a Javascript vagy PHP nyelvekben ilyesmire nincs szükség), ezzel szemben például egy valós szám típusú változó értéke értékül adható egy egész szám típusú változónak egy egyszerű értékadással, segédfüggvények használata nélkül.
Ebben a tananyagrészben főként az alaptípusok közötti konverziókról lesz szó, kivéve a logikai (bool típusú) konverziókat, mert azt a logikai változók tananyagrészben tárgyaljuk.
Ebben a tananyagrészben nem lesz szó string-szám, szám-string konverziókról, dynamic_cast-ról, polimorfizmusról, const_castról, reinterpret_cast-ról.

Teljes bejegyzés megnyitása

C++ programozás kezdőknek - változók elnevezése

[2021. június 17.] [ christo161 ]

Az előző tananyagrészben arról már volt szó, hogy milyen szabályokat kell betartani egy változó elnevezése esetén (amik egyébként más dolgok, pl tömbök, függvények, osztályok, objektumok elnevezése esetén is érvényesek). Ebben a tananyagrészben nem az elnevezési szabályokról lesz szó, hanem arról, hogy (egyesek szerint) hogyan érdemes és hogyan nem érdemes elnevezni a változókat (például milyen szavakat használjunk, azokat hogyan válasszuk el egymástól, satöbbi).

Teljes bejegyzés megnyitása

C++ programozás kezdőknek - várakozás enter billentyű megnyomásáig

[2021. május 03.] [ christo161 ]

Ebben a tananyagrészben arról lesz szó, hogyan tudjuk megoldani, hogy egy parancssoros program ablaka ne záruljon be azonnal, ahogy a program kiírta az utolsó eredményt/kimenetet, abban az esetben, ha a programot nem fejlesztői környezetből futtatjuk (a fejlesztői környezetekben jellemzően nem jelentkezik ez a probléma).
A szabványos megoldás mellett áttekintünk néhány nem platformfüggetlen megoldást is, amiket akkor lehet esetleg érdemes elolvasni, ha valaki az adott környezettel szeretne részletesebben foglalkozni.

Teljes bejegyzés megnyitása

C++ programozás kezdőknek - alaptípusok jellemzői

[2020. november 22.] [ christo161 ]

Ebben a tananyagrészben az első példaprogramjainkban leggyakrabban használt alaptípusú változók jellemzőiről, és ehhez a témához kapcsolódó tudnivalókról lesz szó.
Az itt leírtakat természetesen nem kell bemagolni, viszont egyrészt érdemes egyszer átolvasni, hogy tisztában legyünk vele, hogy ilyen jellegű hibák is előfordulhatnak a programjainkban, másrészt pedig ha a későbbiek során esetleg szükségünk lenne valamilyen témához kapcsolódó információra, kódrészletre, akkor ez a tananyagrész talán segíthet.

Előző tananyagrész: gyakori műveletek
Következő tananyagrész: alapvető típuskonverziók

Teljes bejegyzés megnyitása
süti beállítások módosítása