Layouts

Aus DG HochN-Wiki
Wechseln zu:Navigation, Suche
(Die Seite wurde neu angelegt: „TEst“)
 
K
 
(3 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
TEst
+
Überblick über Layoutbedarf und existierende Vorlagen:
 +
Alle Vorlagen: [[Spezial:Vorlagen]]
 +
[[Media:HochNWikiFarben.pdf]]
 +
 
 +
== Vorgehen ==
 +
[https://getbootstrap.com/docs/4.6/components/alerts/ Bootstrap Version 4] wird unterstützt.
 +
 
 +
* Cards werden Hauptelement für die Übersichtsseiten
 +
** Card-Class stylen: Hintergrundfarbe?, runde Ecken...?
 +
** separat Card-headings und Body, Text stylen, sofern sie genutzt werden haben die dann einheitliche Form
 +
** müssen weitere stylings vorgenommen werden falls eine Card ein [https://getbootstrap.com/docs/4.6/components/card/#image-overlays Hintergrundbild] haben soll, bzw. [https://getbootstrap.com/docs/4.6/components/card/#images oben] oder an der [https://getbootstrap.com/docs/4.6/components/card/#horizontal Seite]?
 +
* Tabellen .wikitable mit Hintergrund aus der HochN bzw DG Farbwelt
 +
* Standard-Farbe für Hintergründe etc [https://www.mediawiki.org/wiki/Snippets/Image_Slideshow_created_by_CSS differenzieren nach nach Namensraum]: HOCH-N Namensraum bekommt das grüne Profil
 +
 
 +
* Farben für die einzelnen Banner festlegen, als div oder Tabelle Wikistyle?
 +
 
 +
 
 +
 
 +
== Sammlung ==
 +
=== Seiten mit Layout Elementen  ===
 +
Cards etc. werden für Seiten benötigt, die einen Überblick über ein Themengebiet liefern. Hier sind Beispiele für Übersichtseiten:
 +
* [[Hauptseite]] drei Boxen mit den drei Grundfunktionen des Wikis: Suchen, Schreiben und Vernetzen
 +
* [[Hubs der DG HochN]] enthält alle Hub typen
 +
* [[DG-Hubs]] ein DG Hub ist ein Hub der DG-HochN
 +
* [[DG-Hub - Community Hubs]] Community Hubs gehören zu der Klasse der DG-Hubs (Siblings sind bspw. [[DG-Hub - Innovative Lehrformate für BNE|innovative Lehrformate]], [[DG-Hub - Klimaneutralität und Hochschulen|Klimaneutralität]])
 +
* [[HOCH-N:Roadmap 2030]]
 +
* [[HOCH-N:Handlungsfelder nachhaltiger Hochschulentwicklung]]
 +
* [[HOCH-N:Nachhaltigkeit in der Hochschulforschung (Übersicht)]]
 +
* [[HOCH-N:Nachhaltigkeit in der Hochschulforschung]] (ungefähr template für Handlungsfeldseite, nur die automatische Liste zum filtern verbundener Inhalte fehlt)
 +
* [[HOCH-N:Nachhaltigkeit im Hochschulbetrieb]] auch eine Handlungsfeldseite aber mit Tabelle
 +
 
 +
=== Seitentypen zum Überblick und Bedarf an Layout und Elementen ===
 +
Diese Seiten sollten ein eigenes Layout und Design haben anlegen.
 +
* Überblickseiten
 +
** Handlungsfeld-Seiten(z.B. [[HOCH-N:Nachhaltigkeit in der Hochschulforschung]])
 +
** Hub-Überblickseiten ([[Hubs der DG HochN]] und bspw. [[DG-Hub - Community Hubs]])
 +
** Ideenpool Seite ([[HOCH-N:Ideenpool der Roadmap 2030]])
 +
** Themenseite: Im Laufe der Zeit werden sich neue Themen ergeben. bsow. entlang der Hubs ein Bsp. is die [[Innovative Lehrformate für BNE|Lehrformateseite]] Wie sollen solche Seiten aussehen und sich von den Handlungsfeldern und Hubs abheben.
 +
* Userseiten (z.B. [[User:Thilo]] oder [[User:Bg]])
 +
* Hubseite (Seite einer Veranstaltung, hier werden Standardinhalte für jede Sitzung festgehalten bspw. [[Community - Hub - Überblick und Einstieg ins HochN-Wiki: Auftakt]])
 +
 
 +
=== Benötigte Layout-Elemente ===
 +
* Cards (Boxen, für Einzelaspekte in einem Überblick)
 +
** Mit Überschrift ()
 +
** Mit Bild / Icon ([https://www.mediawiki.org/wiki/Extension:FontAwesome Font Awesome])
 +
** Als Collapsible (ggfs. nicht möglich mit Bootstrap) siehe [[Vorlage:Cardcollapse]]
 +
** Siehe divs in den vorlagen (auf einigen Seiten sind direkt die divs ohne Vorlagen)
 +
*** [[Vorlage:CardForm]]
 +
*** [[Vorlage:CardImage]]
 +
*** [[Vorlage:CardSmall]]
 +
*** [[Vorlage:Cardcollapse]]
 +
*** [[Vorlage:Cardheader]]
 +
* Banner (Boxen als Hinweis etc.)
 +
** Achtung allgemeine Warnung rot
 +
** Tipp extra? freundlich
 +
** Hinweis
 +
** Leseempfehlung mit Buch icon oä
 +
** Block-Quote ohne Kasten drumrum wie [https://www.mediawiki.org/wiki/Template:Quote hier] (einfach blockquote html-Element stylen)
 +
 
 +
=== Font Awesome Icons {{#fas:toilet}} ===
 +
* Anker {{#fas:anchor}} {{#far:anchor}} wei noch nicht wofür, finde ihn aber cool
 +
* Entscheidung / Abwägung {{#fas:balance-scale-left}}
 +
* Uni {{#fas:university}}
 +
* Person {{#fas:user-alt}} {{#far:user}}
 +
* Forschung oder Lehre {{#fas:graduation-cap}} {{#far:graduation-cap}}
 +
* Suche / Recherche {{#fas:search}} {{#fas:glasses}}
 +
* Lesetipp / Literatur {{#fas:book}} oder {{#fas:book-open}} {{#far:book}} {{#far:book-open}}
 +
* Tipp {{#fas:lightbulb}} {{#far:lightbulb}}
 +
* Hinweis {{#fas:info-circle}} {{#far:info-circle}}
 +
* Achtung / Gefahr {{#fas:exclamation-triangle}} {{#far:exclamation-triangle}}
 +
* Block-Quote {{#fas:quote-right}} und {{#fas:quote-left}} oder {{#fas:angle-double-right}} und {{#fas:angle-double-left}}
 +
* Network {{#fas:project-diagram}}
 +
* Mitmachen {{#fas:door-open}}
 +
* marker {{#fas:map-marker-alt}}

Aktuelle Version vom 6. Januar 2022, 10:02 Uhr

Überblick über Layoutbedarf und existierende Vorlagen: Alle Vorlagen: Spezial:Vorlagen Media:HochNWikiFarben.pdf

Vorgehen

Bootstrap Version 4 wird unterstützt.

  • Cards werden Hauptelement für die Übersichtsseiten
    • Card-Class stylen: Hintergrundfarbe?, runde Ecken...?
    • separat Card-headings und Body, Text stylen, sofern sie genutzt werden haben die dann einheitliche Form
    • müssen weitere stylings vorgenommen werden falls eine Card ein Hintergrundbild haben soll, bzw. oben oder an der Seite?
  • Tabellen .wikitable mit Hintergrund aus der HochN bzw DG Farbwelt
  • Standard-Farbe für Hintergründe etc differenzieren nach nach Namensraum: HOCH-N Namensraum bekommt das grüne Profil
  • Farben für die einzelnen Banner festlegen, als div oder Tabelle Wikistyle?


Sammlung

Seiten mit Layout Elementen

Cards etc. werden für Seiten benötigt, die einen Überblick über ein Themengebiet liefern. Hier sind Beispiele für Übersichtseiten:

Seitentypen zum Überblick und Bedarf an Layout und Elementen

Diese Seiten sollten ein eigenes Layout und Design haben anlegen.

Benötigte Layout-Elemente

Font Awesome Icons

  • Anker wei noch nicht wofür, finde ihn aber cool
  • Entscheidung / Abwägung
  • Uni
  • Person
  • Forschung oder Lehre
  • Suche / Recherche
  • Lesetipp / Literatur oder
  • Tipp
  • Hinweis
  • Achtung / Gefahr
  • Block-Quote und oder und
  • Network
  • Mitmachen
  • marker
Cookies helfen uns bei der Bereitstellung von DG HochN-Wiki. Durch die Nutzung von DG HochN-Wiki erklärst du dich damit einverstanden, dass wir Cookies speichern.