Installation von grundlegender Software
In diesem Artikel besprechen wir, welche Software Sie benötigen, um einfache Webentwicklung durchzuführen und was Sie jetzt installieren sollten, einschließlich eines Code-Editors und einiger moderner Webbrowser.
| Voraussetzungen: | Grundlegende Vertrautheit mit Ihrem Computerbetriebssystem (OS). |
|---|---|
| Lernergebnisse: |
|
Code-Editoren
Ein vernünftiger Code-Editor ist eines der wichtigsten Dinge, die jedem Entwickler auf seinem Rechner zur Verfügung stehen sollten. Neben dem Ort, an dem Sie Ihren Code schreiben, verfügen Code-Editoren über eine Vielzahl anderer Funktionen. Wir haben einen ganzen Artikel über Code-Editoren im weiteren Verlauf 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 Support hat und der Editor ist, den wir hauptsächlich verwenden. Sie sollten dies jetzt installieren, um dem Rest dieses Artikels folgen zu können.
Moderne Webbrowser
Moderne Webbrowser verfügbar zu haben, ist unerlässlich für die Webentwicklung, damit Sie Ihre Websites oder Apps in denjenigen Browsern testen können, die Ihre Besucher verwenden, um auf sie zuzugreifen. Sie müssen Ihre Webbrowser auch auf dem neuesten Stand halten, damit sie die neuesten Webtechnologien unterstützen und die neuesten Sicherheitsupdates angewendet sind.
Die gängigsten Browser, die Sie antreffen werden, sind wie folgt:
- Desktop-Browser:
- Auf Chromium-basiert: Google Chrome, Opera, Brave, Microsoft Edge, Vivaldi.
- Auf Gecko-basiert: Mozilla Firefox.
- Auf WebKit-basiert: Apple Safari.
- Mobile/alternative Geräte-Browser:
- Chromium-basiert (Android): Google Chrome, Opera, Brave, Microsoft Edge, Samsung Internet, Vivaldi.
- Gecko-basiert (Android): Mozilla Firefox.
- WebKit-basiert (iOS): Apple Safari.
Hinweis: Die meisten der oben genannten Android-Browser haben auch iOS-Versionen, aber diese wurden historisch alle von Apples WebKit-Engine unter der Haube angetrieben aufgrund von Apples App Store-Regeln. Zum Zeitpunkt des Schreibens beginnen Browser, Versionen ihrer iOS-Browser basierend auf ihren eigenen Rendering-Engines zu erstellen, aufgrund regulatorischer Änderungen. Siehe Apple erlaubt endlich vollständige Versionen von Chrome und Firefox auf dem iPhone.
Die meisten modernen Browser neigen dazu, Updates automatisch zu installieren, und wenden die Änderungen an, wenn sie neu gestartet werden. Sie können normalerweise nach Updates auf der "Über"-Seite des Browsers suchen. Diese ist an leicht unterschiedlichen Stellen in verschiedenen Browsern und Betriebssystemen verfügbar, zum Beispiel:
- Firefox: Verfügbar unter Firefox > Über Firefox auf macOS und Menü-Symbol > Hilfe > Über Firefox unter Windows.
- Chrome: Verfügbar unter Chrome > Über Google Chrome auf macOS und Menü-Symbol > Hilfe > Über Google Chrome unter Windows.
Welche Browser zu installieren sind
Für den Moment sollten Sie ein paar Desktop- und mobile/alternative Geräte-Browser installieren, um Ihren Code darin zu testen. Installieren Sie Browser basierend auf mindestens zwei verschiedenen Rendering-Engines (zum Beispiel Chromium und Gecko), sodass Sie nicht nur in mehreren Browsern basierend auf derselben Rendering-Engine testen. Dies ist wichtig, da Ihr Code Bugs enthalten kann, die nur eine Rendering-Engine betreffen.
WebKit-basierte Browser sind für Windows-, Linux- und Android-Betriebssysteme nicht verfügbar. Wenn Sie Ihren Code in allen drei Haupt-Rendering-Engines testen möchten und Ihr Computer Windows-basiert ist, müssen Sie Zugang zu einem macOS- oder iOS-basierten Testgerät erhalten oder eine softwarebasierte Lösung wie eine virtuelle Maschine oder Plattform verwenden. Sie müssen sich in diesem Stadium jedoch keine Sorgen um umfassendes Testen machen — festzustellen, dass Sie Ihren Code über unterschiedliche Rendering-Engines hinweg testen sollten und etwas Übung zu bekommen, ist jetzt ausreichend.
Sie werden sich im Detail mit Teststrategien in unserem Testing Modul befassen.
Lokale Webserver
Normalerweise, wenn Sie eine Webadresse in einem Browser eingeben, um eine Website zu laden, werden die Dateien, die zusammenkommen, um die Seite in Ihrem Browser darzustellen, von einem entfernten Webserver abgerufen, der auf einem anderen Rechner weltweit gehostet wird. Sie werden im nächsten Artikel der Serie mehr darüber erfahren, wie das funktioniert.
Wenn Sie eine Website lokal (auf Ihrem eigenen Rechner) erstellen, können Sie häufig 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 verfügbar zu machen, ist die Verwendung einer Code-Editor-Erweiterung — auf diese Weise ist er direkt in Ihrem Code-Editor verfügbar. Gehen Sie folgendermaßen vor in Visual Studio Code:
- Öffnen Sie den Erweiterungen-Bereich über die Menüoption Ansicht > Erweiterungen.
- Geben Sie im "Suche..."-Feld oben in diesem Bereich "live preview" ein. Das oberste Suchergebnis sollte die Live Preview Erweiterung sein, erstellt von Microsoft.
- Klicken Sie auf diese Option, um eine Seite mit Informationen darüber zu öffnen, die auch Anweisungen zur Nutzung enthält.
- Drücken Sie die Installieren-Taste, um die Erweiterung zu installieren.
- Jetzt, wenn Sie an einer HTML-Datei im Editor arbeiten, sollten Sie auf die Schaltfläche "Vorschau anzeigen" klicken können, 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, die genutzt 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 richten Sie einen lokalen Testserver ein?.
Grafikeditoren
Webentwickler müssen oft Bilddateien manipulieren für die Nutzung auf den von ihnen erstellten Websites. Dies kann häufig bedeuten, grafische Assets zu 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 Dateien, die sie erhalten, zuzuschneiden oder in der Größe zu ändern.
Kein Lernartikel auf MDN erfordert, dass Sie Ihre eigenen Grafiken erstellen, obwohl einige erfordern könnten, dass Sie die Dateien manipulieren, die wir bereitstellen.
Wir empfehlen, dass Sie keinen Grafikeditor installieren, bis Sie ihn später in Ihrem Lernweg benötigen. Geben Sie sicherlich kein Geld für ein teures kommerzielles Produkt aus, es sei denn, Sie denken, dass es wirklich einen Mehrwert bietet.
Es gibt viele kostenlose Software-Tools und Online-Dienste, die jetzt wahrscheinlich gut genug sein werden, zum Beispiel:
- macOS kommt mit einem Werkzeug namens Vorschau. Dies wird hauptsächlich zum Anzeigen von Bildern und PDFs verwendet, es hat aber auch einige wirklich nützliche Funktionen zur Bildbearbeitung, einschließlich Größenänderung, Drehen, Zuschneiden, Kommentieren und Konvertieren zwischen verschiedenen Dateitypen.
- Die integrierte Windows Fotos-App bietet viele ähnliche Funktionen.
- Die tinypng Website bietet einen kostenlosen Dienst, der es Ihnen ermöglicht, PNGs, JPEGs und mehr zu komprimieren. Dies ist eine sehr häufige Aufgabe, die Sie ausführen müssen, wenn Sie Assets für die Nutzung auf einer Website vorbereiten.
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-Arbeit geeignet sind. Es gibt auch beliebte Neueinsteiger wie Figma, The Affinity Suite und Canva.
Die meisten der oben genannten Apps haben Testversionen oder freie Modi, die es wert sind, erkundet zu werden. Es gibt auch einige gut angesehene kostenlose Apps wie GIMP, Adobe Express und Paint.NET.
Versionskontrollwerkzeuge
Versionskontroll-Werkzeuge werden von Entwicklern verwendet, um Dateien auf Servern zu verwalten, an einem Projekt im Team zusammenzuarbeiten, Code und Assets 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 unverzichtbar sind, brauchen Sie sich jetzt noch nicht darum zu kümmern. Wir haben ein Modul, das sich der Versionskontrolle widmet, gegen Ende unserer Kernmodule-Serie.
Site-Bereitstellungs-Apps
Nachdem Sie die Entwicklung einer Website oder App abgeschlossen haben (auf Ihrem lokalen Computer oder vielleicht auf einem Entwicklungsserver), möchten Sie sie auf einen entfernten Webserver stellen, damit Ihre Benutzer die zugehörige Webadresse eingeben und sie im Web ansehen können!
Es gibt verschiedene Möglichkeiten, dies zu tun, indem Sie Hosting kaufen und eine SFTP-App verwenden, einen Dienst wie GitHub Pages oder Netlify verwenden oder sogar ein schnell erstelltes Demo zum Teilen mit anderen zusammenstellen, indem Sie etwas wie CodePen oder JSFiddle verwenden.
Eine solche Liste von Optionen mag überwältigend erscheinen, aber keine Sorge – Sie müssen jetzt noch nichts über die Veröffentlichung von Websites wissen. Wir werden dieses Thema im Verlauf des Kurses viele Male ansprechen. Sie werden bald genug praktische Erfahrung damit sammeln, in unserem Ihre erste Website Modul.