Modul: Web Engineering I

In diesem Modul werden die Grundlegenden Konzepte erklärt, aus denen sich moderne Webseiten zusammensetzen. Insgesamt werden die Themen HTML, CSS und JavaScript näher gebracht und wie diese 3 Grundpfeiler miteinander zusammen arbeiten. Neben den eigentlichen Slides, gibt es für bestimmte Themenblöcke Aufgaben zu erledigen, die das Wissen vertiefen sollen.

Kursteilnehmer können folgenden Link nutzen um auf eine Checklist für alle anfallenden Inhalte zu kommen.

Einführung in HTML

Mithilfe von HTML (Hypertext Markup Language) erzeugt man eine Struktur, in der die Inhalte einer Website platziert werden. Mithilfe verschiedener “Tags” werden unterschiedliche Inhalte definiert. Diese beginnen bei Überschriften, und strecken sich über Paragraphen, Visuellen Medien wie Bilder, Formulare, bis hin zu komplexen Grafiken, die aus verschiedenen Daten zusammengesetzt werden.

# Geschichte der Internets

Von den frühen Tagen, in denen das Internet und dessen Technologien noch in der Kinderschuhen steckten bis zu den rasanten Erweiterungen bis zum Jahr 2000. In diesen Slides gibt es einen schnellen Überblick, wie sich das Web entwickelt hat.

# Möglichkeiten zum Mitarbeiten (Projekt-Setup)

Abhängig vom aktuellen Thema gibt es verschiedene Arten, um interaktiv mitzumachen.
Dies beginnt bei einfachen Web-Apps, die eine Sandbox bereit stellen um schnell etwas auszuprobieren, bis hin zu einem komplett aufgesetzten Projekt in dem Stück für Stück weitere Inhalte hinzugefügt werden können.

# HTML - Basics

Nun aber ans eingemachte! Was genau ist nun HTML? Was sind Tags / Elemente? Wie nutzt man das alles?

Wir werden das Grundgerüst jeder HTML-Seite betrachten und wie wir zusätzliche Attribute setzten können und uns mit dem head Element auseinandersetzen.

# Die verschiedenen Arten von HTML-Elementen (Tags)

Nachdem das Grundgerüst gebaut wurde, werden wir die HTML-Seite nun endlich mit richtigem Inhalt füllen! Texte mit verschiedenen Nutzungs-Kontexten stehen hier an der Tagesreihe.
Weiterhin gibts hier einen Überblick, welche tagtägliche Tags existieren und auch ein paar speziellere für bestimmte Einsatzzwecke betrachtet.

Grundsätzlich findet man in der folgenden Präsentation:

• Texte
• Überschriften
• Aufzählungen
• Landmarks

# Bilder in HTML einbetten

Moderne Webinhalte bestehen nicht nur aus Texten. Nachdem wir uns überwiegend mit Textinhalten auseinander gesetzt haben, nehmen wir nun Bilder unter die Lupe. Was ist notwendig um ein Bild anzuzeigen, welche Attribute sollten mitgegeben werden und wie lassen sich Bilder für schmale und breite Bildschirme optimiert anzeigen?

# HTML-Dokumente verlinken

Eine Website spielt sich nicht nur innerhalb einer einzelnen HTML-Datei ab. Eine Website lebt, indem sie Verlinkungen (intern, sowie extern) hat und damit zu weiteren Seiten weiterleitet. Je nachdem, was einen Nutzer der Webseite interessiert.
Wir schauen uns an, wie Links eigentlich aufgebaut sind und wie man seine Dateien struktuieren kann beziehungsweise soll.

# Tabellen

Wenn auch ein etwas älteres “Konstrukt”, sind Tabellen immernoch nützlich um große Datenmengen strukturiert anzuzeigen. Durch die natürliche komplexere Art von Tabellen, gibt es auch eine Menge Tags, die es zu benutzen gilt um eine Tabelle korrekt aufzubauen.

# Formulare

Im letzten Abschnitt der HTML-Reihe widmen wir uns den ersten Interaktiven Elementen einer Webseite: den Formularen. Sei es ein einfaches Kommentarfeld oder ein komplexes Bezahlformular in dem man allerlei Daten angeben muss - Formulare begleiten uns bis in die verstecktesten Ecken des Webs. Hierzu schauen wir uns die von HTML gegeben (und zahlreichen) Möglichkeiten an, wie man Daten eingeben kann.

Einführung in CSS

Bis jetzt sehen die ersten Webseiten die wir gebaut haben sehr simpel aus. Mit den folgenden Slides sollen CSS und dessen Mechanismen näher gebracht werden.

# CSS - Basics

Im folgenden Slide-Deck werden wir Erfahren, wie man mit CSS (HTML)-Elemente selektiert und was eigentlich genau hinter dem kompletten System steckt. Unter anderem wird gezeigt was “Cascading” in “Cascading Style Sheets” bedeutet und wie wir überhaupt CSS in unsere Webseite einbinden können. Dies wird alles als Grundlage dienen die wir in den darauffolgenden Aufgaben anwenden werden.

# CSS - Erste Styles

Wir wissen nun wie wir gezielt einzelne Elemente in HTML stylen können. Nun lernen wir die entsprechenden Styling-Direktiven kennen um den visuellen Output zu modifizieren. Den Beginn werden Farben machen und welche Möglichkeiten wir haben um Farben zu definieren. Danach werden wir uns mit den Möglichkeiten auseinander setzten, wie man Text auf seine verschiedenen Arten und Weisen styled. Im weiteren Verlauf des Slidedecks schauen wir uns die Möglichkeiten an, wie man Elemente mit einer Rahmung (Border) versieht, als auch die Möglichkeiten Abstände zwischen Elementen zu modifizieren. Alle vorgestellten Style’s in Bezug auf Abstände werden mit der neueren “Inline-Block” Syntax beschrieben.

# CSS - Mehr zu Selektoren

Neben den einfachen Selektoren ., #, der Element-Syntax und der Selektor für weitere Attribute (z.B. [data-custom="match"] ), können wir auch deutlich kompliziertere Selektionen erreichen. Diese sind auch immer wieder notwendig, insbesondere bei großen Projekten mit vielen Elementen und der Möglichkeit das Styles “spillen” (sich also auf Elemente auswirken, bei denen wir das nicht beabsichtig haben.)

# CSS - Layout-Techniken und das Box-Model

Wie wir Texte “schön” machen, Farben verwenden und Abstände zwischen Elementen definieren Wissen wir nun. Nun beschäftigen wir uns mit etwas, mit dem wir schon öfters Berührung hatten es aber nicht näher angeschaut haben: Das CSS Box-Model. Dieses bietet die Grundlage zum verstehen wie Layouting in HTML und CSS überhaupt funktioniert. Als darauffolgende Inhalte werden wir uns mit den verschiedenen Layouting-Systemen in CSS auseinander setzten. Dabei schauen wir uns besonders die CSS-Flexbox und das CSS-Grid genauer an.

# CSS - Mehr Styles (aber nun “Fancy”)

Alles für das tägliche arbeiten mit CSS haben wir nun gelernt: Wir können einfache Styles auf Elemente anwenden und auch erste Layouts generieren um Inhalte auf der Website zu strukturieren. In den folgende Slides schauen wir uns nun weitere Möglichkeiten an, Inhalte “hervorstechen zu lassen”.

JavaScript

Nun kommen wir zu dem, was wahrscheinlich schon viele erwarten: JavaScript. Über den Verlauf der nächsten Slide-Decks lernen wir die Sprache und essentielle Application Programming Interfaces (APIs) kennen. Zum Schluss werden wir uns auch den ersten Schritt in die moderne Web-Entwicklung wagen indem wir mit dem ersten Framework arbeiten werden: AlpineJS.

# JS - Intro

Was ist JavaScript, was macht die Sprache aus? Wir setzen uns mit npm und NodeJS auseinander und initialisieren unser erstes Projekt damit. Weiterhin schauen wir uns die erste Ausgabe-Arten an, wie Variablen definiert werden und welche einfachen Datentypen es gibt.

# JS - Control Flow

Ein kurzer und schneller Einstieg in die Thematik Control Flows in JavaScript (If-Else, Switch-Case, Loops).

# JS - Komplexe Datentypen

Wir schauen uns an, warum JavaScript als Programmiersprache so mächtig ist: Komplexe Datentypen wie Objekte und Arrays, wie diese Funktionieren und Methoden um mit diesen Strukturen zu arbeiten.

# JS - Funktionen

Wir setzten uns mit Funktionen in JavaScript auseinander und was es überhaupt mit dem Scope auf sich hat.

# JS - Erweiterte Funktionalitäten auf komplexen Datentypen

Wir schauen uns an, was die Features “Destructuring”, “Spread-Operator” und “Rest-Paramter” sind.

# JS - Document Object Model (API)

Wir kennen jetzt die Grundzüge der Programmiersprache JavaScript. Als nächstes schauen wir uns das an, was wir tagtäglich als Webentwickler machen werden: Das HTML-Dokument manipulieren. JavaScript liefert uns dafür im Web-Browser eine spezielle Schnittstelle an: die DOM-API.

# JS - Klassen und Fehlerbehandlung

# JS - Promises und Async

# JS - Daten von Servern abfragen via “fetch”

# JS - Weitere API’s im Web-Browser

# JS - Externe Pakete mit NPM (AlpineJS)