> For the complete documentation index, see [llms.txt](https://digikiad.gitbook.io/digitalis-kiadvanyok/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://digikiad.gitbook.io/digitalis-kiadvanyok/digitalis-kiadvanyok/weblaptervezeshez-szuekseges-ismeretek.md).

# Weblaptervezéshez szükséges ismeretek

## Alapfogalmak

A **HTML** (**H**yper**T**ext **M**arkup **L**anguage) a weboldal alapja, olyan, mint egy ház alapja, csupasz falai, teteje.

{% content-ref url="/pages/-LNfi0e1j\_3NzFlDlmps" %}
[Mi az a HTML?](/digitalis-kiadvanyok/html/bevezetes-a-html-be.md)
{% endcontent-ref %}

 A **CSS** (**C**ascading **S**tyle **S**heets) felel a weboldal kinézetéért, olyan, mint a ház színe, dekorációja, bútorzata.

{% content-ref url="/pages/-LNl1UvwzgukmKx0ZLod" %}
[Mi az a CSS?](/digitalis-kiadvanyok/css/mi-a-css.md)
{% endcontent-ref %}

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](https://www.adobe.com/) termékei de facto iparági szabványként működnek, a webes grafikusok jelentős része [Adobe Photoshop](https://www.adobe.com/hu/products/photoshop.html)-ot használ, és [PSD](https://en.wikipedia.org/wiki/Adobe_Photoshop#File_format) formátumú állományokkal látja el a fejlesztőket.

Photoshop mellett az [Adobe Illustrator](https://www.adobe.com/hu/products/illustrator.html), és a [Fireworks](https://www.adobe.com/hu/products/fireworks.html) is népszerű. Az Adobe termékek nyílt forráskódú alternatívája a [Gimp](https://www.gimp.org/) ingyenes képszerkesztő, és az [Inkscape](http://www.inkscape.org/) 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](https://webdesigner.withgoogle.com/).

![Google Web Designer felülete](/files/-LgldZDDreug-Q07exHV)

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](https://www.sketch.com/) jellemző, jó alternatíva a [Figma](https://www.figma.com), vagy az [InVision](https://www.invisionapp.com/). Az új trendre reagálva az Adobe is piacra dobta a saját felhő alapú megoldását, ez az [Adobe XD](https://www.adobe.com/hu/products/xd.html)-t.

![Figma böngészőben futó felülete](/files/-MT54NLfLHtCjxPrmTmu)

## 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](https://emmet.io/), [Intelli Sense](https://code.visualstudio.com/docs/editor/intellisense), [TabNine](https://tabnine.com)), 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](https://code.visualstudio.com/), [Atom](https://atom.io/), [Notepad++](https://notepad-plus-plus.org/download/v6.9.2.html), [Brackets](http://brackets.io/), [Sublime Text](s://www.sublimetext.com), [Adobe Dreamweaver](https://www.adobe.com/hu/products/dreamweaver.html)...

![A Visual Studio Code szövegszerkesztő](/files/-LgnX0hs8pY-XzB2Nti7)

{% content-ref url="/pages/-LO3iwfl4E\_eUuyBj25r" %}
[Mi az a VS Code?](/digitalis-kiadvanyok/vs-code/mi-a-vs-code.md)
{% endcontent-ref %}

## 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](https://www.sketch.com/), vagy az [Adobe XD](https://www.adobe.com/hu/products/xd.html), egy jó ingyenes nyílt forráskódú alternatíva a [Pencil Projekt](https://pencil.evolus.vn/). Jellemző még ezen a területen az [Adobe Illustrator](https://www.adobe.com/hu/products/illustrator.html) használata.

![Célprogrammal készült drótváz.](/files/-Lgd080XCzf_ZsNjwGQy)

![Webalkalmazás mobilos drótváza kézi rajzzal.](/files/-Lgd3vgbXQXFDB_eXB8-)

![A Pencil drótváz szerkesztő felülete egy egyszerű drótvázzal.](/files/-Lgd8TFWD5xq74ge5V_b)

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](https://getbootstrap.com/) 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.](/files/-LgdKW_jIJKbAC6bsWrA)

Bővebbebb cikk a témáról: [Using wireframes to streamline your development process](https://www.webdesignerdepot.com/2009/07/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)

![A grid rendszerek a tartalmakat különálló sorokba tagolják.](/files/-LgnPo7JSHKUxssxZZKP)

#### Oszlopok (column)

![A sorok tovább tagolhatóak oszlopokra.](/files/-LgnPqi2CtvWs74DLcKk)

#### Csatornák (Gutter vagy Gap)

![A sorok és oszlopok között a hézagot a csatornák alkotják.](/files/-LgnSHqzg4Z9mIrqdiTo)

#### Margók

![A külső eltartást a margók szabályozzák.](/files/-LgnVubBsH0BvxJsdQTw)

#### Régiók/területek

![A régiók több egymás melletti oszlopot ölelhetnek fel.](/files/-LgnTVnDe1fDlYGfYyW7)

#### Modulháló használata

![A weboldal részegységei régiókba tagolva.](/files/-LgnvP-GbNnoEDvtd4v5)

Weboldalunkhoz nem kell megírni külön a grid rendszert, számos kész rendszer a rendelkezésünkre áll: [960 Grid System](https://960.gs/), [csswizardry-grids](https://csswizardry.com/csswizardry-grids/)

Grid rendszert készen beépítve megtaláljuk a jelentősebb CSS HTML [keretrendszerekben](/digitalis-kiadvanyok/fueggelek/kliens-oldali-keretrendszerek.md): [Bootstrap - Grid System](https://getbootstrap.com/docs/4.0/layout/grid/), [Zurb Foundation - The Grid](https://foundation.zurb.com/grid.html)

A [Bootstrap Grid System](https://getbootstrap.com/docs/4.0/layout/grid/) érdekessége, hogy [magában](https://getbootstrap.com/docs/4.3/getting-started/contents/#css-files) 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.](/files/-LgnG_aG4PjyjTu79NVR)

![A fenti Boodstrap Grid System felület a 12-es oszlop kiemelésével.](/files/-LgnGhEPafj2n9mALvnH)

{% content-ref url="/pages/-LnrUoBkeP8yPH5Ebh3F" %}
[Mi az a Bootstrap?](/digitalis-kiadvanyok/bootstrap/mi-az-a-bootstrap.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LzY5m1ZPACvzPJx2-CL" %}
[Kliens oldali keretrendszerek](/digitalis-kiadvanyok/fueggelek/kliens-oldali-keretrendszerek.md)
{% endcontent-ref %}