Generelle Änderungen bzw. Erweiterungen im SP Normtemplate 2020 (mit Praxisbeispiel oder Demo)

Einstieg - Index auf: www.amicas.at/13240.0.html
Bei den Vorgaben zur Entwicklung des neuen Templates wurde darauf geachtet, dass die nötigen Anpassungen bereits erfolgreich in Projekten von GTN-Solutions umgesetzt wurden. Zusammenfassend kann festgestellt werden, dass 95 % davon bereits in den GTN-Solutions-Projekten

umgesetzt wurden.

Für alle nötigen Ideen und Anpassungen wurden Praxisbeispiele gesucht und angeführt.

Die grundlegenden Änderungen in der Übersicht:

  • der aktuell noch 3-geteilte Mittelframe wird zu einem Hauptframe und die gesamte Navigation wird in den Seitenkopf verlegt.Menuetiefe maximal 5 Ebenen. Navigationspfadangabe (Breadcrumbs) wird leicht abgeändert und 2 x ausgelesen, im Seitenkopf und am Seitenfuss.
     
  • Artikel-Container (= maximale Versione = "Einer für alles" für
    • Ankündigung
    • News über die Block-Extension
    • Links in soziale Netzwerke
    • Veranstaltungen
    • Index für Videobeiträge
  • Extension "News" wird modernisiert, ab besten mit der Block-Extension
  • Hamburger-Menue-Führung für Handy-Navigation.
  • Dauerpräsenter "Scroll-Back-to-Top" Button.
  • Navigation im Seitenfuß > Fat Footer
  • Redaktionssystem > Werbeeinstieg (1 - 5 Wechselbilder) für 1. Ebene der Menuenavigation

Wesentliche externe Vorlagen (Praxisbeispiele) für die Template-Entwicklung

Navigation

  • Die 3 Menueframes im Mittelteil verschmelzen zu einem Frame (= Hauptbildschirm)
    • Praxisdemo:
  • Das aktuelle Hauptmenue = die Textnavigation wird ein Menue zum Aufklappen bis auf maximal 5 Ebenen tief und in den Kopfframe - Quernavigation verlegt.
    • Praxisdemo:
  • Navigationspfadangabe (Breadcrumbs)  - "Sie befinden sich hier:" Pfadangabe ist verlinkt. Es genügt auch, wenn die Pfadangabe startet mit "Portalname / Home / ... / ... / usw. Die Pfadangabe kommt jetzt 2 mal, 1 x im Seitenkopf = direkt über Mittelframe, 1 x im Seitenfuss, direkt unter Mittelframe.

Navigation > linker Frame wird aufgelöst

Die Navigation aus dem linken Frame wird komplett aufgelöst.

  • Hauptmenue = wird in die Quernavigation verlegt
  • Service = wird in die Quernavigation verlegt
  • Community = wird in die Quernavigation verlegt
  • Infoboxen = wird in die Quernavigation verlegt

Navigation > rechter Frame wird aufgelöst

Die Navigation aus dem rechten Frame wird komplett aufgelöst.

  • News = wird in die Quernavigation verlegt
  • Beraterprofile = wird in die Quernavigation verlegt oder optional in den Mittel-/Hauptframe
  • Social Media Verlinkungen = noch unklar, wo die hinkommen
  • Infoboxen = wird in die Quernavigation verlegt

Navigation > Seitenkopf quer > Funktionsbeschreibung

Modell 1: Navigation auf 3 Ebenen
In der Quernavigation (Seitenkopf) wird jeweils die gesamte 1. Ebene angezeigt. Kann über mehrere Zeilen gehen, ist auch aktuell so umgesetzt.
Wenn man mit der Mouse über einen Punkt der 1. Ebene drüber fährt, dann sieht man in einer Gesamtübersicht die 2. und 3. Ebene der Navigation.
Dieses Fenster hat dann einen weißen Hintergrund mit Schwarzer Schrift.
Wenn man den Punkt der 1. Ebene anklickt, dann bekommt er einen Rahmen in der Portal-Grundfarbe.
 
Modell 1+: Navigation in die 4. + 5. Ebene
Wenn es eine 4. oder 5. Menueebene gibt, dann gibt es ab der 3. Ebene + 4. Ebene Pfeile = >, die das weiterführende Menue ankündigen.
Wenn man dann mit der Mouse über einen Punkt der 3. Ebene mit weiterführendem Menue zur 4. / 5. Ebene fährt, dann klappt ein Fenster auf, das in einer Gesamtübersicht alle weiterführenden Menuepunkte der 4. + 5. Ebene zeigt.

Icons für die Navigation:
Hier sollte der "Zentrale Icon-Katalog" für die Amicas Serviceportale verwendet werden, der im Rahmen des Template-Designs noch anzulegen ist.
 
Praxisbeispiele - extern:
www.bankaustria.at
www.sbausparkasse.at
www.hypovbg.at
https://www.weko.com/serviceinformation

Praxisbeispiele - GTN-Solutions:
www.bruckneruni.at
www.proges.at

Statische Entwicklung - Demo:
 http://fw.amicas.at/typo3/template/2020/navigation_seitenkopf_quer.htm

Navigation Mittelframe > Scroll back to Top (Mittelframe)

Funktionsbeschreibung:
Am Bildschirm dauerpräsenter Navigationsbutton = Pfeil nach oben, der sicher stellt, dass ich, egal wie weit ich schon nach unten oder nach links und rechts gescrollt habe, jederzeit zum Seitenanfang = Top komme.
Befindet sich auch als fixer Bestandteil in der Fusszeile.

Hier gibt es eine ev. passende Sammlung von Icons, wobei diese idealer Weise in der Serviceportal-Grundfarbe erscheinen sollten.
Navigations-Button-Sammlung auf: www.amicas.at/13815.0.html

Icons für die Navigation:
Hier sollte der "Zentrale Icon-Katalog" für die Amicas Serviceportale verwendet werden, der im Rahmen des Template-Designs noch anzulegen ist.

Praxisbeispiel:
https://www.bmeia.gv.at

Menue-Navigation am Handy (Burger-Menü)

Darstellung der Menuenavigation am Handy: (Burger-Menü)

Art der Darstellung - siehe Praxisbeispiele:
Hintergrund - A) Grund-Portal-Farbe Dunkel mit weißer Schrift zur Navigation
Hintergrund - B) Grund-Portal-Farbe Hell mit Schwarzer Schrift zur Navigation

