Projektbericht – YouTube 5.0 - ip-projekt

Projektbericht – YouTube 5.0
Projektteam:
Michael Baumgartner, Christoph Asanger, Matthias Lange, Thomas Ostarek, Nicole Stanek
Projektbeschreibung:
Ziel des Projektes war es, eine Website mit HTML 5 zu erstellen, die es ermöglicht nach YouTube
Videos zu suchen und diese abzuspielen. Benutzer sollten sich auf der Website nach einmaliger
Registrierung anmelden können, um auf ihre persönliche Favoritenliste Zugriff zu haben. Diese
Favoritenliste sollte per Drag & Drop sortierbar sein.
Projektaufteilung:
Christoph:
Benutzerverwaltung
Michael:
Videosuche
Matthias:
Video und Drag&Drop mit HTML5
Nicole:
Datenbank
Thomas:
Design
1. Datenbank:
Um die geplante Benutzerverwaltung und individuellen Favoritenlisten realisieren zu können,
wurden zwei Tabellen benötigt, die mit den folgenden SQL Statements erstellt wurden:
CREATE TABLE IF NOT EXISTS `users` (
`User_Id` int(11) NOT NULL AUTO_INCREMENT,
`Username` varchar(255) NOT NULL,
`Email` varchar(255) NOT NULL,
`Password` varchar(255) NOT NULL,
PRIMARY KEY (`User_Id`)
);
CREATE TABLE IF NOT EXISTS `videos` (
`Video_Id` int(11) NOT NULL,
`User_Id` int(11) NOT NULL,
`List_item` varchar(255) NOT NULL,
`Item_order` int(11) NOT NULL,
PRIMARY KEY (`Video_Id`)
);
Um die Persistenz der Laufzeit-Objekte zu gewährleisten, wurde mit Hilfe der Java Persistence API die
Zuordnung und Übertragung der Objekte zu den zugehörigen Datenbankeinträgen realisiert. Diese
Schnittstelle ermöglicht den Einsatz relationaler Datenbanken.
Während der Implementierung wurden hierfür die Konfigurationsdatei (persistence.xml), Java Beans
(pro Datenbanktabelle: user.java, video.java) und ein Datenzugriffsobjekt (UserDAO.java) erstellt.
Das Datenzugriffsobjekt verwaltet den Zugriff auf die Datenbank und bietet die automatisierte
Erstellung für die Basisoperationen an.
2. Benutzerverwaltung:
xxx
3. Videosuche per Webservice:
xxx
4. Video und Drag&Drop mit HTML5:
YouTube Videos mit HTML5 einbinden:
Mit einem neuen Embed-Code erlaubt YouTube das Einbetten von Videos in die eigene Webseite im
HTML5-Format. Dieser neue Weg richtet sich derzeit primär an Entwickler, ermöglicht aber schon
jetzt Videos auf Geräten, die keine Wiedergabe von Flash-Inhalten zulassen.
Die Grundlage für das Einbetten von HTLM5-Videos ist ein neuer Embed-Code, der auf das <iframe>Tag setzt. Verfügt ein Browser über das Flashplayer-Plugin, liefert der neue Code auch weiterhin den
Flash-basierten YouTube-Player aus, wodurch wie gewohnt auch Werbung mit ausgeliefert werden
kann. Unterstützt der Browser dagegen keine Flash-Wiedergabe, liefert der Code den HTML5-Player
von YouTube aus.
Das Einbetten des YouTube HTML5-Players ist dabei an zwei Voraussetzungen geknüpft. Zum einen
müssen die Nutzer den YouTube HTML5 Beta-Channel aktivieren. Und auch dann spielt der Embed-
Code das Video nur im Format h.264-Stream (Chrome, Safari) oder im WebM-Format (Opera,
Vorabversion des Firefox) aus. Nutzer des Internet Explorer 8 profitieren von dieser Möglichkeit
vorerst nicht. Der Embed-Code lautet dabei:
<iframe class="youtube-player" type="text/html" width="640" height="385"
src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">
</iframe>
Der HTML5-Player von YouTube befindet sich momentan noch in einer experimentellen Betaphase
und einige Funktionen werden noch nicht unterstützt. Die Wiedergabe eines Videos in einer
Endlosschleife (loop) und das Abspielen einer Wiedergabeliste (playlist) funktionieren beispielsweise
derzeit nicht mit HTML5. Wählt der Benutzer des HTML5-Players eine dieser Funktionen aus,
versucht der Player automatisch auf Flash umzuschalten. Wenn der Browser Flash unterstützt merkt
der Benutzer nichts von der Umstellung, ohne Flash-Player bekommt er eine Meldung, dass die
Funktion mit HTML5 nicht genutzt werden kann.
HTML5 Drag and Drop:
Vor HTML5 ließ sich die Drag-und-Drop-Funktionalität in Webseiten mit JavaScript-Bibliotheken
umsetzen, doch der erhebliche Aufwand machte diese Lösung nicht sonderlich populär. Mit dem
HTML5 Drag and Drop API soll es in Zukunft leichter sein, Webseiten-Elemente drag- und dropbar zu
machen. Um ein Element dragbar zu machen, muss das Attribut „draggable=‘true‘“ gesetzt werden.
HTML5 bietet Events, die beim Drag&Drop-Vorgang ausgelöst werden. Diese Events rufen JavaScriptFunktionen auf, die der Programmierer individuell nutzen kann, um seinen Code auszuführen, wenn
ein bestimmtes Event ausgelöst wird. Beispielsweise legt das Attribut „ondragstart=‘return
dragStart(event)‘“ eines Elements fest, dass sobald der Anwender per Maus den Drag-Vorgang auf
dem Element startet, die Funktion „dragStart“ aufgerufen wird. Dort kann festgelegt werden, ob das
Element verschoben (move) oder kopiert (copy) werden soll. Während dem Drag&Drop-Vorgang
wird ein Transferobjekt erzeugt, in dem die Daten des gewählten Elements enthalten sind. Es ist auch
möglich zusätzliche Informationen, wie z.B. id’s im Transferobjekt zu speichern, dabei wird mit
„event.dataTransfer.setData(key, value)“ ein Key-Value-Paar gespeichert, auf das dann während dem
gesamten Drag&Drop-Vorgang zugegriffen werden kann.
Drag&Drop mit HTML5 macht den Einstieg in die Implementierung von Drag&Drop auf WebSeiten
einfacher, jedoch wird zusätzlich noch viel JavaScript-Programmierung benötigt, wenn man ein
bestimmtes Verhalten bei Drag&Drop erreichen will.
5. Design / Struktur:
Durch HTML5 werden diverse neue Tags eingeführt, die das Strukturieren von Internetseiten
einfacher machen sollen. Bisher wird zur Strukturierung einer Seite meist eine ganze Reihe von
„DIV“-Elementen verwendet, die dann als Container für die einzelnen Seitenbereiche wie etwa
Kopfbereich, Navigation, Hauptbereich und Footer verwendet werden.
Um diese Strukturierung, die die meisten Seiten aufweisen, übersichtlicher zu gestalten gibt es in
HTML5 die neuen Tags <header>, <nav>, <section> und <footer>.
Strukturierung vor HTML5:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Youtube5</title>
<link rel="stylesheet" href="css/style.css" type="text/css"
media="screen" />
</head>
<body>
<div id=“header“>
Logo
</div>
<div id=“navigation“>
Navigationseinträge
</div>
<div id=“content“>
<h1>Inhalt</h1>
</div>
<div id=“footer“>
Footer
</div>
</body>
</html>
Strukturierung mit HTML5:
<!doctype html>
<html>
<head>
<title>Youtube5</title>
<link rel="stylesheet" href="css/style.css" type="text/css"
media="screen" />
</head>
<body>
<header>
Logo
</header>
<nav>
Navigationseinträge
</nav>
<section>
<h1>Inhalt</h1>
</section>
<footer>
Footer
</footer>
</body>
</html>
Hier wird bereits ersichtlich wie durch die neuen Tags mehr Übersichtlichkeit erreicht wird, da die
Namen und damit die Bereiche viel deutlicher unterschieden werden können und nicht jeder Bereich
durch ein „DIV“ Element dargestellt wird.
Weitere neue Elemente finden sich bei den Formularen. Die „Input Types“ wurden um weitere Typen
ergänzt, die des Weiteren auch eine erhöhte Funktionalität erhalten haben. So können jetzt
beispielsweise die „Input Types“ Email, Tel oder URL verwendet werden. Diese bieten zudem eine
integrierte Validierungsfunktionalität ohne weitere Techniken wie etwa JavaScript zu benötigen:
<form action="" method="post">
Name:
<input type="text" class="text_field" placeholder="Name"
required="required"/>
E-Mail:
<input type="email" class="text_field" placeholder="[email protected]"
required="required" />
Telefon:
<input type="tel" class="text_field" placeholder="12345" required="required"
pattern="^(((((((00|\+)49[ \-/]?)|0)[1-9][0-9]{1,4})[ \/]?)|((((00|\+)49\()|\(0)[1-9][0-9]{1,4}\)[ \-/]?))[0-9]{1,7}([ \-/]?[09]{1,5})?)$"/>
<button class="submit_btn" type="submit">
Absenden
</button>
</form>
Wie am Beispiel zu sehen ist gibt es des Weiteren nun auch die Möglichkeit einen Platzhalter
anzugeben, der angezeigt wird als Beispieltext solange in das Feld nichts eingegeben ist, sowie die
Möglichkeit Reguläre Ausdrücke anzugeben um die Eingabe auf dieses Muster hin zu überprüfen.
Wird eine falsche Eingabe getätigt wird dies durch die Signalfarbe rot visualisiert: