Institut für Grundschulpädagogik | Neu hier

Seiten gestalten

Dynamische Webseiten

Seit ca. 15 Jahren werden Webseiten "dynamisch" erstellt. Das bedeutet, dass das Aussehen der Seite abhängig ist davon, wie groß der Bildchirm ist, mit dem Sie die Seite betrachten. Daher ist es wirklich wichtig, dass Sie sich eine fertige / bearbeitete Internetseite nicht nur am Laptop ansehen, sondern immer mindestens auch auf Ihrem Handy! Nutzen Sie im Idealfall auch ein Tablet und betrachten Sie die Seite im Hoch- und Querformat des Handys / Tablets. Bedenken Sie: Ein schlechtes Layout, eine schlecht lesbare Seite führt dazu, dass man diese Seite seltener aufruft, Informationen schlecht findet etc. Und da man Ihnen dann schließlich doch wieder schreiben wird, haben Sie sich mit einer "schlechten" Seite lediglich Arbeit gemacht, ohne einen Nutzen davon zu haben. Mein Leitgedanke lautet: Wenn man schon Zeit und Mühe in die eigene Personal-, Projekt- und welche Seite auch immer steckt, muss sie so gestaltet sein, dass man mich darauf nur noch mit "guten" Fragen anspricht. Bei allen anderen Fragen reicht der Verweis auf die entsprechende Seite.

Persönliche Anmerkung: Ich finde es sehr bedauernswert, dass dieses CMS der Uni Koblenz die dynamischen Formatierungsmöglichkeiten nur halbgar nutzt und die Mängel vor allem auf mobilen Geräten offensichtlich sind. Das wird hoffentlich noch verbessert werden. 😉

Grundsätzliches

Was ist ein Block?

Jeder einzelne Textabsatz und jedes weitere Element (Bild, Dokument, "Button", Inhaltsverzeichnis, Überschrift etc.) ist ein sog. Block. Einzelne Blöcke kann man nach oben oder unten verschieben. Man kann auch mehrere markieren (STRG gedrückt halten), sie ausschneiden und an anderer Stelle einfügen.

Ein neuer Block entsteht, sobald Sie die ENTER-Taste drücken.

Es ist möglich innerhalb eines Blocks mit Hilfe der SHIFT-Taste Leerzeilen einzufügen. Das CMS setzt diese Leerzeilen allerdings nicht immer so um, wie man es gerne hätte, weswegen ich von diesem Vorgehen tendenziell abrate.

Das ist ein Block. Mit dem + Zeichen wählen Sie die möglichen Blockelemente aus. Mehr Möglichkeiten als die, die Sie dort finden, haben Sie nicht.

Seiten anlegen oder editieren

Einen kurzen Einstieg gebe ich Ihnen im grauen Kasten im Abschnitt Personalseite im Institut!

Projekte anlegen

Es existieren prinzipiell zwei Möglichkeiten, WO / in welchem Verzeichnis Sie ein Projekt anlegen:

• in Ihrem Personalverzeichnis

• in der obersten Ebene Ihres Arbeitsbereiches

Beides ist möglich. Ich empfehle die zweite Möglichkeit, da dies einen Vorteil für Suchmaschinen hat.

Projekte werden wie Seiten angelegt, siehe oben. Es existiert eine Vorlage +FORSCHUNGSPROJEKTE. Diese kann man nutzen. Ich persönlich finde die Vorlage unattraktiv, weswegen ich eine normale +SEITE bevorzuge und die Projekseite frei layoute und mich lediglich an den Stichpunkten, die in der Vorlage +FORSCHUNGSPROJEKTE enthalten sind, orientiere, wie zum Beispiel beim Projekt STAHRK. Vor allem bei umfangreicheren Projekten kann es empfehlenswert sein, im Verzeichnis unterhalb der Projektseite einen Ordner "medien" anzulegen, worin alle Dateien abgelegt werden.

Auf der Institutshomepage befindet sich unterhalb des Abschnitts "Unsere Arbeitsbereiche" eine Auflistung von Forschungsprojekten. Möchten Sie dort gelistet werden, legen Sie bitte eine eigene Projektseite an, wie oben erläutert und informieren Sie mich.

