Erstellen einer Website im Kundenauftrag unter Integration eines Content Management Systems

Transkript

1 Dokumentation zur betrieblichen Projektarbeit für die Abschlussprüfung zum Fachinformatiker für Anwendungsentwicklung Winter 2003 bei der IHK Südlicher Oberrhein, Freiburg Erstellen einer Website im Kundenauftrag unter Integration eines Content Management Systems Vorgelegt von Markus Bauer Ausbildungsbetrieb: Siemens Business Services, Freiburg Praktikumsbetrieb: PROLINK internet communications GmbH, Merzhauser Str. 76, Freiburg Projektverantwortlicher in der Firma: Markus Bärtle

2 Inhalt Inhaltsverzeichnis Inhaltsverzeichnis 1 1. Vorwort 2 2. Projektkurzbeschreibung PROJEKTUMFELD PROJEKTANLASS PROJEKTUMFANG MUSSKRITERIEN PROJEKTMITTEL HARDWARE SOFTWARE ZEITPLANUNG ASPEKTE DER REALISIERUNG 7 3. Projektphasen KONZEPTION / LAYOUT SCREENDESIGN HTML CODE ERSTELLEN UMSETZUNG IN WEBEDITION / ANLEGEN DER TEMPLATES Qualitätssicherung Fazit Anhang KUNDENDOKUMENTATION / BENUTZERHANDBUCH BEILIEGENDE CD Quellennachweis 16 Projektdokumentation_mBauer.doc Markus Bauer, Freiburg,

3 Vorwort Projektumfeld 1. Vorwort Zentrales Dokument der vorliegenden Dokumentation bildet das Benutzerhandbuch für die Handhabung von webedition für die Firma RudolphConsulting. Es soll auf leicht verständliche Weise den Redakteur durch das Programm begleiten und bei Unklarheiten Abhilfe schaffen. Auf die Auflistung von Quellcode wurde weitestgehend bewusst verzichtet, da dieser das Dokument nur unnötig aufblähen würde und im schwarz/weiss Druck zudem schlecht zu lesen ist. Wo es sinnvoll und nötig erschien, wurde auf den Quelltext auf der beiliegenden CD verwiesen. Dort findet sich neben einer Offline-version der Website und den Quelltexten der erstellten Vorlagen ein lauffähiger Apache Webserver, mit dessen Hilfe die Site auch im Edit-Modus aufgerufen und bearbeitet werden kann. 2. Projektkurzbeschreibung 2.1. Projektumfeld Fa. PROLINK internet communications GmbH Zentrales Betätigungsfeld von PROLINK im Gründungsjahr 1996 stellte der Bereich Internet Providing dar: die Internetanbindung von Unternehmensnetzwerken mit all den damit zusammenhängenden Dienstleistungen wie die Installation und Betreuung von Hard- und Softwarekomponenten (Server, Firewall, Antivirus). Die Erstellung und Programmierung von Internetseiten (Web-Producing) entwickelte sich parallel und konnte 1998 zum eigenständigen Bereich ausgebaut werden. Die aktuellen Kernkompetenzen der Firma sind die Dienstleistung am Kunden und bedarfsorientierte Lösungen für die beiden Geschäftsbereiche Web- Producing und IT-Networking. Projektdokumentation_mBauer.doc Markus Bauer, Freiburg,

4 Projektkurzbeschreibung Projektanlass IT-Networking Consulting: Aufnahme des Ist-Zustandes und Beurteilung der Sicherheitspolitik Firewall- und Antivirus-Lösungen zum Schutz des lokalen Firmennetzes (LAN) und der Filialen (VPN) Konfiguration und Installation von Internet- und Intranet-Servern Wartungs- und Supportaufträge Web-Hosting / Server-Housing Web-Producing Entwerfen und Erstellen von Internet-Präsentationen Programmierung von Online-Datenbanken, Redaktionssystemen Integration und Ausbau von Content Management Systemen Entwicklung von E-Shops Web-Marketing (Optimierung von Web-Seiten und Anmeldung für Suchmaschinen) PROLINK gehört zu den ersten fünf offiziellen Partnern der Karlsruher webedition GmbH mit dem gleichnamigen Content Management System, das erfolgreich als Redaktionssystem eingesetzt wird Projektanlass Um zusätzliches Kundenpotential für sich zu erschließen, wünscht der Kunde, die Firma RudolphConslting die Konzeption, Gestaltung und Realisierung einer Website. Dabei möchte Herr Rudolph die Inhalte der Seiten eigenständig aktualisieren können, ohne sich HTML-Kenntnisse aneignen zu müssen. Projektdokumentation_mBauer.doc Markus Bauer, Freiburg,

5 Projektkurzbeschreibung Projektumfang Dafür soll ein PHP-basiertes, MySQL-gestütztes Content Management System (CMS) der Firma webedition eingesetzt werden. Es werden Vorlagen (Templates) der verschiedenen Seitenkategorien programmiert, über die der Kunde später die gewünschten Inhalte als Redakteur über einen WYSIWYG (What You See Is What You Get)-Editor einpflegen kann Projektumfang Der Umfang der Site umfasst voraussichtlich 12 Einzelseiten. Das heisst es werden ca. 4-6 Templates, für die verschiedenen Seitentypen zu erstellen sein Musskriterien Allgemeines / Rahmenbedingungen Die Seiten werden auf Browserkompatibität getestet, dies betrifft Windows PC mit Netscape Navigator ab Version 6 und Microsoft Internet Explorer ab Version 5.5 Es wird eine Lizenz der webedition Basisversion bestellt, Herr Rudolph wird als Lizenzeigentümer genannt Die Website wird für die Monitorauflösung 800x600 optimiert. Bei höheren Auflösungen ist die Website oben links angeordnet Zeitplan Der Zeitplan ist für beide Seiten nicht verbindlich, jedoch sind beide Parteien bestrebt, diesen einzuhalten: Online-Gang Mitte Oktober 2003 Projektdokumentation_mBauer.doc Markus Bauer, Freiburg,

6 Projektkurzbeschreibung Projektumfang Layout Für die Inhalte werden serifenlose Schriftarten verwendet, als erste Wahl die Systemschrift "Arial". Für die Seiten-Titel, die zur Orientierung der Besucher dient, wird die Serifenschrift Times verwendet Der Hintergrund soll sich möglichst an die Briefpapierstruktur anlehnen Die Pfeile als Gestaltungselement sinnvoll einsetzen (kein "Weiter" als Eindruck hinterlassen) Links sollen gut erkennbar sein (blaue Schrift, unterstrichen), außer im Menü. Auf gute Kontraste im Menü links achten Farbtöne entsprechend des CI verwenden (wie Imageflyer, Briefpapier, Visitenkarte etc.) Website optisch abgrenzen von der leeren Fläche, die rechts bei hohen Auflösungen sichtbar wird Eine Info- und Kontaktbox (farblicher Hintergrund), die auf jeder Seite erscheint, gestalten Der blaue Menübalken soll mit dem Inhalt der Seiten von der Höhe her bündig abschließen Das Firmenlogo ist auf jeden Seiten oben mittig angeordnet. Templates Der Kunde erhält neben den erforderlichen Templates für die Inhaltsseiten ein Menütemplate, damit er selbst Menüpunkte der 1. Ordnung anlegen, löschen und sortieren kann. Die Menüpunkte der 2. Ordnung werden innerhalb der Inhaltsseiten integriert Die Listen werden variabel bündig oder versetzt angeordnet, mit Aufzählungszeichen (Grafik) Pflichtfelder im Kontakt-Formular sind Name und -adresse Die vom Kunden bereits gelieferten Inhalte werden in die Website eingepflegt Projektdokumentation_mBauer.doc Markus Bauer, Freiburg,

7 Projektkurzbeschreibung Projektmittel 2.4. Projektmittel Für die Projektdurchführung wurden folgende Hard- und Softwarekomponenten zur Verfügung gestellt: Hardware Midi Tower, IBM 256 MB Hauptspeicher 8 GB Festplattenspeicher CD-ROM Laufwerk Monitor Hitachi, 17" Drucker HP Laserjet Software Microsoft Windows 2000 Professional (Service Pack 4) Microsoft Office 2000 Professional Adobe Photoshop 6 Adobe Acrobat 5 Macromedia Homesite 5 Cute FTP Pro 5.0 WebEdition Version auf einem Webserver 2.5. Zeitplanung Die gesamte Projektdurchführung sollte in einem zeitlichen Rahmen von 70 Stunden zu realisieren sein. Das Projekt wurde in folgende Phasen gegliedert: Projektdokumentation_mBauer.doc Markus Bauer, Freiburg,

