Konzept des neuen Webauftritts für die Tierhilfe Zodiac

Transkript

1 Konzept des neuen Webauftritts für die Tierhilfe Zodiac Projekt Entwicklung Verfasserin Projekttitel Letzte Änderung Sarina Häne St. Galler Tagblatt AG Internet Tagblatt Medien Fürstenlandstrasse St. Gallen Webauftritt Tierhilfe Zodiac

2 1 Inhaltsverzeichnis 1 Inhaltsverzeichnis Abbildungsverzeichnis Systemanforderungen Allgemein Entwicklungs- und Wartungsumgebung CMS Redaxo Sicherheitsanforderungen Test-Server Passwort Safe Design und Templates Struktur Struktur Detail Body Sidebar left Middle Wrapper Navigation Content Subnavigation Sidebar right Design Startseite Design Default Design Default (mit Subnavigation) Typographie Standard Überschrift h Überschrift h Text p Überschrift h Überschrift h a-tag Navigation Subnavigation Bilder Body Content Slider Artikel Sarina Häne Seite 2 von

3 5 Funktionen und Module Funktionen Navigation Subnavigation Kontaktformular Module WYSYWIG (statischer Content) Aufzählung Titel Bildeingabe PDF Upload Externer Link Interner Link Artikel einfügen Kategorieliste Blätternavigation Slider Hintergrundbild body Artikel oder SliceBlock woanders einbinden PHP Eingabe Weiterleitung Inhalte Navigation Bilder Body Content Slider Artikel PDF Dateien Texte Zusammenfassungen Kontaktformular Systemintegrationsplan Providerwechsel Ist-Zustand Soll-Zustand Vorgehensweise Website live schalten Redaxo und Datenbank kopieren Webmail Account erstellen Sachmittelbedarf Einmalige Kosten Sarina Häne Seite 3 von

4 8.2 Wiederkehrende Kosten Projektorganisation Internet Tagblatt Medien Auftraggeberin Projektleiterin Mitarbeitende Anhang Kündigungsformular Providerwechsel Sarina Häne Seite 4 von

5 2 Abbildungsverzeichnis Abbildung 1: Raster mit Pixel-Angaben... 8 Abbildung 2: Raster mit Benennungen... 8 Abbildung 3: Design Startseite...11 Abbildung 4: Design Default...11 Abbildung 5: Design Default (mit Subnavigation)...12 Abbildung 6: Auth-Code bighosting...26 Abbildung 7: Auth-Code hostpoint...26 Abbildung 8: Kündigungsformular Providerwechsel...30 Sarina Häne Seite 5 von

6 3 Systemanforderungen 3.1 Allgemein Die Website muss gut strukturiert und einfach zu pflegen sein. Sie muss responsive sein, das heisst, auch auf Mobile, Tablet und Smalltablet gut lesbar sein. 3.2 Entwicklungs- und Wartungsumgebung CMS Redaxo Die Website muss vom Kunden selbstständig betreut werden können. Daher wird die Website in ein CMS (Content Management System) eingebaut. Als CMS wird das kostenlose Redaxo gewählt. Der Kunde bekommt ein eigenes Login, mit dem er sich im Background einloggen und den Inhalt der Website vollständig überarbeiten kann. Bei Problemen kann sich der Kunde jederzeit an einen zuständigen Lernenden der Internet Tagblatt Medien wenden, welcher als Administrator Zugang im Backend-Bereich besitzt Administrator Der Administrator hat alle Rechte und kann alles verwalten. Der Administrator ist jeweils der zuständige Lernende der Internet Tagblatt Medien. Die Login- Daten müssen im Passwort-Safe eingetragen werden Benutzer01 Der Benutzer01 kann in der Ansicht die Struktur sehen und bearbeiten. Für alles andere hat er aus Sicherheitsgründen keine Rechte. Mit dem Benutzer01 kann sich die Kundin anmelden, um ihre Website selbstständig zu bearbeiten. Die Login-Daten müssen im Passwort-Safe eingetragen werden. Sarina Häne Seite 6 von