Anmerkung: Ein Projekt nicht über die Standardvorlage +FORSCHUNGSPROJEKTE zu layouten, hat einen kleinen Nachteil bei "dynamischen Inhalten", wie den Auflistungen. Dieser Nachteil kann allerdings leicht mit Hilfe von Schlagworten behoben werden. Dies ist aber derzeit irrelevant.

Rechte setzen nicht vergessen

Denken Sie daran: Sie müssen Ihren neu angelegten Seiten bzw. Projektseiten immer die Rechte "external" vergeben bzw. sie extern veröffentlichen, sobald Sie sie veröffentlichen möchten. Nutzen Sie dazu die Ordneransicht. Mehr dazu im grauen Kasten im Abschnitt Personalseite im Institut.

Häufige Funktionen

Text formatieren

Ja, es ist leider wahr, die Möglichkeiten, um Schrift darzustellen, sind hier extrem beschränkt. Es funktionieren derzeit nur fett, kursiv, hoch- und tiefgestellt, eine etwas größere und eine etwas kleinere Schrift, wobei es sich hierbei um verschieden große Überschriften handelt, die auch nur dafür genutzt werden sollten. Der Block "Inhaltsverzeichnis" benutzt diese Überschriften, um das Inhaltsverzeichnis automagisch zu generieren.

Wörter formatieren Sie so: das/die Wörter markieren, oberhalb der markierten Worte etscheint eine Auswahl der Formatmöglichkeiten.

A propos Überschriften: Die Überschrift oben "Dynamische Webseiten" entstand so: Text einfügen, alles markieren und dann den "Lautsprecher" auswählen (= schwarzer Hintergrund für diesen einen Block).

Links setzen zu Fotos, PDF etc.

Empfehlenswert, aber nicht zwingend: Besonders diejenigen Kolleg*innen, die viele Dateien hochladen, sollten diese Vorgehensweise in Erwägung ziehen.

Speichern Sie all Ihre Dateien (Bilder, Dokument etc), die Sie zum Anzeigen oder zum Download jetzt und zukünftig anbieten an einem zentralen Ort, z.B. im Ordner "medien" Ihrer Personalseite und vergeben Sie jeder Datei einen guten, also einen eindeutigen und nachvollziehbaren Namen (am besten bevor Sie Schritt 1 durchführen, d.h. benennen Sie die Dateien auf Ihrem Laptop, PC etc.).

Wenn Sie einen medien-Ordner nicht nutzen möchten, was vordergründig etwas einfacher ist, landen alle Dateien unterhalb der Seite, wo sie verlinkt werden. Das ist grundsätzlich auch okay, kann aber nach einiger Zeit einige Probleme aufwerfen.

Vorgehensweise:

1. Öffnen Sie die Ordnersicht, indem Sie links oben auf das Ordner-Symbol klicken.

2. Öffnen Sie in Ihren medien-Ordner, in den Sie die Dateien hochladen möchten. Legen Sie ggfs. vorher einmalig einen medien-Ordner an, falls er noch nicht existiert. (plus-Zeichen unterhalb des Ordner-Symbols)

3. Laden Sie die Dateien in Ihren medien-Ordner hoch: Upload-Symbol

4. Bearbeiten Sie jetzt die Seite Ihrer Wahl.

5. Setzen Sie an die gewünschte Stelle einen Link zur gewünschten Datei in Ihrem Medienordner.

Trennlinien

Um eine Trennlinie zu erstellen, nicht 20x ein minus-Zeichen einfügen -----------------, sondern den Block "Trenner" benutzen, so wie hier:

Layouten

Farbige Flächen

Dem Block die Funktion "Spalten" geben und dann eine einspaltige Spalte auswählen!! Dieser Spalte dann eine aus den 5 verfügbaren Farben - nein, nicht mehr(!) - auswählen. Dazu im Block die Spalten-Einstellungen am rechten oben Rand der Spalte öffnen.

Klicken Sie auf den linken oberen Rand der Spalte erhalten Sie andere Einstellungsmöglichkeiten.

