Installation grundlegender Software

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

Voraussetzungen: Grundlegende Vertrautheit mit dem Betriebssystem (OS) Ihres Computers.
Lernziele:
  • Verstehen, welche Software Sie benötigen, um zu beginnen.
  • Einen Code-Editor, einige moderne Browser und einen lokalen Testserver installieren.
  • Möglichkeiten für andere häufige Arten von Apps erkunden.

Code-Editoren

Ein anständiger Code-Editor ist eines der wichtigsten Werkzeuge, das jedem Entwickler zur Verfügung stehen sollte. Neben der Funktion als Ort, an dem Sie Ihren Code schreiben, bieten Code-Editoren eine Vielzahl weiterer Funktionen. Wir haben einen ganzen Artikel zu Code-Editoren später in der Serie gewidmet.

Fürs Erste empfehlen wir, Visual Studio Code zu installieren, da es plattformübergreifend verfügbar ist, eine großartige Funktionspalette und Unterstützung bietet und der Editor ist, den wir hauptsächlich verwenden. Sie sollten es jetzt installieren, um mit dem Rest dieses Artikels Schritt zu halten.

Moderne Webbrowser

Moderne Webbrowser sind essenziell für die Webentwicklung, damit Sie Ihre Websites oder Apps auf den Browsern testen können, die Ihre Besucher zur Zugriff nutzen. Sie müssen auch Ihre Webbrowser aktuell halten, um sicherzustellen, dass sie die neuesten Webtechnologien unterstützen und die neuesten Sicherheitsupdates erhalten haben.

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

Die meisten modernen Browser installieren Updates automatisch und wenden die Änderungen an, wenn sie neu gestartet werden. Sie können in der Regel auf der "Über"-Seite des Browsers nach Updates suchen. Diese befindet sich an leicht unterschiedlichen Orten in verschiedenen Browsern und Betriebssystemen, zum Beispiel:

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

Welche Browser sollten installiert werden

Für den Anfang sollten Sie ein paar Desktop- und mobile/alternative Geräte-Browser installieren, um Ihren Code zu testen. Wenn möglich, installieren Sie mindestens einen Browser aus jedem der zuvor gezeigten Unterpunkte, damit Sie nicht nur in mehreren Browsern testen, die auf derselben 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, von einem entfernten Webserver auf einem Server-Computer irgendwo auf der Welt abgerufen. Sie werden mehr darüber erfahren, wie dies im nächsten Artikel in der Serie funktioniert.

Beim Erstellen einer Website lokal (auf Ihrem eigenen Computer) kann es oft ausreichen, die Haupt-HTML-Index-Datei direkt in einem Browser zu 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 Optionen, die wir gefunden haben, um einen lokalen Server verfügbar zu machen, besteht darin, eine Code-Editor-Erweiterung zu verwenden - auf diese Weise ist er direkt in Ihrem Code-Editor verfügbar. Führen Sie die folgenden Schritte in Visual Studio Code aus:

  1. Öffnen Sie das Erweiterungen-Panel über die Menüoption Ansicht > Erweiterungen.
  2. Geben Sie im Feld "Suche..." oben in diesem Panel "live preview" ein. Das oberste Suchergebnis sollte die von Microsoft erstellte Live Preview Erweiterung sein.
  3. Klicken Sie auf diese Option, um eine Informationsseite darüber zu öffnen, die erklärt, wie sie verwendet wird.
  4. Drücken Sie die Installieren-Taste, um die Erweiterung zu installieren.
  5. Wenn Sie jetzt an einer HTML-Datei im Editor arbeiten, sollten Sie in der Lage sein, auf die Schaltfläche "Vorschau anzeigen" zu klicken, um das Live-Beispiel in einem separaten Tab zu öffnen.

Die obige 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 von Ihnen verfügbaren Browser zu laden. Für andere Optionen (und weitere Hintergrundinformationen darüber, warum lokale Server notwendig sind), siehe Wie richtet man einen lokalen Testserver ein?.

Grafik-Editoren

Webentwickler müssen häufig Bilddateien für die Verwendung auf den von ihnen erstellten Websites bearbeiten. Dies kann oft bedeuten, dass sie Grafikressourcen entwerfen/erstellen, aber ebenso oft werden die Grafiken von einem Grafikdesigner bereitgestellt (dies könnte ein Teamkollege oder ein Drittanbieter sein), in welchem Fall der Webentwickler möglicherweise aufgefordert wird, die erhaltenen Dateien zuzuschneiden oder zu skalieren.

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

Wir empfehlen, dass Sie keinen Grafik-Editor installieren, bis Sie ihn später auf Ihrer Lernreise benötigen. Geben Sie definitiv kein Geld für ein teures kommerzielles Produkt aus, es sei denn, Sie glauben wirklich, dass es Mehrwert bringt.

Es gibt viele kostenlose Software-Tools und Online-Dienste, die wahrscheinlich für den Moment ausreichend sind, zum Beispiel:

  • macOS kommt mit einem Tool namens Vorschau. Es wird hauptsächlich zum Anzeigen von Bildern und PDFs verwendet, bietet aber auch einige wirklich nützliche Funktionen zum Bearbeiten von Bildern, einschließlich Skalieren, Drehen, Zuschneiden, Kommentieren und Konvertieren zwischen verschiedenen Dateitypen.
  • Die eingebaute Windows Fotos-App bietet viele ähnliche Funktionen.
  • Die tinypng-Website bietet einen kostenlosen Dienst zum Komprimieren von PNGs, JPEGs und mehr. Dies ist eine sehr häufige Aufgabe, die Sie erledigen müssen, wenn Sie Ressourcen für die Verwendung auf einer Website vorbereiten.

In Bezug auf kommerzielle Angebote war Adobe Photoshop lange der Branchenstandard, insbesondere für die Fotobearbeitung, während Programme wie Sketch besser für Icon- und UI-Arbeiten geeignet sind. Es gibt auch beliebte Neuzugänge wie Figma, The Affinity Suite und Canva.

Die meisten der oben genannten Apps haben Testversionen oder kostenlose Modi, die es sich lohnt, auszuprobieren. Es gibt auch einige gut bewertete kostenlose Apps wie GIMP, Adobe Express, und Paint.NET.

Versionskontrollwerkzeuge

Versionskontrollwerkzeuge werden von Entwicklern verwendet, um Dateien auf Servern zu verwalten, in einem Team an einem Projekt zusammenzuarbeiten, Code und Ressourcen zu teilen und Bearbeitungskonflikte zu vermeiden. Derzeit ist Git das beliebteste Versionskontrollsystem zusammen mit Hosting-Diensten wie GitHub oder GitLab.

Obwohl Versionskontrollwerkzeuge für Webentwicklungsteams unerlässlich sind, müssen Sie sich im Moment noch nicht darum kümmern. Wir haben ein Modul, das der Versionskontrolle gewidmet ist, und es ist am Ende unserer Serie von Core-Modulen zu finden.

Anwendungsprogramme für die Seiteneinführung

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

Es gibt verschiedene Wege, wie Sie dies tun können, von Hosting-Kauf und Verwendung einer SFTP-App, über die Nutzung eines Dienstes wie GitHub Pages oder Netlify, bis hin zur schnellen Erstellung eines Demos, das Sie mit anderen über etwas wie CodePen oder JSFiddle teilen können.

Eine solche Liste von Optionen mag überwältigend erscheinen, aber keine Sorge - Sie müssen im Moment nichts über die Veröffentlichung von Websites wissen. 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.