Eine Projektarbeit von:. Thorsten Stücke,. Carsten Kammann,

Präsentation zum Thema: "Eine Projektarbeit von:. Thorsten Stücke,. Carsten Kammann,"—  Präsentation transkript:

1 Eine Projektarbeit von:. Thorsten Stücke,. Carsten Kammann,
Eine Projektarbeit von: Thorsten Stücke, Carsten Kammann, Frank Wellhausen

2 Der Überblick - Aufgabenstellung
- Zielsetzung: Was muss unser Programm enthalten - Die Bildergalerie - Hauptbildansicht - Vorschaubilder - Steuerung - Kommentare - Die Galerieverwaltung und Uploadfunktion - Galerien erstellen - Kommentare bearbeiten - Galerien entfernen - Aspekt Sicherheit - nicht angemeldete Benutzer abweisen - angemeldete Benutzer auf Berechtigung prüfen - Abspann - bekannte Fehler, Probleme - Lösungsansätze - Verbesserungsvorschläge - Tipps / Hinweise / Ratschläge

3 Unsere Aufgabe war... - Das Erstellen einer Bildergalerie für das Projekt „Java News & Music“ - Die einzige Vorgabe: - Größe des Darstellungsbereichs - Offen gelassen wurde: - Das Layout der Galerie - Bestandteile der Galerie Die Art der Programmierung (Servlet, Applet, JSP)

4 Unsere Zielsetzung Die Bildergalerie sollte unserer Vorstellung nach enthalten: - Eine Großansicht des Bildes - Eine Vorschauansicht von fünf Bildern - Ein Kommentar zu jedem Bild - Eine Steuerung mit... - Bild vor- und zurück Funktion - Eine Direktauswahl - der Möglichkeit per Klick auf die Voransicht das Vollbild zu bekommen - der Auswahl zwischen verschiedenen Galerien - einer nahezu von der Auflösung unabhängige Darstellung - Eine Verwaltung für die Galerien

5 Unsere Zielsetzung Die Galerieverwaltung sollte folgende Funktionen beinhalten: - Neue Galerien erstellen - Kommentare bearbeiten - Galerien löschen Das alles ohne Verwendung von Windows Programmen wie Explorer oder Editor usw.

6 Die Bildergalerie Der Aufbau der Bildergalerie Kommentare Grossbildansicht Steuerungsleiste Vorschauansicht Zu jedem Bild wird ein Kommentar angezeigt

7 Die Bildergalerie Der Aufbau der Bildergalerie Kommentare Grossbildansicht Steuerungsleiste Vorschauansicht Das Bild wird in realer Größe dargestellt

8 Die Bildergalerie Der Aufbau der Bildergalerie Kommentare Grossbildansicht Steuerungsleiste Vorschauansicht Der Benutzer kann zwischen Galerien und Bildern navigieren

9 Die Bildergalerie Der Aufbau der Bildergalerie Kommentare Grossbildansicht Steuerungsleiste Vorschauansicht Fünf Bilder werden im Kleinformat als Vorschau dargestellt

10 Die Bildergalerie Die Kommentare - sind einzeilig - wurden auf 50 Zeichen begrenzt - werden in ...info.dat Dateien gespeichert [weitere Informationen dazu später]

11 Die Bildergalerie Die Grossbildansicht - Die Bilddimensionen werden ermittelt - Prüfung auf Hoch- oder Querformat Anpassung ans Layout - zu große Bilder werden verkleinert - passende Bilder werden in Realgröße dargestellt

12 Die Bildergalerie Die Steuerungsleiste Grossbildansicht Galerieauswahl Bildnummerauswahl Bildvorschau Hier kann zwischen verschiedenen Galerien gewechselt werden

13 Die Bildergalerie Die Steuerungsleiste Grossbildansicht Galerieauswahl Bildnummerauswahl Bildvorschau Hier kann ein Bild nach seiner Nummer ausgewählt werden

14 Die Bildergalerie Die Steuerungsleiste Grossbildansicht Galerieauswahl Bildnummerauswahl Bildvorschau Dieser Button lässt die Vorschauansicht fünf Bilder weiter springen

15 Die Bildergalerie Die Steuerungsleiste Grossbildansicht Galerieauswahl Bildnummerauswahl Bildvorschau Dieser Button lässt die Grossbildansicht ein Bild weiter springen

