Web fejlesztés tanfolyam (HTML, CSS, Javascript, JQuery, MYSQL)

Miért webfejlesztés?

Az internet ma már a családok mindennapi életének részévé vált. Az informatikusoknak kötelező a megismerkedés az internetes technológiákkal. Azt hiszi sok diák, hogy ez valami hókuszpókusz, amit nehéz elsajátítani és hónapok, évek kellenek a megtanulásához. Ez természetesen nem igaz, de az igaz, hogy mint sok minden mást, ezt sem nem adják könnyen.

Mire leszek képes, ha az alábbi dolgokat megtanulom?

Ha szórakozásból tanulsz, vagy rendszergazda akarsz lenni

  • Tudsz majd egyszerű statikus és valamennyire bonyolult dinamikus oldalakat készíteni.
  • Képes leszel ízléses vagy kevésbé ízléses web oldalak designját elkészíteni (frontend)
  • Képes leszel feltelepíteni tartalomkezelő rendszereket
  • Képes leszel feltelepített weboldalak karbantartására
  • Képes leszel Webmesterként dolgozni

Milyen internettel kapcsolatos foglalkozások vannak?

Amikor webfejlesztéssel kezdesz foglalkozni érdemes végiggondolni, hogy mit akarsz ezzel a tudással kezdeni és hová akarsz eljutni.

  • Azt már leírtam, hogy a tanulni vágyóknak és a kezdő rendszergazdának elegendő tisztán a technológiákat megtanulni.
  • Webmester. Képes webes alkalmazásokat telepíteni, beállítani, menteni, visszaállítani. Tartalmakat tud felvinni az adott rendszerbe és kisebb módosításokat el tud végezni a felületeken.
  • Webdesigner. Olyan fejlesztő, aki egy weboldal kinézetéért felelős és elsősorban az a feladata, hogy a színek, formák és a webes grafikai trendek világában legyen otthon. Ma már foglalkoznia kell a mobiltelefonokon megjeleníthető webes tartalmakkal is. A HTML-en kívül a színekkel, a színek harmóniájával, képszerkesztéssel és CSS-sel kell foglalkoznia.
  • Front-end fejlesztő. Olyan programozó, aki azzal foglalkozik, hogy az interneten elérhető alkalmazás kellően "kézre álljon", azaz az alkalmazás kinézete logikusan legyen felépítve, a felhasználó a szükséges elemeket megtalálja. A front-end a felhasználói felület programozója. Ismernie kell a szerver oldali technológiákat, a javascript technológiákat, azon belül is az AJAX technológiát, és a CSS-t.
  • Szerver oldali fejlesztő (back-end)  Ismernie kell a szerver oldali technológiákat (pl. PHP, MYSQL, ...), képesnek kell lennie nagy rendszerek megszervezésére és nem árt hogyha a kliens oldalhoz is ért, azaz javascript, AJAX, HTML, CSS.
  • SEO szakember. Mivel a HTML világa nem önmagáért való, ezért a weboldalaknál gyakran nagyon fontos, hogy az oldal látogatottsága nagy legyen, azaz a keresőprogramok megtalálják. Search Engine Optimalization = SEO. Olyan szakember, aki tudja, hogy a kereső programok hogyan adnak egy oldalnak előkelő helyezést. Tisztában kell lennie a HTML, a CSS alapjaival, rendszergazdai képességek kellenek.
  • Webes marketing szakember - A SEO csak egy dolog az internetes reklámozás eszközei közül. A nagy kereső rendszerek képesek relámozni is oldalakat. Azok, akik ilyen témába vágnak bele a szokásos HTML, CSS, SEO témákon kívül kell foglalkozni a nagy reklámfelületek - Google keresők és Facebook, Twitter, stb... közösségi oldalak reklámozásának technológiájával is.

Mi kell ahhoz, hogy webfejlesztésre alkalmas környezetem legyen?

  • Kell egy PC, egy Linux operációs rendszerű gép vagy egy MacIntosh. Lényegében mindegy.
  • Kell egy jó editor, amivel HTML kódot, CSS kódot, javascript kódot, és PHP kódot tudunk írni. Nem baj, ha ingyenes, nem baj, ha fut a gépünkön és az sem baj, hogyha a kód hibáit kijelzi (Visual Studio Code, Zend Studio, NetBeans, PHPStorm, RapidPHPEditor, ... Notepad++)
  • Kell egy olyan program, amivel a MySQL SQL utasításokat tudjuk szerkeszteni (pl. phpMyAdmin, Adminer)
  • Kell egy Apache+Mysql+PHP szerver stack (XAMP, WAMP) vagy hasonló Apache helyett Nginx-szel (WinNMP)
  • Kell egy böngésző a számítógépeden (Google Chrome, Mozilla Firefox)
  • Kell esetleg internet hozzáférés.
  • Kell egy jó adag elszántság

