2. nap

Akár mit is szeretnél létrehozni, legyen az valamilyen étel vagy egy szoftver, érdemes mindig végiggondolnod és megtervezned a különböző hozzávalókat. Ezzel már a tervezőasztalon ki tudsz szűrni olyan hibákat, amelyek a végeredményt tönkre tehetik. Erre úgy is lehet gondolni mint egy recept, amely majd végigvezet a különböző szakaszain a fejlesztésnek és sokkal tisztábban látod majd, hogy mit is szeretnél elkészíteni.

A kihívás alatt az alábbi videón látható weboldalt fogjuk létrehozni.

Ahhoz, hogy meg tudj tervezni egy egész szoftvert, pár dolgot az elején át kell gondolnod. Nem feltétlen kell egy minden részletet lefedő tervet elkészítened, de legalább lásd, hogy mit is szeretnél létrehozni. Érdemes mindig abból kiindulnod, hogy mik a céljai a szoftvernek. Végezheted ezt akár papíron vagy más eszköz segítségével is, de próbáld magadnak vizuálisan ábrázolni, hogy mi hogy fog majd állni a végén. A Figma alkalmazás segítségével létre tudsz hozni különböző ábrákat vagy wireframe-eket (drótváz), amely nagyon jól átláthatóvá tudja tenni az egész tervezést.

Az alábbi videón látható, ahogy én is elkészítem a tervet a Figma segítségével. Nem térek ki arra, hogy hogyan kell használni, a lényeg, hogy legyen elképzelésed, hogy hogyan működhet. Teljesen jó és elég ha papíron elkészíted a saját terved.

A végeredmény pedig így néz ki.

A kihívás keretein belül a célom az, hogy egy olyan dolgot hozzunk létre, amely be tudja mutatni neked, hogy hogyan is néz ki egy weboldal elkészítése és milyen lépéseken megyünk keresztül. Erre alapozva kerestem meg a legjobb eszközöket erre a célra, és definiáltam a különböző komponenseket.

Követelmények

Minden szoftvernek vannak különböző követelményei, amely a kijelölt célt vagy problémát oldják meg.

Azért főzünk, hogy az éhségünket csökkentsük, de az se ártana, ha finom lenne. Viszont, az ételnek nem feltétlen kell finomnak lennie, ahhoz, hogy csökkentse az éhségünk. Igyekezz meghatározni minden olyan elvárást, amelyet kötelezően meg kell tudnia oldani a szoftvernek. A követelményeket célszerű prioritások szerint felosztani, amely meghatározza majd azt, hogy milyen sorrendben végezzük el a különböző lépéseket. Ez fog majd receptként szolgálni.

A szoftver követelményeinek meghatározására létezik pár iránytadó kérdés:

• Milyen problémát vagy célt kíván megoldani?
• Ki lesz a megoldás fő felhasználója?
• Mi a felhasználók célja a szoftverrel?
• Milyen feladatokat vagy folyamatokat lehet megkönnyíteni vagy automatizálni a szoftverrel?
• Milyen alapvető funkciókra van szükség a felhasználói igények kielégítéséhez?
• Vannak-e konkrét technikai vagy teljesítménykövetelmények?
• Milyen platformokat és eszközöket kell támogatnia a szoftvernek?
• Vannak-e olyan szabályozások, amelyeknek a szoftvernek meg kell felelnie?
• Milyen korlátok vannak, például költségvetés, idő vagy erőforrások tekintetében?
• Hogyan kezelik és tárolják az adatokat a szoftveren belül?
• Milyen skálázhatósági követelmények vannak a jövőbeli növekedés vagy bővítés szempontjából?
• Milyen karbantartási szempontok vannak a szoftverrel kapcsolatban?

A mi célunk egy weboldal elkészítése, ami képes arra, hogy bemutasson minket, megoszthassunk cikkeket és az oldalnak 0-24 elérhetőnek kell lennie. Egy kis tanulás árán is, de a lehető legkevesebb pénz és energia befektetésével tudjuk létrehozni.

Eszközök kiválasztása