16 Die Bildergalerie Die Vorschauansicht Es werden fünf Bilder angezeigt pro Bild steht ein Bereich von 80x80 Pixel zur Verfügung - Unterschieden wird zwischen Hoch-, Querformat und quadratischen Bildern Hochformat: Höhe 78 Pixel, Breite 56 Pixel - Querformat: Höhe 56 Pixel, Breite 78 Pixel quadratische Bilder: Höhe 78 Pixel, Breite 78 Pixel

17 - Ermittlung einer Startgalerie
Galerieindex Wozu diese Seite ? Die „galeryindex.jsp“ dient der Initialisierung der Seite „gallery.jsp“ in Bezug auf : - Ermittlung einer Startgalerie - Ermittlung der browserspezifischen Anzeigebereiche in Bezug auf das Hauptframe. (in dem die Galerieseiten angezeigt werden.) - Automatisch unter Verwendung von JavaScript- Elementen unter Verwendung von Formularen, falls JavaScript nicht aktiv sein sollte.

18 Galerieindex Das JavaScript: Masse für Internet-Explorer:
Masse für nicht Internet-Explorer: automatische Übermittlung

19 Schematischer Initialisierungsablauf:
Galerieindex Schematischer Initialisierungsablauf: Seitenaufruf initTyp else Defaultgalerie ermitteln “initialize“ Masse als Parameter ? nein JavaScript Masse der Session hinzufügen Script: Masse ermitteln Fromular: Masse auswählen Redirect  gallery.jsp Submit Übergabe Masse als Parameter

20 Die Bildergalerie Der technische Aufbau
Browser: Opera Ermittlung der min. Abmessungen, mit dem Browser von Opera da hier der Anzeigebereich am kleinsten ist. B x H: 492x472 Das Layout wird zum Teil neu errechnet: 30 20 25 86 feste Höhen: errechnete Höhen: 305 feste Positionen (links,oben): (1,1) (1,32) (1,53) errechnete Positionen : (1,359) (1,385) horizontaler, vertikaler Abstand: 1 Alle Angaben in Pixel !

21 Durchsuchen der Ordner nach Galerien
Die Bildergalerie Durchsuchen der Ordner nach Galerien - Grundordner aller Galerien ist „Galleries“ - Jede Galerie hat einen eigenen Ordner Beispiel: Bilder zur Galerie „Amerika“ liegen im Ordner „Galleries/Amerika“, d.h: Ordnername = Galeriename - Bei jedem Aufruf der Site wird Ordner „Galleries“ nach vorhandenen Galerien durchsucht.

22 Die Bildergalerie Durchsuchen der Galerien nach Bildern Wenn in einer Galerie Bilder gefunden werden, werden diese durchgezählt und fortlaufend durchnummeriert und in ein Array geschrieben Danach wird dann der Name des Bildes mit der zughörigen Galerie an die Klasse FileSeeker übergeben

23 Die Bildergalerie Klasse FileSeeker Das Bild wird über ein AWT Toolkit vollständig in den MediaTracker geladen Danach können dann Höhe und Breite bestimmt werden

24 Bildimensionen erfassen
Die Bildergalerie Bildimensionen erfassen ermitteln, ob es sich um ein - Hochformatbild - Querformatbild - quadratisches Bild handelt ob das Bild in realer Größe dargestellt werden kann bzw. angepasst werden muß Bilddimensionsarray nimmt die Werte: - Breite, Höhe und als Zusatzparameter - eine Prüfziffer für das Bildformat

25 Die Bildergalerie Das Hauptbild
Zur Darstellung der Hauptbildes werden die Bildabmessungen im HTML-Kopf definiert. <head> </head> Im Anschluß erfolgt die erste Anwendung der Prüfziffer: <body> </body> Der Ausdruck: (dimens[p-1][2]-(dimens[p-1][2]%4)) ergibt für Werte >= 4 das Ergebnis 4 , sonst das Ergebnis 0

26 Die Navigationsleiste:
Die Bildergalerie Die Navigationsleiste: - ist auf eine maximale Breite von 500 Pixeln und wurde auf eine minimale Breite von 200 Pixeln begrenzt. - ist über 5 festgesetzte Stufen „variabel“, nicht nötige Elemente werden entfernt. Framebreite: Darstellung: bis 450 Pixel bis 400 Pixel bis 350 Pixel bis 300 Pixel 200 bis 250 Pixel Die Steuerung erfolgt über Formulare, teilweise in Verbindung mit JavaScript Das Formular ruft die Seite „Galerie.jsp“ selbst auf, die gewünschte Bildnummer und (oder) der Galerienamen werden als Parameter übergeben.