Ezeket a tanfolyamom során mind odaadom és használhatod. A jó adag elszántsággal neked kell rendelkezned!

Mi az, amire a tanfolyam nem ad választ?

Miért kell neked ezt a sok mindent megtanulni? Erre neked kell rájönnöd, mert ha itt vagy és elolvasod a szöveget rájössz, hogy kell-e ez neked.

Rövid mi micsoda a webfejlesztés terén?

Mivel én magam is tudom, hogy egy kezdő tanfolyamon nem lehet a tanuló nyakába zúdítani minden információt, ezért ígérem, hogy minden területről csak annyi információt gyúrok egybe, hogy bárki számára emészthető legyen. Az alábbiakban a megtanulandók sorrendjében elmondok néhány alapfogalmat.

HTML

Ez egy jelölő nyelv (nem programozási nyelv!), amelynek segítségével tartalmakat tudsz megjeleníteni webböngészőben. Olyasmi, mint egy szövegszerkesztővel elkészített anyag, csak éppen a szöveg megjelenésének formáját szabályozni kell. Ezt jelölőkkel (tag-ekkel) oldja meg. Ezt a jelölő nyelvet alkalmazzák internetet használó mobiltelefonos alkalmazások esetén is sokszor. A legutolsó változata a HTML5. A HTML az oldalak tartalmának a leírásáért felelős.

CSS

A CSS nyelv a tartalmak megjelenésének formájáért, a színekért, alakokért, helyekért felelős. A designerek sokat foglalkoznak vele, használják. Az utolsó változata a CSS 3. A CSS statikus nyelv, és ezért gyakran káosz alakul ki egy oldal kialakításakor, ezért létezik olyan megoldás, amikor egy programozási nyelvhez hasonlóan tudunk CSS-t szerkeszteni. Az egyik ilyen rendszer a SASS (Syntactically Awesome Style Sheets). Ez a CSS kiterjesztése, amelyben használhatunk ciklusokat, függvényeket, változókat. Az SCSS fordító pedig CSS fájlokat generál belőle automatikusan. Bővebb leírás itt van.

Az évek során több SASS => CSS fordítót kipróbáltam, de számomra a https://scout-app.io/ oldalon található Scout-App vált be a legjobban. Nem kell telepíteni. Indítás után létrehozunk egy projektet. Ha figyelő üzemmódba állítjuk, akkor a háttérben figyeli a projekt könyvtárait és ha bármi változást észlel pár másodperc múlva szinte azonnal legyártja az új CSS fájlt.

Javascript

Igazi programozási nyelv. Segítségével a böngészőben megjelenő tartalmak megjelenését lehet interaktívvá, mozgalmassá tenni. Az AJAX technológia a Javascripten alapul. Ha a weboldalon egy esemény fut le, például egy linkre kattintunk az egérrel, a Javascript meghív a szerverről egy linket, amit a szerver kiszolgál és tartalmat küld vissza, majd a Javascript kód a megkapott tartalmat beszúrja a weboldalba. Ilyen módon a teljes oldal újra töltése nélkül változhat az oldal tartalma.

JQuery

A javascript fontos, széles körben használt kiegészítése a jQuery, amelynek segítségével az események kezelése, a weboldalak szerkezetének módosítása javascriptből egyszerű. A jQuery teljes dokumentációja itt található meg.

WEBszerver - pl. Apache

Olyan szoftver, amely kiszolgálja az internetről érkező kéréseket. A webszerver futhat egy közönséges PC-n vagy notebookon is és így lehet internetes tartalmakat szerkeszteni. Az egyik legelterjedtebb az Apache, de elterjedt az NGINX és Microsoft Windows szervereken az IIS.

MYSQL - Adatbázis-kezelő szerver

A nagy mennyiségű adatot a weboldalak szinte sohasem fájlokban tárolják, hanem egy adatbázis-kezelőben, például MySQL-ben, amely az egyik legelterjedtebb ingyenes adatbázis-kezelő rendszer. Utolsó változatai: MySQL 5.7. A MySQL is feltehető egy közönséges asztali gépre, vagy notebookra, így az internetes fejlesztésnek ez a része is mehet otthon.

