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
79
80
|
---
title: Instalacja podstawowego oprogramowania
slug: Learn/Getting_started_with_the_web/Installing_basic_software
tags:
- Beginner
- Browser
- Learn
- Setup
- Tools
- WebMechanics
- 'l10n:priority'
- text editor
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>W sekcji <em>Instalacja podstawowego oprogramowania</em> pokazujemy, jakie narzędzia są potrzebne do podstawowego tworzenia stron internetowych i jak je prawidłowo zainstalować.</p>
</div>
<h2 id="Jakich_narzędzi_używają_profesjonaliści">Jakich narzędzi używają profesjonaliści?</h2>
<ul>
<li><strong>Komputer</strong>. Może wydaje się to oczywiste dla niektórych ludzi, ale część z Was czyta ten artykuł w telefonie lub na komputerze w bibliotece. Dla poważnego tworzenia stron internetowych, lepiej jest zainwestować w komputer stacjonarny lub laptop z systemem Windows, macOS lub Linux.</li>
<li><strong>Edytor tekstowy</strong>, do pisania kodu. Może to być edytor tekstowy (np. <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>, lub <a href="https://www.vim.org/">VIM</a>), lub edytor hybrydowy (np. <a href="https://www.adobe.com/pl/products/dreamweaver.html">Dreamweaver</a> lub <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>). Edytory dokumentów biurowych nie nadają się do tego celu, ponieważ opierają się na ukrytych elementach, które zakłócają działanie silników renderujących używanych przez przeglądarki internetowe.</li>
<li><strong>Przeglądarki internetowe</strong>, do testowania kodu. Obecnie najczęściej używanymi przeglądarkami internetowymi są <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/">Chrome</a>, <a href="https://www.opera.com/pl">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="https://support.microsoft.com/pl-pl/help/17621/internet-explorer-downloads">Internet Explorer</a> i <a href="https://www.microsoft.com/pl-pl/edge">Microsoft Edge</a>. Należy także sprawdzić, jak twoja strona działa na urządzeniach mobilnych i na starszych przeglądarkach, których wciąż mogą używać twoi odbiorcy (takich jak IE 8–10.) <a href="https://lynx.browser.org/">Lynx</a>, terminalowa przeglądarka tekstowa, jest świetna do sprawdzenia, jak Twoja strona jest doświadczana przez użytkowników z wadami wzroku.</li>
<li><strong>Edytor graficzny</strong>, taki jak <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/pl/products/photoshop.html">Photoshop</a>, lub <a href="https://www.adobe.com/pl/products/xd.html">XD</a>, do tworzenia obrazów lub grafiki dla swoich stron internetowych.</li>
<li><strong>System kontroli wersji</strong>, do zarządzania plikami na serwerach, współpracy przy projekcie z zespołem, współdzielenia kodu i zasobów oraz unikania konfliktów edycyjnych. Obecnie <a href="http://git-scm.com/">Git</a> jest najpopularniejszym systemem kontroli wersji, wraz z serwisem hostingowym <a href="https://github.com/">GitHub</a> lub <a href="https://gitlab.com">GitLab</a>.</li>
<li><strong>Program FTP</strong>, używany na starszych kontach hostingowych do zarządzania plikami na serwerach (<a href="http://git-scm.com/">Git</a> coraz częściej zastępuje w tym celu FTP). Dostępnych jest wiele programów (S)FTP, w tym <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a> i <a href="https://filezilla-project.org/">FileZilla</a>.</li>
<li><strong>System automatyzacji</strong>, taki jak <a href="https://webpack.js.org/">Webpack</a>, <a href="http://gruntjs.com/">Grunt</a> lub <a href="http://gulpjs.com/">Gulp</a>, który automatycznie wykonuje powtarzające się zadania, takie jak minifikacja kodu i przeprowadzanie testów.</li>
<li>Biblioteki, frameworki, itp., aby przyspieszyć pisanie powszechnych funkcji. Biblioteka jest zazwyczaj istniejącym plikiem JavaScript lub CSS, który zapewnia gotowe funkcje do wykorzystania w kodzie. Framework ma tendencję do kontynuowania tego pomysłu, oferując kompletny system z niestandardowymi składniami do pisania aplikacji internetowej na najwyższym poziomie.</li>
<li>Oraz wiele więcej narzędzi!</li>
</ul>
<h2 id="Jakich_właściwie_narzędzi_potrzebuję_na_teraz">Jakich właściwie narzędzi potrzebuję na teraz?</h2>
<p>Wygląda to na przerażającą listę, ale na szczęście można zacząć tworzyć strony internetowe, nie wiedząc nic o większości z nich. W tym artykule przedstawimy Ci tylko minimum - edytor tekstu i kilka nowoczesnych przeglądarek internetowych.</p>
<h3 id="Instalacja_edytora_tekstowego">Instalacja edytora tekstowego</h3>
<p>Prawdopodobnie masz już podstawowy edytor tekstu na swoim komputerze. Domyślnie Windows zawiera <a href="https://pl.wikipedia.org/wiki/Notatnik_(program)">Notatnik</a> a macOS dostarczany jest z <a href="https://pl.wikipedia.org/wiki/TextEdit">TextEdit</a>. Dystrybucje Linuksa różnią się od siebie; na Ubuntu jest to <a href="https://pl.wikipedia.org/wiki/Gedit">gedit</a>.</p>
<p>W przypadku tworzenia stron internetowych, przydałby ci się jednak lepszy edytor tekstowy. Polecamy zacząć od <a href="https://code.visualstudio.com/">Visual Studio Code</a>, który jest darmowym edytorem, oferującym podglądy na żywo i podpowiedzi do kodu.</p>
<h3 id="Instalacja_nowoczesnych_przeglądarek_internetowych">Instalacja nowoczesnych przeglądarek internetowych</h3>
<p>Na razie zainstalujemy kilka przeglądarek internetowych, aby przetestować nasz kod. Wybierz swój system operacyjny poniżej i kliknij odpowiednie linki aby pobrać instalatory swoich ulubionych przeglądarek:</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> (System Windows 10 jest domyślnie wyposażony w przeglądarkę Edge; jeśli masz Windows 7 lub nowszy, możesz zainstalować Internet Explorer 11; w przeciwnym razie należy zainstalować alternatywną przeglądarkę).</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 i iOS są domyślnie wyposażone w Safari).</li>
</ul>
<p>Zanim przejdziesz dalej, należy zainstalować co najmniej dwie z tych przeglądarek i mieć je gotowe do testów.</p>
<div class="blockIndicator note">
<p><strong>Uwaga</strong>: Internet Explorer nie jest kompatybilny z niektórymi nowoczesnymi funkcjami sieciowymi i może nie być w stanie uruchomić twojego projektu. Zazwyczaj nie musisz się martwić o to, aby twoje projekty były z nim kompatybilne, ponieważ bardzo niewiele osób nadal z niego korzysta - na pewno nie martw się o niego zbytnio podczas nauki. Czasami możesz natknąć się na projekt, który wymaga wsparcia.</p>
</div>
<h3 id="Instalacja_lokalnego_serwera_sieciowego">Instalacja lokalnego serwera sieciowego</h3>
<p>Niektóre przykłady będą musiały być uruchamiane przez serwer sieciowy, aby działały poprawnie. Możesz dowiedzieć się jak to zrobić w <a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">Jak skonfigurować lokalny serwer testowy?</a></p>
<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p>
<h2 id="W_tym_module">W tym module</h2>
<ul>
<li id="Installing_basic_software"><a href="/pl/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Instalacja podstawowego oprogramowania</a></li>
<li id="What_will_your_website_look_like"><a href="/pl/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Jak będzie wyglądała twoja strona internetowa?</a></li>
<li id="Dealing_with_files"><a href="/pl/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Radzenie sobie z plikami</a></li>
<li id="HTML_basics"><a href="/pl/docs/Learn/Getting_started_with_the_web/HTML_basics">Podstawy HTML</a></li>
<li id="CSS_basics"><a href="/pl/docs/Learn/Getting_started_with_the_web/CSS_basics">Podstawy CSS</a></li>
<li id="JavaScript_basics"><a href="/pl/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Podstawy JavaScript</a></li>
<li id="Publishing_your_website"><a href="/pl/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Publikowanie swojej strony internetowej</a></li>
<li id="How_the_web_works"><a href="/pl/docs/Learn/Getting_started_with_the_web/Jak_dziala_Siec">Jak działa sieć</a></li>
</ul>
|
