Mit csinál egy webfejlesztő?

A webfejlesztő feladata

A webfejlesztő az a szakember, aki egy webdesign-ból egy működőképes weboldal készít. Mindezt különböző programozási nyelvek segítségével, „kódolással” teszi. A webfejlesztő felelőssége, hogy az általa készített kód gyors, hibátlan, reszponzív és böngésző kompatibilis weboldalt eredményezzen.

A webfejlesztés széleskörű tevékenységet jelent, az egyszerű statikus weboldalak elkészítésétől egészen a komplex web alapú alkalmazások és webáruházak fejlesztéséig. 

Bár a "webfejlesztés" egy szakmát takar, az ezzel foglalkozó cégek összetett szolgáltatásokat nyújtanak a specifikáció készítéstől a grafikai tervezésen és programozáson túl egészen az üzemeltetésig.

Webdesigner vagy webfejlesztő? Mi a különbség közöttük?

Ha webfejlesztésről van szó, gyakran felmerülő kérdés, hogy mire is van szükséged? Mi a különbség a webdesign és a webfejlesztés között? A kettő különbözik? Nem ugyanarról beszélünk?

A válasz határozottan NEM, a webdesign és a webfejlesztés nem ugyanaz, bár tény, hogy a legtöbben ugyanazt a folyamatot, nevezetesen egy weboldal elkészítését értik alatta.

Webdesigner

A webdesigner az a személy, aki a weboldal megjelenésének megtervezéséért felelős. Ő az, aki megrajzolja a weboldal kinézetét „design-ját”. Ő dönti el, hogy milyen színeket, betűtípusokat, formákat, elrendezéseket alkalmaz. Az ő felelőssége, hogy a cég webes megjelenése összhangban legyen az arculatával. 

A webdesigner olyan rajzprogramokkal dolgozik, mint az Adobe Photoshop vagy Adobe XD, ugyanakkor nem vesz részt a programozási feladatokban.

Mihez ért a webdesigner?

• Grafikai szoftverek használata
• Tipográfia, betűtípusok
• Színhasználat, színelmélet
• Képszerkesztés, kompozíció
• Felhasználói élmény alapú tervezés

Webfejlesztő

A webfejlesztő a webdesigner-től kapott grafikai tervekből kódolással egy működőképest weboldalt hoz létre. A webfejlesztő nem vesz részt a weboldal design-jának kialakításában, ugyanakkor tanácsokkal láthatja el a webdesignert, hogy mik azok a webes sztenderd-ek, amelyeket be kell tartani a tervezés során.

Ha webdesigner szeretnél lenni, akkor nem szükséges, hogy programozói tudással rendelkezz, de némi rálátással kell bírnod például a reszponzívitással kapcsolatos tudnivalókra, hogy olyan weboldalakat tervezz, amelyek megállják a helyüket a weben. A webfejlesztőnek pedig nem kell értenie a Photoshophoz valamint a rajzoláshoz, színskálákhoz és a tipográfiához.

A webfejlesztők típusai

A „Mit csinál egy webfejlesztő?” kérdésre nem egyszerű válaszolni. Ugyanis ahogy korábban is írtam, többféle webfejlesztő létezik és mindegyikük a weboldal készítés egy meghatározott területére fókuszál.

A webfejlesztőket három nagy csoportra osztjuk: 

1. frontend fejlesztők
2. backend fejlesztők
3. full stack fejlesztők

A frontend fejlesztő felel a weboldal azon részeiért, amelyet az emberek a böngészőn keresztül látnak. A backend fejlesztő felelős a színfalak mögötti kódért, amely adatbázisokkal támogatott dinamikus weboldalak létrehozását teszi lehetővé. A full stack fejlesztők pedig mindkét területet lefedik: a frontend-et és a backend-et is.

Frontend fejlesztő

A frontend fejlesztő az a személy, aki megkapja a weboldal grafikai tervét és megírja azt a kódot, ami a weben történő megjelenítéséhez kell. A frontend fejlesztő magas szinten ért a HTML-hez, CSS-hez és a JavaScript-hez.

