Weblaptervezéshez szükséges ismeretek
Alapfogalmak
A HTML (HyperText Markup Language) a weboldal alapja, olyan, mint egy ház alapja, csupasz falai, teteje.
Mi az a HTML?A CSS (Cascading Style Sheets) felel a weboldal kinézetéért, olyan, mint a ház szÃne, dekorációja, bútorzata.
Mi az a CSS?A JavaScript programozási nyelv felel az oldalak működésért, olyan mint egy ház gépészete, elektromos rendszere (ha itt megnyomok egy kapcsolót, amott felgyúl a villany).
Grafikai szoftverek
Az Adobe termékei de facto iparági szabványként működnek, a webes grafikusok jelentős része Adobe Photoshop-ot használ, és PSD formátumú állományokkal látja el a fejlesztőket.
Photoshop mellett az Adobe Illustrator, és a Fireworks is népszerű. Az Adobe termékek nyÃlt forráskódú alternatÃvája a Gimp ingyenes képszerkesztÅ‘, és az Inkscape vektorgrafikus szerkesztÅ‘.
Animációs területen az Adobe Flash elvesztette a piaci monopóliumát, az Adobe beszüntette a platform támogatását, ezt a piaci rést a HTML5-ös animált bannerek töltik be, ezek szerkesztésére jött létre az ingyenes Google Web Designer.

Az asztali alkalmazások mellett egyre terjednek az online felhÅ‘ alapú grafikai programok, amik nagyban támogatják a kollaboratÃv munkát. MacOS rendszeren a Sketch jellemzÅ‘, jó alternatÃva a Figma, vagy az InVision. Az új trendre reagálva az Adobe is piacra dobta a saját felhÅ‘ alapú megoldását, ez az Adobe XD-t.

Szövegszerkesztők
A grafikai munkákon túl a fejlesztÅ‘k szövegszerkesztÅ‘t (Text editor), és integrált fejlesztÅ‘i környezetet (Integrated Development Environment azaz IDE) használnak, ezek a programok fel vannak ruházva a forráskódok irását, szerkesztését segÃtÅ‘ funkciókkal, úgy mint intelligens kód kiegészÃtés (Emmet, Intelli Sense, TabNine), kód szÃnezés, hibakiemelés, stb. Számos ingyenes és fizetÅ‘s program létezik, a teljesség igénye nélkül: Visual Studio Code, Atom, Notepad++, Brackets, Sublime Text, Adobe Dreamweaver...

Drótváz
A drótváz készÃtés egy módszer, amely segÃtségével kialakÃthatjuk egy weboldal felépÃtését. A drótvázat elsÅ‘sorban olyan weboldalak tartalmának és funkcionalitásának meghatározására használjuk, melyek figyelembe veszik a felhasználói igényeket és a felhasználói viselkedést. A drótvázakat a fejlesztési folyamat korai szakaszában használjuk az oldal alapvetÅ‘ kialakÃtása elÅ‘tt, megelÅ‘zi a tényleges online grafikai tervezést, és a (szöveges) tartalmak kialakÃtását. A drótváz kiváló eszköz arra, hogy költséges fejlesztés nélkül megismerjük az ügyfél igényeit, a fejlesztÅ‘k pontos képet kapjanak az elkészÃtendÅ‘ alkalmazás működésérÅ‘l, ezen felül teret ad a kisérletezésnek, segÃtségével alacsony költségen kipróbálhatóak a projektekkel kapcsolatos ötletek.
A drótváz készülhet kézi rajzzal papÃron, táblán, de vannak speciálisan erre a célra szolgáló szoftverek, mint példáula a Scetch, vagy az Adobe XD, egy jó ingyenes nyÃlt forráskódú alternatÃva a Pencil Projekt. JellemzÅ‘ még ezen a területen az Adobe Illustrator használata.



A prototÃpus a következÅ‘ lépés a drótváz után, ez már kattintható, bár a funkcionalitás csak mÃmelt (angol kifejezéssel mock, magyarosÃtva mokkolt). JellemzÅ‘en HTML, és CSS segÃtségével készül, erre a feladatra kiválóan alkalmas a Bootstrap keretrendszer is, ezzel gyorsan és hatékonyan lehet felületeket kialakÃtani. Egyes drótváz készÃtÅ‘ programokból lehet kattintható prototÃpust előállÃtani.

Bővebbebb cikk a témáról: Using wireframes to streamline your development process
Grid rendszerek, vagy modulháló
A grid, vagy modulháló a tervezés legalapabb alapja, nem újkeletű dolog (többszáz éve használja a nyomtatott grafika), de új értelmet nyert a reszponzÃv webdizájnban, ahol fix szélességek helyett dinamikusan alkamazkodó arányokat célszerű használni.
A modulháló (grid system) részei
Sorok (row)

Oszlopok (column)

Csatornák (Gutter vagy Gap)

Margók

Régiók/területek

Modulháló használata

Weboldalunkhoz nem kell megÃrni külön a grid rendszert, számos kész rendszer a rendelkezésünkre áll: 960 Grid System, csswizardry-grids
Grid rendszert készen beépÃtve megtaláljuk a jelentÅ‘sebb CSS HTML keretrendszerekben: Bootstrap - Grid System, Zurb Foundation - The Grid
A Bootstrap Grid System érdekessége, hogy magában a Bootstrap egyéb funkciói nélkül is beépÃthetjük, és használhatjuk webes alkalmazásainkban.


Last updated