YouTube5 .0
ProjektpräsentationMichael Baumgartner,
Christoph Asanger, Matthias Lange, Thomas Ostarek, Nicole Stanek
19.12.11
1YouTube5.0
Inhalt
Projektziel
Datenbank
Benutzerverwaltung
Videosuche
Favoritenliste
Design/Struktur
19.12.11
2
YouTube5.0
Projektziel
Erstellung einer HTML 5 – Website
Suche nach YouTube-Videos
Abspielen der gefundenen Videos
Registrierung und Benutzeranmeldung
Persönliche Favoritenliste
Sortierbar per Drag & Drop
19.12.11
3
YouTube5.0
Datenbank
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
19.12.11
4
YouTube5.0
Datenbank
Java Beans
Zugehörige Java-Klassen pro Datenbanktabelle
19.12.11YouTube5.0
5
Datenbank
Datenzugriffsobjekte
Automatisierte Erstellung der Basisoperationen
19.12.11YouTube5.0
6
Benutzerverwaltung
19.12.11
7
YouTube5.0
Html5 Web Storage (besser als Cookies?)
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
19.12.11
12
YouTube5.0
Videoplayer & FavoritenlisteYouTube Videos als <iframe> einbinden
19.12.11
13
YouTube5.0
Videoplayer & FavoritenlisteHTML5 Drag&Drop Events
19.12.11YouTube5.0
14
Videoplayer & FavoritenlisteEin Element dragbar machen und Attribute für
drag-Events setzen:
19.12.11YouTube5.0
15
Videoplayer & FavoritenlisteAufruf der Funktion dragStart()
19.12.11YouTube5.0
16
Design/Struktur
Neue Tags in HTML5 zur Seitenstrukturierung
Bisher Verwendung von DIV-Containern
Jetzt mehr Übersichtlichkeit durch Einführung der Tags
<header>
<nav>
<section>
<footer>
19.12.11
17
YouTube5.0
Design/Struktur
Strukturierung bisher:
19.12.11
18
YouTube5.0
Design/Struktur
Mit HTML5 Tags:
19.12.11
19
YouTube5.0
Design/Struktur
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
19.12.11
20
YouTube5.0
Design/Struktur
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
19.12.11
21
YouTube5.0