Gestaltung vs. Code: Text und Links

Im zweiten Semester möchte ich (unter anderem) untersuchen, wie die Übergabe zwischen Gestaltung und Programmierung geschieht / geschehen kann.

Es gibt sehr viele Arten wie das gemacht werden kann, von spezialisierten Tools über handgefertigte Style-Guides bis zu handgeschriebenen Zetteln. Als ersten Schritt möchte ich hier der Frage nachgehen, wie du der geneigten Programmiererin die Spezifikationen für die Formatierung von Text vermitteln kannst. Dazu ist es nötig zu vergleichen, wie Text in der Gestaltungs-Software einerseits und mit Code andererseits formatiert wird. Und dann fragen wir uns, welche Schnittstellen dazwischen Sinn machen.

Eine Übung

Um den Ball erstmal flach zu halten, beschränken wir uns erst einmal auf Text und Links. So beschränkt ist das aber gar nicht, denn genau bei diesen einfachen Elementen hapert es häufig bei der Übergabe.

1. Öffne eine Website mit Links, z.B. Wikipedia.
   • woran erkennst du links?
2. Wusstest du, dass du mit Tab/Return durch die Links einer Seite navigieren und ihnen folgen kannst?
3. Weisst du, was CSS-Pseudo-Klassen sind?
4. Mit den Dev-Tools des Browsers kannst du Pseudo-Klassen wie :hover aktivieren.
5. Öffne Codepen und style ein paar Links.
   • gibt es Alternativen zur Standard-Auszeichnung?
6. Wenn das klar ist, gestalte in Figma etwas Text mit Text-Stilen
   • Normal
   • Überschrift
   • Link
   • Link (hover)
   • Auszeichnungen: welche Möglichkeiten zur Link-Auszeichnung gibt es?
   • Schrift: Google- oder System-Font
   • Farbe: es muss farbigen Text geben.
   • (Optional) Dark-Mode: es braucht ein alternatives Farbschema für Nachteulen (heller Hintergrund verboten).
7. «Teile» das Figma-Dokument mit jemand anderem (so dass der/die Andere nur «schauen» kann).
8. Setze den Entwurf eines deiner Gspänli in HTML/CSS um (Codepen)
9. Welche Infos lassen sich aus so einem geteilten Figma-Dokument herauslesen?
10. Bespreche diesen Workflow mit jemandem, wie schätzt ihr das ein?

Theorie etc.

Welche Arten von Links gibt es? Was machen sie? (HTML)

<a>                         <!-- Link tag -->
<a href="">                 <!-- das Attribut "href" ‘hypertext reference’ enthält das Ziel des Links -->
<a href="" target="_blank"> <!-- Ziel-Adresse wird in einem neuen Tab geöffnet -->
<a href="mailto:">          <!-- E-Mail Link (öffnet Mail Applikation) -->
<a href="tel:">             <!-- Telefon-Nummer-Link -->
<a href="#">                <!-- Anker-Link zum Springen innerhalb des Dokuments -->

Wie können Links mit CSS gestylt werden?

Selektoren (Pseudo Klassen)

a { }           /* alle Links */
a:link { }      /* noch nicht besuchte Links */
a:visited { }   /* besuchte Links */
a:focus { }     /* mit Tab ausgewählte Links */
a:hover { }     /* Links unter dem Cursor */
a:active { }    /* Links beim Klick */

Diese Reihenfolge ist wichtig, weil sich die Regeln sonst gegenseitig aushebeln können, z.B. wenn :visited nach :hover kommt.

Es ist aber nicht unbedingt nötig, für alle diese Pseudo-Klassen Regeln zu definieren. Z.B. wird :visited häufig weggelassen. :focus wegzulassen, ist aber klar eine vergebene Chance für ein cooles Detail 😉.

Links HTML/CSS

• MDN, Styling links
• MDN, Styling Lists
• MDN, Pseudo-Classes

Links: Text-Styles in Figma

• Figma Documentation, Create and apply text styles
• Figma Documentation, Naming and organizing text styles
• Figma Documentation, Create a bulleted list
• [Figma Documentation, Combining color styles and text styles](Combining color styles and text styles) – Farbe kann bei Figma nicht direkt Bestandteil eines Text-Stils sein.
• Figma Documentation, Components (für komplexere Dinge)

Optional: Dark-Mode

Seit einiger Zeit ist es möglich, mit einer Media-Query abzufragen, ob ein Endgerät im Tag- oder Nacht-Modus läuft.

body {
  color: black;
  background: white;
}

@media (prefers-color-scheme: dark) { /* hier könnte auch "light" stehen */
  body {
    background: black;
    color: white;
  }
}

• MDN, Prefers Color Scheme

CSS Variablen

Mit sog. ‘Custom Properties’ kannst du in CSS einen Wert in eine Variable speichern und ihn später wiederverwenden. Die Custom Property wird in der Regel zum Selektor :root als name mit zwei vorangestellten Bindestrichen definiert: --foo: 57px.

Um diesen Wert später zu referenzieren, verwendest du die var()-Funktion: font-size: var(--foo);

:root {
  --red: rgb(247, 74, 0);
  --blue: rgb(0, 54, 245)
}

a:link { color: var(--blue); }

a:hover { color: var(--red); }

In diesem Beispiel werde zwei komplizierte Farbwerte in zwei einfach zu merkende Variablen gespeichert.

• MDN, CSS Variables

Optional: Dark-Mode mit Variablen

Mit CSS-Variablen wird das einrichten eines Dark-Mode noch einfacher:

:root {
  --bg-col: rgb(255, 255, 255);
  --fg-col: rgb(0, 0, 0);
  --link-col: rgb(0, 0, 180);
  --link-hover-col: rgb(80, 120, 140);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-col: rgb(0, 0, 0);
    --fg-col: rgb(255, 255, 255);
    --link-col: rgb(0, 220, 255);
    --hover-col: rgb(80, 220, 240);
  }
}
body {
    background: var(--bg-col);
    color: var(--fg-col);
}

a,
a:link { color: var(--link-col); }
a:hover { color: var(--hover-col); }