Webcams

Technische Konzeptstudie zu einer Linksammlung mit Bildpräsentation

Ziel

Um Übertragungsvolumen vom Server zum Clienten zu minimieren, wurde bei dieser Linksammlung der Ansatz verfolgt, (ggf. vom Server produzierte) Datensätze mit JavaScript in einer Rumpf-HTML-Seite zu übertragen und den HTML-Code zur Darstellung der Links von einem zentralen JavaScript lokal generieren zu lassen.

Prinzipiell wird dieses Ziel erreicht. Eine Seite mit 57 Links, die im derzeitigen spartanischen Design ca. 193 KB in Anspruch nehmen würde, umfaßt für die HTML-Seite mit den Datensätzen ca. 17 KB und für das zentrale JavaScript ca. 16 KB (jeweils ohne die Popup-Funktionalität).

Daneben wurde auf die variable Darstellung der Bilder in Popup-Fenstern Wert gelegt und dabei der Tatsache Rechnung getragen, daß auch kleine Formate in vergrößerter Darstellung einen guten Eindruck vermitteln. Den Bildeindruck trüben weniger die Auflösung als vielmehr die Farb- und Kontrastmängel.

Die praktische Umsetzung förderte jedoch etliche Schwierigkeiten im Detail zutage, die vorwiegend mit den Browser-Unterschieden zusammenhängen.

Zeitaufwand

Das Projekt umfaßte ca. 4 Wochen.

Umsetzung

Ein Link zu einer Webcam wurde mit 8 Merkmalen erfaßt:

• Kategorie (meist eine Stadt), z.B. "Düsseldorf"
• URL der Originalbild-Website, z.B. "http://www.duesseldorf.de/cam/index2.shtml"
• URL des Originalbildes, z.B. "http://www.duesseldorf.de/webcam2/fullsize.jpg"
• Erläuterung, z.B. "Burgplatz, Schlossturm, St. Lambertus, Oberkasseler Brücke."
• Breite des Originalbildes, z.B. "352"
• Höhe des Originalbildes, z.B. "288"
• Name des Thumbnails, z.B. "thumb_d_burgplatz.jpg"
• Speichername, z.B. "d_burgplatz"

Zwei weitere Merkmale,

• Bildvergrößerung und
• Bilderneuerung,

werden vom Benutzer gewählt.

Die Thumbnails wurden aus repräsentativen Originalbildern hergestellt und spiegeln daher nicht aktuelle Originalbilder wieder. Sie dienen auch als Platzhalter, solange das Bild noch nicht geladen ist. Der Speichername steht, ergänzt um Datum und Uhrzeit, unter dem Originalbild und erleichtert die Namensfindung beim Abspeichern eines Bildes. Mit Strg-a, Strg-c kann der gesamte Inhalt des Popup-Fensters kopiert und mit Strg-v in das Feld "Dateiname" eingefügt werden. Alles, was auf die erste Zeile folgt, wird dabei ignoriert.

Download "webcam.zip" (<120 KB). Die aktuellen Webcam-Seiten einschl. aller Thumbnails stehen zum Download bereit, so daß sie lokal installiert werden können.

Technische Hinweise

In dieser Konzeptstudie wurde ein clientzentrierter Ansatz mit verschiedenen Varianten erprobt. Die Links sind mit ihren Merkmalen im Quelltext als zweidimensionales Array definiert. Der größte Teil des HTML-Codes wird erst beim Anwender von einem JavaScript generiert. Zuvor wird das Array nach der Kategorie sortiert. Innerhalb der Kategorie bleibt die im Quelltext vorgegebene Reihenfolge erhalten.

Für die regelmäßige Erneuerung der Bilder wurden verschiedene Techniken eingesetzt.

  Im Netscape Navigator 4.7 wird das Popup-Fenster regelmäßig von der aufrufenden Seite neu aufgerufen. Die fortlaufende Bildnummer wird in einer Feldvariable der aufrufenden Seite gespeichert.

    In Netscape 7.0 und Opera 6.01 tauscht ein JavaScript des Popup-Fensters das Bild regelmäßig aus. Die fortlaufende Bildnummer wird in einer Variable des Popup-Fensters gespeichert.

  Im Internet Explorer führt ein JavaScript des Popup-Fensters regelmäßig einen Reload durch. Die fortlaufende Bildnummer wird währenddessen im Fensternamen gespeichert.

