Typografie

Text hervorheben

• Fremd- und Sachwörter kursiv
• sonst gewichten mit fett

GUI-Elemente

• Hinweis: im Tab Einstellungen
• Bedienung: Wähle den Menüpunkt Datei Öffnen
• Bedienung: Klicke auf Akzeptieren.

* Fremd- und Sachwörter *kursiv*
* sonst gewichten mit **fett**
* GUI-Elemente: im Tab _Einstellungen_
* Menüpunkte und Knöpfe: Klicke auf __Akzeptieren__.

Tastenkombinationen

Ctrl + x

[[Ctrl]] + [[x]]

Anführungszeichen

Wir verwenden «Guillemets»

Bindestrich oder Trennstrich?

Wir unterscheiden zwischen diesen beiden:

• Gedankenstrich (em-Dash): –
• Bindestrich (Minus): -

Dateitypen Dateiendungen

(Quelle: Wikipedia macht das so)

Wir schreiben Dateitypen in Grossbuchstaben:

SVG-Dateien können mit Inkscape bearbeitet werden.

Wir schreiben Dateieindungen mit vorangestelltem Punkt in Kleinbuchstaben als Code:

Adobe Photoshop-Dateien mit der Dateiendung .psd.

Sprache

Begriffe

• Wenn möglich deutsche Begriffe verwenden (z.B. Benutzer statt User)
• Begriffe einheitlich verwenden (Sachbegriffe gleich verwenden, nicht mal «Rechnernetz» dann «Netzwerk» und dann «LAN»)

Achtung

Schreiben wir Dateiendung oder Dateierweiterung?
Wikipedia sagt: Dateinamenserweiterung
Google sagt: Dateiendung: 800’000, Dateierweiterung: 125’000, Dateinamenserweiterung: 45’000
Windows sagt: Erweiterungen (z.B. «Erweiterungen bei bekannten Dateitypen ausblenden»)

Benutzer ansprechen

• Aufgaben werden mit «du» formuliert. Im Satzinnern wird «du» klein geschrieben.
• Anleitungen mit «man» oder «du»

Weitere Elemente

Icons

Wir verwenden die Material Design Icons, basierend auf Google MD, aber erweitert.

Icons suchen

https://pictogrammers.com/library/mdi/

Icons können in Markdown eingefügt werden:

:mdi-island:<span style="font-size:3rem">:mdi-soccer:</span>

Oder mit der Vue-Komponente `Icon:

test

<Flex>
	
<Icon icon="mdi-file-word" size="2.6rem" color="#00a2ed" caption="test" />
	
<Icon icon="mdi-account" size="6rem" color="var(--ict-c-gymer)"   />
	
</Flex>

Tabs

Tab-Einstellungen werden pro key im Browser gespeichert und Tabs werden so synchronisiert. Also immer key:os oder key:browser verwenden!

Betriebssystem

text für Windows

:::tabs key:os
== Windows
text für Windows
== macOS
text für macOS
== Linux
text für Linux
:::

Browser

text für Firefox

:::tabs key:browser
== Firefox
text für Firefox
== Chrome
text für Chrome
== Edge
text für Edge
== Safari
text für Safari
:::

Bilder

Zoom

Lightbox-effekt für grössere Bilder

Stormtroopocat

![Stormtroopocat](../images/stormtroopocat.jpg){.zoom}

Retina

macht das Bild 50% kleiner. Sinnvoll für Hochauflösende Screenshots von Smartphones:

![](/assets/google-play.png)

![](/assets/google-play.png){.retina}

dark/light-mode

Zeigt ein Bild nur im jeweiligen Modus an, resp. versteckt es im anderen Modus.

![](/assets/google-play.png){.dark-only}

![](/assets/appstore.svg){.light-only}

Tools

badges für Stores

![](/assets/google-play.png){.retina}

![](/assets/appstore.svg){.invert}

QR-Codes

QR-Codes für app-Store von apple können hier generiert werden:

https://toolbox.marketingtools.apple.com/en-us/app-store/ch?q=microsoft+teams