Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

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

Ähnliche Präsentationen


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

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

2 - 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 - 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 - Die Art der Programmierung (Servlet, Applet, JSP) - Bestandteile der Galerie

4 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 - Eine Verwaltung für die Galerien - einer nahezu von der Auflösung unabhängige Darstellung

5 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 Kommentare Grossbildansicht Steuerungsleiste Vorschauansicht Der Aufbau der Bildergalerie Zu jedem Bild wird ein Kommentar angezeigt

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

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

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

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

11 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 Steuerungsleiste Galerieauswahl BildnummerauswahlBildvorschau Grossbildansicht Hier kann zwischen verschiedenen Galerien gewechselt werden

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

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

15 Die Steuerungsleiste Galerieauswahl BildnummerauswahlBildvorschau Grossbildansicht Dieser Button lässt die Grossbildansicht ein Bild weiter springen

16 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 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. unter Verwendung von Formularen, falls JavaScript nicht aktiv sein sollte.

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

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

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

21 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 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 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 Bilddimensionsarray nimmt die Werte: - Breite, Höhe und als Zusatzparameter - eine Prüfziffer für das Bildformat 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ß

25 Das Hauptbild Zur Darstellung der Hauptbildes werden die Bildabmessungen im HTML-Kopf definiert. Im Anschluß erfolgt die erste Anwendung der Prüfziffer: 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: - 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. bis 450 Pixel bis 400 Pixel Framebreite:Darstellung: 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 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 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 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 (Auszug) 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

31 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 Erstellen einer neuen Galerie - Das Hinzufügen einer neuen Galerie ist in Assistent Form gestaltet. - Assistent wird über Button Hinzufügen aufgerufen

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

34 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 Galerieordner erstellen und Bilder kopieren - Ordner mit gleichem Namen wie Galerie wird erstellt. - Bilder werden von UploadFiles in neuen Ordner kopiert.

36 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: AmerikaDateiname: Amerikainfo.dat - Info.dat wird erst angelegt, sobald Kommentare zu Bildern geschrieben werden.

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

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

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

40 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 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 (http://novix.ee.fh-lippe.de:8080/jnews/html/jnm_start.jsp)http://novix.ee.fh-lippe.de:8080/jnews/html/jnm_start.jsp Fehlerparameter: [Typ], [Ursprung] Verweis auf index.jsp (Startseite des ges. Projektes)

43 Realisierung der Sicherheitsabfragen - 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. - ein Scriptlet auf unseren Projektseiten

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

45 Probleme und bekannte Fehler I. Die Acht: Zum Ende der Projektphase fielen uns noch einige Fehler auf: Acht Einträge im Ordner Galleries... Keinen Kommentar II. Galerien: beim Löschen einer (Default-) Galerie bei Anwesenheit v. Besuchern Lsg. Vors.: noch keiner, Fehler trat zu kurzfristig auf 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: 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... 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. III. Zentrale CSS-Dateien, Browserspezifisch angepasst. IV. Zentrale JS-Dateien, Browserspezifisch angepasst.

47 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 - Buttons - Admin- Information in Session Ihnen für die Aufmerksamkeit !


Herunterladen ppt "Eine Projektarbeit von: Thorsten Stücke, Carsten Kammann, Frank Wellhausen."

Ähnliche Präsentationen


Google-Anzeigen