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
oder Atom2 aggregiert und mittels eines
vereinfachten XML-Formats 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
1
http://de.wikipedia.org/wiki/Rss
2
http://www.atompub.org/
beliebiger Editor verwendet werden. Die
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. Zudem ist beim
Einsatz neuer webbasierter Anwendungen
kein
zusätzlicher
Installationsaufwand
notwendig.
Die wichtigsten Standards für webbasierte
Anwendungen sind die Hypertext Markup
Language (HTML) für die Erstellung von
Weboberflächen, sowie das
Hypertext
1
Transfer Protocol (HTTP) welches Basis für
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 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 dieses
sogenannte „Session-Handling“ zum Einsatz
kommen. Gängige Verfahren sind „URLRewriting“,
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
3
http://tools.ietf.org/html/rfc2965
2
„Browser“
bescherten.
Sollen
Inhalte
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 hierfür 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.
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.
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.
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
Für das Scripting von HTML-Webseiten steht
das sogenannte Document Object Model zur
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.
Anmerkung:
Falls Sie noch nie in JavaScript programmiert
haben sollten, arbeiten Sie sich bitte mit Hilfe
der
unter
Quellen
und
Tutorials
referenzierten Materialien ein.
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.
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
3
Daten mit einem Webserver asynchron
auszutauschen. Dies bietet neben Vorteilen
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 hierfür angeführtes
Beispiel 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) {
xmlHttp = null;
}
}
}
Innerhalb der im Beispiel „inline“ definierten
Funktion (diese kann man natürlich auch
auslagern) muss die eigentliche Verarbeitung
der Antwort auf den get-Request stattfinden.
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 über die Konsole. Ist der Aufruf
erfolgreich8 ü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, sollte die folgende Oberfläche
angezeigt werden:
if (xmlHttp) {
xmlHttp.open(‘GET’, url);
xmlHttp.onreadystatechange =
function {
//tue etwas
};
xmlHttp.send(null);
} else {
//Fehlerbehandlung
}
Hierbei
stellt
der
obere
Teil
die
Sonderbehandlung des Internetexplorers dar.
8
Tomcat benötigt Zugriff auf ein JDK um
korrekt zu funktionieren. Daher sollte die
Umgebungsvariable JAVA_HOME korrekt gesetzt
werden. Ob dies der Fall ist oder nicht erfahren
Sie, indem Sie in der Konsole „set JAVA_HOME“
aufrufen. Unter “Start->Control Panel>System->Advanced->Environment
Variables” können Sie Umgebungsvariablen
anlegen oder verändern.
4
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
nächstes das ant-file build.xml. In Eclipse
werden nun alle verfügbaren Ziele (Targets)
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&
feedUrl=http://localhost:8080/
FeedServer/beer.xml
http://localhost:8080/FeedServer/
feed.server?action=get_subscribed_fe
eds
http://localhost:8080/FeedServer/
feed.server?action=unsubscribe_feeds
&feedUrl=http://localhost:8080/
FeedServer/beer.xml
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
ü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
zu Schwierigkeiten. Zugriff auf das von Ihnen
zu erstellende HTML-Frontend erhalten Sie
demnach über:
5
http://localhost:8080/FeedServer/htm
l/<name_der_datei>
Die URL:
http://localhost:8080/FeedServer
wird übrigens automatisch auf die Datei
/html/index.html auf dem Server gemapt.
Wenn Sie diese Einstellungen ändern
möchten, dann passen Sie bitte die Datei
/web/WEB_INF/web.xml entsprechend an.
Aufgabenstellung
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
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 die Auswahl eines Links).
Handelt es sich um keine gültige URL so soll
die Fehlermeldung des Servers an den
Benutzer weitergeleitet 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.
Für
Tests
steht
Ihnen
unter
http://localhost:8080/FeedServer/
beer.xml ihr eigener Atom-FeedServer zur
Verfügung. Bitte nutzen Sie diesen während
der Entwicklung der Oberfläche, um bei
Anbietern von „echten“ Feeds keinen
unnötigen Datenverkehr zu erzeugen.
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.
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
unter dem Ordner „docs“ im SVN ein.
Versuchen Sie Ihre Überlegungen in einer
einfachen Implementierung umzusetzen.
Hinweise
Programmieren mit JavaScript kann vor allem
zu
Beginn
recht
anstrengend
sein.
Insbesondere da Fehlermeldungen der
Browser oftmals wenig Aufschluß über die
Ursache des Problems geben. Es wird daher
dazu geraten, Mozilla Fierfox mit der
6
„Firebug“-Erweiterung als Testbrowser zu
benutzen. Firebug9 bietet zusätzlich für
HTML, CSS und Cookies Hilfestellung. Ein
ganz
ähnliches
Hilfsmittel
ist
das
10
Webdeveloper-Addon . Hiermit lassen sich
unter anderem die Gültigkeit von HTML und
CSS bequem überprüfen. Gerade beim Einsatz
von
AJAX
steht
zusätzlich
mit
LiveHttpHeaders11 ein nützliches Tool zur
Verfügung. Hiermit lassen sich die httpAnfragen und Antworten aufzeichnen und
ansehen.
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
insbesondere bei umfangreicheren Projekten
sinnvoll.
Ein
objektorientierter
Programmierstil wird im Rahmen der
gestellten Aufgabe nicht verlangt.
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:
9
https://addons.mozilla.org/
de/firefox/addon/1843
10
https://addons.mozilla.org/
de/firefox/addon/60
11
https://addons.mozilla.org/
de/firefox/addon/3829
if (a == 2) {
return TRUE; /* special case */
} else {
return isPrime(a); /* works only for odd 'a' */
}
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.
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.
/**
* 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) {
[...]
}
7
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 lowerCamelCase.

Sonstige Methoden: Einfache Verben
oder
sprechende
Bezeichnungen
lowerCamelCase.

Variablen:
Möglichst
kurze
„sprechende“
Bezeichnungen
in
lowerCamelCase.

Temporäre Variablen dürfen auch ein
Zeichen wie „i“ als Namen haben.
8
Fragenkatalog
Sie müssen mindestens die Hälfte der
folgenden Fragen richtig beantworten, um das
Fachpraktikum erfolgreich abzuschließen.
Eine Frage gilt dann als richtig beantwortet,
wenn genau die richtigen Antworten markiert
sind. Es können beliebig viele Antworten pro
Frage richtig sein, also auch keine oder alle.
(X)HTML
1.
Welche der folgenden Fragmente stellen
repräsentiern
(korrekten
Kontext
vorrausgesetzt) gültiges XHTML?
 <div id=”5”>Inhalt</div>
 <div class=myClassX>Inhalt</div>
 <div class=”myClassX”/>
2. Welches der nachfolgenden (X)HTMLElemente (+Attibut) eignet für die
Darstellung
einer
Auswahl
von
verschiedenen Optionen?
 <select>…</select>
 <input type=“radio“>…</input>
 <input type=“checkbox“>
…</input>
3. Wie lassen sich ohne AJAX, also auf
herkömmliche Art und Weise in HTML
bzw. JavaScript http-Requests an einen
Server senden?
 Implizit mittels eines HTML-Links
(<a href=“…“>…</a>)
 Mit Hilfe eines Formular-Elements:
<form method=“get“ action=“…“>
…
<input type=“submit“>…</input>
</form>
 Mit Hilfe eines JavaScript-Aufrufs:
form.submit();
(Der Variablen „form“ wurde zuvor
ein Formularobjekt zugewiesen)
 Implizit über ein Image-Element:
<img src=“…“/>
4. Welche der aufgeführten Eventhändler
können in der angegebenen Reihenfolge
abgefragt werden um eine „Rollover“Funktionalität in HTML mit JavaScript zu
realisieren. Beispiel: Wenn ein Benutzer
die Maus über den Eintrag einer Liste
bewgt, dann soll dieser in einer anderen
Frabe hervorgehoben werden?
 onmousedown, onmouseup
 onmouseover, onmouseout
 onfocus, onblur
5. Früher wurde das Layout von HTMLSeiten häufig mittels Tabellen-Elementen
gesteuert. Welche Probleme bringt eine
solche Vorgehensweise mit sich?
 Keine Trennung von Inhalt und
Layout.
 Die Wartung solcher Seiten ist
mitunter aufwändiger als dies bei
Benutzung von CSS der Fall wäre.
 Die Nutzung von CSS bringt
Geschwindigkeitsvorteile
beim
Rendern von (X)HTML -Seiten.
CSS
6. Auf welche Art lassen sich externe CSSDefinitionen in (X)HTML einbinden?



<style type=”text/css”
href=”foo.css”></style>
<link rel=”stylesheet”
type=”text/css”
href=”foo.css”><link>
<style type=”text/css”>
@import url(“foo.css”)
</style>
7. Wie wird der Universalselector in CSS
notiert?
 ? {…}
 * {…}
 univ {…}
 + {…}
8. Welche der folgenden Aussagen trifft für
Kommentare in CSS zu?
 Ab der Zeichenfolge „//“ werde alle
weiteren Zeichenbis zum Ende der
Zeile als Kommentar interpretiert.
 Einzelne Zeilen die als Kommentar
interpretiert werden sollen müssen
mit „#“ beginnen.
 Kommentare
werden
mit
den
Zeichenfolgen „/*“ und „*/“ begrenzt.
9. Mit welchem der folgenden Selektoren
lässt sich in CSS2 ausschließlich den pElementen, die direkte Kinder eines divElements sind, ein bestimmtes Format
zuweisen?
 div *
 div > p
 div + p
 div, p