Nagyon sok megoldás létezik arra, amivel létre tudsz hozni egy új weboldalt. Lehetnek azok valamilyen tartalomkezelő rendszerek, különböző keretrendszerek stb.

A mi esetünkben egy egyszerű statikus weboldalt szeretnénk létrehozni, amely igazából annyit jelent, hogy létrehozunk különböző fájlokat, amelyeket majd egy szerverre fel birunk tenni és azt bárki elérheti. Ebben tudnak nekünk segíteni a következő eszközök:

• HTML
• CSS
• JavaScript

Ezek a technológiák az alapvető építőkövei egy weboldalnak.

A HTML az oldal tartalmát határozza meg. Például, megadja, hogy hol találhatók a címek, a szövegek, a képek, a táblázatok és a linkek. Így a HTML segítségével tudjuk kifejezni, hogy mi az oldalunk lényege, milyen tartalmat kínál a látogatóknak.

A CSS a tartalom megjelenítéséért felelős. Például, a CSS segítségével állíthatjuk be a betűtípusokat és méreteket, a háttér- és betűszíneket és a margókat.

A JavaScript pedig az interaktivitásért és a dinamikus funkciókért felel. Ez a programozási nyelv lehetővé teszi számunkra, hogy az oldalunkon életre keltsünk különféle interaktív elemeket és funkciókat.

Komponensek

A legtöbb rendszer több különböző komponensből épül fel. Mondjuk ha az ételes példánál maradunk, akkor eddig a pontig arról beszéltünk, hogy el szeretnénk készíteni valamilyen ételt, amiben van hús (követelmény). Meghatároztuk, hogy milyen hús legyen az alapja (eszköz), és most tudjuk meghatározni, hogy milyen köret vagy fűszer kerüljön még oda.

Egy weboldal esetében az ilyen komponensek különálló részei az egész oldalnak, például a navigációs sáv vagy a lábléc. A lényeg, hogy meghatározzuk a kritikus komponenseit a rendszernek, és kiderítsük, hogy működőképesek lesznek-e a használat során. Ezeket a komponenseket már a wireframe alapján nagyjából körvonalazni lehet.

A mi oldalunknak a következő komponensei lesznek az elkészített wireframe alapján:

• Navigációs sáv

A navigációs sávban megtalálható lesz a logónk, egy link a blogokhoz és a sötét módot ki be kapcsoló gomb.

• Hero

A hero komponensben lesz megtalálható a minket pár mondatban bemutató szekció, amely egy képből, a nevünkből, egy rövid leírásból és egy gombból fog állni, amellyel e-mailt tudnak küldeni nekünk a látogatók.

• Blogok

A blogok szekcióban helyezkednek majd el az egyes blogok, amelyeket egy kártya formában jelenítünk meg.

• Lábléc

A láblécben megtalálható az e-mail címünk és különböző linkek.

Az évek során rengeteg komponens fog elkészülni, amelyeket érdemes összegyűjteni, annak érdekében, hogy legközelebb, ha valamilyen hasonló komponensre lenne szükségünk, akkor ne a nulláról induljunk.

Feladatok meghatározása

Amint elérünk addig a pontig, hogy meghatároztuk, hogy mit is szeretnénk létrehozni és a hozzá tartozó komponenseket, akkor meg tudjuk szabni a különböző feladatokat és ezeket követve tudjuk, hogy hányadán állunk épp az aktuális feladatnak, egyúttal a projekt haladását is követni tudjuk. Erre léteznek különböző szoftverek, mint a Trello, YouTrack vagy a Taskade.

Miért fontos tervezni?

Ezt az egész tervezési folyamatot nem szabad átlépni, mivel akkor átugorjuk az egyik legfontosabb részét magának a fejlesztésnek.qwe

Bármit is szeretnénk elkészíteni a legjobb dolog, amit tehetünk, az az, ha papíron megvizsgáljuk a dolgokat, még mielőtt belekezdenénk a fejlesztésbe. Ezzel nagyon sok időt és energiát meg lehet spórolni.

Jegyezd meg: “Háromszor mérünk, egyszer vágunk”

Extra olvasnivaló

Ha többet szeretnél megtudni a Figmáról akkor ebben a cikkben megtudhatsz róla többet.