Installation grundlegender Software

Ein guter Code-Editor ist für jeden Entwickler eines der wichtigsten Werkzeuge, die auf dem Computer verfügbar sein sollten. Neben dem Schreiben Ihres Codes bieten Code-Editoren eine Vielzahl weiterer Funktionen. Wir haben später in der Serie einen ganzen Artikel dem Thema Code-Editoren gewidmet.

Für den Moment empfehlen wir, dass Sie Visual Studio Code installieren, da es auf verschiedenen Plattformen verfügbar ist, ein großartiges Funktionsset und Unterstützung bietet, und der Editor ist, den wir überwiegend verwenden. Sie sollten dies jetzt installieren, um den Rest dieses Artikels nachvollziehen zu können.

Moderne Webbrowser zur Verfügung zu haben, ist essenziell für die Webentwicklung, damit Sie Ihre Webseiten oder Apps auf den Browsern testen können, mit denen Ihre Besucher darauf zugreifen. Sie müssen auch Ihre Webbrowser auf dem neuesten Stand halten, damit sie die neuesten Webtechnologien unterstützen und die neuesten Sicherheitsupdates angewendet werden.

Für den Anfang sollten Sie ein paar Desktop- und Mobil-/alternative Gerätebrowser installieren, um Ihren Code darin zu testen. Am häufigsten begegnen Ihnen Webbrowser auf Desktop-, Laptop- und mobilen Geräten, aber Sie werden Webbrowser auch auf anderen Geräten wie Tablets, Uhren und Fernsehern finden. Wenn möglich, stellen Sie sicher, dass Sie einen Browser aus jeder Linie installiert haben, um darauf zu testen (sodass Sie nicht nur in mehreren Browsern basierend auf derselben Rendering-Engine testen):

• 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, diese wurden jedoch historisch aufgrund der Regeln des App Stores von Apple alle von Apples WebKit-Engine angetrieben. Zum Zeitpunkt des Schreibens beginnen Browser, Versionen ihrer iOS-Browser basierend auf ihren eigenen Rendering-Engines zu erstellen, aufgrund regulatorischer Ä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 im Browser zur Darstellung dieser Seite kombiniert werden, von einem entfernten Webserver auf einem Server-Computer irgendwo auf der Welt abgerufen. Sie werden lernen, wie das im nächsten Artikel in 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. Einige Beispiele müssen jedoch ü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 bereitzustellen, ist die Verwendung einer Code-Editor-Erweiterung — auf diese Weise ist er direkt in Ihrem Code-Editor verfügbar. Gehen Sie folgendermaßen mit Visual Studio Code vor:

1. Öffnen Sie den Erweiterungen-Bereich mit der Menüoption Ansicht > Erweiterungen.
2. Geben Sie im Suchfeld „live preview“ ein. Das oberste Suchergebnis sollte die Live Preview Erweiterung, erstellt von Microsoft, sein.
3. Klicken Sie auf diese Option, um eine Informationsseite darüber zu öffnen, die erklärt, wie man sie verwendet.
4. Drücken Sie die Installieren-Schaltfläche, um die Erweiterung zu installieren.
5. Wenn Sie jetzt an einer HTML-Datei im Editor arbeiten, sollten Sie 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 bereitstellen, die verwendet werden kann, um Beispiele in jedem verfügbaren 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 müssen oft Bilddateien bearbeiten, um sie auf den von ihnen erstellten Websites zu verwenden. Dies kann oft bedeuten, Grafiken zu entwerfen/erstellen, aber ebenso oft werden die Grafiken von einem Grafikdesigner (dies könnte ein Teammitglied oder ein Dritter sein) bereitgestellt, in diesem Fall kann der Webentwickler gebeten werden, 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.

Es gibt viele Grafikbearbeitungstools. Wir empfehlen, dass Sie kein Geld für ein teures kommerzielles Produkt ausgeben, bis Sie in Ihrem Lernprozess weiter fortgeschritten sind, wenn Sie glauben, dass Sie es wirklich benötigen. Es gibt viele kostenlose Software-Tools und Online-Dienste, die wahrscheinlich für den Einstieg ausreichen.

Zum Beispiel:

• macOS bietet ein Tool namens Preview. Dies wird hauptsächlich zum Anzeigen von Bildern und PDFs verwendet, verfügt jedoch über einige sehr nützliche Funktionen zur Bearbeitung von Bildern, einschließlich Größe ändern, drehen, zuschneiden, kommentieren und zwischen verschiedenen Dateitypen konvertieren.
• 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 oft erledigen müssen, wenn Sie Assets für die Verwendung auf einer Website vorbereiten.

Wenn Sie umfangreichere Grafikbearbeitungs-/Erstellungsanforderungen haben, benötigen Sie ein vollständig funktionsfähiges Grafikpaket. In Bezug auf kommerzielle Angebote war Adobe Photoshop lange Zeit der Industriestandard, und es gibt auch populäre relative Neulinge 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 angesehene kostenlose Apps wie GIMP, Adobe Express, und Paint.NET.

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

Während Versionskontrollwerkzeuge für Webentwicklungsteams unerlässlich sind, müssen Sie sich jetzt noch keine Sorgen darüber machen. Wir haben ein Modul, das sich Versionskontrolle widmet, fast am Ende unserer Core-Module-Serie.

Nachdem Sie die Entwicklung einer Website oder App (auf Ihrem lokalen Computer oder vielleicht auf einem Entwicklungsserver) abgeschlossen haben, 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, von dem Kauf eines Webhosting-Dienstes und der Nutzung einer SFTP-App, der Verwendung eines Dienstes wie GitHub Pages oder Netlify oder sogar der Einrichtung eines schnellen Demos, um es mit anderen zu teilen, indem Sie etwas wie Glitch oder CodePen verwenden.

Eine solche Liste von Optionen mag überwältigend erscheinen, aber keine Sorge — Sie müssen jetzt noch nichts über das Veröffentlichen von Websites wissen. Wir werden uns mit diesem Thema öfter im Verlauf des Kurses beschäftigen. Sie werden bald genug praktische Erfahrungen dazu sammeln, in unserem Modul Ihre erste Website.

• Übersicht: Einrichtung der Umgebung
• Weiter