A webfejlesztés folyamata lépésről lépésre

Egy építkezés projekthez hasonlóan a webfejlesztés is meghatározott lépések egymásutániságából felépülő folyamat, ahol maga a programozás önmagában nem elégséges a siker szempontjából.

Legyen szó egy weboldal vagy webes alkalmazás elkészítéséről, a programozást megelőző és azt követő lépések kulcsfontosságúak a teljes projekt sikere szempontjából. Éppen ezért ebben a cikkünkben megpróbálom összeszedni azokat a lépéseket és jellemzőiket, amelyek általánosságban minden webfejlesztés projektre érvényesek.

Íme a lépések, amelyeket az alábbiakban részletezni fogok:

1. Információ gyűjtés
2. Kutatás és tervezés
3. Design
4. Programozás
5. Tesztelés és élesítés
6. Karbantartás és üzemeltetés

1. Információ gyűjtés: okok, célok és célközönség meghatározása

Sok más projekthez hasonlóan a webfejlesztés első lépése a szükséges információk begyűjtése. A projekt elején tisztázni kell a fejlesztés mögött húzódó okokat, üzleti célokat, a célközönséget és a tulajdonosok elvárásait, valamint jó tisztába lenni a marketing által támasztott elvárásokkal is.

• Mi a webes projekt célja?
• Mi a célközönség? Kiknek készül a digitális termék?
• Milyen tartalommal bírjon a termék?

A weboldal, mint digitális termék célja, célközönsége és a webhelyen található információk alapvetően befolyásolják, hogy milyen technológiára lesz szükség és milyen funkcionalitással bírjon a weboldal a befejezést követően.

Mi a weboldal fejlesztésének a célja? Értékesítés, brand építés, termék- vagy szolgáltatás népszerűsítés, szakértői szerep kiépítése? Egy mosógép értékesítéssel foglalkozó weboldal felépítése, tartalma, funkcionalitása nagymértékben különbözik egy céges weboldalétól, éppen ezért fontos minél több információt begyűjteni ebben az első fázisban.

Az előbb felsorolt információk ahhoz is szükségesek, hogy a webfejlesztők az igények alapján egy specifikációt tudjanak készíteni, amelynek jóváhagyása után egy árajánlat illetve egy szerződés készül, amelyben többek között a fejlesztési mérföldköveket és a határidőt is rögzítik.

A befejezetlen, elhaló projektek mögött sok esetben az húzódik, hogy ebben a szakaszban nem lettek az igények és elvárások pontosítva, írásban rögzítve. Így értelemszerűen a végeredmény is különbözött attól, mint amit a megrendelő elképzelt.

2. Kutatás és tervezés: sitemap és drótváz készítés

A kutatási szakaszban információkat gyűjtünk és összeállítjuk a weboldal tartalmi hierarchiáját és webhely térképét.

A webhely térkép (sitemap) bemutatja a weboldal főbb tartalmi egységeit és azok hierarchiáját. A sitemap tervezése során figyelembe kell venni a könnyű navigációt, a logikailag összetartozó tartalmakat illetve a célcsoport igényeit is. Ideális esetben a látogató minden őt érdeklő tartalmat kevés számú kattintással el tud érni és a navigáció lehetővé teszi, hogy az igényeinek megfelelő sorrendben tudja bejárni a weboldalt. A bonyolultabb szerkezetű oldalak tervezése során olyan technikák segítenek, mint például a card sorting, amely segít megtalálni az ideális csoportosítást a menüpontok között.

A drótváz (wireframe) fekete-fehér rajzban jeleníti meg a weboldal nyitólapjának és főbb menüpontjainak a struktúráját, elrendezését. A fekete-fehér legtöbbször szabadkézi rajz lehetővé teszi, hogy viszonylag gyorsan többfajta variációt is tesztelni lehessen a célközönségen és a módosításokat gyorsan át lehessen vezetni a terven.

A felhasználói élmény alapú tervezés az utóbbi években kezd egyre nagyobb teret nyerni, amely magával hozta azt is, hogy erre több webfejlesztés projeknél látom, hogy a grafikai tervezést megelőzi a drótváz készítés, amely összességében nemcsak felgyorsítja a tervezési folyamatot, de azt is biztosítja, hogy a végső grafikai tervek egy hatékonyság szempontjából optimalizált weboldalt ábrázoljanak.

3. Design

Ebben a szakaszban a grafikusoké a főszerep. A kutatás során nyert adatokat folyamatosan szem előtt tartva a drótvázakból végleges grafikai tervet készítenek.