Icons für die Navigation:
Hier sollte der "Zentrale Icon-Katalog" für die Amicas Serviceportale verwendet werden, der im Rahmen des Template-Designs noch anzulegen ist.

Praxisbeispiele:
www.bankaustria.at
www.generali.at

Icon-Katalog zentral (genormt) > zur Navigation im SP Template > Grafikquellen

Icons für die Navigation:
Laut Empfehlung von Pit gibt es hier eine ideale Sammlung auf:
A) https://fontawesome.com/
B) https://www.w3schools.com/icons/default.asp 
C) https://www.w3schools.com/icons/google_icons_navigation.asp
D) http://www.famfamfam.com/lab/icons/

Aktuell ist leider noch nicht schieden, welche Quelle verwendet werden soll. Text-basierte Icons werden bevorzugt. Bevorzugt erscheint auch
C) https://www.w3schools.com/icons/google_icons_navigation.asp

Welche Icon-Sammlung verwendet wird, entscheidet der Entwickler vom Template.

Navigation im Seitenfuß > Fat Footer

Fussleiste: Welche Menuepunkte werden nicht mehr gebraucht, welche machen noch Sinn?

  • Kontakt-Redaktion = Serviceportal-abhängiger Eintrag = Realisiert über die Formular-Extension
  • Contact us = Serviceportal-abhängiger Eintrag = Realisiert über die Formular-Extension
  • Feedback = Serviceportal-abhängiger Eintrag = Realisiert über die Formular-Extension
  • Siteplan = Serviceportal-abhängige Extension = Funktioniert, sollte bleiben, kann aber auch ersetzt werden durch die Sitemap im Format XML, die von der Google-Search-Maschine auch gelesen werden kann!
  • Sitemap = Serviceportal-abhängige Extension = im Format XML, die von der Google-Search-Maschine auch gelesen werden kann!
  • Rechtsinfos = Zentraler Link aus allen Serviceportalen auf eine einzige Datei mit Untermenuepunkte - Anlage unter /Gemeinsame Inhalte/Rechtsinfos - www.amicas.at/13557.0.html
  • Realisiert mit Typo3 = Zentraler Link aus allen Serviceportalen auf eine einzige Datei - Anlage unter /Gemeinsame Inhalte/Rechtsinfos/Realisiert mit Typo3 - www.amicas.at/782.0.html