8 Projektkurzbeschreibung Aspekte der Realisierung Konzeption: Erstellen eines Seitenkonzeptes und Erarbeiten eines grundlegenden Layouts gemeinsam mit dem Kunden Entwurf eines Screendesigns zur Vorlage beim Kunden 2 Std. 8 Std. Realisierung: Umsetzen des Designs, Erstellen eines HTML-Gerüstes und Anlegen des Cascading Style Sheets Anlegen der Templates für die verschiedenen Seitentypen Integrieren von individuellen Anpassungen Übergabe an den Kunden mit Einweisung 10 Std. 18 Std. 12 Std. 1 Std. Dokumentation: Erstellen des Benutzerhandbuches Erstellen des Projektberichtes 10 Std. 10 Std. Die Zeitplanung bezieht sich auf eine Person, bei Bedarf Inanspruchnahme von Hilfe eines erfahrenen Kollegen sowie regelmäßigen Absprachen mit dem Projektbetreuer nach der Umsetzung einzelner Projektphasen Aspekte der Realisierung Zur Realisierung des Projektes fiel die Entscheidung auf das datenbankbasierte CMS von webedition, da es sehr preiswert ist und vom Leistungsumfang in der Grundversion alle für die Realisierung dieses Projektes benötigten Möglichkeiten bietet. Darüber hinaus lässt es sich bei Bedarf modular erweitern bzw. lässt sich für individuelle Anforderungen durch PHP-Programmierung modifizieren. Projektdokumentation_mBauer.doc Markus Bauer, Freiburg,

9 Projektphasen Konzeption / Layout Es bietet die Möglichkeit (wie fast alle CMS), ohne Installation einer Software auf einem Clientrechner, einfach mit dem auf jedem Rechner installierten Browser (Netscape Navigator, Internet Explorer usw.) Änderungen der Inhalte einer Website vorzunehmen. Es sind somit keinerlei FTP- oder HTML- Kenntnisse nötig, um die Seiten auf dem Server zu modifizieren und es kann nur noch in Bereichen geändert werden, die dafür freigegeben sind. Neue Seiten können nur über sogenannte Vorlagen erstellt werden. Es wird also ein strenger Layoutrahmen vorgegeben, der selbst nicht mehr geändert werden kann. 3. Projektphasen 3.1. Konzeption / Layout In einem gemeinsamen Gespräch mit dem Kunden Herrn Rudolf werden das Seitenkonzept und das Layout der Website besprochen. Herr Rudolph hat bereits einige Entwürfe skizziert, welche hinsichtlich Umsetzung und Machbarkeit diskutiert werden. Die Webpräsenz soll schlussendlich 12 Inhaltsseiten, sowie zwei Statusseiten für erfolgreiches bzw. fehlerhaftes Versenden des Kontaktformulars umfassen. Die erarbeiteten Kriterien werden schriftlich fixiert (Musskriterien ) Screendesign Als erster Schritt wird mit Adobe Photoshop ein Entwurf (Screendesign) für das Layout der Startseite und einer Inhaltsseite für den Kunden erstellt. Dabei soll das bereits vom Kunden auf dem Briefpapier und bei Informationsbroschüren verwendete Corporate Design, sowie die im persönlichen Gespräch vereinbarten Bedingungen, möglichst exakt umgesetzt werden. Projektdokumentation_mBauer.doc Markus Bauer, Freiburg,

10 Projektphasen Screendesign Abb. 01 Erster Entwurf Dem Kunden werden ein Entwurf einer Inhaltsseite und der Startseite zur Auswahl gestellt. Der erste Entwurf wird prinzipiell akzeptiert, der Kunde wünscht sich jedoch eine stärkere Integration des Logos auf der Seite. Nach Vorlage mehrerer Vorschläge zur besseren Einbindung des Logos wird die folgende Variante zur Umsetzung freigegeben: Projektdokumentation_mBauer.doc Markus Bauer, Freiburg,

11 Projektphasen HTML Code erstellen Abb. 02 Optimierter Entwurf Als schwierig bei der Erstellung des Layouts erwiesen sich anfänglich fehlende bzw. nur lückenhafte Kenntnisse des verwendeten Grafikprogramms "Photoshop 6". Durch Unterweisungen eines erfahrenen Kollegen konnte dies jedoch kompensiert werden, so dass diese Phase relativ reibungslos umgesetzt werden konnte HTML Code erstellen Nach der Freigabe des Designs durch den Kunden soll in der nächsten Phase das erstellte Layout in HTML-Code umgesetzt werden. Dazu wird das Gerüst einer Inhaltsseite erstellt. Codeteile die auf allen Seiten enthalten sind wie z.b. das Menü oder die Kopfzeile werden dabei durch Kommentare gekennzeichnet. Sie sollen später ausgelagert und mittels einer include-anweisung in die Inhaltsseiten eingebunden werden, um so beispielsweise bei Menüerweiterungen nur eine Seite bearbeiten zu müssen. Parallel dazu wird die Stylesheet-Datei erstellt, wo an zentraler Stelle die Layoutangaben für die HTML-Seiten definiert werden. Projektdokumentation_mBauer.doc Markus Bauer, Freiburg,

