New-website-optimization

From BioDIP
Revision as of 10:51, 9 December 2016 by Hhartman (Talk | contribs)

Jump to: navigation, search

Click here for the BioDIP website relaunch team internal discussion

Contents

Generell offene Punkte / to do's

https nicht korrekt unterstützt

Browser Protocol: http/https

  • bei Verwendung von https Probleme mit der Seitendarstellung - siehe Screenshot, bitte beheben


Scrolling

  • Gewünschtes scroll-Verhalten über das Bild im Kopfbereich funktioniert noch nicht.
    • Dieses scroll-Verhalten kann bei microdimensions eingesehen werden und funktioniert dort auch auf mobilen Geräten.
  • Verkleinerung des weissen Kopfbereiches und Suchfeldbereiches beim scrollen soll "smooth" erfolgen, ohne Sprünge.
  • Die Verkleinerung soll gleichzeitig den Hintergrund der Suchleiste und die Schriftgröße des BioDIP Schriftzuges beeinhalten.
  • Die Hauptnavigationsleiste soll im gleichen Zug schmaler werden, wenn der Hauptinhalt der Seite über das scheinbar dahinterliegende Bild geschoben wird.



Element "Inhalts-Slider"

  • Verwendung innerhalb von News bzw. Events bitte ermöglichen.
  • Generell soll die Bildmetainfo immer in der filelist gepflegt werden. Das hat den Vorteil, dass die Info bei Bildverwendung konsistent erscheint und nur an einer Stelle gepflegt werden muss/kann. Bitte so umsetzen für den Inhaltsslider und die Gallerie sowie einzeln verwendete Bilder.
    • Wird diese im Inhaltsslider angezeigt, wenn kein Text eingepflegt wurde?
    • Wo sieht man z.B. im Inhaltsslider Element die Bild Metainfo?


Typo3 backend

  • bitte konsequent englische Begriffe verwenden:
    • Bildausrichtung - Image orientation
    • Hauptinhalt - Page content or Main content?
    • Ueberschrift - Headline
    • Alle Bilder - All images
    • Kopfbild - Slider image (correct?)
    • Kopfbildtitel - Slider image title
    • Optionen der "Image orientation" im Inhaltsslider sind Deutsch
    • Personenboxen:
  • Fotoausrichtung (inklusive der auswählbaren Optionen)
  • Fotogröße (inklusive der auswählbaren Optionen)
  • Bildtitel
  • Bildlink
    • Bildslider oben auf jeder Seite:
  • Bildverlinkung
  • Bild
  • Bildtitel
    • Main page unter Bildslider - "Inhalt oben"/"Unterer Inhalt"/"Linker Inhalt"/"Rechter Inhalt"...
  • Boxen auf der main page "Bild, Bildtitel, Bildgröße, Bildlink
  • more?
  • Wir reporten Probleme an Neonblue mit gewünschter Übersetzung, dies wird eingepflegt.



Microsope

Diese Ebene dient nur der Übersicht im backend, hat keine echte Funktion.


Screens zur Darstellung der LM Datenbank - Kommentare noch nicht beendet

generell

how-to-display-filter-sets
  • wo toggle ich zwischen "Kompaktansicht"(compact view) und "alle Informationen anzeigen" (show all details) hin und her? (es ist nicht zumutbar, alle aufgeklappten Infos einzeln einklappen zu müssen um zur Kompaktansicht zu gelangen)
  • Die "i" buttons zum Aufklappen weiterer Details entsprechen nicht dem Stil der restlichen webpage. Bitte wieder mit den Pfeilen vor den Überschriften (siehe "more info" oder Accordion) arbeiten.
  • Bild
    • Welches Bild (es können mehrere eingepflegt werden) wird für den list und kompakt view genutzt? Das erste jeweils eingepflegte?
    • Führen die Pfeile neben dem Bild zu weiteren Bildern des gleichen Systems? Oder zum nächsten System der Suchliste? Oder haben sie eine noch andere Funktion?
    • Titel des Bildes bitte als tooltip anzeigen
    • Titel und Bildbeschreibung unter dem Bild ausgeben
  • Druck
    • Bitte noch ein Beispiel für die Druckansicht erstellen - hier sollte es die Möglichkeit geben, zu wählen ob man das Bild mit drucken will oder nicht
    • Druck Kompaktansicht sollte eingeklappt auf eine Seite passen (event. Informationen auf einer Zeile ausgeben und/oder event. zweispaltig?)