7 3.3 Sicherheitsanforderungen Test-Server Zur Sicherheit wird eine Kopie des gesamten Systems gemacht. Es gibt eine Testversion auf dem Test-Server von den Internet Tagblatt Medien, sowie auf hostpoint selbst. Test Server: Internet Tagblatt Medien Frontend URL: tierhilfe-zodiac.tagblattmedien.ch Background UrL: tierhilfe-zodiac.tagblattmedien.ch /redaxo Test-Server: hostpoint Frontend URL: test.tierhilfe-zodiac.ch Background UrL: test.tierhilfe-zodiac.ch /redaxo Passwort Safe Die Zugangsdaten werden alle im Password Safe der Internet Tagblatt Medien im Ordner "tierhilfe-zodiac" gespeichert. Sarina Häne Seite 7 von

8 4 Design und Templates 4.1 Struktur 2x x 32 Abbildung 1: Raster mit Pixel-Angaben sidebar left middle sidebar right wrapper main nav content sub nav onecole twocole threecole Abbildung 2: Raster mit Benennungen Sarina Häne Seite 8 von

9 4.2 Struktur Detail Body Breite: 1552px (1680px 2x32px 2x32px) Höhe: 892px Sidebar left Breite: 279px Höhe: automatisch Middle Breite: 994px Höhe: automatisch Wrapper Breite: 728px Höhe: automatisch Navigation Breite: 728px Höhe: 64px Sarina Häne Seite 9 von

10 4.2.6 Content Breite: 728px Höhe: automatisch Es gibt drei verschiedene Möglichkeiten (Klassen), Texte und Bilder im Content zu strukturieren: onecole Breite: 200px Höhe: automatisch twocole Breite: 432px Höhe: automatisch threecole Breite: 664px Höhe: automatisch Wird bzw. ein Bild in onecole und danach ein Text in twocole eingefügt, werden Text und Bild automatisch nebeneinander angezeigt Subnavigation Breite: 664px Höhe: 32px Sidebar right Breite: 279px Höhe: automatisch Sarina Häne Seite 10 von

11 4.3 Design Startseite Abbildung 3: Design Startseite 4.4 Design Default Abbildung 4: Design Default Sarina Häne Seite 11 von

12 4.5 Design Default (mit Subnavigation) Abbildung 5: Design Default (mit Subnavigation) Sarina Häne Seite 12 von

13 4.6 Typographie Standard Schriftart: Arial, Helvetica, sans-serif Schriftgrösse: 16px Schriftfarbe: #3c3c3c Schriftbreite: normal Überschrift h1 Schriftgrösse: 18px Schriftfarbe: #3c3c3c Schriftbreite: bold Überschrift h2 Schriftgrösse: 16px Schriftfarbe: #3c3c3c Schriftbreite: bold Text p Schriftgrösse: 16px Schriftfarbe: #3c3c3c Schriftbreite: normal Überschrift h3 Schriftgrösse: 16px Schriftfarbe: #ffffff Schriftbreite: bold Sarina Häne Seite 13 von

14 4.6.6 Überschrift h4 Schriftgrösse: 16px Schriftfarbe: #ffffff Schriftbreite: normal a-tag Schriftgrösse: 16px Schriftfarbe: #d64811 Schriftbreite: normal Navigation Schriftgrösse: 28px Schriftfarbe: #ffffff Schriftbreite: bold Aktiv Bild: Pfeilspitze Subnavigation Schriftgrösse: 16px Schriftfarbe: #3c3c3c (Hover: #d64811) Schriftbreite: normal Aktiv Schriftfarbe: #d64811 Sarina Häne Seite 14 von