12 Projektphasen Umsetzung in WebEdition / Anlegen der Templates Die HTML-Prototypen und die CSS-Datei liegen auf der CD im Verzeichnis "html_prototyp" Umsetzung in WebEdition / Anlegen der Templates Bei der Umsetzung des HTML-Gerüstes wurde darauf geachtet, dass dem Benutzer/Redakteur lediglich jene Formatierungsmöglichkeiten zur Hand gegeben werden, die zur Darstellung des gewünschten Designs notwendig sind. Auf die Möglichkeit z.b. die Schriftfarbe oder Schriftgröße zu verändern wurde bewusst verzichtet, um das angestrebte Layout nicht zu zerstören. Die Steuerung der Inhalte geschieht dabei über sogenannte webedition-tags, kurz we:tags. Dies ist eine an XML angelehnte Syntax, welche Funktionen in eine Funktionsbibliothek auslagert und beim Seitenaufruf integriert. So lassen sich Textbereiche, Übersichtsseiten, Listen, Grafiken usw. mit der Eingabe von we:tags realisieren. Um die vom Kunden gewünschten versetzten Listen zu realisieren und die Möglichkeit den Abstand der Listenpunkte zu definieren zu geben, muss eine PHP-Funktion erstellt werden, die den seitlichen "margin" also den Abstand zum linken Rand automatisch mit jedem hinzugefügten Listeneintrag erhöht: <?php function erhoehemargin($off) { global $g_counter; if($off) { $g_counter=0; } else Projektdokumentation_mBauer.doc Markus Bauer, Freiburg,

13 Projektphasen Umsetzung in WebEdition / Anlegen der Templates { global $g_versatz; global $g_margin; if($g_counter==0) { $g_margin=0; $g_counter++; } else { $g_margin+=$g_versatz; } } return $g_margin; }?> Andere Wünsche des Kunden, wie zum Beispiel das frei wählbare Anzeigen einer Informationsbox im unteren Bereich der Seite konnten durch die "bordeigenen" Kontrollstrukturen von webedition sehr gut umgesetzt werden. Ein nicht unerheblicher Teil der Zeit musste in dieser Projektphase darauf verwendet werden sich mit den recht umfangreichen Möglichkeiten, die das CMS dem Entwickler bietet auseinanderzusetzen. Da sich jedoch die individuellen Anpassungen in einem kleineren Rahmen hielten als zunächst angenommen, konnte das Projekt dennoch im angestrebten Zeitrahmen fertiggestellt werden. Der Quellcode der webedition Vorlagen-Dateien befindet sich auf der CD im Ordner "webedition_templates". Projektdokumentation_mBauer.doc Markus Bauer, Freiburg,

14 Qualitätssicherung Umsetzung in WebEdition / Anlegen der Templates 4. Qualitätssicherung Die Qualitätssicherung eines Produktes spielt eine wichtige Rolle bei der Erstellung von Webseiten und der Entwicklung von Anwendungen. Sie spiegelt sich in der Kundenzufriedenheit wieder, da dieser für seine Investition ein Produkt erwartet, welches fehlerfrei funktioniert. Dazu wurden alle Seiten auf richtige Darstellung des Layouts überprüft. Dies fand auf verschiedenen Browsern und Betriebssystemen, wie z.b. unter Windows 98 und 2000 mit Internet Explorer 5.5 und 6.0 sowie Netscape Navigator Version 6 und 7 statt. W3C, das World Wide Web Consortium bietet im Internet einen Verifizierungsservice für HTML-Seiten an. Dieser wurde genutzt um zu überprüfen, ob die Seiten den Spezifikationen der W3C Organisation entsprechen. 5. Fazit Bei der abschließenden Einführung des Kunden in die Handhabung des CMS in Verbindung mit seiner Webpräsenz zeigte sich Herr Rudolph sehr zufrieden mit dem Produkt und hatte auch keine Schwierigkeiten mit der Handhabung der Dokumente in webedition. Das Benutzerhandbuch, was ihm zuvor als PDF- Datei übermittelt wurde, fand seine volle Zustimmung und ließ keine Fragen offen. Eine Übergabe im herkömmlichen Sinne fand nicht statt, da sich Herr Rudolph zum Zeitpunkt der Fertigstellung noch nicht für einen Webhoster entschieden hatte und die Site somit noch nicht portiert werden konnte. Projektdokumentation_mBauer.doc Markus Bauer, Freiburg,

