Online Firmenpräsentation mit strukturiertem Blog, Galerie und Eventkalender

Transkript

1 Relaunch pdc Website Online Firmenpräsentation mit strukturiertem Blog, Galerie und Eventkalender Datum: 04. April 2012 Version: 1.3 Ersteller: Empfänger: Mirko Stanic Stefan Isliker, Pierre Keller, Morris Meyer Dokumentenhistorie Datum Beschreibung und Notizen Version Erstellung durch Mirko Aktualisierung nach Sitzung vom Aktualisierung nach telefonischem Feedback von Stefan Aktualisierung durch Mirko 1.3

2 Inhaltsverzeichnis Zielsetzung Neues Design Menüführung der Website Erweiterungen, Funktionen und Besonderheiten Datenstruktur Designstruktur Organisation Projektplan Kontaktinformationen

3 Zielsetzung Die neue Website soll die Kernwerte der PDC in den Vordergrund Rücken; Technologie, Prozesse, Qualität, Handwerk / Produzent. Daneben soll der Benutzer erkennen, dass PDC die Benchmark im CRM-Bereich ist. Neben einer technisch modernen Website ist auch das neue Design frisch und übersichtlich. Von heute vier (oder teilweise mehr) Informationsebenen im Seitenbaum bestehen in Zukunft nur deren zwei. Somit sollen alle Inhalte der Website einfacher zugänglich sein und so vom Besucher auch mit wenigen Klicks erreicht werden können. Wo möglich und sinnvoll werden für die Beschreibung der einzelnen Bereiche kurze Videos vorgesehen werden. Das heutige CMS wird durch ein modernes Open Source Produkt ersetzt. Die Website wird im Hausinternen Rechenzentrum bei pdc gehostet.

4 Neues Design Im neuen Design ist das Menü oberhalb des Sliders. Die Kacheln werden als Designelement beibehalten. Der Slider hat keine Punkte welche aufzeigen wieviele Slides existieren, sondern Pfeile nach links und rechts. Für den Bereich Consulting und pdc Gruppe wird je ein neues Themenbild (Slider) erstellt (analog CRM im Slider rechts). Die Blöcke vor dem Footer Bereich (nachfolgend Promobox genannt) kippen entlang ihrem Äquator nach hinten weg, und bringen so den nächsten Eintrag zum Vorschein. Die Wertschöpfungsbereiche werden im Block Rechts (siehe Designstruktur) positioniert. Die Listen werden zur besseren Übersicht in einem Accordeon zusammengeffast (siehe als Beispiel: jquery/accordion.html)

5 Menüführung der Website Home Startseite mit Bilderpräsentation in grossem Slider. Abschliessende Blöcke mit kurzen Einführungstexten zu den verschiedenen Objekten. Diese bleiben auf der ganzen Website als unterstes Element sichtbar. Die Beschreibung der Funktionalitäten der Blöcke unter Funktionen. CRM & Marketing Technology CRM & Marketing Management Information Technology & Data Base Drei statische Texte zum Thema, an drei verschiedenen Punkten im Hauptmenu. Weiterführende Links zu Hauptthemen (Info Biz Blog, Cases, Kunden) Im Design werden pro Seite eine Tabelle mit Verweisen zu weiterführenden Themen vorgesehen, von da aus führen Links zu den einzelnen Bereichen der Website (Blog, Cases,...) pdc Gruppe & Informationen Statischer Text zu den Firma pdc (Philosophie, Kompetenz und Organisation). Untermenüs für Bereiche Info, Kunden, Events, Galerie, Adressen / Kontakt, Team, Jobs, Partner und Cases (Link zur Kategorie im Blog). Blog Der Blog ist über Kategorien aufgeteilt in die Bereiche Social und Biz und soll dem Besucher einen Einblick über die Kompetenzen und Interessen der Firma liefern, sowie einen Einblick in das soziale Leben der Firma.