15 4.7 Bilder Body Breite: 1680px Höhe: 892px Content Alle Bilder im Content-Bereich haben einen hellgrauen Rahmen. Rahmen Grösse: 1px Rahmen Art: solid Rahmen Farbe: #dcdcdc Breite: Passt sich der Spaltenanzahl (onecole / twocole / threecole) an. Höhe: automatisch Slider Breite: 215px Höhe: 190px Artikel Breite: 200px Höhe: 180px Sarina Häne Seite 15 von

16 5 Funktionen und Module 5.1 Funktionen Navigation Die Navigation verläuft vertikal. Sie muss automatisch die auf online gestellten Kategorienamen als Navigationspunkte anzeigen. Die nicht auf online gestellten Kategorien erscheinen nicht in der Navigation (wie Startseite). Die aktiven Punkte werden durch einen Pfeil gekennzeichnet Subnavigation Die Subnavigation verläuft vertikal. Sie muss automatisch die auf online gestellten Unterkategorienamen als Subnavigationspunkte anzeigen. Die nicht auf online gestellten Unterkategorien erscheinen nicht in der Subnavigation. Die Subnavigation taucht erst auf, wenn der Hauptnavigationspunkt angeklickt wurde und sich der Benutzer auf der entsprechenden Seite befindet. Der Benutzer gelangt automatisch auf den ersten Subnavigationspunkt, welcher als aktiv gekennzeichnet ist. Die Subnavigation bleibt immer zu sehen auch wenn weitere Unterpunkte (siehe Kategorieliste) angeklickt werden. Die aktiven Punkte werden durch die Farbe des a-tags gekennzeichnet. Ist keine Subnavigation vorhanden, rutscht der Inhalt nach oben und nimmt ihren Platz ein Kontaktformular Auf jeder Seite befindet sich in der linken Spalte (unter den Kontaktangaben) der Link "Kontakt". Klickt der Benutzer auf den Link, wird ein Kontaktformular aufgeklappt. Klickt er nochmals auf den Link, klappt das Formular wieder zu. Das Formular kann auf jeder Seite ausgefüllt und abgeschickt werden. Sarina Häne Seite 16 von

17 5.2 Module WYSYWIG (statischer Content) Der Text der Website kann per WYSYWIG eingefügt werden. Das garantiert eine einfache Bearbeitung des Textes. Der Kunde braucht dafür keinerlei HTML Kenntnisse. Dem Text muss eine Klasse zugewiesen werden (onecole, twocole, threecole) Aufzählung Ist in einem Text eine Aufzählung, kann das Modul "Aufzählung" ausgewählt werden. Das Modul kann für jeden Aufzählungspunkt einzeln ausgewählt werden. Es erstellt dann automatisch das Aufzählungszeichen vor dem Text Titel Die Titel können alle per Titel Modul eingefügt werden. Per Modul kann die gewünschte Überschrift gewählt werden (h1, h2, h3, h4) Bildeingabe Per Bildeingabe kann ein Bild hinzugefügt werden. Dem Bild muss eine Klasse zugewiesen werden (onecole, twocole, threecole). Dem Bild kann ein interner oder externer Link mit Linkbezeichnung hinzugefügt werden, muss aber nicht. Sarina Häne Seite 17 von

18 5.2.5 PDF Upload Das Modul bietet die Möglichkeit, ein PDF zum Download bereit zu stellen. Mit einer frei wählbaren Linkbezeichnung, auf die für den Download zu klicken ist. Der hover ist bereits festgelegt: PDF Download Externer Link Es kann ein externer Link mit einer frei wählbaren Linkbezeichnung eingefügt werden Interner Link Es kann ein interner Link mit einer frei wählbaren Linkbezeichnung eingefügt werden Artikel einfügen Um Artikel (Bild mit Text), wie bzw. die Produkte des Shops einfacher einfügen zu können, wird ein passendes Modul erstellt. So wird garantiert, dass die Artikel immer im gleichen Format erscheinen. Das Modul muss die Möglichkeit geben, ein Bild, ein Titel und 3 weitere Zeilen einzufügen. Dem Bild kann ein interner oder externer Link mit Linkbezeichnung hinzugefügt werden, muss aber nicht. Sarina Häne Seite 18 von

