Installation grundlegender Software

Ein guter Code-Editor ist eines der wichtigsten Werkzeuge, die ein Entwickler auf seinem Computer haben sollte. Neben dem Schreiben Ihres Codes bietet ein Code-Editor eine Vielzahl weiterer Funktionen. Wir haben später in der Serie einen ganzen Artikel den Code-Editoren gewidmet.

Für den Moment empfehlen wir, Visual Studio Code zu installieren, da es plattformübergreifend verfügbar ist, über ein großartiges Funktionsangebot und Unterstützung verfügt und der Editor ist, den wir hauptsächlich verwenden. Sie sollten dies jetzt installieren, um dem Rest dieses Artikels folgen zu können.

Der Zugriff auf moderne Webbrowser ist für die Webentwicklung unerlässlich, damit Sie Ihre Websites oder Apps in den Browsern testen können, die Ihre Besucher nutzen, um darauf zuzugreifen. Sie müssen Ihre Webbrowser auch auf dem neuesten Stand halten, damit sie die neuesten Webtechnologien unterstützen und die neuesten Sicherheitskorrekturen angewendet sind.

Für den Moment sollten Sie ein paar Desktop- und Mobile-/alternative Gerätebrowser installieren, um Ihren Code darin zu testen. Am häufigsten begegnen Ihnen Webbrowser auf Desktop-, Laptop- und Mobilgeräten, aber Sie werden auch Webbrowser auf anderen Geräten wie Tablets, Uhren und Fernsehern finden. Wenn möglich, stellen Sie sicher, dass Sie einen Browser aus jeder Richtung installiert haben und darauf testen können (damit Sie nicht nur in mehreren Browsern testen, die auf der gleichen Rendering-Engine basieren):

• 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 aufgeführten Android-Browser haben iOS-Versionen, aber diese wurden historisch alle von Apples WebKit-Engine unter der Haube betrieben 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 von regulatorischen Änderungen. Siehe Apple erlaubt endlich vollständige Versionen von Chrome und Firefox auf dem iPhone.

Normalerweise, wenn Sie eine Webadresse in einen Browser eingeben, um eine Website zu laden, werden die Dateien, die zur Darstellung dieser Website durch Ihren Browser kombiniert werden, von einem entfernten Webserver abgerufen, der auf einem Servercomputer irgendwo anders auf der Welt gehostet wird. Sie lernen, wie dies in dem nächsten Artikel der Serie funktioniert.

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

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 ist er direkt in Ihrem Code-Editor verfügbar. Gehen Sie in Visual Studio Code wie folgt vor:

1. Öffnen Sie den Bereich Erweiterungen über die Menüoption Ansicht > Erweiterungen.
2. Geben Sie in das "Suchen..."-Feld oben in diesem Bereich "live preview" ein. Das oberste Suchergebnis sollte die Live Preview Erweiterung, erstellt von Microsoft, sein.
3. Klicken Sie auf diese Option, um eine Seite mit Informationen darüber zu öffnen, einschließlich Anweisungen zur Verwendung.
4. Drücken Sie die Installieren Schaltfläche, um die Erweiterung zu installieren.
5. Nun sollten Sie beim Arbeiten an einer HTML-Datei im Editor in der Lage sein, die "Vorschau anzeigen" Schaltfläche 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 Option für einen lokalen Server, der dazu verwendet werden kann, Beispiele in jedem Ihrer Browser zu laden. Für andere Optionen (und mehr Hintergrundinformationen darüber, warum lokale Server notwendig sind), siehe Wie richtet man einen lokalen Testserver ein?.

Webentwickler sind oft gefordert, Bilddateien für die von ihnen erstellten Websites zu bearbeiten. Dies kann bedeuten, grafische Elemente zu entwerfen/erstellen, aber ebenso werden die Grafiken oft von einem Grafikdesigner bereitgestellt (dies kann ein Teammitglied oder eine dritte Person sein), in welchem Fall der Webentwickler möglicherweise gebeten wird, die erhaltenen Dateien zu zuschneiden oder zu ändern.

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

Es gibt viele Grafikbearbeitungswerkzeuge. Wir empfehlen, nicht in ein teures kommerzielles Produkt zu investieren, bis Sie weiter in Ihrem Lernprozess sind, falls Sie wirklich glauben, es zu benötigen. Es gibt viele kostenlose Software-Tools und Online-Dienste, die jetzt wahrscheinlich ausreichend sein werden.

Zum Beispiel:

• macOS wird mit einem Tool namens Vorschau geliefert. Dies wird hauptsächlich für das Anzeigen von Bildern und PDFs verwendet, hat aber auch einige wirklich nützliche Funktionen zur Bildbearbeitung, einschließlich Größenanpassung, Drehen, Zuschneiden, Anmerkungen und Konvertierung 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 beim Vorbereiten von Assets für eine Website erledigen müssen.

Wenn Sie umfangreichere Grafikbearbeitungs-/Erstellungsmöglichkeiten benötigen, möchten Sie ein vollwertiges Grafikpaket. Im kommerziellen Bereich ist Adobe Photoshop seit langem der Industriestandard, und es gibt auch beliebte relativ neue Anbieter wie Figma, Sketch, und Canva.

Wenn Ihr Budget begrenzt ist, haben die meisten der oben genannten Apps 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 werden von Entwicklern verwendet, um Dateien auf Servern zu verwalten, an einem Projekt mit einem Team zu arbeiten, Code und Assets zu teilen und Bearbeitungskonflikte zu vermeiden. Derzeit ist Git das beliebteste Versionskontrollsystem zusammen mit Hosting-Diensten wie GitHub oder GitLab.

Während Versionskontrollwerkzeuge für Webentwickler-Teams unerlässlich sind, brauchen Sie sich jetzt noch keine Sorgen darüber zu machen. Wir haben ein Modul, das der Versionskontrolle gewidmet ist, am Ende unserer Kernmodulserie.

Nachdem Sie die Entwicklung einer Website oder App abgeschlossen haben (auf Ihrem lokalen Computer oder vielleicht auf einem Entwicklungsserver), möchten Sie sie auf einem Remote-Webserver platzieren, damit Ihre Nutzer die Webadresse eingeben und sie im Web anzeigen können!

Es gibt verschiedene Möglichkeiten, dies zu tun, von dem Kauf von Hosting und der Verwendung einer SFTP-App, über die Nutzung eines Dienstes wie GitHub Pages oder Netlify, bis hin zu einem schnellen Demo-Setup, das Sie mit anderen teilen können, indem Sie etwas wie Glitch oder CodePen verwenden.

Eine solche Liste von Optionen kann überwältigend erscheinen, aber keine Sorge – Sie brauchen jetzt nichts über die Veröffentlichung von Websites zu wissen. Wir werden dieses Thema später im Kurs noch viele Male behandeln. Sie werden bald genug praktische Erfahrung damit sammeln, in unserem Ihre erste Website Modul.

• Übersicht: Einrichtungsumgebung
• Weiter