New-website-optimization

From BioDIP
(Difference between revisions)
Jump to: navigation, search
(Aktualisierung des CMS auf aktuelle Version (eventuell LTS version?))
 
(1,764 intermediate revisions by 8 users not shown)
Line 1: Line 1:
This page is used by the '''BioDIP website relaunch''' team. Here we will collect all changes needed to optimize the new BioDIP website (including display and usage on mobile devices).
+
Click here for the [[relaunch tasks|BioDIP website relaunch team]] internal discussion
  
On September 14th 2015 the very first draft of the new website has been released: [http://biodip.neonblue.de/ new BioDIP website]. The following changes are necessary:
+
== Aktualisierung der BioDIP website 2020/21 ==
  
 +
=== Aktualisierung des CMS auf aktuelle Version (eventuell LTS version?)===
  
'''Browser compatibility'''
+
* CMS soll beibehalten werden (Typo3) oder auf anderes CMS umgezogen werden
* Firefox works
+
* backend einheitlich in Englisch
* Chrome works
+
* Möglichkeit zur Zweisprachigkeit soll bestehen bleiben
* Safari: not the complete page is displayed, the triangles in the top and in the bottom are lost
+
* Texteditor im back end
 +
** Zeilenumbrueche / Paragraphabstaende funktionieren nicht optimal, es ist nicht moeglich, die gewuenschten Abstaende korrekt zu platzieren.
  
 +
* Wartungsvertrag:
 +
** kontinuierlich auf die neueste Version des CMS
 +
** nicht terminiert
 +
** jährlich oder zweijährlich kündbar
 +
** kleinere Änderungen/Anpassungen der website sollen durch den Wartungsvertrag abgedeckt werden (Umfang ca. 24h/Jahr)
  
'''Device compatibility'''
+
* derzeitige Inhalte des öffentlichen CMS sollen automatisiert in die aktualisierte website übernommen werden
 +
* Zur Aktualisierung des CMS soll das bisherige Entwicklungssystem genutzt werden (Software vollständig verfügbar)
  
::'''iPad'''
+
* Es soll wie bisher ein Entwicklungssystem und ein live-System bestehen. Die Aktualisierung des live-Systems soll unkompliziert vom Kunden ausgelöst, besser noch selbst durchgeführt werden können. (Bisherige round trip time deutlcih zu lang.)
::*both landscape and portrait format
+
::**zooming in is not possible
+
::**the left corners of the search field are rounded (the right corners as well as the corners in other device versions are pointed); <span style="background:Bisque"> I think the rounded corners look nicer...shall we stick with them for all versions? '''What do you think?'''
+
::**artifacts in search field, left of magnifying glass
+
::*only portrait format
+
::**pictures next to EVENTS, NEWS and CONCEPT boxes only stretch over half the box height
+
  
::'''iPhone'''
+
=== Layout ===
::*both landscape and portrait format
+
::**zooming in is not possible
+
::**the left corners of the search field are rounded (the right corners as well as the corners in other device versions are pointed); <span style="background:Bisque"> I think the rounded corners look nicer...shall we stick with them for all versions? '''What do you think?'''
+
::**artifacts in search field, left of magnifying glass
+
  
::'''Android 4.3 phone'''
+
* generelles Layout der aktuellen website www.biodip.de soll beibehalten werden
::*Triangles at top (around search field) and bottom (around partner logos) are lost
+
* Barrierefreiheit muß gewährleistet / geprüft werden - erforderliche Modifizierung durchführen / fehlende Inhalte müssen an den Kunden kommuniziert werden
::*on subpages weird php warning above contact form
+
** Anforderungen der TU Dresden müssen beachtet werden (Andy fragen bzgl. Anforungen - Silke fragt)
 +
** die Hintergrund- und Vordergrundfarben haben derzeit kein ausreichendes Kontrastverhältnis
 +
** Eventuell Inhaltsproblematik - fehlende Inhalte an den Kunden kommunizieren
 +
** den Formularelementen sind bisher keine Beschriftungen zugeordnet
 +
** Links haben bisher keinen erkennbaren Namen
  
 +
* Einbindung von Symbolen bei Anzeige von equipment und facilities (siehe owncloud git repository)
 +
** Tabelle dazu erstellen (Britta)!
  
*general question: on the subpages of the mobile device pages, where are the right side buttons that lead to Equipment, Publications, FAQ? There is no other way to get to the Publications page, is there?
+
* Bilder
 +
** Bildmetainfo soll in der filelist gepflegt werden (Garantie für Konsistenz).
 +
** Metadaten sollen angezeigt werden können bzw. direkt zur Barrierefreiheit genutzt werden.
 +
** verwendete Bilder sollen markiert werden können und bei Markierung in der Gallerie erscheinen (auch slider Bilder) - diese Bilder sollen per klick mit der Gallerieansicht verbunden sein, in der sie in voller Größe anzeigbar sind
  
 +
*History
 +
** BioDIP>History
 +
** Behebung eines Problems eventuell auch durch Verwendung eines alternativen Moduls/plugins: History wird sichtbar durch scroll down - das bleibt häufig hängen und Einträge in der Timeline wiederholen sich endlos.
 +
** Bisherige Problembehebung - Frontend cache leeren muss automatisch funktionieren bzw. es muss eine andere Möglichkeit gefunden werden.
  
; Main page (from top to bottom)
 
* Grey bar on page top
 
** Make it more slim
 
** Is the greenish line on the very bottom of the bar intended to be there?
 
  
 +
* Organigramm soll präsenter sein
 +
** zusätzliche Verwendung des Organigramms auf Startseite unter den 3 Inhaltsboxen Events - News - DDc inklusive der Aufzählung darunter (https://www.biodip.de/biodip/)
 +
** soll vom Kunden pflegbar sein
 +
** Elemente des Organigramms sollen links enthalten können
 +
** wenn technisch möglich: Änderung layout - Füllfarbe zum highlighting der dunkelblauen facility Flächen ändern und nicht mit Transparenz arbeiten (Durchscheinen des BioDIP Logos ist suboptimal)
  
  
::'''Main navigation'''
+
[[File:20170211-Inhaltsslider-problem.JPG|thumb|200px|Probleme Inhaltsslider]]
::* BioDIP instead of Biodip
+
::* Remove the item Archive
+
::* Use latest version of the BioDIP logo (see owncloud)
+
::* German version not available yet
+
  
 +
* News Modul
 +
** das Typo3-Element "Inhalts-Slider" (oder ein ähnliches) soll auch auf News bzw. Event-Seiten verwendet werden können um mehrere Bilder anzeigen zu können.
 +
** Alternativlösung: 3 Bilder nebeneinander in mehreren Zeilen anordenbar wie in der Gallerie. Klick auf das Bild liefert eine vergrößerte Darstellung, man kann vor/zurück klicken und so alle Bilder anschauen.
 +
** Position für die Gallerieansicht: zwischen Text und "Related files"
 +
* Die Ausgabe der Meatdaten soll formatierbar sein (derzeit besteht kein Unterschied zu normalem Text hinsichtlich der Formatierung). Gewünscht ist z.B. Änderung Schriftgröße, Breite Metadaten an Bildbreite koppeln.
  
::'''Search'''
 
::* at the top of the search field, when the page is charged the letters in the sentence "Biopolis Dresden Imaging Platform" are separated "Bio polis D resden I maging P latform"
 
  
 +
* Optimierung Scrollverhalten
 +
** 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.
 +
** generell: keine Sprünge von Elementen der Seite bim Herunterscrollen (gleichmäßige Verkleinerung aller Seitenelemente, wenn dies vorgesehen ist)
 +
** Kompatibilität zu allen gängigen Internet Browsern (Versionen bis zu 3 Jahre alt)
 +
* Optimierung der Darstellung auf mobilen Geräten (Mobiltelefone, Tablets, win, Mac, Android)
 +
** Es soll auf Anzeigeartefakte getestet werden, die nachfolgend behoben werden.
  
::'''Sub-menu'''
+
* Suche:  
::* triangle should rotate into horizontal position when a sub-menu item has been clicked
+
** Suchoptionen sollen angelegt werden (website/equipment/publications) sollen durchsucht werden können
 +
** keine Auswahl -> globale Suche
 +
** equipment DB und publications DB soll in die Suche einbezogen werden (bisher ist dies nicht der Fall)
  
 +
* Struktur (BN)
 +
** Ebene MPI-TDS nicht konsistent mit anderen Facilities
 +
** Equipment: Reihenfolge (LM -> EM -> PC -> booking DB)
 +
** Kategorien in Resources nicht konsistent
  
::'''Slide show'''
+
===Interner Bereich===
::* please use the real images
+
::* let us know in case the required format is somehow special
+
  
 +
* es soll einen internen Bereich der Seite geben, der nach login erreichbar ist
 +
* BioDIP to do: was erwarten wir von diesem internen Bereich?
 +
* definierte DB Felder sollen nur eingeloggten Nutzern angezeigt werden
  
::'''Main page boxes'''
+
=== Gerätedatenbank ===
::* Use the real images - <span style="background:LightBlue">Isabel, please provide the names of the files and the location
+
::** About:
+
::** Mission:
+
::** Events:
+
::** News:
+
::* two upper boxes have artifacts when the page zoom is changed (I will upload a screenshot for illustration)
+
[[File:New-website-Boxes-problem-main-page.jpg|thumb|600px|Artefacts when zooming into upper boxes at the main page]]
+
::* Link the "more info" buttons to the correct subpages (eg. the "more info" of ABOUT should link to BioDIP, not to Education)
+
::* Stay with english for this version: change "weiterlesen" into "more info"
+
  
 +
* alle Inhalte der derzeitigen Geräte-DB sollen automatisiert in eine eventuell neue/modifizierte Geräte-DB übernommen werden
  
:: '''"Belt" & three round icons''' in between the boxes
+
* Filter auf Equipment Seite (https://www.biodip.de/equipment/light-microscopes/?tx_nbmicroscopes_nbmicroscopes%5Baction%5D=&tx_nbmicroscopes_nbmicroscopes%5Bcontroller%5D=LightMicroscope&cHash=845178de7953e7c2c703e88d452a6309)
::*<span style="background:Bisque">Shall we highlight buttons when hovering over it? - '''What do you think?'''
+
** Es soll möglich sein, auf eine URL für eine Unterauswahl der Equipment Filter zuzugreifen.
:::SW: yes, that would be helpful
+
  
 +
* intuitiv bedienbare Eingabemaske für die Gerätedatenbank (nicht im Typo3 wie bisher)
 +
** Eingabe eines Gerätes von oben nach unten (generell nach spezifisch)
 +
** Systemname - Mikroskop - Computer - Zusatzteile
 +
** Datenbankfelder sollen hinzufügbar sein (Beispiel: Standard 1 Computer, trotzdem sollten weitere hinzufügbar sein)
 +
** Ausgabe des Gerätes soll anpassbar sein (Layout global für LM / EM / histo / IP), neue DB Felder sollen ausgegeben werden können
  
::'''Footer'''
+
Aktuelle Anpassungen der DB:
::* Add real partner logos (use high resolution logos in the owncloud)
+
* 1. Für die Processing Computer soll es analog zu den LMs und EMs einen link ins Buchungssystem geben
::* User voice icon is not linked correctly
+
* 2. Processing Computer benötigen eine "Location", analog zu den Mikroskopen
::* Is the position of the user voice icon correct?
+
* 3. Links auf eine vorab gefilterte Liste von Geräten (z.B. alle Lichtmikroskope der Kategorie "Facility" = LMF CMCB) sollen möglich sein (bereits möglich für die Publikationsdatenbank)
::* Put a question mark behind "NEED HELP"
+
* 4. Jedes Gerät soll einen link zu seiner home-Facility enthalten (zwischen "Location" und "Suitable for Specimen")
 +
* 5. Von jedem Gerät aus soll ein link auf ein Kontaktformular zeigen, dass die Anfrage an die jeweilige Facility schickt.
 +
* 6. Geräte müssen archiviert werden können (dann nur noch im internen Bereich der website sichtbar, d.h. nach login)
 +
* 7. DB Einträge sollen formatiert werden können (z.B. Hoch/Tiefstellung)
 +
* 8. Umsetzung der Anzeige interner Information nur für eingeloggte Nutzer
 +
* 9. Duplikate von Geräten sollen automatisch verhindert werden.
  
 +
=== Publikationsdatenbank ===
  
::'''Scrolling behaviour''' - according to the meeting minutes of June 15
+
* automatischer Import der per Pubmed verfügbaren Daten in die Literaturdatenbank
::* Main navigation always visible
+
* neue Publikationen sollen über eine Liste im csv-Format einfügbar sein
::* Search field and main page area scrolls over the image
+
** Spalten dieser Liste sind Pubmed-ID; Facility; Field; Image
::* When search field reached main navigation area, it remains
+
** die angegebenen images (benannt nach vorgegebenem Namensschema)sollen automatisiert ins CMS hochgeladen werden können
::**<span style="background:Bisque">Shall we make it more slim by removing the headline "Biopolis Dresden Imaging Platform"? On the otehr hand it is good if you always see on what page you are... - '''What do you think?'''
+
** automatisierte Zuordnung der images zur Publikation (ersichtlich aus filename)
::::SW: Yes, good idea
+
* Sortierung sollte nach Jahr moeglich sein (BN)
::* Main page area scrolls as block with footer
+
  
 +
=== Schnittstellen ===
  
; Sub pages
+
* dokumentierte Schnittstelle der Gerätedatenbank, die von externen Ressourcen genutzt werden können, z.B.:
* add top-slideshow images to all subpages?!
+
** Interface zu DDc Technologieplattform
** Do we want to have one and the same slide show on each subpage?
+
** Inferface zu TUD web CMS
**<span style="background:Bisque">'''Suggestion''': customize the slide show to the page topic, e.g. images of microscopes for the light microscope subpage? - '''What do you think?'''
+
** Inferface MPI new booking system
::SW: I think that, yes, it would be nice to have the slideshows customized. However, I wonder if that isn't too much effort...do we have enough (different) pics for all subpages?
+
 
+
*please write contact form in english
+
 
+
 
+
:'''Timeline'''
+
::* show only headline-sentences to start with, rest upon click, as well as highlight date-circle only when respective item is clicked
+
::* box with image: are there other text alignments around the image possible?
+
 
+
 
+
... to be continued
+

Latest revision as of 14:41, 1 April 2021

Click here for the BioDIP website relaunch team internal discussion

Contents

[edit] Aktualisierung der BioDIP website 2020/21

[edit] Aktualisierung des CMS auf aktuelle Version (eventuell LTS version?)

  • CMS soll beibehalten werden (Typo3) oder auf anderes CMS umgezogen werden
  • backend einheitlich in Englisch
  • Möglichkeit zur Zweisprachigkeit soll bestehen bleiben
  • Texteditor im back end
    • Zeilenumbrueche / Paragraphabstaende funktionieren nicht optimal, es ist nicht moeglich, die gewuenschten Abstaende korrekt zu platzieren.
  • Wartungsvertrag:
    • kontinuierlich auf die neueste Version des CMS
    • nicht terminiert
    • jährlich oder zweijährlich kündbar
    • kleinere Änderungen/Anpassungen der website sollen durch den Wartungsvertrag abgedeckt werden (Umfang ca. 24h/Jahr)
  • derzeitige Inhalte des öffentlichen CMS sollen automatisiert in die aktualisierte website übernommen werden
  • Zur Aktualisierung des CMS soll das bisherige Entwicklungssystem genutzt werden (Software vollständig verfügbar)
  • Es soll wie bisher ein Entwicklungssystem und ein live-System bestehen. Die Aktualisierung des live-Systems soll unkompliziert vom Kunden ausgelöst, besser noch selbst durchgeführt werden können. (Bisherige round trip time deutlcih zu lang.)

[edit] Layout

  • generelles Layout der aktuellen website www.biodip.de soll beibehalten werden
  • Barrierefreiheit muß gewährleistet / geprüft werden - erforderliche Modifizierung durchführen / fehlende Inhalte müssen an den Kunden kommuniziert werden
    • Anforderungen der TU Dresden müssen beachtet werden (Andy fragen bzgl. Anforungen - Silke fragt)
    • die Hintergrund- und Vordergrundfarben haben derzeit kein ausreichendes Kontrastverhältnis
    • Eventuell Inhaltsproblematik - fehlende Inhalte an den Kunden kommunizieren
    • den Formularelementen sind bisher keine Beschriftungen zugeordnet
    • Links haben bisher keinen erkennbaren Namen
  • Einbindung von Symbolen bei Anzeige von equipment und facilities (siehe owncloud git repository)
    • Tabelle dazu erstellen (Britta)!
  • Bilder
    • Bildmetainfo soll in der filelist gepflegt werden (Garantie für Konsistenz).
    • Metadaten sollen angezeigt werden können bzw. direkt zur Barrierefreiheit genutzt werden.
    • verwendete Bilder sollen markiert werden können und bei Markierung in der Gallerie erscheinen (auch slider Bilder) - diese Bilder sollen per klick mit der Gallerieansicht verbunden sein, in der sie in voller Größe anzeigbar sind
  • History
    • BioDIP>History
    • Behebung eines Problems eventuell auch durch Verwendung eines alternativen Moduls/plugins: History wird sichtbar durch scroll down - das bleibt häufig hängen und Einträge in der Timeline wiederholen sich endlos.
    • Bisherige Problembehebung - Frontend cache leeren muss automatisch funktionieren bzw. es muss eine andere Möglichkeit gefunden werden.


  • Organigramm soll präsenter sein
    • zusätzliche Verwendung des Organigramms auf Startseite unter den 3 Inhaltsboxen Events - News - DDc inklusive der Aufzählung darunter (https://www.biodip.de/biodip/)
    • soll vom Kunden pflegbar sein
    • Elemente des Organigramms sollen links enthalten können
    • wenn technisch möglich: Änderung layout - Füllfarbe zum highlighting der dunkelblauen facility Flächen ändern und nicht mit Transparenz arbeiten (Durchscheinen des BioDIP Logos ist suboptimal)


Probleme Inhaltsslider
  • News Modul
    • das Typo3-Element "Inhalts-Slider" (oder ein ähnliches) soll auch auf News bzw. Event-Seiten verwendet werden können um mehrere Bilder anzeigen zu können.
    • Alternativlösung: 3 Bilder nebeneinander in mehreren Zeilen anordenbar wie in der Gallerie. Klick auf das Bild liefert eine vergrößerte Darstellung, man kann vor/zurück klicken und so alle Bilder anschauen.
    • Position für die Gallerieansicht: zwischen Text und "Related files"
  • Die Ausgabe der Meatdaten soll formatierbar sein (derzeit besteht kein Unterschied zu normalem Text hinsichtlich der Formatierung). Gewünscht ist z.B. Änderung Schriftgröße, Breite Metadaten an Bildbreite koppeln.


  • Optimierung Scrollverhalten
    • 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.
    • generell: keine Sprünge von Elementen der Seite bim Herunterscrollen (gleichmäßige Verkleinerung aller Seitenelemente, wenn dies vorgesehen ist)
    • Kompatibilität zu allen gängigen Internet Browsern (Versionen bis zu 3 Jahre alt)
  • Optimierung der Darstellung auf mobilen Geräten (Mobiltelefone, Tablets, win, Mac, Android)
    • Es soll auf Anzeigeartefakte getestet werden, die nachfolgend behoben werden.
  • Suche:
    • Suchoptionen sollen angelegt werden (website/equipment/publications) sollen durchsucht werden können
    • keine Auswahl -> globale Suche
    • equipment DB und publications DB soll in die Suche einbezogen werden (bisher ist dies nicht der Fall)
  • Struktur (BN)
    • Ebene MPI-TDS nicht konsistent mit anderen Facilities
    • Equipment: Reihenfolge (LM -> EM -> PC -> booking DB)
    • Kategorien in Resources nicht konsistent

[edit] Interner Bereich

  • es soll einen internen Bereich der Seite geben, der nach login erreichbar ist
  • BioDIP to do: was erwarten wir von diesem internen Bereich?
  • definierte DB Felder sollen nur eingeloggten Nutzern angezeigt werden

[edit] Gerätedatenbank

  • alle Inhalte der derzeitigen Geräte-DB sollen automatisiert in eine eventuell neue/modifizierte Geräte-DB übernommen werden
  • intuitiv bedienbare Eingabemaske für die Gerätedatenbank (nicht im Typo3 wie bisher)
    • Eingabe eines Gerätes von oben nach unten (generell nach spezifisch)
    • Systemname - Mikroskop - Computer - Zusatzteile
    • Datenbankfelder sollen hinzufügbar sein (Beispiel: Standard 1 Computer, trotzdem sollten weitere hinzufügbar sein)
    • Ausgabe des Gerätes soll anpassbar sein (Layout global für LM / EM / histo / IP), neue DB Felder sollen ausgegeben werden können

Aktuelle Anpassungen der DB:

  • 1. Für die Processing Computer soll es analog zu den LMs und EMs einen link ins Buchungssystem geben
  • 2. Processing Computer benötigen eine "Location", analog zu den Mikroskopen
  • 3. Links auf eine vorab gefilterte Liste von Geräten (z.B. alle Lichtmikroskope der Kategorie "Facility" = LMF CMCB) sollen möglich sein (bereits möglich für die Publikationsdatenbank)
  • 4. Jedes Gerät soll einen link zu seiner home-Facility enthalten (zwischen "Location" und "Suitable for Specimen")
  • 5. Von jedem Gerät aus soll ein link auf ein Kontaktformular zeigen, dass die Anfrage an die jeweilige Facility schickt.
  • 6. Geräte müssen archiviert werden können (dann nur noch im internen Bereich der website sichtbar, d.h. nach login)
  • 7. DB Einträge sollen formatiert werden können (z.B. Hoch/Tiefstellung)
  • 8. Umsetzung der Anzeige interner Information nur für eingeloggte Nutzer
  • 9. Duplikate von Geräten sollen automatisch verhindert werden.

[edit] Publikationsdatenbank

  • automatischer Import der per Pubmed verfügbaren Daten in die Literaturdatenbank
  • neue Publikationen sollen über eine Liste im csv-Format einfügbar sein
    • Spalten dieser Liste sind Pubmed-ID; Facility; Field; Image
    • die angegebenen images (benannt nach vorgegebenem Namensschema)sollen automatisiert ins CMS hochgeladen werden können
    • automatisierte Zuordnung der images zur Publikation (ersichtlich aus filename)
  • Sortierung sollte nach Jahr moeglich sein (BN)

[edit] Schnittstellen

  • dokumentierte Schnittstelle der Gerätedatenbank, die von externen Ressourcen genutzt werden können, z.B.:
    • Interface zu DDc Technologieplattform
    • Inferface zu TUD web CMS
    • Inferface MPI new booking system
Personal tools