multimedia im netz€¦ · Übung 06 . betreuer: verantwortlicher professor: multimedia im netz –...
TRANSCRIPT
![Page 1: Multimedia im Netz€¦ · Übung 06 . Betreuer: Verantwortlicher Professor: Multimedia im Netz – Wintersemester 2011/12 . Sebastian Löhmann . Prof. Dr. Heinrich Hussmann](https://reader033.vdokument.com/reader033/viewer/2022060606/605c60cf56375b6c3407ee16/html5/thumbnails/1.jpg)
Übung 06
Betreuer: Verantwortlicher Professor:
Multimedia im Netz – Wintersemester 2011/12
Sebastian Löhmann
Prof. Dr. Heinrich Hussmann
![Page 2: Multimedia im Netz€¦ · Übung 06 . Betreuer: Verantwortlicher Professor: Multimedia im Netz – Wintersemester 2011/12 . Sebastian Löhmann . Prof. Dr. Heinrich Hussmann](https://reader033.vdokument.com/reader033/viewer/2022060606/605c60cf56375b6c3407ee16/html5/thumbnails/2.jpg)
07.12.2011 MMN Übung 07 2
Organisatorisches
![Page 3: Multimedia im Netz€¦ · Übung 06 . Betreuer: Verantwortlicher Professor: Multimedia im Netz – Wintersemester 2011/12 . Sebastian Löhmann . Prof. Dr. Heinrich Hussmann](https://reader033.vdokument.com/reader033/viewer/2022060606/605c60cf56375b6c3407ee16/html5/thumbnails/3.jpg)
07.12.2011 MMN Übung 07 3
Lösung zu Blatt 05
![Page 4: Multimedia im Netz€¦ · Übung 06 . Betreuer: Verantwortlicher Professor: Multimedia im Netz – Wintersemester 2011/12 . Sebastian Löhmann . Prof. Dr. Heinrich Hussmann](https://reader033.vdokument.com/reader033/viewer/2022060606/605c60cf56375b6c3407ee16/html5/thumbnails/4.jpg)
30.11.2011 MMN Übung 06 4
U-Bahn-Station suchen (JQuery)
![Page 5: Multimedia im Netz€¦ · Übung 06 . Betreuer: Verantwortlicher Professor: Multimedia im Netz – Wintersemester 2011/12 . Sebastian Löhmann . Prof. Dr. Heinrich Hussmann](https://reader033.vdokument.com/reader033/viewer/2022060606/605c60cf56375b6c3407ee16/html5/thumbnails/5.jpg)
07.12.2011 MMN Übung 07 5
JQuery einbinden
• Pfad zum Source-Code angeben
<script
type="text/javascript“
src="jquery-1.7.js">
</script>
![Page 6: Multimedia im Netz€¦ · Übung 06 . Betreuer: Verantwortlicher Professor: Multimedia im Netz – Wintersemester 2011/12 . Sebastian Löhmann . Prof. Dr. Heinrich Hussmann](https://reader033.vdokument.com/reader033/viewer/2022060606/605c60cf56375b6c3407ee16/html5/thumbnails/6.jpg)
07.12.2011 MMN Übung 07 6
Suchfeld in HTML
<input
type="text" class="userinput"
name="station"
onKeyUp="check(this.value);"
/>
![Page 7: Multimedia im Netz€¦ · Übung 06 . Betreuer: Verantwortlicher Professor: Multimedia im Netz – Wintersemester 2011/12 . Sebastian Löhmann . Prof. Dr. Heinrich Hussmann](https://reader033.vdokument.com/reader033/viewer/2022060606/605c60cf56375b6c3407ee16/html5/thumbnails/7.jpg)
07.12.2011 MMN Übung 07 7
JQuery: AJAX-Request
$.ajax({
type: "POST",
url: "check.php",
data: "userinput=" + userinput,
success: function(data){...}
});
![Page 8: Multimedia im Netz€¦ · Übung 06 . Betreuer: Verantwortlicher Professor: Multimedia im Netz – Wintersemester 2011/12 . Sebastian Löhmann . Prof. Dr. Heinrich Hussmann](https://reader033.vdokument.com/reader033/viewer/2022060606/605c60cf56375b6c3407ee16/html5/thumbnails/8.jpg)
07.12.2011 MMN Übung 07 8
Nach erfolgreichem AJAX-Request:
function(data){
//Anzeige der Server-Rückgabe $("ul.suggestions").html(data);
//Eventlistener: Klick auf Listeneintrag $("li.entry").click(function(event){ complete($(this)); event.preventDefault(); });
}
![Page 9: Multimedia im Netz€¦ · Übung 06 . Betreuer: Verantwortlicher Professor: Multimedia im Netz – Wintersemester 2011/12 . Sebastian Löhmann . Prof. Dr. Heinrich Hussmann](https://reader033.vdokument.com/reader033/viewer/2022060606/605c60cf56375b6c3407ee16/html5/thumbnails/9.jpg)
07.12.2011 MMN Übung 07
Eventlistener für Stationen
//Funktion für Klick-Listener function complete(clickElement){
//Text des Listeneintrags in Eingabefeld kopieren $("input.userinput").attr("value",clickElement.text());
//Ausgabefeld wird versteckt $("ul.suggestions").hide();
}
9
![Page 10: Multimedia im Netz€¦ · Übung 06 . Betreuer: Verantwortlicher Professor: Multimedia im Netz – Wintersemester 2011/12 . Sebastian Löhmann . Prof. Dr. Heinrich Hussmann](https://reader033.vdokument.com/reader033/viewer/2022060606/605c60cf56375b6c3407ee16/html5/thumbnails/10.jpg)
07.12.2011 MMN Übung 07 10
Mashups
![Page 11: Multimedia im Netz€¦ · Übung 06 . Betreuer: Verantwortlicher Professor: Multimedia im Netz – Wintersemester 2011/12 . Sebastian Löhmann . Prof. Dr. Heinrich Hussmann](https://reader033.vdokument.com/reader033/viewer/2022060606/605c60cf56375b6c3407ee16/html5/thumbnails/11.jpg)
07.12.2011 MMN Übung 07 11
Mashups
• Zusammenstellung multimedialer Inhalte zu einen bestimmten Thema
• Bereitstellung der Inhalte durch Webanwendungen über Web-APIs
• Parsen der zurückgelieferten XML-Dateien
• Angepasste Anzeige der Informationen durch HTML
![Page 12: Multimedia im Netz€¦ · Übung 06 . Betreuer: Verantwortlicher Professor: Multimedia im Netz – Wintersemester 2011/12 . Sebastian Löhmann . Prof. Dr. Heinrich Hussmann](https://reader033.vdokument.com/reader033/viewer/2022060606/605c60cf56375b6c3407ee16/html5/thumbnails/12.jpg)
07.12.2011 MMN Übung 07
Beispiele Mögliche Webanwendungen
12
![Page 13: Multimedia im Netz€¦ · Übung 06 . Betreuer: Verantwortlicher Professor: Multimedia im Netz – Wintersemester 2011/12 . Sebastian Löhmann . Prof. Dr. Heinrich Hussmann](https://reader033.vdokument.com/reader033/viewer/2022060606/605c60cf56375b6c3407ee16/html5/thumbnails/13.jpg)
07.12.2011 MMN Übung 07
Schritt 1: Suchanfrage über Web-API
• Beispiel: twitter.com http://search.twitter.com/search.atom?q=Christmas
13
![Page 14: Multimedia im Netz€¦ · Übung 06 . Betreuer: Verantwortlicher Professor: Multimedia im Netz – Wintersemester 2011/12 . Sebastian Löhmann . Prof. Dr. Heinrich Hussmann](https://reader033.vdokument.com/reader033/viewer/2022060606/605c60cf56375b6c3407ee16/html5/thumbnails/14.jpg)
07.12.2011 MMN Übung 07
Schritt 2: XML-Parsing
• XML: Extensible Markup Language
• Relevant: Elemente, Attribute, Namespaces
• Parser: liest XML-Datei und stellt Inhalt zur Verfügung, sodass auf Elemente & Attribute zugegriffen werden kann
• SimpleXML in PHP (keine Installation nötig)
• http://de.php.net/manual/en/book.simplexml.php
14
![Page 15: Multimedia im Netz€¦ · Übung 06 . Betreuer: Verantwortlicher Professor: Multimedia im Netz – Wintersemester 2011/12 . Sebastian Löhmann . Prof. Dr. Heinrich Hussmann](https://reader033.vdokument.com/reader033/viewer/2022060606/605c60cf56375b6c3407ee16/html5/thumbnails/15.jpg)
07.12.2011 MMN Übung 07
SimpleXML: Element auslesen
<?php
$file = „twitter.xml";
$xml = simplexml_load_file($file);
echo "Titel: " . $xml->entry->title;
?>
15
![Page 16: Multimedia im Netz€¦ · Übung 06 . Betreuer: Verantwortlicher Professor: Multimedia im Netz – Wintersemester 2011/12 . Sebastian Löhmann . Prof. Dr. Heinrich Hussmann](https://reader033.vdokument.com/reader033/viewer/2022060606/605c60cf56375b6c3407ee16/html5/thumbnails/16.jpg)
07.12.2011 MMN Übung 07
SimpleXML: Attribut auslesen
<?php
$file = „twitter.xml";
$xml = simplexml_load_file($file);
echo "Link: " . $xml->entry->link['href'];
?>
16
![Page 17: Multimedia im Netz€¦ · Übung 06 . Betreuer: Verantwortlicher Professor: Multimedia im Netz – Wintersemester 2011/12 . Sebastian Löhmann . Prof. Dr. Heinrich Hussmann](https://reader033.vdokument.com/reader033/viewer/2022060606/605c60cf56375b6c3407ee16/html5/thumbnails/17.jpg)
07.12.2011 MMN Übung 07
SimpleXML: Namespaces
<?php
$file = "beispiel.xml";
$xml = simplexml_load_file($file);
$twitter_ns =
$xml->entry->children("http://api.twitter.com/");
echo "Sprache: " . $twitter_ns->lang;
?>
17
![Page 18: Multimedia im Netz€¦ · Übung 06 . Betreuer: Verantwortlicher Professor: Multimedia im Netz – Wintersemester 2011/12 . Sebastian Löhmann . Prof. Dr. Heinrich Hussmann](https://reader033.vdokument.com/reader033/viewer/2022060606/605c60cf56375b6c3407ee16/html5/thumbnails/18.jpg)
07.12.2011 MMN Übung 07
Schritt 3: Mashup erstellen (HTML)
18
![Page 19: Multimedia im Netz€¦ · Übung 06 . Betreuer: Verantwortlicher Professor: Multimedia im Netz – Wintersemester 2011/12 . Sebastian Löhmann . Prof. Dr. Heinrich Hussmann](https://reader033.vdokument.com/reader033/viewer/2022060606/605c60cf56375b6c3407ee16/html5/thumbnails/19.jpg)
07.12.2011 MMN Übung 07
Hilfreiche Links • http://code.google.com/intl/de/apis/youtube/2.0/developers_guide_prot
ocol_understanding_video_feeds.html
• http://gdata.youtube.com/feeds/api/videos?q=Christmas&max-results=1&format=5&v=2
• https://dev.twitter.com/console
• http://search.twitter.com/search.atom?q=Christmas
• http://www.flickr.com/services/api/misc.urls.html
• http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=e8eff3930cc6b80439c47165baad2e3d&text=christmas
19
![Page 20: Multimedia im Netz€¦ · Übung 06 . Betreuer: Verantwortlicher Professor: Multimedia im Netz – Wintersemester 2011/12 . Sebastian Löhmann . Prof. Dr. Heinrich Hussmann](https://reader033.vdokument.com/reader033/viewer/2022060606/605c60cf56375b6c3407ee16/html5/thumbnails/20.jpg)
Danke Fragen?