Installation von grundlegender Software

Ein guter Code-Editor ist eine der wichtigsten Ressourcen, die ein Entwickler auf seinem Rechner zur Verfügung haben sollte. Neben dem Schreiben des Codes bieten Code-Editoren eine Vielzahl weiterer Funktionalitäten. Wir haben diesem Thema später in der Serie einen eigenen Artikel gewidmet.

Vorerst empfehlen wir Ihnen, Visual Studio Code zu installieren, da es plattformübergreifend verfügbar ist, über eine großartige Ausstattung und Unterstützung verfügt und der Editor ist, den wir hauptsächlich verwenden. Sie sollten diesen jetzt installieren, um den 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 auf den Browsern testen können, die Ihre Besucher verwenden, um auf sie zuzugreifen. Sie müssen Ihre Webbrowser auch aktualisiert halten, damit sie die neuesten Webtechnologien unterstützen und die neuesten Sicherheitsupdates enthalten.

Fürs Erste sollten Sie ein paar Desktop- und mobile/alternative Browser installieren, um Ihren Code zu testen. Webbrowser findet man am häufigsten auf Desktops, Laptops und mobilen Geräten, aber auch auf anderen Geräten wie Tablets, Uhren und Fernsehgeräten. Wenn möglich, stellen Sie sicher, dass Sie einen Browser aus jeder Reihe installiert und zum Testen verfügbar haben (so dass Sie nicht nur in mehreren Browsern testen, die auf derselben 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 genannten Android-Browser haben iOS-Versionen, die aber historisch gesehen alle von Apples WebKit Engine angetrieben wurden, aufgrund der Regeln des Apple App Stores. Zum Zeitpunkt des Schreibens beginnen Browser, 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.

Normalerweise, wenn Sie eine Webadresse in einen Browser eingeben, um eine Website zu laden, werden die Dateien, die kombiniert werden, um diese Seite anzuzeigen, von einem entfernten Webserver abgerufen, der sich auf einem anderen Servercomputer irgendwo auf der Welt befindet. Sie werden mehr darüber lernen, wie das funktioniert, im nächsten Artikel dieser Serie.

Wenn Sie eine Website lokal (auf Ihrem eigenen Rechner) 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.

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 sie direkt in Ihrem Code-Editor verfügbar. Gehen Sie folgendermaßen in Visual Studio Code vor:

1. Öffnen Sie den Erweiterungen-Bereich über die Menüoption Ansicht > Erweiterungen.
2. Geben Sie im "Suche..."-Feld oben in diesem Bereich "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 sie verwenden.
4. Drücken Sie die Schaltfläche Installieren, um die Erweiterung zu installieren.
5. Jetzt sollten Sie, wenn Sie an einer HTML-Datei im Editor arbeiten, die Schaltfläche "Show Preview" anklicken 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 verwenden, die verwendet werden kann, um Beispiele in jedem Browser zu laden, den Sie haben. Für weitere Optionen (und mehr Hintergrundinformationen darüber, warum lokale Server notwendig sind), siehe Wie richtet man einen lokalen Testserver ein?.

Webentwickler werden oft dazu aufgefordert, Bilddateien für die Nutzung auf den von ihnen erstellten Websites zu bearbeiten. Dies kann häufig bedeuten, dass sie grafische Ressourcen entwerfen/erstellen, aber auch, dass die Grafiken oft von einem Grafikdesigner bereitgestellt werden (dies könnte ein Teammitglied oder ein Dritter sein), in welchem Fall der Webentwickler möglicherweise beauftragt wird, die empfangenen 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 Dateien bearbeiten, die wir bereitstellen.

Es gibt viele Werkzeuge zur Bildbearbeitung. Wir würden Ihnen empfehlen, kein Geld für ein teures kommerzielles Produkt auszugeben, bis Sie weiter in Ihrer Lernreise vorangeschritten sind, falls Sie das Gefühl haben, es wirklich zu benötigen. Es gibt viele kostenlose Software-Tools und Online-Dienste, die für den Moment wahrscheinlich ausreichen.

Zum Beispiel:

• macOS wird mit einem Tool namens Vorschau geliefert. Dieses wird hauptsächlich zum Betrachten von Bildern und PDFs verwendet, hat aber auch einige wirklich nützliche Funktionen zur Bildbearbeitung, einschließlich Größenänderung, Drehung, Zuschneiden, Kommentieren und Konvertierung zwischen verschiedenen Dateitypen.
• Die eingebaute 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 erledigen müssen, wenn Sie Assets für die Nutzung auf einer Website vorbereiten.

Wenn Sie umfangreichere Anforderungen an die Erstellung/Bearbeitung von Grafiken haben, benötigen Sie ein vollwertiges Grafikpaket. In Bezug auf kommerzielle Angebote 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, bieten die meisten der oben genannten Apps Testversionen oder kostenlose Modi an, 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 zusammenzuarbeiten, Code und Ressourcen zu teilen und Bearbeitungskonflikte zu vermeiden. Zurzeit 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 jetzt noch keine Sorgen darüber machen. Wir haben ein Modul, das sich mit Versionskontrolle am Ende unserer Core-Module-Serie beschäftigt.

Nachdem Sie die Entwicklung einer Website oder einer App (auf Ihrem lokalen Computer oder vielleicht auf einem Entwicklungsserver) abgeschlossen haben, möchten Sie diese auf einen entfernten Webserver übertragen, damit Ihre Benutzer die mit ihr verknüpfte Webadresse eingeben und sie im Web ansehen können!

Es gibt verschiedene Möglichkeiten, dies zu tun, angefangen beim Kauf von Hosting und der Verwendung einer SFTP-App, über die Nutzung eines Dienstes wie GitHub Pages oder Netlify, bis hin zur Einrichtung einer schnellen Demo zum Teilen mit anderen, indem Sie etwas wie Glitch oder CodePen verwenden.

Eine solche Liste von Optionen mag überwältigend erscheinen, aber keine Sorge – Sie müssen jetzt nichts über die Veröffentlichung von Websites wissen. Wir werden uns diesem Thema viele Male später im Kurs widmen. Sie werden bald genug praktische Erfahrungen damit sammeln, in unserem Modul Ihre erste Website.

• Übersicht: Einrichtungsumgebung
• Weiter