A HTML teszi lehetővé a tartalom hozzáadását a weboldalhoz, miközben az oldalt fejlécre, tartami részre és láblécre osztja. A CSS definiálja az oldal szerkezetet valamint a stílust, pl. színek, formák, méretek, szegélyek. A JavaScript pedig az oldal interaktivitását adja, pl. a nyomógombok, űrlapok működését.

A frontend fejlesztő munkájához tartozik tehát …

• a weboldal a grafikai tervben definiáltaknak megjelelő (pixel pontos) leprogramozása.
• a weboldal reszponzív (eszközfüggetlen) működésének a kialakítása és ellenőrzése. A mai modern weboldalaktól alapvető elvárás, hogy minden eszközön, mobilon, tableten és asztali gépen is tökéletesen működjenek.
• a weboldal linkjeinek, nyomógombjainak és navigációjának a leprogramozása. A kimenő linkek működjenek, a menüstruktúra könnyen kezelhető és logikus felépítésű legyen.
• a weboldal az összes népszerű böngésző programban történő tesztelése és hibátlan működésének ellenőrzése.

Backend fejlesztő

Noha úgy tűnik, hogy a frontend fejlesztőnek nehéz feladata van annak biztosításában, hogy a weboldal a design-al azonos megjelenésű legyen, ráadásul hibátlanul működjön minden eszközön és böngészőben, a backend fejlesztők dolga még ennél is összetettebb.

Míg a frontend fejlesztők a kliens oldali programozással foglalkoznak, a backend fejlesztő a szerver oldali kódolásért felelős.

Ez azt jelenti, hogy olyan kódot és programot kell írniuk, amely lehetővé teszi az adatbázissal támogatott dinamikus weboldalak futtatását a webszerveren. A backend fejlesztő felelőssége, hogy az általa megírt kód jól strukturált, tiszta, hatékony és biztonságos legyen. A hatékonyság az utóbbi években kiemelt szempont lett, hiszen a weboldalak keresőoptimalizálásában (SEO) kiemelt szerepet játszik a betöltődés sebessége. Ez pedig nagy kihívások elé állítja a backend fejlesztőket.

A backend fejlesztők munkájuk során számos szerver oldali programozási nyelvet használnak. A legnépszerűbb programozási nyelvek közé tartozik a PHP, a Python, a Java és a Ruby. Emellett az SQL az egyik legnépszerűbb nyelv az adatbázisok kezeléséhez.

Mivel a különböző típusú weboldalaknak eltérő igényeik vannak, ezért a backend fejlesztő felelőssége, hogy az adott feladathoz legalkalmasabb technológiát és programozási nyelvet válassza ki. Ehhez megfelelő rálátással kell lenni a népszerűbb technológiák előnyeire, hátrányaira többek között a sebesség, skálázhatóság, biztonság és üzemeltethetőség tekintetében.

Full stack fejlesztő

Ha gyors választ keresel arra a kérdésre, hogy „Mi az a webfejlesztő?”, akkor valószínűleg a full stack fejlesztő lesz a legközelebbi megoldás. A full stack fejlesztő rálátással van a frontend és a backend folyamatokra és technológiákra egyaránt.

A kisebb, egyszerűbb weboldalak esetében, mikor kis költségvetés áll rendelkezésre, általában full stack fejlesztőt alkalmaznak. Ő az, aki el tudja látni a frontend és a backend feladatokat, így további szakemberek bevonása nélkül kivitelezhető a teljes weboldal elkészítése.

A full stack fejlesztői technikák elsajátítása hatalmas előnyökkel jár. Többek között …

• alkalmas leszel egy személyben egy teljes weboldal lefejlesztésére.
• képes leszel megérteni a frontend és a backend területeket, így mindkettőben helyt tudsz állni, az adott projekt igényeitől függően.
• a full stack fejlesztők általában többet keresnek és képzettségüknél fogva több területen is meg tudják állni a helyüket.
• a full stack fejlesztők a munkaerő piacon népszerűbbek, mint a frontend-es vagy backend-es pozíciók.

Annak ellenére, hogy a legtöbb programozó frontend vagy backend területen kezd, számtalan előnnyel jár, ha mindkettőhöz értesz. Full stack fejlesztőként könnyebben találsz állást és jobban rálátsz a teljes webfejlesztési spektrumra, így saját vállalkozást indítva is könnyebb helyzetben leszel.

