Praktikum EWA Abschlussbericht. von Klaus Schwarzkopf und Florian Friedrich

Transkript

1 Praktikum EWA Abschlussbericht von Klaus Schwarzkopf und Florian Friedrich

2 Inhaltsverzeichnis Zieldefinition Html Cascading Style Sheets JavaScript/DOM-Scripting Web-Server, Web-Client http php Barrierefreiheit Abschlussbericht Lösungsweg Klinik index.php UTF CSS....6 Konfiguration Sprache Design Kontakt Cookies Beschreibung der Ergebnisse Startseite Login Ärzte Sprache/Englisch Kontakt Datei hochladen Login Bewertung des Resultats Perspektiven und Ausblick Design Backend Benutzerverwaltung Übersetzung CMS

3 Russ Meyer Klinik von SF Design - Zieldefinition Zieldefinition Erstellung eines E-Health-Portals für das Praktikum der Lehrveranstaltung Entwicklung webbasierter Anwendungen. Anbieter des Portals ist eine (fiktive) Privatklinik, die sich auf ein bestimmtes medizinisches Kerngebiet konzentriert und deren Ärzte aufgrund ihres Könnens internationales Ansehen genießen. Das Portal soll mehrsprachig angelegt sein und verschiedene EServices anbieten. Html Die Webseite soll XHTML 1.0 Strict//EN sein. Dazu wird das E-Health-Portal mit der Hilfe des (X)HTML-Validator des World Wide Web Consortium (W3C) überprüft. Dieser Validator ist unter der Adresse zu finden. Cascading Style Sheets Zur Beschreibung der präsentationsspezifischen Aspekte des E-Health-Portals sollen die Möglichkeiten der Cascading Style Sheets benutzt werden. Das Ziel ist die Darstellung der komplette Webseite zentral und Datei übergreifend ändern zu können. Für die Druckansicht wird ein separate CSS-Datei erstellt. Die Cascading Style Sheets sollen Valide sein. Der entsprechende CSS-Validator ist unter zu finden. JavaScript/DOM-Scripting Erstellung eines HTML-Formular zur Patientenanmeldung. Kontrollierung mit Hilfe von JavaScript die eingegebenen Werte (z. B. müssen Pflichtfelder zur Person des Patienten ausgefüllt sein, eine Verdachtsdiagnose angegeben sein, eine gültige -Adresse angegeben werden etc.) Der Benutzer wird nach fehlerhaften Eingaben auf den Fehler aufmerksam gemacht und aufgefordert, den Fehler zu verbessern. Realisieren Sie diese Eigenschaften in adäquater Ansprache des Benutzers (Wortwahl!) unter Zugriff auf das Document Object Model. Web-Server, Web-Client Setzen Sie sich mit Ihrem lokalen Web-Server (z. B. Apache im XAMPP-Paket) auseinander führen Sie die folgenden Anpassungen durch: index.html und welcome.htmlsollen als Startseite möglich sein. Für (Fehler-)Meldungen (z.b.: angegebene Seite existiert nicht auf Ihrem Server) soll eine von Ihnen eingerichtete Seite erscheinen; bauen Sie einen Verweis ein, der Sie auf die Seite zurückführt, auf der Sie vorher waren. Der Apache Web-Server kennt Server Side Includes (SSI); richten Sie diese Möglichkeit ein und demonstrieren Sie den Einsatz an einem kleinen Beispiel (sinnvollerweise im Rahmen Ihres E-Health-Portals). Nutzen Sie die Apache-Dokumentation. Richten Sie localhost als Startseite ein. Wenn der Server Cookies sendet, soll ein Hinweis erscheinen. Erstellen Sie ein Testschema für eine sinnvolle Auswahl von Browsern, testen Sie Ihr E-Health-Portal Seite 3 / 12

