SideBarMenu

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

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();

Templates und Klassen für Alle(s)

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.

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');

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

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.  

HTML5

Stud.IP verwendet den HTML5-Doctype:

<!DOCTYPE html>

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

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

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.

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.

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.

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  
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  
export  
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  
visibility-invisible  

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.

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.

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

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:

(Icons, die mit einem Sternchen markiert sind, wurden im letzten Update hinzugefügt)

acceptAkzeptieren/akzeptiert Dieses Symbol ist die Grundform für positive Rückmeldungen an den Nutzer.
check-circleAkzeptieren/akzeptiert für Popover
activityActivity-Stream
no-activitykeine Aktivität im Activity-Stream leerer Activity-Stream
addHinzufügen
add-circleHinzufügen für Popover
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
chatChat Inhaltliche (Nähe zum Forum (= Kommunikation))
checkbox-checkedmarkierte Checkbox Checkbox in Form eines Icons, markiert
checkbox-uncheckedunmarkierte Checkbox Checkbox in Form eines Icons, unmarkiert
radiobutton-checkedmarkierter Radiobutton Radiobutton in Form eines Icons, markiert
radiobutton-uncheckedunmarkierter Radiobuttom Radiobutton in Form eines Icons, unmarkiert
classbookKlassenbuch Klassenbuch
codeProgrammcode generisches Icon für Programmcode
code-qrQR-Code QR-Code
computerComputer allgemeines Computer-Icon
commentKommentar
communityCommunity
consultationSprechstunden
crownKrone
dateEinzeltermin
dateregelmäßiger Termin
dateBlocktermin
declineablehnen Dieses Symbol ist die Grundform für negative Rückmeldungen an den Nutzer.
doctoral_capPrüfungen/Abschlüsse allgemeines Icon für Prüfungen
doitDo.ITDo.IT-Plugin und andere aufgabenbezogene Funktionen
door-enterLogin/Betreten
door-leaveLogout/Verlassen
downloadDownload
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
exportExport
facebookFacebook Facebook-Anbindung oder Verknüpfung *
favoriteFavorit/Like Favoriten-Icon *
fileDokument
filesDokumente/Dateibereich
file-archiveZip-Datei
file-audioAudio-Datei
file-picBilddatei
file-pdfPDF-Datei
file-officeOffice-Dokument Word/PowerPoint/Excel
file-textTextdatei (zB. Word)
file-videoVideo-Datei
file-genericgenerischer Dateityp
folder-emptyleerer Ordner
folder-fullgefüllter Ordner
folder-parentübergeordneter Ordner
forumForum
graphGraph/Auswertung generelles Icon für grafische Auswertungen (zB. Evalautionsauswertung)
groupPermalink neu, ehemals Gruppieren
group2Gruppe/gruppieren Gruppen (Menschen)
group4Gruppe/gruppieren Gruppieren nach Farbe
guestbookGästebuch
homeStartseite
infoInformation
info-circleInformation für Popover
infopageFreie Infoseite
inboxNachrichten Eingang
outboxNachrichten Ausgang
installPlugin Installation
instituteEinrichtung
keyPassword Password(-verwaltung)
learnmoduleLernmodul
link-externexterner Link
link-interninterner Link
literatureLiteratur
lock-lockedSchloss im geschlossenen Zustand
lock-unlockedSperren/Schloss im geöffneten Zustand
logProtokoll/Log
mailNachricht
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
notification2Notifikation Notifikation
notification2Notifikation Alternative Notifikation
perlePerle Icon für Perle Plugin
personPerson/Profil
personsPersonen
person-onlinePerson online Person ist online
pluginPlugin
phoneTelefon
placeOrt Ort/Geoinformation/Place
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
rankingRanking *
refreshaktualisieren
resourcesRessource/Ressourcenverwaltung
rescue'Support/Hilfe Alternative
rolesRollen
roles2Alternative für Rollen/Rechte
room-clearRaum frei
room-occupiedRaum belegt
room-requestRaum anfrage
rssRSS-Feed
scheduleKalender/Ablaufplan
searchSuche
seminarVeranstaltung
seminar-archiveVeranstaltungsarchiv
serviceService
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
testTest
timetableTimetable
toolsTools
topicThema für Themen in Veranstaltungen
trashMülleimer/löschen
twitterTwitter
twitter2Alternative Twitter
twitter3Alternative Twitter
unit-testUnit-Tests Unit-Tests
uploadUpload
vcardvCard/Visitenkarte
videoVideo Videokonferenzen
visibility-checkedSichtbarkeit an Umschalter Sichtbarkeit: an
visibility-visiblesichtbar/Sichtbarkeit an Objekt ist sichtbar oder Umschalter Sichtbarkeit: aus
visibility-invisibleunsichtbar Objekt ist unsichtbar
voteUmfrage
vote-stoppedangehaltene Umfrage
wikiWiki
youtubeYoutube

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

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.

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.

Style Guide

Wie HTML-Ausgaben aussehen sollen, regelt der Styleguid. Alles zum Styleguide unter HowToStyleGuide

Veranstaltungstermine darstellen

Wie man Veranstaltungstermine darstellt ist in einem eigenen How-To beschrieben.

Kalenderansicht erzeugen

Wie Kalenderansichten erzeugt werden, kann man im entsprechenden [[Entwickler/HowCreateCalendarView|How-To] nachlesen.

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.