15 Anhang Kundendokumentation / Benutzerhandbuch 6. Anhang 6.1. Kundendokumentation / Benutzerhandbuch Anmerkung zum Benutzerhandbuch: Das Handbuch wurde von mir mit einer PROLINK Dokumentenvorlage erstellt und liegt hier in der Version vor, wie sie auch dem Kunden überreicht wurde. Daher die abweichende Formatierung vom Projektbericht Beiliegende CD Um den Apache-Webserver zu starten und die Website mit Hilfe des webedition-cms bearbeiten zu können muss erst eine Kopie auf der lokalen Festplatte erstellt werden. Dazu gehen Sie bitte wie folgt vor: Kopieren Sie das Verzeichnis "minixampp" in das Stammverzeichnis Ihrer lokalen Festplatte z.b. C:\minixampp (jedes andere Verzeichnis ist auch möglich). Durch das kopieren von CD ist das Verzeichnis unter Umständen schreibgeschützt: Entfernen Sie bitte den Schreibschutz über den Eigenschaften-Dialog für diese Verzeichnis und alle Unterverzeichnisse und Dateien. Führen Sie im Verzeichnis "minixampp" die Datei "setup_xampp.bat" aus und folgen Sie den Anweisungen in der sich öffnenden Eingabeaufforderung (1 eingeben und Return-Taste drücken). Im Folgenden werden lediglich die Pfade der Konfigurations-Dateien des Apache-Servers, der MySQL-Datenbank etc. angepasst. Es werden keine Veränderungen an Ihrem System vorgenommen! Wenn dieser Projektdokumentation_mBauer.doc Markus Bauer, Freiburg,

16 Anhang Beiliegende CD Vorgang beendet ist, folgen Sie der Anweisung und schließen Sie die Eingabeaufforderung durch betätigen der Return-Taste. Nach erfolgreicher Installation führen Sie nun nacheinander die Dateien "apache_start.bat" und "mysql_start.bat" aus. Die beiden sich öffnenden Command-Fenster müssen während des Betriebes geöffnet bleiben! Eine eventuell bereits bestehende Installation eines Webservers bleibt hiervon unberührt, sie sollte aber unbedingt vorher beendet/gestoppt werden! Probleme können auftreten, falls eine Personal Firewall auf Ihrem System installiert ist: Apache und MySQL versuchen auf TCP Ports zuzugreifen (es wird jedoch keine Internetverbindung benötigt!) Falls die Firewall den Zugriff unterbindet bricht der Startvorgang ab. In diesem Falle erlauben Sie bitte den ausgehenden Verkehr für die beiden Applikationen, oder deaktivieren Sie die Firewall kurz während des Startvorganges und starten Sie erneut. Nach erfolgtem Start können sie in Ihrem Internet Browser oder eingeben und es sollte eine Startseite erscheinen. Über das Menü auf der linken Seite können Sie nun, die erstellte Webpräsenz ansehen und im Edit-Modus testen. Dort finden Sie auch das Benutzerhandbuch und die Dokumentation als PDF- Dateien. Zugang erhalten Sie über Benutzername: "test", Passwort: "test" Beenden können Sie den Apache-Server durch ausführen der Datei "mysql_stop.bat" und Schließen des verbleibenden (Apache) Command- Fensters. Projektdokumentation_mBauer.doc Markus Bauer, Freiburg,

17 Quellennachweis Beiliegende CD Um die Installation restlos von Ihrem System zu entfernen löschen Sie einfach das von CD kopierte Verzeichnis. Ein Inhaltsverzeichnis und eine Anleitung befindet sich auch in der readme- Datei auf der CD. Dank und Lob an dieser Stelle an die Entwickler von Apachefriends, die diese "Instantversion" unter kostenlos und frei verfügbar anbieten. 7. Quellennachweis Folgende Quellen habe ich während des Projektes und für die Dokumentation genutzt: Das webedition Handbuch Internet: webedition Online Hilfe: webedition Forum: webedition Entwickler Knowledgebase: Projektdokumentation_mBauer.doc Markus Bauer, Freiburg,