4 Russ Meyer Klinik von SF Design - Zieldefinition und dokumentieren Sie die Ergebnisse. http Verschiedene Aufgaben zu http Protokoll und dem Programm Telnet. php Erweiterung des E-Health-Portal mit php um folgende Funktionalitäten: Persönliche Begrüßung des Besuchers der Website (verwenden Sie ein Cookie). Login für die bislang allgemein zugängliche Nutzung der Patientenanmeldung und für den Zugriff auf einen Materialpool (closed user group). Upload-Möglichkeit für Bild- und Filmdateien im Rahmen der Patientenanmeldung. Skizzieren Sie, wie die HTML/PHP-Dateien miteinander verknüpft sind. Barrierefreiheit Überprüfen Sie Ihr E-Health-Portal anhand der aktuellen Kriterien der Barrierefreie Informationstechnik-Verordnung (BITV). Die BITV ergänzt das am 1. Mai 2002 in Kraft getretene Behindertengleichstellungsgesetz (BGG) und legt fest, dass alle öffentlich zugänglichen Webangebote des Bundes spätestens bis zum 31. Dezember 2005 barrierefrei sein müssen. Dokumentieren Sie die Ergebnisse Ihrer Überprüfung und stellen Sie eine darauf basierende ToDoListe zusammen. Nehmen Sie diese in der Rubrik Ausblick in Ihre Projektmappe auf. Abschlussbericht Überprüfen Sie Ihre Praktikumsdokumentation und arbeiten Sie diese zu einem Abschlussdokument aus. Sie können sich an folgendem Gliederungsvorschlag orientieren: Titelblatt Inhaltsverzeichnis Beschreibung von Ausgangssituation und Zieldefinition Beschreibung des Lösungswegs mit Begründungen für Entwurfsentscheidungen Beschreibung der Ergebnisse Bewertung des Resultats Perspektiven und Ausblick Illustrieren Sie die Dokumentation sinnvoll mit Entwurfsskizzen aus dem Praktikumsverlauf und mit Screenshots des Endproduktes. Der Umfang der Projektdokumentation sollte zwischen 10 und 15 Seitenliegen. Erzeugen Sie ein Abschlussdokument im PDF-Format, das 1.5 MB nicht überschreiten sollte. Seite 4 / 12

5 Russ Meyer Klinik von SF Design - Lösungsweg Lösungsweg Klinik Die Seite ist unter zu finden. Diese Seite ist durch eine.htaccess und.htpasswd geschützt und der Benutzername und das Passwort ist test. Wir haben uns entschieden, das E-Health-Portal über eine spezial Klinik für Brustvergrösserungen und andere kosmetische Eingriffe zu erstellen. Der Name(Russ Meyer) der Klinik stammt von einem Regisseur der durch billig produzierte Sexfilme mit Frauen, die große Brüste haben, bekannt wurde. Weiter Informationen sind bei Wikipedia unter zu finden. Der von uns erfundene Firmennamen lautet SF Design, abgeleitet von unseren Namen Klaus Schwarzkopf und Florian Friedrich. Da unsere Kunden größtenteils Frauen sind, erklärt sich damit auch die rosa und lila Farbwahl. index.php Das Portal besteht hauptsächlich aus der einen Datei index.php. In ihr sind die verschiedenen div-tags für das Layout und Navigation. Dadurch wird eine komplette Layoutänderung einfacher, weil nur die index.php bearbeitet werden muss. UTF-8 Um späteren Problemen(zum Beispiel die Erzeugung von PDFs mit Sonderzeichen) aus dem Weg zu gehen, wurde die Seite komplett in UTF-8 geschrieben und wird auch als UFT-8 durch einen ApacheServer ausgeliefert. Seite 5 / 12

6 Russ Meyer Klinik von SF Design - Lösungsweg CSS Das Styling wurde in eigene Dateien ausgelagert,um schnell und seitenübergreifend das Styling ändern zu können. Es wurde auch ein extra Style für die Druckausgabe erstellt, damit auf der ausgedruckten Seite die Navigation nicht erscheint, sondern nur derinhalt und zusätzlich die Adresse. Die Cascading Style Sheets sind Valide. Konfiguration Die Konfiguration des Portals wird in der Datei config.php vorgenommen. Hier wird global die Datenbankdaten eingegebenen und sonstige Konfiguration durchgeführt. Sprache Die Sprache der Menüs und der Navigation wird in der entsprechenden Sprachdatei zum Beispiel de.php für Deutsch im Verzeichnis lang angelegt. Der sprachabhängige Content wird in der Datenbank oder in der Datei, die in der Datenbank angegeben ist. Die meisten Sonderseiten sind in dem Verzeichnis extern_page gespeichert. Design Das Design wurde einfach gehalten. Die Menüs wurde wie von vielen Internet-Benutzern gewohnt angeordnet. Das rechte Menü wird für die verschiedene Operationen und die Startseite genutzt. Die Organisatorischen Seiten wie Login/ Logout, Impressum, Sprache und Kontakt sind im oberen Menü angeordnet. Kontakt Die Kontaktdaten sind auf jeder Seite gut sichtbar angebracht, damit ein Surfer sie nicht lange in irgendwelchen versteckten Seiten suchen muss. Außerdem werden die Kontaktdaten beim drucken auf die letzte Seite geschrieben. Cookies Auf Cookies wurde wegen dem Datenschutz und meiner persönlichen Meinung gegen Cookies nicht umgesetzt. Die Eingabefelder werden in den meisten Browsern sowieso gespeichert und das Formular wird beim nächsten Besuch automatisch ausgefüllt. Seite 6 / 12

