YouTube5 .0 Projektpräsentation

Präsentation zum Thema: "YouTube5 .0 Projektpräsentation"—  Präsentation transkript:

1 YouTube5 .0 Projektpräsentation
YouTube5 .0 Projektpräsentation Michael Baumgartner, Christoph Asanger, Matthias Lange, Thomas Ostarek, Nicole Stanek YouTube5.0 1

2 Inhalt Projektziel Datenbank Benutzerverwaltung Videosuche
2 Projektziel Datenbank Benutzerverwaltung Videosuche Favoritenliste Design/Struktur YouTube5.0

3 Projektziel Erstellung einer HTML 5 – Website
3 Erstellung einer HTML 5 – Website Suche nach YouTube-Videos Abspielen der gefundenen Videos Registrierung und Benutzeranmeldung Persönliche Favoritenliste Sortierbar per Drag & Drop YouTube5.0

4 Datenbank Erstellung der benötigten Tabellen mit SQL
4 Erstellung der benötigten Tabellen mit SQL Nutzung der JPA-Schnittstelle  Zuordnung und Übertragung der Objekte zu den zugehörigen Datenbankeinträgen Konfigurationsdatei: Persistence.xml YouTube5.0

5 Datenbank Java Beans Zugehörige Java-Klassen pro Datenbanktabelle 5
YouTube5.0

6 Datenbank Datenzugriffsobjekte
6 Datenzugriffsobjekte Automatisierte Erstellung der Basisoperationen YouTube5.0

7 Html5 Web Storage (besser als Cookies?)
Benutzerverwaltung 7 Html5 Web Storage (besser als Cookies?) YouTube5.0

8 Benutzerverwaltung Speichergröße: 5 MB Key/Value Paare (Strings)
Client-side Interface Web Storage Event Session Storage Local Storage Pro Tab/Window Pro Browser Sessiondauer

9 Benutzerverwaltung - Instanz von FacesContext holen
- Erzeugen von Data Access Objekt - User aus der Datenbank laden

10 Benutzerverwaltung - Javascript Aufruf an FacesContext hinzufügen
- Wird am Ende der Requestverarbeitung ausgeführt - Setzt Eintrag in Session Storage

11 Benutzerverwaltung - Lösche Einträge aus der Session Storage
-Auslesen aus Session Storage -Redirect auf Mainseite

12 Videosuche 12 YouTube5.0

13 Videoplayer & Favoritenliste
13 YouTube Videos als <iframe> einbinden YouTube5.0

14 Videoplayer & Favoritenliste
14 HTML5 Drag&Drop Events YouTube5.0

15 Videoplayer & Favoritenliste
15 Ein Element dragbar machen und Attribute für drag-Events setzen: YouTube5.0

16 Videoplayer & Favoritenliste
16 Aufruf der Funktion dragStart() YouTube5.0

17 Design/Struktur Neue Tags in HTML5 zur Seitenstrukturierung
17 Neue Tags in HTML5 zur Seitenstrukturierung Bisher Verwendung von DIV-Containern Jetzt mehr Übersichtlichkeit durch Einführung der Tags <header> <nav> <section> <footer> YouTube5.0

18 Design/Struktur 18 Strukturierung bisher: YouTube5.0

19 Design/Struktur 19 Mit HTML5 Tags: YouTube5.0

20 Design/Struktur 20 Praktische neue Funktionalität stellen die erweiterten Input Types für Formulare dar, z.B.: Url Tel Number ... Einige der neuen Types bringen automatisch Validierungsfunktionalität mit sich, ohne weiteren Code (wie etwa JavaScript) zu benötigen YouTube5.0

21 Design/Struktur Beispiele hierfür sind die Types Email und Url
21 Beispiele hierfür sind die Types und Url Möglichkeit Platzhalter anzugeben („Name“) Reguläre Ausdrücke können hinterlegt werden, gegen diese wird die Eingabe automatisch geprüft YouTube5.0