Themen für Fortgeschrittene

Bei Interesse meldet ihr euch beim dlc@hfh.ch.

Überblick der Themen

1. Zugang/Rechte/Rollen
2. Suchen & Ersetzen (unter Werkzeuge)
3. Private Notizen im Zuugs per [private]…[/private]
4. Konfetti per [hfh_confetti]
5. Export/Klonen
6. Glossar erstellen
7. Filter/Kategorisierung (Beispiele: Sprint, Autismusfachpersonen, Lernen an Fällen, Wissen was wirkt)
8. Gamipress (Gamification)
9. Pollmaker
10. 3D-Modelle (Beispiel: https://zuugs.hfh.ch/lehrszenarien/chapter/interaktives-material/)
11. Interactive Image-Maps (Beispiel: https://digital.hfh.ch/hierarchiearithmetik/chapter/navigation/)
12. Chapters: andere Navigation (Beispiel: https://digital.hfh.ch/lp21stakeholderjourney/chapter/einleitung-situationsanalyse/)
13. Notizen auf WWW-Websites (hypothes.is) (https://zuugs.hfh.ch/lehrszenarien/chapter/hypothes-is/)
14. Buttons in verschiedenen Farben, siehe unten.

Buttons-Dokumentation

Gitter

Im ersten Teil – der Teil, der die Buttons umrandet – wird die Klasse hfh-button-grid benutzt, die standardmässig drei Kolonnen definiert.

<div class="hfh-button-grid"> [...] </div>

oder man definiert zusätzlich die Maximal-Breite der Buttons, hier 215px und Weiteres. Will man, dass Wörter nicht getrennt werden, kann man das ‚hyphens:none;‘ nutzen.

<div class="hfh-button-grid" style="grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); row-gap:1rem; column-gap:1rem; hyphens: none;" > [...] </div>

Buttons

Ein Button ist ‚- -primary‘ (schwarzer Button), ‚- -secondary‘ (weisser Button) oder hat eine Farbe (- -green, – -turqoise, – -orange, – -blue) und enthält einen Link, hier hfh.ch.

<a style="width:100%;" class="hfh-button hfh-button--green hfh-button--animated hfh-button--icon-arrow" href="http://hfh.ch" target="_blank" rel="noopener">Grüner Button</a>

Gesamtcode

Hinweis: Der Code soll so ohne Zusatzabstände oder Zeilenabstände eingefügt werden, sonst schaltet sich WordPress ein und verstellt Sachen. Der ganze Code für die sechs Buttons:
<div class="hfh-button-grid" style="grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); row-gap:1rem; column-gap:1rem; hyphens: none;" ><a style="width:100%;" class="hfh-button hfh-button--primary hfh-button--animated hfh-button--icon-arrow" href="http://hfh.ch" target="_blank" rel="noopener">Schwarzer Button</a><a style="width:100%;" class="hfh-button hfh-button--secondary hfh-button--animated hfh-button--icon-arrow" href="http://hfh.ch" target="_blank" rel="noopener">Weisser Button</a><a style="width:100%;" class="hfh-button hfh-button--green hfh-button--animated hfh-button--icon-arrow" href="http://hfh.ch" target="_blank" rel="noopener">Grüner Button</a><a style="width:100%;" class="hfh-button hfh-button--turqoise hfh-button--animated hfh-button--icon-arrow" href="http://hfh.ch" target="_blank" rel="noopener">Türkiser Button</a><a style="width:100%;" class="hfh-button hfh-button--orange hfh-button--animated hfh-button--icon-arrow" href="http://hfh.ch" target="_blank" rel="noopener">Oranger Button</a><a style="width:100%;" class="hfh-button hfh-button--blue hfh-button--animated hfh-button--icon-arrow" href="http://hfh.ch" target="_blank" rel="noopener">Blauer Button</a></div>

Die Klassendefinition sieht wie folgt aus und kann bei Bedarf ins Design > Benutzerdefinierte Stile eingefügt werden.
.hfh-button-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
row-gap: 1rem;
column-gap: 1rem;
}