[01] Freitag, 16. April 2021

Einführung in die Entwicklung von Webseiten mit HTML, CSS und Python

Damit Sie einschätzen können, was Sie in den kommenden Sitzungen erarbeiten werden und warum, möchte ich Ihnen das kurz darstellen.

Der rote Faden. Foto von Lisa Woakes on Unsplash

Werkzeuge für Entwicklung und Zusammenarbeit

Zunächst geht es darum, die Werkzeuge einzurichten und kennenzulernen, mit denen Sie in den kommenden Wochen arbeiten werden. Das sind Mattermost, VSCodium, Chromium, GitLab und Python/Flask. Die Rolle dieser Werkzeuge und ihr Zusammenspiel sind wie folgt zu verstehen:

  • Mattermost dient der Kommunikation über Ihre Arbeit und der Konkretisierung Ihrer Projektidee in der Gruppe.
  • VSCodium ist der Editor, in dem Sie HTML, CSS und später auch Python schreiben werden. Er ist sehr umfassend erweiterbar und wird weltweit professionell eingesetzt. Da es sich bei VSCodium um freie Software handelt, die auf allen gängigen Betriebssystemen läuft, können Sie ihn auch später in Schulzusammenhängen einsetzen. Wenn Sie Hilfe für diesen Editor im Netz suchen, suchen Sie nach “Microsoft Visual Studio Code”, denn Microsoft verwendet VSCodium als Grundlage für dieses Produkt und dokumentiert es sehr gut. Verwechseln Sie bitte nicht “Microsoft Visual Studio Code” mit “Microsoft Visual Studio”.
  • Chromium ist die freie Variante von Google Chrome. Ähnlich wie bei VSCodium nimmt Google Chromium, um daraus das Google-Produkt Chrome zu machen. Der Vorteil von Chromium ist, dass die Datenschutzeinstellungen wesentlich weniger gierig sind als bei Chrome. Chromium ist der Industriestandard, wenn es um Webentwicklung geht.
  • GitLab ist eine freie Plattform zur Zusammenarbeit an Code und Texten. Es ist für Ihre Zusammenarbeit mit mir und innerhalb Ihrer Gruppen wichtig, dass Sie möglichst schnell lernen, souverän mit GitLab umzugehen, denn GitLab erleichtert Ihnen das modulare Erarbeiten von komplexeren Webseitenkonstrukten.
  • Python ist die Skriptsprache, mit der die meisten von Ihnen im vergangenen Semester schon erste Erfahrungen gesammelt haben. Nachdem Sie sich da über ProcessingPy dem Programmeieren genähert haben, wollen wir dies nun mit dem Webseitenframework Flask fortsetzen.

Sie erarbeiten daher zunächst die Grundlagen von HTML und CSS an Aufträgen und Aufgaben, die für alle Teilnehmenden gleich sind. Die dabei entwickelten Kenntnisse und Kompetenzen übertragen Sie mit den notwendigen Anpassungen und Erweiterungen auf Ihre Projektideen.

Erst statisch, dann dynamisch

Es ist sinnvoll, HTML/CSS-Dokumente zunächst statisch zu erstellen. Das bedeutet, Sie entwickeln Dokumente, die als Dateien auf Ihren Festplatten liegen und sich nicht ändern, wenn sie im Browser aufgerufen werden. Daher statisch.

Eingabeformular der Suchmaschine DuckDuckGo

Wenn Sie nun aber mal einen Blick auf Ihre digitale Welt werfen, dann sind da viele dynamische Inhalte, die sich z.B. ändern, wenn Sie und während Sie Eingaben auf einer Website machen. Einfachstes Beispiel ist eine Suchmaschine: Hier geben Sie einen Begriff ein und erhalten eine dynamisch generierte Liste von Ergebnissen - niemand konnte vorher wissen, wonach Sie suchen würden. Und daher konnte auch niemand für Sie eine statische Webseite mit den Ergebnissen vorbereiten. Das bedeutet, dass ein Computerprogramm oder besser, ein Skript auf dem Webserver des Suchmaschinenbetreibers die Ergebnisliste dynamisch generiert hat. Maßgeblich dafür waren die Informationen, die Sie eingegeben haben.

Wir werden in dieser Veranstaltung daher zunächst statische HTML-Dokumente bauen, um diese dann später mit Python in dynamische umzuwandeln. Wir brauchen eine Sprache wie Python, um diese Dynamik zu realisieren, denn HTML und CSS sind dazu allein nicht in der Lage.

Auftrag in der Sitzung

Beschäftigen Sie sich im Laufe der Sitzung mit den folgenden Materialien und Aufgabenstellungen. Wenn Sie nicht alles schaffen, ist das kein Problem. Setzen Sie die Arbeit dann bis zur kommenden Veranstaltung fort.

Video: “Einführung in VSCodium”

Sie werden ein erstes einfaches HTML/CSS-Dokument entwickeln. Dabei nutzen Sie Microsoft Visual Studio Code in der freien Version VSCodium als Entwicklungsumgebung und Chromium als Entwicklungbrowser.

Auftrag zum Video

Ausgehend von dem Video sollen Sie eine erste Website mit HTML und CSS erstellen. Die folgende Anleitung soll Sie dabei unterstützen.