Redaktionssystem > Slider = Startseitenbilder (1 - 5 Wechselbilder) für 1. Ebene der Menuenavigation > Optimierungsansatz

Auf der 1. Menueebene der Navigation bzw. auf der Startseite = Home pro Serviceportal soll es eine optionale Werbemöglichkeit = Slider = 1 bis 5 wechselnde Startbilder geben, die dann weiter verlinkt sind.
Vorlage dafür ist die Homepage der Bank Austria mit ihrer jeweils 1. Menueebene.
Bankaustria-Homepage-Grafikgröße: Hier haben die Originalgrafiken ein Breite : Höhe - Verhältnis von 2 : 1 ( = Breite: 2560 Pixel, Höhe 1280 Pixel)

Praxisbeispiele - extern:
www.bankaustria.at
https://www.bankaustria.at/firmenkunden-und-freie-berufe.jsp 
https://www.bankaustria.at/premium-banking.jsp
https://www.bankaustria.at/ueber-uns.jsp

Testbilder für den Funktionstest:
In der Dateiliste / Admin-Musterportal-2020 / Grafiken / Startseite wurden 5 Testbilder abgelegt, Höhe 576 Pixel um die Funktion der "1 bis 5 wechselnde Startbilder " testen zu können.
In der Dateiliste / Admin-Musterportal-2020 / Grafiken / Startseite wurden 5 Testbilder abgelegt, Höhe 1280 Pixel um die Funktion der "1 bis 5 wechselnde Startbilder " testen zu können.

Problemstellung mit Optimierungsansatz:
Amicas-Template 2020-Homepage-Grafikgröße: Hier haben die Originalgrafiken aktuell ein empfohlenes Breite : Höhe - Verhältnis von 2,43 : 1 ( = Breite: 1400 Pixel, Höhe 576 Pixel)
Grafiken mit diesem Größenverhältnis sind eher schwer zu finden bzw. zu Scallieren.
Stellt sich die Frage, ob wir nicht die verwendbaren Bilder an die Größe der Bank Austria-Vorlage angleichen. Verhältnis Breite zu Höhe 2 : 1 = Dieses Format ist einfach zu finden und zu bearbeiten.

Redaktionssystem > Artikelcontainer (Version maximal) mit Index

Redaktionssystem >  Artikel-Container (Version maximal) > Artikelvorschau = Ankündung mit Bild, Überschrift, Kurzinfo + Link auf weitere Inhalte bzw. Funktionen in einem Index > News

Grundvorgabe:
Entwicklung eines "Artikel-Containers Version maximal" mit Index für mehrere Funktionsbereiche


A) Artikelvorschau mit Index
B) News mit Index
C) Veranstaltungen mit Index
D) Video-Filme mit Index

Vorlage: Artikelcontainer-Rahmendesign wie auf: https://eeducation.at/
Der Rahmen für die weiterführenden Links ist in der Serviceportal-Grundfarbe, könnte aber optional auch eine andere Farbe haben.
Wenn es eine "weiterführende Verlinkung" gibt, dann funktioniert der Link sowohl bei Bild / Überschrift 1 / Kurzinfo / Farbtabellenzeile.
Vorlage: Artikelcontainer-Rahmendesign wie auf: https://eeducation.at/
 
Praxisbeispiele - extern:

Praxisbeispiele - GTN-Solutions:

Artikelcontainer-Rahmendesign wie auf:

Statische Entwicklung - Demo:


Aktuelle Versionen im Designvorschlag von Dominik

Redaktionssystem > Artikel (= eine Art News, gepostet von Amicas Online) in sozialen Netzwerken mit Verlinkung in die Netzwerke.

