Installation von grundlegender Software
In diesem Artikel besprechen wir, welche Software Sie für die einfache Webentwicklung benötigen und was Sie jetzt installieren müssen, einschließlich eines Code-Editors und einiger moderner Webbrowser.
| Voraussetzungen: | Grundlegende Vertrautheit mit Ihrem Computer-Betriebssystem (OS). |
|---|---|
| Lernziele: |
|
Code-Editoren
Ein guter Code-Editor ist eines der wichtigsten Dinge, die ein Entwickler auf seinem Computer haben sollte. Neben dem Ort, an dem Sie Ihren Code schreiben, bieten Code-Editoren eine Vielzahl weiterer Funktionen. Wir haben einen ganzen Artikel den Code-Editoren später in der Serie gewidmet.
Für den Moment empfehlen wir Ihnen, Visual Studio Code zu installieren, da es plattformübergreifend verfügbar ist, ein großartiges Funktionsset und Unterstützung bietet und der Editor ist, den wir hauptsächlich verwenden. Sie sollten dies jetzt installieren, um dem Rest dieses Artikels zu folgen.
Moderne Webbrowser
Moderne Webbrowser bereitzuhalten ist für die Webentwicklung unerlässlich, damit Sie Ihre Websites oder Apps auf den Browsern testen können, die Ihre Besucher zum Zugriff darauf verwenden. Sie müssen auch sicherstellen, dass Ihre Browser auf dem neuesten Stand sind, damit sie die neuesten Webtechnologien unterstützen und die neuesten Sicherheitsupdates enthalten.
Die häufigsten Browser, auf die Sie stoßen werden, sind wie folgt:
- Desktop-Browser:
- Chromium: Google Chrome, Opera, Brave, Microsoft Edge, Vivaldi.
- Gecko: Mozilla Firefox.
- WebKit: Apple Safari.
- Mobile/alternative Gerätebrowser:
-
Chromium (Android): Google Chrome, Opera, Brave, Microsoft Edge, Samsung Internet, Vivaldi.
-
Gecko (Android): Mozilla Firefox.
-
WebKit (iOS): Apple Safari.
Hinweis: Die meisten der oben genannten Android-Browser haben iOS-Versionen, waren aber historisch bedingt alle unter der Haube mit Apples WebKit-Engine aufgrund von Apples App-Store-Regeln ausgestattet. Zum Zeitpunkt des Schreibens beginnen Browser damit, Versionen ihrer iOS-Browser basierend auf ihren eigenen Rendering-Engines zu erstellen, aufgrund von Regulierungsänderungen. Siehe Apple is finally allowing full versions of Chrome and Firefox to run on the iPhone.
-
Die meisten modernen Browser neigen dazu, Updates automatisch zu installieren und die Änderungen beim Neustart anzuwenden. Sie können normalerweise auf der "Über"-Seite des Browsers nach Updates suchen. Diese befindet sich an leicht unterschiedlichen Stellen in verschiedenen Browsern und Betriebssystemen, zum Beispiel:
- Firefox: Verfügbar unter Firefox > Über Firefox auf macOS und Menü-Symbol > Hilfe > Über Firefox auf Windows.
- Chrome: Verfügbar unter Chrome > Über Google Chrome auf macOS und Menü-Symbol > Hilfe > Über Google Chrome auf Windows.
Welche Browser zu installieren
Für den Moment sollten Sie ein paar Desktop- und mobile/alternative Gerätebrowser installieren, um Ihren Code darin 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 der gleichen Rendering-Engine basieren.
Lokale Webserver
Normalerweise, wenn Sie eine Webadresse in einen 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 in der Welt gehostet wird. Sie lernen im nächsten Artikel der Serie mehr darüber, wie dies funktioniert.
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 Optionen, die wir gefunden haben, um einen lokalen Server bereitzustellen, ist die Verwendung einer Code-Editor-Erweiterung – auf diese Weise ist sie direkt innerhalb Ihres Code-Editors verfügbar. Gehen Sie wie folgt in Visual Studio Code vor:
- Öffnen Sie den Erweiterungen-Bereich mithilfe der Menüoption Ansicht > Erweiterungen.
- Geben Sie im Suchfeld oben in diesem Bereich "live preview" ein. Das oberste Suchergebnis sollte die Live Preview-Erweiterung von Microsoft sein.
- Klicken Sie auf diese Option, um eine Seite mit Informationen darüber zu öffnen, die erläutert, wie man sie benutzt.
- Drücken Sie die Installieren-Schaltfläche, um die Erweiterung zu installieren.
- Jetzt sollten Sie, wenn Sie an einer HTML-Datei im Editor arbeiten, 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 vielleicht 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 darüber, warum lokale Server notwendig sind), siehe Wie richtet man einen lokalen Testserver ein?.
Grafik-Editoren
Webentwickler müssen häufig Bilddateien bearbeiten, um sie auf den von ihnen erstellten Websites zu verwenden. Dies kann oft bedeuten, grafische Assets zu entwerfen/erstellen, aber auch die Grafiken werden oft von einem Grafikdesigner bereitgestellt (dies könnte ein Teamkollege oder ein Dritter sein), in welchem Fall der Webentwickler möglicherweise aufgefordert wird, die erhaltenen Dateien zuzuschneiden oder deren Größe zu ändern.
Keiner der Lernartikel auf MDN erfordert, dass Sie Ihre eigenen Grafiken erstellen, obwohl einige von ihnen verlangen könnten, dass Sie die von uns bereitgestellten Dateien bearbeiten.
Wir empfehlen Ihnen, keinen Grafik-Editor zu installieren, bevor 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 sind wirklich der Meinung, dass es einen Mehrwert bringen wird.
Es gibt viele kostenlose Softwaretools und Online-Dienste, die wahrscheinlich für den Moment gut genug sind, zum Beispiel:
- macOS wird mit einem Werkzeug namens Vorschau geliefert. Dieses wird hauptsächlich für das Ansehen von Bildern und PDFs verwendet, hat aber auch einige sehr nützliche Funktionen für die Bildbearbeitung, einschließlich Größenänderung, Drehen, Zuschneiden, Anmerkungen und Konvertieren zwischen verschiedenen Dateitypen.
- Die integrierte Windows Fotos-App bietet viele ähnliche Funktionen.
- Die tinypng-Website bietet einen kostenlosen Dienst, mit dem Sie PNGs, JPEGs und mehr komprimieren können. Dies ist eine sehr häufige Aufgabe, die Sie beim Vorbereiten von Assets für die Verwendung auf einer Website ausführen müssen.
In Bezug auf kommerzielle Angebote ist Adobe Photoshop seit langem der Industriestandard, 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 wert sind, erkundet zu werden. Es gibt auch einige anerkannte kostenlose Apps wie GIMP, Adobe Express und Paint.NET.
Versionskontrollwerkzeuge
Versionskontroll-Tools werden von Entwicklern verwendet, um Dateien auf Servern zu verwalten, an einem Projekt mit einem Team zusammenzuarbeiten, Code und Assets zu teilen und Bearbeitungskonflikte zu vermeiden. Zurzeit 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 jetzt keine Sorgen darüber machen. Wir haben ein Modul speziell über Versionskontrolle am Ende unserer Kernmodule-Serie.
Site-Deployment-Apps
Nachdem Sie die Entwicklung einer Website oder App (auf Ihrem lokalen Computer oder möglicherweise auf einem Entwicklungsserver) abgeschlossen haben, möchten Sie sie auf einen entfernten Webserver übertragen, damit Ihre Benutzer die zugehörige Webadresse eingeben und sie im Internet aufrufen können!
Es gibt verschiedene Möglichkeiten, dies zu tun, vom Kauf von Hosting und der Verwendung einer SFTP-App, über die Verwendung eines Dienstes wie GitHub Pages oder Netlify, bis hin zum schnellen Zusammenstellen einer Demo, die Sie mit anderen teilen können, mit etwas wie CodePen oder JSFiddle.
Eine solche Liste von Optionen mag überwältigend erscheinen, aber machen Sie sich keine Sorgen – Sie müssen jetzt noch nichts über die Veröffentlichung von Websites wissen. Wir werden dieses Thema im Laufe des Kurses mehrfach behandeln. Sie werden bald praktische Erfahrungen damit sammeln, in unserem Ihr erstes Projekt Modul.