19 5.2.9 Kategorieliste Zur Verfügung steht eine Kategorieliste, die bei Bedarf (z.b. bei den Tipps) eingefügt werden kann. Die Kategorien werden dann alle ausgelesen und aufgelistet, auch wenn sie nicht auf online gestellt sind. Sie dürfen nicht auf online gestellt werden, da sie sonst in der Subnavigation angezeigt werden. Die Punkte der Kategorieliste haben dieselbe Farbe wie die a-tag Links Blätternavigation Da die Homepage kein Scrollen erlaubt (sie ist nur so gross, wie der Bildschirm) wird eine Blätternavigation eingebaut. Dies dient auch zur Übersichtlichkeit. Bei zu viel Inhalt (wie z.b. beim Shop) kann eine Blätterfunktion eingefügt werden, bei der mit Pfeilen vor und zurück geklickt werden kann. Es ist auch möglich direkt auf die gewünschte Seite zu klicken. Der Benutzer sieht jederzeit, wie viele Seiten es hat und auf welcher Seite er sich befindet. Die aktiven Punkte werden durch die Farbe des a-tags gekennzeichnet Slider Auf der Startseite befindet sich ein Slider. Es werden mehrere Artikel in einer automatischen Abfolge angezeigt. Es muss die Möglichkeit geben, pro Artikel ein Bild, ein Titel und einen kurzen Text per Modul hinzuzufügen. Es müssen mindestens 3 Artikel in dem Slider eingebaut werden können. Für jedes Bild kann ein interner oder externer Link mit Linkbezeichnung hinzugefügt werden, muss aber nicht. Sarina Häne Seite 19 von

20 Hintergrundbild body Per Modul kann für jede Seite ein eigenes Hintergrundbild ausgewählt werden Artikel oder SliceBlock woanders einbinden Um einige Blöcke, die auf mehreren Seiten gleich sind nicht mehrmals eingeben zu müssen, kann das SliceBlock Modul verwendet werden. Mit dem Modul ist es möglich, einen Block oder Artikel zu slicen, das heisst, erneut auf einer anderen Seite darzustellen. Der grosse Vorteil: Wird z.b. das Hintergrundbild der Hunde-Tipps-Seite geändert, übernimmt es dies gleich auf alle Hunde-Tipps-Seiten PHP Eingabe Es ist möglich, PHP Code direkt in die Seite einzubinden. Nötig z.b. beim Slider oder Kontaktformular Weiterleitung Per Weiterleitung kann von einer Seite direkt auf eine andere Seite weitergeleitet werden, ohne dass der Benutzer etwas davon mit bekommt. Es gibt die Möglichkeit eine Seite intern oder extern weiterzuleiten. Beispiel für intern: Der Hauptnavigationspunkt "Tiere" wird direkt auf den ersten Subnavigationspunkt "Tierheim Tellen" weitergeleitet. Sarina Häne Seite 20 von

21 6 Inhalte 6.1 Navigation TIERE Tierheim Tellen Unsere Tiere TIPPS Hunde Katzen Kaninchen Ratten SPENDE VEREIN Über uns Team SHOP Hundezubehör LINKS Sarina Häne Seite 21 von