27 Die Select-Felder der Navigationsleiste
Die Bildergalerie Die Select-Felder der Navigationsleiste Rückblick : Durchsuchen von Ordnern ! Erneuter Zugriff auf das „ordner“- Array Sollte das Array min. einen Eintrag enthalten, wird das „Selectfeld“ um die auszuwählenden Namen der Galerien ergänzt. JavaScript: - onChange-Event Für den Fall das ein Element einen geänderten Wert erhalten hat - this.options[this.selectedIndex].value: Das aktuelle Formular, den Wert der aktuellen „Option“ ... ...an die Seite „gallery.jsp“ als Parameter Gallery übermitteln.

28 Die Bildergalerie Die Vorschaubilder
Es werden immer 5 „Bilder“ angezeigt. Reicht die Anzahl der Bilder nicht aus um (weitere) 5 Bilder anzuzeigen, wird je fehlendes Bild ein „Dummi.gif“ als Platzhalter eingefügt. Ein kleiner grafischer Effekt: - das aktuell angezeigte Hauptbild wird in der Vorschauleiste blau, die restlichen grau markiert

29 Berechnung: Navigationsvariablen
Die Bildergalerie Berechnung: Navigationsvariablen (Auszug) Es werden vier Basisvariablen zur Steuerung berechnet. Die Berechnung erfolgt aufgrund des aktuell anzuzeigenden Bildes. Berechnet werden Bildnummern für das - das nächste, vorherige Bild - das erste, letzte Vorschaubild Andere Bildnummern die zur Steuerung benötigt werden können abgeleitet werden. Zusätzlich behandelt werden müssen Grenzfälle wie: - erstes und letztes Bild der Galerie - erstes und letztes Bild der Vorschaubilder

30 Generierung der Vorschauleiste
Die Bildergalerie Generierung der Vorschauleiste <head> </head> <body> </body>

31 Die Galerieverwaltung
Allgemeines zur Galerieverwaltung - Zur Galerieverwaltung kommt man über den Button „Edit“ - Button „Edit“ erscheint nur, wenn Administrator angemeldet ist - Nur Administrator hat Zugriff auf Galerieverwaltung Der Admin hat die Optionen: Galerien erstellen Galerien löschen Bilder hinzufügen Kommentare ändern

32 Die Galerieverwaltung
Erstellen einer neuen Galerie - Das Hinzufügen einer neuen Galerie ist in Assistent Form gestaltet. - Assistent wird über Button „Hinzufügen“ aufgerufen

33 Die Galerieverwaltung
Bilderupload - Bilder werden schrittweise hochgeladen. - Upload erfolgt durch UploadBean ins Verzeichnis „UploadFiles“ Das UploadBean wurde der Vollständigkeit halber ins Programm eingefügt. Genauere Informationen zum Quellcode gibt es im Ordner „UploadDoku“ - Bereits hochgeladene Bilder werden angezeigt, indem der Ordnerinhalt von „UploadFiles“ aufgelistet wird.

34 Die Galerieverwaltung
Bilderupload - Letztendliche Sicherung im eigentlichen Galerieordner erfolgt nach Eingabe eines Galerienamens. - Wählt man einen schon bestehenden Galerienamen, wird das Bild der bestehenden Galerie hinzugefügt. - Wird der Assistent zwischendurch abgebrochen, bleiben bereits hochgeladene Bilder in der Liste erhalten. Ordner „UploadFiles“ wird erst nach vollständiger Fertigstellung des Assistenten geleert.

35 Die Galerieverwaltung
Galerieordner erstellen und Bilder kopieren - Ordner mit gleichem Namen wie Galerie wird erstellt. - Bilder werden von „UploadFiles“ in neuen Ordner kopiert.

36 Die Galerieverwaltung
Kommentare bearbeiten Kommentare werden in einer Datei gespeichert. - der Name setzt sich zusammen aus: - dem Namen der Galerie und - dem Textzusatz “info.dat“ Beispiel: Galeriename: Amerika Dateiname: Amerikainfo.dat - Info.dat wird erst angelegt, sobald Kommentare zu Bildern geschrieben werden.

37 Die Galerieverwaltung
Kommentare bearbeiten - Kommentarbearbeitung erfolgt über Tabelle. Bildname  Kommentar - Der Kommentar ist einzeilig und kann maximal Zeichen lang sein. In Galerie enthaltene Bilddateien Kommentare der zugehörigen ...info.dat (wenn vorhanden)

38 Die Galerieverwaltung
Wenn keine Info.dat vorhanden... - Kommentarzeile zeigt Meldung „Keine Info.dat vorhanden“ - folglich: Kommentare sind zum Betrieb der Galerie nicht zwingend erforderlich.