refinemant ecquipment search - draft


Das Excel sheet "Display-of-Light-Microscope-data-20161201" enthält die Angaben zur Ausgabe der Daten. Der Filter oben im file erlaubt, nur die Felder einzublenden, die in der jeweiligen Ansicht ausgegeben werden sollen. Die Darstellung der Filtercubes liess sich im Excel sheet nicht korrekt abbilden, da Zeilen zwischengeschoben werden müßten. Deshalb gibt es ein Beispiel zur Ausgabe hier.

Ist es möglich, nochmals screens mit den korrekten Angaben zu erstellen auf der Basis eines Beispielsystems aus der DB? Interessant ist die:

  • Listenansicht
  • Kompaktansicht
  • Detailansicht


  • Möglichkeit zur Einschränkung der Liste (wie ebay) fehlt bisher (siehe Bild)

Screens zur Darstellung der Publikationsdatenbank

Übersicht als Tabelle

  • Frage: sortiert ein Klick auf eine Überschrift einer Tabellenspalte die Tabelle? Diese Art der Tabellensortierung soll bitte funktionieren.
  • Wenn nach dem Jahr sortiert werden soll, soll das über das Suchfeld erfolgen, oder?


  • Bild zur Publikation bitte doch rechts ausgeben, sonst ist die Tabelle rechts schlecht begrenzt
  • Facility Logo(s) doch nicht mit ausgeben
  • neue screens nicht nötig


Detailansicht

Änderungswünsche Detailansicht
  • sieht gut aus, wenige Änderungswünsche:
    • Abstract bitte im Blocksatz
    • ohne "by:" (siehe Bild)
    • Wir befürchten, dass die box zu klein wird, da wir Publikationen haben, die von 4 facilities unterstützt wurden.
    • Box daher eher weglassen und bullet list neben dem quadratischen Bild (grauer Rahmen?) zur Publikation ausgeben?
    • Wie können wir die facility Ausgabe realisieren? Ein Versuch dazu ist auf dem Bild - diese Liste wäre zumindest problemlos erweiterbar.
    • Optische Abgrenzung / Hervorhebung wäre gut für das z.B. "Enabled by: Light Microscopy Facility of the MPI-CBG"
    • die facilities sollen links auf die Facility Seiten sein


LM Datenbank

Generell: LM DB sieht sehr gut aus, ich sehe noch folgende "Probleme" (neben den unten beschriebenen):

  • Gewünschte Suchfunktionalität und Umbenennungen werden unten detailiert festgehalten
  • gibt es einen Weg, Duplikate bei backend Einträgen zu verhindern?

