Digitális kiadványok
CSS
CSS technikák
Bootstrap
Weblaptervezéshez szükséges ismeretek
Alapfogalmak
A HTML (HyperText Markup Language) a weboldal alapja, olyan, mint egy ház alapja, csupasz falai, teteje.
A CSS (Cascading Style Sheets) felel a weboldal kinézetéért, olyan, mint a ház színe, dekorációja, bútorzata.
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.
Google Web Designer felülete
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.
Figma böngészőben futó felülete
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...
A Visual Studio Code szövegszerkesztő
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.
Célprogrammal készült drótváz.
Webalkalmazás mobilos drótváza kézi rajzzal.
A Pencil drótváz szerkesztő felülete egy egyszerű drótvázzal.
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.
Bootstrap-ban készült prototípus.
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)
A grid rendszerek a tartalmakat különálló sorokba tagolják.
Oszlopok (column)
A sorok tovább tagolhatóak oszlopokra.
Csatornák (Gutter vagy Gap)
A sorok és oszlopok között a hézagot a csatornák alkotják.
Margók
A külső eltartást a margók szabályozzák.
Régiók/területek
A régiók több egymás melletti oszlopot ölelhetnek fel.
Modulháló használata
A weboldal részegységei régiókba tagolva.
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.
Bootstrap Grid System-el készült felület.
A fenti Boodstrap Grid System felület a 12-es oszlop kiemelésével.
Last modified 11mo ago
Export as PDF
Copy link