Mehrfarbige Bereiche

Wie oben eine Spalte wählen, aber mit einem anderen Verhältnis, z.B. 40/60. Überprüfen Sie unbedingt, wie mehrspaltige Inhalte am Handy und/oder Tablet aussehen und ob Sie das so wollen!

Die Seite Neu hier... besteht aus mehreren zweispaltigen Blöcken. Jeder neue Bereich (Teilüberschrift) hat links eine weiße und rechts eine graue Spalte, die sich dynamisch zu einem grauen Kasten verändert, da sie vertikal mittig ausgerichtet ist (siehe unten). Es ist nicht empfehlenswert eine Spalte kleiner als "30" zu wählen. Vor allem auf Tablets wird die schmalere Spalte sonst viel zu lang. Okay sind für zwei Spalten: 50/50, 40/60 bzw. 60/40 oder 30/70 bzw. 70/30.

Die Spaltenlänge kann bei den Einstellungen der Spalte beim Punkt "vertikale Ausrichtung" angepasst werden. Dazu zunächst die Spalten-Einstellungen am oberen rechten der Spalte öffnen. Das Ergebnis kann so aussehen:

Spaltenblock mit vier Spalten:

Sehen die Flächen bei Ihnen am Handy oder am Tablet nicht wie Spalten, sondern wie Zeilen aus? Den Grund finden Sie ganz oben bei "Dynamische Webseiten".

CSS-Klasse fitted

Spaltenfarben fließen normalerweise in dem UniCMS etwas über die "eigentliche" Spalte "hinaus", siehe oben. Schauen Sie genau und benutzen Sie bitte Ihr Handy, sollten Sie die Unterschiede links und rechts nicht erkennen. Die untere Spalte hat den Vorteil, dass sie links und rechts bündig mit dem Text darunter und darüber ausgerichtet ist. Stellen Sie die "bündig abschließende" Spalte so ein, indem Sie in den Spalteneinstellungen bei Erweitert für die CSS-Klasse einfach nur das Wort fitted eintragen. Damit die Spalte dann aber nicht unmitelbar am Buchstaben anfängt, müssen Sie noch bei "Padding" einen Zahlenwert eintragen, zum Beispiel 10px.

Publikationen anzeigen

Schauen Sie zum Beispiel im Arbeitsbereich Grundschulpädagogik, -didaktik und Kindheitsforschung unten bei Publikationen nach. Sie ahnen jetzt, wie das gemacht ist? Richtig, drei Spalten und in jede Spalte wird ein Bild eingefügt. Probieren Sie selbst in den Einstellungen des Bildes aus, sobald Sie auf das eingefügte Bild anklicken, wie sich der Text zum Bild verhält: Zeilenumlauf links, rechts, Bildgröße etc.

Tipp: Verlinken Sie auch das Bild Ihrer Publikation zu Ihrem gewünschten Ziel.

Besondere Funktionen

Person anlegen

Geben Sie einem neuen Block die Funktion "Person" und wählen Sie sie rechts aus. Dazu müssen Sie ggfs. die Verzeichnisebene wechseln. Probieren Sie es aus, z.B.

Wenn Sie vorher einen zweispaltigen Block anlegen, können Sie zwei Mitarbeiter nebeneinander anlegen. Hinweis: Sehen Sie am Handy nach, wie sich die Spalten bei einem schmalen Bildschirm verhalten.

Es ist nicht empfehlenswert, drei Spalten für Personen auszuwählen. Die Personen werden dann vor allem auf Tablets unschön dargestellt.

Bitte beachten: Eingefügte Personen können innerhalb derselben Spalte nach oben oder unten verschoben werden (Drag and drop): Nach links oder oder rechts in eine andere Spalte können die Personen leider NICHT verschoben! Was bedeutet das? Es ist sinnvoll hier horizontal zu denken, d.h. eine nach dem Anfangsbuchstaben sortierte Namensliste mit den Personen sollte von oben nach unten angelegt werden. Beispiel: Spalte 1 enthält die Namen von "A bis K" und Spalte 2 führt alle Personen von "L bis Z" auf.