39 Die Galerieverwaltung
Geänderte Kommentare sichern - Klick auf Button „sichern“ speichert Kommentare. - Info.dat wird jedesmal neu überschrieben. - Dies geschieht durch FileWriter

40 Die Galerieverwaltung
Das Entfernen von Galerien - Es können nur ganze Galerien gelöscht werden - Löschung erfolgt in drei Schritten: 1. Löschen aller Bilddateien in dem Galerieordner 2. Löschen des Galerieordners 3. Löschen der Info.dat

41 Aspekt: Sicherheit Administration via Internet: Ja Sicherheit ? Spätestens an dieser Stelle muß man sich die Frage stellen, welchen Personen (Usern) ein Zugriff via Internet auf den Bereich der Galerieverwaltung - auf alle, spezielle Projektseiten gewährt wird. - Registrierte User haben Zugriff auf die Bildergalerie. - Administratoren haben Zugriff auf das gesamte Projekt. - nicht registrierte bzw. nicht “angemeldete“ User werden mit Fehlerhinweis zur Anmeldeseite verwiesen.

42 Die Startseite ohne Login
Aspekt: Sicherheit Die Startseite ohne Login ( Fehlerparameter: [Typ], [Ursprung] Verweis auf index.jsp (Startseite des ges. Projektes)

43 Realisierung der Sicherheitsabfragen
Aspekt: Sicherheit Realisierung der Sicherheitsabfragen - ein Scriptlet auf unseren Projektseiten - Loginname wird aus der Session ausgelesen - Prüfung auf Loginname und Loginname = “Admin“ - Weiterleitung zur Seite “ErrorSwitch.jsp“ erfolgt, wenn kein Benutzer bzw. kein Admin angemeldet ist.

44 Aspekt: Sicherheit Die Seite: ErrorSwitch.jsp - dient als Fehlerverzweigung kann leicht verändert bzw. ergänzt werden in Bezug auf: - Fehlertyp - Fehlerursprung - auszulösender Aktion

45 Probleme und bekannte Fehler
Aspekt: Sicherheit Probleme und bekannte Fehler Zum Ende der Projektphase fielen uns noch einige Fehler auf: I. Die Acht: Acht Einträge im Ordner Galleries ... Keinen Kommentar  Lsg. Vors.: noch keiner, Fehler trat zu kurzfristig auf II. Galerien: beim Löschen einer (Default-) Galerie bei Anwesenheit v. Besuchern Lsg. Vors.: Folie 21, Ordner durchsuchen bzw. Ordnernamen ermitteln Die Namen der aktuellen (Default-) Galerie sind bekannt. Vergleich dieser Namen mit den ermittelten Ordnernamen Initialisierung ausführen ... III. JavaScript: Die Ermittlung des Darstellungsbereiches bereitet unter Internet Explorer V6.0 Probleme. (nicht unter V5.0; V5.5) Fehlerbehebung derzeit: auf Fehlerwerte prüfen, geg. Ersetzen. Lsg. Vors.: Darstellungsgröße bei Anmeldung ermitteln. IV. CSS-V 2.0.: Wird in speziellen Fällen (Browser u. Anwendung) nicht ordentlich interpretiert Lsg. Vors.: getrennte CSS- Dateien, je nach Browser-Typ (- Version), setzt eine Browserkennung voraus ...

46 Verbesserungsvorschläge:
Aspekt: Sicherheit Verbesserungsvorschläge: I. Layout ist „Geschmackssache“: Wer will kann einen „Pagekonfigurator“ erstellen, in dem der Benutzer die Anordnung der 5 Galerieteilbereiche flexibel einstellen kann, in Bezug auf z.B. - die Reihenfolge der Galerieteilbereiche die Ausrichtung dieser Teilbereiche (vertikal/ horizontal) II. einzelne Bilddateien löschen ... III. „Zentrale“ CSS-Dateien, Browserspezifisch angepasst. IV. „Zentrale“ JS-Dateien, Browserspezifisch angepasst. V. Wir möchten betonen, das die Punkte I./II. mit den in diesem Projekt vorgestellten Technologien umgesetzt werden können !! Ausführliche Informationen finden sich in der Dokumentation, bzw. alternativ in den nahezu vollständig kommentierten Quelltexten.

47 Aspekt: Sicherheit Outro  Wir bedanken uns bei:
- den Projektleitern, welche uns jederzeit mit Rat zur Verfügung standen - der Layoutgruppe für die Umsetzung einiger Wünsche hinsichtlich - Button‘s - Admin- Information in Session Ihnen für die Aufmerksamkeit !