GUI V3

UIE,Digitization Lifecycle

Positives aus GUI V2

 * Skins: Eine CSS-Datei pro Skin (Schrift, Bilder, Farben)
 * Es gibt mehrere CSS-Dateien (Core, Pattern, Skin). Für den internen Gebrauch sollen diese zu einer Datei zusammengefasst werden können.
 * Schichten/Architektur: Es gibt eine Trennung zwischen Struktur und Design.
 * Das CSS (?) ist „fast” tabellenlos
 * Die Anwendungen lassen sich skalieren (Zoom).
 * Die Aufteilung (Gliederung) des Layouts
 * Die Verwendung von Pattern ist nützlich, weil diese in den einzelnen Solutions immer wieder Verwendung finden und die PatternLibrary ergänzt werden kann.
 * GUI Constraints (wie gehabt…) http://colab.mpdl.mpg.de/mediawiki/GUI_Constraints

Was muss in GUI V3 überarbeitet werden

 * Größe und Anzahl der Klassen muss verringert werden (Zielgröße nicht über 100 Klassen)
 * Dateistruktur (Vererbung muss klarer/eindeutiger werden)
 * Performance Tests für „Smart GUI”
 * Context selection (Möglichkeit für Entwickler mit einfachen HTML-Tags auszuzeichnen)
 * Prefixing
 * Anzahl der Requests (bei Deployment, ad hoc Anpassung)
 * KEIN „Important”-State in den CCS-Dateien
 * unterschiedliche Display-Größen sollen künftig besser nutzbar sein
 * Größen sollen nicht an der Font-Definition fest gemacht werden
 * JS soll neu aufgebaut werden
 * keine starke Schachtelung
 * Navigationskonzept (fünf Ebenen)
 * Gibt es Möglichkeiten die Ladezeit und Anzahl der Requests zu reduzieren. Wenn ja, welche?
 * Druckanpassung (Die Druckdatei muss überarbeitet werden.)
 * Jaca Script Migration
 * Formularvalidierung (Features?)

Code Discussion Input vom 14.11.2011

 * Schachtelung der Klassen zu tief, manchmal unnötig/undurchsichtig
 * Schachtelung scheint häufig redundant
 * Grund für Schachtelung oft nicht nachvollziehbar (z.B. Browserkompatibilität)

Mögliche Änderungen:


 * 1) Mögliche Änderungen: Flachere Struktur
 * 2) Bessere Benennung der Klassen (Head, Content, ...)
 * 3) Verwendung von IDs
 * 4) Zu wenig Kommentare in: Snippets (HTML, CSS, JS) aber auch in JSPs


 * overflow: hidden; macht Entwicklung schwerer (Elemente verschwinden plötzlich)


 * Demo Seite fehlt (Gegenstück aus Snippets mit kompletter Schachtelung zum Vergleich fehlt)
 * Doppelung von Klassennamen (area, full, ...)
 * Grafisches box-modell fehlt bei der Dokumentation
 * Dokumentation zu versteckt
 * Bessere Einführung, Einweisung notwendig
 * Mittels audits (Chrmone) Klassenverwendung feststellen

JavaScript
 * verwaiste Script-Sammlung
 * kaum Dokumentation (magic numbers)
 * Nicht nach Zweck geordnet: Logik/Dynamik/Hack?
 * Konfliktregelung auf Basis von Tests Absprachen (Welche Frameworks/Versionen vertragen sich?)

Mögliche Änderungen:


 * 1) Start from scratch


 * zu komplizierte JS Lösungen für einfache Probeleme
 * CSS Klassen die JS Targets sind sollen auch als solche erkennbar sein: .test-js
 * Dynamisch Script Tags setzen?

Regelmäßige Meetings:

Alle 6 Wochen soll im Rahmen der Code Discussion die aktuelle GUI Entwicklung vorgestellt werden.

Schwerpunkte der GUI V3

 * Formulare (Was wollen wir verändern z.B. Validation)
 * Formatvalidierung für das Formular (Vanadium)
 * Pflichtfelder dynamisch (Genre-Spezifisch) Konzept erstellen