6 Erweiterungen, Funktionen und Besonderheiten (1/3) Eventkalender mit Anmeldeformular Die Website bietet die Möglichkeit Events als eigene Struktur zu erfassen. Die Besucher der Website können sich bei gewählten Events über das Anmeldeformular registrieren. Jedem Event kann optional ein eigenes Formular zugeordnet werden. Die Formulare werden über das Drupal Modul Forms konfiguriert. Sind in dem Formular Pflichtfelder definiert, müssen diese bei der Anmeldung zum Event ausgefüllt werden. Das Formular wird an eine vorgegebene Adresse gesendet. Social Box Es wird die Social-Box mit Facebook Share und Comment, Twitter, und Google Plus als Block integriert. (siehe Beispiel am unteren Seitenende: blog.html). Diese kann optional bei Events, Blogs und Galerien aktiviert werden. Twitter und Google Plus werden zwar bereits integriert, jedoch vorerst auf inaktiv gesetzt. Xing bietet zurzeit keine Schnittschtelle, (siehe: Auf eine Integration wird vorerst verzichtet. Dies wird wieder geprüft nachdem bei Xing die technischen Voraussetzungen gegeben sind. Sprachen Die komplette Website wird in den Sprachen Deutsch und Englisch entwickelt. PDF Template Blogeinträge und Events können als PDF-Datei geöffnet und heruntergeladen werden. Das Design ist nach Vorgaben CI/CD von pdc definiert (Logo, Schriftart und Grösse).

7 Erweiterungen, Funktionen und Besonderheiten (2/3) Strukturierter Blog Um den Blog übersichtlicher zu organisieren, sowie in verschiedenen Themenbereiche einzuordnen können (pflichteingabe) die Blogeinträge in eine oder mehrere Kategorien eingeteilt werden (Biz, Social, Cases). Bei der Anzeige des Blogs im Frontend kann nach den Kategorien gefiltert werden um nur die gewünschten Themen anzuzeigen. Dynamische Blöcke in der Fusszeile Die Blöcke am Ende der Website zeigen jeweils einen Artikel aus den Bereichen Biz, Cases und Events. Diese werden entsprechend dem Datum der Erstellung (neueste zuerst), oder Eventdatum (nächster zuerst) angezeigt. Dabei werden zuerst alle Artikel angezeigt bei welchen das Attribut Highlight aktiviert ist, danach diejenigen ohne. Benutzerberechtigungen Vorgesehen sind die folgenden Benutzerberechtigungen: Administrator - Drupal Administrator, alle Berechtigungen Content Manager - Kann statische Seiten, Blogs, Media, Galerien und Events erstellen, bearbeiten und administrieren, hat jedoch keinen Zugriff auf Menüs oder Module, im Text als Ersteller. Public - Besucher der Website, kann Inhalte ansehen und sich für Events anmelden

8 Erweiterungen, Funktionen und Besonderheiten (3/3) Block Event Es wird ein Modul vorbereitet welches die nächsten Events in Chronologischer Reihenfolge anzeigt. Dieses kann an beliebigen Stellen innerhalb der Website in den Bereichen Block Rechts, Block Links oder in den Promoboxen angezeigt werden. Die Konfiguration wird vom Administrator vorgenommen. Block Event Promo Wie Block Event, jedoch werden in diesem Inhaltsblock nur die Highlight Events berücksichtigt.

9 Datenstruktur Form Individual configuration trough form module of drupal Create Save Edit Delete Publish Event Title-Textfield Date / Time Start Date / Time End Highlight - Checkbox Text Media - Image Google Map Link Form Social Box - Checkbox (Yes / No)) Create Preview Save Edit Delete Publish Blog Title-Textfield Category - Checkbox (Biz, Social, Cases) Date of creation Highlight - Checkbox Text - Textfield Media - Linked to one or more media Social Box - Checkbox (Yes / No) Create Preview Save Edit Delete Publish Media Title Media (Picture, Video, Audio Vimeo, Youtube, PDF) Create Save Edit Delete Publish Slider Media - Images (1 or more) Create Save Edit Delete Publish Gallery Title - Textfield Description - Text Date - Date field Media - Linked to one or more media Social Box - Checkbox (Yes / No) Create Save Edit Delete Publish

10 Designstruktur (1/7 - Landing Page) Header Menue Search Language Choice pdc Logo Main Menue Slider with Text-Slogan Block 1 Right Block 1 Left Inhalt / Content Block 2 Right Block 2 Left Promobox Left Promobox MIddle Promobox Right Footer

