Internet Service

Schulungstermine 1. Halbjahr 2024

2023-12-20T12:48:17+01:00

Die Kurse zur Bearbeitung von Webseiten im Roxen CMS, im 1.Halbjahr 2024, finden an den folgenden Tagen, jeweils mittwochs von 10-12 Uhr (s.t.) statt.

Grundlagen

~~•   10.01. (online)~~
•   31.01.
•   14.02.
•   20.03. (online)
•   10.04.
•   24.04.
•   15.05.
•   29.05.
•   26.06. (online)

[zur Anmeldung]

Fortgeschrittene

• 28.02. (online)
• 12.06. (online)

[zur Anmeldung]

Für die Teilnahme an einer Fortgeschrittenenschulung ist die Absolvierung der Grundlagenveranstaltungen verpflichtend.

Bitte beachten Sie:

Die Anmeldung für die Termine im 1. Halbjahr des Jahres 2024 erfolgt sowohl für Beschäftigte in Technik und Verwaltung als auch für Forschende und Lehrende über die Personalentwicklung für Mitarbeitende in Technik und Verwaltung.
An Terminen, die nicht als online gekennzeichnet sind, findet die Schulung - in Präsenz - im Raum UHG T2-137 statt.
An den Präsenzterminen können maximal 16 Personen teilnehmen.
Schulungen in Präsenz haben einen sehr hohen Praxisanteil. Online wird, aus zeitlichen und technischen Gründen, anschaulich durch die Funktionen und Arbeitsschritte im Roxen CMS geleitet.

Direkter Bild-Upload über den grafischen Roxen-Editor

2018-04-19T10:20:20+02:00

Der Roxen-WYSIWYG-Editor (WYSIWYG = What You See Is What You Get = grafischer Editor), der mittels "Edit Contents..." aufgerufen wird, besitzt jetzt eine neue praktische Bild-Upload-Funktion.

Sie ermöglicht es, Bilder auf die HTML-Seite direkt über den Editor einzufügen und in das gewünschte Verzeichnis hochzuladen. So müssen Sie nicht erst den Ordner auf der Verzeichnisebene ansteuern, in den das Bild hochgeladen werden soll. Mehrere Bilder können dann schneller hintereinander hochgeladen werden.

Kurzanleitung für die neue Bild-Upload-Funktion

Steuern Sie die HTML-Seite an, auf der Sie das Bild einsetzen möchten und gehen Sie über "Edit Contents ..." in den WYSIWYG-Editor.
Klicken Sie mit dem Cursor auf die Stelle, an der das Bild oder die Bilder platziert werden sollen.
Klicken Sie in der Editor-Menüleiste ganz rechts auf das Bild-Symbol. Es öffnet sich ein weiteres Fenster (wenn Sie einen Popup-Blocker installiert haben, müssen Sie diesen hierfür eventuell deaktivieren).
Wählen Sie den Ordner aus, in dem die Bild-Datei abgelegt werden soll (zum Beispiel der Ordner "images" im Hauptverzeichnis Ihrer HTML-Seite).
Klicken Sie auf "Durchsuchen ...", wählen Sie das gewünschte Bild aus und laden Sie es anschließend hoch, indem Sie auf "Upload" klicken. Wiederholen Sie diesen Schritt, wenn Sie mehrere Bilder hochladen möchten.
Um ein Bild nun in Ihre HTML-Seite einzusetzen, klicken Sie in der Bilderliste einfach auf das entsprechende Bild.

Achtung:
Wenn Sie über das Bild-Upload-Fenster eine Bild-Datei löschen, wird die Löschung gleichzeitig commitet und das Bild ist online nicht mehr verfügbar.

Außerdem wurden Fehler des Editors behoben

Der Roxen-WYSIWYG-Editor hat bis vor kurzem Anzeigeprobleme bereitet, indem HTML-Tags ungewollt geändert oder gelöscht wurden. Zum Beispiel wurde das <insert>-Tag verschachtelt und leere <span> oder <i>-Tags gelöscht, welche teilweise für die Anzeige von Web-Icons genutzt werden.
Dies passiert nun nicht mehr.

Falls Ihnen weiteres unerwünschtes Verhalten auffällt, melden Sie dies gerne in der Web-Entwicklung.

CSS3-Gestaltungselement: Flexbox

2018-02-19T14:14:25+01:00

Die CSS3-Eigenschaft "Flexbox" sorgt für flexible Größen und Abstände und ist besonders wichtig für die mobile Darstellung von Webseiten. Auf den Webseiten der Universität verwenden beispielsweise die "Startseiten-Boxen" diese CSS-Eigenschaft.

