doc - Universität Stuttgart

Universität Stuttgart
Institut für Visualisierung
und Interaktive Systeme
Fachpraktikum Graphische Benutzungsoberflächen
Aufgabe 5: Web-basierter Client für News-Feeds.
Steffen Koch
Ziel dieser Aufgabe ist es, einen Einblick in die
Erstellung webbasierter Oberflächen unter
Nutzung der Hypertext Markup Language
(HTML), Cascading Stylesheets (CSS) und
JavaScript zu erlangen. Mit den genannten
Beschreibungs- und Skriptsprachen soll eine
graphische Benutzeroberfläche erstellt werde,
die es erlaubt News-Feeds zu abonnieren, sie
abzurufen und diese auch wieder abzubestellen.
Hierfür wird ein Proxy-Server zur Verfügung
gestellt, der gängige Feed-Formate wie RSS1 und
Atom2 mittels eines vereinfachten XMLFormats ausliefern kann. Der Datenaustausch
zwischen Browser und Feed-Proxy soll dabei
asynchron durch die Verwendung von AJAX
(asynchronous JavaScript and XML) erfolgen.
Insbesondere folgende Lernziele sollen in dieser
Aufgabe vermittelt werden:

mit HTML Weboberflächen zu erstellen,

CSS anzuwenden,

über JavaScript auf das sogenannte
Document Object Model (DOM)
zuzugreifen,

