Coding Intro

Am ersten Tag geht es um die Frage, was Auszeichnungssprachen sind (HTML und Markdown) und wie sie mit Stylesheet-Sprachen (CSS) zusammenspielen. Dazu schauen wir uns Small Victories an, ein Online-Plattform zur Publikation von Websites aus deiner Dropbox.

HTML

Die Sprache HTML (Hypertext Markup Language) besteht aus strukturiertem Text. Der Text ist der Inhalt, die Struktur ergibt sich aus seiner Reihenfolge und aus Tags. Das sind Text-Elemente, die sich vom Inhalt abheben, weil sie mit eckigen Klammern geschrieben werden <bla>. Sie fassen Text ein, d.h. es gibt auch «schliessende» Tags: </bla>.

Wichtige Erkenntnis: In HTML-Code haben Leerzeichen und Umbrüche wenig bis gar keine Bedeutung. Siehe jodi.org – das ASCII-Bild ist wahrscheinlich auch mit den Dev-Tools nicht zu sehen. Um es zu sehen, musst du dir den Quelltext anzeigen lassen (in Firefox cmd alt u).

Wir arbeiten vorerst nur mit CodePen, das ‘out of the box’ funktionierende HTML- und CSS-Dokumente bietet. Vollständigkeitshalber schreibe ich hier auf, wie ein Vollständiges HTML-Dokument aussehen würde:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Josefs Hobbies</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Meine Hobbies</h1>
  <ul>
    <li>Go spielen</li>
    <li>Lesen</li>
    <li>Akkordeon spielen</li>
  </ul>
</body>
</html>

Was CodePen zeigt, ist nur der Inhalt, des <body> Tags. Wenn du auf deinem Rechner HTML schreibst, um es im Web zu veröffentlichen, dann musst du dich an diese Struktur halten. Dabei sind folgende Elemente erwähnenswert:

<!DOCTYPE html> Die Deklaration des Dokumententyps
<head> Die Meta-Information, d.h. alles was es über das Dokument zu sagen wird, das nicht visuell gerendert werden muss.
<link rel="stylesheet" href="style.css"> die Verbindung zum Stylesheet

HTML ist extrem fehlertolerant. D.h. Dokumente werden auch gerendert, wenn sie fehlerhaft strukturiert sind. Programmiersprachen wie JavaScript oder Python geraten dagegen schon wegen klitzekleinen Interpunktionsfehlern komplett aus dem Konzept.

CSS

CSS heisst Cascading Stylesheets. Mit dieser Sprache werden Stylesheets geschrieben, darum ist es eine Stylesheet-Sprache. Ein Stylesheet besteht aus Regeln, die auf HTML-Elemente angewendet werden. Auf welche HTML-Elemente sich eine Regel bezieht, wird durch den Selektor angegeben, in der Regel der Name eines Tags, seine ID oder seine Klasse.

p {
  font-family: ribosoma, 'comis sans ms';
  font-size: 24px;
  line-height: 1.4;
}

#horrible-thing {
  background: fuchsia;
}

.warning {
  font-weight: bold;
  color: orangered;
}

Abweichungen von dieser Syntax sind Media Queries, die Regeln ab bestimmten Break Points definieren Keyframes für Animationen und die @font-faceRegel zur Einbindung von Webfonts. Dazu kommen wir zu gegebener Zeit.

Eine Website mit Small Victories

Du publizierst eine Website mit Small Victories. Damit kriegst du eine Plattform, auf der du weiterhin kursbezogene Inhalte ablegen kannst, z.B. Notizen, Recherche-Hausaufgaben etc.

Dazu brauchst du ein Dropbox-Konto, einen Code-Editor, Firefox Developer Edition für die hervorragenden Dev-Tools und Figma, wenn du Bilder brauchst.

Unsere Small Victories

Hier folgt eine Liste, sobald ich alle eure Links habe.

Vorbereitung/Ablauf

Small Victories mit Dropbox-Konto verbinden
Eine neue Small Victories Site einrichten:
- Namen wählen
- Template wählen
- Subdomain anpassen
Prüfen, ob der Ordner in deiner Dropbox erstellt wurde.
Markdown- und CSS-Dateien bearbeiten.

Zunächst ist es nicht so wichtig, was drin steht. Du z.B. könntest du deine gegenwärtige Arbeitssituation dokumentieren. Büro/Schreibtisch (aufräumen nicht nötig), Coding-Setup (Screenshot), typische Störquellen. Längerfristig legst du eine Dokumentation des Kurses an und nutzt Markdown, zur Strukturierung deiner Notizen.

Ziele

Du hast einen eigene Small Victories Website online
Optional: Du gibst ihr mit einem eigenen Stylesheet ein eigenes Aussehen
Dabei übst du CSS und Markdown und lernst die Browser Dev-Tools besser kennen («Element untersuchen»)

Vorgehen

Du kannst das Stylesheet ändern, wie es dir passt. Aber pass auf, es wird schnell zeitintensiv.

Analysiere den HTML-Code mit den Firefox-Dev-Tools
- Siehst du den Zusammenhang zwischen Markdown und HTML?
- Mach dir eine Liste der class-Attribute, die du als CSS-Selektoren verwenden kannst.
Editiere das Stylesheet (_sv_custom.css)
- Formatiere die Schriftfamilie und -Grösse (beachte die bereits existierende Media-Query)
- Ändere das Favicon
- … die Farben
- … die Einstellungen für Abstände (margin)
- … die Link-Auszeichnung

Videos

Links

Bei den zwei angegebenen LinkedIn-Learning-Kursen kannst du Vieles weglassen. Z.B. «Pixelgrafiken für hochauflösende Bildschirme einbinden». Das ist zwar interessant, aber nicht unbedingt ein geeignetes Thema für den Anfang.

Snippets zum Pasten

Schriftart aus Ordner einbinden

Für Browser ist «Woff» (Web Open Font Format) das richtige Dateiformat. Das Beispiel unten geht davon aus, dass die Dateien in einem Ordner namens «fonts» im Ordner deiner Small Victories Website liegen.

@font-face {
  font-family: "Super Duper Sans";
  src: url("fonts/Superfont-Regular.woff2") format("woff2"),
       url("fonts/Superfont-Regular.woff") format("woff");
       font-weight: normal; /* kann auch ein Zahlenwert sein, z.B. 300 für Light oder 600 für Halbfett */
}

Nach dieser Regel kannst du den Wert "Super Duper Sans" für die Eigenschaft font-size verwenden.

Google Font einbinden

Google Fonts kannst du per @import in dein Stylesheet einbinden. Beispiel:

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&display=swap');

Danach kannst du den Wert "IBM Plex Sans" für die Eigenschaft font-size verwenden (mit den Gewichten 400 und 600).

CSS Schrift-Einstellung

:root {
    font-size: 100%;
    line-height: 1.3
}

Media Queries

@media (min-width: 600px) {
    /* Regeln für Viewports grösser als 600px */
}

@media (max-width: 600px) {
    /* Regeln für Viewports kleiner als 600px */
}

CSS zum Stylen von Links

a { } /* alle Links */
a:link { } /* nicht besuchte Links*/
a:visited { } /* besuchte Links */
a:focus { } /* mit Tabulator-Taste ausgewählte Links */
a:hover { } /* Cursor über dem Links */
a:active { } /* während des Klicks */

In den Dev-Tools kannst du einstellen, dass die Pseudo-Klassen, wie :hover aktiviert werden. So musst du nicht über die Links fahren um das zu testen.

Digital Typography – UI/UX Design

Technik Workshops