|
|
| Zeile 2: |
Zeile 2: |
| | |type=Anleitung | | |type=Anleitung |
| | |service=Service:Typo3 | | |service=Service:Typo3 |
| − | |targetgroup=Gäste, Angestellte, Studierende | + | |targetgroup=Angestellte |
| − | |displaytitle=TYPO3 - Website-Relaunch: Übergangslayout auf Endlayout umstellen
| |
| | |hasdisambig=Nein | | |hasdisambig=Nein |
| | }} | | }} |
| | + | ==== Was bedeutet Navigation auf einer Webseite? ==== |
| | + | Navigation bezeichnet die verschiedenen Elemente und Mechanismen einer Webseite, die Besucher*innen helfen, sich auf der Seite zurechtzufinden und die gewünschten Informationen schnell und einfach zu erreichen. Eine gelungene Navigation sorgt dafür, dass Besucher*innen nicht „verloren gehen“, sondern jederzeit wissen, wo sie sich befinden und wie sie zu anderen relevanten Inhalten gelangen können. |
| | | | |
| − | == Hintergrund der Webseiten-Umstellung== | + | ==== Warum ist das Thema auf einer Universitätsseite besonders komplex? ==== |
| − | Mit dem Website-Relaunch 2023 wurden alle Web-Seiten in TYPO3 automatisch in ein Übergangsdesign ("Migrationsdesign") überführt. Um die neuen Inhaltselemente nutzen zu können, müssen Sie das Layout Ihrer bestehenden Seiten ändern. Da die neuen Webseiten jedoch eine andere Logik hinsichtlich Ansprache, Design und Struktur verfolgen, wollen wir Sie ermutigen, die Chance für eine Neustrukturierung und -gestaltung Ihrer Webseiten zu nutzen.
| + | Gerade eine Webseite von einer Universität wie der UPB ist inhaltlich und organisatorisch sehr vielschichtig. Unterschiedliche Zielgruppen – etwa Studieninteressierte, Studierende, Forschende oder Mitarbeitende – haben sehr unterschiedliche Informationsbedürfnisse. Die Vielzahl an Fachbereichen, Serviceangeboten, Forschungsprojekten, Lehrinhalten und administrativen Informationen erfordert eine differenzierte Navigation, die diese Komplexität abbildet. |
| | | | |
| − | Alle Seiten, die aktuell im Migrationsdesign angezeigt werden ([[TYPO3 - UPB Consultant|Anleitung, wie Sie überprüfen können, welche Seiten sich im Migrationsdesign befinden]]) müssen umgestellt oder gelöscht werden, falls Sie nicht mehr relevant sind.
| + | ==== Navigationselemente auf den Seiten der UPB ==== |
| − | | + | Auf der UPB-Webseite werden verschiedene Navigationselemente eingesetzt, die sich in Funktion und Zweck unterscheiden. Diese unterschiedlichen Bausteine ergänzen sich, um einen klaren, übersichtlichen und flexiblen Zugang zu den Inhalten zu ermöglichen – von der groben Orientierung über den Inhalt bis hin zum direkten Zugriff auf spezielle Services. |
| − | ==Das erwartet Sie auf dieser Seite== | |
| − | Mit dieser Seite wollen wir Ihnen helfen, Ihre Webseiten bestmöglich umzustellen. Deshalb hier eine Übersicht, was Sie für Inhalte auf dieser Seite finden.
| |
| − | | |
| − | #[[#Die neue Logik, Optik und Zielgruppe der Webseiten verstehen|Die neue Logik, Optik und Zielgruppe der Webseiten verstehen]]
| |
| − | #[[#Ihre Vorteile durch die Umstellung|Ihre Vorteile durch die Umstellung]]
| |
| − | #[[#Die Umstellung – ein Prozess in zwei Schritten|Die Umstellung – ein Prozess in zwei Schritten]]
| |
| − | ##[[#Die Umstellung inhaltlich vorbereiten|Die Umstellung inhaltlich vorbereiten]]
| |
| − | ##[[#Die technische Umstellung|Die technische Umstellung]]
| |
| − | #[[#Checkliste zur Überprüfung der Qualität Ihrer neuen Seiten|Leitfaden zur Überprüfung der Qualität Ihrer neuen Seiten]]
| |
| − | #[[#Kontakt und Hilfe|Kontakt und Hilfe]]
| |
| − | #[[#Schritt-für-Schritt Anleitungen|Schritt-für-Schritt Anleitungen]]
| |
| − | == Die neue Logik, Optik und Zielgruppe der Webseiten verstehen== | |
| − | Für die Umgestaltung hilft es Ihnen, die Design-Ansätze der neuen Seiten zu verstehen:
| |
| − | | |
| − | *'''Single-Page-Design (“Onepager”):''' Ziel ist es, alle relevanten Inhalte auf einer einzigen Seite zu präsentieren, anstatt sie auf mehrere Unterseiten zu verteilen. Dies wird oft durch ein langes Scroll-Layout erreicht. Das Scrollen entspricht den mobilen Nutzungserfahrungen.
| |
| − | *'''Externe Zielgruppe:''' Ziel ist es, dass sich die Webseiten der Universität langfristig hauptsächlich an externe Personen richten, also beispielweise interessierte Schüler*innen, potenzielle Mitarbeiter*innen, Gutachter*innen aus der Forschung oder die allgemeine Öffentlichkeit. Webseiten sollten sich deshalb auf das Wesentliche fokussieren. Interne Informationen für Studierende, Mitarbeitende und Wissenschaftler*innen sollten Sie in andere Systeme wie z.B. PANDA, Wiki, Confluence, Teams oder Sharepoint auslagern. Gerne beraten wir Sie, wie Sie interne Informationen bestmöglich darstellen können.
| |
| − | *'''Mehrsprachigkeit''': Die Universität Paderborn strebt an, auf ihren Webseiten alle Inhalte durchgängig sowohl auf Deutsch als auch auf Englisch anzubieten ([[TYPO3 Informationen ueber Sprachen innerhalb der Website der Universitaet Paderborn|Informationen zur Mehrsprachigkeit]]), weshalb unter anderem das Übersetzungstool DeepL in TYPO3 integriert wurde.
| |
| − | | |
| − | *'''Mobile First:''' Alle Inhalte sollen insbesondere auf mobilen Geräten gut lesbar sein. Statt wie bisher Inhalte in Spalten nebeneinander anzuordnen, werden inhaltliche Abschnitte untereinander dargestellt.
| |
| − | | |
| − | *'''Vertikale Navigation und Burger-Menü:''' Die Navigation innerhalb einer Seite erfolgt über Sprungmarken (Ankern) zu bestimmten Abschnitten unterhalb des Headers, die sogenannte “Sticky Navigation”, da Sie beim Scrollen oben “kleben” bleibt. Um zwischen Seiten zu navigieren wird das große [[TYPO3 - Burger Menue|Burger Menü]] eingesetzt oder Verlinkungen auf den Seiten genutzt.
| |
| − | | |
| − | *'''Bildfokus:''' Viele Inhaltselemente werden in Verbindung mit Bildern genutzt. Auch die großen Headerbilder erfordern qualitativ hochwertige Bilder. Das Design ist also wesentlich visueller als vorher. Ihnen steht inzwischen auch eine [https://www.media.upb.de Bilddatenbank] zur Verfügung, um den hohen Bildbedarf zu decken.
| |
| − | | |
| − | *'''Mehrfachnutzung von Inhalten:''' Ein Ziel des neuen Systems ist es, redundante und sich teilweise widersprechende Inhalte zu vermeiden. Deshalb sollen Inhalte verstärkt mehrfach genutzt werden, das heißt Elemente werden an einer zentralen Stelle angelegt und können dann an mehreren Stellen ausgegeben werden bzw. von mehreren Redakteur*innen genutzt werden. Dies ist über verschiedene Funktionen möglich:
| |
| − | **'''Datenbanken:''' Mit dem [[Profilmanager]], dem [https://www.uni-paderborn.de/forschung/forschungsinformationen-an-der-upb FIS] und dem [[RIS]] haben wir inzwischen einige Datenbanken etabliert, die es Ihnen und anderen Redakteur*innen ermöglichen Ihre persönlichen Daten und Forschungsdaten an einem Ort zentral zu hinterlegen, aber an zahlreichen anderen Orten in unterschiedlicher Form auszugeben. Das neue Design bietet hier zahlreiche Webelemente mit diversen Darstellungs- und Filtermöglichkeiten.
| |
| − | **'''Datensammlungen:''' Ein ähnliches Prinzip wurde auch für einige andere Elemente in TYPO3 übernommen. Inhalte wie Topics, [[TYPO3 - Count Box|Schlüsselkennzahlen]], [[TYPO3 - Testimonial einfuegen|Testimonial-Zitate]] werden in Datensammlungen angelegt. Auf die einzelnen Datenelemente kann dann über Inhaltselemente zugegriffen werden.
| |
| − | **'''Datensätze:''' Sie können auch einmal erstellte Web-Elemente über die Datensatz-Funktion auf andere Seiten spiegeln. Verändern Sie etwas an dem originären Web-Element werden alle Änderungen bei den Spiegelungen übernommen ([[TYPO3 - Inhaltselement Datensaetze einfuegen|Anleitung TYPO3 - Inhaltselement Datensätze einfügen]] ).
| |
| − | **'''Kategorien:''' Uniweit wurde ein neues Kategoriensystem angelegt (z. B. Themen, Zielgruppen, Veranstaltungstyp, Arbeitsbereich, etc.). Nachrichten und Veranstaltungen können damit kategorisiert werden. Dies erlaubt das Filtern von Inhalten und vermeidet das Veranstaltungen und Nachrichten in mehreren Bereichen angelegt werden müssen.
| |
| − | | |
| − | '''Kurz zusammengefasst: schlank, vertikal, mobil, visuell, aktivierend'''
| |
| − | | |
| − | <bootstrap_alert color="info">==Ihre Vorteile durch die Umstellung==
| |
| − | Das neue Design bietet auch für Sie einige Vorteile:
| |
| − | | |
| − | *'''Reduzierter Pflegeaufwand:''' Die Verdichtung der Inhalte sollte die Anzahl der zu pflegenden Seiten reduzieren.
| |
| − | *'''Mehr Überblick:''' Eine schlanke Seitenstruktur führt zu einem übersichtlicheren Backend.
| |
| − | *'''Mehrfachnutzung von Inhalten:''' Die Funktionen zur Mehrfachnutzung wie Datenbanken, Datensammlungen und Kategorien erlauben es, Inhalte an einem Ort zu pflegen und passgenau an verschiedenen Stellen auszugeben
| |
| − | *'''Bessere Suchmaschinenplatzierung:''' Wir erhoffen uns, durch die neue Navigation, die Verdichtung aktueller Inhalte, einem stärkeren Backlinking (häufige Verlinkungen auf ein und dieselbe Seite) und dem neuen Design eine bessere Platzierung in den Suchmaschinen bzw. eine vorteilhafte Darstellung in den KI-generierten Suchantworten..
| |
| − | </bootstrap_alert>
| |
| − | ==Die Umstellung – ein Prozess in zwei Schritten==
| |
| − | Wir empfehlen Ihnen bei der Umstellung in zwei Schritten zu arbeiten. Setzen Sie sich zunächst kritisch mit Ihren bestehenden Inhalten auseinander und prüfen Sie, wie Sie die Umstellung nutzen können, um Ihre Inhalte noch prägnanter und ansprechender für Ihre Zielgruppen darzustellen. Erst wenn Sie sich darüber im Klaren sind, welche Inhalte Sie darstellen möchten, sollten Sie sich mit der technischen Umstellung in TYPO3 auseinandersetzen.
| |
| − | | |
| − | Ein [[TYPO3 - Webseitenueberpruefung und Qualitaetssicherung|Leitfaden für zukünftige Überprüfungen und zur Qualitätssicherung]] hilft Ihnen am Ende des Umstellungsprozesses und die Zeit danach.
| |
| − | | |
| − | <bootstrap_alert color=warning>'''Hinweis:''' Die konsequente Trennung von internen und externen Inhalte und die damit verbundene Nutzung anderer Informationssysteme erfordert häufig eine strategische Entscheidung und die Unterstützung von Vorgesetzten. Gerne beraten wir Sie, welche Systeme Sie für die Darstellung von internen Informationen nutzen können oder helfen Ihnen bei der Argumentation mit Entscheider*innen.
| |
| − | </bootstrap_alert>
| |
| − | | |
| − | ===Die Umstellung inhaltlich vorbereiten===
| |
| − | Aufgrund der neuen Design-Ansätze empfehlen wir Ihnen vor der technischen Umstellung, die folgenden inhaltlichen Schritte vorzunehmen:
| |
| − | | |
| − | <bootstrap_accordion>
| |
| − | <bootstrap_panel heading="Zuständigkeit klären" >Klären Sie innerhalb Ihres Bereichs, wer für die Überarbeitung und Neustrukturierung der Inhalte zuständig ist und wer die neuen Inhalte technisch in TYPO3 umsetzt. Eine Neustrukturierung von Inhalten, zum Beispiel, das Auslagern von internen Informationen in andere Systeme oder das Nutzen von Datenbanken zur Darstellung von Informationen (z. B. Projekte oder Publikationen), ist dabei häufig eine strategische Entscheidung. Eventuell müssen Sie dafür die Unterstützung Ihrer Vorgesetzten einholen. Gerne unterstützen wir Sie dabei argumentativ.
| |
| − |
| |
| − | Bedenken Sie, wie Sie eine Abnahme der inhaltlichen Neugestaltung und der späteren technischen Darstellung in TYPO3 gestalten.
| |
| − | | |
| − | Wir möchten Sie ermutigen, die Umstellung zu nutzen, um auch langfristige Prozesse der Qualitätssicherung in Ihren Bereichen zu etablieren. Anregungen dazu finden Sie in unserem [[TYPO3 - Webseitenueberpruefung und Qualitaetssicherung|Leitfaden zur Webseitenüberprüfung und Qualitätssicherung]]. </bootstrap_panel>
| |
| − | <bootstrap_panel heading="Bestandsaufnahme (Content Audit)" >Verschaffen Sie sich einen Überblick über Ihre aktuellen Inhalte
| |
| − | | |
| − | *'''Inhalte sichten:''' Welche Seiten, Menüpunkte, Texte und Medien gibt es?
| |
| − | | |
| − | *'''Relevanz prüfen:''' Welche Inhalte werden noch benötigt? Welche sind noch aktuell? Welche müssen überarbeitet werden?
| |
| − | | |
| − | *'''Zielgruppe prüfen:''' Welche Inhalte richten sich eher nur an UPB-Mitglieder und können eventuell über andere Systeme wie z. B. KOMO, PANDA oder Teams abgebildet werden?
| |
| − | | |
| − | *'''Inhalte kategorisieren:''' Wie können Inhalte thematisch gruppiert werden? Welche Seiteninhalte können auf einer Seite zusammengeführt werden?
| |
| − | | |
| − | *'''Mehrfachnutzung überprüfen:''' Welche Inhalte können inzwischen über eine Datenbank abgebildet werden? Wo bieten sich Datensammlungen, Datensätze oder eine Mehrfachnutzung über Kategorien an?</bootstrap_panel>
| |
| − | <bootstrap_panel heading="Neues Design kennenlernen" >'''Neue Webelemente sichten''': Machen Sie sich mit den neuen zur Verfügung stehenden Web-Elementen vertraut.
| |
| − | | |
| − | *[https://www.uni-paderborn.de/cms/inhaltselemente/uebersicht Visuelle Übersicht aller Elemente]
| |
| − | | |
| − | *[https://www.uni-paderborn.de/cms/inhaltselemente/uebersicht/web-elemente Tabellarische Darstellung aller Elemente mit Link zur Hilfeseite ]
| |
| − | | |
| − | '''Beispiele sichten:''' Schauen Sie sich andere UPB-Webseiten an, um die neuen Design-Ansätze zu verstehen. Wir empfehlen beispielsweise die folgenden Seiten:
| |
| − | | |
| − | *Seiten für Arbeitsgruppen/Professuren
| |
| − | **[https://wiwi.uni-paderborn.de/dep2/bwl-insb-controlling-dr-ebert Schlanke Version ohne Unterseiten]
| |
| − | **[https://wiwi.uni-paderborn.de/dep3/winfo010 Umfangreiche Version mit Unterseiten für Team, Lehre, Forschung]
| |
| − | | |
| − | *Seiten für Bereiche (Institute/ Departments / Fakultäten / Fächer)
| |
| − | **[https://www.hni.uni-paderborn.de/ Heinz Nixdorf Institut ]
| |
| − | **[https://phoqs.uni-paderborn.de/ Phoqs]
| |
| − | **[https://wiwi.uni-paderborn.de/dep3 Department Wirtschaftsinformatik]
| |
| − | **[https://physik.uni-paderborn.de/ Physik Institut]
| |
| − | **[https://www.muwi-detmold-paderborn.de/ Musikwissenschaftlichen Seminar Detmold/Paderborn]
| |
| − | **[https://kw.uni-paderborn.de/fach-soziologie Fach Soziologie]
| |
| − | **[https://kw.uni-paderborn.de/ Fakultät für Kulturwissenschaften]
| |
| − | | |
| − | *Seiten für Projekte
| |
| − | **[https://trr318.uni-paderborn.de/ TRR 318 „Constructing Explainability”]
| |
| − | **[https://trr318.uni-paderborn.de/ TRR 142 "Maßgeschneiderte nicht lineare Photonik"]
| |
| − |
| |
| − | Als Redakteur*in finden Sie in TYPO3 im Ordner CMS sowohl einige dieser Beispielseiten als auch die Übersicht mit allen Web-Elementen. Sie können die Seiten kopieren und bei Ihnen als Vorschauseiten einfügen oder einzelne Inhaltselemente daraus kopieren und einfügen. Bitte beachten Sie, dass die kopierbaren Beispielseiten nicht fortlaufend aktualisiert wurden und es nicht mit den aktuellen Webseiten Übereinstimmen. Sie dienen Ihnen lediglich zur Orientierung, wie Sie die neuen Elemente anordnen und nutzen können.
| |
| − | </bootstrap_panel>
| |
| − | <bootstrap_panel heading="Neustrukturierung" >*'''Unterseiten und Seitenabschnitte festlegen:''' Zusammenhängende Themen werden auf einer Seite zusammengefasst und als Abschnitte dargestellt. Die Navigation erfolgt durch Sprungmarken.
| |
| − | | |
| − | *'''Inhaltselemente für Abschnitte auswählen:''' Nutzen Sie die neuen Web-Elemente um Ihre Inhalte visueller und aktivierender darzustellen. Suchen Sie für jeden Inhalt das passende Element aus. Dies erfordert manchmal ausprobieren. </bootstrap_panel>
| |
| − | <bootstrap_panel heading="Inhalte kürzen und verdichten " >*'''Texte formulieren:''' One-Pager nutzen kompakte, prägnante Texte. Manche Web-Elemente arbeiten auch mit Wortbegrenzungen, sodass Sie sich automatisch kurzfassen müssen. Vermeiden Sie Wiederholungen – in jedem Abschnitt sollte etwas Neues kommen. Wir empfehlen Ihnen auch den [https://www.uni-paderborn.de/universitaet/presse-kommunikation-marketing/brandportal/vorgaben-statute Redaktionellen Leitfaden der Stabstelle Presse, Kommunikation und Marketing] um Ihre Inhalte entsprechend der UPB-Standards zu präsentieren sowie das [https://zsb.uni-paderborn.de/studium-mit-beeintraechtigung/infoportal-barrierefreie-lehre Infoportal für Barrierefreie Lehre] zur Gestaltung barrierefreier Webseiten und Medien.
| |
| − | | |
| − | | |
| − | *'''Handlungsaufforderungen und visuelle Elemente einbauen:''' Fordern Sie Ihre Webseitenbesucher*innen mit sogenannten Call-to-Actions auf, aktiv zu werden (z. B. "Jetzt anmelden", "Jetzt kontaktieren") oder nutzen Sie Fotos und Videos, um Ihre Botschaften zu unterstreichen. Manche Elemente erfordern Call-to-Actions oder Videos/Fotos.
| |
| − | </bootstrap_panel>
| |
| − | </bootstrap_accordion>
| |
| − | | |
| − | ===Die technische Umstellung===
| |
| − | Wenn Sie sich nun mit der Umstellung Ihrer Webseiten in TYPO3 auseinandersetzen, empfehlen wir Ihnen die folgenden Schritte und die Grundprämisse zu berücksichtigen.
| |
| − | | |
| − | ====Grundprämissen====
| |
| − | <bootstrap_accordion>
| |
| − | <bootstrap_panel heading="URLs und Seiten IDs erhalten">Ziel sollte es sein, so viele Seiten-URLs und Seiten-IDs zu erhalten wie möglich. So bleiben Lesezeichen erhalten und die Links auf anderen Seiten, die auf Ihre Seiten verweisen, funktionieren weiterhin. Sie erreichen dies, indem Sie die alten Seiten erhalten, auf das neue Erscheinungsbild umstellen und mit neuen Inhalten befüllen. Insbesondere die Startseite von Bereichen sollte erhalten bleiben, da dies zudem den Vorteil hat, dass bestehende Berechtigungen erhalten bleiben, da sie mit der Startseite verknüpft sind.
| |
| − |
| |
| − |
| |
| − | Zudem konfiguriert das ZIM im Hintergrund auch einige Funktionalitäten auf Basis der Seiten-IDS. So ist zum Beispiel die ID der Kontaktseiten mit dem Kontaktsymbol oben im Header verknüpft. Wenn die vorhandenen Seiten und damit die IDs bestehen bleiben, funktionieren diese Funktionen auch weiterhin. </bootstrap_panel>
| |
| − | <bootstrap_panel heading="Vorschauseiten vereinfachen den Umstellungsprozess" >Wir empfehlen Ihnen mit Vorschauseiten zu arbeiten und die neuen Elemente bei der Umstellung auf die alten Seiten zu verschieben, nachdem Sie dort das Layout verändert haben. Mehr dazu in den folgenden Schritten. </bootstrap_panel>
| |
| − | </bootstrap_accordion>
| |
| − | | |
| − | ====Technische Schritte der Umstellung====
| |
| − | <bootstrap_accordion>
| |
| − | <bootstrap_panel heading="Inhalte sichern (optional)">Sichern Sie Ihre Texte und Tabellen in einem Dokument. Ihre Bilder bleiben – sofern Sie sie nicht löschen – weiterhin im TYPO3-Backend gespeichert. Auch Ihre Nachrichten bleiben – sofern Sie die entsprechenden Ordner nicht löschen – im TYPO3-Backend bestehen und Sie können Sie weiterhin über neue News-Elemente abbilden. </bootstrap_panel>
| |
| − | <bootstrap_panel heading="Vorschauseiten anlegen (optional)" >Legen Sie Vorschauseiten, die Ihre neue Struktur abbilden, unterhalb der bestehenden Seiten an. Falls für Sie passend, können Sie auch die Beispielseiten aus dem Ordner “CMS” als Vorschauseiten kopieren. Kennzeichnen Sie die Seiten im Backend über den Seitentitel als Vorschau. Deaktivieren Sie die Seiten und nutzen Sie die Vorschaufunktion, um sich Ihre Seiten anzusehen. Achtung: Die Vorschaufunktion funktioniert nur, wenn Sie in der richtigen Subdomain angemeldet sind. Wenn Ihre Seite also beispielsweise zu den Kulturwissenschaften gehört, melden Sie sich bitte unter kw.upb.de/typo3 ins TYPO3-System ein.
| |
| − |
| |
| − | Wenn Personen Ihre Vorschauseiten abnehmen sollen, stellen Sie über die Seiteneigenschaften ein, dass die Seiten nur im Uni-Netz sichtbar sind ([[TYPO3 - Seite auf Uninetz beschraenken|Anleitung für Beschränkung von Seiten auf Uninetz]])und aktivieren Sie für den Zeitraum der Abnahme die Seiten.
| |
| − |
| |
| − | Alternativ können Sie auch direkt in den “alten” Seiten arbeiten und mit Schritt 5 fortfahren.
| |
| − | | |
| − | Hinweis für Redakteur*innen, die übergeordnete Bereiche verwalten mit vielen Untereinheiten: Wenn Sie für Unterbereiche Vorschauseiten anlegen, legen Sie diese bitte immer unter den bestehenden Seiten an, damit die Rechte weiterhin bestehen. Parallelstrukturen sollten vermieden werden.</bootstrap_panel>
| |
| − | <bootstrap_panel heading="Vorschauseiten gestalten (optional)" >Setzen Sie nun Ihre Vorüberlegungen im Backend um und gestalten Sie Ihre neuen Seiten.
| |
| − |
| |
| − | Ein Hinweis zu Verlinkungen: Ziel ist es, final Ihre bestehenden Seiten weiter zu nutzen, und die neuen Elemente von den Vorschauseiten auf die bestehenden Seiten zu verschieben. Wenn Sie nun Web-Elemente mit internen Links anlegen, geben Sie deshalb am besten die IDs der bestehenden Seiten an [[TYPO3 - Interne Verlinkung|(Anleitung TYPO3 Interne Verlinkungen)]]. Wenn Sie auf die Vorschauseiten verlinken, müssen Sie sonst nach dem Verschieben der Elemente auf die bestehenden Seiten, alle Links erneut setzen. </bootstrap_panel>
| |
| − | <bootstrap_panel heading="Erscheinungsbild (Backend-Layout) umstellen" >Wenn Sie mit Ihrer Vorschauseite zufrieden sind, gehen Sie zu Ihrer “alten” Seiten und stellen dort das Erscheinungsbild um ([[#Schritt-für-Schritt Anleitung]]). Dadurch ändern sich einige Dinge:
| |
| − | | |
| − | *Die Aufteilung in Spalten verschwindet und damit auch die Box “Sie interessieren sich für”.
| |
| − | | |
| − | *Im Backend wird zwischen “Inhalt” und “verknüpften Inhaltselementen” unterschieden.
| |
| − | *Ihnen stehen neue Inhaltselemente zur Verfügung.
| |
| − | *Inhaltselemente aus dem Migrationsdesign erscheinen als "unbenutzte Elemente" im Backend.
| |
| − | </bootstrap_panel>
| |
| − | <bootstrap_panel heading="Seiteneigenschaften anpassen">Wenn der Standard nicht passend ist, bearbeiten Sie die Seiteneigenschaften wie [[TYPO3 - Footer bearbeiten | Footer]], [[TYPO3 - Headerbild bestimmen | Bühne]] und [[TYPO3 - Erstellen einer Seite | Titel]].
| |
| − | | |
| − | | |
| − | <span style='font-size:30px;'>⚠</span> Achtung: dies muss für die deutsche und die englische Seite jeweils getrennt gemacht werden.</bootstrap_panel>
| |
| − | <bootstrap_panel heading="Alte Elemente löschen/deaktivieren bzw. umstellen " >Damit Sie die neuen Elemente von der Vorschauseite auf die “alte” Seite verschieben können, schaffen Sie am besten Platz und löschen/deaktivieren Sie die alten Elemente. Nur zwei Element-Typen können auf das neue Design umgestellt werden ([[#Web-Elemente umstellen]]), sodass Sie theoretisch keine neuen Elemente anlegen müssten. Es handelt sich um:
| |
| − | | |
| − | *"UPB Content - Text" wird zu "Text und Medien"
| |
| − | | |
| − | *News-Plug-In
| |
| − |
| |
| − | | |
| − | <span style='font-size:30px;'>⚠</span> Achtung: auch dies muss jeweils für die deutsche und englische Seite getan werden oder Sie erledigen dies in der deutschen Sprache, löschen oder deaktivieren in Englisch und übersetzen dann neu. </bootstrap_panel>
| |
| − | <bootstrap_panel heading="Neue Inhaltselemente einfügen" >Wenn Sie mit Vorschauseiten gearbeitet haben, können Sie nun die Elemente von Ihren Vorschauseiten auf die “alten” Seiten verschieben ([[TYPO3 - Inhaltselemente verschieben|Anleitung Inhaltselemente verschieben]]). Wenn Sie nicht mit Vorschauseiten gearbeitet haben, legen Sie Elemente auf Ihren umgestellten “alten” Seiten neu an ([[TYPO3|TYPO3 Übersicht über alle Hilfe-Seiten]]).</bootstrap_panel>
| |
| − | <bootstrap_panel heading="Standard-Layout für neue Seiten definieren" >Wenn Sie alle Seiten umgestellt haben, das heißt alle Seiten nutzen eines der neuen Backend-Layouts, sollten Sie noch garantieren, dass neue Seiten, die Sie zukünftig anlegen, automatisch ebenfalls ein neues Layout nutzen. Gehen Sie dazu auf Ihrer Startseite in die Seiteneigenschaften und wählen Sie im Reiter "Erscheinungsbild" bei "Backend-Layout (für Unterseiten dieser Seite)" ein passendes Layout.</bootstrap_panel>
| |
| − | <bootstrap_panel heading="Deaktivierte Elemente und Vorschauseiten löschen" >Damit Ihr Backend schlank bleibt, löschen Sie deaktivierte Elemente, nicht mehr benötigte Seiten und Vorschauseiten nach der Umstellung.</bootstrap_panel>
| |
| − | <bootstrap_panel heading="Weiterleitungen und Verweise"
| |
| − | >Im Rahmen des Web-Relaunchs werden sich viele URLs ändern. Um sicherzustellen, dass Besucher*innen und Suchmaschinen weiterhin die richtigen Inhalte finden, sind Weiterleitungen und Verweise besonders wichtig. Sie verhindern fehlerhafte Links und tragen zur Benutzerfreundlichkeit sowie zur Suchmaschinenoptimierung bei.
| |
| − | | |
| − | '''Warum sind Weiterleitungen wichtig?'''
| |
| − | *Vermeidung von Fehlerseiten: Weiterleitungen verhindern, dass Besucher*innen auf „404“-Fehlerseiten landen.
| |
| − | *SEO-Vorteile: Weiterleitungen übertragen den „Link Juice“ auf die neue Seite.
| |
| − | *Benutzerfreundlichkeit: Besucher*innen werden automatisch an die richtige Stelle geleitet.
| |
| − | | |
| − | '''Wie entstehen URL-Änderungen?'''
| |
| − | | |
| − | URL-Änderungen können entstehen durch:
| |
| − | *Verschieben von Seiten im Seitenbaum
| |
| − | *Manuelle Änderung des URL-Slugs
| |
| − | *Zusammenführen von Inhalten auf weniger Seiten
| |
| − |
| |
| − | '''Wann lohnt sich eine Weiterleitung?'''
| |
| − | | |
| − | Je wichtiger eine Seite (gemessen an Besucherzahlen und externen Verlinkungen) war, desto dringender ist eine Weiterleitung. Nutzen Sie den UPB-Consultant, um die Frequentierung zu prüfen.
| |
| − | | |
| − | Übersicht über Ihre Möglichkeiten für Weiterleitungen und Verweise
| |
| | | | |
| | + | [[Datei:SCreenshot Typo3 Navigation.png|mini|''Übersicht über die Navigationselemente auf den UPB-Webseiten''|alternativtext=|zentriert|571x571px]] |
| | + | ====Übersicht über die Navigationselemente==== |
| | {| class="wikitable" | | {| class="wikitable" |
| | + | |+ |
| | + | !'''Navigationselement''' |
| | + | ! |
| | + | !'''Anwendung''' |
| | + | ! |
| | + | ! |
| | |- | | |- |
| − | ! Anwendungsfall !! Empfehlung !! Umsetzung
| + | | |
| | + | ===== [[TYPO3 - Burger Menue|Anleitung TYPO3 - Burgermenü]] ===== |
| | + | | |
| | + | | |
| | + | * Öffnet sich über das „Burger“-Symbol (drei Linien) |
| | + | * Dient der Navigation zwischen verschiedenen Seiten und Ebenen |
| | + | * Spiegelt in der Regel die Seitenhierarchie wider |
| | + | * Umfang und Struktur richten sich nach dem jeweiligen Bereich der Webseite |
| | + | * Wechselt meist bei Bereichswechsel, Einrichtung ist optional |
| | + | * Burger-Menüs werden auf Wunsch durch das ZIM für einen Bereich eingerichtet |
| | + | | |
| | + | | |
| | |- | | |- |
| − | | Seitenkonsolidierung || Alte Seiten werden durch neue zusammengefasste Seiten ersetzt. || Die alte Seite in eine Verweis-Seite umwandeln und als Ziel die neue Seite angeben. | + | | |
| | + | =====[[TYPO3 - Burger Menue|Sticky Navigation]]===== |
| | + | | |
| | + | | |
| | + | * Unterhalb der Bühne, bleibt beim Scrollen oben sichtbar (sticky) und sorgt so für dauerhafte Orientierung |
| | + | * Dient der Navigation innerhalb einer Seite (Sprung zu Inhaltsabschnitten) |
| | + | * Passt sich bei Seitenwechsel an den jeweiligen Inhalt an |
| | + | * Kann bei Bedarf ausgeblendet werden |
| | + | | |
| | + | | |
| | |- | | |- |
| − | | Seiten verschieben|| Seiten werden im Seitenbaum verschoben, sodass sich die URL ändert. || Am alten Ort eine Verweis-Seite mit dem alten Seitentitel anlegen, die auf die neue Seite verweist. | + | | |
| | + | ===== Bread-Crumb ===== |
| | + | | |
| | + | | |
| | + | * Befindet sich unterhalb der Sticky Navigation und oberhalb der Inhalte |
| | + | * Zeigt den aktuellen Pfad innerhalb der Webseitenstruktur an |
| | + | * Ermöglicht schnelle Rücksprünge zu übergeordneten Seiten |
| | + | * Gibt eine visuelle Standortrückmeldung |
| | + | * Wird automatisch erzeugt und passt sich an jede Seite an |
| | + | | |
| | + | | |
| | |- | | |- |
| − | | Navigation steuern|| Besucher*innen sollen beim Anklicken einer Navigationsseite auf eine Unterseite weitergeleitet werden. || Eine Verweis-Seite mit passendem Titel erstellen, die als Ziel die gewünschte Unterseite hat. Diesen Anwendungsfall finden Sie ausführlich in [[TYPO3 - Burgermenue | TYPO3 - Burgermenü]] beschrieben. | + | | |
| | + | ===== Suchfunktion ===== |
| | + | | |
| | + | | |
| | + | * Globale Suche über das Lupen-Symbol in der Kopfzeile erreichbar |
| | + | * Ermöglicht die direkte Suche nach Inhalten anhand von Stichworten |
| | + | * Ideal, wenn Nutzer*innen genau wissen, wonach sie suchen |
| | + | * Erzeugt automatische Ergebnisausgaben auf Basis der Google-Suche |
| | + | | |
| | + | | |
| | |- | | |- |
| − | | Sprungmarken|| Es soll auf einen Abschnitt einer internen Seite verlinkt werden || Nutzen Sie statt "Verweis" "Link zu einer externen URL" inklusive Sprungmarke („#“ im Link). | + | | |
| | + | ===== Kopfzeile ===== |
| | + | | |
| | + | | |
| | + | * Beinhaltet den Bereichsnamen als Link zur Startseite des jeweiligen Bereichs |
| | + | * Wechselt dynamisch je nach aktuellem Arbeitsbereich |
| | + | * Zielverlinkung wird vom ZIM konfiguriert |
| | + | | |
| | + | | |
| | |- | | |- |
| − | | Änderung des Bereichsnamens|| Der Name Ihres Bereichs ändert sich und die alten URLs sollen nicht mehr weiterverwendet werden || Schreiben Sie bitte eine E-Mail an [http://mailto:zim@uni-paderborn.de zim@uni-paderborn.de], damit wir Weiterleitungen für Sie einrichten und ein Matching vornehmen können. | + | | |
| | + | =====[[TYPO3 - Footer bearbeiten|Footer]]===== |
| | + | | |
| | + | | |
| | + | * Befindet sich am unteren Rand jeder Seite |
| | + | * Enthält dauerhaft relevante Links und Informationen (z. B. Kontakt, Impressum, Datenschutz) |
| | + | * Besteht aus einem universellen UPB-Footer sowie bereichsspezifischen Footer-Elementen |
| | + | * Bereichsspezifische Inhalte werden automatisch aus dem Profilmanager eingelesen |
| | + | * Weitere Funktionen wie z. B. Schnellzugriffe können über das ZIM konfiguriert werden. |
| | + | | |
| | + | | |
| | |} | | |} |
| | | | |
| − | '''Hinweis:''' Stellen Sie bei Bedarf in den Seiteneigenschaften ein, dass Verweisseiten nicht mehr in Menüs angezeigt wird.
| + | ==== Navigationsergänzende Elemente ==== |
| | + | Neben der primären Navigation unterstützen weitere Elemente die Benutzerführung auf der Webseite. Diese sind vor allem inhaltlicher oder verlinkender Natur und helfen dabei, Querverweise und gezielte Hinweise zu platzieren. |
| | + | {| class="wikitable" |
| | + | |+ |
| | + | ! |
| | + | ===== Teaser-Elemente ===== |
| | + | Anleitungen |
| | | | |
| − | </bootstrap_panel>
| + | [[TYPO3 - Teaser - Page Teaser|TYPO3 – Page Teaser]] |
| − | </bootstrap_accordion>
| |
| | | | |
| − | ==Leitfaden zur Überprüfung der Qualität Ihrer neuen Seite== | + | [[TYPO3 - Teaser - Themen Teaser Slider|TYPO3 – Topic Teaser]] |
| − | Um die Qualität Ihrer neuen Seiten zu gewährleisten, haben wir Ihnen einen [[TYPO3 - Webseitenueberpruefung und Qualitaetssicherung|Leitfaden für zukünftige Überprüfungen und zur Qualitätssicherung]] erstellt. Eine kontinuierliche Pflege stellt sicher, dass Ihre Inhalte für Nutzer*innen verständlich, aktuell und korrekt sind – und dass technische sowie gestalterische Standards eingehalten werden. Der Leitfaden enthält Tipps zur sprachlichen Inhaltsgestaltung, Barrierearmut, Navigation und zur Reduktion Ihres Pflegeaufwandes.
| + | ! |
| | + | ! |
| | + | * Werden im Inhaltsbereich platziert |
| | + | * Dienen dazu, auf weitere Webseiten oder Inhalte aufmerksam zu machen („teasern“) |
| | + | * Verschiedene Typen möglich (z. B. Page-Teaser, Topic-Teaser) |
| | + | * Können von Redakteur*innen flexibel eingesetzt werden |
| | + | ! |
| | + | |- |
| | + | ! |
| | + | ===== [[TYPO3 - Interne Verlinkung|Links]] ===== |
| | + | ! |
| | + | ! |
| | + | * Verweisen auf andere Seiten innerhalb oder außerhalb der Webseite |
| | + | * Erlauben Navigation durch Klicken |
| | + | * Sind häufig in Texten, Listen oder als Schaltflächen eingebaut |
| | + | * Verschiedene Linktypen vorhanden und frei einsetzbar |
| | + | ! |
| | + | |- |
| | | | |
| − | ==Kontakt und Hilfe==
| + | |} |
| − | Gerne unterstützen wir Sie beim Umstellungsprozess! Wir bitten Sie, uns Ihre Herausforderungen und Fragen per Mail an [mailto:zim@uni-paderborn.de zim@uni-paderborn.de] zukommen zu lassen. Wir werden für einen gewissen Zeitraum die Anfragen sammeln und je nach Umfang einzeln auf Sie zukommen oder Themen in gezielten Sprechstunden in größeren Gruppen adressieren.
| + | ==== Siehe auch: ==== |
| − | | |
| − | Bitte nutzen Sie auch unsere [[TYPO3|TYPO3 Hilfe-Seiten]].
| |
| − | | |
| − | ==Schritt-für-Schritt Anleitung== | |
| − | ===Erscheinungsbild umstellen===
| |
| − | Öffnen Sie in TYPO3 die Seite, die Sie umstellen möchten.
| |
| − | [[Datei:Screenshot Typo3-uebergangslayout-auf-endlaylout-umstellen-01.png|links|mini|ohne|450px|Seiteneigenschaften bearbeiten]]
| |
| − | <br>
| |
| − | *Klicken Sie in der linken Spalte auf "Seite"
| |
| − | *Klicken Sie auf die Seite im Seitenverzeichnis, für die Sie das Layout umstellen möchten
| |
| − | *Wählen Sie "Layout" aus
| |
| − | *Klicken Sie auf "Seiteneigenschaften bearbeiten".
| |
| − | <br clear="all">
| |
| − | | |
| − | | |
| − | [[Datei:Typo3-uebergangslayout-auf-endlaylout-umstellen-02.png|links|mini|ohne|450px|Seitenlayout auswählen]]
| |
| − | <br>
| |
| − | #Wechseln Sie auf den Tab '''"Erscheinungsbild"'''.
| |
| − | #Klappen Sie das Menü '''"Backend-Layout"''' auf.
| |
| − | #Wählen Sie ein passendes Layout aus - In diesem Beispiel eine Informationsseite, die nicht zu einem Institut oder einer Arbeitsgruppe gehört - Also '''"Inhaltsseite"'''.
| |
| − | #Klicken Sie auf '''"Speichern"'''.
| |
| − | *Mit "Schließen" verlassen Sie die aktuelle Ansicht.
| |
| − | <br clear="all">
| |
| − | | |
| − | | |
| − | [[Datei:Typo3-uebergangslayout-auf-endlaylout-umstellen-03.png|links|mini|ohne|450px|Warnhinweis: Unbenutzte Elemente]]
| |
| − | <br>
| |
| − | #Wir erhalten nun einen Warnhinweis, dass unbenutzte Elemente auf dieser Seite vorhanden sind. Hier erscheinen Inhalte, die auf der Webseite angezeigt werden - Die Darstellung kann aber inkorrekt sein.
| |
| − | <br clear="all">
| |
| − | | |
| − | ===Web-Elemente umstellen ===
| |
| − | | |
| − | ==== UPB Content - Text====
| |
| − | Das Web-Element ''"UPB Content - Text"''' kann durch die Änderung des Typs auf das neue Design umgestellt werden. Dabei bleibt jedoch nur der Text erhalten. Die Bilder gehen verloren und müssen erneut eingebunden werden. Merken Sie sich den Pfad der genutzten Bilder oder speichern Sie diese vorher separat zwischen.
| |
| − | | |
| − | [[Datei:Typo3-uebergangslayout-auf-endlaylout-umstellen-05.png|links|mini|ohne|450px|Inhaltselement bearbeiten]]
| |
| − | <br>
| |
| − | *Öffnen Sie das Inhaltselement über die Schaltfläche '''"bearbeiten"'''.
| |
| − | <br clear="all">
| |
| − | | |
| − | [[Datei:Typo3-uebergangslayout-auf-endlaylout-umstellen-04.png|links|mini|ohne|450px|Typ auswählen]]
| |
| − | <br>
| |
| − | *Prüfen Sie im Tab '''"Allgemein"''' , ob der korrekte '''"Typ"''' ausgewählt ist.
| |
| − | *Wählen Sie '''"Text und Medien"''' aus.
| |
| − | * Anschließend klicken Sie auf '''"Speichern"'''.
| |
| − | <br clear="all">
| |
| − | | |
| − | Nun sollte der Text korrekt dargestellt werden. Bilder müssen Sie anschließend neu einbinden.
| |
| − | | |
| − | ====Weitere Inhaltselemente umstellen====
| |
| − | Web-Elemente die nicht vom Typ ''"UPB Content - Text"'' sind, können nicht direkt umgestellt werden. Sie können jedoch Textinhalte in ein neues Inhaltselement kopieren.
| |
| − | | |
| − | [[Datei:Typo3-uebergangslayout-auf-endlaylout-umstellen-06.png|links|mini|ohne|450px|Inhaltselement bearbeiten]]
| |
| − | <br>
| |
| − | *Öffnen Sie dazu das unbenutzte Element über '''"Bearbeiten"'''.
| |
| − | *Kopieren Sie dort die Inhalte, die Sie weiterverwenden möchten.
| |
| − | <br clear="all">
| |
| − | | |
| − | *Sie können den kopierten Inhalt nun in vorhandene Elemente einfügen.
| |
| − | *Oder Sie legen über <code>+ Inhalt</code> ein neues Inhaltselement dafür an.
| |
| − | *Sie können sich auch die Sicherheitskopie im Web anzeigen lassen, dort Inhalte, z. B. Text oder Tabellen, markieren, dann die Inhalte in die Zwischenablage kopieren und in TYPO3 wieder einfügen. Bei den meisten Inhaltselementen ist ein solches Kopieren von Inhalten in die Zwischenablage möglich.
| |
| | | | |
| − | ==Siehe auch==
| + | * [[TYPO3 - Burger Menue|TYPO3 – Burger Menue]] |
| − | *[[TYPO3]] | + | * TYPO3 – Sticky Navigation (Anleitung folgt) |
| | + | * [[TYPO3 - Teaser - Page Teaser|TYPO3 – Page Teaser]] |
| | + | * [[TYPO3 - Teaser - Themen Teaser Slider|TYPO3 – Topic Teaser]] |
| | + | * [[TYPO3 - Interne Verlinkung|TYPO3 – Interne Verlinkungen]] |
