Web-Portal f¨ur einen Fussballvereinmedia.tuwien.ac.at › fileadmin › user_upload ›...

Web-Portal für einen Fussballverein

Vorgelegt an der Technischen Universität WienInstitut für Gestaltungs- und Wirkungsforschung

Projektpraktikum aus MedieninformatikHilda Tellioglu

vonNicole Brosch

Matrikelnr.: 0325237, Kennz.: 935, 922Wien, 26. März 2007

Web-Portal für einen Fussballverein

26. März 2007

Inhaltsverzeichnis

1 Einleitung 1

2 Problembeschreibung 12.1 Zweck des Portals . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12.2 Ziele des Portals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12.3 Anforderungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22.4 Projektabgrenzung . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

3 Problemlösung 53.1 Rahmenbedingungen . . . . . . . . . . . . . . . . . . . . . . . . . . 53.2 Konzept . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

4 Implementierung 144.1 Panorama . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144.2 Datenbankbeschreibung . . . . . . . . . . . . . . . . . . . . . . . . 154.3 Browser-Kompatibilität . . . . . . . . . . . . . . . . . . . . . . . . . 17

5 User-Testing 185.1 Erste Phase: Co-Admins . . . . . . . . . . . . . . . . . . . . . . . . 185.2 Zweite Phase: Spieler . . . . . . . . . . . . . . . . . . . . . . . . . . 195.3 Dritte Phase: Fans . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

6 Anhang 196.1 Projekttagebuch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196.2 Tabellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Abbildungsverzeichnis

1 Ausschnitt MS Excel-Sheet mit bisherigen Statistiken . . . . . . . . 32 Screenshot des Dateisystems . . . . . . . . . . . . . . . . . . . . . . 63 Serienliste, mittlerer Teil des Templates . . . . . . . . . . . . . . . . 104 Logo und Wappen von Lokomotive Döbling . . . . . . . . . . . . . 115 Konzept des Templates . . . . . . . . . . . . . . . . . . . . . . . . . 116 Konzept der Spieldetails - Aufstellung . . . . . . . . . . . . . . . . . 127 Legende für Spieldetails . . . . . . . . . . . . . . . . . . . . . . . . 138 Template: verfeinertes Design . . . . . . . . . . . . . . . . . . . . . 149 Panorama erstellen mit HuginOSX . . . . . . . . . . . . . . . . . . 1510 Diagramm der Datenbank . . . . . . . . . . . . . . . . . . . . . . . 16

1 Einleitung