Ergebnisse aus den Usability Tests

 * ItemList: Multiple Select/Edit

„Verkaufsargumente”

 * HTML 5 Elemente * Menü Beispiele
 * Microformats (http://microformats.org/) Vorschläge
 * Accessibility (Progressive enhancement)
 * Performance
 * Kommentarfunktion (Fragezeichen)
 * Designziele (Features)

Sonstiges

 * Pubman V3 Anfang 2013
 * Browser bis 2009 sollen unterstützt werden
 * Themes der Institute einbinden (IP Adresse)

Todos
Marco
 * Definition von grundlegenden Elementeigenschaften
 * Aufsetzen auf abstrakten Patterns
 * Aufstellung der benötigten Klassen und Elemente für ein Pattern
 * Definition der Schachtelung/Namespaces/Vererbung
 * Vorschlag der enhancements und progressive enhancements (z.B. Formularvalidierung)
 * Umsetzung dynamischer Aspekte, Definition des JS
 * Ergänzung der Library um das Pattern
 * Browsertest (PC, grundlegend)
 * Eingriffe/Änderungen im Layout/der Vererbung/der Browserkompatibilität (Besonderheiten)
 * Dokumentation

Rupert
 * Vorbereitung von SVN/Verzeichnisstruktur
 * Patterns
 * Ergänzung der abstrakten Patterns
 * Größenvarianten
 * Browsertest und QA

Denise
 * Aufsetzen auf abstrakten Patterns
 * Patterns
 * Definition der Positionen u.v.a.: http://colab.mpdl.mpg.de/mediawiki/Pattern_Layout
 * Definition der dynamischen Zustände (Größenstufen)
 * Icons (Test in Bezug auf „dithering”)
 * Dokumentation
 * Review und Änderungen
 * Browsertest Mac

Datei Struktur (Ordner, Gliederung innerhalb des Codes)


../common_presentation ./css ./theme ./theme_name ./image appearance.css standard.css ./components ./header ./list ./menu ./paginator ./startpage ...  ./pattern ./header ./layout ./list ./menu ./paginator ./startpage ...  ./global_image ./jscript


 * Zentrale Bereitstellung von Bildern &rArr; &quot;global_image&quot;: Beispiel: solution logos
 * Zentrale Bereitstellung von JavaScript &rArr; &uuml;berall dieselbe Bereitstellung von Funktionalit&auml;ten
 * Zentrale Bereitstellung von CSS &rArr; themes übertragbar auf andere solutions
 * Zentrale Bereitstellung von Pattern &rArr; Verfügbarkeit der Patterns für alle solutions
 * Zentrale Bereitstellung von Components &rArr; Verfügbarkeit fertiger JSF-Komponenten, die aus den Pattern erstellt wurden


 * standard.css &rArr; für alle themes/skins global gültig und steuert die grundlegenden Eigenschaften
 * ./theme_name/appearance.css &rArr; beinhaltet alle Definitionen zu den Pattern, Schrift, ...

Variante:

../common_presentation ./css basic-formattings.css gui-components.css

./fonts font-name.eot font-name.svg font-name.ttf font-name.woff

./images (png 8bit each channel) ./messages ./trees ./document_library ./  ... (supports liferay) ./

./javascript page-specific.js        gui-components.js      ./solution-specific solution-name-specific.js

./theme-default ./css appearance.css ./images (png 8bit each channel) ./messages ./trees ./document_library ./  ... (supports liferay) ./   theme-default_thumbnail.png

URL (properties):

./theme-blue ./css appearance.css ./images (png 8bit each channel) ./messages ./trees ./document_library ./  ... (supports liferay) ./   theme-blue_thumbnail.png

Trennung von Komponenten und Auszeichnung
Trennung von Komponenten:

Prefixing

.itemList_tiled .itemList_bibliographic .itemList_grid

Gruppierung

.itemList .tiled .itemList .bibliographic .itemList .grid

Element-Selektor (Problementisch, da semantisch nie korrekt)

Beispiele:

p.itemList (Metadaten) a.itemList (Fulltext Link) h1.itemList (Item Titel) div.itemList (List Body) span.itemList (?)