Script Year 2010

1. Web-Streams und GIS Hochschule Wismar - Multimediatechnik 1

2. Web-Streams und GIS Web-Streams – RSS Feeds Anwendungsbeispiele RSS Feeds SimpleXML XML-Struktur multimedialer Streams Dynamische Web-Programmierung mit GoogleMaps Vorbereitung Einstieg GoogleMaps Theorie Geo-Kodierung GoogleMaps designen Dynamische Maps Hochschule Wismar - Multimediatechnik 2

3. Web-Streams – RSS Feeds Hochschule Wismar - Multimediatechnik 3

4. Anwendungsbeispiele Nachrichtenticker (www.nbc.com) Messaging-Stream (www.twitter.com) Multimedia-Stream (www.facebook.com) Hochschule Wismar - Multimediatechnik 4 Web-Streams – RSS Feeds 

5. RSS Feeds geordnete Sammlung von Multimediadaten (Video, Sound, Bild, Text, Geo-Informationen) geschachtelte XML-Daten mit eigenem Namespace Typen der gespeicherten Daten werden über Namespace gesteuert Namespace: Sammlung medienspezifischer Tags für XML-Daten Abfrage von geschachtelten XML-Daten: XML-Requests Beispiel für ansprechen eines RSS-Feeds: //Addresse des RSS-Feed $url='http://www.nu.nl/deeplink_rss2/index.jsp?r=Algemeen'; //Öffnen des XML-Baums $rss = new SimpleXMLElement($url,NULL,TRUE); Hochschule Wismar - Multimediatechnik 5 Web-Streams – RSS Feeds 

6. SimpleXML XML Parser Vereinigung der Einfachheit von Xpath und Funktionalität von DOM-XML Laden von XML-Daten neues XML-Objekt kreieren: $doc = newSimpleXML(<URL oder Datei>,<optionale Parameter oder NULL>, <1. Parameter = URL oder nicht>) laden einer Datei: $doc = simplexml_load_file(<Dateiname>) Zugriff über eine Baumstruktur: Unterobjekte wählbar mit Pfeiloperator Attribute wählbar mit „attributes(<Name des Attributes>)“ Bsp: foreach($doc->itemsas $item) { $video_url=$item->url; } Problem: Ändern/Aufbau von XML Dateien schwer Hochschule Wismar - Multimediatechnik 6 Web-Streams – RSS Feeds 

7. XML-Struktur multimedialer Streams Hochschule Wismar - Multimediatechnik 7 Web-Streams – RSS Feeds 

8. Dynamische Webprogrammierung mit Google Maps Hochschule Wismar - Multimediatechnik 8

9. Vorbereitung Schlüssel für die API beantragen (www.google.de -> Maps -> Anmelden) Voraussetzung: GoogleMail-Account Key ist immer Domaingebunden Testscript laden Wichtig: Web-Server finden, der weder senden noch empfangen von Google-Anfragen blockiert Hochschule Wismar - Multimediatechnik 9 Dynamische Web-Programmierung mit GoogleMaps

10. Vorbereitung Hochschule Wismar - Multimediatechnik 10 Dynamische Web-Programmierung mit GoogleMaps

11. Einstieg Google Maps Ziel: Eine Karte Zentrum der Karte ist Hochschule Wismar Marker mit einer Erklärung Erste Vorgehensweise: Erstellen einer normalen HTML-Seite Einbinden des Google Maps Scripts (API-include) Definieren eines Containers (<div>) für Karte Laden der JavaScript Funktion der Karte über HTML-eigene Events (onLoad/onUnload) Hochschule Wismar - Multimediatechnik 11 Dynamische Web-Programmierung mit GoogleMaps

12. Einstieg Google Maps Hochschule Wismar - Multimediatechnik 12 Dynamische Web-Programmierung mit GoogleMaps sprachabhängiger Google-Server API-Call Typus API-Key

13. Einstieg Google Maps Weitere Vorgehensweise: JavaScript schreiben Init-Funktion schreiben Diverse Google-Funktionen implementieren … Google-Funktionen: Erstellen von Objekten (GoogleMaps ist eine OOL)  GMap2; GClientGeocoder; GLatLng (!!) Anfrage-Funktionen (z.B. geocoder.getLatLng() ) aufrufen und (wichtig) auf Antwort von Google warten In der Callback-Funktion Reaktion ausführen Hochschule Wismar - Multimediatechnik 13 Dynamische Web-Programmierung mit GoogleMaps

15. Das Ergebnis …Hochschule Wismar - Multimediatechnik 14 Dynamische Web-Programmierung mit GoogleMaps

16. Theorie Geo -Kodierung Der (reverse) Geocoder Erzeugung eines Geocoder-Objekts Übergabe einer Adresse oder geografischen Koordinaten Senden der Kodierungsanfrage an Google Da Asynchroner Bearbeitungsmodus  Überwachung eines Nachrichtenpuffers (EventListener), bis Antwort da Antwort gibt Aufschluss über Status der Abfrage Wenn Antwort==0  Falsche Anfrage, nicht verzeichneter Ort, ungenaue Anfrage Andernfalls: Rückgabe des WAHRSCHEINLICH gesuchten Ortes (unscharfe Suche) Hochschule Wismar - Multimediatechnik 15 Dynamische Web-Programmierung mit GoogleMaps

17. Kleine Erweiterungen Anzeige des Infofensters nach einem Klick ( siehe hier) Hinzufügen von Steuerfeldern ( siehe hier) Design des Infofensters und Strukturierung des Dokuments ( siehe hier) Hochschule Wismar - Multimediatechnik 16 Dynamische Web-Programmierung mit GoogleMaps

