YouTube5.0 Projektpräsentation Michael Baumgartner, Christoph Asanger, Matthias Lange, Thomas...
-
Upload
helfgott-ramsburg -
Category
Documents
-
view
111 -
download
8
Transcript of YouTube5.0 Projektpräsentation Michael Baumgartner, Christoph Asanger, Matthias Lange, Thomas...
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