Wichtig dabei ist, dass um alle Boxen-Elemente immer ein Element mit der Klasse "flexcontainer" angelegt wird:
<div class="bild-boxen flexcontainer"> <div class="boxen breite2"></div> <div class="boxen"></div> <div class="boxen"></div> <div class="boxen breite2"></div> <div class="boxen breite3"></div> </div>

Alle Elemente, die sich im Flexcontainer befinden, werden automatisch in der Höhe angeglichen, so dass das Gesamterscheinungsbild recht aufgeräumt wirkt. Das Element mit dem meisten Inhalt gibt die Höhe für die entsprechende Bild-Reihe vor.

Hier finden Sie eine Anleitung zur Einbindung der Startseiten-Boxen:
→ "Einbindung von Bild- und Textboxen auf Ihrer Startseite"

Schematische Darstellungen der Container

Im Folgenden finden Sie die Darstellung der Boxen auf unterschiedlichen mobilen Endgeräten. Hier wurde die Variante mit maximal 3 Boxen pro Reihe gewählt wie es auf Folgeseiten üblich ist. Bei Startseiten werden häufig 4 Boxen pro Reihe gesetzt.

Desktop-Ansicht:

.bild-boxen .flexcontainer

.boxen .breite2 (66%)

.boxen (33%)

.boxen .breite2 (66%)

.boxen .breite3 (100%)

Tablet-Ansicht:

.bild-boxen .flexcontainer

.boxen .breite2 (100%)

.boxen (50%)

.boxen .breite2 (100%)

.boxen .breite3 (100%)

Smartphone-Ansicht:

.bild-boxen .flexcontainer

.boxen .breite2 (100%)

.boxen (100%)

.boxen .breite2 (100%)

.boxen .breite3 (100%)

Alternativ zu den Startseiten-Boxen

Hier finden Sie ein alternatives Beispiel für den Einsatz von Flexboxen auf den Uni-Seiten:
→ "Bielefeld kennenlernen - Zahlen, Daten, Fakten"

Falls Sie daran interessiert sind Flexboxen dieser Art auf Ihren Seiten einzubinden, aber nicht wissen wie Sie diese umsetzen sollen, wenden Sie sich gerne an die Web-Entwicklung.

Weiterführende Links

Ausführliche Anleitungen zu CSS Flexbox gibt es hier:
→ css-tricks.com
→ w3schools.com

Tabellen und ihre Schwierigkeiten

2018-01-12T11:35:32+01:00

Manche Autorinnen und Autoren verwenden nach wie vor HTML-Tabellen für das Layout ihrer Webseiten. Dies führt zu Problemen bei mobiler Nutzbarkeit und Barrierefreiheit.

In den Anfangszeiten des World Wide Web war es gängige Praxis, das Layout einer Webseite mithilfe von Tabellen zu gestalten. Immerhin stellten Tabellen gerade für mehrspaltige Entwürfe eine sowohl naheliegende als auch effektive Lösung dar. Spätestens seit der Einführung von CSS gilt es jedoch als überholt, Tabellen als Style-Elemente zu verwenden. Doch warum ist das so?

Ein wichtiger Grund, weshalb Tabellen unter keinen Umständen für das Layout verwendet werden sollten, ist die steigende Anzahl mobiler Nutzerinnen und Nutzer. Smartphones und Tablets haben verhältnismäßig kleine Bildschirme, an die sich das Layout einer Webseite anpassen muss. Tabellen sind jedoch unflexibel, und lassen sich daher nur schwer auf verschiedene Bildschirmgrößen anpassen. Webseiten, bei denen Tabellen für das Layout verwendet wurden, sind daher auf mobilen Endgeräten kaum nutzbar. Das starre Layout mit Tabellen ist zudem problematisch für Menschen mit Sehbehinderungen, die auf Hilfsmittel wie Screenreader oder sehr hohe Auflösungen angewiesen sind.

Tabellen sollten also keinesfalls als Style-Elemente verwendet werden, sondern ausschließlich zur Darstellung tabellarischer Daten. Das Layout Ihrer Seite sollte stets durch CSS-Anweisungen erfolgen. Viele Style-Elemente sind bereits im aktuellen Template erhalten, und können durch die Verwendung von Klassen auf Ihrer Seite verwendet werden. Einen Überblick finden Sie im Styleguide.

Weitere Informationen zu HTML und CSS finden Sie hier.