Milyen programozási nyelveket használnak a webfejlesztők?

A webfejlesztéshez számos különféle technológiát és programozási nyelvet használunk. Ahogy korábban jeleztem, a frontend és a backend fejlesztők különböző nyelveket használnak, míg a full stack fejlesztőknek rálátásuk van az összesre.

Az alábbiakban sorra venném a legfontosabb technológiákat és nyelveket, amelyeket a webfejlesztéshez használunk, és leírom mire használjuk és hogyan lehet elsajátítani őket.

HTML

A HTML egy nélkülözhetetlen nyelv, ha frontend fejlesztő szeretnél lenni. Ha a böngésződben jobb egérgombbal kattintasz és kiválasztod a „Forrás megtekintése” menüpontot, akkor azt a nagy részben HTML kódot fogod látni, ami az adott weboldal megjelenítéséért felelős.

A HTML segítségével lehet megadni egy weboldalnak, hogy milyen tartalmat jelenítsen meg és bizonyos mértékben azt is, hogy hogyan jelenítse meg.

Egy weboldal HTML kódja a „DOCTYPE html” sorral kezdődik, ami azt jelzi a böngészőnek, hogy ez egy HTML dokumentum.

Ha egy picit lejjebb görgetsz a HTML forráskódban, akkor megtalálod azokat a részeket, amelyek egy bekezdés, egy link, egy kép vagy egy videó megjelenítéséért felelősek. Ezek azok a parancsok, amelyek megmondják a böngészőnek, hogy milyen forrásból, milyen tartalmat és hogyan jelenítsen meg.

A HTML egy könnyen elsajátítható nyelv és általában a legelső, amivel a webfejlesztők találkozni szoktak. Ha érdekel a HTML nyelv elsajátítása, akkor a weben számtalan online tanfolyamot, tutorialt, videót találsz róla.

CSS

A CSS a második legfontosabb nyelv a HTML után, amelyet egy frontend fejlesztőnek magas szinten ismernie kell. A CSS kódot a HTML-el együtt használjuk. Míg a HTML megmondja a weboldalnak, hogy milyen tartalmat jelenítsen meg, a CSS a tartalom megjelenítésének módját, stílusát írja le.

Ha elsajátítottad a CSS-t, az alábbi dolgokat leszel képes megtenni vele:

• Színek változtatása. A CSS lehetővé teszi, hogy a weboldalon szinte bármilyen tartalom színét megváltoztasd. Legyenek ezek pl. szövegek, formák, vonalak, alakzatok … stb.
• Betűtípus változtatása. A CSS lehetővé teszi, hogy a weboldal szövegeinek egyedi stílust adj. Ez nem csak a betűtípust, de a sormagasságot, igazítást, betűméretet és még számos egyéb paramétert jelenti.
• Elemek pozícionálása. A CSS segítségével a webfejlesztő képes lesz a tartalmat elrendezni a weboldalon. A HTML segítségével szöveget, képeket, videókat adhat az oldalhoz, a CSS pedig „megmondja” a böngészőnek, hogy ezek a tartalmak pontosan hol, milyen elrendezésben jelenjenek meg. A CSS felel nem csak az elrendezésért, de például az elemek közötti távolságok, külső és belső margók meghatározásában is.

Jól látható, hogy a CSS kulcsfontosságú szerepet játszik a webfejlesztésben, ezen belül is kiemelten a frontend fejlesztésben. Ha el szeretnéd sajátítani a CSS-t, akkor számos online tanfolyam, Youtube csatorna és szöveges oktató anyag érhető el a weben.

JavaScript

A JavaScript is a frontend fejlesztők eszközei közé tartozik. A JavaScript segítségével olyan kisebb script-eket (kód részleteket) lehet létrehozni, amely a weboldal reszponzív működésében, interaktivitásában, animálásában játszanak szerepet.

Ezek a kisebb JavaScript kódrészletek, script-ek általában a weboldal HTML kódjába vannak beágyazva és az oldal betöltődésével lépnek működésbe.

