Installation von grundlegender Software

Ein anständiger Code-Editor ist eines der wichtigsten Werkzeuge, die jeder Entwickler auf seinem Rechner verfügbar haben sollte. Neben dem eigentlichen Schreibprozess des Codes bieten Code-Editoren eine Vielzahl weiterer Funktionen an. Wir haben einen ganzen Artikel zu Code-Editoren später in der Serie gewidmet.

Für den Moment empfehlen wir, dass Sie Visual Studio Code installieren, da es plattformübergreifend verfügbar ist, eine großartige Ausstattung und Unterstützung bietet und der Editor ist, den wir hauptsächlich verwenden. Sie sollten dies jetzt installieren, um den Rest dieses Artikels nachvollziehen zu können.

Moderne Webbrowser zur Verfügung zu haben, ist entscheidend für die Webentwicklung, damit Sie Ihre Websites oder Apps in den Browsern testen können, die Ihre Besucher nutzen, um auf sie zuzugreifen. Sie müssen auch Ihre Webbrowser auf dem neuesten Stand halten, damit sie die neuesten Webtechnologien unterstützen und die neuesten Sicherheitsupdates angewendet haben.

Im Moment sollten Sie ein paar Desktop- und mobile/alternative Gerätebrowser installieren, um Ihren Code darin zu testen. Am häufigsten stoßen Sie auf Webbrowser auf Desktop-, Laptop- und Mobilgeräten, aber Sie werden auch auf Webbrowser auf anderen Geräten wie Tablets, Uhren und Fernsehern stoßen. Wenn möglich, stellen Sie sicher, dass Sie einen Browser aus jeder Linie installiert und verfügbar haben, um darauf zu testen (sodass 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äte-Browser:
  • 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, waren aber historisch gesehen alle mit der WebKit-Engine von Apple aufgrund der App-Store-Regeln von Apple betrieben. Zum Zeitpunkt des Schreibens beginnen Browser, Versionen ihrer iOS-Browser basierend auf ihren eigenen Rendering-Engines zu erstellen, aufgrund regulatorischer Änderungen. Siehe Apple ermöglicht endlich die vollständige Version von Chrome und Firefox auf dem iPhone.

Normalerweise, wenn Sie eine Webadresse in einem Browser eingeben, um eine Website zu laden, werden die Dateien, die von Ihrem Browser zusammengeführt werden, um diese Website darzustellen, von einem entfernten Webserver abgerufen, der auf einem Serverrechner irgendwo auf der Welt gehostet wird. Sie lernen mehr darüber, wie dies funktioniert, im nächsten Artikel der 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 er direkt in Ihrem Code-Editor verfügbar. Gehen Sie wie folgt vor in Visual Studio Code:

1. Öffnen Sie den Erweiterungen-Bereich mithilfe der Menüoption Ansicht > Erweiterungen.
2. Geben Sie im Suchfeld „Search...“ oben in diesem Bereich „live preview“ ein. Das oberste Suchergebnis sollte die Live Preview-Erweiterung von Microsoft sein.
3. Klicken Sie auf diese Option, um eine Seite mit Informationen darüber zu öffnen, die erklärt, wie sie verwendet wird.
4. Drücken Sie die Schaltfläche Installieren, um die Erweiterung zu installieren.
5. Wenn Sie jetzt 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 besonders flexibel. In Zukunft möchten Sie möglicherweise eine flexiblere lokale Serveroption verfügbar machen, die verwendet werden kann, um Beispiele in jedem Browser zu laden, den Sie zur Verfügung haben. Weitere Optionen (und mehr Hintergrundinformationen darüber, warum lokale Server notwendig sind) finden Sie unter Wie richten Sie einen lokalen Testserver ein?.

Webentwickler müssen häufig Bilddateien für die Verwendung auf den von ihnen erstellten Websites bearbeiten. Dies kann oft das Entwerfen/Erstellen von Grafikmaterialien bedeuten, aber genauso oft werden die Grafiken von einem Grafikdesigner zur Verfügung gestellt (dies könnte ein Teamkollege oder ein Dritter sein), in diesem Fall kann der Webentwickler aufgefordert 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 Grafikbearbeitungswerkzeuge. Wir würden empfehlen, dass Sie kein Geld für ein teures kommerzielles Produkt ausgeben, bis Sie weiter in Ihrer Lernreise fortgeschritten sind, wenn Sie das Gefühl haben, dass Sie es wirklich brauchen. Es gibt viele kostenlose Softwarewerkzeuge und Online-Dienste, die wahrscheinlich vorerst ausreichend sind.

Zum Beispiel:

• macOS wird mit einem Tool namens Vorschau geliefert. Dies wird hauptsächlich zum Anzeigen von Bildern und PDFs verwendet, umfasst jedoch auch einige wirklich nützliche Funktionen zum Bearbeiten von Bildern, einschließlich Größenänderung, Drehung, Zuschneiden, Kommentieren und Konvertieren zwischen verschiedenen Dateitypen.
• Die integrierte Windows-Fotos-App bietet viele ähnliche Funktionen.
• Die Webseite tinypng bietet einen kostenlosen Dienst, mit dem Sie PNGs, JPEGs und mehr komprimieren können. Dies ist eine sehr häufige Aufgabe, die Sie ausführen müssen, wenn Sie Materialien für die Verwendung auf einer Website vorbereiten.

Wenn Sie umfangreichere Grafikbearbeitungs-/Erstellungsbedürfnisse haben, benötigen Sie ein vollständiges Grafikpaket. In Bezug auf kommerzielle Angebote ist Adobe Photoshop seit langem der Industriestandard, und es gibt auch beliebte relative Neuzugänge 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 gut bewertete kostenlose Apps, wie z.B. 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. Derzeit ist Git das beliebteste Versionskontrollsystem zusammen mit Hosting-Diensten wie GitHub oder GitLab.

Obwohl Versionskontrollwerkzeuge für Webentwicklungsteams unverzichtbar sind, müssen Sie sich jetzt noch keine Gedanken darüber machen. Wir haben ein Modul, das der Versionskontrolle gewidmet ist, nahe dem Ende unserer Kernmodule-Serie.

Nachdem Sie eine Website oder App fertiggestellt haben (auf Ihrem lokalen Rechner oder vielleicht auf einem Entwicklungsserver), möchten Sie sie auf einen Remote-Webserver stellen, damit Ihre Benutzer die damit verbundene Webadresse eingeben und sie im Internet ansehen können!

Es gibt verschiedene Möglichkeiten, dies zu tun, von der Anschaffung von Hosting und der Verwendung einer SFTP-App, der Verwendung eines Dienstes wie GitHub Pages oder Netlify, oder sogar der Einrichtung einer schnellen Demo, die Sie mit anderen mit etwas wie Glitch oder CodePen teilen können.

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 dieses Thema später im Kurs viele Male behandeln. Sie werden bald praktische Erfahrungen damit sammeln, in unserem Ihr erstes Website Modul.

• Übersicht: Einrichtung der Umgebung
• Weiter