Projektbericht – YouTube 5.0 Projektteam: Michael Baumgartner
Werbung
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: Technik: Html5 Web Strorage: Web Storage ist eine mit Html5 angebotene API um Daten im Web Browser abzuspeichern. Der Web Storage ist ein persistenter Speicher der in seiner Funktionalität dem des Browser Coookies entspricht. Die Speicherung der Daten erfolgt anhand von Key/Value Paaren welche beide im String Format gespeichert werden. Gegenüber Cookies besitzt er aber einige Vorteile. Der Web Storage unterscheidet sich in zwei arten Session Storage und Local Storage Der Session Storage ist nur für die Dauer der Session gültig. Es wird für jedes geöffnete Browser Window oder Tab ein separater Session Storage erzeugt. Dadurch werden Probleme vermieden die bei der Verwendung von Cookies entstehen können wie zB. Das mehrfache bestellen des selben Produckts in einem online Shop wenn der Kunde diesen in mehreren Tabs geöffnet hat. Der Local Storage ist ein persistenter Speicher, er existiert für jeden installierten Browser separat. Die Besonderheit des Local Storage ist das bei einem hinzufügen eines neuen Eintrages oder bei Änderung eines vorhandenen ein Web Storage Event erzeugt wird. Dieses kann zB. dazu benutzt werden mehrere offene Tabs oder Windows der entsprechenden Webseite zu Synchronisieren und somit Race conditions zu vermeiden. Client-siede Interface: der zugriff auf den Storage muss über Client Scripts erfolgen. Der Vorteil ist hierbei das im Gegensatz zu Cookies der Inhalt nicht in jedem http Request mitgesendet wird und sich so der Treffic verringert. Der Server muss dementsprechend read and write Requests senden. Die Speichergröße ist von der Implementierung des Browsers abhängig als Standard sind 5MB pro Domain angelegt. Cookies sind hingegen auf 4KB pro Cookie und je nach Browser auf maximal 20 bis 50 Stück limitiert. Daraus resultiert ein breiteres Anwendungsspektrum als das bloße abspeichern von Login Variablen. Es wäre zB. eine Nutzung ähnlich eines Cache denkbar um das laden der Webseite zu beschleunigen . So lassen sich mittels base64 Codierung beispielsweise auch Bilder abspeichern. Der User kann die Nutzung des Web Storage wie bei Cookies deaktivieren weshalb man entsprechende Vorkehrungen treffen muss und sich nicht ausschließlich auf dessen Nutzung verlassen kann. Ein weitere Punkt indem Web Storage und Cookies übereinstimmen ist die Sicherheit, die werte werden unverschlüsselt abgespeichert. Für die Speicherung von sensiblen Daten wie zB. Bankkonto oder Kreditkartennummer ist der Web Storage genauso wenig geeignet wie Cookies. Ablauf: Nur ein registrierter User kann eine Favoritenliste aus Youtube Videos erstellen. Sollte ein User nicht autorisiert sein wird er automatisch auf die Login Seite geleitet. Bei der Registrierung muss ein noch nicht in der Datenbank vorhandener Username und ein Passwort angegeben werden. Das Password muss mindestens 6 Zeichen lang sein. Die Überprüfung erfolgt in der registredBean. Sollten diese Kriterien nicht erfüllt werden wird dem User eine entsprechende Fehlermeldung angezeigt. Nach einer erfolgreichen Registrierung wird der entsprechende Usereintrag in der Datenbank angelegt und kann sich fortan auf der Seite einloggen. Der Login erfolgt in der loginBean. Zuerst wird der anhand des angegebenen Usernamens der entsprechende Eintrag aus der Datenbank geladen. Sollte der Username nicht existieren wird eine entsprechende Fehlermeldung angezeigt. Stimmt das Passwort mit dem aus der Datenbank überein wird im Session Storag eine „authorized“ Key mit dem wert „yes“ und die user_id des Users gespeichert. Bei Logout werden die im Session Storag gespeicherten werte „user_id“ und „authorized“ gelöscht. 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 HTML5Players 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 JavaScriptBibliotheken 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, WebseitenElemente drag- und dropbar zu machen. Um ein Element dragbar zu machen, muss das Attribut „draggable=‘true‘“ gesetzt werden. HTML5 bietet Events, die beim Drag&DropVorgang ausgelöst werden. Diese Events rufen JavaScript-Funktionen 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:
