Webentwicklung mit HTML und Jekyll

Diese Webseite ist eine (unfertige) Sammlung von Materialien zur Webentwicklung mit HTML im Allgemeinen und zum Umgang mit dem Site Generation Tool "Jekyll" im Speziellen. Die Einheiten unter "Grundlagen" sollten in der vorgesehenen Reihenfolge bearbeitet werden, danach kann man sich je nach Interesse in spezielle Themengebiete vertiefen.

Diese Sammlung ist nicht in erster Linie zum autodidaktischen Lernen gedacht, sondern soll viel mehr von mir gehaltene Veranstaltungen zum Themenkomplex "Webentwicklung" unterstützen. Der Stil der einzelnen Lektionen ist oft eher knapp, weil die Inhalte nur als Gedankenstütze zum eigentlichen Kursangebot fungieren sollen. Die entsprechenden Kurse werden momentan in Kooperation mit Schulen oder der Hacker-School an der Fachhochschule Wedel angeboten.

Erste Schritte

Diese Lektionen bilden die Grundlagen für alle weiteren Lektionen und sollten auch in der hier angegebenen Reihenfolge bearbeitet werden.

• Einrichtung von Jekyll

  Für die Webentwicklung in diesem Kurs benötigt ihr eine Reihe von Programmen, die in der FH Wedel schon vorinstalliert sind. Wenn Ihr auch von Zuhause aus arbeiten wollt findet Ihr hier die Links zu den verwendeten Programmen sowie eine kurze Anleitung zum Starten von Jekyll.

• Der erste neue Beitrag

  Nachdem Jekyll nun läuft, können wir uns daran machen auf der entstandenen Seite den ersten Beitrag zu veröffentlichen.

• Markdown zu HTML

  Nachdem wir verstanden haben, wie man Jekyll in Betrieb nimmt und damit neue Beiträge veröffentlicht werfen wir nun einen Blick auf HTML. Dabei werden wir zunächst unseren Markdown Quelltext nach HTML übersetzen und uns dann mit neuen HTML Konstrukten befassen.

• Frontmatter und Jekyll

  Bisher haben wir uns nur oberflächlich mit vordefinierten Werten im Frontmatter beschäftigt. Jetzt wollen wir uns einmal anschauen, was man mit diesen Werten alles bewirken kann.

• Templating und Jekyll

  Schluss mit dem Bearbeiten von einfachen Beiträgen, jetzt wollen wir uns um die Seite als ganzes kümmern! Wir werfen einen Blick auf das Templating-System von Jekyll und basteln (endlich) einen funktionierenden "Zurück" Link in eure Seite.

• URLs und Jekyll

  Langsam wird es Zeit mehr als nur eine einzige Seite darstellen zu können. Dieser Beitrag geht kurz darauf ein, wie URLs in Jekyll verwaltet werden.

• Planung einer Seite

  Alle technischen Kenntnisse über die Entwicklung von Webseiten bringen nichts, wenn man nichts zu sagen hat oder die Planung der Webseite zu sehr vernachlässigt. Dieser Beitrag soll euch eine kurze Gedächtnisstütze sein, welche Aspekte ihr bei der Planung eurer Webseite berücksichtigen solltet.

Grundlagen der Programmierung

HTML habt Ihr nun schon kennengelernt, die Seiten sind euch aber alle zu simpel? Dann werden euch diese Lektionen einen groben Einblick in die Programmierung mit dem Liquid HTML Templating System.

• Fallunterscheidungen

  Nicht immer sollen oder können im Frontmatter alle Daten angegeben werden. Um trotzdem eine sinnvolle Seite anzubieten müssen wir auf Basis der vorhandenen Informationen die Seite unterschiedlich darstellen können.

• Schleifen

  Manchmal ist es notwendig Dinge mehr als einmal zu tun. Vielleicht möchte man im HTML eine Anzahl von Sternen ausgeben die einer Bewertung entspricht? Oder man möchte endlich mal verstehen wie auf der Hauptseite die ganzen Blogbeiträge aufgezählt werden? Die Antwort auf all diese Anforderung und fragen lautet "Schleife".

Änderungen am Design

HTML habt Ihr nun schon kennengelernt, die Seiten sehen momentan aber alle noch zu langweilig aus? Dann werft einen genaueren Blick auf diese Lektionen, Sie vermitteln einen grundsätzlichen Einblick in die Gestaltung mit CSS.

• CSS Regeln

  Bisher ist bei der Seite kaum eine Struktur zu erkennen, wir nähern uns den Grundlagen der Gestaltung in dem wir für ein paar Farbtupfer sorgen.

• Inline und Block Elemente

  Bisher haben wir ein bisschen mit Farben gespielt, das eigentliche Layout der Seite aber nicht weiter angefasst. In diesem Kapitel beschäftigen wir uns mit dem Layout-Modell von CSS um unsere Seite vom Layout her ein wenig aufzupeppen.

• Komplexere CSS Regeln

  Das tolle an CSS: Man muss es nicht komplett verstehen, um davon zu profitieren ...

Umgang mit Web-Frameworks

HTML habt Ihr nun schon kennengelernt, aber irgendwie sieht das alles trotz ein paar eigener CSS Stile noch zu spartanisch aus? Damit Ihr das Rad nicht immer wieder neu erfinden müsst, zeigen euch diese Lektionen wie Ihr einige der populären Web-Frameworks einbinden könnt.

• Seiten mit Bootstrap

  Bootstrap ist ein zweischneidiges Schwert: Auf der einen Seite ist es eine wirklich umfassende Lösung komplizierte Webseiten aufzubauen, auf der anderen Seite sehen sich alle Seiten die Bootstrap verwenden fürchterlich ähnlich ... Der für diesen Kurs ausschlaggebende Grund ist aber ein ganz anderer: Bootstrap ist hervorragend dokumentiert und damit ein gutes Framework um so etwas zum ersten Mal auszuprobieren.

Relevante Tools

Es gibt eine fast unüberschaubare Anzahl an Programmen, die Entwicklern das Leben leichter machen können. In diesen Lektionen werden ein paar Tools herausgegriffen, die eure Seiten vielleicht nicht direkt beinflussen, aber in keinem "Werkzeugkasten" fehlen sollten.

• Entwicklertools im Firefox

  Die meisten Webbrowser kommen mit einer Reihe sehr mächtiger Werkzeuge, die bei der Webentwicklung hilfreich sind. Am Beispiel der Entwicklertools im Firefox wird in diesem Beitrag kurz erläutert, wie Ihr euch das Leben leichter machen könnt.

• Seiten auf Korrektheit prüfen

  Browser versuchen im Normalfall eine Webseite unter allen Umständen irgendwie darzustellen, sind sich dabei aber nicht immer einig wie verschiedene Fehler bereinigt werden sollten. Daher ist es wichtig, die eigene Seite regelmäßig auf formelle Fehler zu prüfen.

Veröffentlichung der Website

Bisher könnt ihr auf die Seite nur von eurem eigenen Rechner mit der http://localhost:4000 URL zugreifen. Wenn andere Personen auch was von eurer Seite sehen sollen, braucht ihr dafür einen Webhoster. Dieser kostet im Normalfall Geld, ein paar kostenlose und auch kostenpflichtige Möglichkeiten möchte Ich hier aber vorstellen.

• Von Jekyll erzeugte Seiten

  Bisher haben wir die Commandozeile immer nur für den Aufruf jekyll serve --watch benutzt. Jetzt gehen wir einen Schritt weiter und schauen uns an, wie Jekyll uns bei der Veröffentlichung der Webseite unterstützt.

• Dateitransfer mit WinSCP

  Wie transferiert man seine Webseite vom aktuellen Rechner auf den entsprechenden Server im Internet? Mit WinSCP gibt es ein kostenloses Programm, dass alle gängigen Verfahren zum Dateitransfer beherrscht.

Praxisbeispiele

Hier werden einige Ideen beschrieben, die man mit verschiedenen Kenntnissständen umsetzen könnte. Optimalerweise wächst dieser Bereich, indem Ihr eigene Vorschläge macht.

• Listen von Personen (und anderen Dingen)

  Egal ob es um Autoren in einem Blog, Spieler in einer Fussballmanschaft, Figuren aus einem Brettspiel, ... geht. Immer wenn Ihr gerne gleichartige Dinge aufzählen möchtet macht es vermutlich Sinn die Daten vom Design zu trennen.

• Tabellen für Vereine

  Ihr braucht eine Rangliste mit Punkten, Toren oder sonstigen Kriterien? Hier zeigen wir euch wie das funktioniert.

• Eine Fotogalerie

  Immer wenn große Mengen von Bildern dargestellt werden müssen sollte man genau überlegen welche Präsentationsform angemessen ist. Dieses Beispiel versucht relevante Eckpunkte einer Galerie aufzuzeigen.