Auffällige Links erstellen

Mit dem Block "Schnelleinstieg" erstellen Sie Links, wie diese hier:

Probieren Sie die Einstellungsmöglichkeiten aus, um die Unterschiede zu erfahren.

Es ist auch möglich einen farblichen Block "Button" zu nutzen:

Diesen "Button" eher nicht als Layoutelement nutzen, sondern wenn Sie beispielsweise

• auffällig woanders hin verlinken oder

• etwas gut sichtbar zum Download anbieten möchten.

Vor den Text können Sie ein Symbol einblenden lassen (Font Awesome Icon). Wie das gemacht wird, erfahren Sie, wenn Sie diesen Block auf einer Seite bei Ihnen einfügen, auf den Button klicken und die Einstellungen bearbeiten. Tipp: Der Text download erstellt das typische Dowloadzeichen, siehe unten. Im Beispiel oben habe ich das Symbol child eingefügt. Alle verfügbaren Zeichen finden Sie bei Semantic UI React. Mehr zu Symbolen in Texten finden Sie im Kapitel "Sonderzeichen einfügen".

Sehr empfehlenswert, vor allem wenn Sie neu sind in Koblenz:

Symbol: "arrow right"

Und als Download, in grau:

Sie sehen: Diese "Buttons" können nur untereinander und nicht nebeneinander angeordnet werden (weil es Blöcke sind). Nebeneinander liegende Buttons kann man in Spalten unterbringen, aber so richtig optimal sieht das nicht aus.

Überblick "Studentische Hilfskräfte"

Sehen Sie sich auf der Seite Grundschulpädagogik, -didaktik und Kindheitsforschung den Abschnitt "Studentische Hilfskräfte" an. Wie habe ich dieses eine Bild mit allen Hilfskräften angefertigt? Natürlich ist es möglich hierfür ein Bildbearbeitungsprogramm zu verwenden. Da man aber nicht voraussetzen kann, dass das auch jeder kann, könnte dieses Vorgehen helfen:

1. Legen Sie eine neue +SEITE an und belassen Sie sie auf "Intern" (Nicht veröffentlichen)

2. Fügen Sie den Block SPALTE ein mit zwei Spalten. Fügen Sie in jede der zwei Spalten eine Spalte mit je 3 Spalten ein. Sie machen also Spalten in Spalten! Auf diese Weise erhalten Sie 6 nebeneinander liegenden Spalten. Normalerweise sind nur bis zu 4 Spalten pro Zeile möglich. Jetzt fügen Sie in so viele Spalten ein Foto einer in unserem Falle studentischen Hilfskraft ein, wie Sie möchten. Damit es symmetrisch ist, habe ich je 5 eingefügt.

3. Seite speichern

4. Einen einzelnen Screenshot mit allen Fotos

5. Screenshot auf z.B. 550px Breite verkleinern.

6. Den Screenshot hochladen, einfügen und in den Einstellungen anpassen (Hinweis: Eingefügt wurde der Screenshot in einen zweispaltigen Spalten-Block)

Die Seite "Studentische Hilfskräfte" selbst mit dem Überblick aller Hilfskräfte enthält 4-spaltigen Spaltenblöcke. In jeder Spalte habe ich dann den Block "Karte" eingefügt, in den oben ein Foto und unten Text eingefügt ist.

Sonderzeichen einfügen

Sonderzeichen sind häufig sog. "Unicode-Symbole". Wie Sie diese nutzen können, zeige ich Ihnen hier:

Öffnen Sie beispielsweise diese Seite: https://unicode-table.com/de/

Suchen Sie das gewünschte Sonderzeichen, kopieren Sie es und fügen Sie es hier an die Stelle ein, wo Sie das Zeichen benötigen.

Beispiele: ☑ ✔ ❎ ❌ ☠ ☎ ❤ ✸ 🌻 ❶ ❷ ½ 🚀 ◯ ♂ ⚽ --- 😂

Diese Seite wurde erstellt von: Marek Breuning, breuning(at)uni-koblenz.de