Im Rahmen der "Social-Media-Aktivitäten" ist geplant, Artikel (News) in sozialen Netzwerken wie

zu posten (schalten) und diese Artikel (News) im jeweiligen Serviceportal, bei den Artikelcontainern über einen Index zu verlinken.

Diese Artikel (News), die wir in sozialen Netzwerken posten, sollten im Newsrahmen erkennbar sein, wie auf der Vorlage der Bank Austria.
Der Rahmen leicht schattiert siehe  https://eeducation.at/ und am Rahmenkopf = oben, so wie bei der Bank Austria, ein Farbbalken in der Grundportal-Farbe mit dem ID-Zeichen vom jeweiligen sozialen Netzwerk.
Wir könnten es aber auch einfacher designen, dass wir nur den Standardrahmen für News nehmen und einfach als 1. Inhalt im Rahmen optional das ICON vom Sozialen Netzwerk über das Redaktionssystem einfügen. Vorteil: Wir brauchen keinen extra Rahmen designen.

Praxisbeispiele - extern:
www.bankaustria.at
Artikelcontainer-Rahmendesign wie auf: https://eeducation.at/

Statische Entwicklung - Demo:
http://fw.amicas.at/typo3/redaktionssystem/news_soziale_netzwerke.htm

Typo3-Extension "Social-Media"

Vermutlich brauchen wir diese Extension, um die Verbindung in die Social-Media-Netzwerke her zu stellen:
https://extensions.typo3.org/extension/pb_social

Beschreibung "Social-Media-Icons":
https://extensions.typo3.org/extension/spt_socialmedia
https://www.spawoz.com/blog/social-media-widget-documentation/

Redaktionssystem > Serviceidee: "Was sie noch interessieren könnte"

Redaktionssystem > Serviceidee: "Was sie noch interessieren könnte"
 
Sollte mit dem Typo3-Redaktionssystem im Hauptframe umgesetzt werden können.
Artikelcontainer mit Index
 
Praxisbeispiele - extern:
https://www.uniqa.at/versicherung/startseite.html
https://www.sbausparkasse.at/de/finanzieren/konditionen
 
Praxisbeispiele - GTN-Solutions:
www.proges.at
Artikelcontainer-Rahmendesign wie auf: https://eeducation.at/

Redaktionssystem > Indexmenue mit Aufklappfunktion

Extension "News" > Update bzw. "Neues Design"

Die News bekommen ein neues Design.
Vorlage sind die News, die bei GTN-Solutions schon realisiert worden sind.
Das Design kann aber genauso gemacht werden, wie eine indexierte Artikelvorschau über das Redaktionssystem.

Praxisbeispiele - GTN-Solutions:
https://www.proges.at/aktuelles/news/

Statische Entwicklung - Demo:
http://fw.amicas.at/typo3/extension/news/default.htm

Die News sollten wohl am besten mit der Extension "Blog" gemacht werden. Siehe "Blog-Extension-Konzeption" auf www.amicas.at/13954.0.html

Stand: 31.07.2019

zurück | TOP  | Druckansicht | PDF

Soziale Netzwerk


 
Entwicklerinfo:
Hier kommen mit der Zeit so maximal 4 Buttons in soziale Netzwerk raus.
Der wichtigste ist Facebook, dann Xing, und dann der Rest.
Positionierung:
Die Buttons kommen über die News noch drüber, ohne Überschrift, rein der Button.
.

Admin-Musterportal 2020

Muster-Kopier-Portal

zur Anlage von Serviceportalen mit dem Amicas Template 2020

Admin-Musterportal 2017

Muster-Kopier-Portal

zur Anlage von Serviceportalen mit dem Amicas Template 2017

Admin-Kopiervorlagen

Admin-Kopiervorlagen

Sammlung von Kopiervorlagen und Admin-Portal für die Menuenormung in Amicas Online Serviceportalen

Admin-Testportal

Test-Portal

(= keine Kopiervorlage!)

für Tools, Extensions, Funktionen und Übungsplattform für Amicas Online Redakteure.

Startseiten-Entwicklung

Amicas Online Österreich - Startseiten-Entwicklung
= Welche Content sollte wo kommen