Computer

  • bitte Computer aus Formular "Light Microscope" ausgliedern (vielleicht zu globals - software package) mit folgenden Eigenschaften:
    • Computer ID [institute affiliation] [internal system ID] [Computer ID] - bitte einführen, wird zur Zuordnung benötigt
    • statt "Computer Manufacturer Name" (verbunden mit manufacturer Tabelle bitte Eingabefeld für [Computer Model Name (e.g. DELL Z820 workstation)]
    • Internal Net ID (bleibt Eingabefeld wie bisher)
    • OS (bleibt dropdown wie bisher)
    • CPU (bleibt dropdown wie bisher)
    • RAM (bleibt dropdown wie bisher)
    • Grafic Card (bleibt dropdown wie bisher)
    • Display (bleibt Mehrfachauswahl wie bisher) - bitte Unterordner mitnehmen
    • Softwarepackage (bleibt Mehrfachauswahl wie bisher) - Auswahl mit Software Package ID (siehe unten, bitte einführen)
  • Computer sollen in einer Mehrfachauswahl einem "Light Microscope" zugeordnet werden können mit Hilfe der Computer ID


Scan Head Ebene 4
  • "Scan Head(s) link" bitte entfernen, ist überflüssig


Additional Filters Ebene 4
  • Bitte umbenennen:
    • "Additional Filter Type" nach "Additional Filter Device Type"



globals - Ebene 4
Bitte Feld einfügen

"Single Filter" Formular:

  • Bitte dropdown für SingleFilterManufacturerID einfügen (siehe Bild)
    • Unterordner "SingleFilterManufacturerID" ist da
    • Wie erstelle ich dort den ersten EIntrag?
    • Im Formular "Single FIlter" fehlt noch das dropdown "Single Filter Manufacturer ID"
globals - Ebene 2
  • Software package
    • Software packages: braucht auch eine ID als Auswahlkriterium (Software Package ID [institute affiliation] [internal system ID] [software package name]


EM data base

DB Änderungswünsche

  • Alle Unterkategorien, die "Sample Preparation" als parent haben, sollen bitte das Sample preparation Formular benutzen (derzeit funktioniert das nur genau dann, wenn "Sample Preparation" ausgewählt wurde).
    • derzeit sind das die Ketegorien "Sample Preparation EM" und "Sample Preparation Histo"
    • kann man das dynamisch machen, oder müssen die Kategorien "hard gecoded" werden?
  • Das Feld "Resolution" soll ein Textfeld sein, kein Zahlenfeld, bitte ändern.
    • Ich kann zwar Text eingeben, der lässt sich aber nicht speichern - bitte beheben.


Ausgabewünsche

Es soll wieder eine Kompaktansicht geben und eine Detailansicht (alles klappt an einer Stelle aus/ein). Weiterhin sind zusätzliche Informationen sichtbar, wenn man eingeloggt ist (dies ersetzt die Detailansicht, die aktiv ist im nichteingeloggten Zustand).


Kompaktansicht

  • prinzipiell ähnlich zu LMs, d.h. ein Bild mit Überschrift (Systemname) und folgenden Zusatzinformationen:
    • Category
    • Suitable for
    • Detector (weglassen, wenn keiner in der DB steht)
    • Camera (weglassen, wenn keine in der DB steht)
    • Stage, movements
    • Location (wie bei LMs, d.h. inklusive facility...)

Detailansicht 1 für jeden Seitennutzer

  • alle DB Inhalte, die in der Kompaktansicht nicht enthalten sind in der Reihenfolge wie im Formular
    • hier alle Bilder anzeigen (wie bei LMs)
    • für Camera auch die Details anzeigen (Camera mount, Camera size)
    • für Detector auch die Details anzeigen (detector type)
    • Description (mit link zu descriptions und link to manual)
    • Manufacturer, System Manufacture ID

Detailansicht 2 für eingeloggten Seitennutzer

  • alle Inhalte der Detailansicht 1 und zusätzlich:
    • Touch Date (angezeigt basierend auf TYPO3 DB Inhalten - wann wurde der Datensatz zuletzt geändert)
    • Inventory Number
    • Service Contact Number
    • System Manufacture ID
    • Date Of Installation
    • End Of Warrenty
    • Internal DDc ID
    • Service Visits


Test website on mobile devices

Verschiedene OS

Chrome_home
  • OS X El Capitan (SW)
    • Firefox 45.0.1, Chrome 49.0.2623.112, Safari 9.0.1 funktionieren prinzipiell
    • ABER Darstellungsfehler bei allen drei Browsern:
      • wenn man auf der hompage ist (Hauptseite) und nochmals auf home drueckt und einmal runter und wieder hoch gescrollt wurde, verschieben sich Bildslider und Suchfeld (Suche dann direkt unter Hauptmenu)
      • erstaunlicher Effekt, der jedoch nicht gewuenscht ist

Neonblue: sollte behoben sein, bitte auf grün stellen und prüfen

Mobiltelefone (updated 9.12.2016)

Sony experia S5 kompakt, Android 6.0.1, Chrome

Lücke zwischen Bild und Box
  • Woher kommt die Lücke zwischen dem Bild Dresden Concpet und der Box?


iphone (Hella, Silke)

  • iOS 9.3.3 (getestet 1.8.2016, Hella)
    • quer:Logos im footer verrutscht - das scheint generell noch ein Problem zu sein auf mobilen Geräten
Logos im footer verrutscht
  • hochkant: Logos im footer miniklein und sehr weit voneinander entfernt - Platz und Größe muss optimiert werden
Logos zu klein und voneinander entfernt
Logos zu klein und voneinander entfernt

Android

  • Android 5.1.1. Internet Explorer (Hella, 26.7.16)
    • Problem in den Boxen auf der facility page
      • Liegt das an den eingepflegten Bildern?
Facility boxen auf Android
  • verrutschte logos im footer Bereich
Logos verrutscht im footer auf Android
  • Hauptmenü muss manchmal gescrollt werden? Effekt tritt nicht immer auf, wenn man länger auf der Seite bleibt, scheint es weg?
Hauptmenü muss manchmal gescrollt werden?


  • Android htc 4.4.2. Internet Explorer (Silke T.)
    • Darstellung mangelhaft
Artefakte mit IE auf Android

Neonblue: der Internetexpolrer wird von uns nicht für Android Geräte unterstützt, hier optimieren wir nur auf den systemeigenen Browser


  • Android 4.3., 5.1.1. google Chrome (Britta)
    • minimale Artefakte in den Grafiken der buttons
minimale Artefakte auf google Chrome

Neonblue: das liegt an den rendereigenschaften des Browser - die Symbole sind Vektordaten und werden entsprechend vom Browser gerendert - hier haben wir leider keinen Einfluss, wie der Browser dies rendert


  • Android 4.3., 5.1.1. google Chrome (Silke W.) (2.8.)
    • Boxen erscheinen unterschiedlich groß, trotz gleichen Inhalts (gleiche Zeilenanzahl)
unterschiedlich große Boxen
    • Wenn durch kleine Bildschirmgröße automatische Zeilenumbrüche eingefügt werden, entstehen unschöne Leerzeilen (bzw. zu große Zeilenabstände)
unschöne Zeilenabstände



Tablets

  • ipad (Hella)
    • Ähnliches Footer Problem wie auf dem Samsung Tablet
Ähnliches Footer Problem wie auf dem Samsung Tablet

Neonblue: sollte behoben sein - nein (1.8.16), zumindest nicht im Hochformat - siehe nachfolgender screenshot

Footerproblem ipad hochkant besteht weiter
  • Ähnliches Problem mit Mikroskopgrafik im button wie auf Android mobile mit google Chrome
Ähnliches Problem mit Mikroskopgrafik im button wie auf Android mobile mit google Chrome

Neonblue: siehe "minimale Artefakte in den Grafiken der buttons"

  • ipad test 27.7.2016 (Hella)
  • Hauptseite sieht oben gut aus, beim scrollen Artefacte in den 3 Boxen, die am Rechner nebeneinander sind
3 Boxen nebeneinander - Problem Hauptseite auf ipad
  • Verschiedene Probleme auf der gleichen Seite wurden beobachtet - kann das sein?!
3 Boxen nebeneinander - Problem Hauptseite auf ipad
3 Boxen nebeneinander - Problem Hauptseite auf ipad


  • Samsung Tablet 4, Android 4.4.2
    • Internet 1.5.28 (Standardanwendung - vorinstalliert) - geht nicht (außer dem BioDIP Logo und den Icons "Home" & "Menü" wird nichts angezeigt - IR (2.08.): besteht nach wie vor
    • Google Chrome (Version 49.0.2623.91) - geht bedingt:
1. DD-concept Box wird unvollständig angezeigt
DDc Box horizontal auf Samsung Tablet mit google Chrome
DDc Box vertikal auf Samsung Tablet mit google Chrome
1.1 Inhalte der News and Events Box passen im Querformat nicht in die Box


2. Partner Logos am Seitenende sind nach unten gerutscht
Logos im footer verrutscht

Neonblue: sollte behoben sein - siehe "ipad (Hella) Ähnliches Footer Problem wie auf dem Samsung Tablet" - IR (2.08.): nein, besteht nach wie vor sowohl hoch- als auch querkant

3. Ruft man Publications oder FAQ (via der Icons) auf, wird links das dazugehörige Submenü nicht angezeigt

Neonblue: Für uns nicht nachvollziehbar - evtl. noch der Browser-Cache - die Links funktionieren bei uns einwandfrei - IR (2.08.): unter Umständen haben wir uns hier missverstanden: es gibt keine Möglichkeit auf die Unterseiten von Publication zu kommen (BioDIP Publications/ External Literature / How to Acknowledge)

  • Neonblue hat "Publications" in die Hauptnavigation eingefuehrt - Unterseiten, die per Hauptnavigation erreicht werden, haben das submenu der Seitennavigation
    • ipad quer: Seitennavigation ist da!
    • ipad hoch: Seitennavigation fehlt?!
  • kindle fire (Britta)
Personal tools