[04] Freitag, 07. Mai 2021
Gemeinsam an einer Website arbeiten
Nachdem Sie in der vergangenen Sitzung Ihre Rechner für die Arbeit mit VSCodium, Git und GitLab eingerichtet haben, wollen wir heute an einer statischen HTML-Seite zusammenarbeiten.
Sie finden Sie in unserer Lerngruppe in GitLab oder als eingeladene:r Nutzer:in unter https://collaborating.tuhh.de/itbh/itbh-informatik-sose-2021/lerngruppe/axels-gruppe/blumenladen.
Wir werden uns hands-on mit dem gemeinsamen Erstellen von HTML-Seiten befassen und diese via GitLab zu einem Gesamtkonstrukt zusammenführen.
Geplante Inhalte der heutigen Sitzung
- Praktische Nutzung von Git und GitLab am Beispiel einer statischen HTML-Seite
Arbeitsauftrag zu [05] Freitag, 21. Mai 2021 (am 14.05. findet keine Sitzung statt!)
Der heutige Arbeitsauftrag dient dazu, die Zusammenarbeit über GitLab auf Ihr eigenes Projekt zu übertragen und weitere Schritte mit HTML und CSS zu gehen.
Dafür stellen wir ein interessantes und dankbares HTML/CSS-Thema in den Mittelpunkt:
Bilder und Grafiken in HTML und CSS
Bilder und Grafiken lassen sich in HTML über das img-Tag einbinden und über CSS formatieren. Sie können aber auch über CSS als Hintergrundgrafiken für verschiedene HTML-Elemente festgelegt werden. Dabei spielen viele Aspekte eine Rolle, die es zu berücksichtigen gilt:
- Datenvolumen der Bilder
- Auflösung
- Anzeige unterschiedlicher Bildausschnitte und Varianten für Endgeräte mit großen und kleinen Displays.
- Vermeidung von zu vielen Requests durch sogenannten Sprites oder die Verwendung von eigenen Zeichensätzen mit Grafiken oder Icons
Die Themen rund um Grafiken und Bilder im Web sind vielfältig. Die folgenden Quellen können zum Einstieg in das Thema empfohlen werden:
Ziele
- Sie können an einer gemeinsamen Codebasis im Team mit Hilfe von Git und GitLab zusammenarbeiten.
- Sie haben ein Grundverständnis, Bilder in HTML und CSS für Vorder- und Hintergrund einzubinden.
Aufgabenvorschläge
- Analysieren Sie die Verwendung von Bildern und Grafiken in der Seite “Blumenladen”, die wir in der letzten Veranstaltung verwendet haben.
- Analysieren Sie die Verwendung von Bildern und Grafiken mit den Chrome Developer Tools in einer Website Ihrer Wahl.
- Binden Sie mindestens ein Hintergrundbild per CSS in Ihre Projektseite ein.
- Binden Sie verschiedene Bilder mit dem
img-Tag ein.
- Lesen Sie den Beitrag Wie kann man Bilder mit CSS responsiv machen zum Thema Repsonsive Webdesign für Bilder. Probieren Sie mit der Mobilansicht der Chrome Developer Tools aus, wie HTML und CSS die Darstellung für verschiedene Displaygrößen beeinflussen können.
Abgabe
Geben Sie eine aktualisierte Version Ihrer Arbeit spätestens am Donnerstag, d. 20.05.2021, in GitLab ab.
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.