< Datenbankzugriffe | Entwicklungs-HOWTO | Lokalisierung (L10N) >
1. Flexi-Templates
Stud.IP verwendet zur Ausgabe von HTML Templates, genauer gesagt eine Eigenentwicklung namens Flexi-Templates.
Beispiele und Verwendung
Der einzige Unterschied ist, dass es in Stud.IP schon eine TemplateFactory instanziiert ist, die man einfach verwenden kann.
$template = $GLOBALS['template_factory']->open('shared/searchbox.php');
echo $template->
render();
2. Templates und Klassen für Alle(s)
2.1 Meldungen
Um in Stud.IP Meldungen anzuzeigen, verwendet man die Klasse MessageBox.
Hier ein einfaches Beispiel:
// Beispiel für eine einfache Info-Nachricht
echo MessageBox::
info('Nachricht');
Möchte man die Meldung nicht sofort, sondern erst zusammen mit dem Seiten-Layout ausgeben, sollte man die Ausgabe an die PageLayout-Klasse delegieren:
// Beispiel für eine einfache Info-Nachricht
$info = MessageBox::info('Nachricht');
PageLayout::postMessage($info);
Alle Details und weitere Typen von MessageBoxen findet man in der Dokumentation.
2.2 Suchbox
Das Template searchbox
bietet eine einheitliche Suchmaske für alle Seiten, auf denen gesucht werden soll. Das Template ist recht minimalistisch in kann in eine HTML-Form gebettet werden.
Verwendung im Template
<form action="<?=URLHelper::getLink()?>" method=post>
<?= $this->render_partial('shared/searchbox'); ?>
</form>
<?
$searchterm = Request::get('searchterm');
2.3 Paginierung
Das Template pagechooser
ist für Seiten, die eine Paginierung haben sollen. Man gibt dem Template die Anzahl an Elementen, Elemente pro Seite, die aktuelle ausgewählte und einen Link mit Formatauszeichnung wo die Seitenzahl sein soll mit, dann erhält man oben gezeigten Seitenwähler.
Seit Stud.IP 2.1 befindet sich ein globaler Wert in der Datenbank. Dieser ist mit get_config('ENTRIES_PER_PAGE') nutzbar. Der Standard-Wert ist 20.
<?= $this->render_partial("shared/pagechooser",
"perPage" => get_config('ENTRIES_PER_PAGE'),
"num_postings" => $numberOfPersons,
"page"=>$page,
"pagelink" => "score.php?page=%s"));
?>
2.4 Modaler Dialog
Manchmal ist es notwendig bei sehr wichtigen Rückfragen einen modalen Dialog statt einer normalen MessageBox zu verwenden.
Beispiel:
$question =
sprintf(_('Möchten Sie wirklich den User **%s** löschen ?'),
$username);
echo createQuestion
( $question,
"studipticket" => get_ticket(),
'u_kill_id' => $u_id
),
'details' => $username
)
);
Ab Version 4.2 kann stattdessen PageLayout::postQuestion verwendet werden.
PageLayout::postQuestion($question, $accept_url = '', $decline_url = '')
3. HTML5
Stud.IP verwendet den HTML5-Doctype:
<!DOCTYPE html>
3.1 <br> oder <br/>?
Das br-Element darf keinen Inhalt haben. Solche Elemente werden void-Elemente genannt. Daher darf man nicht "<br></br>" schreiben. Stattdessen muss der schließende Tag weggelassen werden, da der Parser diese automatisch schließt.
In XHTML ist das Schließen von Tags notwendig. Für void-Elemente wird dort die "empty element syntax" verwendet: "<br />".
HTML5-Autoren können diese Syntax ebenfalls verwenden. Es bleibt daher jedem selbst überlassen, ob er <br> oder <br /> schreiben möchte.
Dasselbe gilt für alle void-Elemente:
- area
- base
- br
- col
- command
- embed
- hr
- img
- input
- keygen
- link
- meta
- param
- source
- wbr
Links zum Thema:
4. Icons
< Datenbankzugriffe | Entwicklungs-HOWTO | Lokalisierung (L10N) >
Überblick Visual Style Guide
Seit der Version 2.0 bringt Stud.IP ein einheitliches Icon-Set mit. Das Set zeichnet sich durch eine klare und einheitliche Gestaltung, nach Aufgaben und Einsatzbereichen getrennte Farb-Sets, barrierearme Bedienung durch klare Formen/optische Zusätze für bestimme Aufgaben und eine Reihe weiterer Merkmale, die die Stud.IP-Formensprache vereinheitlichen, aus. Des weiteren liegen alle Icons bereits als Vektorgrafiken vor, so dass eine Verwendung in anderen Kontexten (zB. Print) und eine Veränderung der Icon-Größe in Stud.IP (etwa für eine verbesserte Touch-Bedienung) zukünftig möglich ist.
Das Iconset findet grundsätzlich für alle grafischen Schaltflächen, Markierungen, Objekt-Darstellungen usw. Anwendung. Als einzige Ausnahme davon existieren in Stud.IP weiterhin die Textbuttons und einige wenige Sonderformen oder nicht-iconartige Grafiklelemente (zB. Linien oder Trenner).
4.1 Gestaltung
Die Iconlandschaft wurde deutlich entschlackt, moderner und effizienter gestaltet. Skalierbarkeit und eine einfache, klare Formensprache standen bei der Entwicklung im Mittelpunkt. Das neue Iconset ist funktional und selbsterklärend. So wird die Übersichtlichkeit der Funktionen und die intuitive Bedienung gefördert. Es gibt nun für alle Größen und Einsatzgebiete eine einheitliche Optik der neuen Icons. Die Verwendung von festen Grundformen zusammen mit förmlich und farblich abgegrenzten Zusätzen, die Funktionen und Zustände markieren, gewährleistet eine barrierearme Nutzbarkeit bei hohem Wiedererkennungseffekt.
Icons in Studip 2.0 sind nach einem festgelegten Raster gestaltet und minimalistisch in Farbe und Form. Sie sind grundsätzlich monochrom in festgelegten Farben gehalten. Linienstärke und Farbfüllungen werden so eingesetzt, dass die Icons ein einheitliches optisches Gewicht erhalten. Diese Regeln sollen künftig auf alle in Stud.IP verwendeten Icons übertragen werden.
Sicher gibt es zusätzlich zur normalen Projektentwicklung viele Plugins und Erweiterungen, bei denen einen Bedarf gibt, bestehende Icons anzupassen oder neue zu erstellen. Die dafür notwendigen Arbeiten übernimmt der Stud.IP e.V., der für die Entwicklung in Budget in gewissem Umfang bereithält. Koordiniert die Entwicklung über den Vorstand des Stud.IP e.V.
4.2 Icon-Rollen
Ab der Version 3.4 werden Icons über die Icon-API angesprochen. Bisher wurden Icons wie Dateinamen eingebunden. Damit war die verwendete Farbe hartkodiert. Wenn in Stud.IP-Installationen Anpassungen an das Farbschema der Hochschule vorgenommen wurden, musste daher der Code geändert bzw. unschöne "Hacks" vorgenommen werden.
Ab Stud.IP v3.4 werden Icons nicht mehr mit ihrer Farbe referenziert, sondern mit der Rolle, die sie übernehmen wollen. Ein Beispiel: Bisher wurden alle Icons, die als bzw. in einem Link angezeigt wurden, im Code mit der Farbe Blau hartkodiert: Assets::img('icons/blue/seminar')
Wollte eine Hochschule alle Link-artigen Icons lieber in der Farbe
Grün darstellen, mussten dafür grüne Icons in das Verzeichnis "blue" gelegt werden (Was aber auch nicht immer funktioniert, wenn zB die Hintergrundfarbe dann dieselbe wie die Icon-Farbe ist.) oder alle entsprechenden Vorkommnisse von blue
im Code durch green
ersetzen.
Mit der neuen Icon-API wird nun die Rolle hartkodiert. Die globale Zuordnung von Rollen zu Farben übernimmt dann die entsprechende Übersetzung.
4.3 Rollen
Derzeit (Stud.IP v3.4) findet man die Zuordnung von Rollen zu Farben
in der Klasse "Icon" (lib/classes/Icon.class.php
):
Rolle | Farbe | Bedeutung |
Icon::ROLE_INFO | black | Alte Beschreibung: Diese Icons werden ausschließlich in den Infoboxen verwendet und sind nie klickbar. Sie erläutern grafisch die Aktionen, die die Infobox anbietet. So können hier Aktionen mit dem zugehörigen Icon gezeigt werden, Informationen mit einem "I" illustriert werden oder Verweise auf andere Systembereiche mit den zu diesen Bereichen passenden Icons ergänzt werden. |
Icon::ROLE_CLICKABLE | blue | Alte Beschreibung: Die blauen Icons sind der Standard für alle klickbaren Icons, unabhängig davon, in welchem Kontext sie verwendet werden (Ausnahme: Übersicht "Meine Veranstaltungen"). Insbesondere freistehende Aktionen sollten immer neben dem Linktext ein solches Icon zeigen. |
Icon::ROLE_ACCEPT | green | Alte Beschreibung: Grün kommt nur in dem Fall, dass der Bestätigungs-Haken gezeigt wird, zum Einsatz. |
Icon::ROLE_STATUS_GREEN | green | Alte Beschreibung: Grün kommt nur in dem Fall, dass der Bestätigungs-Haken gezeigt wird, zum Einsatz. |
Icon::ROLE_INACTIVE | grey | Alte Beschreibung: Diese Variante kommt zum Einsatz, wenn Icons nicht klickbar sind und nicht innerhalb von Infoboxen eingesetzt werden. Sie drücken auch oft einen Status aus und werden für alle Objekte wie News, Votings oder Dateien verwendet, um ein solches Objekt zu klassifizieren. Eine Ausnahme bildet "Meine Veranstaltungen". Auch hier drücken die grauen Icons einen Zustand aus ("nur bekannte Objekte eines Types") aber können trotzdem geklickt werden, da von hier aus auch die jeweiligen Bereiche direkt angesprungen werden können. Dieser Sonderfall gilt jedoch nur für "Meine Veranstaltungen" |
Icon::ROLE_NAVIGATION | lightblue |
Icon::ROLE_NEW | red | Alte Beschreibung: Die Farbe Rot dient dazu, Neues darzustellen oder hervorzuheben. Rote Icons kommen auf "Meine Veranstaltungen" zum Einsatz, wenn einer der Bereiche einer Veranstaltung für den Nutzer neue Inhalte führt. Aus Gründen der barrierearmen Bedienung reicht die rote Färbung allein nicht aus, es muss immer auch der Zusatz "neu" verwenden werden, um dem Icon auch eine eindeutige Form zu geben, es sei denn, die Kombination von Farbe und Form des Icons selbst ist eindeutig (etwa ein rotes X). |
Icon::ROLE_ATTENTION | red | Alte Beschreibung: Die Farbe Rot dient dazu, Neues darzustellen oder hervorzuheben. Rote Icons kommen auf "Meine Veranstaltungen" zum Einsatz, wenn einer der Bereiche einer Veranstaltung für den Nutzer neue Inhalte führt. Aus Gründen der barrierearmen Bedienung reicht die rote Färbung allein nicht aus, es muss immer auch der Zusatz "neu" verwenden werden, um dem Icon auch eine eindeutige Form zu geben, es sei denn, die Kombination von Farbe und Form des Icons selbst ist eindeutig (etwa ein rotes X). |
Icon::ROLE_STATUS_RED | red | Alte Beschreibung: Die Farbe Rot dient dazu, Neues darzustellen oder hervorzuheben. Rote Icons kommen auf "Meine Veranstaltungen" zum Einsatz, wenn einer der Bereiche einer Veranstaltung für den Nutzer neue Inhalte führt. Aus Gründen der barrierearmen Bedienung reicht die rote Färbung allein nicht aus, es muss immer auch der Zusatz "neu" verwenden werden, um dem Icon auch eine eindeutige Form zu geben, es sei denn, die Kombination von Farbe und Form des Icons selbst ist eindeutig (etwa ein rotes X). |
Icon::ROLE_INFO_ALT | white | Alte Beschreibung: Die weiße Variante wird immer dann verwendet, wenn Icons innherhalb einer dunklen Umgebung (in der Regel die Kopfzeile von frei schwebenden Fenstern mit dunkelblauer Zeile) vewendet werden. Auch graue Tabellenköpfe erhalten ggf. weiße Icons. In der Regel sind diese nicht klickbar. Das weiße Icon kann auf weißem Hintergrund nicht gesehen werden. |
Icon::ROLE_SORT | yellow | Alte Beschreibung: Gelbe Icons werden ausschließlich zum Verschieben von Objekten benutzt. Daher existieren in diesem Set auch nur Dreiecke und Pfeile in allen Varianten. |
Icon::ROLE_STATUS_YELLOW | yellow | Alte Beschreibung: Gelbe Icons werden ausschließlich zum Verschieben von Objekten benutzt. Daher existieren in diesem Set auch nur Dreiecke und Pfeile in allen Varianten. |
4.4 Zusätze
Es existieren eine Reihe von grafischen Zusätzen, die vielfältig eingesetzt werden können, um Aktionen, die hinter Icons liegen oder auch Zustände zu visualisieren. In der Regel werden Zusätze immer in rot dargestellt. Eine Ausnahme bildet der gelbe Zusatz „Verschieben“.
Zusätze an Icons werden ab Stud.IP v3.4 über die Icon-API referenziert. Möchte man zB ein seminar
-Icon als Link mit dem Zusatz add
(also Hinzufügen) einbauen: Icon::create('seminar+add')
accept |  | Akzeptieren: Der Haken drückt aus, dass hier eine Bestätigung im Kontext des Objekts dargestellt wird. |
add |  | Hinzufügen: Das Plus-Zeichen drückt aus, dass hier ein neues Objekt erzeugt werden kann. Das Anlegen eines Objektes oder der Sprung auf einen Bereich, in dem das Anlegen möglich ist, wird mit diesem Zusatz belegt. Er kann an blauen Icons mit Klick oder schwarzen und grauen Icons verwendet werden. |
decline |  | Aktion gesperrt: Zuweilen werden Aktionen als "nicht möglich" dargestellt. In diesem Fall erhalten die Aktions-Icons ein X als Zusatz. |
edit |  | Bearbeiten: Der Stift an einem Objekt drückt aus, das mit einem Klick auf dies Icon ein Objekt bearbeitet werden kann. |
export |  | Exportieren: Über dieses Icon werden ein oder mehrere Objekte des entsprechenden Types exportiert (z. B. als CSV-Datei) |
move_right |  | Verschieben: Um ein Objekt zu verschieben, gibt es den Zusatz eines Pfeils. Bis zur Version 2.4 waren diese Zusätze gelb, seit der Version 2.5 sind alle Zusätze in rot zu halten. |
new |  | Neu: Das Sternchen drückt einen neuen Inhalt aus. Das Sternchen wird (außer in der Kopfzeile) mit einem roten Icon kombiniert. |
remove |  | Löschen/Entfernen: Mit einem Minus wird die Möglichkeit, das entsprechende Objekt zu löschen, markiert. |
visibility-visible |  | Sichtbar: Ein Objekt wird bei Klick auf dieses Icon sichtbar geschaltet. |
visibility-invisible |  | Unsichtbar: Ein Objekt wird bei Klick auf dieses Icon unsichtbar geschaltet. |
Das Icon-Set enthält im Bausatz noch weitere Zusätze, die aktuell jedoch nicht verwendet werden. So finden sich Pfeile in alle vier Richtungen, Pause-Zeichen, Bestätigen-Zeichen (als Gegenstück zum "X"), Minus-Zeichen (als Gegenstück zum Hinzufügen) und Aktualisieren.
4.5 Größen
Icon-Größen können über die Render-Methoden der Icon-API angegeben werden. Inzwischen werden Icons als frei skalierbare SVG ausgeliefert.
Seit der Version 5.0 wird die Größe im Icon nicht mehr mitgegeben (vormals 16 * 16 Pixel, außer anders angegeben).
4.6 Verzeichnisstruktur
War früher die modulare Verzeichnisstruktur wichtig, verbirgt die Icon-Klasse nun diese Implementationsdetails. Bei Verwendung der Icon-API kommt man damit nicht mehr in Berührung.
Historisch lagen die Icons in etwa dieser Verzeichnisstruktur:
icons/<Größe>/<Farbe>/<Zuatz>/<Name des Icons>.png
4.7 Liste der verfügbaren Icons
Stammicons
Für alle in Stud.IP vorhandenen Objekte existieren Stammicons, von denen alle weiteren Formen oder Varianten logisch abgeleitet werden. Gegenwärtig existieren folgende Stammicons:
(In vielen Fällen existieren sowohl gefüllte und transparente bzw. invertierte Varianten zu einem Stammicon. Hier ist in der Regel die normale Version und nicht die Alternative einzusetzen.)
 | 60a | Lizenz nach §60a Dokument-Weitergabe im Rahmen der §60a Lizenz (aktuell) |
 | CC | Lizenz nach CC Dokument-Weitergabe im Rahmen von CC |
 | license | Lizenz allgemein |
 | own-license | Eigene Lizenz Dokument-Weitergabe im Rahmen einer eigenen Lizenz/selbst erstellt |
 | public-domain | Freie Lizenz Dokument-Weitergabe im Rahmen einer freien Lizenz |
 | accept | Akzeptieren/akzeptiert Dieses Symbol ist die Grundform für positive Rückmeldungen an den Nutzer. |
 | action | Aktionsmenu Icon zur Initiierung bzw. Verankerung des Aktionsmenu |
 | activity | Activity-Stream |
 | no-activity | keine Aktivität im Activity-Stream leerer Activity-Stream |
 | add | Hinzufügen |
 | add-circle | Hinzufügen für Popover |
 | admin | Administration Alle Administrationen des Systems |
 | archive | Archiv für alles, was mit dem Archivieren zu tun hat |
 | archive2 | Archiv Alternative Alternative, die auch für Ordner o.ä. verwendet werden kann |
 | archive3 | Archiv Alternative Alternative, die auch für Ordner o.ä. verwendet werden kann |
 | assessment | Prüfungen/Asssessments allgemeines Icon für Prüfungen |
 | audio | Audio-Element allgemeines Icon für Audio-Inhalt |
 | audio3 | Audio-Element allgemeines Icon für Audio-Inhalt, Variante für Audio-Medienobjekt |
 | billboard | Schwarzes Brett Icon für schwarze Bretter in Stud.IP |
 | block-accordion | Block-Icon für Akkordeon Icon für den Courseware-Block Akkorden |
 | block-canvas | Block-Icon für Canvas Icon für den Courseware-Block Canvas |
 | block-comparison | Block-Icon für Comparison Icon für den Courseware-Block Bildvergleich |
 | block-eyecatcher | Block-Icon für Eye-catcher Icon für den Courseware-Block Blickfang |
 | block-eyecatcher2 | Block-Icon für Eye-catcher Alternativ-Icon für den Courseware-Block Blickfang |
 | block-gallery | Block-Icon für Galerie Icon für den Courseware-Block Bildergalerie |
 | block-gallery | Block-Icon für Galerie Alternativ-Icon für den Courseware-Block Bildergalerie |
 | block-imagemap | Block-Icon für Imagemap Icon für den Courseware-Block Imagemap |
 | block-imagemap2 | Block-Icon für Canvas Alternativ-Icon für den Courseware-Block Imagemap |
 | block-tabs | Block-Icon für Tabs Icon für den Courseware-Block Tabs |
 | block-tabs | Block-Icon für Schreibmaschinen Icon für den Courseware-Block Schreibmaschine |
 | blubber | Blubber Icon für die Blubber-Funktion |
 | brainstorm | Brainstorm Icon für das Brainstorm-Plugin |
 | bus | Bus Icon für Navigationsfunktionen, zB. in Campus-Apps |
 | campusnavi | Campus-Navi Icon für Navigationsfunktionen allgemein, zb. in Campus-Apps |
 | category | Kategorie allgemeines Icon für Kategorien |
 | cellphone | Telefon/Handy Telefonnummer, Smartphone usw. |
 | chat | Chat Chat/Forum/Messenger) |
 | check-circle | Akzeptieren/akzeptiert für Popover |
 | checkbox-checked | markierte Checkbox Checkbox in Form eines Icons, markiert |
 | checkbox-unchecked | unmarkierte Checkbox Checkbox in Form eines Icons, unmarkiert |
 | checkbox-indeterminate | uneindeutige Checkbox Checkbox in Form eines Icons, uneindeutig (für Mehrfachselektion) |
 | radiobutton-checked | markierter Radiobutton Radiobutton in Form eines Icons, markiert |
 | radiobutton-unchecked | unmarkierter Radiobuttom Radiobutton in Form eines Icons, unmarkiert |
 | classbook | Klassenbuch Klassenbuch |
 | clipboard | Zwischenablage Kopieren in Zwischenablage |
 | cloud | Cloud-Service generisches Icon für Cloudservices |
 | code | Programmcode generisches Icon für Programmcode |
 | code-qr | QR-Code QR-Code |
 | computer | Computer allgemeines Computer-Icon |
 | comment | Kommentar |
 | comment2 | Kommentar Alternative für Kommentare |
 | community | Community |
 | computer | Computer allgemeines Icon für Computer (analog zu Telefon/Smartphone) |
 | consultation | Sprechstunden |
 | content | Inhalte allgemeines Icon für Inhalte |
 | courseware | Basis-Icon Courseware |
 | crop | Beschneiden Beschneiden von Bildern (zB. Avatar-Bilder) |
 | crown | Krone |
 | date | Termin |
 | date-single | Einzeltermin |
 | date-cycle | regelmäßiger Termin |
 | date-block | Blocktermin |
 | decline | ablehnen Dieses Symbol ist die Grundform für negative Rückmeldungen an den Nutzer. |
 | decline-circle | ablehnen Ablehnen-Variante im Kreis |
 | dialog-cards | Visitenkarten Icon für Visitenkarten/Adressen |
 | doctoral-cap | Prüfungen/Abschlüsse allgemeines Icon für Prüfungen |
 | doit | Do.ITDo.IT-Plugin und andere aufgabenbezogene Funktionen |
 | door-enter | Login/Betreten |
 | door-leave | Logout/Verlassen |
 | download | Download |
 | dropbox | Cloud-Service DropboxAlternative |
 | edit | Editieren allgemeines Editieren-Icon |
 | elmo | Elmo Icon für Elmo-Plugin |
 | eportfolio | ePortfolio-Icon |
 | euro | Euro Währungszeichen/Geld |
 | evaluation | Evaluation generelles Icon für Evaluationen |
 | exclaim | Hinweis |
 | exclaim-circle | Hinweis für Popover |
 | export | Export |
 | facebook | Facebook Facebook-Anbindung oder Verknüpfung * |
 | favorite | Favorit/Like Favoriten-Icon * |
 | file | Dokument |
 | files | Dokumente/Dateibereich |
 | file-archive | Zip-Datei |
 | file-audio | Audio-Datei |
 | file-audio2 | Audio-Datei |
 | file-sound | Audio-Datei Alternative, zB. für laute Audiodateien |
 | file-pic | Bilddatei |
 | file-pic2 | Bilddatei Alternative |
 | file-pdf | PDF-Datei |
 | file-presentation | Präsentation-Datei generische Variante, ohne Power Point-Bezug |
 | file-spreadsheet | Tabellenkalkulation'-Datei generische Variante, ohne Excel-int-Bezug |
 | file-office | Office-Dokument Word/PowerPoint/Excel |
 | file-excel | Excel-Dokument |
 | file-video | Video-Datei |
 | file-video2 | Video-Datei Alternative |
 | file-word | Word-Dokument |
 | file-ppt | PPT-Dokument |
 | file-text | Textdatei (zB. Word) |
 | file-generic | generischer Dateityp |
 | filter | Suchfilter, Ansichtsfilter |
 | filter | Suchfilter, Ansichtsfilter Alternative |
 | fishbowl | Goldfisch im Glas ungenutzt |
 | folder-broken | nicht erreichbarer Ordner |
 | folder-date-full | gefüllter Terminordner |
 | folder-date-empty | leerer Terminordner |
 | folder-edit-empty | leerer editierbarer Ordner |
 | folder-edit-full | voller editierbarer Ordner |
 | folder-empty | leerer Ordner |
 | folder-full | gefüllter Ordner |
 | folder-group-empty | leerer Gruppenordner |
 | folder-group-full | gefüllter Gruppenordner |
 | folder-home-empty | leerer Home-Ordner |
 | folder-home-full | gefüllter Home-Ordne |
 | folder-inbox-full | gefüllter Inbox-Ordner |
 | folder-inbox-empty | leerer Inbox- Ordner |
 | folder-lock-full | gefüllter geschützter Ordner |
 | folder-lock-empty | leerer geschützter Ordner |
 | folder-parent | übergeordneter Ordner |
 | folder-plugin-market-empty.svg | Ordner Plugin-Marktplatz leer |
 | folder-plugin-market-full.svg | Ordner Plugin-Marktplatz gefüllt |
 | folder-public-empty.svg | öffentlicher Ordner, leer |
 | folder-public-full.svg | öffentlicher Ordner, gefüllt |
 | folder-topic-empty | leerer Themenordner |
 | folder-topic-full | gefüllter Themenordner |
 | forum | Forum |
 | fullscreen-on | Vollbild ein |
 | fullscreen-off | Vollbild aus |
 | globe | Globus/Weltkarte |
 | glossary | Glossar |
 | graph | Graph/Auswertung generelles Icon für grafische Auswertungen (zB. Evalautionsauswertung) |
 | group | Permalink neu, ehemals Gruppieren |
 | group2 | Gruppe/gruppieren Gruppen (Menschen) |
 | group3 | Gruppe/Hierarchie Gruppen/Hierarchie |
 | group4 | Gruppe/gruppieren Gruppieren nach Farbe |
 | guestbook | Gästebuch |
 | hamburger | Hamburger-Menu für mobile Ansicht |
 | home | Startseite |
 | info | Information |
 | info-circle | Information für Popover |
 | infopage | Freie Infoseite |
 | inbox | Nachrichten Eingang |
 | outbox | Nachrichten Ausgang |
 | install | Plugin Installation |
 | institute | Einrichtung |
 | item | Allgemeines Objekt für Kommentare Kommentarobjekt |
 | key | Password Password(-verwaltung) |
 | knife | Taschenmesser/Tool alternative für Tool-Icon |
 | learnmodule | Lernmodul |
 | lightbulb | Glühbirne etwa für Tipps, Ideen oder Brainstorming |
 | link-extern | externer Link |
 | link-intern | interner Link |
 | link2 | externer Link Alternative, rechts-orientierte Seiten |
 | link3 | externer Link Alternative, links-orientierte Seiten |
 | literature-request | Literaturanfrage |
 | literature | Literatur |
 | lock-locked | Schloss im geschlossenen Zustand |
 | lock-unlocked | Sperren/Schloss im geöffneten Zustand |
 | log | Protokoll/Log |
 | mail | Nachricht |
 | maximize | Maximieren für Widgetsystem |
 | medal | Prüfungen/erreichte Leistungen allgemeines Icon für Prüfungen |
 | mensa | Mensa Mensa, vegetarisch |
 | mensa2 | Mensa Mensa |
 | metro | U-Bahn, Bahn zB. für Campus-App |
 | microphone | Mikrofon zB. für Medien |
 | module | Modul in Abgrezung zu Lernmodul oder Plugin |
 | money | Mensa Bezahlvorgänge, Kostenpflichtiges |
 | network | Netzwerk ungenutzt |
 | news | Ankündigungen Ankündigungen |
 | notification | Notifikation Notifikation |
 | notification2 | Notifikation Notifikation, Alternative |
 | outer-space | Planet/Weltall ungenutztes Icon, frei zur Nutzung |
 | oer-campus | OER-Campus Basisicon für den OER-Campus |
 | opencast | Opencast Icon für das Opencast-Plugin |
 | perle | Perle Icon für Perle Plugin |
 | permalink | Permalink Icon zum Abrufen/Verlinken eines Permalinks |
 | person | Person/Profil |
 | persons | Personen |
 | person-online | Person online Person ist online |
 | picture | Bild allgemeines Icon für Bilder, zB. in Courseware |
 | phone | Telefon klassisches Telefon, abgegrenzt von Handy |
 | place | Ort Ort/Geoinformation/Place |
 | plugin | Plugin Allgemeines Icon für Plugins |
 | powerfolder | Clound-Dienst Powerfolder |
 | print | Drucken Druckfunktionen, Druckansicht |
 | privacy | Privatsphäreneinstellungen |
 | remove | Entfernen Entfernen, auch im Sinne von Verringen (korrespondiert mit dem Entfernen-Zusatz) |
 | add | Hinzufügen Hinzufügen, auch im Sinne von Erhöhen (korrespondiert mit dem Hinzufügen-Zusatz) |
 | question | Frage |
 | question-circle | Frage für Popover |
 | ranking | Ranking |
 | radar. | Radar |
 | refresh | aktualisieren |
 | resources | Ressource/Ressourcenverwaltung |
 | resources-broken | kaputte Ressource |
 | resource-label | Ressourcen-Label |
 | rescue | Support/Hilfe Alternative |
 | roles | Rollen |
 | roles2 | Alternative für Rollen/Rechte |
 | rotate-left | Bildbearbeitung drehen links |
 | rotate-right | Bildbearbeitung drehen rechts |
 | room | Basisicon für Räume |
 | room2 | Basisicon für Räume Alternative |
 | room-clear | Raum frei |
 | room-occupied | Raum belegt |
 | room-request | Raum anfrage |
 | remove | Entfernen |
 | remove-circle | Entfernen für Popover |
 | rotate-left | Drehen gegen den Uhrzeigersinn für Bildbearbeitung |
 | rotate-right | Drehen im Uhrzeigersinn für Bildbearbeitung |
 | rss | RSS-Feed |
 | schedule | Kalender/Ablaufplan |
 | settings | Einstellungen |
 | settings2 | Einstellungen Alternative für Einstellungen |
 | share | Teilen/Exportieren allgemeines Icon für das Teilen von Objekten |
 | search | Suche |
 | seminar | Veranstaltung |
 | seminar-archive | Veranstaltungsarchiv |
 | smiley | Smiley/Emoji |
 | skype | Skype |
 | span-empty | Füllstand/Progress: 0% |
 | span-1quarter | Füllstand/Progress: 25% |
 | span-2quarter | Füllstand/Progress: 50% |
 | span-3quarter | Füllstand/Progress: 75% |
 | span-1third | Füllstand/Progress: 33% |
 | span-2third | Füllstand/Progress: 66% |
 | span-full | Füllstand/Progress: 100% |
 | spiral | Spirale ungenutzt |
 | sport | Sport zB. für Campus-App |
 | smiley | Smiley |
 | staple | Anhang |
 | star | Bewertungsstern |
 | stat | Statistiken |
 | studygroup | Studiengruppe |
 | support | Support |
 | table-of-contents | Inhaltsverzeichnis |
 | tag | Tag Tags an Systemobjekten |
 | tan | TAN Vergabe, Nutzung von TANs, Prüfungen |
 | tan2 | TAN Vergabe, Nutzung von TANs, Prüfungen, Alternative |
 | test | Test |
 | timetable | Timetable |
 | tools | Tools |
 | topic | Thema für Themen in Veranstaltungen |
 | trash | Mülleimer/löschen |
 | twitter | Twitter |
 | twitter2 | Alternative Twitter |
 | twitter3 | Alternative Twitter |
 | ufo | Ufo gibt es sie wirklich? |
 | unit-test | Unit-Tests Unit-Tests |
 | upload | Upload |
 | vcard | vCard/Visitenkarte |
 | video | Video Video |
 | video2 | Video Video/Film |
 | view-list | Umschalter Liste/Kacheln Liste |
 | view-wall | Umschalter Liste/Kacheln Kacheln/Wall |
 | visibility-checked | Sichtbarkeit an Umschalter Sichtbarkeit: an |
 | visibility-visible | sichtbar/Sichtbarkeit an Objekt ist sichtbar oder Umschalter Sichtbarkeit: aus |
 | visibility-invisible | unsichtbar Objekt ist unsichtbar |
 | vote | Umfrage |
 | vote-stopped | angehaltene Umfrage |
 | wiki | Wiki |
 | wizard | Assistent Icon für Assistenten |
 | youtube | Youtube |
 | zoom-in | Zoom in Zoomen für Bildupload |
 | zoom-in2 | Zoom in Zoomen für Bildupload, Alternative |
 | zoom-out | Zoom out Zoomen für Bildupload |
 | zoom-out2 | Zoom outZoomen für Bildupload, Alternative |
Play Pause und Stop
Listen und Pfeile
5. Style Guide
Wie HTML-Ausgaben aussehen sollen, regelt der Styleguid.
Alles zum Styleguide unter HowToStyleGuide
6. Veranstaltungstermine darstellen
Wie man Veranstaltungstermine darstellt ist in einem eigenen How-To beschrieben.
7. Kalenderansicht erzeugen
Wie Kalenderansichten erzeugt werden, kann man im entsprechenden [[Entwickler/HowCreateCalendarView|How-To] nachlesen.
8. Formularfelder in Stud.IP
Für das Aussehen und die Validierung von Formularfeldern gibt es ebenfalls ein entsprechendes How-To