22 6.2 Bilder Die Bilder für das Grundgerüst findet man unter folgendem Link: W:\itmed\austausch\sarina\tierhilfe-zodiac\04. Realisierung\grundgeruest\img Alle anderen Bilder findet man unter folgendem Link: W:\itmed\austausch\sarina\tierhilfe-zodiac\04. Realisierung\grundgeruest\files Body Die Hintergrundbilder werden als Backgrounds per Modul im Body eingefügt. Jeder Hauptnavigationspunkt, sowie jeder Subnavigationspunkt hat ein anderes Hintergrundbild. Das Hintergrundbild sollte wenn möglich zum Inhalt passen. Das heisst, wird etwas über Hunde geschrieben, erscheint als Hintergrundbild ein Bild eines Hundes. Die Hintergrundbilder müssen im vornherein auf die gegebene Grösse zugeschnitten werden Content Die Bilder des Contents müssen nicht zugeschnitten werden, da sie sich automatisch der Spaltenanzahl anpassen. Es sollte jedoch darauf geachtet werden, dass keine Qualitätsverluste entstehen Slider Die Bilder, für den Slider müssen im vornherein auf die gegebene Grösse zugeschnitten werden. Die Bilder des Shops werden alle (auch die, die momentan nicht im Slider sind) von Anfang an für den Slider zugeschnitten Artikel Die Bilder, welche per "Artikel"-Modul eingefügt werden (z.b. Shop-Bilder), müssen von vornherein darauf zugeschnitten werden. Sarina Häne Seite 22 von

23 6.3 PDF Dateien Ist bei den Tipps zu viel Text vorhanden, wird keine Blätterfunktion eingefügt, da das Lesen am PC für den Benutzer sehr anstrengend sein kann. Umso mehr Text, desto anstrengender. Deshalb wird bei zu viel Text eine Zusammenfassung des Textes erstellt. Der gesamte Artikel kann dann als PDF-Datei heruntergeladen werden. Durch klicken auf den Link: Ganzer Artikel als PDF downloaden Ist nicht zu viel Text vorhanden, kann der Benutzer trotzdem den Artikel als PDF-Datei downloaden. Mit klicken auf den Link: Artikel als PDF downloaden Die PDF-Dateien sind im Querformat und müssen beim Öffnen automatisch im Querformat angezeigt werden. Sie wurden bereits fertig erstellt. Man findet sie unter folgendem Link: W:\itmed\austausch\sarina\tierhilfe-zodiac\04. Realisierung\grundgeruest\files\tipps Sarina Häne Seite 23 von

24 6.4 Texte Für jede einzelne Seite der Website wurde eine PSD-Datei erstellt. Dort sind alle Inhalte eingefügt, gesammelt und von der alten Website, sowie von E- Mails, usw. übernommen. Die PSD-Dateien findet man unter folgendem Link: W:\itmed\austausch\sarina\tierhilfe-zodiac\02. Analyse\loesungsvorschlaege\01_praesentation\img\designvorschlaege Die Inhalte wurden alle bereits von den PSD-Dateien auf die Website übertragen. Die textlichen Inhalte wurden jedoch noch nicht definitiv mit der Kundin besprochen, sie werden noch von der Kundin begutachtet. Änderungen müssen von den Projektarbeitenden angepasst werden Zusammenfassungen Alle Texte der Tipps, welche zu lang für den Bildschirm sind, müssen zusammengefasst werden. Domenica hat bereits zwei Texte zusammengefasst, aber noch nicht auf der Website geändert. Sie befinden sich unter folgendem Link: W:\itmed\austausch\sarina\tierhilfe-zodiac\Zusammenfassungen Die restlichen Zusammenfassungen müssen noch geschrieben werden. Das heisst, alle Texte auf allen möglichen Bildschirmgrössen kontrollieren. Erscheint der Scroll Balken, muss der Text zusammengefasst werden Kontaktformular Die Empfänger-Mail-Adresse des Kontaktformulars muss vor dem Live- Schalten geändert werden auf: Achtung: Die Mail-Adresse muss bei zwei Kontaktformularen geändert werden. Beim Formular, dass sich auf jeder Seite befindet, sowie beim Formular, dass auf den Mobile-Seiten geöffnet werden kann. Sarina Häne Seite 24 von

