Ebben a cikkben megmutatjuk milyen programokra lesz szükségünk egyszerű weboldalak fejlesztéséhez.
Milyen eszközöket használnak a profi webfejlesztők?
- Modern számítógépet. Némelyeknek magátólértetődőnek tűnhet, de biztosan vannak, akik telefonról vagy könyvtárból olvassák ezt a cikket, ezért le kell szögezzük: a komoly webfejlesztéshez muszáj befektetni egy modern Windows, Linux vagy macOS futtatására képes számítógépbe.
- Kódszerkesztőt. Ez lehet egy egyszerűbb kódszerkesztő (pl. Visual Studio Code, Notepad++, Sublime Text, Atom, GNU Emacs, esetleg VIM), vagy egy hibrid megoldás (pl. Dreamweaver vagy WebStorm). A hétköznapokból ismert irodai szövegszerkesztők nem alkalmasak erre a feladatra, mivel a dokumentum formázásához olyan rejtett adatokat ír a fájlba, amik megzavarják a böngészőket.
- Modern böngészőket, a kód tesztelése. A legelterjedtebb böngészők ma a Firefox, Chrome, Opera, Safari, Internet Explorer és a Microsoft Edge. Erősen ajánlott a weboldalunkat különböző mobilkészülékeken, valamint a közönségünk által esetlegesen használt régebbi böngészőkben is tesztelni (például IE 8–10.) A gyengénlátó felhasználók böngészési élményét segíthet feltérképezni a Lynx, egy grafikus felülettel nem rendelkező, karakter alapú, parancssoros böngésző.
- Grafikus szerkesztőt, mint például a GIMP, Figma, Paint.NET, Photoshop, vagy XD, hogy a weboldalunkra szánt képeket optimalizálni tudjuk a Világhálóra.
- Verziókövetőt, amely segít nyomonkövetni a kód változását és elkerülni, hogy egymás lábára lépjünk a közös munkavégzés során. Jelenleg a Git az egyik legnépszerűbb verziókövető, a GitHub és GitLab pedig közkedvelt online Git szolgáltatók.
- FTP programot. Régebbi webtárhelyeken használatos módszer a fájlok kezelésére, manapság egyre jellemzőbb, hogy FTP helyett Gitet használnak speciálisan erre a célra. Számtalan FTP/SFTP program közül választhatunk, például a Cyberduck, Fetch vagy a FileZilla.
- Automatizációs eszközöket, mint a Webpack, Grunt, vagy a Gulp. Ezek a szoftvereszközök a fejlesztés során gyakran ismétlődő folyamatok automatizálására valóak, mint például a kódtömörítés (minifying), vagy a tesztek futtatása.
- Könyvtárakat, keretrendszereket, egyéb újrafelhasználható szoftvercsomagokat, amelyek felgyorsítják a fejlesztést. A könyvtárak (library) valamilyen hasznos funkciót biztosítanak, amit beépíthetünk az alkalmazásunkba, míg a keretrendszerek (framework) komplett rendszerek, amelyekre a saját alkalmazásunkat alapozzuk.
- És még számtalan egyéb, valamilyen konkrét problémát megoldó szoftvereszközt!
Mire van feltétlenül szükségem a kezdéshez?
Habár a fenti lista elsőre rémisztőnek tűnhet, a jó hír az, hogy ezeknek csupán egy töredéke szükséges a kezdéshez.
A továbbiakban a két legszükségesebbre fókuszálunk: egy alkalmas szövegszerkesztőre és böngészőkre.
Kódszerkesztő
Szinte bizonyos, hogy már van valamilyen kódolásra alkalmas szövegszerkesztő a számítógépünkön. Windowson a Jegyzettömb, macOS esetén a TextEdit elő van telepítve. Linux esetén disztribúciófüggő az alapértelmezett szerkesztő, Ubuntu esetén ez a gedit.
Habár ezekkel a programokkal lehetséges kódot írni, vannak jobb alternatívák. A Visual Studio Code egy igen népszerű ingyenes kódszerkesztő, kimondottan programozást támogató funkciókkal.
Modern böngészők
Tekintsük az operációs rendszerünknek megfelelő böngészők listáját és telepítsük őket a megadott linkek segítségével. Erősen ajánlott legalább két böngészőt telepíteni, mielőtt elkezdjük a tanulást, de a későbbi teszteléshez javasolt mindegyiknek a telepítése.
- Linux: Firefox, Chrome, Opera, Brave.
- Windows: Firefox, Chrome, Opera, Internet Explorer, Microsoft Edge, Brave (Windows 10 esetén az Edge előtelepítve van; Windows 7-től kezdődően telepíthetjük az Internet Explorer 11 verzióját; egyéb esetben válasszunk más böngészőt).
- macOS: Firefox, Chrome, Opera, Safari, Brave (macOS és iOS esetén a Safari az alapértelmezett böngésző).
Figyelem: Az Internet Explorer nem kompatibilis némely modern webes technológiákkal, így előfordulhat, hogy nem tudja futtatni a projektünket. Általánosságban azonban elmondható, hogy nem kell aggódnunk az Internet Explorer miatt, mivel manapság nagyon kevesen használják — ugyanakkor az is előfordulhat, hogy olyan projektbe botlunk, ahol fontos az Internet Explorer támogatása.
Helyben futó webszerver
Egyes példák futtatásához egy működő webszerverre lesz szükségünk. A How do you set up a local testing server? cikk részletesen bemutatja, hogyan tudunk konfigurálni egyet.