19. 1. Texturelle Ausgabe um die eigentliche Karte per Container-Verschachtelung etc. designen ( CSS)

20. 2. Formatierung und Design des Info-Fensters von Markern

21. 3. eigenes Design von Markern (Beispiel)

22. 4. einbinden von AJAX in das Info-Fenster (Beispiel)

23. 5. Diverse Visualisierungsmöglichkeiten von:

24. Straßen (GDirections)

25. Strecken (GPolyline)

26. Gebieten (GPolygon)

27. Dabei wichtig: Google-eigene Design-Formatierung beachtenHochschule Wismar - Multimediatechnik 17 Dynamische Web-Programmierung mit GoogleMaps

28. Google Maps designen Hochschule Wismar - Multimediatechnik 18 Dynamische Web-Programmierung mit GoogleMaps Beispiel für Polygon Beispiel Polyline

29. Google Maps designen Beispiel Marker Hochschule Wismar - Multimediatechnik 19 Dynamische Web-Programmierung mit GoogleMaps

30. Mehrere Marker – erst einmal statisch … Übergabe von mehreren Parametern (zum Beispiel 4 für 4 Plätze) Umschreiben der JavaScript-Routine Hinter einander geokodieren der verschiedenen Adressen Abspeichern der Werte in eigenen Variablen Setzen des Overlays Das Ergebnis:  Soweit, so gut … sieht doch schon brauchbar aus  Hochschule Wismar - Multimediatechnik 20 Dynamische Web-Programmierung mit GoogleMaps

32. Strukturierte Abspeicherung von Inhalten und Adressen für Weiterverarbeitung

33. Für kleine und mittlere Webprojekte bestes Datenformat: XML

34. Mit PHP: laden der XML-Datei, Übersetzung Ort-> Geo-Koordinaten bei Seitenaufruf

35. Abspeicherung der Adressen und Geokoordinaten

36. Da Google Maps an sich eine JS-API: dynamischer Aufbau eines JavaScripts mit Hilfe von PHPHochschule Wismar - Multimediatechnik 21 Dynamische Web-Programmierung mit GoogleMaps

37. Dynamische Maps – Datenformat XML Grundvoraussetzung bei der Arbeit mit XML Dateien: validierte XML -> DTD und XML DTD XML Hochschule Wismar - Multimediatechnik 22 Dynamische Web-Programmierung mit GoogleMaps

38. Dynamische Maps – Geo-Kodierung Nächster Schritt: Parsen der Adressen oder Geo-Koordinaten zu eingetragenen Punkten Abspeichern gewonnener Daten durch PHP-Script (Lizenzabkommen mit Google/Limits) Scripts: Zusammenführen von Funktionen zur Datenbearbeitung; keine Bildschirmausgabe In der späteren Webseite: einfaches <? Include() ?> des Scripts, damit die Daten bei Seitenaufruf aktualisiert werden Unser Script:  Hochschule Wismar - Multimediatechnik 23 Dynamische Web-Programmierung mit GoogleMaps

39. Dynamische Maps – Darstellung und JS Aufbau der Hauptseite wie gewohnt Include des PHP-Scripts nicht vergessen !! Dynamische Generierung des JavaScripts über PHP-Ausgabefunktionen Per foreach-Schleife werden die einzelnen Einträge der XML durchgegangen Per ID werden je XML-Eintrag GoogleMaps-Objekte generiert GMarker(<Höhengrade>,<Breitengrad>) GEventListener.addEvent(marker,“click“, onmouse…) Anzeige Hochschule Wismar - Multimediatechnik 24 Dynamische Web-Programmierung mit GoogleMaps

40. Dynamische Maps – KML Format von Google entwickeltes, XML-basiertes Dateiformat für Geo-Daten (XML mit Geo-Zusatz) Abspeichern aller zur Verfügung stehenden Kartenfunktionen gefundener Einträgen als XML-Daten Einfache Einbindung über JS-Funktionen geoXML = newGGeoXml(<Adressen-String>); map.addOverlay(geoXML); Falls nicht unterstützt: Ausgabe wie gewohnt über PHP-XML und JS-Funktionen Weitere Dokumentation und Hilfe: Offizielle Referenz Hochschule Wismar - Multimediatechnik 25 Dynamische Web-Programmierung mit GoogleMaps

41. Dynamische Maps – einfaches KML generieren Grundaufbau des Scripts wie bei XML Erstellen einer neuen Datei Schreiben von XML-Version, Zeichensatz (UTF-8) und Namespace aktueller Namespace: <kmlxmlns=„http://www.opengis.net/kml/2.2“> Wenn alle Daten eines Platzes vorhanden Erstellen eines „Placemarks“ Einfügen des Namens und der Beschreibung (zum Beispiel als HTML) Einfügen eines Punktes und anhängen der Koordinaten KML schließen und Datei abspeichern Im Hauptdokument die generierte Datei als GGeoXml einfügen Hochschule Wismar - Multimediatechnik 26 Dynamische Web-Programmierung mit GoogleMaps

42. Überblick der Konkurrenz GoogleEarth zur 3D-Visualisierung Notwendig: KML-Datei mit 3D-Informationen VirtualEarth als Microsoft Konkurrenzprodukt http://www.woistdaniel.de/ möglich: 3D-Animation der Umgebung Voraussetzung für Nutzung von VirtualEarth: Evtl. Hotmail/MSN-Account Silverlight SDK Da Silverlight .NET-Anwendung: .NET 2.0 SDK (mindestens) Für 3D: Virtual Earth 3D Plugin Hochschule Wismar - Multimediatechnik 27 Dynamische Web-Programmierung mit GoogleMaps