Annak ellenére, hogy a JavaScript egy hagyományos frontend nyelv, a backend fejlesztésben is egyre népszerűbbé válik. Sok frontend fejlesztő a JavaScript tudásának köszönheti, hogy el tud mozdulni a full stack irányba, ahol képes lesz a backend programozási területet is elsajátítani.

PHP

A PHP a webfejlesztők körében az egyik legelterjedtebb, legnépszerűbb programozás nyelvnek számít. PHP nyelvet használ a weboldalak több mint 80%-a. Annak ellenére, hogy népszerűsége az utóbbi években kicsit csökkent, még mindig megkerülhetetlen ha webfejlesztésről van szó.

A PHP elsajátítása könnyű, használata viszonylag egyszerű, ezért sok kezdő backend fejlesztő ezzel a nyelvvel kezdi az ismerkedést. A PHP különösen a nyílt forráskódú WordPress, Joomla és Drupal weboldalak esetében igen népszerű, ezért a hozzáértő szakemberek mindig keresettek lesznek.

Java

Listám utolsó eleme a Java, amelynek sok éve hatalmas szerepe van a webfejlesztésben. A Java nem fiatal nyelv, ennek ellenére a webfejlesztés számtalan területén használatos. A Java segítségével gyors, reszponzív, skálázható web alkalmazások készíthetők nagy terheltségű, összetett webes feladatok kiszolgálására.

A Java sok backend fejlesztő számára alapnyelv. Viszonylag egyszerű elsajátítani, ami kezdőknek különösen előnyös. Rendkívül jól skálázható, ami olyan nagyméretű, nagy látogatottságú weboldalak fejlesztésére is lehetővé teszi, mint pl. az eBay vagy az Amazon.

A Java tanulásához is számtalan online tanfolyam érhető el a weben, de hagyományos tantermi képzések közül is válogathatsz.

A 20 leggyakoribb webfejlesztő hiba

Az alábbi listába összeszedtem azokat a leggyakoribb hibákat, amelyeket a laikus webfejlesztők vétenek és ezzel nem csak a teljes projekt sikerét kockáztatják, de a cég ügyfeleket és bevételt is veszít miattuk.

1. Nem készül konkurencia elemzés, nem tudni, hogy a konkureseknek milyen erősségeik, gyengeségeik vannak.
2. A webfejlesztő cég nem ad tanácsot az oldal megjelenésére, funkcionalitásra vonatkozóan.
3. Nem készül specifikáció. Nincs írásba foglalva, hogy a projekt pontosan milyen feladatokat foglal magában. 
4. Nincsenek pontos marketing célok kitűzve. A weboldal nem illeszkedik a cég marketing stratégiájába, nincsenek pontos céljai, feladata, „csak úgy van.” 
5. Nem készül tételes árajánlat, a megrendelő nincs tisztában azzal mi foglaltatik a feladatban és mi nem.
6. Nem készül szerződés, nincsenek határidők, mérföldkövek kitűzve.
7. Tucat sablon választásából adódó összefüggéstelen grafikai megjelenés.
8. Rosszul megtervezett, kaotikus, nehezen használható navigáció.
9. A weboldalba beillesztett szöveges és képi tartalom pontatlan, nem konzekvens.
10. Nem megfelelő tartalomkezelő rendszer választás.
11. A weboldal kódolása (forráskódja) kusza, nehezen kiismerhető.
12. A weboldal képi anyagai rossz minőségűek, rosszul vágottak, nem kapcsolódnak a témához.
13. Hiányzó (vagy hibás) cselekvésre ösztönző gombok (Call-to-Action).
14. Hibás reszponzív működés.
15. Hiányos fordítások az oldalon. 
16. Cross-browser tesztelés hiánya. A weboldal hibásan teljesít egyes böngészőkben.
17. Lassú betöltődés.
18. Hiányzó élesítés utáni műveletek. Az URL átirányítások hiánya miatt visszaesik az oldal a keresőkben.
19. Analitikai szoftverek bekötésének hiánya.
20. Nincs utánkövetés, nincs karbantartás.

Az itt felsorolt webfejleszői hibákat bővebben is kifejtettem ebben a cikkben, érdemes elolvasni!