04 | Freitag, 11.11.2022
HTML/CSS-Baukastensysteme kennenlernen
Sie haben vielleicht schon gemerkt, wieviel Arbeit es macht, ein HTML/CSS-Konstrukt aufzusetzen und es so auszugestalten, dass es an bekannte Seh- und Nutzungsgewohnheiten heranreicht. HTML/CSS-Baukastensysteme haben das Ziel, einige Prozesse abzukürzen, um mit einem einheitlichen Standard in ein Projekt starten zu können.
“Das sieht doch dann alles gleich aus!”, werden Sie sagen. Ja, in der Tat, man sieht es Webseiten an, wenn sie auf Baukastensystemen basieren und keine individuelle Bearbeitung stattgefunden hat. Gleichzeitig eröffnet der Ansatz aber auch Möglichkeiten für diejenigen, die gestalterisch nicht ausgebildet sind.
Am Beispiel von Twitter Bootstrap werden Sie in dieser Woche kennenlernen, was es heißt, ein HTML/CSS-Baukastensystem oder -Framework einzusetzen.
Ziele
- Sie kennen HTML/CSS-Frameworks und können deren Sinn und Nutzen erläutern
- Sie entwickeln eine einfache Webseite mithilfe von Twitter Bootstrap
- Sie kennen den Zusammenhang von HTML und CSS und können wichtige Fachbegriffe erläutern
Auftrag: Twitter Bootstrap einsetzen (GTW)
Seit Jahren ist das Baukastensystem oder auch Framework Bootstrap ein fester Bestandteil vieler Webseitenprojekte und wird ständig an neue Entwicklungen angepasst. Sie sollten sein Potenzial praxisorientiert untersuchen, denn vielleicht hilft es Ihnen, das Interface für Ihr Projekt zu bauen.
- Bearbeiten Sie das Kapitel Baukastensysteme für HTML und CSS mit allen Aufgabenstellungen.
Auftrag: Meine Projektidee (GTW)
Arbeiten Sie weiter an Ihrer Projektidee und tauschen Sie sich vor allem mit anderen aus, die ähnliche Interessen haben. Schauen Sie, wie Sie Ihre Erfahrungen, Kenntnisse und Fertigkeiten so zusammenbringen können, dass etwas Großes entstehen kann.
- Arbeiten Sie Ihre Projektidee in Ihrem HedgeDoc weiter aus.
- Ergänzen Sie unter “Quellen” Links zu Inspirationen, Beispielen und Vorbildern, gern auch zu Literatur.
- Kommunizieren Sie in Mattermost oder eigenen Kanälen untereinander, um Projektgruppen zu bilden.
Auftrag: Gestalten mit CSS (ALT)
Während HTML für die semantische Auszeichnung der Informationen in einem HTML-Dokument zuständig ist, können Sie mit CSS das Aussehen beeinflussen. Lernen Sie die Möglichkeiten von CSS mit den folgenden Aufgabenstellungen besser kennen!
- Recherchieren Sie Videos zu HTML und CSS. Empfehlen Sie die Videos in Mattermost, die Sie selbst gut finden.
- Erarbeiten Sie sich mit gegenseitiger Hilfestellung die Grundlagen, um CSS in Ihrem aktuellen Webseitenprojekt zu verwenden.
- Gestalten bzw. formatieren Sie einzelne HTML-Elemente in Ihren Dokumenten. Achten Sie dabei möglichst auf Einheitlichkeit, um irgendwann ein konsistentes Design zu erreichen. Welche Möglichkeiten bietet CSS hierfür?
Auftrag: Wissen systematisieren (ALT)
Sie haben sich bisher sehr praxisorientiert den Themen HTML und CSS angenähert. Es ist an der Zeit, die Dinge beim Namen zu nennen und herauszufinden, welche Bücher, Webseiten und Videos bei der fachlichen Systematisierung des Themas helfen können.
- Betrachten Sie Ihr aktuelles HTML-Konstrukt im Editor: Wie heißt das alles, was Sie da sehen?
- Nehmen Sie die Rolle einer zukünftigen Lehrkraft ein, die über ihr Thema vor der Klasse sprechen muss. Lassen Sie sich aus dieser Perspektive beim Sprechen über Technik leiten.
- Erläutern Sie im Dialog mit Kommilitoninnen zentrale Konzepte und Fachbegriffe.
- Tragen Sie die Quellen zusammen, die Ihnen wichtig erscheinen und auch zur Vorbereitung auf die spätere Prüfung dienen können.
- Teilen Sie Ihre Arbeit mit der Gruppe der GTWler*innen, da diese zum gleichen Thema arbeitet!
Abgabe (GTW)
Erledigen Sie den Auftrag bis zum Donnerstag, 10.11.2022 und laden Sie die Dateien in GitLab hoch (einzeln, nicht gezippt!). Legen Sie dafür in Ihrem Projekt Studienleistungen einen neuen Ordner 04-2022-11-11-Baukasten an.
Abgabe (ALT)
Erledigen Sie den Auftrag bis zum Donnerstag, 10.11.2022 und laden Sie die Dateien in GitLab hoch (einzeln, nicht gezippt!). Legen Sie dafür in Ihrem Projekt Studienleistungen einen neuen Ordner 04-2022-11-11-CSS an. Teilen Sie Ihre Quellensammlung zu HTML und CSS mit den anderen in Mattermost.
Wenn Sie Fragen und Frust zur Arbeit mit GitLab haben, melden Sie sich im Kanal Arbeitsaufträge bei Ihren Tutor*innen.