New-website-optimization

From BioDIP
(Difference between revisions)
Jump to: navigation, search
(Main page)
(Aktualisierung des CMS auf aktuelle Version (eventuell LTS version?))
 
(1,597 intermediate revisions by 7 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
 +
* 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.
  
* Internet Explorer works but no favicon (see image)
+
* Wartungsvertrag:
[[File:20150917-IE-no-favicon.jpg|thumb|400px|No favicon in IE 11.0.9600.18015]]
+
** 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)
  
* Safari: when scrolling down, the triangle area containing the search field moves out to the left side, the the "new" slimmer version moves back in ...weird!!!
+
* 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)
  
== Device compatibility ==
+
* 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.)
  
 +
=== Layout ===
  
::'''iPad (both landscape and portrait format)'''
+
* generelles Layout der aktuellen website www.biodip.de soll beibehalten werden
::*zooming in is not possible - please make this possible -->  possible now, but does not work properly, the search field is too big and i can't read the content easily
+
* Barrierefreiheit muß gewährleistet / geprüft werden - erforderliche Modifizierung durchführen / fehlende Inhalte müssen an den Kunden kommuniziert werden
::*the left corners of the search field are rounded (the right corners as well as the corners in other device versions are pointed)
+
** 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)!
  
:: but: new problems! (see screenshots!)
+
* Bilder
:::*artifacts at triangle of text box
+
** Bildmetainfo soll in der filelist gepflegt werden (Garantie für Konsistenz).
:::*more info buttons on homepage lead either to Wiki or again to the homepage
+
** Metadaten sollen angezeigt werden können bzw. direkt zur Barrierefreiheit genutzt werden.
:::* more info button missing for MISSION
+
** 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
:::*subpage: in menu left side, triangle of second submenu level goes over writing
+
:::*subpage: when Equipment - Light Microscope is clicked, the menu does not dissapear (like it does for the other subpages)</span>
+
  
 +
*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.
  
::'''iPhone'''
 
currently not testable ... side doesn't load properly at all (see screenshots)
 
::*both landscape and portrait format
 
::**zooming in is not possible - please make this possible
 
the search field is becoming too big and i can't read the content easily
 
::**the left corners of the search field are rounded (the right corners as well as the corners in other device versions are pointed);
 
::**artifacts in search field, left of magnifying glass
 
  
::'''Android 4.3 phone'''
+
* Organigramm soll präsenter sein
currently not testable ... side doesn't load properly at all (see screenshots)
+
** zusätzliche Verwendung des Organigramms auf Startseite unter den 3 Inhaltsboxen Events - News - DDc inklusive der Aufzählung darunter (https://www.biodip.de/biodip/)
::*No triangles in the navigation
+
** soll vom Kunden pflegbar sein
::*Triangles at top (around search field) and bottom (around partner logos) are lost ... makes top and bottom appear completely white/empty
+
** Elemente des Organigramms sollen links enthalten können
::*on subpages weird php warning above contact form
+
** 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)
::*zooming in is not possible - please make this possible
+
  
