Commit eab776fa authored by Axel Dürkop's avatar Axel Dürkop
Browse files

Overhaul Schriften und Bilder

parent 586807d1
......@@ -8,11 +8,10 @@ LastModifierDisplayName: Axel Dürkop
LastModifierEmail: axel.duerkop@tuhh.de
---
## Schriften und Bilder
### Typografie im Netz
## Typografie im Netz
Mit gut gewählten Schriften kann eine Website gestalterisch sehr gewinnen. Typografie im Netz ist daher zu einem eigenen Bereich geworden, besonders seit das mobile Web in den Vordergrund gerückt ist.
Mit gut gewählten Schriften kann eine Website gestalterisch sehr gewinnen. Typografie im Netz ist daher zu einem eigenen Bereich geworden, besonders seit das mobile Web in den Vordergrund gerückt ist. [Lesen Sie diesen einführenden Beitrag zu Typografie im Netz](https://www.selbstaendig-im-netz.de/webdesign/die-wichtigsten-aspekte-fuer-eine-gelungene-typografie-digitale-schriftsetzung-teil-i/).
{{< figure src="../img/schriften-und-bilder/diomari-madulara-FFZjSpUwc_I-unsplash.jpg" title="Foto von Diomari Madulara on Unsplash" >}}
......@@ -26,7 +25,7 @@ body {
Gut möglich, dass auf dem eigenen Rechner, auf dem die Website entwickelt wird, auch gleich die gewünschte Veränderung zu sehen ist. Ein häufiges Missverständnis kann hier allerdings auftreten:
**Es kann sein, dass die CSS-Anweisung funktioniert, weil die entsprechende Schriftart auf dem eigenen Rechner installiert ist oder im Cache des Browsers liegt. Das heißt aber noch lange nicht, dass sie auch auf den Rechnern der Nutzer_innen vorliegt, die die Website später aufrufen.**
**Es kann sein, dass die CSS-Anweisung funktioniert, weil die entsprechende Schriftart auf dem eigenen Rechner installiert ist oder im Cache des Browsers liegt. Das heißt aber noch lange nicht, dass sie auch auf den Rechnern der Nutzer\*innen vorliegt, die die Website später aufrufen.**
Damit die gewünschte Schriftart auch bei anderen zu sehen ist, müssen diese sie herunterladen können. Das geht z.B. wie folgt:
......@@ -34,33 +33,11 @@ Damit die gewünschte Schriftart auch bei anderen zu sehen ist, müssen diese si
<link href="https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap" rel="stylesheet">
```
In diesem Beispiel wird die Schriftart von [Google Fonts](https://fonts.google.com/specimen/Chelsea+Market?sidebar.open&selection.family=Chelsea+Market) geladen, wenn die Webseite aufgerufen wird. Anschließend kann sie wie oben beschrieben im CSS angesprochen werden -- gleich, ob sie auf dem Rechner *installiert* ist oder nicht. Die zugehörige Endanwenderlizenz (weiter unten auf der Seite) regelt, inwieweit die Verwendung rechtlich erlaubt ist.
In diesem Beispiel wird die Schriftart von [Google Fonts](https://fonts.google.com/specimen/Chelsea+Market?sidebar.open&selection.family=Chelsea+Market) geladen, wenn die Webseite aufgerufen wird. Anschließend kann sie wie oben beschrieben im CSS angesprochen werden -- egal, ob sie auf dem Rechner *installiert* ist oder nicht. Die zugehörige Endanwenderlizenz (weiter unten auf der Seite) regelt, inwieweit die Verwendung rechtlich erlaubt ist.
---
### Bilder einbinden
Das [Einbinden von Bildern](https://www.html-seminar.de/grafiken.htm) in Webseiten funktioniert mit dem `img`-Element sehr einfach. Im `src`-Attribut wird der Speicherort des Bildes angegeben, im `alt`-Attribut ein alternativer Text, der angezeigt wird, wenn das Bild nicht geladen werden kann.
Oft sind Bilder auf Webseiten mit weiteren Informationen verknüpft, einer Urheber_innen- und Lizenzangabe, einer Bildunterschrift oder auch einem beschreibenden Text wie bspw. [in einem Webshop](https://www.ebay.de/sch/i.html?_from=R40&_trksid=p2380057.m570.l1313.TR5.TRC0.A0.H0.Xhtml5+buch.TRS0&_nkw=html5+buch&_sacat=0) oder [einer Seite für freie und offene Bildungsmaterialien](https://open-educational-resources.de/materialien/contentbuffet/).
{{< figure src="../img/schriften-und-bilder/screenshot-oer-content-buffet.png" title="Screenshot der Materialsuche im OER-Contentbuffet" >}}
#### Bild und Bildunterschrift
Da Bilder in Webseiten so wichtig sind, gibt es viele verschiedene Wege, um diese zu gestalten, die Sie im Arbeitsauftrag noch näher kennenlernen werden. Eine Neuerung von HTML5 ist die Kombination von `figure` und `figcaption`, um Bild und Bildunterschrift zusammen darzustellen:
## Schriften von anderem Server einbinden
```html
<figure>
<img src="hund.jpg" width="800" height="600" alt="Bild mit Hund" />
<figcaption>Ein dicker Hund</figcaption>
</figure>
```
---
## Aufgabenstellung in der Sitzung
Führen Sie die folgenden Aufgaben in Ihrer eigenen Website durch. Lassen Sie sich Zeit, es gibt niemanden, der Sie drängt!
Einfach, oder? Leider nicht mehr datenschutzkonform, weil bei jedem Aufruf *Ihrer* Website bei Google auch Daten landen, nämlich durch den Abruf der Schriftdatei. Daher ist dringend empfohlen, Google-Schriften zusammen mit Ihrer Website auszuliefern. Konkret heißt das, dass Sie die Fontdateien von Google herunterladen und in das Verzeichnis Ihres HTML-Konstrukts legen.
### Schriften auswählen
......@@ -82,22 +59,61 @@ Nutzen Sie die ausgesuchten Schriften in Ihrer Website.
- Verwenden Sie die **serifenlose Schrift** als generelle Schrift auf Ihrer Website (`body`).
- Verwenden Sie die **Serifen-Schrift** für alle **Überschriften** (`h1`, `h2` usw.).
**Laden Sie Ihr Ergebnis in GitLab hoch, wenn Sie fertig sind. Posten Sie einen Screenshot im Chat, der Ihre neuen Schriften auf der Seite zeigt.**
### Schriften von Google datenschutzkonform einbinden
Nun lädt Ihr Browser Fonts von Google-Servern. Dabei werden *dort* Informationen über alle Besucher\*innen *Ihrer* Website gesammelt. [Das ist gemäß der DSGVO nicht mehr zulässig](https://www.mittwald.de/blog/mittwald/howtos/dem-datenschutz-zuliebe-wie-ihr-google-fonts-lokal-in-eure-webseiten-einbindet), sodass es andere Wege braucht, um die Google Fonts zu verwenden.
{{% callout note %}}
Leider ist bewährte Tool *google-webfonts-helper* nicht mehr online. Es generiert einen teils umfangreichen CSS-Schnipsel, den Sie an den Anfang Ihrer CSS-Datei einfügen, um Google Fonts lokal zu verwenden. Darin wird auf *Dateien* verwiesen, die ab jetzt in einem neuen Ordner `fonts` Ihrem Verzeichnis erwartet werden.
{{% /callout %}}
1. Erstellen Sie zunächst ein Verzeichnis `fonts` im gleichen Ordner wie Ihr HTML-Konstrukt.
1. Laden Sie alle Schriftdateien herunter, und fügen Sie sie in das `fonts`-Verzeichnis ein. Das Ergebnis könnte wie folgt aussehen:
```bash
.
├── fonts
│   ├── merriweather-v21-latin-300.eot
│   ├── merriweather-v21-latin-300italic.eot
│   ├── merriweather-v21-latin-300italic.svg
│   ├── merriweather-v21-latin-300italic.ttf
│   ├── merriweather-v21-latin-300italic.woff
│   ├── merriweather-v21-latin-300italic.woff2
│   ├── merriweather-v21-latin-300.svg
│   ├── merriweather-v21-latin-300.ttf
│   ├── merriweather-v21-latin-300.woff
│   ├── merriweather-v21-latin-300.woff2
│   ├── merriweather-v21-latin-regular.eot
│   ├── merriweather-v21-latin-regular.svg
│   ├── merriweather-v21-latin-regular.ttf
│   ├── merriweather-v21-latin-regular.woff
│   └── merriweather-v21-latin-regular.woff2
├── index.html
└── style.css
```
1. Kopieren Sie nun den HTML-Schnipsel zur Einbettung der Schriften vom Google-Server in Ihren Editor, z. B.
`<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;1,100&display=swap" rel="stylesheet">`
1. Öffnen Sie nun die blanke URL im Browser. Sie sollten eine CSS-Datei angezeigt bekommen, deren Inhalt Sie in Ihre CSS-Datei kopieren. Passen Sie anschließend den Pfad der `src`-Eigenschaft an, sodass er auf Ihren lokalen Ordner `fonts` passt.
2. Lesen Sie zur CSS-Eigenschaft `@font-face` [im Self-HTML-Wiki](https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung/@font-face) nach.
## Bilder einbinden
### Netzwerkverkehr beobachten
Das [Einbinden von Bildern](https://www.html-seminar.de/grafiken.htm) in Webseiten funktioniert mit dem `img`-Element sehr einfach. Im `src`-Attribut wird der Speicherort des Bildes angegeben, im `alt`-Attribut ein alternativer Text, der angezeigt wird, wenn das Bild nicht geladen werden kann.
Beobachten Sie den Netzwerkverkehr in den Chrome Developer Tools, der durch das Laden Ihrer neuen Schriften verursacht wird.
Oft sind Bilder auf Webseiten mit weiteren Informationen verknüpft, einer Urheber_innen- und Lizenzangabe, einer Bildunterschrift oder auch einem beschreibenden Text wie bspw. [in einem Webshop](https://www.ebay.de/sch/i.html?_from=R40&_trksid=p2380057.m570.l1313.TR5.TRC0.A0.H0.Xhtml5+buch.TRS0&_nkw=html5+buch&_sacat=0) oder [einer Seite für freie und offene Bildungsmaterialien](https://open-educational-resources.de/materialien/contentbuffet/).
- Öffnen Sie die Chrome Developer Tools.
- Aktivieren Sie den *Network*-Tab.
- Laden Sie Ihre Seite neu.
- Suchen Sie den Vorgang aus der Liste des Netzwerkverkehrs, der das Laden Ihrer Fonts anzeigt.
{{< figure src="../img/schriften-und-bilder/screenshot-oer-content-buffet.png" title="Screenshot der Materialsuche im OER-Contentbuffet" >}}
Was bedeutet es technisch und rechtlich, wenn eine Schrift von Google nachgeladen wird?
#### Bild und Bildunterschrift
**Posten Sie einen Screenshot im Chat, der diesen Netzwerkverkehr in den Chrome Developer Tools zeigt.**
Da Bilder in Webseiten so wichtig sind, gibt es viele verschiedene Wege, um diese zu gestalten, die Sie im Arbeitsauftrag noch näher kennenlernen werden. Eine Neuerung von HTML5 ist die Kombination von `figure` und `figcaption`, um Bild und Bildunterschrift zusammen darzustellen:
---
```html
<figure>
<img src="hund.jpg" width="800" height="600" alt="Bild mit Hund" />
<figcaption>Ein dicker Hund</figcaption>
</figure>
```
### Bilder mit Bildunterschrift versehen
......@@ -107,76 +123,13 @@ Was bedeutet es technisch und rechtlich, wenn eine Schrift von Google nachgelade
Beurteilen Sie: Welche Schriftart eignet sich für Ihre Bildunterschriften besser, die Schrift mit oder die ohne Serifen?
**Laden Sie Ihr Ergebnis in GitLab hoch, wenn Sie fertig sind. Posten Sie einen Screenshot im Chat, der Ihre Bilder mit Bildunterschrift zeigt.**
---
## Arbeitsauftrag
Der heutige Arbeitsauftrag dient dazu, Ihr Wissen über Schriften, Bilder im Netz sowie Flexbox zu vertiefen.
### Ziele
- Sie können Google-Schriften datenschutzkonform einbinden.
- Sie wissen, welche Formate und Größen für Bilder im Netz geeignet sind.
- Sie kennen verschiedene Möglichkeiten, Bilder mit CSS zu formatieren.
- Sie wissen, wie Bilder für verschiedene Endgeräte und Viewports ausgezeichnet und gestaltet werden können.
- Sie können Bilder mithilfe von Flexbox responsiv layouten.
### Wissen vertiefen
#### Typografie im Netz
- Nehmen Sie zur Kenntnis, dass Ethan Marcotte vor zehn Jahren [den Begriff *Responsive Web Design* geprägt hat](https://alistapart.com/article/responsive-web-design/). Wenn Sie Lust und Zeit haben, lesen Sie den englischen Beitrag.
- Lesen Sie zwei Beiträge zur Auswahl von Schriftarten für das Netz:
- [Typografie im Netz](https://www.netzdenke.de/blog/konzeption-gestaltung/typografie-im-netz/) von Netzdenke
- [Die wichtigsten Aspekte für eine gelungene Typografie – Digitale Schriftsetzung Teil I](https://www.selbstaendig-im-netz.de/webdesign/die-wichtigsten-aspekte-fuer-eine-gelungene-typografie-digitale-schriftsetzung-teil-i/). Am Ende der Seite werden noch weitere Teile empfohlen.
#### Bilder einbinden und formatieren
### Bilder einbinden und formatieren
- Lesen Sie, welche Überlegungen zu [Formaten und Größen](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen) von Bildern angestellt werden sollten.
- Lesen Sie, wie Sie [Bilder mit CSS formatieren](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Bilder_mit_CSS_formatieren) können. Klicken Sie auf die "Vorschau"-Tabs in den Beispielen, um zu sehen, wie Markup und CSS umgesetzt werden.
- Lesen Sie, wie [responsive Bildgestaltung](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/responsive_Bilder) für verschiedene Endgeräte und Viewportgrößen funktionieren kann.
#### Projektarbeit
##### Schriften von Google datenschutzkonform einbinden
Wie Sie mit den Chrome Developer Tools feststellen werden, lädt Ihr Browser Fonts von Google-Servern nach. Dabei werden *dort* Informationen über alle Besucher_innen *Ihrer* Website gesammelt. [Das ist gemäß der DSGVO nicht mehr zulässig](https://www.mittwald.de/blog/mittwald/howtos/dem-datenschutz-zuliebe-wie-ihr-google-fonts-lokal-in-eure-webseiten-einbindet), sodass es andere Wege braucht, um die Google Fonts zu verwenden.
Der *google-webfonts-helper* generiert einen teils umfangreichen CSS-Schnipsel, den Sie an den Anfang Ihrer CSS-Datei einfügen. Darin wird auf *Dateien* verwiesen, die ab jetzt in einem neuen Ordner `fonts` Ihrem Verzeichnis erwartet werden. Damit die Pfade stimmen, sollten Sie vor dem Kopierien und Einfügen zunächst den Pfad korrigieren:
{{< figure src="../img/schriften-und-bilder/screenshot-fonts.png" title="Einstellung des korrekten Pfads zum fonts-Ordner" >}}
Laden Sie alle Schriftdateien herunter, und fügen Sie sie in das `fonts`-Verzeichnis ein. Das Ergebnis könnte wie folgt aussehen:
```bash
.
├── fonts
│   ├── merriweather-v21-latin-300.eot
│   ├── merriweather-v21-latin-300italic.eot
│   ├── merriweather-v21-latin-300italic.svg
│   ├── merriweather-v21-latin-300italic.ttf
│   ├── merriweather-v21-latin-300italic.woff
│   ├── merriweather-v21-latin-300italic.woff2
│   ├── merriweather-v21-latin-300.svg
│   ├── merriweather-v21-latin-300.ttf
│   ├── merriweather-v21-latin-300.woff
│   ├── merriweather-v21-latin-300.woff2
│   ├── merriweather-v21-latin-regular.eot
│   ├── merriweather-v21-latin-regular.svg
│   ├── merriweather-v21-latin-regular.ttf
│   ├── merriweather-v21-latin-regular.woff
│   └── merriweather-v21-latin-regular.woff2
├── index.html
└── style.css
```
- Verwenden Sie das Tool [google-webfonts-helper](https://google-webfonts-helper.herokuapp.com/fonts), um Ihre zuvor gewählten Fonts direkt in Ihre Website zu integrieren. Das Ergebnis ist, dass die Fonts fortan *von Ihrem* Server und nicht mehr von Google geladen werden!
- Prüfen Sie dieses Ergebnis erneut mit den Chrome Developer Tools.
- Lesen Sie zur CSS-Eigenschaft `@font-face` [im Self-HTML-Wiki](https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung/@font-face) nach.
##### Bilder mit Flexbox layouten
### Bilder mit Flexbox layouten
Beschäftigen Sie sich zunächst noch einmal mit dem Konzept von Flexbox. Nutzen Sie dafür [das anschauliche Tutorial](https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/) mit Beispielen. Empfehlung: Legen Sie für die Arbeit mit dem Tutorial eine neue `index.html` und eine eigene `style.css` an. Übertragen Sie anschließend das Gelernte in Ihren Projektkontext! Lesen Sie nicht nur, sondern arbeiten Sie hands-on die Beispiele durch.
......@@ -188,6 +141,3 @@ Spielen Sie mit dem neuen und vertieften Wissen herum. Nehmen Sie sich nicht zuv
{{< figure class="img-small" src="../img/schriften-und-bilder/screenshot-galery-mobile.png" title="Mobile Ansicht" >}}
##### Projektziele verfolgen
Arbeiten Sie weiter in Ihren Gruppen an Ihrem Projekt. Nehmen Sie sich eine konkrete Baustelle vor und treiben Sie diese voran.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment