SideBarMenu

< Datenbankzugriffe | Entwicklungs-HOWTO | Lokalisierung (L10N) >

Auf dieser Seite... (ausblenden)

  1.   1.  Flexi-Templates
  2.   2.  Templates und Klassen für Alle(s)
    1.   2.1  Meldungen
    2.   2.2  Suchbox
    3.   2.3  Paginierung
    4.   2.4  Modaler Dialog
  3.   3.  HTML5
    1.   3.1  <br> oder <br/>?
  4.   4.  Icons
    1.   4.1  Gestaltung
    2.   4.2  Icon-Rollen
    3.   4.3  Rollen
    4.   4.4  Zusätze
    5.   4.5  Größen
    6.   4.6  Verzeichnisstruktur
    7.   4.7  Liste der verfügbaren Icons
    8.   4.8  Tools und Bausätze
    9.   4.9  Icons in Retina
  5.   5.  Style Guide
  6.   6.  Veranstaltungstermine darstellen
  7.   7.  Kalenderansicht erzeugen
  8.   8.  Formularfelder in Stud.IP

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.

  1. $template = $GLOBALS['template_factory']->open('shared/searchbox.php');
  2. 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:

  1. // Beispiel für eine einfache Info-Nachricht
  2. 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:

  1. // Beispiel für eine einfache Info-Nachricht
  2. $info = MessageBox::info('Nachricht');
  3. 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

  1. <form action="<?=URLHelper::getLink()?>" method=post>
  2.     <?= $this->render_partial('shared/searchbox'); ?>
  3. </form>
  4. <?
  5. $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.

  1. <?= $this->render_partial("shared/pagechooser",
  2.   array(
  3.     "perPage" => get_config('ENTRIES_PER_PAGE'),
  4.     "num_postings" => $numberOfPersons,
  5.     "page"=>$page,
  6.     "pagelink" => "score.php?page=%s"));
  7. ?>

2.4  Modaler Dialog

Manchmal ist es notwendig bei sehr wichtigen Rückfragen einen modalen Dialog statt einer normalen MessageBox zu verwenden.

Beispiel:

  1. $question = sprintf(_('Möchten Sie wirklich den User **%s** löschen ?'), $username);
  2. echo createQuestion( $question,
  3.   array(
  4.     "studipticket" => get_ticket(),
  5.     'u_kill_id' => $u_id
  6.   ),
  7.   array(
  8.     'details' => $username
  9.   )
  10. );
  11.  

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):

RolleFarbeBedeutung
infoblackAlte 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.
clickableblueAlte 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.
acceptgreenAlte Beschreibung: Grün kommt nur in dem Fall, dass der Bestätigungs-Haken gezeigt wird, zum Einsatz.
status-greengreenAlte Beschreibung: Grün kommt nur in dem Fall, dass der Bestätigungs-Haken gezeigt wird, zum Einsatz.
inactivegreyAlte 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"
navigationlightblue
newredAlte 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).
attentionredAlte 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).
status-redredAlte 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).
info_altwhiteAlte 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.
sortyellowAlte Beschreibung: Gelbe Icons werden ausschließlich zum Verschieben von Objekten benutzt. Daher existieren in diesem Set auch nur Dreiecke und Pfeile in allen Varianten.
status-yellowyellowAlte 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', 'clickable')

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.

Historisch wurden die festen Größen 16px und 32px vorgehalten.

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.)

52a-stoppLizenz nach §52a Dokument-Weitergabe im Rahmen der alten §52a Lizenz, Variante Stoppschild (wird nicht mehr verwendet)
52a-stopp2Lizenz nach §52a Dokument-Weitergabe im Rahmen der alten §52a Lizenz, Variante Stoppschild, Alternative (wird nicht mehr verwendet)
52aLizenz nach §52a Dokument-Weitergaben im Rahmen der alten §52a Lizenz (wird nicht mehr verwendet)
52a2Lizenz nach §52a Dokument-Weitergabe im Rahmen der alten §52a Lizenz (wird nicht mehr verwendet)
60aLizenz nach §60a Dokument-Weitergabe im Rahmen der §60a Lizenz (aktuell)
CCLizenz nach CC Dokument-Weitergabe im Rahmen von CC
licenseLizenz allgemein
own-licenseEigene Lizenz Dokument-Weitergabe im Rahmen einer eigenen Lizenz/selbst erstellt
public-domainFreie Lizenz Dokument-Weitergabe im Rahmen einer freien Lizenz
acceptAkzeptieren/akzeptiert Dieses Symbol ist die Grundform für positive Rückmeldungen an den Nutzer.
actionAktionsmenu Icon zur Initiierung bzw. Verankerung des Aktionsmenu
activityActivity-Stream
no-activitykeine Aktivität im Activity-Stream leerer Activity-Stream
addHinzufügen
add-circleHinzufügen für Popover
add-circle-fullHinzufügen für Popover, Variante
adminAdministration Alle Administrationen des Systems
archiveArchiv für alles, was mit dem Archivieren zu tun hat
archive2Archiv Alternative Alternative, die auch für Ordner o.ä. verwendet werden kann
archive3Archiv Alternative Alternative, die auch für Ordner o.ä. verwendet werden kann
assessmentPrüfungen/Asssessments allgemeines Icon für Prüfungen
billboardSchwarzes Brett Icon für schwarze Bretter in Stud.IP
blubberBlubber Icon für die Blubber-Funktion
busBus Icon für Navigationsfunktionen, zB. in Campus-Apps
campusnaviCampus-Navi Icon für Navigationsfunktionen allgemein, zb. in Campus-Apps
categoryKategorie allgemeines Icon für Kategorien
cellphoneTelefon/Handy Telefonnummer, Smartphone usw.
chatChat Chat/Forum/Messenger)
chat2Chat Chat/Forum/Messenger
check-circleAkzeptieren/akzeptiert für Popover
check-circle-fullAkzeptieren/akzeptiert für Popover, Alternative
checkbox-checkedmarkierte Checkbox Checkbox in Form eines Icons, markiert
checkbox-uncheckedunmarkierte Checkbox Checkbox in Form eines Icons, unmarkiert
checkbox-indeterminateuneindeutige Checkbox Checkbox in Form eines Icons, uneindeutig (für Mehrfachselektion)
radiobutton-checkedmarkierter Radiobutton Radiobutton in Form eines Icons, markiert
radiobutton-uncheckedunmarkierter Radiobuttom Radiobutton in Form eines Icons, unmarkiert
classbookKlassenbuch Klassenbuch
cloudCloud-Service generisches Icon für Cloudservices
cloud2Cloud-Service generisches Icon für Cloudservices, Alternative
codeProgrammcode generisches Icon für Programmcode
code-qrQR-Code QR-Code
computerComputer allgemeines Computer-Icon
commentKommentar
communityCommunity
computerComputer allgemeines Icon für Computer (analog zu Telefon/Smartphone)
consultationSprechstunden
cropBeschneiden Beschneiden von Bildern (zB. Avatar-Bilder)
crownKrone
dateTermin
date-singleEinzeltermin
date-cycleregelmäßiger Termin
date-blockBlocktermin
declineablehnen Dieses Symbol ist die Grundform für negative Rückmeldungen an den Nutzer.
decline-circleablehnen Ablehnen-Variante im Kreis
decline-circle-fullablehnen Ablehnen-Variante im Kreis, Alternative
doctoral-capPrüfungen/Abschlüsse allgemeines Icon für Prüfungen
doitDo.ITDo.IT-Plugin und andere aufgabenbezogene Funktionen
door-enterLogin/Betreten
door-enter2Login/Betreten Alternative
door-leaveLogout/Verlassen
door-leaveLogout/Verlassen Alternative
downloadDownload
downloadDownloadAlternative
dropboxCloud-Service DropboxAlternative
editEditieren allgemeines Editieren-Icon
elmoElmo Icon für Elmo-Plugin
eportfolioePortfolio-Icon
euroEuro Währungszeichen/Geld
evaluationEvaluation generelles Icon für Evaluationen
exclaimHinweis
exclaim-circleHinweis für Popover
exclaim-circleHinweis für Popover, Alternative
exportExport
facebookFacebook Facebook-Anbindung oder Verknüpfung *
favoriteFavorit/Like Favoriten-Icon *
fileDokument
fileDokument Alternative
filesDokumente/Dateibereich
filesDokumente/Dateibereich Alternative
file-archiveZip-Datei
file-audioAudio-Datei
file-soundAudio-Datei Alternative, zB. für laute Audiodateien
file-picBilddatei
file-pdfPDF-Datei
file-officeOffice-Dokument Word/PowerPoint/Excel
file-excelExcel-Dokument
file-wordWord-Dokument
file-pptPPT-Dokument
file-textTextdatei (zB. Word)
file-videoVideo-Datei
file-genericgenerischer Dateityp
filterSuchfilter, Ansichtsfilter
filterSuchfilter, Ansichtsfilter Alternative
folder-brokennicht erreichbarer Ordner
folder-brokennicht erreichbarer Ordner Alternative
folder-date-fullgefüllter Terminordner
folder-date-full2gefüllter Terminordner Alternative
folder-date-emptyleerer Terminordner
folder-date-empty2leerer Terminordner Alternative
folder-edit-emptyleerer editierbarer Ordner
folder-edit-empty2leerer editierbarer Ordner Alternative
folder-edit-fullvoller editierbarer Ordner
folder-edit-full2voller editierbarer Ordner Alternative
folder-emptyleerer Ordner
folder-emptyleerer Ordner Alternative
folder-fullgefüllter Ordner
folder-fullgefüllter Ordner Alternative
folder-group-emptyleerer Gruppenordner
folder-group-empty2leerer Gruppenordner Alternative
folder-group-fullgefüllter Gruppenordner
folder-group-full2gefüllter Gruppenordner Alternative
folder-home-emptyleerer Home-Ordner
folder-home-empty2leerer Home-Ordner Alternative
folder-home-fullgefüllter Home-Ordne
folder-inbox-fullgefüllter Inbox-Ordner
folder-inbox-emptyleererInbox- Ordner
folder-lock-fullgefüllter geschützter Ordner
folder-lock-full2gefüllter geschützter Ordner Alternative
folder-lock-emptyleerer geschützter Ordner
folder-lock-empty2leerer geschützte Ordner Alternative
folder-parentübergeordneter Ordner
folder-topic-emptyleerer Themenordner
folder-topic-fullgefüllter Themenordner
forumForum
forumForum Alternative
globeGlobus/Weltkarte
glossaryGlossar
graphGraph/Auswertung generelles Icon für grafische Auswertungen (zB. Evalautionsauswertung)
groupPermalink neu, ehemals Gruppieren
group2Gruppe/gruppieren Gruppen (Menschen)
group3Gruppe/Hierarchie Gruppen/Hierarchie
group4Gruppe/gruppieren Gruppieren nach Farbe
guestbookGästebuch
hamburgerHamburger-Menu für mobile Ansicht
homeStartseite
infoInformation
info-circleInformation für Popover
info-circle-fullInformation für Popover, Alternative
infopageFreie Infoseite
infopageFreie Infoseite, Alternative
inboxNachrichten Eingang
outboxNachrichten Ausgang
installPlugin Installation
instituteEinrichtung
itemAllgemeines Objekt für Kommentare Kommentarobjekt
keyPassword Password(-verwaltung)
knifeTaschenmesser/Tool alternative für Tool-Icon
learnmoduleLernmodul
link-externexterner Link
link-interninterner Link
link2externer Link Alternative, rechts-orientierte Seiten
link3externer Link Alternative, links-orientierte Seiten
literatureLiteratur
literatureLiteratur Alternative
lock-lockedSchloss im geschlossenen Zustand
lock-unlockedSperren/Schloss im geöffneten Zustand
logProtokoll/Log
mailNachricht
maximizeMaximieren für Widgetsystem
medalPrüfungen/erreichte Leistungen allgemeines Icon für Prüfungen
mensaMensa Mensa, vegetarisch
mensa2Mensa Mensa
metroU-Bahn, Bahn zB. für Campus-App
moduleModul in Abgrezung zu Lernmodul oder Plugin
moneyMensa Bezahlvorgänge, Kostenpflichtiges
newsAnkündigungen Ankündigungen
newsAnkündigungen Ankündigungen, Alternative
notificationNotifikation Notifikation
notification2Notifikation Notifikation, Alternative
outer-spacePlanet/Weltallt ungenutztes Icon, frei zur Nutzung
perlePerle Icon für Perle Plugin
personPerson/Profil
personsPersonen
person-onlinePerson online Person ist online
pluginPlugin
phoneTelefon klassisches Telefon, abgegrenzt von Handy
placeOrt Ort/Geoinformation/Place
pluginPlugin Allgemeines Icon für Plugins
powerfolderClound-Dienst Powerfolder
printDrucken Druckfunktionen, Druckansicht
privacyPrivatsphäreneinstellungen
removeEntfernen Entfernen, auch im Sinne von Verringen (korrespondiert mit dem Entfernen-Zusatz)
addHinzufügen Hinzufügen, auch im Sinne von Erhöhen (korrespondiert mit dem Hinzufügen-Zusatz)
questionFrage
question-circleFrage für Popover
question-circle-fullFrage für Popover, Alternative
rankingRanking
radar.Radar
refreshaktualisieren
resourcesRessource/Ressourcenverwaltung
rescueSupport/Hilfe Alternative
rolesRollen
roles2Alternative für Rollen/Rechte
rotate-leftBildbearbeitung drehen links
rotate-rightBildbearbeitung drehen rechts
removeEntfernen
remove-circleEntfernen für Popover
remove-circle-fullEntfernen für Popover, Alternative
room-clearRaum frei
room-occupiedRaum belegt
room-requestRaum anfrage
rssRSS-Feed
scheduleKalender/Ablaufplan
serviceSupport/Service
settingsEinstellungen
settings2Einstellungen Alternative für Einstellungen
shareTeilen/Exportieren allgemeines Icon für das Teilen von Objekten
searchSuche
seminarVeranstaltung
seminar-archiveVeranstaltungsarchiv
skypeSkype
skype2Support Alternative
span-emptyFüllstand/Progress: 0%
span-1quarterFüllstand/Progress: 25%
span-2quarterFüllstand/Progress: 50%
span-3quarterFüllstand/Progress: 75%
span-1thirdFüllstand/Progress: 33%
span-2thirdFüllstand/Progress: 66%
span-fullFüllstand/Progress: 100%
sportSport zB. für Campus-App
smileySmiley
stapleAnhang
starBewertungsstern
statStatistiken
studygroupStudiengruppe
supportSupport
tagTag Tags an Systemobjekten
tanTAN Vergabe, Nutzung von TANs, Prüfungen
tan2TAN Vergabe, Nutzung von TANs, Prüfungen, Alternative
testTest
timetableTimetable
toolsTools
topicThema für Themen in Veranstaltungen
trashMülleimer/löschen
twitterTwitter
twitter2Alternative Twitter
twitter3Alternative Twitter
unit-testUnit-Tests Unit-Tests
uploadUpload
upload2Upload Alternative
vcardvCard/Visitenkarte
videoVideo Videokonferenzen
video2Video Videokonferenzen, Alternative
visibility-checkedSichtbarkeit an Umschalter Sichtbarkeit: an
visibility-checkedSichtbarkeit an Umschalter Sichtbarkeit: an, Alternative
visibility-visiblesichtbar/Sichtbarkeit an Objekt ist sichtbar oder Umschalter Sichtbarkeit: aus
visibility-invisibleunsichtbar Objekt ist unsichtbar
voteUmfrage
vote-stoppedangehaltene Umfrage
wikiWiki
wizardAssistent Icon für Assistenten
youtubeYoutube
zoom-inZoom in Zoomen für Bildupload
zoom-in2Zoom in Zoomen für Bildupload, Alternative
zoom-outZoom out Zoomen für Bildupload
zoom-out2Zoom outZoomen für Bildupload, Alternative

