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.:

Email

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