Ziele

  • Sie sind in der Lage, mit HTML und CSS eine einfache Website zu bauen.
  • Dabei erarbeiten Sie sich die Grundkenntnisse für HTML-Listen, Bildeinbindung, Hyperlinks, Layout mit CSS
  • Sie können Ihre Arbeit in GitLab hochladen

Inhaltliche Vorgaben

Damit alle einen gemeinsamen Startpunkt haben, gebe ich Ihnen eine Website als Mockup (dt.: Vorführmodell) vor.

Mockup der Website, erstellt mit draw.io

Ausgehend von dem Mockup hat Ihre Website also

Diesen Auftrag werden Sie anschließend für die erste Annäherung an Ihre Projektidee verwenden.

Arbeitsschritte

Arbeiten Sie (gemeinsam) die folgenden Arbeitsschritte durch, die sich bei komplexen Problemen und Aufgaben empfehlen!1

  1. Klären Sie Begriffe, die Sie nicht verstehen.
    • Haben Sie Begriffe nicht verstanden, oder sind Ihnen Teile in der Aufgabe unklar?
  2. Definieren Sie das Problem.
    • Worin genau besteht die Aufgabe, wenn Sie das Mockup in ein HTML/CSS-Dokument umsetzen sollen?
  3. Analysieren Sie das Problem.
    • Wie lässt sich das große Problem in viele kleinere herunterbrechen?
    • Wie können Sie beschreiben, was zu tun ist?
  4. Ordnen Sie Ideen und vertiefen Sie diese systematisch.
    • Machen Sie Vorschläge, wie vorzugehen ist.
    • Wie können Sie die identifizierten Teilprobleme angehen?
  5. Formulieren Sie Lernziele.
    • Was wollen Sie bei der Lösung der identifizierten Probleme erreichen?
    • Was wollen Sie können und verstehen?
  6. Suchen Sie ergänzende Informationen.
    • Recherchieren Sie, mit welchen Ressourcen Sie allgemeine und spezielle Probleme des Auftrags lösen können.
    • Welche Bücher, Tutorials und Videos helfen?
    • Teilen Sie die Informationen, die Sie finden, mit den anderen, z.B. in Mattermost.
  7. Arbeiten Sie eigene und gemeinschaftliche Erkenntnisse in ihre Arbeit ein.

Auftrag zum 23. April 2021

Formulierung Ihrer vorläufigen Projektidee

  • Bitte formulieren Sie mit Ihrer Gruppe in einem eigenen HedgeDoc, was Sie für ein Projekt auf Basis von HTML, CSS und Python entwickeln möchten. Beantworten Sie darin die folgenden Fragen:
    • Warum dieses Projekt und kein anderes?
    • Worin liegen die größten Herausforderungen?
    • Was wissen Sie schon, was müssen Sie noch lernen?
  • Legen Sie in Mattermost einen (öffentlichen) Kanal für Ihr Projekt an.
  • Schreiben Sie den Link zum HedgeDoc in die Kanalüberschrift.
  • Schreiben Sie in das Dokument, wer an der Entwicklung beteiligt sein wird!

GitLab - keine Mails

Wenn Sie zum ersten Mal mit GitLab arbeiten, beachten Sie bitte die Hinweise auf der Seite Using GitLab und folgen Sie den Arbeitsschritten im Video dort.

Zusammenfassung der Aufträge

  • Fertigstellung des Auftrags aus der Sitzung
  • Formulierung der vorläufigen Projektidee
  • Auftrag aus dem Kapitel Voraussetzungen.
  • Einrichtung eines GitLab-Projekts für die Studienleistungen

Abgabetermin

Der Auftrag ist bis zum Sonntag, 22.04.2021, zu erledigen.

Anhang

Video: “Einführung in Mattermost”

Die meisten von Ihnen haben im vergangenen Semester schon mit Mattermost gearbeitet und brauchen das folgende Material wahrscheinlich nur zu überfliegen.

Mattermost ist ein Chatprogramm, das im professionellen Bereich als ernstzunehmende Alternative zu Slack gilt. Es ist frei Software und wird bei uns an der TU Hamburg gehostet. Ich setze es schon seit mehreren Jahren zur Begleitung meiner Lehrveranstaltung ein.

In dem Video erkläre ich:

  • sinnvolle Kontoeinstellungen
  • Grundlagen zur Benutzeroberfläche (Kanäle, private Kanäle und Direktnachrichten)
  • Verfassen von Posts mit Markdown
  • ein Video oder einen Link posten
  • einen Screenshot posten
  • einen Codeschnipsel posten
  • auf einen Post einer anderen Person antworten

Auftrag zum Video

  • Posten Sie einen Screenshot eines Programmfensters von Ihrem Rechner!
  • Posten Sie einen Link zu einer Lernressource, die Sie interessant finden oder ein Video zu den Themen HTML/CSS, das Sie interessant finden! (Schauen Sie es vorher an!)
  1. Da sich dieses Skript primär an werdende Lehrer_innen richtet, will ich die Quellen der didaktischen Methoden nennen: Die Liste der Arbeitsschritte stammt aus dem bemerkenswerten Methodenpool der Uni Köln und findet sich unter PBL - Problem Based Learning. [return]
Verstanden
Um die Inhalte auf dieser Website optimal für Sie anbieten zu können, verwenden wir Cookies. Mehr erfahren