Darstellung von Übersichtsseiten und Präsentationen

Transkript

1 Darstellung von Übersichtsseiten und Präsentationen Von: Veranstaltung: Konzepte und Methoden der Web- Programmierung WS 05/06

2 Gliederung 1. Aufgabenstellung 2. Ist Analyse und Motivation 3. Realisierungsvorstellung a) Visualisierung b) Technologien und Konzepte c) Schnittstellen d) Notwendige Daten e) SMIL - Erstellung Thema: Darstellung von Übersichtsseiten und Präsentationen 2

3 1. Aufgabenstellung Übersichtsseiten Beinhaltet Topics, Vorlesungsreihen, Vorlesungsgruppen, Vorlesungen Auswahl verfügbarer Streams Abspielen im Realplayer Anordnung und Wiedergabe ausgewählter Streams Anzeigen von Zusatzinformationen Thema: Darstellung von Übersichtsseiten und Präsentationen 3

4 2. Ist-Analyse und Motivation Schwer Überschaubar => Umstrukturierung notwendig Feste Anzahl an Streams Größere Flexibilität gewünscht => Konzept für die Darstellung einer variablen Anzahl an Streams Statische Aufteilung des Players Schwierig, verschiedene Abspielsituationen zu realisieren => Aufteilung muss an die Situation angepasst werden ( Thema: Darstellung von Übersichtsseiten und Präsentationen 4

5 3. Realisierung. Visualisierung. Übersichtsseiten Strukturierung der Übersichtsseiten Thema: Darstellung von Übersichtsseiten und Präsentationen 5

6 3. Realisierung. Visualisierung. Übersichtsseiten Die Übersichtsseite am Beispiel Typ 1 Typ 2 1. Schritt: Auswahl eines Typs Typ 3 Thema: Darstellung von Übersichtsseiten und Präsentationen 6

7 3. Realisierung. Visualisierung. Übersichtsseiten Die Übersichtsseite am Beispiel Typ 1 Topic 1 Topic 2 Topic 3 1. Schritt: Auswahl eines Typs 2. Schritt: Auswahl eines Themas Topic 4 Topic 5 Thema: Darstellung von Übersichtsseiten und Präsentationen 7

8 3. Realisierung. Visualisierung. Übersichtsseiten Die Übersichtsseite am Beispiel Typ 1 Topic 2 Series 1 Series 2 Series 3 1. Schritt: Auswahl eines Typs 2. Schritt: Auswahl eines Themas 3. Schritt: Auswahl einer Vorlesungsreihe Thema: Darstellung von Übersichtsseiten und Präsentationen 8

9 3. Realisierung. Visualisierung. Übersichtsseiten Die Übersichtsseite am Beispiel Typ 1 Topic 2 Series 1 Lecture 1 Lecture 2 Lecture 3 1. Schritt: Auswahl eines Typs 2. Schritt: Auswahl eines Themas 3. Schritt: Auswahl einer Vorlesungsreihe 4. Schritt: Auswahl einer Vorlesung Thema: Darstellung von Übersichtsseiten und Präsentationen 9

10 3. Realisierung. Visualisierung. Übersichtsseiten Die Übersichtsseite am Beispiel 5. Schritt: Typ 1 Auswahl der wiederzugebenden Streams Topic 2 Series 1 Lecture 1 Stream 1 Stream 2 1. Schritt: Auswahl eines Typs 2. Schritt: Auswahl eines Themas 3. Schritt: Auswahl einer Vorlesungsreihe 4. Schritt: Auswahl einer Vorlesung Thema: Darstellung von Übersichtsseiten und Präsentationen 10

11 3. Realisierung. Visualisierung. Übersichtsseiten Die Übersichtsseite am Beispiel 5. Schritt: Typ 1 Auswahl der wiederzugebenden Streams Topic 2 Series 1 Lecture 1 Stream 1 Stream 2 1. Schritt: Auswahl eines Typs 2. Schritt: Auswahl eines Themas 3. Schritt: Auswahl einer Vorlesungsreihe 4. Schritt: Auswahl einer Vorlesung Bestätigung der Auswahl mit Klick auf einen Button Thema: Darstellung von Übersichtsseiten und Präsentationen 11

12 3. Realisierung. Visualisierung. Player Bisherige Aufteilung immer Statisch Thema: Darstellung von Übersichtsseiten und Präsentationen 12

13 3. Realisierung. Visualisierung. Player Variationsmöglichkeiten für Aufteilung des Players Auflistung möglicher Aufteilungen des Players abhängig von Benutzerauswahl Zuteilung visueller Streams zu Player - Regionen Thema: Darstellung von Übersichtsseiten und Präsentationen 13

14 3. Realisierung. Visualisierung. Player Beispiel für 3 ausgewählte Video-Streams Thema: Darstellung von Übersichtsseiten und Präsentationen 14

15 3. Realisierung. Visualisierung. Player Beispiel für 4 ausgewählte Video-Streams Thema: Darstellung von Übersichtsseiten und Präsentationen 15

16 3.Realisierung. Technologien und Konzepte Technische Umsetzung der Darstellung Verwendung von HTML in Templates JavaScript Von der Übersicht zum Abspielen Abfragen eines Datenobjektes mit allen notwendigen Daten Generieren einer SMIL-Datei Außerdem benötigt PHP, OOP Thema: Darstellung von Übersichtsseiten und Präsentationen 16

17 3.Realisierung. Schnittstellen Sprachinformation Datenobjekt mit Bezeichnungen und Streams Thema: Darstellung von Übersichtsseiten und Präsentationen 17

18 3.Realisierung. Notwendige Daten / Datenbank Thema: Darstellung von Übersichtsseiten und Präsentationen 18

19 3.Realisierung. Animation Animation nur bei Standartauswahl der Streamdarstellung Animierte Streamelemente werden in der Animationstabelle erfasst neue Positionen und Startzeit der Animation bzgl. der Streamelemente werden gespeichert Thema: Darstellung von Übersichtsseiten und Präsentationen 19

20 3.Realisierung. Animation Beispiel einer möglichen Animationsabfolge 1 2 Standarddarstellung Eintrag und 2 werden auf die Breite 0 reduziert und 3 vergrößert Wiederherstellen der Standartansicht, 3. Eintrag 1. Eintrag 2. Eintrag Einträge beziehen sich ab erster Animation auf die Animationstabelle Nach hinterlegter Anzeigedauer wird 2. Eintrag ausgeführt, 1 vergrößern und Position von 2 und 3 verändern, 3 verkleinern, 2 vergrößern Thema: Darstellung von Übersichtsseiten und Präsentationen 20

21 3.Realisierung. SMIL-Erstellung streams Stream_ID lecture_id stream_typ_id stream_group_id position_in_group start_time_in_sec duration_in_sec width_in_px height_in_px dictionary_id_url <smil> <head> <layout> <root-layout width='720' height='370'/> <region id= region1' fit='fill' top='0' left='0' width='240' height='185' /> <region id= region2' fit='fill' top='0' left='240' width='480' height='370' /> <region id= region3' fit='scroll' top='185 left='0' width='240' height='185' /> </layout> </head> <body> <par> <seq> <video region= region1' src= video2.rm'/> </seq> <seq> <video region= region2' src= video1.rm'/> </seq> </par> </body> <smil> Thema: Darstellung von Übersichtsseiten und Präsentationen 21

22 Weitere Anwendungsmöglichkeiten Nutzung des Präsentationstyps und der Verarbeitungsstruktur ermöglichen z.b. Produktpräsentationen Videokonferenzen Thema: Darstellung von Übersichtsseiten und Präsentationen 22

23 Ende Vielen Dank für die Aufmerksamkeit Fragen? Diskussionsbedarf? Thema: Darstellung von Übersichtsseiten und Präsentationen 23