11 Designstruktur (2/7 - Blog Liste) Header Menue Search Language Choice pdc Logo Hauptmenü Überschrift Einführung Blog Block 1 Right parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Filter Select Box Blog Artikel mit Bild Geschrieben von Content Admin Name on Fr., :54 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Kategorie: Biz Blog Cases Weiterlesen Block 2 Right Älterer Blog Artikel ohne Bild Geschrieben von Content Admin Name on Fr., :54 parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Kategorie: Biz Blog Social Blog Weiterlesen «erster vorheriger nächster letzter» Promobox Links Promobox Mitte Promobox Rechts Fusszeile

12 Designstruktur (3/7 - Blog ohne Bild und Media) Header Menue Search Language Choice pdc Logo Hauptmenü Älterer Blog Artikel ohne Bild und Media Geschrieben von Content Admin Name on Fr., :54 Print PDF Block 1 Right parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Kategorie: Biz Blog Social Blog Block 2 Right Facebook Comment Box Promobox Links Promobox Mitte Promobox Rechts Fusszeile

13 Designstruktur (4/7 - Blog mit Bild und Media) Header Menue Search Language Choice pdc Logo Hauptmenü Blog Artikel mit Bild, Media und Facebook Kommentaren Geschrieben von Content Admin Name on Fr., :54 Print PDF Block 1 Right Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. parturient montes, nascetur ridiculus mus. Donec quam felis Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis Kategorie: Biz Blog Social Blog Media: Bild 1 Bild 2 Block 2 Right Facebook Comment Box... sowie Promoboxen und Fusszeile

14 Designstruktur (5/7 - Media Galerie) Header Menue Search Language Choice pdc Logo Hauptmenü Galerie mit Bild, Video und Facebook Kommentaren Block 1 Right Geschrieben von Content Admin Name on Fr., :54 parturient montes, nascetur ridiculus mus. Donec quam felis Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis Bild 1 Bild 2 Bild 3 Bild 5 Bild 6 Block 2 Right Facebook Comment Box

15 Designstruktur (6/7 - Event Liste) Header Menue Search Language Choice pdc Logo Hauptmenü Überschrift Einführung Events Block 1 Right parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Nächster Event mit Bild Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Adresse: Kongresszentrum, Strasse 44, 8000 Zürich Datum und Uhrzeit: Freitag, :00 Weiterlesen Späterer Event ohne Bild parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Block 2 Right Adresse: Golfpark, Strasse 44, 8000 Zürich Weiterlesen «erster vorheriger nächster letzter» Promobox Links Promobox Mitte Promobox Rechts Fusszeile

16 Designstruktur (7/7 - Event mit Bild, Media, Google Map) Header Menue Search Language Choice pdc Logo Hauptmenü Event mit Bild, Media, Google Map und Facebook Komentaren Print PDF Block 1 Right Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. parturient montes, nascetur ridiculus mus. Donec quam felis Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis Datum und Uhrzeit: Freitag, :00 Media: Bild 1 Google Map Bild 2 Auf Google Map ansehen Adresse: Kongresszentrum Strasse 44, 8000 Zürich Bild 3 Video 2 Bild 4 Block 2 Right Anmeldung Facebook Comment Box

17 Organisation Der Auftraggeber ist die pdc Marketing + Information Technology AG in Wettingen, vertreten durch den Geschäftsführer Stefan Isliker. Der Auftragnehmer ist die Pixelklinik GmbH in Zürich, vertreten durch Morris Meyer. Verantwortlich für das Projekt als ausführender Projektleiter ist Mirko Stanic.

18 Projektplan Pixelklinik pdc KW 14 / April Ausarbeiten der Designs anhand der Designstruktur (Morris) Einrichtung Testserver (Pierre) KW 15 und 16 / April Entwicklung der Website, Umsetzung des Designs, Eingabe von Inhalten nach Vorgabe. Test (Mirko) KW 17 / April Support und Schulung (Mirko) Test durch pdc KW 18 / 30.April-05.Mai Korrektur von möglichen Fehlern Endabnahme KW 19 / Mai Reserve und Produktivschaltung der Website Nach Absprache Bündelung der weiteren Wünsche und Neuerungen zu einem neuen Release. Planung zweite Phase des Projekts.

19 Kontaktinformationen Mirko mirko.stanic@le-dot.com Morris info@pixelklinik.ch Pierre pkeller@pdc-online.com Stephan sisliker@pdc-online.com