Play Pause und Stop

Listen und Pfeile

Pfeile, Blätterfunktion (zB. Seite weiter, vor/zurück)
Pfeile zum Verschieben (zB. Objekt eintragen, Vertauschen von Objekten use.)
Pfeile zum Springen an das Ende einer Liste (Springen an das Ende einer Tabelle, finer Liste von Objekten usw.)

4.8  Tools und Bausätze

Für die Erstellung neuer oder eigener Icons existieren mittlerweile eine Reihe von Tools, Vorlagen, Bausätzen und anderen Elementen, die für die Gestaltung herangezogen werden können. Vorlagen für Adobe-Photoshop, Adobe-Illustrator und SVG-Dateien liegen im Developerserver im Dateibereich der Veranstaltung GUI-Redesign.

  • Photoshop-Baukasten: Es existiert ein Baukasten, insbesondere für 16*16-Dateien. Mit etwas Photoshop-Geschick kann aus dieser Datei eine beliebige Kombination aus Icon und Zusatz erstellt oder auch ein neues Set in einer anderen Farbe generiert werden. Die Zusätze existieren in dieser Datei als eigene Ebenen, in die die Icons geschoben werden können. Damit wird dann ein Icon incl. Zusatz komponiert. Die weiße Schutzzone, die jeder Zusatz zur klaren Abgrenzung benötigt, ist entsprechend mit vorgesehen. Eine 32*32-Variante existiert ebenfalls, enthält jedoch nur die Kopfzeilen-Icons.
  • Illustrator-Baukasten: Auch für Illustrator existiert ein Baukasten, mit dem sich die Icons in beliebiger Größe aus den Vektorvorlagen erstellt werden können. Die SVG-Variante kann alternativ benutzt werden.
  • Web-Interface: ein einfaches Tool, um sich Icons beliebiger Größe und Farbe aus dem Iconset generieren zu lassen: http://develop.studip.de/studip/svg2png/