JavaScript
und
asynchronen
einzusetzen.
XML
für
den
Datenaustausch
Organisatorisches
Für die Bearbeitung der Aufgaben des
Fachpraktikums steht Ihnen wie üblich das
Subversion-Repository zur Verfügung. Darin
finden Sie für diese Aufgabe sowohl den
Proxy-Server im Quellcode, sowie bereits
angelegte
Verzeichnisse
für
den
zu
erstellenden HTML-Client. Zudem enthält
das Projekt ein Ant-Skript, welches Ihnen das
Deployment der Anwendung erleichtern soll.
Für die Bearbeitung der Aufgabe kann ein
beliebiger Editor verwendet werden. Die
1
http://de.wikipedia.org/wiki/Rss
2
http://www.atompub.org/
Nutzung von Eclipse wie es im Pool installiert
ist wird empfohlen. Die Abgabe des von Ihnen
erstellten HTML-Clients erfolgt ebenfalls wie
immer über das SVN-Repository.
Anmerkung:
Bitte beachten Sie, dass sich unterschiedliche
Browser sowohl in Bezug auf das Scripting als
auch
die
Darstellung
von
Inhalten
unterschiedlich verhalten können. In der
Praxis
ist
es
mitunter
aufwändig
Anwendungen zu entwickeln, die in mehreren
Browsern gleich gut laufen. Entscheiden Sie
sich bitte daher gleich zu Beginn der Aufgabe
für einen Browser Ihrer Wahl um späteren
„Überraschungen“ bei der Entwicklung und
Vorführung der Aufgabe zu vermeiden.
Gefordert ist also die Implementierung der
Aufgabe für nur einen Browser.
Einleitung
Neben der Tatsache, dass das World Wide
Web (WWW) seit Anfang der 90er Jahre
einen geradezu sagenhaften Boom erlebte,
finden sich mittlerweile immer mehr
Anwendungen in Unternehmen, die ebenfalls
von Webtechnologie Gebrauch machen. Dies
liegt nicht zuletzt daran, dass inzwischen eine
große Vielzahl von Produkten, Frameworks,
freien Web-Servern, Web-Infrastruktur und
Clients in Form von Webbrowsern verfügbar
ist.
Diese
Möglichkeiten,
sowie
die
zunehmend vorhandene Kompetenz der
Benutzer im Umgang mit Weboberflächen
lassen
sich
auch
in
verteilten
Firmenanwendungen nutzen. Dies ist möglich
ohne dass auf jedem Arbeitsplatzrechner für
neue
Anwendungen
zusätzlicher
Installationsaufwand notwendig wäre. Die
wichtigsten Standards für webbasierte
Anwendungen sind die Hypertext Markup
Language (HTML) für die Erstellung von
Weboberflächen, sowie das
Hypertext
Transfer Protocol (HTTP) welches Basis für
1
den Datenaustausch zwischen Webserver und
Browser ist.
HTML
Die erste Version von HTML wurde 1989 von
Tim Berners Lee entwickelt der als der
Begründer
des
WWW
gilt.
Die
Beschreibungssprache HTML ist kein starres
Gebilde, das seit Beginn des WWW
unverändert besteht, vielmehr wird es ständig
weiterentwickelt.
Diese
Entwicklungen
wurden in der Vergangenheit häufig durch
Browser-Hersteller initiiert und sind teilweise
in
die
offiziellen
Sprachstandards
eingeflossen. Die Standards selbst werden in
Form sogenannter „Recommendations“, also
Empfehlungen, vom World Wide Web
Consortium gepflegt. Im Moment wird gerade
am HTML 5 Standard gearbeitet. Aktuell
üblich sind jedoch noch die Standards HTML
4.01 sowie XHTML 1.1 (eine XML-konforme
Variante von HTML). Bei der Bearbeitung der
Aufgabe sollten Sie sich für eine der beiden
Varianten entscheiden und sich durchgängig
an
diesen
Standard
halten.
Standardkonformität lässt sich leicht mittels
des HTML-Validators auf der Seite des World
Wide Web Consortiums (W3C) überprüfen.
Die herausragende Eigenschaft von HTML ist
es Seiten über sogenannte Hyperlinks
netzwerkartig zu verknüpfen und dafür
Navigationsmöglichkeiten zur Verfügung zu
stellen. Dabei spielt es keine Rolle ob die
Seiten alle auf demselben Webserver liegen
oder nicht. Die Seiten selbst werden hierbei
über sogenannte Uniform Resource Locators
(URLs) identifiziert. Allerdings handelt es sich
bei den heutigen Webinhalten nicht mehr
ausschließlich um Texte, wie der Begriff
„Hypertext“ vermuten lassen würde. Die
neueren Standards erlauben es nahezu
beliebige Multimediadaten in Webseiten zu
integrieren. Zudem bietet HTML die
Möglichkeit Benutzereingaben in Formularen
an einen Webserver zu versenden.
Während zu den Anfangszeiten des WWW
über die Beschreibungssprache HTML sowohl
die Struktur als auch das Layout von
Webseiten festgelegt wurde, hat sich dies in
den letzten Jahren dahingehend verändert,
dass eine Trennung von Struktur/Inhalt
(beschrieben durch HTML) und Layout (über
CSS) angestrebt wird. Der Sinn einer solchen
Trennung liegt auf der Hand: Dieselben
Inhalte
können
über
unterschiedliche
Stylesheets mit unterschiedlichen Layouts
versehen
werden,
oder
sogar
für
unterschiedliche Ausgabegeräte und Medien
angepasst werden.
Auf den Seiten des W3C finden Sie alle
wichtigen Informationen und Spezifikationen
zu
HTML,
CSS
und
verwandten
Themengebieten: www.w3.org
HTTP
Das Hypertext Transfer Protocol ist wie der
Name bereits erahnen lässt ein Protokoll, das
für den Austausch von Daten zwischen
Webservern und Webbrowsern zum Einsatz
kommt. Eine ausführliche Beschreibung des
Protokolls findet sich unter:
http://tools.ietf.org/html/rfc1945
und
http://tools.ietf.org/html/rfc2616
Innerhalb der zu bearbeitenden Aufgabe sind
lediglich die HTTP-Anfragen „Get“ und „Post“
interessant, die es ermöglichen vom Client aus
eine
Web-Ressource
anzufordern
und
gleichzeitig Parameter an den Server zu
übertragen. HTTP ist ein zustandsloses
Protokoll.
Das
bedeutet,
dass
jeder
Request/Response-Zyklus unabhängig vom
Kontext vorangegangener Aufrufe stattfindet.
Dies stellt, insbesondere im Rahmen von
Anwendungen die einen „Sitzungscharakter
aufweisen“, ein Problem dar. Um künstlich
Informationen über einen Zyklus hinweg zu
erhalten,
können
unterschiedliche
Mechanismen für das Session-Handling zum
Einsatz kommen. Gängige Verfahren sind
„URL-Rewriting“, HTTP-Cookies3 sowie das
„Durchschleifen“ von Session-Parametern. Für
die gestellte Aufgabe ist das Session-Handling
auf Basis von Cookies bereits transparent in
den bereitgestellten Proxy integriert. Dies
bedeutet,
dass
für
eine
korrekte
Funktionsweise Cookies im Browser erlaubt
werden müssen.
JavaScript
HTML und CSS bilden wie schon erwähnt die
Basis für Seiten im WWW. Allerdings lassen
sich damit nur „statische“ Anwendungen
erstellen die den Webclients auch den Namen
„Browser“
bescherten.
Sollen
Inhalte
3
http://tools.ietf.org/html/rfc2965
2
dynamisch änderbar/generierbar sein so
reichen HTML-Beschreibungen und CSS
alleine nicht mehr aus. Zur Generierung
dynamischer Webseiten auf Serverseite, steht
eine große Palette von Skriptsprachen,
Frameworks und Toolkits zur Verfügung.
PHP4, JSP5 und ASP6 sind hierbei nur einige
der bekannteren Vertreter. Mit deren Hilfe
kann auf die Eingabe von Benutzern in
geeigneter Weise dynamisch reagiert werden.
Zum Beispiel lassen sich so Weblogs (kurz
Blogs) erstellen, in die ein Autor Inhalte
einpflegen und im Netz zur Verfügung stellen
kann. In der vorliegenden Aufgabe wurden für
die Server-seitige Implementierung des FeedProxys JavaServer Pages (JSP) eingesetzt.
Verfügung (DOM). Es bietet die Möglichkeit
beliebige Elemente auf einer Webseite zu
finden und zu verändern. Auch für den Zugriff
auf XML-Dateien (wie z.B. die vom FeedProxy zur Verfügung gestellten) gibt es ein
DOM. Die wichtigsten Zugriffsmethoden des
XML-DOM haben Sie bereits bei der
Bearbeitung
vorangegangener
Aufgaben
kennengelernt. Sie sind in ähnlicher Weise
auch auf HTML-Dokumente anwendbar.
Aber auch Client-seitig ist Dynamisierung in
vielen Fällen wünschenswert. Sei es für die
Erstellung von Funktionalität die nicht über
die Beschreibung in HTML möglich ist, wie
z.B. Veränderung der Seiteninhalte bezüglich
ihrer
Struktur
oder
Anordnung,
„Animationen“, oder dem asynchronen
Austausch von Nachrichten mit dem
Webserver wie er im Abschnitt „AJAX“
beschrieben ist. Eine Möglichkeit für die
Client-seitige Dynamisierung von Webseiten
bietet JavaScript oder auch ECMA-Script7 wie
der Sprachstandard bei der European
Computer Manufacturers Association genannt
wird.
Für das Polling von Feed-Nachrichten sollten
Sie
sich
insbesondere
die
Methode
setTimeout() des Window-Objekts ansehen.
Bei der Entwicklung von Client-seitigem
JavaScript ist es ratsam äußerst defensiv zu
programmieren.
So
sollten
sämtliche
Variablen denen ein Objekt zugewiesen wurde
vor deren Benutzung auf ihren Inhalt
überprüft werden:
if (object) {
//do something
} else {
alert(„An error has occurred, object was 0 or ‘undefined’”);
}
Fehlermeldungen können mit dem Befehl
alert(„Fehlermeldung“) in Form eines
Dialogs ausgegeben werden.
Bei JavaScript handelt es sich um eine
interpretierte Sprache mit dynamischer
Typisierung. Das heißt einer Variablen
können Werte/Instanzen unterschiedlichen
Typs zugewiesen werden. „Objektorientierte“
Programmierung ist mit JavaScript möglich
innerhalb der hier zu bearbeitenden Aufgabe
jedoch nicht zwingend erforderlich. Lassen Sie
sich jedoch bitte nicht vom Namen
„JavaScript“ täuschen, zwar gibt es Parallelen
zu Java was die Syntax anbelangt, die
semantischen Konzepte unterscheiden sich
jedoch deutlich.
Für das Scripting von HTML-Webseiten steht
das sogenannte Document Object Model zur
4
http://www.php.net/
5
http://java.sun.com/products/
jsp/index.html
6
7
http://asp.net/
http://www.ecma-international.org/
publications/standards/Ecma-262.htm
Anmerkung:
Falls Sie noch nie in JavaScript programmiert
haben sollten, arbeiten Sie sich bitte mit Hilfe
der
unter
Quellen
und
Tutorials
referenzierten Materialien ein.
AJAX
In letzter Zeit geistert der Begriff „Web 2.0“
durch die Medien. Unter diesem Begriff
werden neuere Webanwendungen wie Wikis,
Soziale Netzwerke, Mashups und viele weitere
Applikationen subsumiert, welche (auch) die
aktive Einflussnahme von Benutzern auf
Webinhalte umfassen. Häufig wird „Web 2.0“
daher auch als das „Mitmachweb“ bezeichnet.
Wie auch immer man diese Form der
Webanwendungen bezeichnen möchte, neu
sind die Möglichkeiten die unter Web 2.0
zusammengefasst werden nicht - obwohl das
die Versionsnummer 2.0 suggeriert.
Tatsächlich neueren Ursprungs sind jedoch
Erweiterungen in JavaScript, die es erlauben
Daten mit einem Webserver asynchron
auszutauschen. Dies bietet neben Vorteilen
3
bezüglich der benötigten Bandbreite auch
wesentliche Verbesserungen hinsichtlich der
Usability von Webanwendungen. Zum einen
entfällt das Nachladen kompletter Webseiten
inklusive der beim Seitenaufbau auftretenden
Effekte wie Flackern und Layout-Artefakte
und zum anderen ist es möglich dynamisch
auf Benutzereingaben oder Teile davon zu
reagieren. Ein häufig erwähntes Beispiel
hierfür ist die Anzeige von Vorschlägen zur
automatischen Vervollständigung von StringEingaben.
Die typische Aufrufsyntax eines AJAX-Calls
(HTTP-get) sieht wie folgt aus:
var xmlHttp;
xmlHttp = new XMLHttpRequest();
if (!xmlHttp) {
// Internet Explorer 6 und aelter
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
Quellen und Tutorials
Für die in den vorangegangenen Abschnitten
vorgestellten Technologien gibt es nahezu
unzählige Quellen und Tutorials. Neben den
schon
erwähnten
Standards
bzw.
Herstellerspezifikationen sind sie eventuell
besser dazu geeignet, sich möglichst schnell
einen Überblick zu verschaffen sowie
Lösungen zu spezifischen Problemstellungen
zu
finden.
Anleitungen
und
Nachschlagewerke zu den Themen HTML,
CSS und JavaScript finden sich unter
http://de.selfhtml.org/
und
http://www.galileocomputing.de/openb
ook/javascript_ajax/
Erste Schritte
Laden Sie sich zunächst die gepackte
Binärversion des Apache Tomcat 6.x Server
herunter
(http://tomcat.apache.org/).
Entpacken Sie den Server in einem
Verzeichnis Ihrer Wahl und starten Sie ihn
mit dem Aufruf „startup“ im Verzeichnis
/bin. Überprüfen Sie anschließend ob der
Server läuft indem Sie im Browser Ihrer Wahl
die URL http://localhost:8080/ aufrufen.
Falls der Server korrekt gestartet werden
konnte sollten Sie folgendes Bild sehen:
xmlHttp = null;
}
}
}
if (xmlHttp) {
xmlHttp.open(requestMethod, url);
setCallback(xmlHttp, callbackFunction);
xmlHttp.send(null);
} else {
//Fehlerbehandlung
}
Hierbei
stellt
der
obere
Teil
die
Sonderbehandlung des Internetexplorers dar.
Innerhalb der im Beispiel nicht definierten
Funktion „callbackFunction“ muss die
eigentliche Verarbeitung der Antwort auf den
get-Request stattfinden. Alternativ könnte
man die Funktion auch direkt „inline“
definieren.
Anschließend sollten Sie die Aufgabe 5
auschecken. Sie können das entweder direkt
über Eclipse oder über Tortoise SVN
erledigen. Falls Sie sich für die 2. Möglichkeit
entscheiden, wird empfohlen, dass Sie die
Aufgabe danach in Eclipse weiterbearbeiten.
Im nächsten Schritt müssen Sie die Datei
/localconfig/build.properties so anpassen,
dass die enthaltenen Properties an den
Installationspfad des Webservers angepasst
werden. Ist dies geschehen, öffnen Sie als
4
nächstes das ant-file build.xml. In Eclipse
werden nun alle verfügbaren Ziele des Skripts
angezeigt. Wählen Sie das Ziel „deploy“ aus
und starten Sie das Deployment über das
Kontextmenü. Alternativ können Sie auch die
Binär-Version von Ant installieren, den Pfad
in der path-Variable angeben und über den
Kommandozeilenbefehl ant deploy im
Projektverzeichnis
den
Buildvorgang
anstoßen.
Ist
das
Build-Skript
ohne
Fehler
durchgelaufen können Sie jetzt den FeedProxy
über die folgenden Requests testen (selbiges
muss später mittels JavaScript erledigt
werden):
http://localhost:8080/FeedServer/
feed.server?action=subscribe_feeds&f
eedUrl=http://www.heise.de/english/n
ewsticker/news.rdf
http://localhost:8080/FeedServer/
feed.server?action=get_subscribed_fe
eds
über die schon genannten hinaus) sind so
zahlreich, dass sich die allermeisten
Fragestellungen schnell beantworten lassen
sollten.
Weiteres Vorgehen
Legen Sie die Dateien die Sie erstellen jeweils
in den entsprechend benannten Ordnern an.
HTML-Dateien in /web/html, JavaScriptDateien in /web/script und CSS-Dateien in
/web/css. Achten Sie bei der Referenzierung
der Dateien darauf, dass dies immer relativ
geschehen sollte. Spätestens wenn Sie einmal
eine Webanwendung auf einen anderen
Server stellen möchten, führen absolute Pfade
eventuell zu Schwierigkeiten. Zugriff auf das
von Ihnen zu erstellende HTML-Frontend
erhalten Sie demnach über:
http://localhost:8080/FeedProxy/html
/<name_der_datei>
Die URL:
http://localhost:8080/FeedProxy
wird übrigens automatisch auf die Datei
/html/index.html auf dem Server gemapt.
Sollten Sie diese Einstellungen ändern wollen,
dann
passen
Sie
bitte
die
Datei
/web/WEB_INF/web.xml entsprechend an.
Aufgabenstellung
http://localhost:8080/FeedServer/
feed.server?action=unsubscribe_feeds
&feedUrl=http://www.heise.de/english
/newsticker/news.rdf
Funktionieren
die
Aufrufe
wunschgemäß (die XML-Rückgabe der
Services wird angezeigt) so können
Sie nun mit der Entwicklung der
Weboberfläche loslegen.
Bearbeitung der Aufgabe
Für die Bearbeitung dieser Aufgabe wird kein
Skelett
ausgeliefert.
Lediglich
der
FeedProxyServer mit den im vorigen
Abschnitt genannten Requests steht zur
Verfügung.
Die
Entwicklung
der
Weboberfläche selbst bleibt vollkommen
Ihnen überlassen. Die Ressourcen, die im Web
zu diesem Thema zur Verfügung stehen (auch
Ziel dieser Aufgabe ist es eine Weboberfläche
zu erstellen, die es erlaubt News-Feeds an
einem gegebenen Feed-Proxy zu abonnieren,
anzuzeigen und wieder abzubestellen. Die
entsprechende Funktionalität stellt der Proxy
über die URL
http://localhost:8080/FeedServer/
feed.server
bereit. Über den Request-Parameter action
lässt sich die jeweilige Funktionalität abrufen.
Zur Verfügung stehen:
subscribe_feeds
unsubscribe_feeds
get_subscribed_feeds
Wobei die ersten beiden jeweils die Angabe
des weiteren Parameter feedUrl erfordern.
Sie können auch mehrere URLs gleichzeitig
übertragen. Ob die Parameterübergabe per
HTTP-Post oder HTTP-Get gelöst wird bleibt
Ihnen überlassen, der Server kann mit beiden
Übergabemethoden umgehen. Die Zugriffe
auf die entsprechenden Dienste sollen per
AJAX durchgeführt werden. Für die zu
5
erstellende Weboberfläche ist folgende
Funktionalität gefordert: Auf die Eingabe
einer gültigen Feed-URL (beispielsweise über
ein Textfeld) soll dieser abonniert werden
können (z.B. über das Drücken eines HTMLButtons, oder das auslösen eines Links).
Handelt es sich um keine gültige URL so soll
die Fehlermeldung des Servers an den
Benutzer propagiert werden. Ist die FeedAdresse gültig so soll sie zusammen mit den
anderen abonnierten Feeds in einer Liste auf
der Oberfläche angezeigt werden. Es bleibt
dabei ebenfalls Ihnen überlassen wie Sie die
Liste implementieren möchten. Sie können
z.B. das HTML-Element select verwenden
oder selbst eine Liste mit geeigneter
Funktionalität erstellen. Wird nun ein
abonnierter Feed vom Benutzer aus der Liste
ausgewählt,
sollen
die
Nachrichtenüberschriften in einem weiteren
Bereich auf der Seite aufgelistet werden (mit
Datum falls vorhanden). Bei Klick auf die
entsprechende Überschrift soll ein neues
Fenster
geöffnet
werden,
das
die
entsprechende Nachricht anzeigt. Das neue
Fenster soll dabei ohne Menü- und Toolbar
erzeugt werden. Zudem soll als Überschrift
über der Newsliste die Hauptseite des Feeds
verlinkt werden und ebenfalls in einem neuen
Fenster geöffnet werden können.
Aus der Liste der abonnierten Feeds sollen
Einträge vom Benutzer auch wieder gelöscht,
also abbestellt, werden können. Zudem sollen
alle abonnierten Feeds im Hintergrund ohne
Interaktion
des
Benutzers
periodisch
abgefragt werden und Änderungen (neue
Nachrichten) durch eine Hervorhebung des
Feeds signalisiert werden. Bei Klick auf den
Feed soll die Markierung aufgehoben werden.
Dasselbe soll in der Liste mit den News für
gelesene
und
ungelesene
Nachrichten
implementiert werden.
unter dem Ordner „docs“ im SVN ein.
Versuchen Sie Ihre Überlegungen in einer
einfachen Implementierung umzusetzen.
Fehler, die aufgrund von Benutzereingaben
auftreten, sollen in geeigneter Weise
angezeigt werden. Zudem soll während der
Kommunikation über AJAX ein animierter
Ladebalken eingeblendet werden. Das Layout
aller Strukturen und Widgets auf der
erstellten Webseite soll soweit wie möglich
über CSS definiert werden.
Überlegen Sie sich eine Möglichkeit wie man
die einzelnen Feeds (semi-) automatisch mit
geeigneten
Piktogrammen
oder
Icons
versehen könnte. Halten Sie dies schriftlich in
einer Textdatei fest und checken Sie diese
Der ersten Kommentar sollte beispielsweise
nicht lauten: /* if a=2 then return
true */.
Vor
jeder
CSS-Klasse
bitte
einen
beschreibenden
Kommentar
einfügen.
Wichtige Elemente innerhalb der HTMLDatei(en)
bitte
ebenfalls
ausreichend
kommentieren.
Programmierrichtlinien
Bitte halten Sie sich beim Programmieren an
die nachstehenden Richtlinien – die Richtlinienkonformität geht in die Bewertung Ihrer
Lösung mit ein! Bitte beachten Sie, dass sich
die Richtlinien je nach Programmiersprache
von Aufgabenblatt zu Aufgabenblatt leicht
unterscheiden können.
Bitte beachten Sie, dass diese Aufgabe so
gestellt ist, dass objektorientiertes Design
nicht zwingend erforderlich ist. Die
JavaScript-Funktionen
mit
der
Objektorientierung richtig in Einklang zu
bringen, erfordert einige Erfahrung und ist
nur bei umfangreicheren Projekten sinnvoll.
Sprache
Kommentare und sämtliche Bezeichnungen
sind in Englisch zu verfassen.
Zeilenlänge und Einrückung
Die Zeilenlänge darf 80 Zeichen nicht
überschreiten.
Die Einrückungstiefe beträgt vier Leerzeichen.
Kurze Kommentare
Kurze Kommentare dienen zur Verbesserung
der Lesbarkeit des Codes:
if (a == 2) {
return TRUE; /* special case */
} else {
return isPrime(a); /* works only for odd 'a' */
}
6
Klassen-, Methoden- und
Funktionskommentare für
JavaScript
Für Klassen- und Methodenkommentare
sollte JavaDoc/Doxygen verwendet werden.
Bei Klassen sollten die Autoren und Versionen
genannt werden. Bei Methoden und
Funktionen sind die Parameter zu erklären.

Variablen:
Möglichst
kurze
„sprechende“
Bezeichnungen
in
lowerCamelCase.

Temporäre Variablen dürfen auch ein
Zeichen wie „i“ als Namen haben.
/**
* Short class description
* (one sentence).
*
* Extended descriptions
*
* @author name_of_author
* @author name_of_author2
* @version date_of_last_change
*/
function Example {
[...]
}
/**
* Short method description
* (one sentence).
*
* Extended descriptions
*
* @param accuracy Defines the type
*
of the shape:
*
0=precise, 1=fast
*
approximation
* @return Number of matching
*
datasets.
*/
function GetNumberOfExamples(
accuracy) {
[...]
}
Namenskonventionen

Generell: Bitte „CamelCase“ verwenden,
zum
Beispiel
CamelCaseLooksLikeThis.

Klassen und Interfaces: Einfache
Substantive in UpperCamelCase.

Öffentliche Methoden und Funktionen:
Einfache Verben oder sprechende
Bezeichnungen, in UpperCamelCase.

Sonstige Methoden: Einfache Verben
oder
sprechende
Bezeichnungen
lowerCamelCase.
7
Bewertungskriterien
Punkte
Der Web-Applikations-Server Tomcat wurde korrekt installiert und das Ant-Skript
lässt sich ausführen und aktualisiert sowohl den Feed-Server als auch die
Weboberfläche.
2
Der komplette Quellcode ist standardkonform. Er enthält keine offensichtlichen
Speicher- und Ressourcenlecks oder offensichtlich semantisch falsch verwendete
Sprachkonstrukte.
Die JavaScript-Teile der Aufgabe sind sinnvoll dokumentiert und befolgen die
Programmierrichtlinien (Dokumentation analog zu Java). Zudem ist der HTML-Code
dokumentiert, CSS-Klassen sind sinnvoll benannt. Die Oberfläche lässt sich im VISGSPool in einem Browser Ihrer Wahl anzeigen, nachdem der Anwendungs-Code auf dem
Webserver deployed wurde.
3
Die Weboberfläche lässt sich ohne Fehler aufrufen und ist robust im Hinblick auf
sämtliche möglichen Benutzerinteraktionen.
2
Es gibt innerhalb der Weboberfläche eine Möglichkeit neue News-Feeds zu
abonnieren. Zum Beispiel in Form eines Texteingabefeldes und eines Buttons für das
Abonnement.
3
Es wird auf der Oberfläche eine Liste der abonnierten News-Feeds angezeigt, aus der
ein bestimmter Feed selektierbar ist und die sich bei Abonnement neuer sowie dem
Abbestellen vorhandener Feeds automatisch aktualisiert. Das Abbestellen soll ebenfalls
über die Liste möglich sein.
3
Wird ein abonnierter Feed ausgewählt so erscheinen der Titel und das Datum (sofern
vorhanden) der aktuellen Nachrichten in einer weiteren Liste oder Tabelle. Dabei
sollen sowohl die Nachrichten-Seite selbst als auch die einzelnen Nachrichten auf
einen Mausklick hin in einem neuen Fenster (ohne Menü und Toolbar) geöffnet
werden. Gelesene Nachrichten sollen als bereits gelesen markiert werden.
4
Für alle abonnierten Feeds soll regelmäßig auf dem Server nachgefragt werden, ob
neue Nachrichten eingetroffen sind ist dies der Fall so soll dies dem Benutzer
signalisiert werden und neue Nachrichten als noch nicht gelesen markiert werden (z.B.
durch farbliche Kennzeichnung).
3
Jegliche Kommunikation mit dem Server soll über AJAX erfolgen. Fehler, die aufgrund
von ungültigen Benutzereingaben oder Serverfehlern auftreten, müssen geeignet
abgefangen und an den Benutzer weitergeleitet werden.
2
Während eines AJAX-Requests soll ein animierter „Ladebalken“ eingeblendet werden,
der nach Ende der Kommunikation wieder abgeschaltet wird.
2
Innerhalb der HTML-Seite werden Elemente ausschließlich zur Strukturierung der
Inhalte eingesetzt. Die Layoutinformation ist in CSS ausgelagert.
2
Im SVN befindet sich eine Textdatei mit einer kurzen Erläuterung dazu, wie man
zusätzlich zum Namen einer Newsseite bzw. deren Link auch noch ein Icon für die
Seite zuordnen und anzeigen könnte.
2
Die Überlegungen aus dem vorigen Punkt wurden implementiert.
2
Gesamtpunktzahl
30
8