10. Wie sieht die Festlegung einer CSS-Klasse
„myClass“ aus, die allen Elementen mit
9
dem Attribut class=“myClass“ rote Schrift
auf blauem Hintergrund zuweisen soll?
 .myClass {
background-color:blue;
color: red;
}
 *.myClass {color:red;
background-color:blue;}
 .myClass {backgroundcolor;blue:color;red}
 Class myClass {
background-color = blue;
color = red;
}
beim Laden einer Seite
Funktionen aufzurufen?
JavaScript-

…
<body onload=“functionXY()“>
…
 …
<script
type=“text/javascript“>
document.onload=functionXY;
<script/>
…
 …
<script
type=“text/javascript“>
window.onload=functionXY;
<script/>…
JavaScript
11. Der Begriff „Ajax“ wird unter anderem
für:
 ein Waschmittel
 einen Fußballverein
 einen griechischen Helden
 asynchronous JavaScript and XML
verwendet.
12. Um im HTML_Context mit JavaScript die
Ausführung einer Aufgabe zeitlich zu
steuern benutzt man sinnvollerweise:



window.iterate()
window.setTimeout()
window.setInterval()
13. Welcher lautet der korrekte JavaScriptAufruf um auf den Textinhalt eines „div“Elementes mit der id „message“
zuzugreifen? Hier noch das Beispiel als
HTML-Fragment:
…<div id=“message“>Textinhalt<div/> …
Bitte
ignorieren
Sie
ungültige
Zeilenumbrüche bei der folgenden
Auswahl!

var elems =
docment.getElementsByTagName(“div“)
;
var text;
for (var i = 0; i < elems; i++) {
if (elems[i].getAttribute(“id”)
== message) {
text = elems[i].nodeValue;
}
}
 var text =
document.getElementById(“message“)
.firstChild.nodeValue;
 var text =
document.getElementById(“message“)
.lastChild.nodeValue;
14. Welche der nachfolgend aufgezählten
Möglichkeiten lassen sich dazu nutzen
10
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 geeignet 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
11