Bug: Die Sortierung wird durch den Gebrauch von HTML-Umlauten (z.B. &uuml; für ü) fehlerhaft (z.B. Düsseldorf vor Darmstadt).

  Bug: Netscape 7.0 zeigt trotz gegenteiliger Anweisung Scrollbalken im Popup-Fenster. Konsequenz: Der Speichername wird nicht mehr rechts vom Originalbild, sondern unter das Originalbild und die Bildlegende auf das Originalbild gelegt.

  Bug: Netscape 7.0 verliert bei einem Reload des mit generiertem Code erzeugten Popup-Fensters die Orientierung und findet keine Dateien mit relativen Pfadangaben mehr (Stylesheet, thumbnail).

      Bug: Netscape und Opera 6.01 akzeptieren keine Anker in generierten Code eines Popup-Fensters. Links zu Textabsätzen sind damit nicht möglich.

  Bug: Opera 6.01 benötigt zum Aufbau einer Seite mit 57 Links bei lokal installierten Dateien ca. 38,0 Sekunden. (Zum Vergleich: Internet Explorer 6.0 ca. 0,3 Sekunden, Netscape 4.7 ca. 1,2 Sekunden, Netscape 6.0 ca. 1,4 Sekunden.) Wird während des Seitenaufbaus schon auf ein Link geklickt, hängt sich Opera auf.

  Bug: Opera 6.01 läßt den Reload eines mit generiertem Code erzeugten Popup-Fensters nicht zu.

  Bug: Opera 6.01 lassen sich HTML-Elementinhalte nicht dynamisch ändern.

  Bug: Opera 6.01 arbeitet fehlerhaft bei Befehlen zur Einschaltung der Statuszeile und der Menüleiste eines Popups. Auch die Lokalisation des Popup-Fensters gelingt erst mit einem zusätzlichen window.moveTo(0,0).

  Bug: Opera 6.01 ignoriert den Event-Handler onUnload und die HTML-Anweisung <title> bei einem mit generiertem Code erzeugten Popup-Fenster. (Der Event-Handler onLoad wird beachtet.)

  Bug: In Opera 6.01 gelingt es nicht, einen Zeilenumbruch zwischen einem Wort und einer Dropdownliste zu verhindern, weder mit <nobr></nobr>, noch mit <span style="white-space:nowrap;"></span> (wobei Netscape 4.7 auch abstürzt), noch mit einem verbindenden  .

  Bug: Netscape 4.7 vergißt häufig bei einer Veränderung der Fenstergröße, Teile des Inhalts darzustellen. Konsequenz: Das sattsam bekannte Problem wurde wie üblich mit dem Event-Handler onResize abgefangen.

  Bug: In Netscape 4.7 ist im generierten Code eines Popup-Fensters ein JavaScript nicht vorhanden. Ein Reload oder Bildertausch durch ein Script des Popup-Fensters ist damit nicht möglich.

  Bug: In Netscape 4.7 sind im generierten Code eines Popup-Fensters die Bilder nicht ansprechbar. Das Image-Array hat die Länge 0. Damit ist auch kein Bildertausch durch die aufrufende Seite möglich.

  Bug: Netscape 4.7 interpretiert HTML-Sonderzeichen "größer als" und "kleiner als" wie im unten aufgeführten Beispielcode zunächst als HTML-Code. Erst nach einem Reload wird der Text richtig dargestellt.

  Bug: Netscape 4.7 beachtet nicht immer die eigentlich erzwungene Leerstelle mit  , so daß z.B. ein Bild und ein Wort bei bestimmter Fensterbreite doch zusammenrücken.

  Bug: Der Internet-Explorer stürzt ab, wenn im generierten Code des Popup-Fensters ein externes JavaScript, z.B. mit

myWin.document.open(); [...]
myWin.document.writeln('<SCR'+'IPT language="javascript" type="text\/javascript" src="campop.js"></SCR'+'IPT>');

eingebunden wird und der Befehl myWin.document.close(); erfolgt, ehe das Script vollständig geladen ist. Beim eingebundenen externen CSS mit

myWin.document.writeln('<li'+'nk rel="STY'+'LESHEET" type="text\/css" href="cam.css">');

ist das Problem noch nicht aufgetreten. Konsequenz: Keine Einbindung eines externen JavaScripts in generierten HTML-Code eines Popup-Fensters.

  Bug: Der Internet-Explorer läßt im Popup-Fenster die dynamische Änderung des z-Index eines Layers nicht zu. In Opera und Netscape 7.0 keine Probleme.

Beispiel

Darstellung von drei Datensätzen zweier Kategorien.