*'''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?
 
  
 +
[[File:20170211-Inhaltsslider-problem.JPG|thumb|200px|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.
  
== Slider ==
 
  
::* How to play movies in the slider? They should play automatically when page is opened.
+
* Optimierung Scrollverhalten
::* The time interval should be customizable by us
+
** Verkleinerung des weissen Kopfbereiches und Suchfeldbereiches beim scrollen soll "smooth" erfolgen, ohne Sprünge.  
::* The first image of a slide show should be selected randomly. Generally the sequence within a slide show is defined by us (done).
+
** 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.
  
== Main page ==
+
* 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
  
::* German version not available yet: please inactivate icon and show us how to reactivate it once we get around to filling it.
+
===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
  
::'''Triangle background'''
+
=== Gerätedatenbank ===
::* Do not use the exact same pattern for the top (search field) and bottom banner (logo area)
+
  
::'''Boxes'''
+
* alle Inhalte der derzeitigen Geräte-DB sollen automatisiert in eine eventuell neue/modifizierte Geräte-DB übernommen werden
::* How to put an external link in a box?
+
  
 +
* Filter auf Equipment Seite (https://www.biodip.de/equipment/light-microscopes/?tx_nbmicroscopes_nbmicroscopes%5Baction%5D=&tx_nbmicroscopes_nbmicroscopes%5Bcontroller%5D=LightMicroscope&cHash=845178de7953e7c2c703e88d452a6309)
 +
** Es soll möglich sein, auf eine URL für eine Unterauswahl der Equipment Filter zuzugreifen.
  
::'''Footer'''
+
* intuitiv bedienbare Eingabemaske für die Gerätedatenbank (nicht im Typo3 wie bisher)
::* User voice icon is not linked correctly - directly link to a user feedback form
+
** Eingabe eines Gerätes von oben nach unten (generell nach spezifisch)
::* The "need help" should link to the contact form
+
** Systemname - Mikroskop - Computer - Zusatzteile
::* Where to change the text below "Need help?"
+
** Datenbankfelder sollen hinzufügbar sein (Beispiel: Standard 1 Computer, trotzdem sollten weitere hinzufügbar sein)
::* How to align the icons in the footer?!; What size do they need to have?
+
** Ausgabe des Gerätes soll anpassbar sein (Layout global für LM / EM / histo / IP), neue DB Felder sollen ausgegeben werden können
::* template impressum?
+
  
== Scrolling behaviour ==
+
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.
  
According to the meeting minutes of June 15
+
=== Publikationsdatenbank ===
::* Search field and main page area scrolls over the image
+
::* Image does not move - looks like it is in the background
+
  
== Timeline ==
+
* 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)
  
:::* Highlight event when hovering over it (!!!) and keep highlight when event is clicked
+
=== Schnittstellen ===
:::* When zooming in a line is set on top of the last entry... please remove. the last entry should be the top of the timeline
+
:::* How do we get pics into the timeline events? As soon as we change the element to "Tex&Image" it stays folded open
+
  
== Formatting ==
+
* dokumentierte Schnittstelle der Gerätedatenbank, die von externen Ressourcen genutzt werden können, z.B.:
 
+
** Interface zu DDc Technologieplattform
::* Inhaltsboxen: please add formatting option "Bildgröße"
+
** Inferface zu TUD web CMS
::* Slider: please add formatting option "Bildgröße" and "Position"
+
** Inferface MPI new booking system
::* Why does a link formated in bold appaer black? - should be light blue a link and bold
+
::* How to do an image which is a link as well?
+
 
+
 
+
== Gallery ==
+
 
+
::* When gallery images are clicked, they should open like images in a slide show: on top of the page. Currently, a new page with grey background is opened and one can't toggle through the images
+
 
+
 
+
== Picture dimensions ==
+
::*Inhaltsbox (1 column): 1012px x 186px
+
::*Zweispalten-Template (2 column): 481px x 186px
+
::*Dreispalten-Template (3 column): 320px x 186px
+
::*Partner footer: at least 148px width
+
::*Slider: 1920px x 461px (front page)
+
::*Slider: 1920px x 242px (sub page)
+
::*Koordinatoren: at least sqare 320px
+
 
+
 
+
 
+
 
+
== Organigram ==
+
 
+
=== New draft 19.10.2015 ===
+
[[File:20151112-Organigram-HH.png|thumb|400px|Suggested changes of the organigram]]
+
 
+
 
+
:::* DRESDEN-concept: change position of the words
+
:::* the DRESDEN-concept circle '''should be more pronounced/highlighted''' because this is the BioDIP roof organisation
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
 
+
== Special requests ==
+
 
+
:::* Please, design a male and female spaceholder for the coordinator boxes! :-)
+
 
+
== Questions ==
+
 
+
:::* How do we set up News?
+
:::* How do we set up Events?
+
:::* How do we set up the Contact Formular?
+
:::* When and how will the SEARCH function work?
+
:::* How can we include pictures in timeline events (without destroying the folding function, see above)?
+
:::* Should we have a separate field in the meta data for picture authors?
+

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