Im Zuge des Praktikums aus Medieninformatik wurde ein sich in der Entwicklungbefindendes Content Management System weiterentwickelt und um fussballspezifi-sche Funktionen erweitert. Es dient der Verwaltung von Spieler- und Spielinforma-tionen, sowie zur Präsentation des Vereins Lokomotive Döbling (http://lokdoebling.at).Dabei sollen auch Aktivitäten des Vereins abseits des grünen Rasens (Ankündigungdiverser Veranstaltungen und Fotos dazu) ihren Platz finden.

2 Problembeschreibung

2.1 Zweck des Portals

Zur Verwaltung von Spieler und Spielinformationen sowie zur Präsentation desVereins soll für ‘Lokomotive Döbling’ ein Webportal eingerichtet werden.

2.2 Ziele des Portals

Das primäre Ziel ist das Verwalten und Auswerten von Daten, die während einerSaison entstehen. Diese reichen von Spielerdaten bis zu Bildergalerien und auto-matisch generierten Spielberichten zum Match. Die Spieler sollen dabei selbständigdiese Information eingeben können und das System soll diese daraufhin automa-tisch in Statistiken und Spieldetails verwenden.

Ein Gespräch mit den Spielern bzw. die Erhebung ihrer Wünsche per Forumergab, dass ihnen Statistiken besonders wichtig sind. Daten sollen über den gerech-ten Einsatz der Spieler und Verbesserungsmöglichkeiten Aufschluss geben, sowieInformation über die bisherigen Spiele bereitstellen.

Das Portal soll nicht nur den Spielern selbst als Informationsquelle dienen,sondern auch Fans und anderen Mannschaften die Möglichkeit bieten, Informatio-nen über kommende und vergangene Spiele des Vereins zu bekommen und überdas Portal zu kommunizieren. Dabei sollen auch Aktivitäten des Vereins abseitsdes grünen Rasens (Ankündigung diverser Veranstaltungen und Fotos dazu) ihrenPlatz finden.

1

2.3 Anforderungen

2.3.1 User- und Rechtesystem

BenutzerInnen sollen von Administratoren zu verschiedenen Gruppen zugeteiltwerden können. Diese können, aber müssen nicht, die Nutzbarkeit der Funktionendes Portals bestimmen. Es soll die Möglichkeit bestehen die Rechte von Gruppenspäter zu ändern bzw. Gruppen zu löschen. Außerdem gibt es eine Trennung derBenutzerInnen in ‘normale BenutzerInnen’ und Benutzer, die gleichzeitig Team-mitglieder sind. Das heißt, dass es zusätzlich zu der Trennung in Benutzergruppennach Rechten, auch eine Trennung nach Art der User gibt, nämlich:

• Spieler des Vereins Lokomotive Döbling und

• alle anderen BenutzerInnen.

2.3.2 Newssystem

Es soll die Möglichkeit bestehen, einfach Ankündigungen und Neuigkeiten des Ver-eins auf die Hauptseite des Portals zu schreiben und diese (als registrierte/r Nut-zerIn) zu kommentieren. Es ist nicht notwendig Newsbeiträge zu kategorisieren,aber es ist wünschenswert, diese Möglichkeit für die Zukunft offen zu lassen.

2.3.3 Kommunikationsmöglichkeiten

Neben der Kommunikation durch die Kommentarfunktion bei den Newsbeiträgenkönnen registrierte NutzerInnen kleine private Nachrichten schreiben. So könntenInteressierte bspw. Spieler erreichen, ohne deren E-Mail-Adresse zu kennen. Au-ßerdem sollen Kontaktinformationen zum Verein bereitstehen (Impressum). Ad-ministrator sowie Obmann des Vereins können zusätzlich an alle BenutzerInnenbzw. alle Teammitglieder vom Administrationsbereich aus E-Mails versenden.

2.3.4 Team

Das gesamte Team sowie die einzelnen Spieler werden mit Foto und Spielerde-tails vorgestellt. Die Daten (außer das Foto) sollten eigenständig eingegeben undgeändert werden können. Zusätzlich zu Informationen wie Name, Position, Größeetc., werden für jeden Spieler einige kleine Statistiken, z.B. die durchschnittlicheSpielzeit, erzielte Tore,usw, angezeigt.

2

2.3.5 Statistik

Neben der Spielerstatistik wird es noch eine allgemeine Statistik geben, welchezusätzlich pro Liga (bzw. Spieltyp) aufgegliedert wird. Die zu verwaltenden Datenwerden einem MS Excel-Sheet mit den bisher gesammelten Daten entnommen.

Abbildung 1: Ausschnitt MS Excel-Sheet mit bisherigen Statistiken

Alle Statistiken (auch pro Spieler) sollen aus zu den Spielen eingegebenen Datenautomatisch berechnet werden.

2.3.6 Spiele

Auf der Hauptseite werden immer das nächste Spiel des Teams und die wichtigstenInformationen dazu (Wann? Wo? Wer?) angezeigt. Zusätzlich zu dieser Kurzinfor-mation gibt es einen Bereich Spiele, von dem aus man

• zukünftige Spiele,

• vergangene Spiele und

• archivierte Spiele

auswählen kann.In der Übersicht wird Kurzinformation wie Datum, Ort, Gegner, zugehörige Li-

ga und ggf. das Ergebnis angezeigt. Folgt man dem Link eines vergangenen Spielsso kommt man zur dessen Detailinformation.Diese enthält eine Spielstatistik dieAufstellung, Tore (Name, Minute, Art), Karten, Wechsel und den ‘Man of the

3

Match’ beinhaltet. Als zentraler Punkt, um Information über ein Spiel zu bekom-men, können von hier aus auch die gegebenenfalls existierenden Spielberichte undFoto-Galerien erreicht werden.

2.3.7 Spielberichte

Ausgewählte BenutzerInnen können zu einem Spiel Spielberichte erstellen und indiese auch Bilder einbinden. Berichte können nicht von anderen Usern kommentiertwerden.

2.3.8 Galerien

Für Spiele, aber auch andere Termine, können Fotos hochgeladen und im Portalbetrachtet werden. Neben ‘etwas größeren’ Thumbnails sollten die Bilder auch inOriginalgröße vorhanden sein.

2.3.9 Partner- und Umfragesystem

Für die Präsentation von Sponsoren soll ein kleines Partnersystem aufgebaut wer-den, das es erlaubt ggf. einfach neue Sponsoren hinzuzufügen und Alte zu löschen.

Auch die Möglichkeit Umfragen durchzuführen wird offen gelassen. Die bereitsbestehende Rohfassung der Umfrage wird im Adminbereich beibehalten, jedochnicht für das Frontend umgesetzt, da diese Funktion laut Vertretern des Vereinsnicht gebraucht wird. Sollte man es sich jedoch anders überlegen, kann die Funktionschnell eingebaut werden.

2.3.10 Statische Inhalte: Vereinsgeschichte, Impressum und AGB

Neben zahlreichen dynamischen Elementen des Portals wird es auch einige stati-sche Seiten geben. Dazu gehören Bereiche für die Vereinsgeschichte, das Impress-um und allgemeine Geschäftsbedingungen. Bei Letzteren ist auf die österreichischeGesetzeslage zu achten. Durch Auffrischung der Informationen diverser Informa-tikrecht LVAs, die ich in den vergangenen Semestern besucht habe, konnte ichleicht Übersicht über die gesetzlich vorgeschriebenen Inhalte erlangen.

2.4 Projektabgrenzung

Das Portal soll zwar Information zu sowohl zukünftigen, als auch vergangenen Ak-tivitäten des Vereins und Möglichkeit zur Kommunikation bieten, aber keineswegsKommunikation auf anderen Wegen ersetzen.

Das System ist nicht darauf ausgerichtet die Planung der Termine zu übernehmen,sondern eher Interessenten über u.a. diese zu informieren. Es sollen nur Daten, die

4

direkt mit ‘Lokomotive Döbling’ in Zusammenhang stehen, verwaltet werden. Sosind genaue Informationen wie Namen des Gegenspielers, der ein Tor erzielt hat,sowie Spielberichte und Ergebnisse von anderen Fussballmannschaften in der Ligauninteressant.

3 Problemlösung

3.1 Rahmenbedingungen

Bei der Lösung des Problems wird auf ein halb-fertiges Content Management Sys-tem zurückgegriffen. Es befindet sich gerade in der Entwicklung, welche durch dasProjekt für die Fussballmannschaft ebenfalls vorangetrieben wird. Es handelt sichhierbei um ein PHP-basierendes System das auf eine MySQL Datenbank aufsetzt.

Anfangs habe ich mir schwer getan den vorhandenen, von Anderen geschrie-benen, Source Code zu verstehen, da ich vor dem CMS Projekt so gut wie keineErfahrung mit dieser Programmiersprache gemacht hatte. Es kam u.a. vor, dassich einfach nicht wusste, ob eine in einem Zusammenhang verwendete Funkti-on eine selbstgeschriebene oder eine von PHP ist, wodurch ich oft auf php.netnachschlagen musste und es deshalb teilweise langsam voranging. Wenn ich nachlängerem Rätseln nicht selber auf die Lösung eines Problems gekommen bin, hatteich glücklicherweise immer einen Ansprechpartner.

Das RPGSquare CMS verfügt, neben vielen anderen, über einige (mehr oderweniger fertiggestellte) Funktionen, die den Anforderungen von ‘Lokomotive Döbling’entsprechen. Dazu gehören:

• News mit Kommentaren

• Partnersystem

• Umfragen

• Reviews zu Spielen einer Serie (in dem Fall Computerspiele)

• Bildergalerien zu Spielen

• Private Nachrichten

• Rechte und Usersystem

Das Rechtssystem, Bildergalerien sowie einige der Funktionen im Backend desSystems (Löschen, Editieren, Hinzufügen) sind noch nicht vollständig implemen-tiert.

5

3.1.1 Ordnerstruktur und prinzipielle Funktionsweise

Die Verteilung der .php Files in den vielen Ordnern war zunächst verwirrend,aber nachdem ich mich eingearbeitet hatte, konnte ich mich dann doch ziemlichschnell zurechtfinden, ohne langwierig nach den entsprechenden Klassen zu suchen.Anfänglich habe ich auch nach einem Programm gesucht, dass mir die Übersichtüber die vorhandenen Klassen gibt, ähnlich wie JavaDoc.

Funktionen, die über mehrere Ordner verteilt sind, werden im Frontend vonindex.php und im Backend von cms.php aus aufgerufen bzw. eingefügt (include).Dabei befinden sich im Ordner inc .tpl (Template) sowie .php Dateien zur eigent-lichen Webpage, in src Klassen mit den entsprechenden SQL Abfragen und intmp Template sowie weitere .php Dateien, die sozusagen als Schnittstelle der letz-ten Beiden dienen. Genaue Information, sowie Beispiele dazu, können im KapitelImplementierung nachgelesen werden, da ich mich bei der Erweiterung an dieseStruktur gehalten habe.

Abbildung 2: Screenshot des Dateisystems

Beim Erstellen von News sowie Reviews wird der Ordner content verwendet,um die Dateien abzulegen, in der Datenbank wird der Pfad dazu abgelegt. DieDateien werden den Stellen, an denen sie gebraucht werden, eingefügt.

Die Ordner img, team img und file beinhalten Bilder. Der Ordner file unter-scheidet sich deshalb von den anderen, weil in diesem auch von Usern hochgeladeneBilder (Avatare, Galerien) liegen.

Um das Speichern von Bildern auf den Server zu ermöglichen, musste ein Skriptgeschrieben werden, welches im Ordner script abgelegt ist. Die primäre Aufgabedieser Funktionen ist die Zugriffsrechte der Ordner am Server zu verändern:

6

Listing 1: Ausschnitt aus chmodAll.php

26 f unc t i on modd e ( $dh ) {27 $handle=opendir ( $dh ) ;28 whi le ( f a l s e !== ( $ f i l e=readd i r ( $handle ) ) ) {29 i f ( $ f i l e != ” .” && $ f i l e != ” . . ” ) {30 $typo=i s d i r ( $dh . $ f i l e ) ;31 i f ( $typo==true ) {32 modd e ( $dh . $ f i l e . ” / ” ) ;33 echo ”
$dh$ f i l e , d i r ” ;34 chmod( $dh . $ f i l e . ”/” , 0777 ) ;35 }36 e l s e {37 echo ”
$dh$ f i l e , f i l e ” ;38 chmod( $dh . $ f i l e , 0777 ) ;39 }40 }41 }42 }

Dazu werden rekursiv Ordner bzw. Unterordner eines Verzeichnisses durchlau-fen und die Zugriffsrechte mittels chmod auf 0777 gesetzt. Damit kann man späterin diesem Order schreiben, also z.B. Bilder hochladen.

Schon in index.php werden neun Klassen definiert, die über base.php bzw.config.php eine Verbindung mit der Datenbank aufbauen können.

pge Ist die direkte Oberklasse von News und Game, während die anderen Klas-sen, außer pmbox, nur indirekte Unterklassen dieser sind. Sie enthält u.a.Methoden für Login bzw. Logout, Partnersystem und Datenbankverbindung.

pmbox Diese Klasse beinhaltet Methoden für das Schreiben, Empfangen, Löschenetc. von privaten Nachrichten sowie die zugehörige E-Mail Benachrichtigung.

news Hier werden sowohl News-Assets als auch Kommentare zu diesen geregelt.Zusätzlich findet auch das Umfragesystem hier seinen Platz. 18 Methodenermöglichen die Anzeige von News inkl. Kommentaren, Löschen, Editierenund ein News-Archiv.

singlepge Diese kurze Subklasse von News dient dem Einbinden von anderenDateien in den Index.

Listing 2: Auschnitt aus der Klasse singlepge in index.php

756 pub l i c func t i on pgeInc lude ( $ id ) {757 $query = ”SELECT ‘ pge ‘ FROM ‘ cms s ing lepge ‘

7

758 WHERE ‘ id ‘= ’” . $ th i s−>id . ” ’ ” ;759 $ re s = mysql query ( $query , $ th i s−>dbconn ) ;760 i f ( $ r e s === f a l s e )761 re turn f a l s e ;762 $row = mysq l f e tch row ( $ r e s ) ;763 re turn inc lude (” inc /pge /” . $row [ 0 ] . ” . php ” ) ;764 }

In der Tabelle cms singlepge wird der Dateiname einer Seite, die im Ordnerinc/pge/ liegt, mit einer bestimmten ID rausgesucht. Dieser so generiertePfad wird dann mit include in der Hauptseite angefügt und somit sichtbar.Analog konnte ich meine eigenen Seiten in das vorhandene CMS einfügen.

game Diese Klasse stellt den zentralen Punkt für Informationen über ein Spieldar. Dazu gehören Galerien, Reviews, Sektionen etc. Diese Klasse wird beimLOKXIX-Projekt nur noch als Oberklasse für gamereview und gamegall fun-gieren und nicht mehr direkt angesprochen werden.

review, gamereview Auch hier wird in Zukunft nur noch eine der beiden Klas-sen benötigt, nämlich review. Diese Klasse zeigt das gewünschte Reviewfilean.

gallerie, gamegall Mit diesen beiden Klassen der index.php verhält es sich ana-log den beiden vorigen. Hier werden Thumbnails von den in eine bestimmteGalerie geladenen Bildern in mehreren Spalten und auf mehreren Seiten an-gezeigt.

3.1.2 Templatesystem

Wie es für ein CMS üblich ist, soll auch hier eine Trennung von Inhalt und Layouterfolgen. Auch die unkomplizierte Veränderung der Vorlagen für einen schnellenRelaunch der Website bzgl. des Layouts, ohne dass die Inhalte neu erstellt werdenmüssen, wird ermöglicht. Dadurch, dass ich beim Fussballprojekt an den Metho-den, unabhängig vom Layout, weiterarbeite, können diese Änderungen auch fürdas RPGSquare CMS von Nutzen sein.

In diesem Projekt werden Vorlagen mithilfe der Klasse template in src/template.phpgefüllt. Dazu werden die .tpl - Dateien, welche HTML Code beinhalten, in dreiTeile unterteilt, den Startbereich, Mitte und das Ende. Die .tpl Dateien werdeniterativ durchsucht und Platzhalter in der Form durch gewünschteWerte ersetzt.

8

Der folgende Code zeigt einen kleinen Ausschnitt aus tmp/tpl/lstSeries . tpl miteinem dieser Platzhalter. Neben weiteren Markern für Status und den Funktionen,enthält der Code noch Vermerke für die Abgrenzung der Bereiche. In diesem Fallhandelt es sich um einen Teil des mittleren Bereichs. In dieser Spalte einer Tabellesteht ein Platzhalter

Listing 3: Ausschnitt -Template für die Serienliste

42

Die Inhalte werden dann bspw. durch folgenden Code eingefügt. Hierbei könnennur Platzhalter im mittleren Teil des Templates mehrmals hintereinander zugewie-sen werden, um somit Tabellen zu erstellen, d.h. ich habe im .tpl nur einmal denPlatzhalter für den Namen etc. in einer Zeile stehen und nicht mehrere Zeilen mitden selben Platzhaltern.

Listing 4: Serienliste in tmp/content.php

22 $ tp l = new TEMPLATE(”tmp/ tp l / l s t S e r i e s . t p l ” ) ;23 $cnt = new SERIES($cms−>dbconn ) ;24 $ l s t = $cnt−>cn tL s tS e r i e s ( ) ;25 i f ( $ l s t !== f a l s e ) {26 $tpl−>t p l S t a r t (0 , 0 ) ;27 $var [ 0 ] = ”ID ” ;28 $var [ 1 ] = ”NAME” ;29 $var [ 2 ] = ”STATUS” ;30

31 f o r ( $ i =0; $i o f f l i n e ” :36 ”< f ont c o l o r=\”GREEN\”>on l ine ”;37 $tpl−>tplMid ( $var , $va l ) ;38 }39

40 $tpl−>tplEnd (0 , 0 ) ;41 }

Die Template-Datei, mit dem HTML-Code und Platzhaltern, wird gewählt,die Informationen zu den Serien mithilfe einer anderen Methode ausgelesen undanschließend die Arrays, tplStart, tplMid bzw. tplEnd übergeben. Das Array var[]beinhaltet die Namen der Platzhalter, also auch den mit der Namen-Spalte, für dieDaten, welche später an deren Stellen stehen sollen und das val[]-Array beinhaltetdie zugehörigen Daten. Hat man also in var[1] den Wert NAME stehen, so werden

9

in val[1] die Namen aus der Datenbank eingetragen. Durch das Ausführen derFunktion tpl−>tplMid($var, $val) wird an den Stellen im .tpl an denen steht, die Namen aus der Datenbank geschrieben. In diesem Fall gibt es nur diedrei Serien in der Tabelle und keine weitere Information, die eingefügt werden muss.Ein mögliches Ergebnis analoger Codestellen kann man in Abbildung 3 sehen.

Abbildung 3: Serienliste, mittlerer Teil des Templates

Während der Implementierung, besonders für das Backend des LOKXIX-Portals,habe ich immer wieder das Templatesystem bzw. analoge Codestücke verwendet.

3.2 Konzept

Was die Funktionsweise, die Struktur und das Backend betrifft, halte ich mich andie Vorgaben des CMS, das ich als Ausgangsbasis benutze, weshalb ich an dieserStelle nicht weiter darauf eingehen werde.

3.2.1 Logo und Design

In einer frühen Phase des Projekts habe ich zwei Logo-Vorschläge (siehe Abbildung4) für den Fußballverein gebracht. Diese konnte sich gegen einige andere Ideendurchsetzen, wobei das Logo (links) mehr Zuspruch fand als das Wappen (rechts).Beide sind in den Vereinsfarben gehalten und erinnern absichtlich an einen Vereinmit ähnlichem Namen. Diese Ähnlichkeit war auch von Vertretern des Vereinsausdrücklich gewünscht.

Nachdem die Wahl getroffen war, konnte ich mir Gedanken über das Aussehendes Portals machen. Es sollte auf jeden Fall zunächst die selben Farben und einfa-che Flächen wie das Logo verwenden. Der Einfachheit halber habe ich ein Designmit verschiedenfarbigen Tabellen (siehe Abbildung 5) gewählt, sodass währendder Implementierung der Funktionen schnell damit gearbeitet werden kann. BeiBedarf kann es am Ende des Projekts verfeinert bzw. ersetzt werden. Vor der Im-plementierung habe ich einen Prototyp mit Adobe Photoshop CS bzw. IllustratorCS erstellt, um mir und dem Verein ein möglilches Endergebnis besser zu veran-schaulichen.

10

Abbildung 4: Logo und Wappen von Lokomotive Döbling

Abbildung 5: Konzept des Templates

11

Für dieses vorläufige Aussehen der Seite, habe ich mich kaum mit Vereins-vertretern abgesprochen. Es ging anfänglich nur darum die Grundstruktur sowieNavigationspunkte bzw. Anforderungen der Seite festzulegen.

Im oberen Teil des Portals wird ein dynamisches Flash-Panorama eingebettet,das mit der Maus gesteuert werden kann. In erster Linie wurde die Idee geboren,weil ich wissen wollte, wie es eigentlich funktioniert. Zuerst dachte ich daran dafüreinen Fussballplatz zu fotografieren, da mir aber zunächst der Zugang gefehlt hat,war das zumindest Anfangs nicht möglich. Stattdessen musste ein Fussballtischherhalten. Die Möglichkeit, später an dieser Stelle ein Panorama oder ein einfa-ches Bild zu positionieren, wird offen gelassen.

Auch für die anderen Bereiche (Galerie, Spiellisten, ...) des Portals habe ichmir Konzepte überlegt und Skizzen gemacht. Ich werde hier aber nicht auf jedeeben dieser eingehen, da die meisten Seiten simple Tabellen mit Listen etc. enthal-ten. Interessant ist vielleicht noch die Seite, die den zentralen Informationspunkteines vergangenen Spiels darstellt und somit Ergebnis, gelbe Karten, Aufstellung,Reviews, usw. beinhaltet.Die Aufstellung wird nicht in einer einfachen Tabelle aufgelistet, sondern durchdie Ausrichtung der Spieler auf einem halben Fussballfeld (siehe Abbildung 6) vi-sualisiert. Wird ein Spieler ausgewechselt, so steht sein Ersatz und der Zeitpunktdes Tausches unter dem Betroffenen.

Abbildung 6: Konzept der Spieldetails - Aufstellung

Darunter sollen sich die übrigen Informationen des Spiels befinden. Um bessereÜbersicht der Spieldetails zu ermöglichen, werden diese mit Symbolen (siehe Abbil-dung 7) versehen. Die Idee Symbole zu verwenden war zwar meine, die konkretenBilder wurden aber vom Obmann des Vereins gewählt und mir zugeschickt. Ichhielt das auch für eine gute Möglichkeit, da die Symbole von Fussballbegeisterten

12

intuitiv verstanden werden sollten und ich eher nicht in diese Sparte falle. Auchzwischen welchen Torarten man unterscheidet etc. wurde nicht von mir entschie-den.

Abbildung 7: Legende für Spieldetails

Während der laufenden Implementierung des Portals war es auch mit diesemAussehen online, aber ohne Domain nur wenigen Personen bekannt (siehe ersteUser-Testing Phase). Ich habe mich nicht speziell wegen des Portals mit Vertre-tern des Vereins getroffen, sondern lediglich privat. So kam es öfter vor, dass mirbeiläufig beim Arbeiten ”über die Schulter geschaut”wurde bzw. man im Gesprächauf das Thema gekommen ist. Man kann sagen, ich hatte laufend Feedback zu Aus-sehen und auch Funktion des gerade in der Entwicklung steckenden Portals.Das Panorama ist anfangs auf Begeisterung gestossen, wurde jedoch später durchein Bild ersetzt. Das etwas schmälere Design der Seite wurde zwar gut aufgenom-men, nur zeigte sich, dass es für die Nutzung praktischer ist, wenn es etwas breitergestaltet wird. Auch dieser Kritikpunkt wurde beim Umschreiben in ein rein CSS-basierte Layout eingebracht. Nach Wunsch von Vereinsvertretern wurde auch derMenüpunkt Spielberichte später entfernt. Überhaupt wurde das gesamte DesignEnde Dezember verfeinert, wobei eigentlich nur noch die Grundstruktur des Ur-sprünglichen übrig blieb. In Abbildung 8 kann man einen Screenshot des Portalsnach der Verfeinerung des Designs und dem umschreiben des Tabellenbasiertenin das CSS-basierte Layout bewundern. Im Gegensatz zum allgemeinen Template(’Rahmen’ um die Box in der News etc. angezeigt werden) haben sich die einzelnenSeiten (z.B. Spieldetails) jedoch kaum verändert.

3.2.2 Datenbank

Schon vor Beginn der Implementierung stand fest, dass ich die fussballspezifischenTabellen der Datenbank so unabhängig wie möglich vom Rest der Datenbank hal-ten will. Nur bei den Usern (können auch zum Team gehören) und eine Verbindungder Fussballspiele zu Reviews, Galliern etc. sind Schnittstellen notwendig.

Weitere Wünsche der Vertreter des Vereins, sowie Verbesserungen in der Zu-sammenstellung der Tabellen des RPGSquare CMS und der Fussballtabellen habendie Datenbank weiterentwickelt.

13

Abbildung 8: Template: verfeinertes Design

Im Kapitel Datenbankbeschreibung stehen detaillierte Informationen zur finalenDatenbank, sowie Genaueres zu den Tabellen und ein ER Diagram.

4 Implementierung

4.1 Panorama

Das Open Source Programm HuginOSX erlaubt es aus einer beliebigen Fotoserieein Panorama zu berechnen. Jedes der 10 Fotos vom Mittelpunkt eines Fussball-tisches in 36 Grad Abständen, gemacht mit einer herkömmlichen Digitalkamera,wurde in diesem Programm mit seinen Nachbarbildern verglichen. Beim ‘Stitchen’werden bei den Bilderpaaren sogenannte Kontrollpunkte (Punkte, die in beidenBildern vorkommen) definiert (siehe Abbildung 9).

Nach weiteren Einstellungen (Optimierung, ...) konnte ich das sphärische Pan-orama schließlich als Quicktime VR Datei exportieren, in dem es möglich ist mitder Maus zu navigieren.

Mit einem weiteren Programm qtvr2flash konnte ich das vorläufige Ergebnis inein Flash-Movie konvertieren, um es als solches in das Portal einbinden zu können.

14

Abbildung 9: Panorama erstellen mit HuginOSX

Alle konvertierten Dateien sind ohne serverseitige oder andere Plugins verwendbar.Detaildaten werden per Streamingverfahren nachgeladen und das ausschließlichclientseitig und mit Hilfe des Flash Plugins (ab Version 5).

4.2 Datenbankbeschreibung

In Abbildung 10 sind alle Tabellen der verwendeten Datenbank, die benötigt wur-den, visualisiert. Tabellen des RPGSquare CMS, egal ob von mir weiterentwickeltoder schon vorhanden, beginnen mit dem Prefix ’cms’, welches bei fussballspezifi-schen Tabellen fehlt.

Vier Tabellen stehen nicht in Beziehung zu anderen, weil sie rein der Verwaltungdes Systems selber dienen.

cms leftnav beinhaltet Information über die Menüeinträge inklusive Links desHauptmenüs, u.a. Team, Galerien

cms nav verwaltet das User-Menü z.B. PNs lesen, Logout

cms partner speichert die Sponsoren des Fussballvereins mit Bild und Link

cms singlepage wird benötigt um die einzelnen Seiten zu erstellen (siehe KapitelOrdnerstruktur und prinzipielle Funktionsweise)

15

Abbildung 10: Diagramm der Datenbank

16

Die Namen der anderen Tabellen sprechen für sich, genauere Information zuden Datentypen sind im Anhang zu finden.

4.3 Browser-Kompatibilität

Bisher wurde die Seite nur in Mozilla Firefox betrachtet. Bevor das User-Testing,auch mit den Fans, beginnen kann, ist es jedoch notwendig, dass das Portal zu-mindest im Internet Explorer einwandfrei angezeigt wird. Eigentlich habe ich keinegravierenden Unterschiede erwartet, aber es kam doch an einigen Stellen zu einemDurcheinander.

Safari hatte vor allem Probleme mit Bildern. Sie konnten entweder nicht an-gezeigt werden (Fragezeichen stattdessen) oder schienen, ohne diesen Vermerk,einfach nicht auf. Auch das Logo im rechten oberen Bereich der Seite (siehe Ab-bildung 5), welches eigentlich wegen der entsprechenden CSS (Cascading StyleSheets) Einstellungen im Vordergrund sein sollte, wurde von der eigentlich dahin-ter liegenden Tabelle verdeckt.

Im Internet Explorer kam es zu mehreren Problemen, die z.T auf den erstenBlick schwer verständlich waren.

• Es war nur das letze News-Kommentar sichtbar,

• dafür gab es einen unbekannten Text (von oben nach unten) entlang derLogin-Box.

• Das Gruppenbild hatte seine Proportionen geändert.

• Die rechten Navigationstabellen verschoben sich bei großen Bildern nachrechts

• und bei langen Texten (z.B. AGB, Statistik, ...) zogen sich die Tabellen indie Länge.

• Außerdem gab es in der Galerie Probleme mit der Bildgröße.

Den anfangs nicht zuzuordnende vertikale Text neben dem Login konnte ichspäter als Beginn des Newseintrags identifizieren, der die Wenigen freien Pixelrechts benutzt hatte (Davor Textfluss links). Nachdem ich herausgefunden hatte,wieso der Fehler entstanden ist, konnte ich ihn, wie die anderen Fehler, schnellbeheben. Mit dem verfeinerten CSS-Layout gab es keine weiteren Probleme.

17

5 User-Testing

Ich habe versucht während des gesamten Projekts ein, zwei Benutzer am Ent-stehungsprozess teilhaben zu lassen, um ständig Feedback zu bekommen, Miss-verständnisse zu vermeiden und zusätzliche Wünsche schon früh umsetzen zukönnen.Im weiteren Verlauf des Projekts wurden dann mehr Benutzergruppen freigeschal-ten. Später konnten sich die Teammitglieder registrieren, was mir auch ermöglichteFunktionen wie das Erstellen der Aufstellung zu testen.Bevor das Portal für alle anderen zugänglich gemacht wurde, gab es noch eineletztes User-Testing, bei dem sich zusätzlich einige Fans der Fussballmannschaftregistrieren konnten.Vor dem Start der neuen Phase wurden alle sinnvollen Feedbacks der vorigen Phaseberücksichtigt.

5.1 Erste Phase: Co-Admins

In der ersten Feedback-Phase (bzw. die ständige Einbindung der zwei Benutzer imEntstehungsprozess) ergaben sich folgende Änderungen.

• Der Gesundheitszustand der Spieler wird doch nicht benötigt (‘Verletzt-Flag‘im Spielerprofil).

• Spielberichte sollen nicht direkt in die Navigation.

• Kleinfeldspiele sollten doch nicht zur allgemeinen Statistik gehören, sondernnur Liga- und Freundschaftsspiele.

• Gelbe etc. Karten sollten auch für die Gegenmannschaft verwaltet werden,wobei aber keine genauen Daten wie Spielername benötigt werden.

• Anzahl der News-Kommentare auf der ersten Seite sollte geändert werden.

• User sollen doch keinen Avatar haben.

• noch mehr Statistik: Assists, etc.

• Verfeinerung des Designs

• Links in die rechte Navigationsleiste

Natürlich wurde ich auch darauf aufmerksam gemacht, wenn etwas nicht sofunktioniert hat wie es eigentlich sollte.

18

5.2 Zweite Phase: Spieler

In der zweiten Phase konnten sich die Teamspieler registrieren und schon ihreProfile bearbeiten, außerdem News, Kommentare und Reviews schreiben, sowieBilder hochladen. Mit den registrierten Spielern ließen sich Funktionen wie Äuf-stellung erstellen”, ”Tore hinzufügenëtc. auch nochmals, diesmal mit echten Daten,überprüfen.

• anfängliche Benutzergruppen: Rechte ändern

• Ordnung der Aufstellung soll im Nachhinein geändert werden können, ohnelöschen zu müssen

• Möglichkeit Spiele, die W.O. gewonnen werden, einzutragen fehlt

Ein Problem war, dass es lange gedauert hat bis alle Spieler angemeldet waren,bzw. dann auch ihre Daten (Name, ... ) geändert hatten. Im Vergleich zu denanderen Evaluations-Phasen hat diese mit Abstand am längsten gedauert, aberandererseits auch wichtige Ergebnisse gebracht.

5.3 Dritte Phase: Fans

• ungenauere Rundungen

• Counter

• Rechtschreibfehler bei der Registrierung

Hier gab es im Großen und Ganzen nur Kleinigkeiten wie Rechtschreibfehlerzu beachten oder den Wunsch nach einem Counter zu erfüllen.

6 Anhang

6.1 Projekttagebuch

Tabelle 1: Stundenliste

Datum Stunden Tätigkeit10.9.2006 3 2 Vereinslogos erstellen12.9.2006 0 Wahl des Vereinslogos5.10.2006 2 Erhebung der Wünsche - Vertreter des Vereins7.10.2006 1 Erhebung der Wünsche - Spieler (per Forum)12.10.2006 2 Konzept/Vorschlag für das Portal überlegen, Skizzen

19

Fortsetzung Tabelle 1Datum Stunden Tätigkeit

13.10.2006 1 1. Version des Fussballteils der Datenbank16.10.2006 2 Latex Dok aufsetzen, Ziele und Projektabgrenzung17.10.2006 4 Flash-Panorama von Fussballtisch (ev. Platzhalter)18.10.2006 2 Anforderungen formulieren18.10.2006 0,5 2. Version des Fussballteils der DB, neue Wünsche18.10.2006 0,5 Konzeptskizzen ins Dokument19.10.2006 5 Template für die Hauptseite und Navigation19.10.2006 3 Datenbank überarbeiten und einbinden20.10.2006 0.5 beginnen Rahmenbedingungen zu formulieren20.10.2006 5 phpDocumentor, phpDoc, HeaderDoc etc.21.10.2006 3 Spielerinformation, Spieler zum User/User zu Spieler22.10.2006 0.5 Spiele und die davon abhängigen Infos löschen22.10.2006 3 Rahmenbedingungen formulieren23.10.2006 5 Spieltabellen, neues Spiel, editieren, löschen23.10.2006 3 Konzept formulieren24.10.2006 5 Aufstellung zu einem Spiel hinzufügen, Liste25.10.2006 1 Spieler aus der Aufstellung löschen26.10.2006 4 Tore und Tordetails hinzufügen und editieren27.10.2006 4 Tore löschen, Karten der Gegner (auch in DB)29.10.2006 3 Spieler (Aufstellung) und Karten editieren30.10.2006 2 an einem Login Problem arbeiten2.11.2006 3 Probleme mit Timestamp, Lösung: bigint3.11.2006 1 Fehler beim Editieren der Spiele ausbessern5.11.2006 3 Datumsfehler in News und bei den Spielen7.11.2006 1 Gruppen erstellen, Gruppenrechte setzen8.11.2006 4 Rechtsystem10.11.2006 1 Gruppen erstellen, Gruppenrechte setzen13.11.2006 1 Loggin, Fehlersuche, Verbessern14.11.2006 1 Rechtschreibfehler und Designwünsche einbringen15.11.2006 4 Galerie - Übersicht, Detailansicht, Einzelbild16.11.2006 2 spielunabhängige Galerien - Backend, Serienbilder19.11.2006 1 Fehler bei der Galerieanzeige ausbessern21.11.2006 0,5 Releases entfernen, Backlink korrigieren22.11.2006 2 kleine Verbesserungen (Verletzungen raus, ...), Fehler26.11.2006 0,5 Seite in verschiedenen Browsern testen29.11.2006 1,5 Kommentar/News Template überarbeiten30.11.2006 1,5 Rechtesystem, Browser, ersten Usern helfen2.12.2006 2 Browser, kleine Fehler ausbessern

20

Fortsetzung Tabelle 1Datum Stunden Tätigkeit3.12.2006 1 PN - Benachrichtigung per Popup6.12.2006 1,5 am Dokument weiter schreiben11.12.2006 3 Avatare für Benutzer entfernen, Spielerbild upload13.12.2006 2,5 Funktionen: Liga aus allgemeiner Statistik rausnehmen14.12.2006 0,5 Fehler bei Aufstellung im Backend14.12.2006 2 Statistik umschreiben weil neue Funktion15.12.2006 2,5 Statistiken umschreiben, einzelne Spiele ausschalten16.12.2006 2 Optionale Ordnung der Aufstellung17.12.2006 1 Statistikfehler21.12.2006 3,5 Konzept in Photoshop: neues Design26.12.2006 5 CSS (nicht Tabellen) basiertes Layout27.12.2006 2 CSS (nicht Tabellen) basiertes Layout28.12.2006 2 Browserkompatibilität - News verbessern29.12.2006 3 CSS basiertes Layout, Überschriften, ....30.12.2006 7 W.O., kleine Fehler, Ligatabelle auslesen, Archiv, ...31.12.2006 1 Dokument, allgemeine Evaluation ausschreiben15.01.2007 1 kleine Fehler28.01.2007 3 ER-Diagramm05.02.2007 1,5 Dokument10.02.2007 0,5 Dokument15.02.2007 1,5 kleine Verbesserungen, Counter, Dokument ...01.03.2007 1 Newsletter19.03.2007 2 Dokument - Fehler ausbessern, Korrekturlesen21.03.2007 2 Dokument - mehr Erfahrungen dazuschreiben22.03.2007 1 Dokument - mehr Erfahrungen dazuschreiben

6.2 Tabellen

Tabelle 2: Struktur der Tabelle Tore

Feld Typ Null Standard

von int(11) Ja 0spiel bigint(20) Nein 0min int(11) Nein 0Eigentor int(11) Nein 0Freistoss int(11) Nein 0

21

Tabelle 2: Struktur der Tabelle Tore (Fortsetzung)


elfmeter int(11) Nein 0nach standard int(11) Nein 0kopfballtor int(11) Nein 0assists id int(11) Ja 0

Tabelle 3: Struktur der Tabelle cms galleries


id int(11) Neingm int(11) Nein 0dir int(11) Nein 0title varchar(120) Neinkey int(11) Nein 0stamp int(1) Nein 0status int(1) Nein 0

Tabelle 4: Struktur der Tabelle cms galleriesusr


id int(11) Neingallerie int(11) Nein 0usr int(11) Nein 0

Tabelle 5: Struktur der Tabelle cms gameimg


id int(11) Neingame int(11) Nein 0img int(11) Nein 0

Tabelle 6: Struktur der Tabelle cms games


id int(11) Nein

22

Tabelle 6: Struktur der Tabelle cms games (Fortsetzung)


series int(11) Nein 0game varchar(210) Neinstatus int(1) Nein 0reviews int(11) Nein 0content int(11) Nein 0galleries int(11) Nein 0sort int(11) Nein 0type int(11) Nein 0match bigint(20) Nein 0

Tabelle 7: Struktur der Tabelle cms grouprights


id int(11) Neinfile varchar(20) Neinkeywrd varchar(20) Neingrp int(11) Nein 0

Tabelle 8: Struktur der Tabelle cms leftnav


id int(11) Neinorder int(11) Nein 0part int(11) Nein 0name varchar(120) Neinlink varchar(120) Nein

Tabelle 9: Struktur der Tabelle cms nav


file varchar(20) Ja NULLkeywrd varchar(20) Neinnme varchar(100) Nein

23

Tabelle 10: Struktur der Tabelle cms news


id int(11) Neincomment int(11) Nein 0cat int(11) Nein 0dat bigint(20) Ja NULLtitle varchar(180) Neinsubtitle text Neintext text Neinusr int(11) Nein 0

Tabelle 11: Struktur der Tabelle cms newscat


id int(11) Neincat varchar(90) Neinabk varchar(24) Neinimg varchar(15) Nein

Tabelle 12: Struktur der Tabelle cms newscmnt


id int(11) Neinnews int(11) Nein 0usr int(11) Nein 0time bigint(20) Ja NULLtitle varchar(120) Neintxt text Nein

Tabelle 13: Struktur der Tabelle cms partner


id int(11) Neinpic varchar(120) Neinlink varchar(120) Nein

24

Tabelle 14: Struktur der Tabelle cms pm


id int(11) Neindat bigint(20) Nein 0from int(11) Nein 0to int(11) Nein 0stat int(1) Nein 0title tinytext Neintxt text Nein

Tabelle 15: Struktur der Tabelle cms reviews


id int(11) Neingame int(11) Nein 0title varchar(240) Neinfile int(11) Nein 0usr int(11) Nein 0choose int(1) Nein 0status int(1) Nein 0

Tabelle 16: Struktur der Tabelle cms series


id int(11) Neintitle varchar(120) Neinstatus int(1) Nein 0cnt int(11) Nein 0order int(11) Nein 0stat int(11) Nein 0

Tabelle 17: Struktur der Tabelle cms seriesimg


id int(11) Neinseries int(11) Nein 0img int(11) Nein 0

25

Tabelle 18: Struktur der Tabelle cms singlepge


id int(11) Neintitle char(120) Neinimg char(10) Neinpge char(15) Nein 0

Tabelle 19: Struktur der Tabelle cms title


id int(11) Neintitle varchar(120) Neincolor varchar(7) Nein

Tabelle 20: Struktur der Tabelle cms usr


id int(11) Neinname varchar(125) Neinpw int(11) Nein 0title int(11) Nein 0ava varchar(130) Neinpoints int(11) Nein 0mail text Neinpm int(11) Nein 0unreadpm int(11) Nein 0confirm tinyint(1) Nein 1getusrmail tinyint(1) Nein 0getstaffmail tinyint(1) Nein 0getpm tinyint(1) Nein 0

Tabelle 21: Struktur der Tabelle cms usrrights


id int(11) Neinfile varchar(20) Neinkeywrd varchar(20) Nein

26

Tabelle 21: Struktur der Tabelle cms usrrights (Fortset-zung)


usr int(11) Nein 0

Tabelle 22: Struktur der Tabelle geg karten


spiel bigint(20) Nein 0gelb int(11) Nein 0gelbrot int(11) Nein 0rot int(11) Nein 0id int(11) Nein

Tabelle 23: Struktur der Tabelle spiele


wann bigint(20) Nein 0wo varchar(100) Neinwer varchar(100) Neintyp int(11) Nein 0heimaus int(11) Nein 0

Tabelle 24: Struktur der Tabelle spielt mit


spiel bigint(20) Nein 0spieler id int(11) Nein 0gelb int(11) Nein 0gelbrot int(11) Nein 0rot int(11) Nein 0min int(11) Nein 90mom int(11) Nein 0wechsel id int(11) Ja NULLwechsel time int(11) Ja NULLorder int(11) Nein 0

27

Tabelle 25: Struktur der Tabelle team


id int(11) Neinbild varchar(100) Neinvorname varchar(100) Neinnachname varchar(100) Neinnr int(11) Nein 0position varchar(100) Neingeb bigint(20) Nein 0groesse float Nein 0gewicht float Nein 0nation varchar(100) Neinverletzt varchar(100) Neinberuf varchar(100) Ja NULLhobbies varchar(100) Ja NULLvereine varchar(100) Ja NULLgeheimwaffe varchar(100) Ja NULLmusik varchar(100) Ja NULLlink varchar(100) Ja NULLKommentar varchar(100) Ja NULL

28

Web-Portal f¨ur einen Fussballvereinmedia.tuwien.ac.at › fileadmin › user_upload ›...

Documents

Transcript of Web-Portal f¨ur einen Fussballvereinmedia.tuwien.ac.at › fileadmin › user_upload ›...