{"id":97,"date":"2023-03-14T16:29:00","date_gmt":"2023-03-14T15:29:00","guid":{"rendered":"https:\/\/zuugs.hfh.ch\/zuugsanleitungen\/?post_type=chapter&p=97"},"modified":"2026-01-19T15:56:54","modified_gmt":"2026-01-19T14:56:54","slug":"themen-fuer-fortgeschrittene","status":"publish","type":"chapter","link":"https:\/\/zuugs.hfh.ch\/zuugsanleitungen\/chapter\/themen-fuer-fortgeschrittene\/","title":{"raw":"Themen f\u00fcr Fortgeschrittene","rendered":"Themen f\u00fcr Fortgeschrittene"},"content":{"raw":"Bei Interesse meldet ihr euch beim\u00a0dlc@hfh.ch<\/a>.\r\n

\u00dcberblick der Themen<\/h2>\r\n
    \r\n \t
  1. Zugang\/Rechte\/Rollen<\/li>\r\n \t
  2. Suchen & Ersetzen (unter Werkzeuge)<\/li>\r\n \t
  3. Private Notizen im Zuugs per [[private]<\/code>...[\/private]]<\/code><\/li>\r\n \t
  4. Konfetti per [[hfh_confetti]]<\/code><\/li>\r\n \t
  5. Export\/Klonen<\/li>\r\n \t
  6. [pb_glossary id=\"479\"]Glossar[\/pb_glossary] erstellen<\/li>\r\n \t
  7. Filter\/Kategorisierung (Beispiele: Sprint<\/a>, Autismusfachpersonen<\/a>, Lernen an F\u00e4llen<\/a>, Wissen was wirkt<\/a>)<\/li>\r\n \t
  8. Gamipress (Gamification)<\/a><\/li>\r\n \t
  9. Pollmaker (Beispiele von Votings<\/a>)<\/li>\r\n \t
  10. 3D-Modelle (Beispiel: https:\/\/zuugs.hfh.ch\/lehrszenarien\/chapter\/interaktives-material\/<\/a>)<\/li>\r\n \t
  11. Interactive Image-Maps (Beispiel: https:\/\/digital.hfh.ch\/digiprojekte20192024\/chapter\/uebersicht-der-projekte\/#projektegrafik<\/a>)<\/li>\r\n \t
  12. Chapters: andere Navigation (Beispiel: https:\/\/digital.hfh.ch\/lp21stakeholderjourney\/chapter\/einleitung-situationsanalyse\/<\/a>)<\/li>\r\n \t
  13. Notizen auf WWW-Websites (hypothes.is) (https:\/\/zuugs.hfh.ch\/lehrszenarien\/chapter\/hypothes-is\/<\/a>)<\/li>\r\n \t
  14. Buttons in verschiedenen Farben, siehe unten.<\/li>\r\n \t
  15. Banner<\/li>\r\n \t
  16. Abschnitts-\/Kapitelnummerierung<\/li>\r\n \t
  17. Lernfortschritt \/ Cockpit \/ Lesezeichen<\/li>\r\n \t
  18. Zuugsi (Hinweise und bald KI)<\/li>\r\n<\/ol>\r\n

    <\/a>Buttons-Dokumentation<\/h3>\r\n
    Schwarzer Button<\/a>Weisser Button<\/a>Gr\u00fcner Button<\/a>T\u00fcrkiser Button<\/a>Oranger Button<\/a>Blauer Button<\/a><\/div>\r\n

    Gitter<\/h4>\r\nDie Klassendefinition sieht wie folgt aus und muss ins Design > Benutzerdefinierte Stile eingef\u00fcgt werden.\r\n.hfh-button-grid {\r\ndisplay: grid;\r\ngrid-template-columns: repeat(auto-fill, minmax(215px, 1fr));\r\nrow-gap: 1rem;\r\ncolumn-gap: 1rem;\r\n}<\/code>\r\nDie Anzahl Spalten und Buttonsbreite werden \u00fcber minimax definiert, nach Bedarf. Will man, dass W\u00f6rter nicht getrennt werden, kann man das 'hyphens:none;' nutzen.\r\n\r\nhyphens: none;<\/code>\r\n

    Buttons<\/h4>\r\nEin Button ist '- -primary' (schwarzer Button), '- -secondary' (weisser Button) oder hat eine Farbe (- -green, - -turqoise, - -orange, - -blue) und enth\u00e4lt einen Link, hier hfh.ch. Will man, dass der Pfeil in die andere Richtung schaut: hfh-button--flipped.\r\n\r\n<a style=\"width:100%;\" class=\"hfh-button hfh-button--green<\/strong> hfh-button--animated hfh-button--icon-arrow\" href=\"http:\/\/hfh.ch<\/strong>\" target=\"_blank\" rel=\"noopener\">Gr\u00fcner Button<\/a><\/code>\r\n

    Gesamtcode<\/h4>\r\nHinweis: Der Code soll so ohne Zusatzabst\u00e4nde oder Zeilenabst\u00e4nde eingef\u00fcgt werden, sonst schaltet sich Wordpress ein und verstellt Sachen. Der ganze Code f\u00fcr die sechs Buttons:\r\n<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\u00fcner 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\u00fcrkiser 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><\/code>\r\n\r\n ","rendered":"

    Bei Interesse meldet ihr euch beim\u00a0dlc@hfh.ch<\/a>.<\/p>\n

    \u00dcberblick der Themen<\/h2>\n
      \n
    1. Zugang\/Rechte\/Rollen<\/li>\n
    2. Suchen & Ersetzen (unter Werkzeuge)<\/li>\n
    3. Private Notizen im Zuugs per [private]<\/code>…[\/private]<\/code><\/li>\n
    4. Konfetti per [hfh_confetti]<\/code><\/li>\n
    5. Export\/Klonen<\/li>\n
    6. Glossar<\/a> erstellen<\/li>\n
    7. Filter\/Kategorisierung (Beispiele: Sprint<\/a>, Autismusfachpersonen<\/a>, Lernen an F\u00e4llen<\/a>, Wissen was wirkt<\/a>)<\/li>\n
    8. Gamipress (Gamification)<\/a><\/li>\n
    9. Pollmaker (Beispiele von Votings<\/a>)<\/li>\n
    10. 3D-Modelle (Beispiel: https:\/\/zuugs.hfh.ch\/lehrszenarien\/chapter\/interaktives-material\/<\/a>)<\/li>\n
    11. Interactive Image-Maps (Beispiel: https:\/\/digital.hfh.ch\/digiprojekte20192024\/chapter\/uebersicht-der-projekte\/#projektegrafik<\/a>)<\/li>\n
    12. Chapters: andere Navigation (Beispiel: https:\/\/digital.hfh.ch\/lp21stakeholderjourney\/chapter\/einleitung-situationsanalyse\/<\/a>)<\/li>\n
    13. Notizen auf WWW-Websites (hypothes.is) (https:\/\/zuugs.hfh.ch\/lehrszenarien\/chapter\/hypothes-is\/<\/a>)<\/li>\n
    14. Buttons in verschiedenen Farben, siehe unten.<\/li>\n
    15. Banner<\/li>\n
    16. Abschnitts-\/Kapitelnummerierung<\/li>\n
    17. Lernfortschritt \/ Cockpit \/ Lesezeichen<\/li>\n
    18. Zuugsi (Hinweise und bald KI)<\/li>\n<\/ol>\n

      <\/a>Buttons-Dokumentation<\/h3>\n
      Schwarzer Button<\/a>Weisser Button<\/a>Gr\u00fcner Button<\/a>T\u00fcrkiser Button<\/a>Oranger Button<\/a>Blauer Button<\/a><\/div>\n

      Gitter<\/h4>\n

      Die Klassendefinition sieht wie folgt aus und muss ins Design > Benutzerdefinierte Stile eingef\u00fcgt werden.
      \n.hfh-button-grid {
      \ndisplay: grid;
      \ngrid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
      \nrow-gap: 1rem;
      \ncolumn-gap: 1rem;
      \n}<\/code>
      \nDie Anzahl Spalten und Buttonsbreite werden \u00fcber minimax definiert, nach Bedarf. Will man, dass W\u00f6rter nicht getrennt werden, kann man das ‚hyphens:none;‘ nutzen.<\/p>\n

      hyphens: none;<\/code><\/p>\n

      Buttons<\/h4>\n

      Ein Button ist ‚- -primary‘ (schwarzer Button), ‚- -secondary‘ (weisser Button) oder hat eine Farbe (- -green, – -turqoise, – -orange, – -blue) und enth\u00e4lt einen Link, hier hfh.ch. Will man, dass der Pfeil in die andere Richtung schaut: hfh-button–flipped.<\/p>\n

      <a style=\"width:100%;\" class=\"hfh-button hfh-button--green<\/strong> hfh-button--animated hfh-button--icon-arrow\" href=\"http:\/\/hfh.ch<\/strong>\" target=\"_blank\" rel=\"noopener\">Gr\u00fcner Button<\/a><\/code><\/p>\n

      Gesamtcode<\/h4>\n

      Hinweis: Der Code soll so ohne Zusatzabst\u00e4nde oder Zeilenabst\u00e4nde eingef\u00fcgt werden, sonst schaltet sich WordPress ein und verstellt Sachen. Der ganze Code f\u00fcr die sechs Buttons:
      \n<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\u00fcner 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\u00fcrkiser 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><\/code><\/p>\n

       <\/p>\n

      definition<\/span>