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

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

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 19.12.11

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 19.12.11

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

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

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

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

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

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

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

Videosuche 12 YouTube5.0 19.12.11

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

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

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

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

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 19.12.11

Design/Struktur 18 Strukturierung bisher: YouTube5.0 19.12.11

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

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

Design/Struktur Beispiele hierfür sind die Types Email und Url 21 Beispiele hierfür sind die Types Email 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 19.12.11