Cinematic: Backend – die Filmliste

06 November 2012 · 0

Ich schaue gerne Filme. Ob im Kino oder in meinem eigenen “Heimkino” … mit Veröffentlichung dieses Blogs habe ich versucht eine persönliche Wertung jedes Filmes auf der extra eingerichteten Seite Cinematic festzuhalten.

Um die Filmliste zu veröffentlichen, habe ich mit einer im Wordpress Editor geschriebenen HTML-Tabelle angefangen. Doch mit der Zeit und zunehmenden Zeilen in der Tabelle wurde das Hinzufügen einer neuen Zeile am Anfang der Tabelle zur Tortur. Eine für einen Admin angemessene Lösung musste her! Da ich in letzter Zeit immer mehr zu einem Javascript Fanatiker mutiere, versuchte ich die Daten jedes Filmes (Name, URL, Medium, Wertung, Datum) in einem Javascript Object zu speichern. So konnte ich das Erstellen des HTML Code automatisieren.

Nachteil dieser Methode ist jedoch, dass, die Tabelle erst auf Client Seite im Browser generiert wird und somit z.B. vom Google Bot nicht erkannt wird. Außerdem ist das Editieren nur bedingt einfacher geworden.

Doch jetzt gibt es das Cinematic: Backend

Screenshot Cinematic: Backend

Aus den Daten, die im Backend in einer Datenbank gespeichert werden, wird nun auf der Blog Seite Cinematic eine HTML-Tabelle, die Filmliste, generiert.

Mit diesem Codeschnipsel wird die recht lange Tabelle beim Laden der Seite gekürzt und nur 15 Zeilen angezeigt. Mit einem Klick lässt sich die Tabelle aber in kompletter Länge darstellen.

Ohne die folgenden fantastischen Open Source Projekte wäre ich sicher nicht so weit gekommen.

github.com Stars filtern und durchsuchen

13 September 2012 · 0

github logoIch bin wirklich ein Fan von github.com. Dort finden sich zahlreich fantastische Opensource Projekte. Auch ich habe dort meinen Code veröffentlicht.

Früher konnte man Projekten, genauer gesagt Repositorys (Repos), “folgen”. Das “Folgen” wurde vor einiger Zeit durch vergeben eines “Stars” ersetzt. Quasi eine Favoriten Funktion.

Meine favorisierten Repos sind unter https://github.com/sinky/following zu finden. Bei mittlerweile drei Seiten ist das Wiederfinden bestimmter Repos echt schwer geworden. Glücklicherweise kann man seine “Starred Repos” unter https://github.com/stars nun auch durchsuchen.

Quelle: https://github.com/blog/1236-searching-and-filtering-stars

Processing Tower Defense – Browsergame

10 Mai 2012 · 4

Tower Defense bzw. Tower Defence oder kurz TD bezeichnet ein Subgenre von Echtzeit-Strategiespielen. Aufgabe in diesen Spielen ist es, auf einer Karte verschiedene Arten von Verteidigungsanlagen (meistens Wach- bzw. Geschütztürme, daher der Begriff) zu errichten, die anschließend mehrere Anstürme von unterschiedlichen Gegnern daran hindern sollen, die Karte zu durchqueren.
Wikipedia

Ich liebe Towerdefense Spiele sehr. Strategie für zwischendurch würde ich sagen.

Processing Tower Defense ist ein Kostenfreies und Quelloffenes Towerdefense im Browser. Gefunden auf Github.com (generell sehr geile Seite).

Ich biete zum freien spielen hier auf meinem Webspace eine leicht angepasste Version des Spiels. Freue mich auf Euere Scores hier in den Kommentaren.

Mehr dazu auf der Unterseite Processing Tower Defense hier im Blog.

Viel Spaß beim Spielen.

Aufgaben – die Todo Liste

23 April 2012 · 3

Ich bin vergesslich! Mag sein dass es Techniken gibt um sein Gedächtnis zu trainieren. Alles nichts für mich, ich habe mir bisher immer selbst eine E-Mail mit dem zu merkenden Begriff im Betreff zugeschickt. Sehr zum Nachteil meines Posteingangs, in dem sich “Aufgaben” und normale Mails häuften.

