Entwicklung

Openstreetmap-API zur Suche

Dieser Artikel ist älter als zwei Jahre und womöglich veraltet!
Gerade seit Google bei der intensiven Benutzung seines Kartendienstes Bezahlung fordert ist ein Aufschwung in der Benutzung von [Openstreetmap](http://www.openstreetmap.org) zu spüren. Die Vorteile sind klar und überzeugend: * Offenes Kartenmaterial zur Verwendung für alle erdenklichen Zwecke * Möglichkeit zur Abfrage von Polygonen * [besseres Kartenmaterial](http://www.n-tv.de/technik/OpenStreetMap-liegt-vorne-article2049091.html) als kommerzielle Anbieter * Möglichkeit zur eigenen Bearbeitung Als Schnittstelle zur Abfrage von Kartendaten ist der [Nominatim-Dienst](http://wiki.openstreetmap.org/wiki/Nominatim) gedacht. Damit sind Suchanfragen nach Orten möglich, die dann als Punkt oder Polygon zurückgegeben werden. Die Abfrage `http://nominatim.openstreetmap.org/search?q=Westerland,Sylt&format=json` gibt beispielsweise das folgende JSON-Objekt zurück: {% highlight js %} [ { "place_id":"154218904", "licence":"Data Copyright OpenStreetMap Contributors, Some Rights Reserved. CC-BY-SA 2.0.", "osm_type":"node", "osm_id":"27385079", "boundingbox":[ "54.896578063965", "54.916581878662", "8.2956716918945", "8.3156726455688" ], "lat":"54.9065808", "lon":"8.3056721", "display_name":"Westerland, Sylt, Kreis Nordfriesland, Nordfriesland, Schleswig-Holstein, Deutschland, Europa", "class":"place", "type":"town", "icon":"http://nominatim.openstreetmap.org/images/mapicons/poi_place_town.p.20.png" }, { "place_id":"8034707", "licence":"Data Copyright OpenStreetMap Contributors, Some Rights Reserved. CC-BY-SA 2.0.", "osm_type":"node", "osm_id":"794524754", "boundingbox":[ "54.897264709473", "54.91726852417", "8.2999899291992", "8.3199908828735" ], "lat":"54.9072656", "lon":"8.3099903", "display_name":"Westerland, Bahnhofsvorplatz, Westerland, Sylt, Kreis Nordfriesland, Nordfriesland, Schleswig-Holstein, 25980, Deutschland", "class":"railway", "type":"station", "icon":"http://nominatim.openstreetmap.org/images/mapicons/transport_train_station2.p.20.png" } ] {% endhighlight %} Es werden uns alle Elemente zurückgegeben, die *Westerland/Sylt* heißen. Darunter ist der Ort und auch der Bahnhof, den wir jedoch durch die Eigenschaften *class* und *type* unterscheiden können. Die Daten können in Form einer HTML-Seite, im JSON- und im XML-Format angefordert werden. Richtig interessant wird es jedoch, wenn man *polygon=1* anhängt. Dadurch erhält man die Begrenzung des aktuellen Objektes, um es zu zeichnen oder zum Beispiel die Fläche zu berechnen. Weitere Parameter finden Sie [hier](http://wiki.openstreetmap.org/wiki/Nominatim).
Eigenes Projekt

Kleine Helferlein: Der Kreuzproduktrechner

Dieser Artikel ist älter als zwei Jahre und womöglich veraltet!
![Screenshot]({{site.baseurl}}/assets/img/picture_39.png) [Kreuzprodukt.exe]({{site.baseurl}}/assets/files/Kreuzprodukt.exe) Das [Kreuzprodukt](http://de.wikipedia.org/wiki/Kreuzprodukt) gibt einen Normalvektor auf die beiden angegebenen Vektoren an. Zur Berechnung geben Sie die ersten beiden Vektoren ein und klicken Sie auf *berechnen*. [Kreuzproduktrechner auf Github](https://github.com/joushx/Kreuzproduktrechner)
Entwicklung

Eine Android-App entwickeln - Erste Schritte

Dieser Artikel ist älter als zwei Jahre und womöglich veraltet!
Eine Smartphone-App ist meist ein sehr umfangreiches Projekt, das sich über lange Zeit hinziehen kann und eine große Menge an Zeit für die Entwicklung beansprucht. Genau das kann Ihnen dieser Artikel auch nicht abnehmen, aber ich möchte beim Einstieg in die Entwicklungsumgebung und die Erstellung einer ersten, einfachen Anwendung helfen. ![Android Logo]({{site.baseurl}}/assets/img/picture_82.jpeg) Von Google selbst wird die Verwendung der Eclipse-IDE empfohlen. In Verbindung dem Android-SDK vom Suchmaschinenriesen selbst ist damit die nahtlose Entwicklung innerhalb der IDE von der ersten Programmzeile bis zur fertig kompillierten App möglich. Zur Programmierung wird Java verwendet. Die IDE ------- Zur Installation von Eclipse lädt man sich zu Beginn die [aktuelle Version](http://www.eclipse.org/downloads) von der offiziellen Webseite herunter. Ich empfehle für den vorliegenden Zweck die Verwendung von „Eclipse Classic“. Nach dem Download entpackt man einfach die zip-Datei und die Entwicklungsumgebung darin in einem beliebigen Ordner starten. Android-SDK --- Das SDK-Paket erhält man [hier](http://developer.android.com/sdk/index.html). Darin enthalten ist der Android-Emulator, der es ermöglicht die Apps auf dem Computer zu testen, auch wenn man kein Android-Smartphone besitzt, und die Komponenten zur Erstellung am Ende der Entwicklung. Diese Komponente wird durch einen Assistenen installiert. ![Device Manager]({{site.baseurl}}/assets/img/picture_83.png) An dieser Stelle empfehle ich bereits eine neue AVM (Android Virtual Machine) zu erstellen. Dazu muss vorher die entsprechende Version von Android heruntergeladen werden. ADT-Plugin --- Um das Android-SDK mit der Eclipse-IDE zu verbinden ist es nötig das ADT-Plugin von Google zu installieren. Dazu startet man die Entwicklungsumgebung mit *eclipse.exe*. Wenn das Arbeitsverzeichnis festgelegt wurde, darin wird der Code und alle Ressourcen gespeichert, geht man auf *Help > Install New Software...*. Über *Add* kann man eine neue Quelle für Pakete hinzufügen. Geben Sie dem neuen Eintrag einen beliebigen Namen und tragen Sie bei der Adresse ein: {% highlight text %} https://dl-ssl.google.com/android/eclipse/ {% endhighlight %} Wählen Sie im erscheinden Baum *Developer Tool* und installieren Sie das Paket. ![Software Quellen]({{site.baseurl}}/assets/img/picture_84.png) Nach einem Neustart von Eclipse sollte das Plugin fertig installiert sein, jedoch muss unter *Window > Preferences* unter *Android* noch der Pfad zum Android-SDK angegeben werden. Projekt erstellen ------- Um eine neue Android-App zu erstellen wählen Sie *File > New > Project...*. Dort wählen Sie im Ordner *Android* den Punkt *Android Project*. ![Projekttyp]({{site.baseurl}}/assets/img/picture_85.png) Im folgenden Fenster geben Sie dem Projekt einen Namen, im nächsten geben Sie die Zielversion von Android an. ![Neues Projekt]({{site.baseurl}}/assets/img/picture_86.png) ![Build Target]({{site.baseurl}}/assets/img/picture_87.png) Im letzten Fenster müssen Sie dem Paket noch einen Namen geben, eine *Activity* anlegen und auswählen in welcher Version von Android Ihr Programm unterstützt wird. ![App Infos]({{site.baseurl}}/assets/img/picture_88.png) Der Paketname sollte eindeutig sein und irgendwie auf Sie und Ihre App hinweisen. Es darf auch ruhig Ihre echte Domain beeinhalten. Die *Activity* ist sozusagen die Hauptfunktion bzw. der Bildschirm, der bei Start der App aufgerufen wird. Klicken Sie auf *Finish*, um die App einzurichten. Jetzt müsste alles für die Programmierung bereitstehen. Allgemeine Einstellungen ------- Öffnen Sie den Baum auf der linken Seite und doppelklicken Sie auf *res/AndroidManifest.xml*. In dieser Datei werden die Haupteinstellungen der App angegeben, wie der angezeigte Namen, das Icon und die Rechte, die für die Benutzung erforderlich sind. Texteinträge sollten jedoch in der Datei *res/values/strings.xml* angegeben und hierhin verlinkt werden. Alle Einstellungen erreichen Sie über Tabs am unteren Rand. ![Manifest]({{site.baseurl}}/assets/img/picture_89.png) Layout ------- Öffnen Sie durch einen Doppelklick *res/layout/main.xml*. Daraufhin erschient der Startbildschirm der App, der nun durch Daraufziehen mit Bedienelementen versehen werden kann. Sie können hier Textfelder, Knöpfe, Bilder usw. hinzufügen. Zusätzlich kann das Layout auch über die Bearbeitung der XML-Datei bearbeitet werden. ![User Interface]({{site.baseurl}}/assets/img/picture_90.png) Programmierung ------- Endlich kommen wir zum Hauptteil: Dem eigentlichen Programmieren. Die weitere Vorgehensweise hängt natürlich sehr stark davon ab, welche App sie erstellen wollen und so gibt es keine „Patentlösung“. Um den Quellcode zu öffnen, doppelklicken Sie auf *src/<Paketname>/<Activity>.java*. Vor Ihnen sollte nun etwa folgendes zu sehen sein: {% highlight java %} package test.abc; import android.app.Activity; import android.os.Bundle; public class AbcActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } } {% endhighlight %} Ihre Aktivität erweitert also die Klasse *Activity* und ruft beim Starten der App durch {% highlight java %} setContentView(R.layout.main); {% endhighlight %} den Startbildschirm auf. Um auf Benutzereingaben reagieren zu können sind natürlich noch Event-Handler nötig. Button submit = (Button) findViewById(R.id.button_login); {% highlight java %} submit.setOnClickListener(new OnClickListener() { public void onClick(View v) { // do the magic } }); {% endhighlight %} Über die Methode *findViewById* können Sie Elemente des Layouts, die Sie vorher im Layout-Editor anlegen müssen, auswählen und in eine Variable speichern. Durch diese Variable kann ein EventListener, dieser hier reagiert auf Klicks, hinzugefügt werden. Testen der App ------- Jetzt ist es an der Zeit die App auch einmal „live“ auszuprobieren. Klicken Sie dazu auf den grünen Knopf oberhalb des Codes: ![Starten]({{site.baseurl}}/assets/img/picture_91.png) Nun sollte der Android-Emulator starten. Bitte haben Sie dazu ein wenig Geduld, denn gerade beim ersten Start kann dieser Vorgang einige Minuten dauern. Nach einiger Zeit sollte jedoch der Lockscreen eines Android-Smartphones erscheinen und zum Entsperren auffordern. Unter den Programmen sollte nun Ihre App auftauchen und sich testen lassen. ![Test]({{site.baseurl}}/assets/img/picture_92.png) Erstellen einer .apk-Datei --- Wenn Ihre App fertig ist, oder Sie sie einfach einmal auf einem echten Gerät testen wollen, sollte sie in eine apk-Datei exportiert werden. Klicken Sie dazu mit der rechten Maustaste auf Ihr Projekt und wählen Sie *Android Tools > Export Unsigned Application Package*. Nun können Sie die Datei speichern und auf einem Gerät ausführen. Rechte ------- Wenn Ihre App beispielsweise auf das Internet zugreifen will, müssen Sie vorher die Rechte dazu anfordern, die zudem bei der Installation vom Benutzer bestätigt werden müssen. Dies erfolgt in der *AndroidManifest*-Datei im Tab *Permissions*. Für den Internetzugriff ist zum Beispiel der *Uses Permission*-Eintrag `android.permission.INTERNET` erforderlich.
Entwicklung

HbbTV: CE-HTML im Fernseher

Dieser Artikel ist älter als zwei Jahre und womöglich veraltet!
Der Teletext (oder auch Videotext) mit seinen 23 Zeilen ist schon etwas in die Jahre gekommen und soll in den nächsten Jahren durch [HbbTV](http://de.wikipedia.org/wiki/HbbTV "Wikipedia: HbbTV") ersetzt werden. Mit *Hybrid Broadcast Broadband TV* soll die Zukunft in die textbasierte Information am Fernseher Einzug halten. Nicht mehr über die Satelliten-Ausstrahlung, sondern über die Internetverbindungen sollen so Informationen abgerufen werden. ![HbbTV Logo]({{site.baseurl}}/assets/img/picture_59.png) Mit dieser Technik ist es erstmals möglich hochaufgelöste Informationsseiten mit Videos und Interaktivität zur Verfügung zu stellen. Realisiert wird die durch Standard-Techniken aus der Websiten-Programmierung. So wird bei HbbTV CE-HTML eingesetzt. Das *Consumer Electronic*-HTML stellt eine Erweiterung der bestehenden Standards für die Einbindung von aktuellen Fernsehbildern und die Bedienung mit der Fernbedienung dar. ## Aufbau eines CE-HTML Dokumentes ## Grundsätzlich ist ein Dokument mit CE-HTML genauso aufgebaut wie ein normales HTML-Dokument. Unterschiede gibt es lediglich im verwendeten MIME-Type und dem Doctype. So wird das Dokument mit dem `Content-Type`-Header `application/ce-html+xml` übertragen. Der Doctype sollte wie folgt lauten: {% highlight html %} {% endhighlight %} Erwähnenswert ist auch noch folgende CSS-Regel, um die Seite transpartent über das TV-Bild legen zu können: {% highlight css %} body { background-color: transparent; } {% endhighlight %} Steuerung ------- Gesteuert wird die Anwendung natürlich nicht über eine Maus, sondern über die Tasten der Fernbedienung. Hauptsächlich über die vier farbigen Tasten in Rot, Gelb, Grün und Blau und den Pfeiltasten. Bei der Benützung einer der Tasten auf der Fernbedienung wird ein *keydown*-Event mit dem entspechenden *keyCode*-Wert ausgelöst. Über einen *EventListener* kann nun bei solch einer Aktion der Code der Taste ausgewertet werden. Die Werte der einzelnen Tasten sind in den Konstanten `VK_RED`, `VK_BLUE`, usw. gespeichert und müssen nur mehr mit dem übergebenen Code verglichen werden. {% highlight js %} document.body.addEventListener("keydown", function(e){ switch(e.keyCode){ case VK_RED: alert("rot"); break; case VK_BLUE: alert("blau"); break; case VK_GREEN: alert("grün"); break; case VK_YELLOW: alert("gelb"); break; case VK_UP: alert("rauf"); break; case VK_DOWN: alert("runter"); break; case VK_LEFT: alert("links"); break; case VK_RIGHT: alert("rechts"); break; } }); {% endhighlight %} Eine Liste mit allen Befehlen bekommt man zum Beispiel bei [Opera](http://dev.opera.com/articles/view/functional-key-handling-in-opera-tv-store-applications/) oder durch Lektüre der [Spezifikation](http://www.etsi.org/deliver/etsi_ts/102700_102799/102796/01.01.01_60/ts_102796v010101p.pdf) von HbbTV. Weitere Informationen über die Verwendung von Bildern, Videos, dem Applikations-Modell und den weiteren Funktionen, wie zum Beispiel Einstellungen und Lesezeichen, gibt es in der oben genannten Spezifikation.