25 7 Systemintegrationsplan 7.1 Providerwechsel Die Website wird momentan auf bighosting gehostet. Die Kundin möchte jedoch den Anbieter aufgrund von schlechten Kundenbetreuungen wechseln. Der neue Anbieter wird hostpoint. Die Domain bleibt bestehen, sie muss also vom alten Server, auf den neuen gezügelt werden. Hostpoint bietet mehre Server zur Auswahl. Die Kundin hat sich für den Standard Server entschieden Ist-Zustand Anbieter: bighosting Domain: tierhilfe-zodiac.ch Webmail Account: Soll-Zustand Anbieter: hostpoint Server: Standard Server Domain: tierhilfe-zodiac.ch Webmail Account: Vorgehensweise Als erstes wird bei bighosting gekündet, dann bei hostpoint bestellt. Die Kundin muss sich bewusst sein, dass für eine kurze Zeitspanne weder die alte, noch die neue Website online sein wird Kündigung bei bighosting Per Kündigungsformular wird bei bighosting der Providerwechsel angekündigt (siehe Anhang: Kündigungsformular Providerwechsel). Sarina Häne Seite 25 von

26 Das originale Formular ist unter folgendem Link zu finden: W:\itmed\austausch\sarina\tierhilfe-zodiac\03. Konzept Die Kündigung erfolgt durch die Kundin. Die Kundin füllt das Formular aus und schickt es an bighosting. Die Kundin leitet uns einen Auth-Code weiter, welchen sie von bighosting erhalten sollte. Die Kundin ist darüber informiert, dass dies zusätzliche Kosten mit sich zieht. Abbildung 6: Auth-Code bighosting Bestellung bei hostpoint Die Bestellung bei bighosting erfolgt durch den Projektarbeitenden. Der Projektarbeitende erhält den Auth-Code von der Kundin. Mit dem Auth- Code kann die Domain vom alten Anbieter bighosting zum neuen Anbieter hostpoint transferiert werden. Die Kundin ist darüber informiert, dass dies zusätzliche Kosten mit sich zieht. Abbildung 7: Auth-Code hostpoint Die Bestellung (sowie Transferierung) erfolgt unter folgendem Link: Sarina Häne Seite 26 von

27 7.2 Website live schalten Die neue Website nach Absprache mit der Kundin online geschaltet. Eine Sicherung der alten Website wird nicht erstellt Redaxo und Datenbank kopieren Redaxo und Datenbank können vom Test-Server der Internet Tagblatt Medien kopiert werden. Die Informatik der Tagblatt Medien steht bei Fragen zur Verfügung. Die Zugangsdaten des Redaxo und der Datenbank von Tagblatt Medien befinden sich alle im Passwort Safe. Zur Sicherheit wird die neue Website auf hostpoint nicht nur als Prod-Version, sondern auch als Test-Version auf den Server geladen: Test-Server: hostpoint Frontend URL: test.tierhilfe-zodiac.ch Background UrL: test.tierhilfe-zodiac.ch /redaxo Prod-Server: hostpoint Frontend URL: Background UrL: /redaxo Webmail Account erstellen Auf dem neuen Anbieter muss ein Webmail Account erstellt werden, mit der Mail-Adresse Achtung: Zuerst sicherstellen, dass bei bighosting alles gelöscht ist. Danach die Empfänger-Mail-Adresse den beiden Kontaktformularen anpassen. Sarina Häne Seite 27 von

28 8 Sachmittelbedarf 8.1 Einmalige Kosten Sachmittel Menge Kosten CMS Redaxo - Version CHF 8.2 Wiederkehrende Kosten Sachmittel Menge Kosten Hostpoint - Standard Server CHF / pro Monat Sarina Häne Seite 28 von

29 9 Projektorganisation 9.1 Internet Tagblatt Medien Auftraggeberin Name: Huijser Vorname: Daniela Mail Privat: Mail Geschäft: Tel.: Projektleiterin Name: Häne Vorname: Sarina Mail: Tel.: Mitarbeitende Name: Horlacher Vorname: Joel Mail: Tel.: Sarina Häne Seite 29 von

30 10 Anhang 10.1 Kündigungsformular Providerwechsel Abbildung 8: Kündigungsformular Providerwechsel Sarina Häne Seite 30 von