Vor einigen Wochen war ich es dann leid und habe mich dran gesetzt eine Todo Liste zu schreiben. Sie sollte Papierlos und immer griffbereit sein. Sowohl zu Hause, als auch unterwegs. Dies kann nur eine Webapp bewerkstelligen.

Es gibt sicherlich unzählige Todolist Scripte im Web. Jedoch musste meine Todo Liste auf iOS Geräten funktionieren und simple aufgebaut, sowie leicht (Ladezeit auf mobilen Geräten) sein.

Diese Todo Liste namens “Aufgaben”, steht jedem zum Download auf Github zu Verfügung. Ich habe hier im Blog eine Projekt Seite eingerichtet auf der alle nötigen Informationen zu finden sind.

Open Street Map #1: die erste Karte

26 November 2011 · 0

Bevor das erste Beispiel folgt, sollte etwas geklärt werden. OpenStreetMap ist eigendlich nur das Kartenmaterial. Angezeigt werden kann das Kartenmaterial in den verschiedensten Anwendungen. Für das Web empfiehlt sich z.B. OpenLayers, eine Open Source JavaScript Library. OpenLayers wird auch von www.openstreetmap.org selbst genutzt.

Daher benötigen wir für unsere Karte zuerst die Openlayers Library. Den Download gibt es auf www.openlayers.org. Ich arbeite hier mit Version 2.11. Wir benötigen aus dem Download erst mal nur die Ordern “/img”, “/theme” und die Datei “OpenLayers.js”.

Die wichtigsten Anlaufstellen zum nachschlagen sind:

Teil 1: die erste Karte

Demo von Teil 1 anschauen

Zu beginn steht das HTML-Grundgerüst an. In dem DIV mit der id “map” wird nachher die Karte angezeigt.

Im Head-Bereich des HTML-Grundgerüst ergänzen wir nun über dem Javscript Abschnitt das Openlayers Theme per CSS Datei und laden die OpenLayers.js Libray.

Die folgende init() Funktion führt nach dem Laden der Seite den Code aus um die Karte anzuzeigen. Hier werden alle Einstellungen angegeben, welche zu beginn aktiviert sind. Natürlich ist es später immer möglich auf das “map” Objekt zuzugreifen um es zu verändern.

Damit die Funktion nach dem Laden des Bodys aufgerufen wird, erweiteren wir den Body-Tag wie folgt.

Das Endergebnis müsste nun sich nun wie in der Demo zu sehen darstellen.
Demo von Teil 1 anschauen

Open Street Map als Ersatz für Google Maps

23 November 2011 · 4

OSM LogoSchon vor einigen Jahren habe ich im Artikel Kartenmaterial: Open Street Map beschrieben wie ich zu der Freien Karte “OpenStreetMap” stehe und das ich sie fantastisch finde. Ich besitze selbst einen GPS Logger und zeichne immer wieder Strecken auf, sehe mir diese anschließend auf einer Karte am Computer an und vervollständige selbst die OSM.

Google hat bekannt gegeben das sein Maps Dienst im Jahre 2012 kostenpflichtig wird. Dabei spielt die Anzahl der Aufrufe eine Rolle. Denn ein kleines freikontingent bleibt wohl erhalten. Doch wie schnell das aufgebraucht ist, will ich mir garnicht ausmalen.

Daher setzte ich ab sofort auf OpenStreetMap!

Ich habe mich in den letzten Tagen etwas damit beschäftigt, eine Karte mit OSM zu erstellen. Dabei ist mir die, im Vergleich zu Google Maps, geringe Verbreitung und damit die wenigen Code Beispiele aufgefallen. Daher werde ich in einer folgenden Artikel Serie zeigen, wie in wenigen Minuten eine “Freie Karte” erstellt ist und diese z.B. für die Anzeige aufgezeichneter Strecken genutzt werden kann.

Inhaltsverzeichnis (wird laufend vervollständigt)