PHP

A webszerveren futó programozási nyelv. A legelterjedtebb a világon és viszonylag egyszerű megtanulni az alapokat. Könnyű elsajátítani az alapokat, de alkalmas arra is, hogy bonyolult rendszereket készítsenek benne. A legutolsó változata (a cikk módosításakor) a PHP 8.2.

WAMP, LAMP, XAMP

Ezzel a betűszóval jelölik a Windows (Linux) + Apache + MySQL + PHP fejlesztésre alkalmas programcsomagot, amit feltelepíthetünk egy gépre. és nem kell törődnünk az egyes komponensek beállításával, mert az alkalmazás telepítése után képesek leszünk futtatni a teljes környezetet.

Egy internetes szerver - kliens rendszer felépítése

Verziókezelő alkalmazások

Olyan programok, amelyek segítségével fejlesztő csoportok képesek egymással együttműködve fejleszteni alkalmazásokat. Az egyik legelterjedtebb a GIT.

Felhasználási területek

CMS - Tartalomkezelő rendszer (Content Management System)

Az internetes tartalomszolgáltatás már régen kinőtt a gyerekkorból és sokan gyors módszereket keresnek arra, hogy az interneten tartalmakat osszanak meg egyszerűen, viszonylag kevés programozással. Ha valaki csak egy ilyen rendszer üzemeltetését akarja végezni, akkor nem feltétlenül van szüksége az össze korábbi tudásra, de a korlátait hamar eléri és rájön, hogy tulajdonképpen minden korábban felsorolt területhez kell valamennyit értenie. A PHP alapú CMS rendszerek közül néhány elterjedt: Drupal 7 / 8 / 9 /10, Wordpress, Joomla.

Melyek a jellemzőik és mikor melyiket érdemes használni?

A Wordpress a világon a legelterjedtebb PHP alapú, ingyenes rendszer. Az ilyen jellegű oldalak majdnem 60%-a Wordpress alapon működik. Ingyenesen letölthető és módosítható, ezért a világon nagyon sokan foglalkoznak vele.

Összehasonlító táblázat
Tulajdonságok Wordpress Drupal Joomla
Könnyű telepítés x x x
Rengeteg smink, (ingyenes) téma 10 000 több száz több száz
Plugin (modul, extensions) 50 000 44 000 8000
Fejlesztői dokumentáció ? nagyon jó ?
Minőségbiztosítás a fejlesztéskor ? x ?
Nagy verzióváltások gyakorisága Évente néhányszor
változik a második
verziószám
2 évente változik a fő verziószám.
A második verziószám
havonta-két havonta nő
Több év telik el a
fő verzió változása
között!
Hibajavító frissítések 5-6 hetente havonta 10-40 nap
Biztonság (törések gyakorisága) 90% 3,7% 4,3%
Kezdők részére ajánlott nem ajánlott ajánlott
Egyszerű weboldal (pl. egyszerű blog) egy felhasználó ajánlott ajánlott ajánlott
Többféle funkció, nem túl sok felhasználó nem ajánlott ajánlott ajánlott
Sokféle funkció, sokféle szolgáltatás, sok felhasználó nem ajánlott ajánlott nem ajánlott

A fenti táblázat alapján tehát az egyszerű, egy felhasználós, ingyenes, viszonylag jól kinéző, az adatok tekintetében nem kritikus, statikus weboldalakra ajánlott a Wordpress. A Joomla akkor ajánlott, ha valaki néhány funkciót, néhány szolgáltatást, néhány felhasználót üzemeltet. A Drupal a több felhasználós, sokféle szolgáltatást nyújtó, biztonságos site-ok tárolására szolgál.

WEB áruházak

Olyan szoftverek, amelyeken keresztül lehet árukat bemutatni, rendelni, kifizetni. Ilyen például a Drupal kiegészítése, vagy az ingyenes Prestashop, illetve Magento. Ha egy keresőben rákeresünk az alábbi szavakra: free, webshop, akkor találunk sok ingyenes rendszert is.

Saját hobbi, céges weboldalak

A hobbi oldalakkal kapcsolatban nincsenek nagy igények, inkább a lehetőségek kipróbálása a cél. A céges weboldalaknál viszont már fontos a megjelenés, a céges design követése és a tartalmak megfelelősége is. Céges weboldalt ma már szinte kizárólag tartalomkezelő (CMS) rendszer segítségével érdemes elkészíteni, mert azokban minden szükséges modul megvan.

Egy jó webes technológiákkal foglalkozó oldal