Installation von grundlegender Software

In diesem Artikel besprechen wir, welche Software Sie benötigen, um einfache Webentwicklung zu betreiben und was Sie jetzt installieren müssen, einschließlich eines Code-Editors und einiger moderner Webbrowser.

Voraussetzungen: Grundlegende Vertrautheit mit Ihrem Computer-Betriebssystem (OS).
Lernergebnisse:
  • Verstehen, welche Software Sie benötigen, um zu beginnen.
  • Einen Code-Editor, einige moderne Browser und einen lokalen Testserver installieren.
  • Optionen für andere gängige Arten von Apps erkunden.

Code-Editoren

Ein ordentlicher Code-Editor ist eines der wichtigsten Werkzeuge, die jedem Entwickler auf seinem Computer zur Verfügung stehen sollten. Neben dem Schreiben Ihres Codes bieten Code-Editoren eine Vielzahl weiterer Funktionen. Wir haben dem Thema Code-Editoren später in der Serie einen ganzen Artikel gewidmet.

Für den Moment empfehlen wir die Installation von Visual Studio Code, da es auf verschiedenen Plattformen verfügbar ist, eine großartige Funktionspalette bietet und der Editor ist, den wir hauptsächlich verwenden. Installieren Sie dies jetzt, um dem Rest dieses Artikels folgen zu können.

Moderne Webbrowser

Moderne Webbrowser zur Verfügung zu haben ist für die Webentwicklung unerlässlich, damit Sie Ihre Websites oder Apps auf den Browsern testen können, die Ihre Besucher verwenden, um darauf zuzugreifen. Sie müssen auch Ihre Webbrowser auf dem neuesten Stand halten, damit sie die neuesten Webtechnologien unterstützen und die neuesten Sicherheitsupdates angewendet sind.

Die gängigsten Browser, auf die Sie stoßen werden, sind folgende:

Die meisten modernen Browser neigen dazu, Updates automatisch zu installieren und die Änderungen anzuwenden, wenn sie neu gestartet werden. Sie können normalerweise in der „Über“-Seite des Browsers nach Updates suchen, die an leicht unterschiedlichen Orten in verschiedenen Browsern und Betriebssystemen verfügbar ist, zum Beispiel:

  • Firefox: Verfügbar unter Firefox > Über Firefox auf macOS und Menüicon > Hilfe > Über Firefox unter Windows.
  • Chrome: Verfügbar unter Chrome > Über Google Chrome auf macOS und Menüicon > Hilfe > Über Google Chrome unter Windows.

Welche Browser zu installieren sind

Für den Moment sollten Sie ein paar Desktop- und Mobile/alternative Gerät-Browser installieren, um Ihren Code darin zu testen. Wenn möglich, installieren Sie mindestens einen Browser aus jedem der vorherigen Unterpunkte, damit Sie nicht nur in mehreren Browsern testen, die auf der gleichen Rendering-Engine basieren.

Lokale Webserver

Normalerweise, wenn Sie eine Webadresse in einem Browser eingeben, um eine Website zu laden, werden die Dateien, die von Ihrem Browser kombiniert werden, um diese Seite darzustellen, von einem entfernten Webserver abgerufen, der auf einem Servercomputer irgendwo anders auf der Welt gehostet wird. Sie lernen mehr darüber im nächsten Artikel der Serie.

Wenn Sie eine Website lokal (auf Ihrem eigenen Computer) erstellen, können Sie oft die Haupt-HTML-Indexdatei direkt in einem Browser laden, um sie zu testen. Einige Beispiele müssen jedoch über einen lokal installierten Webserver ausgeführt werden, um erfolgreich zu funktionieren.

Installation eines lokalen Webservers

Eine der einfachsten Möglichkeiten, die wir gefunden haben, um einen lokalen Server verfügbar zu machen, ist die Verwendung einer Code-Editor-Erweiterung - auf diese Weise steht er direkt in Ihrem Code-Editor zur Verfügung. Machen Sie Folgendes in Visual Studio Code:

  1. Öffnen Sie den Erweiterungen-Bereich über das Menü Ansicht > Erweiterungen.
  2. Geben Sie im "Suchen..."-Feld oben in diesem Bereich "live preview" ein. Das oberste Suchresultat sollte die Live Preview Erweiterung von Microsoft sein.
  3. Klicken Sie auf diese Option, um eine Informationsseite darüber zu öffnen, die erklärt, wie man sie verwendet.
  4. Drücken Sie den Installieren-Button, um die Erweiterung zu installieren.
  5. Jetzt, wenn Sie an einer HTML-Datei im Editor arbeiten, sollten Sie den "Vorschau anzeigen"-Button klicken können, um das Live-Beispiel in einem separaten Tab zu öffnen.

