frameworks.md 8.37 KB
Newer Older
Axel Dürkop's avatar
Axel Dürkop committed
1 2 3 4 5 6 7 8 9 10
---
title: 'Baukastensysteme für HTML und CSS'
date: 2020-06-28T03:50:13.000Z
draft: false
type: book
weight: 600
LastModifierDisplayName: Axel Dürkop
LastModifierEmail: axel.duerkop@tuhh.de
---

Axel Dürkop's avatar
Axel Dürkop committed
11 12
## Einführung

Axel Dürkop's avatar
Axel Dürkop committed
13 14 15 16 17 18
Wie Sie wahrscheinlich schon festgestellt haben, macht es viel Arbeit, eine Website von Grund auf mit HTML, CSS und ggf. noch mit JavaScript zu entwickeln. Am Anfang muss man einmal da durch, sonst bleiben die Zusammenhänge im Verborgenen, und Sie können keine Erfahrung sammeln. Aber irgendwann, besonders in der professionellen Arbeit von Mediengestalter_innen und Webdesigner_innen, braucht es dann Ansätze, um sich schnell mit Kund_innen über eine Projektidee zu verständigen und eine Website online zu bekommen.

Weil viele Websites aus ähnlichen Elementen bestehen, haben sich sogenannte HTML/CSS-Frameworks entwickelt. Zwei der größeren und bekannteren sind [Foundation](https://get.foundation/index.html) und [Bootstrap](https://getbootstrap.com/). Letzteres gibt es schon seit 2011. Es wurde ursprünglich im Hause Twitter entwickelt und dort für interne Tools verwendet. In dieser Veranstaltung setzen wir uns exemplarisch mit Bootstrap auseinander.

{{< figure src="../img/frameworks/ashkan-forouzani-m0l9NBCivuk-unsplash.jpg" title="Eine Website mit Frameworks zusammensetzen. Foto von Ashkan Forouzani auf Unsplash" >}}

Axel Dürkop's avatar
Axel Dürkop committed
19 20 21
## Aufgabenstellungen

### Aufgabenstellung 1: Bootstrap kennenlernen
Axel Dürkop's avatar
Axel Dürkop committed
22 23 24

1. Rufen Sie [die Homepage von Bootstrap](https://getbootstrap.com/) auf, und sehen Sie sich um.
1. Halten Sie für Ihre Projektgruppe in einem gemeinsamen Pad alle Begriffe fest, die Sie noch nicht kennen (wird im Chat bekanntgegeben). Versuchen Sie, sich diese Begriffe gemeinsam zu erschließen. Schreiben Sie Ihre Antworten in das Pad, am besten mit einem Link zu einer Seite, die den Begriff erklärt (nicht nur Wikipedia!).
Axel Dürkop's avatar
Fixes  
Axel Dürkop committed
25
1. Nutzen Sie [DeepL](https://www.deepl.com/) oder Google Translate, um die englischen Texte zu übersetzen. 
Axel Dürkop's avatar
Axel Dürkop committed
26

Axel Dürkop's avatar
Axel Dürkop committed
27
### Aufgabenstellung 2: Bootstrap einrichten
Axel Dürkop's avatar
Axel Dürkop committed
28 29 30 31 32 33

1. Rufen Sie die Seite [Getting started](https://getbootstrap.com/docs/4.5/getting-started/introduction/) auf.
2. Lesen Sie bis zum Abschnitt [Starter Template](https://getbootstrap.com/docs/4.5/getting-started/introduction/#starter-template) einschließlich.
3. Bereiten Sie einen Ordner `bootstrap` auf Ihrem Rechner vor.
   1. Legen Sie darin eine `index.html` an.
   2. Kopieren Sie das Markup für das Starter Template hinein. Beachten Sie, dass die drei `<script>`-Tags am Ende des `<body>` stehen. Das soll auch so bleiben!
Axel Dürkop's avatar
Axel Dürkop committed
34
   3. Sehen Sie sich die HTML-Seite im Browser an.
Axel Dürkop's avatar
Axel Dürkop committed
35

Axel Dürkop's avatar
Axel Dürkop committed
36
### Aufgabenstellung 3: Das Gitterlayout (Grid) von Bootstrap kennenlernen
Axel Dürkop's avatar
Axel Dürkop committed
37 38 39 40 41 42 43

Bootstrap kommt mit einem 12er-Spaltensystem, in der Dokumentation [Grid](https://getbootstrap.com/docs/4.5/layout/grid/) genannt. Dieser Begriff ist nicht zu verwechseln mit dem Layoutansatz [grid](https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/grid), denn Bootstrap arbeitet unter der Haube mit Flexbox. Kurz gesagt: Bei Bootstrap wird ein Grid (Gitterlayout) mit Flexbox erzeugt.

1. Kopieren Sie das Markup aus dem Abschnitt [How it works](https://getbootstrap.com/docs/4.5/layout/grid/#how-it-works) ins `<body>`-Tag Ihrer `index.html`. Löschen Sie dafür die Überschrift `<h1>`.
2. Lesen Sie die Erläuterung unter dem Markup, die Ihnen erklärt, wie das Gitterlayout in Bootstrap funktioniert. DeepL übersetzt die Aufzählung ganz passabel.
3. Wenn es Sie jetzt brennend interessiert, was das Grid in Bootstrap noch so kann, lesen Sie weiter.

Axel Dürkop's avatar
Axel Dürkop committed
44
### Aufgabenstellung 4: Inhaltsformatierungen kennenlernen
Axel Dürkop's avatar
Axel Dürkop committed
45 46 47

1. Scrollen Sie durch die Abschnitte unter [Content](https://getbootstrap.com/docs/4.5/content/reboot/). Verschaffen Sie sich dabei einen Überblick, wie Überschriften, Bilder, Tabellen und Abbildungen formatiert werden.

Axel Dürkop's avatar
Axel Dürkop committed
48
### Aufgabenstellung 5: Bootstrap-Komponenten einsetzen
Axel Dürkop's avatar
Axel Dürkop committed
49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

Komponenten in Bootstrap sind typische Bauteile für Webseiten. Durch das Zusammenkopieren dieser Komponenten lassen sich schnell Prototypen erstellen, die dann mit dem Kunden/der Kundin diskutiert werden können.

1. Kopieren Sie das Markup am Anfang des Abschnitts [Nav](https://getbootstrap.com/docs/4.5/components/navbar/#nav) direkt in das `<body>`-Tag. Löschen Sie nicht das dreispaltige Markup aus Aufgabenstellung 3!
2. Ändern Sie die `href`-Attribute zu sinnvollen Linkzielen.
3. Untersuchen Sie mit den Developer Tools die Navigation.
   1. Welche Eigenschaften sind für den Selektor `.navbar-item` vergeben?
   2. Wie unterscheiden sich diese für große und kleine Viewports?
4. Kopieren Sie den folgenden Schnipsel unter die Navigation:  
   ```HTML
   <div class="jumbotron">
      <div class="container">
         <h1 class="display-4">Hello, world!</h1>
         <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention
               to
               featured content or information.</p>
         <hr class="my-4">
         <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
         <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
      </div>
   </div
   ```
5. Prüfen Sie, wie sich das Layout verändert, wenn Sie in den Developer Tools ein *iPhone X* im Hoch- und Querformat einstellen.

Axel Dürkop's avatar
Axel Dürkop committed
73
### Aufgabenstellung 6: Mit dem Layout arbeiten
Axel Dürkop's avatar
Axel Dürkop committed
74 75 76 77

1. Fügen in das Spaltenlayout noch dreimal das Markup einer [Card](https://getbootstrap.com/docs/4.5/components/card/#titles-text-and-links) ein.
2. Was müssten Sie tun, um zwei gleichbreite Cards einzufügen? Probieren Sie es aus!

Axel Dürkop's avatar
Axel Dürkop committed
78
### Aufgabenstellung 7: Footer ergänzen
Axel Dürkop's avatar
Axel Dürkop committed
79 80 81

Fügen Sie noch einen Footer hinzu, der zentriert ausgerichtet die Links "Datenschutz" und "Impressum" enthält.

Axel Dürkop's avatar
Axel Dürkop committed
82
### Aufgabenstellung 8: CSS anpassen
Axel Dürkop's avatar
Axel Dürkop committed
83 84 85 86 87 88

1. Ändern Sie in den Developer Tools die Hintergrundfarbe der Navigationsleiste zu `#dc3545` oder einer Farbe, die Sie mögen.
2. Was können Sie tun, um diese Farbe dauerhaft in die Gestaltung Ihrer Seite zu übernehmen?

{{< figure src="../img/frameworks/screenshot-bootstrap.png" title="Mögliche Lösung" >}}

Axel Dürkop's avatar
Axel Dürkop committed
89
### Aufgabenstellung 9: Experimentieren
Axel Dürkop's avatar
Axel Dürkop committed
90 91 92

Nehmen Sie sich nun Zeit, mit den Konzepten von Bootstrap zu spielen und zu experimentieren.

Axel Dürkop's avatar
Fixes  
Axel Dürkop committed
93
## Weitere Lernanregungen
Axel Dürkop's avatar
Axel Dürkop committed
94

Axel Dürkop's avatar
Axel Dürkop committed
95
Die folgenden Lernanregungen haben das Ziel, Ihnen ein wenig mehr Routine mit Bootstrap zu verschaffen.
Axel Dürkop's avatar
Axel Dürkop committed
96

Axel Dürkop's avatar
Axel Dürkop committed
97
### Ziele
Axel Dürkop's avatar
Axel Dürkop committed
98 99 100 101 102 103 104 105

- Sie setzen ein Layout mit Bootstrap um.
- Sie steigen tiefer in das Layoutkonzept von Bootstrap ein und wissen, welche `<div>`-Tags und Klassen Sie verschachteln müssen.
- Sie kontrollieren die Darstellung Ihrer Website in verschiedenen Viewportgrößen.
- Sie reflektieren kritisch die Vor- und Nachteile von HTML-/CSS-Frameworks.

### Projektseite mit Bootstrap layouten

Axel Dürkop's avatar
Axel Dürkop committed
106
Schaffen Sie es, eine einfache Website mit Bootstrap zu layouten?
Axel Dürkop's avatar
Axel Dürkop committed
107

Axel Dürkop's avatar
Axel Dürkop committed
108
#### Flexbox-Layout verwenden
Axel Dürkop's avatar
Axel Dürkop committed
109

Axel Dürkop's avatar
Axel Dürkop committed
110 111 112 113 114 115 116 117 118 119 120
Bauen Sie eine neue Website, ohne Framework, dafür aber mit den technischen Konzepten, die auch in den Frameworks zum Einsatz kommen! Sie können dabei viel von Ihrem bisherigen Inhalt wiederverwenden. In dieser Übung geht es um einen modernen Ansatz, Seiten zu layouten. Sie werden eine Seite entwickeln, die auch auf mobile Endgeräte angepasst ist.

{{< figure title="Die Tutorialseite mobil in den Developer Tools." src="../img/screenshot-mobile-devtools.png" >}}

- Arbeiten Sie das Tutorial [Build a responsive website layout with flexbox](https://coder-coder.com/build-flexbox-website-layout/) durch. Es ist leider nur auf Englisch verfügbar. Aber [DeepL](https://www.deepl.com/translator) ist Ihr Freund bzw. Ihre Freundin.
- Nutzen Sie den Quellcode für das Tutorial [auf GitHub](https://github.com/thecodercoder/Simple-Responsive-Layout). Sie können ihn über den Button *Clone or download* > *Download ZIP* herunterladen. **Sie brauchen von all den Dateien in dem Archiv nur die `index.html` und die Datei `dist/style.css`! Die anderen Dateien und Ordner können Sie getrost löschen.**
- Studieren Sie mithilfe des Tutorials das Konzept der Beispielwebsite genau.
  - Für die Darstellung der Seite auf mobilen Endgeräten sind [CSS-Media-Queries](https://wiki.selfhtml.org/wiki/CSS/Media_Queries) `@media` verantwortlich.
  - Verschiedene Flexbox-Eigenschaften sorgen für die flexible Darstellung je nach Größe des [Viewports](https://wiki.selfhtml.org/wiki/Viewport).
- Spielen Sie in den Chrome Developer Tools mit den mobilen Ansichten der Website herum.
- Lernen Sie spielerisch die Möglichkeiten von Flexbox mit dem Spiel [Flexbox Froggy](https://flexboxfroggy.com/#de) kennen.