A grafikai tervezés ennél azért sokkal összetettebb folyamat. Ideális esetben készülnek drótvázak, tehát a website egyes oldalainak szerkezete, elrendezése már jóvá van hagyva, de az arculat, a színek, a betűtípusok, a képek, az illusztrációk, ikonok és egyéb formák kiválasztása most történik meg. Mindezt úgy kell megalkotni, hogy a weboldal a későbbiekben probléma nélkül leprogramozható legyen és a célközönség számára is egy tetszetős, harmonikus végeredmény szülessen.

A grafikai tervezés részét képezi az alkalmazott betűtípusok, ikonok, színek valamint grafikai alapelemek kigyűjtése, amely megkönnyíti a programozó munkáját és biztosítja, hogy a fejlesztés során maradéktalanul betartásra kerüljön az az arculat, amelyet megalkottak.

4. Webfejlesztés programozás része

A design szakaszban elkészült tervek és arculat felhasználásával a programozók egy működőképes weboldalt (webes alkalmazást) alkotnak. Az eddig statikus képként megjelenő design-ból egy kattintható, dinamikus website lesz. A frontend, vagyis a látogató számára böngészőben megjelenő felület mögé egy adminisztrációs felület, illetve ahogy a legtöbb esetben nevezik tartalomkezelő rendszer kerül, amely lehetővé teszi a weboldal tartalmának frissítését, szerkesztését, bővítését.

A webfejlesztő (programozó) feladata az oldal funkcionalitásának kialakítása mellett annak biztosítása, hogy ….

• az oldal minden megjelenítő eszközön tökéletesen működjön, vagyis a reszponzivitás kihívásainak megfeleljen
• az oldal a tartalomkezelő rendszerből frissíthető, módosítható legyen. A leggyakrabban módosításra szoruló részek szerkesztéséhez ne kelljen a webfejlesztő segítségét igénybe venni.
• a weboldal kódolása áttekinthető legyen és szükség esetén más fejlesztő által átvehető, továbbfejleszthető legyen
• a weboldal legnépszerűbb böngészőkben hibamentesen jelenjen meg és működjön
• a weboldal úgy legyen leprogramozva, hogy a lehető leggyorsabban beöltődjön, mert a betöltés sebessége kritikus a felhasználói élmény szempontjából
• a weboldal forráskódjába kerüljön bele az összes olyan követőkód, amely az online marketing folyamat működtetését és mérését lehetővé teszi
• a weboldal keresőbarát módon legyen kialakítva, megfeleljen a Google irányelveinek
• a weboldal biztonságos legyen, fel legyen készítve a webről érkező támadások elhárítására
• a weboldal szükség esetén támogassa a többnyelvűséget

A weboldal tartalmának első feltöltését is általában a programozók vagy operátorok szokták elvégezni, mert itt még kisebb-nagyobb módosításokra van szükség a konkrét információk birtokában.

5. Tesztelés és élesítés

Ha készen van a weboldal és funkcionálisan és tartalmilag is megfelelő, akkor jön a tesztelés. Az élesítés előtt még egyszer le kell ellenőrizni a böngésző kompatibilitást, a betöltődési sebességet, a nyelvi verziók helyességét, a hibaüzeneteket. El kell végezni a régi weboldal megfelelő oldalainak átirányítását az újakra. Ki kell tölteni a SEO szempontjából fontos META adatokat, le kell ellenőrizni a technikai és on-page SEO faktorokat. A közösségi média és analitikai, valamint hirdetési kódokat át kell rakni a régi weboldalból az újba.

A weboldal a végleges tárhelyre kerül és a domain név beállítását követően élesben kezd működni.

6. Karbantartás és üzemeltetés

A weboldal élesítése után a kapcsolat nem szakad meg a webfejlesztő és az ügyfél között. A weboldalak rögtön az indítás utána a web felől számtalan támadásnak vannak kitéve, ezért folyamatos kontrollt, ellenőrzést igényelnek. Tartalomkezelő rendszereiket folyamatosan frissíteni kell annak érdekében, hogy ellenállók legyenek a webről jövő támadásoknak.

Zárszó

A webfejlesztés mint projekt már régóta nem egyszemélyes feladat. Az utóbbi években olyan sok önálló szakma fejlődött ki belőle, hogy egy személy képtelen mindegyiknek egyszerre megfelelni. Egy közepes webfejlesztés projekten is projektvezető, kutatók, UX designerek, programozók, operátorok, SEO és online marketing szakemberek dolgoznak közösen, csak így biztosítható, hogy a végeredmény éles piaci környezetben is megállja a helyét.

Szerző: Tusnádi István