Die oben genannte Option ist einfach, aber nicht sehr flexibel. In Zukunft möchten Sie möglicherweise eine flexiblere lokale Serveroption haben, die verwendet werden kann, um Beispiele in jedem Browser zu laden, den Sie haben. Für andere Optionen (und mehr Hintergrundinformationen, warum lokale Server notwendig sind), siehe Wie richtet man einen lokalen Testserver ein?.

Grafik-Editoren

Webentwickler sind oft aufgefordert, Bilddateien für die Verwendung auf den von ihnen erstellten Websites zu bearbeiten. Dies kann oft bedeuten, grafische Assets zu entwerfen/erstellen, aber genauso oft werden die Grafiken von einem Grafikdesigner bereitgestellt (dies könnte ein Teamkollege oder ein Dritter sein), in welchem Fall der Webentwickler möglicherweise aufgefordert wird, die ihm zur Verfügung gestellten Dateien zuzuschneiden oder deren Größe zu ändern.

Keiner der Lernartikel auf MDN erfordert, dass Sie Ihre eigenen Grafiken erstellen, obwohl einige von ihnen möglicherweise verlangen, dass Sie die von uns bereitgestellten Dateien bearbeiten.

Wir empfehlen, dass Sie keinen Grafik-Editor installieren, bis Sie ihn später in Ihrem Lernprozess benötigen. Geben Sie sicherlich kein Geld für ein teures kommerzielles Produkt aus, es sei denn, Sie glauben wirklich, dass es einen Mehrwert bietet.

Es gibt viele kostenlose Softwaretools und Online-Dienste, die wahrscheinlich für jetzt gut genug sind, zum Beispiel:

  • macOS kommt mit einem Tool namens Vorschau. Dies wird hauptsächlich zum Anzeigen von Bildern und PDFs verwendet, hat aber auch einige sehr nützliche Funktionen zur Bildbearbeitung, einschließlich Größenanpassung, Drehen, Zuschneiden, Anmerkungen und Konvertieren zwischen verschiedenen Dateitypen.
  • Die integrierte Windows Fotos-App bietet viele ähnliche Funktionen.
  • Die Website tinypng bietet einen kostenlosen Dienst, mit dem Sie PNGs, JPEGs und mehr komprimieren können. Dies ist eine sehr häufige Aufgabe, die Sie erledigen müssen, wenn Sie Assets für die Verwendung auf einer Website vorbereiten.

Was kommerzielle Angebote betrifft, so ist Adobe Photoshop seit langem der Industriestandard, insbesondere für die Fotobearbeitung, während Programme wie Sketch besser für Icons- und UI-Arbeiten geeignet sind. Es gibt auch beliebte Neulinge wie Figma, Das Affinity-Suite, und Canva.

Die meisten der oben genannten Apps haben Testversionen oder kostenlose Modi, die es wert sind, erkundet zu werden. Es gibt auch einige hoch angesehene kostenlose Apps wie GIMP, Adobe Express, und Paint.NET.

Versionskontrollwerkzeuge

Versionskontroll-Tools werden von Entwicklern verwendet, um Dateien auf Servern zu verwalten, in einem Team an einem Projekt zu kollaborieren, Code und Assets zu teilen und Bearbeitungskonflikte zu vermeiden. Gerade jetzt ist Git das beliebteste Versionskontrollsystem zusammen mit Hosting-Diensten wie GitHub oder GitLab.

Während Versionskontrollwerkzeuge für Webentwicklungsteams unerlässlich sind, müssen Sie sich darüber derzeit keine Gedanken machen. Wir haben ein Modul, das sich Versionskontrolle am Ende unserer Core-Modul-Reihe widmet.

Site-Bereitstellungsanwendungen

Nachdem Sie eine Website oder App fertig entwickelt haben (auf Ihrem lokalen Computer oder vielleicht auf einem Entwicklungsserver), möchten Sie sie auf einen entfernten Webserver übertragen, damit Ihre Benutzer die zugeordnete Webadresse eingeben und sie im Web ansehen können!

Es gibt verschiedene Möglichkeiten, dies zu tun, von dem Kauf von Hosting und der Nutzung einer SFTP-Anwendung, der Nutzung eines Dienstes wie GitHub Pages oder Netlify, bis hin zur schnellen Erstellung einer Demo, die Sie mit anderen teilen können, mithilfe von Glitch oder CodePen.

Eine solche Liste von Optionen mag überwältigend erscheinen, aber keine Sorge — Sie müssen sich gerade jetzt keine Gedanken über das Veröffentlichen von Websites machen. Wir werden dieses Thema später im Kurs viele Male betrachten. Sie werden bald genug praktische Erfahrungen damit sammeln, in unserem Ihre erste Website Modul.