Digital Typography – UI/UX Design

Technik Workshops

Coding Intro: Markup & -down

Typen von digitalisiertem Text

Rich Text

  • Formatierter Text
    • verschiedene Fonts
    • verschiedne Schriftgrössen, -gewichte etc.
    • Farbe
  • das Interface zur Textbearbeitung zeigt das gerenderte Dokument
  • Formtierung Text per Buttons
  • Information zur Auszeichnung (‘Markup’) im Text enthalten, wird von Software verborgen.

Reiner Text

  • Enthält nur Zeichen und Umbrüche
  • Umbrüche sind in Text enthalten, werden von Software verborgen.
  • keine Information zu Auszeichnungen
    • kein Font
    • keine Schriftgrösse
    • kein Schriftgewicht etc.
    • keine Farbe etc.

Programmiersprache

  • Reiner Text
  • Inhalt in definierter Programmiersprache (angezeigt durch Datei-Endung)
  • Texteditor-Software ist in der Lage, das Zeichenfolgen je nach Kontext auszuzeichnen (‘Syntax Highlighting’)
  • Information zu Auzeichnung

Auszeichnungssprache

  • Reiner Text
  • Information zur Auszeichnung als Zeichenketten im Text enthalten (‘Markup’)
  • Beispiele: Markdown, HTML, LaTex

Stylesheet-Sprache

Vollständigkeitshalber führe ich diesen Typ hier auch noch auf, damit CSS auch ein «Zuhause» hat.

Hausaufgaben

  • Markdown-Syntax repetieren
  • Etwas Text zum bearbeiten mitbringen: Dein eigenes Stelleninserat oder deinen Traumstellen-Beschrieb
    • Aus Markdown als HTML-exportieren (du brauchst nur den Teil im <body>).
    • Wir werden das als Ausgangsmaterial für Übungen und Tests an verschiedenen Bildschirmgrössen brauchen.
  • HTML/CSS Grundlagen im Selbststudium
    • einen der unten aufgeführten Kurse durcharbeiten
    • oder einen selbstgewählten Kurs, z.B. auf Codecademy o.ä.

Das Ziel ist, dass du einen Überblick über die grundlegenden HTML-Tags hast und wie sie mit CSS formatiert werden können, und dass du das «Box-Model» und den «Document-Flow» verstehst. Hab kein schlechtes Gewissen, wenn du etwas auslässt. Lieber selber experimentieren, als alle Lektion bis zum Umfallen schauen!

HTML-Links

  • HTML-Kurs Englisch
    • Kapitel 1–7
    • Optional sind folgende Abschnitte
      • Understanding content models
      • WAI-ARIA Roles (wichtig im Zusammenhang mit Barrierefreiheit)
      • Definition-Lists
  • HTML Kurs Deutsch
    • Kaptiel 1–6
    • Optional sind folgende Abschnitte
      • Einfache Tabellen erstellen
      • Tabellen in Bereiche unterteilen
      • Immer scharf: Pixelgrafiken für hochauflösende Bildschirme einbinden (interessant, aber zu fortgeschritten)

Ich habe die Kurse heute stichprobenartig verglichen – ich habe den Verdacht, dass der Deutsche etwas besser gegliedert ist.

Markdown-Links

SVG-Links

Seiten 1–3 enthalten, was wir bis jetzt angeschaut haben.