1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
---
title: Alapvető programok telepítése
slug: Learn/Ismerkedés_a_Világhálóval/Alapvető_programok_telepítése
tags:
- Kezdő
- böngésző
- ezközök
- kódszerkesztő
- programok
- szövegszerkesztő
translation_of: Learn/Getting_started_with_the_web/Installing_basic_software
---
<div>{{LearnSidebar}}</div>
<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div>
<div class="summary">
<p><span style="">Ebben a cikkben megmutatjuk milyen programokra lesz szükségünk egyszerű weboldalak fejlesztéséhez.</span></p>
</div>
<h2 id="Milyen_eszközöket_használnak_a_profi_webfejlesztők">Milyen eszközöket használnak a profi webfejlesztők?</h2>
<ul>
<li><strong>Modern számítógépet</strong>. 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.</li>
<li><strong>Kódszerkesztőt</strong>. Ez lehet egy egyszerűbb kódszerkesztő (pl. <a href="https://code.visualstudio.com/">Visual Studio Code</a>, <a href="https://notepad-plus-plus.org/">Notepad++</a>, <a href="https://www.sublimetext.com/">Sublime Text</a>, <a href="https://atom.io/">Atom</a>, <a href="https://www.gnu.org/software/emacs/">GNU Emacs</a>, esetleg <a href="https://www.vim.org/">VIM</a>), vagy egy hibrid megoldás (pl. <a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver </a>vagy <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>). 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.</li>
<li><strong>Modern böngészőket</strong>, a kód tesztelése. A legelterjedtebb böngészők ma a <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> és a <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>. 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 <a href="https://lynx.browser.org/">Lynx</a>, egy grafikus felülettel nem rendelkező, karakter alapú, parancssoros böngésző.</li>
<li><strong>Grafikus szerkesztőt</strong>, mint például a <a href="https://www.gimp.org/">GIMP</a>, <a href="https://www.figma.com/">Figma</a>, <a href="http://www.getpaint.net/">Paint.NET</a>, <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>, vagy <a href="https://www.adobe.com/products/xd.html">XD</a>, hogy a weboldalunkra szánt képeket optimalizálni tudjuk a Világhálóra.</li>
<li><strong>Verziókövetőt</strong>, 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 <a href="http://git-scm.com/">Git</a> az egyik legnépszerűbb verziókövető, a <a href="https://github.com/">GitHub</a> és <a href="https://gitlab.com">GitLab</a> pedig közkedvelt online Git szolgáltatók.</li>
<li><strong>FTP programot.</strong> 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 <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a> vagy a <a href="https://filezilla-project.org/">FileZilla</a>.</li>
<li><strong>Automatizációs eszközöket,</strong> mint a <a href="https://webpack.js.org/">Webpack</a>, <a href="http://gruntjs.com/">Grunt</a>, vagy a <a href="http://gulpjs.com/">Gulp</a>. 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 (<em>minifying</em>), vagy a tesztek futtatása.</li>
<li>Könyvtárakat, keretrendszereket, egyéb újrafelhasználható szoftvercsomagokat, amelyek felgyorsítják a fejlesztést. A könyvtárak (<em>library</em>) valamilyen hasznos funkciót biztosítanak, amit beépíthetünk az alkalmazásunkba, míg a keretrendszerek (<em>framework</em>) komplett rendszerek, amelyekre a saját alkalmazásunkat alapozzuk.</li>
<li>És még számtalan egyéb, valamilyen konkrét problémát megoldó szoftvereszközt!</li>
</ul>
<h2 id="Mire_van_feltétlenül_szükségem_a_kezdéshez">Mire van feltétlenül szükségem a kezdéshez?</h2>
<p>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.</p>
<p>A továbbiakban a két legszükségesebbre fókuszálunk: egy alkalmas szövegszerkesztőre és böngészőkre.</p>
<h3 id="Kódszerkesztő">Kódszerkesztő</h3>
<p>Szinte bizonyos, hogy már van valamilyen kódolásra alkalmas szövegszerkesztő a számítógépünkön. Windowson a <a href="https://hu.wikipedia.org/wiki/Jegyzettömb">Jegyzettömb</a>, macOS esetén a <a href="https://en.wikipedia.org/wiki/TextEdit">TextEdit</a> elő van telepítve. Linux esetén disztribúciófüggő az alapértelmezett szerkesztő, Ubuntu esetén ez a <a href="https://hu.wikipedia.org/wiki/Gedit">gedit</a>.</p>
<p>Habár ezekkel a programokkal lehetséges kódot írni, vannak jobb alternatívák. A <a href="https://code.visualstudio.com/">Visual Studio Code</a> egy igen népszerű ingyenes kódszerkesztő, kimondottan programozást támogató funkciókkal.</p>
<h3 id="Modern_böngészők">Modern böngészők</h3>
<p>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.</p>
<ul>
<li>Linux: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://brave.com">Brave</a>.</li>
<li>Windows: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>, <a href="https://www.microsoft.com/en-us/edge">Microsoft Edge</a>, <a href="https://brave.com">Brave</a> (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).</li>
<li>macOS: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="https://brave.com">Brave</a> (macOS és iOS esetén a Safari az alapértelmezett böngésző).</li>
</ul>
<div class="blockIndicator note">
<p><strong>Figyelem</strong>: 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.</p>
</div>
<h3 id="Helyben_futó_webszerver">Helyben futó webszerver</h3>
<p>Egyes példák futtatásához egy működő webszerverre lesz szükségünk. A <a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">How do you set up a local testing server?</a> cikk részletesen bemutatja, hogyan tudunk konfigurálni egyet.</p>
<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p>
<h2 id="Modul_tartalomjegyzék">Modul tartalomjegyzék</h2>
<ul>
<li id="Installing_basic_software"><a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a></li>
<li id="What_will_your_website_look_like"><a href="/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li>
<li id="Dealing_with_files"><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li>
<li id="HTML_basics"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li>
<li id="CSS_basics"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li>
<li id="JavaScript_basics"><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li>
<li id="Publishing_your_website"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li>
<li id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li>
</ul>
|