7 Russ Meyer Klinik von SF Design - Beschreibung der Ergebnisse Beschreibung der Ergebnisse Startseite Auf der Startseite kann man zu den verschiedenen Seiten navigieren. Login Mit dem geeigneten Benutzername und Passwort gelangt man in den geschützten Bereich.Hier ist aber im Moment nur das Dateien hoch laden realisiert. Siehe Ausblick Seite 7 / 12

8 Russ Meyer Klinik von SF Design - Beschreibung der Ergebnisse Ärzte Das Ärzteteam ist von Emergency Room ab geworben. Das Ärztebild wurde mit dem Programm KimageMapEditor in die verschiedene Bereiche eingeteilt. Mit Hilfe von JavaScript und dem onmousover und onmouseout die Porträts angezeigt. Sprache/Englisch Die Homepage ist für die Verwendung von Englisch vorbereitet. Links oben gibt es einen Link, der die Sprache umschaltet. Das Menü ist schon umgestellt auf die englische Sprache, aber es existiert noch keine Seite dafür. Siehe Ausblick Seite 8 / 12

9 Russ Meyer Klinik von SF Design - Beschreibung der Ergebnisse Kontakt Im Kontaktformular sind die Pflicht angaben hell rosa eingefärbt. Alle Pflicht angaben werden mit JavaScript überprüft. Datei hoch laden Dateien können im Backend hoch geladen werden. Seite 9 / 12

10 Russ Meyer Klinik von SF Design - Beschreibung der Ergebnisse Bilddateien werden nach dem Hoch laden noch einmal angezeigt. Login Die Benutzerdaten werden in der MySql Datenbank gespeichert. Das Passwort wird als MD5 Hashwert in ihr abgelegt. Nachdem Login ist man im Backend und Logout erscheint oben rechts. Der aktuelle Benutzer wird in der Session mitgeführt. Seite 10 / 12

11 Russ Meyer Klinik von SF Design - Bewertung des Resultats Bewertung des Resultats Die gestellten Aufgaben wurden bis auf Cookies adäquat umgesetzt.die Technik dahinter ist eine prima Grundlage, um darauf aufzubauen und die Seite zu erweitern. Da wir keine guten Designer sind, konnten wir das Seitenlayout nicht professionell umsetzten. Insgesamt ist uns aber die Seite gelungen. Seite 11 / 12

12 Russ Meyer Klinik von SF Design - Perspektiven und Ausblick Perspektiven und Ausblick Design Das Design muss dringend überarbeitet werden. Leider können wir dies nicht, dazu brächte man einen richtigen Designer. Die Seite ist leicht erweiterbar und so können zum Beispiel schnell weitere Sprache unterstützt werden. Backend Das Backend sollte noch weiter ausgebaut werden. Benutzerverwaltung Im Backend sollte es eine Benutzerverwaltung geben, mit der man User anlegen, löschen, bearbeiten und Gruppen zuordnen kann.die Gruppen müssen vorher auch noch festgelegt werden z.b. Admin, Ärzte und Patienten und in die Datenbank eingetragen werden. Die einzelnen Seiten, die angezeigt werden, könnten auch durch Gruppenrichtlinien gesteuert werden. Übersetzung Im Backend könnte es des weiteren ein Frontend für die Übersetzung der deutschen Seiten geben. Die übersetzten Seiten werden dann wieder in der Datenbank gespeichert. CMS Wir könnten uns auch noch vorstellen, das die Seiten mit einem HTML WYSIWYG Editor online erstellt und bearbeitet werden können. Seite 12 / 12