Hinweise zum Icon-Generator

  • Derzeit werden bei der Benutzung noch einige Namen falsch gesetzt - Referenz für korrekte Benennung ist stets das 16er Iconset. Der Iconbuilder wird kontinuierlich weiterentwickelt, so dass zukünftig keine fehlerhaften Benennung mehr auftreten sollten.
  • Beim Erzeugen eines vollständigen Iconsets werde erheblich mehr Dateien erzeugt, als nötig. So entstehen ca. 15.000 Dateien (alle Zusätze zu allen Icons), obwohl nur ca. 1.000 - 2.000 Icons tatsächlich sinnvoll benutzbar sind (in Verwendung sind noch mals einige weniger). Es empfiehlt sich also, entweder beim Generieren schon auf die richtige Auswahl der Icons, die Zusätze bekommen sollen, zu achten oder nach dem Generieren möglichst viele unnötige Icons (insbesondere Verzeichnisse von Zusätzen) aus dem Set zu löschen. Das gilt insbesondere dann, wenn die Icons ins SVG aufgenommen werden sollen.

4.9  Icons in Retina

Seit der Version 2.5 werden auch alle Icons automatisch in Retina-Auflösung angezeigt. Auch hier wird die DevicePixelRatio heran gezogen. Die entsprechenden Anpassungen übernimmt die Icon-API.

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

Letzte Änderung am 19.09.2013 09:54 Uhr von mlunzena.