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
|
---
title: Notwendige Software installieren
slug: Learn/Getting_started_with_the_web/Installing_basic_software
tags:
- Anfänger
- Beginner
- Browser
- Einrichtung
- Erste Schritte
- Grundlagen
- Lernen
- Setup
- Webentwicklung
- 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>In <em>Notwendige Software installieren</em>, zeigen wir Ihnen, welche Werkzeuge Sie für einfache Aufgaben in der Webentwicklung brauchen und wie Sie diese korrekt installieren.</p>
</div>
<h2 id="Welche_Werkzeuge_nutzen_professionelle_Entwickler">Welche Werkzeuge nutzen professionelle Entwickler?</h2>
<ul>
<li><strong>Einen eigenen Computer</strong>. Vielleicht scheint das offensichtlich, aber manch einer liest diesen Artikel möglicherweise auf dem Smartphone oder auf einem Computer in der Bibliothek. Für ernsthafte Webentwicklung ist es sinnvoll, in einen eigenen Computer zu investieren.</li>
<li><strong>Ein Texteditor</strong>, um Code zu schreiben. Das kann ein freier Editor sein (z.B. <a href="http://notepad-plus-plus.org/" rel="noreferrer">Notepad++</a>, <a href="https://wiki.gnome.org/Apps/Gedit" rel="noreferrer">gedit</a>, <a href="http://brackets.io/" rel="noreferrer">Brackets</a>, <a href="/de/docs/" rel="noreferrer">Atom</a> oder <a href="https://code.visualstudio.com/" rel="noreferrer">Visual Studio Code</a>), ein kommerzieller Editor (<a href="http://www.sublimetext.com/" rel="noreferrer">Sublime Text</a> oder <a href="https://panic.com/coda/" rel="noreferrer">Coda</a>) oder ein grafischer/hybrider Editor (<a href="http://www.adobe.com/uk/products/dreamweaver.html" rel="noreferrer">Dreamweaver</a> oder <a href="https://www.jetbrains.com/webstorm/" rel="noreferrer">WebStorm</a>).</li>
<li><strong>Web Browser</strong>, um den Code auszuprobieren. Die meistgenutzten Browser sind momentan <a href="https://www.mozilla.org/en-US/firefox/new/" rel="noreferrer">Firefox</a>, <a href="https://www.google.com/chrome/browser/" rel="noreferrer">Chrome</a>, <a href="http://www.opera.com/" rel="noreferrer">Opera</a>, <a href="https://www.apple.com/safari/" rel="noreferrer">Safari</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie" rel="noreferrer">Internet Explorer</a> und <a href="https://www.microsoft.com/en-us/windows/microsoft-edge" rel="noreferrer">Microsoft Edge</a>. Sie sollten auch testen, wie Ihre Seite auf mobilen Geräten aussieht und ob sie auf älteren Browsern funktioniert, die Ihre Zielgruppe vielleicht noch ausgiebig nutzt (wie z.B. IE 7-10)</li>
<li><strong>Ein Bildbearbeitungsprogramm</strong> wie <a href="http://www.gimp.org/" rel="noreferrer">The Gimp</a>, <a href="http://pinta-project.com/" rel="noreferrer">Pinta</a>, <a href="http://www.getpaint.net/" rel="noreferrer">Paint.NET</a> oder <a href="http://www.adobe.com/uk/products/photoshop.html" rel="noreferrer">Photoshop</a>, um Bilder und Grafiken für Ihre Webiste zu erstellen.</li>
<li><strong>Ein Versionierungssystem</strong>, um im Team an einem Projekt zu arbeiten, Code und Inhalte zu teilen und um Editierkonflikte zu vermeiden. Momentan ist <a href="http://git-scm.com/" rel="noreferrer">Git</a> das populärste Versionierungssystem und der <a href="https://github.com/" rel="noreferrer">GitHub</a> Code Hosting Service, welcher auf <a href="http://git-scm.com/" rel="noreferrer">Git</a> basiert, ist ebenso populär.</li>
<li><strong>Ein FTP-Programm</strong>, um Websites auf einen Server zu laden, sodass andere darauf zugreifen können. Es gibt etliche solcher Programme wie <a href="https://cyberduck.io/" rel="noreferrer">Cyberduck</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/fireftp/" rel="noreferrer">FireFTP</a> und <a href="https://filezilla-project.org/" rel="noreferrer">FileZilla</a>.</li>
<li><strong>Ein Automatisierungssystem</strong>, wie <a href="http://gruntjs.com/" rel="noreferrer">Grunt</a> oder <a href="http://gulpjs.com/" rel="noreferrer">Gulp</a>, um wiederkehrende Aufgaben zu automatisieren, wie z.B. die Komprimierung von Code oder das Testen.</li>
<li>Vorlagen, Bibliotheken und Frameworks, um oft benötigte Funktionen bereitzustellen</li>
<li>Darüber hinaus weitere Anwendungen!</li>
</ul>
<h2 id="Welche_Werkzeuge_brauche_ich_jetzt_wirklich">Welche Werkzeuge brauche ich jetzt wirklich?</h2>
<p>Die Liste an möglichen Werkzeugen wirkt einschüchternd, aber glücklicherweise können Sie mit der Webentwicklung anfangen, ohne die meisten dieser Werkzeuge kennen zu müssen. In diesem Artikel werden wir nur eine grundlegendste Ausstattung installieren: Einen Texteditor und einige moderne Webbrowser.</p>
<h3 id="Einen_Texteditor_installieren">Einen Texteditor installieren</h3>
<p>Sie haben vermutlich schon einen Texteditor auf Ihrem Computer. Windows hat <a href="http://en.wikipedia.org/wiki/Notepad_%28software%29" rel="noreferrer">Notepad</a>, Mac OS X kommt mit <a href="http://en.wikipedia.org/wiki/TextEdit" rel="noreferrer">TextEdit</a>. Linux-Distributionen haben verschiedene Editoren; Ubuntu hat z.B. <a href="http://en.wikipedia.org/wiki/Gedit" rel="noreferrer">gedit</a> vorinstalliert.</p>
<p>Für die Webentwicklung gibt es bessere Editoren als Notepad oder TextEdit. Auf Windows ist <a href="http://notepad-plus-plus.org/" rel="noreferrer">Notepad++ </a>sehr beliebt. Unter allen größeren Betriebssystemen laufen <a href="http://brackets.io/" rel="noreferrer">Brackets</a> und <a href="https://atom.io/" rel="noreferrer">Atom</a>. Diese Editoren sind frei verfügbar und helfen Ihnen beim Schreiben von Code besser als die Standard-Texteditoren.</p>
<h3 id="Installieren_von_modernen_Browsern">Installieren von modernen Browsern</h3>
<p>Zum Testen von Codes sollten Sie einen oder besser mehrere moderne Browser installieren.</p>
<ul>
<li>Linux: <a href="https://www.mozilla.org/en-US/firefox/new/" rel="noreferrer">Firefox</a>, <a href="https://www.google.com/chrome/browser/" rel="noreferrer">Chrome</a>, Chromium (via Package-Manager), <a href="http://www.opera.com/" rel="noreferrer">Opera</a>.</li>
<li>Windows: <a href="https://www.mozilla.org/en-US/firefox/new/" rel="noreferrer">Firefox</a>, <a href="https://www.google.com/chrome/browser/" rel="noreferrer">Chrome</a>, <a href="http://www.opera.com/" rel="noreferrer">Opera</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie" rel="noreferrer">Internet Explorer</a> (wenn Sie Windows 8 haben, können Sie IE 10 oder höher installieren; wenn nicht, installieren Sie einen anderen Browser)</li>
<li>Mac: <a href="https://www.mozilla.org/en-US/firefox/new/" rel="noreferrer">Firefox</a>, <a href="https://www.google.com/chrome/browser/" rel="noreferrer">Chrome</a>, <a href="http://www.opera.com/" rel="noreferrer">Opera</a>, <a href="https://www.apple.com/safari/" rel="noreferrer">Safari</a> (Safari ist bei iOS und OS X der mitgelieferte Standard-Browser)</li>
</ul>
<p>Bevor Sie weitermachen, sollten Sie mindestens zwei dieser Browser installiert haben, damit Sie Ihren Code testen können.</p>
<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div>
|
