Als erstes Tool installieren wir “virtualenv“. Wie der Name schon verrät, handelt es sich hierbei um eine virtuelle Umgebung (virtual environment). Für unser Projekt wollen wir eine Art “Container” schaffen, in dem wir Pakete für Python installieren können, ohne in Konflikt mit anderen Python- bzw. Django-Anwendungen zu kommen. Es ist nicht selten, dass man mehrere Django-Anwendungen auf einem Server laufen hat. Eine vielleicht in der Version 1.2, die andere schon in 1.4, welche die aktuelle Version ist. Da Python auf einfachem Wege aber immer nur eine Version eines Moduls oder einer Bibliothek zur Verfügung stellen kann, benötigen wir hier virtualenv.

Installieren und Einrichten einer virtuellen Umgebung für Django

Zum Installieren von “virtualenv” benötigen wir ein weiteres Paket: “pip“. PIP ist ein Paketverwaltungssystem für Python-Anwendungen. Mit Hilfe von PIP ist möglich, neue Pakete leicht zu installieren, up-to-date zu halten und zu löschen. Dazu braucht man die Shell, auf welcher man folgendes eingibt:

sudo apt-get install python-pip python-dev build-essential
sudo pip install --upgrade pip

Damit sollte PIP nun installiert sein. Um “virtualenv” zu installieren, verwenden wir folgenden Befehl:

sudo pip install --upgrade virtualenv

Nun stehen bereits PIP und virtualenv zur Verfügung. Der nächste Schritt ist das Einrichten der virtuellen Umgebung. Dazu erstellen wir zuerst eine virtuelle Umgebung und installieren anschließend die nötigen Pakete. Zuerst legen wir einen Ordner an, der alle virtuellen Umgebungen erfasst. Das kann zum Beispiel im Homeordner erfolgen. Anschließend wechseln wir in diesen Ordner und führen folgenden Befehl aus:

virtualenv --distribute fewoverwaltung

Damit haben wir eine virtuelle Umgebung für die Anwendung geschaffen. Der nächste Schritt besteht in der Einrichtung. Hierzu installieren wir Django, nachdem wir in die virtuelle Umgebung gewechselt sind, mit folgenden Befehlen:

source /pfad/zum/verzeichnis/fewoverwaltung/activate

Anschließend kommt noch Yolk hinzu, das einem eine Listenansicht aller installierten Pakete zurückgibt:

pip install yolk

Um die Installation von Django abzuschließen, fehlt natürlich noch Django selbst:

pip install Django

Wenn man mehr als ein paar Pakete installiert, sollte man regelmäßig eine requirements-Datei erstellen, in der alle genutzten Pakete gelistet sind, zur einfachen Wiederverwendung. Das können Sie mit folgenden Befehlen realisieren:

pip freeze > /tmp/requirements.txt

Diese Datei kann man dann z.B. in einem anderen Environment nutzen, um dort alle nötigen Pakete zu installieren:

pip install -r /tmp/requirements.txt

Soviel zur Vorbereitung. Nun steht uns Django in einer virtuellen Umgebung auf einem virtuellen Server zur Verfügung.

Django – das erste Projekt

Um die Entwicklung der Anwendung zu beginnen, wechseln wir zunächst in das richtige virtualenv und legen anschließend ein erstes Django-Projekt an:

django-admin.py startproject fewo

Damit haben wir unter dem Namen fewo unser erstes Django-Projekt angelegt. Im Verzeichnis sollte nun ein Ordner namens fewo existieren. In diesem Ordner befinden sich alle nötigen Dateien für Django. Die Ordnerstruktur wiederum hat sich mit Version 1.4 geändert. Im Hauptordner befindet sich die manage.py-Datei, eine Datei, von der wir noch oft Gebrauch machen werden. Im Unterordner fewo befinden sich die Dateien für die Einstellungen(settings.py), die Datei für den URL-Dispatcher (urls.py) und eine Datei, die hauptsächlich für das Deployment benötigt wird (wsgi.py).

Django Struktur

Eine Anwendung in Django setzt sich wiederum aus mehreren Apps zusammen, eine weitere App wird auch für dieses Projekt benötigt. Nennen wir sie einfach “buchungen”. Um sie anzulegen, müssen wir uns im Hauptordner befinden und folgende Befehle ausführen:

python manage.py startapp buchungen

Der Befehl legt einen neuen Ordner mit der Bezeichnung buchungen an. In diesem Ordner befinden sich Dateien um die Modelle, Tests und Views anzulegen.

Admin-Interface von Django nutzen

Um das integrierte Admin-Tool von Django zu nutzen, öffnen wir die Datei settings.py und entfernen unter INSTALLED_APPS den Kommentar vor django.contrib.admin. Anschließend müssen in der selben Datei noch die nötigen Daten zur DB-Verbindung eingetragen werden. Der folgende Code führt eine Datenmigration der Admin-Daten zur Datenbank aus und legt einen neuen User an:

python manage.py syncdb

In der Datei urls.py sollten noch bei folgenden Zeilen die Kommentare entfernt werden:

from django.contrib import admin
admin.autodiscover()
url(r'^admin/', include(admin.site.urls)),

Django Admin

Jetzt ist unsere Anwendung bereit für den ersten Start. Das geht dank des integrierten Testservers relativ einfach mit:

python manage.py runserver AKTUELLE_IP:8000

Natürlich sollte AKTUELLE_IP durch die aktuelle IP des Servers ersetzt werden. Nun läuft auf PORT 8000 unseres Servers unsere Anwendung . Über AKTUELLE_IP:8000/admin erreichen wir das Admin-Interface.

Fazit

Ich bin ganz ehrlich und sage, dass das Pensum dieses Beitrags sogar für erfahrene Entwickler durchaus zu viel sein könnte. Und das Einrichten einer virtualenv ist auch nicht Bedingung zum Starten der ersten Anwendung. Ich halte es jedoch für sinnvoll und halte es auch selbst so, gleich von Beginn an sauber und übersichtlich, ohne Weglassungen zu arbeiten. Ich kann aus meiner Erfahrung sagen: Es lohnt sich.

Mittlerweile läuft die erste Anwendung und wir haben Django installiert. Im nächsten Teil legen wir das Model an und ich gehe etwas tiefer auf den URL-Dispatcher, Templates und Co. ein.

Den ersten Teil des Django-Workshops finden Sie hier.

(dpe)

Beispiele für Social-Buttons mit dem Plugin

Mit dem Koottam-Social-jQuery-Plugin sind Buttons zu allen bekannten sozialen Netzwerken sowie RSS-Feeds schnell und einfach in die eigene Website eingebunden und angepasst. Neben dem Link zur jeweiligen Präsenz beim sozialen Netzwerk wird die Anzahl der Fans beziehungsweise Follower angezeigt. Außerdem garantiert das Social-jQuery-Plugin ein einheitliches Aussehen aller dargestellten Buttons.

Social jQuery einbinden

Wie der Name schon vermuten lässt, ist jQuery Voraussetzung, um das Plugin nutzen zu können. Damit die Social-Buttons auch ihr richtiges Aussehen erhalten, muss die mitgelieferte Stylesheet-Datei ebenfalls mit eingebunden werden:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="koottam/js/jquery.koottam.js"></script>

<link href="koottam/css/koottam.css" rel="stylesheet" />

Anschließend können die sozialen Netzwerke über einfache A-Elemente ausgezeichnet werden:

<a href="http://www.facebook.com/username" class="fb">Facebook</a>

Per JavaScript wird das A-Element aufgrund der vergebenen Klasse nun durch den per jQuery-Plugin bereitgestellten Social-Button ersetzt:

1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/javascript">
  $(document).ready(function(){
    $(".fb").koottam({
      "id"            : "username",
      "method"        : "api",
      "theme"         : "facebook-blue",
      "icon_url"      : "koottam/img/facebook.png",
      "style"         : "image_count",
      "size"          : "default"
    });
  });
</script>

Über den Aufruf koottam() lässt sich der Social-Button konfigurieren. Über id wird der Benutzername beziehungsweise die ID angegeben, die man bei Facebook, Google+ und Co. hat. Und über method wird angegeben, ob man die entsprechende API des sozialen Netzwerkes nutzt.

Nur bei Facebook und Twitter gibt es die Möglichkeit, über die entsprechende API die Anzahl der Fans und Follower automatisch darzustellen. In allen anderen Fällen muss method jeweils auf custom eingestellt sein; eine automatische Darstellung der aktuellen Fans und Follower ist hierbei nicht möglich. Eine manuelle Angaben lässt sich per count darstellen:

1
2
3
4
5
6
7
8
9
10
11
12
13

<script type="text/javascript">
  $(document).ready(function(){
    $(".fb").koottam({
      "id"            : "beispielseite",
      "method"        : "custom",
      "theme"         : "facebook-blue",
      "icon_url"      : "koottam/img/facebook.png",
      "style"         : "image_count",
      "size"          : "default",
      "count"         : 465898
     });
  });
</script>

Social-Buttons konfigurieren

Für jedes unterstützte soziale Netzwerk sowie für RSS-Feeds liefert das Plugin ein eigenes Farbschema (theme) sowie ein eigenes Icon (icon_url). Farbschema und Icon lassen sich unabhängig voneinander anpassen. Außerdem gibt es vier unterschiedliche Darstellungsmöglichkeiten (style). Die Zahl kann zusammen mit dem Bild („image_count“), zusammen mit dem Schriftzug („logo_count“), zusammen mit Bild und Schriftzug („image_logo_count“) sowie zusammen mit Bild und ID/Benutzername angezeigt werden (image_id_count).

Unterschiedliche Darstellungsmöglichkeiten der Buttons

Außerdem lassen sich die Buttons in zwei unterschiedlichen Größen (size) anzeigen. Neben der Standardgröße (default) gibt es die Möglichkeit der Anzeige der Buttons auch in groß (large).

Fazit: Mit dem Koottam-Social-jQuery-Plugin lassen sich soziale Netzwerke und RSS-Feeds sehr einfach und einheitlich gestaltet in die eigene Website einbinden. Hat ein Besucher JavaScript ausgeschaltet, bekommt er zumindest einen Link zur jeweiligen Profilseite dargestellt.

(dpe)

Was ist Photofunia?

Photofunia ist ein kostenloser Photoeditor, welcher zahlreiche Fotoeffekte anbietet. Man kann ihn sowohl für ernsthafte Bildbearbeitung verwenden als auch etwas zum Spaß kreieren. In diesem Post habe ich mich auf einige, nach meinem Empfinden eher ernsthafte Photofunia Labs und Filter beschränkt. Um die von mir ausgesuchten Beispiele vorzuführen, habe ich ein eigenes Bild geschossen und bearbeitet.

Dieses Bild wird im heutigen Post kreativ bearbeitet

Photofunia Labs

Bei Photofunia Labs kann man seine Fotos mit kreativen Effekten ausstatten oder auch eine Fotomontage machen. Manche Ideen sind nur zum Spass gut geeignet, viele sind aber auch für den ernsthaften Gebrauch verwendbar.

PopArt

Damit erstellen Sie aus Ihrem Foto ein PopArt-Bild. Einfach auf “Choose file” klicken, das gewünschte Foto auswählen und auf “Go!” drücken. Das Foto muss als JPEG, GIF, oder PNG vorliegen und darf nicht grösser als 10 MB sein.

Photofunia Labs Beispiel 1: PopArt

Kalender

So einfach lässt sich ein Kalender mit eigenen Fotos machen! Praktisch ist, dass die Möglichkeit besteht, auszusuchen, ob man für bestimmte Monate einen Kalender erstellen lassen möchte oder direkt für das ganze Jahr. Ist doch eine schöne Geschenkidee, oder?

Photofunia Labs Beispiel 2: Kalender

Motivator

Wer kennt nicht diese Fotos mit schlauen (oder blöden) Sprüchen, die sogenannten Motivatoren oder Demotivatoren? Wenn man will, kann man auch ein eigenes Bild in einen Motivator verwandeln. Laden Sie das gewünschte Foto hoch (nicht grösser als 10 MB), denken Sie sich einen coolen Spruch aus und los geht’s!

Photofunia Labs Beispiel 3: Motivator

Photofunia Filter

Diese Filter lassen ein Foto originell und etwas ungewöhnlich wirken. Auch hier gilt: Effekt auswählen, Foto aussuchen, hochladen und “GO!” Zusätzlich kann man hier zwischen verschiedenen Umrandungen, Lichteffekten und Texturen auswählen. Das erhöht die Anzahl an Möglichkeiten enorm.

Alien Sky

Die grünliche Farbe macht ein Foto etwas mystisch, aber irgendwie auch interessant. So ein Filter würde die Bilder von Schlössern, alten Häusern oder auch Portraits ganz cool aussehen lassen.

Photofunia Filter Beispiel 1: Alien Sky

Dark Night

Dark Night (Dunkle Nacht) ist ein Filter, welches Ihr Foto so aussehen lässt, als ob es bei Einbruch der Dunkelheit geschossen wurde.

Photofunia Filter Beispiel 2: Dark Night

Summer Day

Dieser Filter verleiht einem Foto fröhliche Farben und Lichteffekte, welche üblicherweise mit einem sommerlichen Tag assoziiert werden. Das Beispielbild wurde eigentlich im Februar geschossen, was man nach der Anwendung des Filters meiner Meinung nach überhaupt nicht merkt. Man muss also nicht unbedingt auf den Sommer warten, um Bilder mit einer Sommerstimmung zu schießen!

Photofunia Filter Beispiel 3: Summer Day

Black and White

Schwarz-Weiss-Fotografie liegt heute wieder voll im Trend! Doch macht man die Bilder nicht mehr mit uralten Fotoapparaten, sondern etwa mit Filtern, wie diesem hier. Sieht doch aus, als ob es schon vor vielen Jahren geschossen wurde, oder?

Photofunia Filter Beispiel 4: Black and White

Wichtige Einschränkung

Unbedingt zu beachten ist, dass sich Photofunia in den Nutzungsbedingungen das Recht vorbehält, die hochgeladenen Bilder auch kommerziell nutzen zu dürfen.  Obschon sich viele Dienste, auch Facebook ist damit bereits mehrmals in die Kritik geraten,  diese Berechtigung nur sichern, ohne sie jemals tatsächlich zu verwenden, sollte man doch damit rechnen, dass das jederzeit passieren kann.

(dpe)

Das Problem vieler CSS3-Eigenschaften – so zum Beispiel auch bei CSS-Verläufen – ist, dass man als Entwickler viel herumprobieren muss, bis das gewünschte Ergebnis erreicht ist. Bei der Eigenschaft border-image ist das nicht anders. Die Grafikdatei für einen grafischen Rahmen muss in neun Bereiche eingeteilt werden. Dazu werden per border-image neben der Grafikdatei bis zu vier Zahlenwerte übergeben, welche die Grafik in die neun Bereiche gliedern. Es wird jeweils der Abstand von oben, unten, rechts und links angegeben. Zusätzlich kann mit ebenfalls vier Werten die Breite der jeweiligen Rahmenseiten definiert  werden.

Rahmen per Schieberegler definieren

Diese Jonglage mit bis zu acht Werten gleichzeitig erleichtert der Border-Image-Generator. Hier können per Schieberegler die Werte für die Bereiche sowie die Rahmenbreite eingestellt werden. In einer Vorschau gibt es das Ergebnis bereits während des Veränderns der Werte zu sehen. So gelingt es schnell, die richtigen Einstellungen für den Rahmen zu finden. Die Grafikdatei, aus welcher der Rahmen erstellt werden soll, muss natürlich zuvor hochgeladen oder per URL angegeben worden sein.

Oberfläche des Border-Image-Generator

Auch die Einstellungen zur Wiederholung der einzelnen Rahmensegmente können über den Generator vorgenommen werden. So lässt sich für die horizontalen und vertikalen Rahmen jeweils einstellen, ob die Rahmengrafik wiederholt, gerundet oder gedehnt werden soll. Bei der Wiederholung werden die einzelnen Segmente an den Ecken beschnitten. Bei der Rundung wiederholt der Generator die Segmente so angepasst, dass kein Segment beschnitten wird. Beim Dehnen wird das Segment nicht repliziert, sondern auf die Breite beziehungsweise Höhe des Rahmens skaliert.

CSS nur noch kopieren

Der Border-Image-Generator liefert den fertigen CSS-Quelltext mit allen Einstellungen zum Kopieren aus. Auch die entsprechenden Varianten mit Vendor-Präfixen für Mozilla, Opera und Webkit sind bereits gesetzt. Einfacher lassen sich grafische Rahmen mit der Eigenschaft border-image nicht erstellen.

(dpe)

Umleitung: Eine der Aufgaben der .htaccess (Bildquelle: Hartmut910 / pixelio.de)

Schnelles Testen von Regeln über eine simple UI

Der spartanischen Oberfläche des .htaccess-Testers reichen drei Eingabefelder. Ins erste Eingabefeld kommt die URL, die getestet werden soll. Ins zweite Feld schreibt man die Regeln, die überprüft werden sollen. Ins dritte Feld gibt man optional einen HTTP-Referer ein.

Oberfläche des .htaccess-Testers

Als Beispiel soll per Umschreibungsregel die Eingabe von robots.txt an eine PHP-Datei weitergeleitet werden. Ins erste Feld schreibe ich also die zu prüfende URL:

http://www.drweb.de/robots.txt

Ins zweite Eingabefeld kommt die zu prüfende Regel, erforderlichenfalls auch mehrere. Bis auf wenige Ausnahmen ist der .htaccess-Tester in der Lage, alle Regeln zu überprüfen. Nur mit Eingaben wie „%{REQUEST_FILENAME}“ kann der Tester noch nicht umgehen. Es wird laut Angaben der Entwickler aber daran gearbeitet, auch solche Problemstellungen in Zukunft abarbeiten zu können. Die Regel unseres Beispiels lautet:

RewriteEngine On
RewriteRule ^robots\.txt$ /robots.php

Der Tester gibt nun die per mod_rewrite umgeschriebene URL aus. In diesem Fall also:

http://www.drweb.de/robots.php

Zusätzlich zur Ausgabe-URL gibt es eine Debugging-Info, die auf Fehler in den Regeln aufmerksam macht oder Hinweise zum Verhalten des Testers gibt. Setzt man beispielsweise das Flag [L], welches dafür sorgt, dass nach dieser Regel keine weiteren Regeln mehr ausgeführt werden, so gibt der Tester einen entsprechenden Hinweis. Denn auch ein falsch gesetztes Flag kann schon mal der Grund dafür sein, dass eine Umschreibung nicht so läuft, wie sie soll.

Fazit: Mit dem .htaccess-Tester lassen sich Umschreibungsregeln sehr schnell und einfach prüfen. Außerdem hilft die Debugging-Info Fehler zu finden. Kenntnisse im richtigen Umgang mit mod_rewrite sind natürlich vorausgesetzt. Denn eine Hilfe zur Erstellung von Regeln bietet der Tester nicht.

(dpe)

Linux Mint 13: Der Kampf um den perfekten Desktop

Canonical versucht, Ubuntu zum Linux-System für jedermann zu machen und geht dabei den Weg strikter Vereinfachungen und Standardisierungen. So wurde zuletzt die Einführung der Eigenentwicklung Unity als Standard-UI in Abkehr vom bislang präferierten Gnome-Desktop von Powerusern als so radikal empfunden, dass es zu einer immerhin wahrnehmbaren Abwanderungswelle innerhalb dieser Zielgruppe hin zu Mint gekommen war.

Linux Mint greift diese und andere Entwicklungen auf und setzt ihnen Varianten entgegen. So blieb Mint beispielsweise bis zur Version 12, Codename Lisa, bei Gnome als Standarddesktop. In der Version Mint 12 versuchte das Team den Spagat, ein Gnome 3 mit MGSE und via MATE gemeinsam mit Elementen aus Gnome 2 zu verwenden. So wollte Mint Nutzern die Wahl lassen und das nicht nur einmalig während der Installation, sondern auf Dauer während des alltäglichen Gebrauchs des Systems.

Mint konnte und kann weiterhin mit purem Gnome 3.2 als Desktop betrieben werden. Diese Variante dürfte den größten Aufwand an Eingewöhnung für eingefleischte Mint-User sein. Die MGSE (Mint Gnome Shell Extensions) der Version 12 erlaubten es, Gnome 3 so anzupassen, dass es aussah, wie ein Mint-Desktop bislang ausgesehen hat. Insbesondere wurde auf diese Weise wieder eine Taskleiste, sowie ein Startmenü verfügbar gemacht. Dabei musste keine radikale Wahl getroffen werden, vielmehr erlaubten die MGSE eine fast stufenlose Anpassung der Optik zwischen Gnome 3 pur und Mint-Desktop konventionell.

Mit dem zur Version 12 neuen, noch instabilen Produkt MATE sollte es möglich sein, zusätzlich zum Gnome 3 ein Gnome 2 auf demselben Rechner zu betreiben. MATE ist ein Fork des Gnome 2 und soll in der Endausbaustufe die identische Funktionalität bieten. Das Mint-Team sieht in MATE die Zukunft traditioneller Linux-Desktops.

Das Konglomerat aus Gnome 3, MGSE und MATE repräsentierte die größten Änderungen an der 12er Version des Mint Linux. Gleichzeitig handelte es sich um die größten Unterschiede zum zugrundeliegenden Linux Ubuntu.

In der Version 13, Codename Maya, gehen die Mint-Entwickler den eingeschlagenen Weg weiter, entfernen sich dabei aber stärker von Gnome als man das bislang hätte annehmen dürfen. Die Fortführung der Unterstützung der 2er Linie des Gnome übernimmt nun vollständig MATE, dass die Entwickler wenige Monate nach Einführung als stabil und ausgereift sehen. Entsprechend legen sie eine 32bit-, wie auch eine 64bit-Version von Linux Mint 13 MATE vor.

Die Fortführung der Unterstützung der 3er Linie des Gnome-Desktops, die mit dem MGSE-Plugin in Version 12 begonnen hatte, erfolgt jetzt mit einem eigenen Gnome-Fork namens Cinnamon. Zur Begründung heißt es, dass die Architektur des MGSE als Plugin in der Fortentwicklung schnell Grenzen aufgezeigt habe.

Man arbeitet also, Canonical nicht unähnlich, an alternativen Desktop-Lösungen. Ich bin gespannt, ob die Linux-Community, insbesondere deren Kernuser, diesen Weg so mitgehen wollen. Auch Linux Mint 13 Cinnamon kann in einer 32bit-, wie in einer 64bit-Version bezogen werden.

Umsteiger von der Version 12 müssen sich also entscheiden, ob sie künftig auf MATE oder Cinnamon setzen wollen. Natürlich sollte man sich stets vor Augen führen, dass unter Linux die Installation eines alternativen Desktop nur eine Frage der Nutzung entsprechender Repositories ist…

Seit Version 12 verwendet Mint als Standardsuchmaschine Duck Duck Go. Diese Suchmaschine auf Open Source Basis hält sich strikt an das “No Tracking”-Versprechen und dürfte Nutzern aus dem Tor-Umfeld bekannt vorkommen. Mit Version 13 wird zusätzlich Yahoo! vorinstalliert. Auch hier gilt: Die Wahl der Suchmaschine ist im Wesentlichen von der Eingabe einer URL im Browser zu beeinflussen…

Mit dem fertigen Release der zwei Versionen von Mint 13 Maya ist Ende Mai zu rechnen. Maya wird eine LTS-Version sein, der der Support bis April 2017 sicher ist. Die wesentlichen Änderungen stehen bereits via RC1 zur Verfügung. Wer auf Mint 13 umsteigen will, kann das im Prinzip jetzt tun. Änderungen zur Releaseversion werden sich in engen Grenzen halten.

Zum Schluß ein Wort zum DistroWatch-Ranking

DistroWatch, immer wieder gern als Referenz zum Popularitäts-Ranking im Linux-Umfeld verwendet, bietet keine zuverlässige Statistik über die Nutzungsanteile der einzelnen Linux-Distributionen. Vielmehr zählt der Dienst lediglich die Zugriffe auf die bei DistroWatch geführten Informationsseiten zur jeweiligen Distribution. Steigt eine Distribution in diesem Ranking, so heißt das, dass mehr Besucher die Informationsseite auf DistroWatch (!) aufgerufen haben. Nicht mehr und nicht weniger kann man aus diesen Daten lesen.

Bedeutsam indes ist die Entwicklung isoliert betrachtet nicht, denn sie enthält weder Informationen zu den tatsächlichen Marktanteilen, noch zu den Downloadzahlen, noch zur Nutzerbasis. Sie sagt einfach gar nichts brauchbares aus.

Man könnte gewagt interpretieren, dass die Zunahme der Besucher auf der Infoseite zu Linux Mint den Schluss zulässt, dass das OS auf dem aufsteigenden Ast ist. Mit gleicher Berechtigung könnte man jedoch sagen, das gesteigerte Interesse an der Mint-Infoseite liegt an der verstärkten Berichterstattung zum Thema in den letzten Wochen und Monaten und sagt dementsprechend nicht einmal etwas über die Popularität aus.

Zudem ist diese Art der Rudimentärstatistik anfällig für jedwede Art der Manipulation und wenn es nur die einfache Form ist, die darin besteht, Fans zu gewinnen, die regelmäßig die DistroWatch-Infosite aufzurufen bereit sind. Canonical hat bislang nicht versucht, Befürworter auf diese Weise zu erlangen. Canonical ist insgesamt sehr eisern, was den Marktauftritt betrifft. Credo des Gründers und Mäzens Shuttleworth: “If you don’t like it, then don’t use it.”

Schauen wir kurz in eine andere Ecke des Web, rüber zu Facebook. Hier kann die Ubuntu-Fanpage aktuell über 602.000 Fans aufweisen, die Fanpage zu Linux Mint lediglich knappe 22.000, die Fanpage zu Linux Mint als Organisation keine 15.000.

Aber auch diese Zahlen sind für die Beurteilung der Einsortierung in eine Top 5 der Desktop-Linux-Distributionen ähnlich untauglich wie die DistroWatch-Werte…

Am Ende ist das alles egal: If you like Mint, then use it! If you don´t, don´t…

Dortmund: 100 Symbole mit PSD-Datei

Ich gebe es zu. Ich bin bei meinem feiertäglichen Surfgang zunächst über das Dortmund-Iconset gestolpert. In den Weiten des Netzes wird es als Riesenset mit über 750 Symbolen angepriesen. Das musste ich schon wegen des Namens sehen. Auf der Iconset-Übersicht bei PC.de angekommen, stellte ich dann fest, dass erstens das Dortmund-Set “nur” 100 Symbole vereint und zweitens, dass es noch neun weitere, nicht weniger interessante Bildzeichen-Sammlungen herunterzuladen gibt. Leider ist keines namens Gelsenkirchen dabei…

Die Dortmund-Icons stehen als einzelne PNG in den Auflösungen 16 x 16 und 32 x 32 Pixel bereit. Zusätzlich enthält die 750k große Download-Datei zwei PSD-Dateien, die jeweils die bearbeitbaren Icons in denselben zwei Auflösungen beinhaltet.

Die Bildzeichen der neun anderen Sätze bieten übrigens die gleichen Symbole, genauer, solche für den gleichen Zweck. Sie verfügen lediglich über ein anderes Design. Das kann ganz simpel, etwa in der Umfärbung auf Orange, wie im Munich-Set, oder auch aufwändiger, in voller Koloration wie bei den Sets Stuttgart, Essen oder Bremen daherkommen.

Übersicht zum Iconset Essen

Von der Ausrichtung her eignen sich die Symbolsätze eher für professionelle Web-Apps, denn für die private Homepage. So finden sich Bildzeichen für Zeiterfassungen, Warenkörbe, Kundenkonten, Projektmanagement oder Jobbörsen. Andererseits, wer sagt, dass man keine eigenen Deutungen vornehmen kann…

Wer die PC.de-Icons – wie ich – bislang nicht kannte, sollte auf jeden Fall die Übersicht bookmarken. Denn Icons kann man bekanntlich nie genug haben…

“Hallo Welt”: Eine einfache Browser-Erweiterung

Mit einer Browser-Erweiterung lassen sich neue Funktionen zu einem Browser hinzufügen. In diesem Tutorial geht es darum, eine sehr einfache Browser-Erweiterung zu basteln, welche ein Popup mit der Botschaft “Hallo Welt” anzeigen kann. Natürlich handelt es sich um keine sehr nützliche Erweiterung. Sie dient aber hervorragend zur Verdeutlichung der Grundstrukturen und erleichtert die ersten Schritte auf dem Wege zum Chrome-Erweiterungen-Profi. Ich, als völliger Neuling mit den richtigen Voraussetzungen ausgestattet, bin alle Schritte, am Ende sogar erfolgreich, durchgegangen.  Jetzt kann ich mit gutem Gewissen und aus eigener Erfahrung darüber berichten.

Schritt 1: Eine Manifestdatei erstellen

Als Erstes lege ich einen separaten Ordner an, in dem sich später alle Dateien, die für die zukünftige Chrome-Erweiterung benötigt werden, befinden sollen. Danach öffne ich “Notepad” (man kann natürlich auch einen anderen Texteditor verwenden), kopiere den aus Bild 1 ersichtlichen Code hinein und speichere die Datei unter dem Namen “manifest.json” im Ordner ab. Die Manifestdatei enthält alle Informationen über die Funktionsweise der Erweiterung. Nun kann man die Informationen der Beispieldatei anpassen. Was da genau gemacht wird, beschreibe ich in den weiteren Schritten.

Bild 1: Anlegen der Manifestdatei

Schritt 2:  Anlegen der Datei popup.html

Unsere Erweiterung soll beim Klicken auf das Erweiterungsicon ein Fenster mit dem Text “Hallo Welt” aufmachen. Dafür öffnet man eine neue Editordatei und kopiert den entsprechenden Code (Bild 2) hin. Die Datei wird unter dem Namen “popup.html” abgespeichert. Das Popup zeigt diese HTML-Datei in einem separaten Fenster an.

Bild 2: Erstellung des Popup

Schritt 3: Weitere Dateien gemäß Manifest-Datei

Da in der Manifestdatei weitere Dateien deklariert wurden, müssen diese ebenfalls angelegt werden. Jetzt erstelle ich noch zwei neue leere Dateien im Editor auf und nenne sie background.html und inject.js. Ich verwende das vorgefertigte Icon von Jef. Natürlich kann man ein beliebiges, anderes Icon nehmen, beispielsweise aus einem Freebie.

Los geht’s!

Meine Chrome-Erweiterung ist nun fertig. Um sie zu aktivieren, öffne ich den Chrome Browser und klicke auf das Schraubenschlüssel-Symbol. Im Menü wähle ich “Tools”, dann “Erweiterungen”, setze  ein Häkchen bei “Entwicklermodus” und klicke auf “entpackte Erweiterung laden”. Dann öffne ich den Ordner mit den zuvor erstellten Dateien, womit diese nun geladen werden. Oben rechts erscheint das ausgewählte Icon. Ich klicke darauf und erblicke mit grosser Freude das Popup mit den Worten “Hallo Welt”.

Bild 3: Es funktioniert tatsächlich!

Background.html und inject.js

Die Erweiterung kann weiter aufgebohrt werden. Im Weiteren habe ich erfahren, welchen Sinn die Dateien “background.html” und “inject.js” haben. Background-Pages (Hintergrundseiten) sind in HTML5-Code eingebettete JavaScripte, die für den Nutzer nicht sichtbar sind. Sie werden aber ständig im Hintergrund ausgeführt (daher auch der Name) und fungieren als Vermittler zwischen allen Erweiterungen, sowie allen aktuell geöffneten Tabs. Um meine Hintergrundseite auszubauen, habe ich in meine background.html folgenden Code eingefügt:

Bild 4: Ausbauen einer Hintergrundseite

Um die eigenen Hintergrundseiten zu debuggen, sollte man die eigens zu diesem Zweck verfügbare Debugging-Konsole aktivieren. Zu diesem Zweck gehe ich gemäß Jefs Anleitung auf die Erweiterungsseite, um dort die “background.html” zu wählen. Nun wird die Debugging-Konsole aktiviert und folgendes Fenster geöffnet:

Bild 5: Aktivieren der Debugging-Konsole

Content-Scripts und Message-Passing

Weiter geht es um JavaScripte, welche mit Hilfe der Verwendung von DOM Inhalte einer Webseite lesen können. Damit zwischen dem sogenannten Content-Script ein Datenaustausch mit der Hintergrundseite erfolgen kann, muss das sogenannte Message-Passing, also ein Informationsaustausch, erfolgen. Dies ist erforderlich, weil die Content-Scripte zusammenhängend mit verschiedenen Webseiten laufen und nicht mit Hintergrundseiten. Also müsste ich die background.html-Datei nochmal verändern. Nun sieht meine background.html folgendermaßen aus:

Bild 6: Kommunikation zwischen der Hintergrundseite und dem Content-Script mittels Message-Passing

Durch das strikte Befolgen sämtlicher Anleitungsschritte habe ich meine erste Erweiterung in Chrome gebaut und zusätzlich einiges an Hintergrundwissen gewonnen. Wenn man keine tiefen Kenntnisse in HTML5, CSS3 und JavaScript hat, aber dennoch eine Erweiterung selber basteln möchte, ist dieses Tutorial für den Einstieg sehr hilfreich.

Weitere Quellen zur Entwicklung eigener Erweiterungen in Chrome

Folgend habe ich noch ein paar Links zu weiteren Tutorials hinzugefügt, welche sich ebenfalls mit Erweiterungen für Chrome beschäftigen:

• Chrome Extensions: Hello World – ugotit.de
• Making your first Google Chrome extension – TutorialZine.com

(dpe)

Das folgende Szenario wollen wir entwickeln. Unsere Seite soll herausfinden, welche Unternehmen welcher Branchen sich in der Nähe des aktuellen Standorts des Nutzers befinden. Zum Beispiel könnte man alle Bars der Branche Gastronomie anzeigen lassen wollen. Zu diesem Zweck eignet sich die Geolocation-API der HTML5-Spezifikation, die das Auslesen des Standorts des Nutzers zulässt.

Bevor wir tiefer in die Materie einsteigen, sollten Sie sich zunächst einen API-Key von Google besorgen, den sie unter diesem Link unter Verwendung eines Google-Accounts erhalten.

Zu Beginn sollte man versuchen, die aktuellen Standortdaten des Nutzers zu erhalten. Dazu verwendet man das navigator-Objekt, welches verschiedene Informationen über den Nutzer enthält, unter anderem die Positionsdaten. Man erstellt also eine Funktion namens get_location() und ruft darin navigator.geolocation.getCurrentPosition(get_places, errors_action); auf.

function get_location() {
   navigator.geolocation.getCurrentPosition(get_places, catch_errors);
}

In der Funktion getCurrentPosition ist es nötig, mindestens zwei Parameter anzugeben. Diese stehen jeweils für Funktionen, die als Callback für getCurrentPosition dienen. Der erste Parameter wird bei einem erfolgreichen Ermitteln der aktuellen Position aufgerufen, der zweite bei einem entsprechenden Fehler. Da es meiner Ansicht nach eine gute Praxis ist, zuerst mögliche Fehler abzufangen, sollte man dies auch wirklich anfangs tun.

Geolocation Fehler abfangen

Abfangen sollte man dabei primär PERMISSION_DENIED (Nutzer weist Anfrage auf Erlaubnis der Standort-Mitteilung ab), POSITION_UNAVAILABLE (Es konnte aus technischen Gründen kein Standort ermittelt werden) und TIMEOUT (Die Anfrage benötigte zu viel Zeit). In unserem Beispiel geben wir, um das Ganze einfach zu halten, die Fehlermeldung lediglich über ein alert-Fenster aus. Dazu erstellt man eine Funktion mit dem Bezeichner catch_errors():

function catch_errors(error) {
    switch(error.code){
         case error.PERMISSION_DENIED: alert("Der Nutzer moechte keine Daten teilen.");break;
         case error.POSITION_UNAVAILABLE: alert("Die Geodaten sind nicht erreichbar.");break;
         case error.TIMEOUT: alert("Timeout erhalten");break;
         default: alert ("Unbekannter Error");break;
    }
}

Google Places API nutzen

Die eigentliche Logik soll in der Funktion get_places entwickelt werden. Dazu werden die aktuellen Standortdaten aus der Geolocation API verwendet. Folgende Informationen stellt die API zur Verfügung, nachdem der Nutzer dies genehmigt hat:

• Latitude & Longitude – Geographische Koordinaten
• Altitude – Höhe des Standortes in Metern
• Accuracy – Genauigkeit der Koordinaten-Angaben in Metern
• AltitudeAccuracy – Genauigkeit der Höhenangabe in Metern
• Heading – Bewegungsrichtung des Nutzers in Grad im Uhrzeigersinn
• Speed – Geschwindigkeit in m/s

Ziemlich viele Daten, die der Nutzer dem Entwickler offen legt, verlässlich und nützlich sind sie dabei nicht immer. Um auf die Daten Zugriff zu nehmen, erstellt man anfangs wieder einen Funktionsrumpf:

get_places(position){
 
}

Im Funktionsrumpf befindet sich nun bereits der Parameter position und position enthält die nötigen Informationen. Für die Google Places-API braucht man im Grunde nur Latitude und Longitude, sowie die Genauigkeit. Also erweitern wir unsere Funktion get_places um das Übergeben der Daten an folgende Variablen:

var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
var accuracy = position.coords.accuracy;

Als Nächstes muss die Places API-URL vorbereitet werden:

var places_url = "https://maps.googleapis.com/maps/api/place/search/json?location="+ latitude +","+ longitude +"&radius="+ accuracy +"&types=food&sensor=true&key=EuerEigenerKEY";

In die URL sind verschiedene Parameter einzupflegen. Für den Parameter location werden Breiten- und Längengrad, geteilt durch ein Komma angegeben. In Radius muss der Umkreis der Places-Ermittlung angegeben werden. Dieser könnte prinzipiell auch individuell übergeben werden, Google selber empfiehlt aber in der Places-Dokumentation die Verwendung der Genauigkeit der Ortsangabe. Unter Types kann der Typ (also Gastronomie etc.) der zurück gegebenen Informationen eingegrenzt werden. Unter Sensor stellt man mittels true oder false ein, ob die Informationen vom Client manuell oder mittels eines GPS-ähnlichen Moduls angegeben wurden. In den Parameter Key gehört der weiter oben generierte API-Key. Es gibt weitere Parameter, über die die Places Dokumentation Auskunft erteilt.

Das Ganze an Google zu senden, um eine Antwort zu erhalten, ist im Moment wegen fehlender JSONP-Unterstützung nur schwer möglich, Alternativen finden sich hier. Der beste Weg ist die direkte Implementation in die Anwendungslogik, anstatt über JavaScript zu gehen.

Gastronomie in Rostock mit Hilfe von Google Places finden

Google Places antwortet in JSON

Die Verwendung von XML ist ebenfalls zulässig. Ich zeige hier am Beispiel die Informationen, die man in JSON zurück erhält.

Zuerst erfolgt die Nennung der Quelle der Angaben. In Deutschland sind das oft die “Gelben Seiten”:

"html_attributions" : [
      "Einträge aus \u003ca href=\"http://www.gelbeseiten.de/\"\u003eGelbeSeiten®Verlagen\u003c/a\u003e"
   ]

Danach bekommt man in results die eigentlichen Ergebnisse:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

{
"geometry" : {
"location" : {
"lat" : 54.086360,
"lng" : 12.0959770
}
},
"icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/stadium-71.png",
"id" : "271b187642f633794399fcdac286c2a9b12ab3fc",
"name" : "DKB Arena",
"rating" : 5.0,
"reference" : "CnRoAAAAwWS51nGZjagN0S...",
"types" : [ "stadium", "establishment" ],
"vicinity" : "Kopernikusstraße 17, Rostock"
},

Dabei gibt geometry den exakten Standort des Ergebnisses aus, icon zeigt ein zum Ergebnis passendes Bild, id einen eindeutigen Bezeichner, reference kann für detailliertere Informationen über das Ergebnis genutzt werden, vicinity enthält einen umgebenden bekannten Standort und types die Kategorie des Ergebnisses.

Wie nutze ich Google Places effektiv ?

Sinn ergibt dieser Einsatz von Google Places zum Beispiel, wenn man ein Unternehmen mit mehreren Filialen betreibt und dem Nutzer automatisch alle Filialen und spezielle Angebote in seinem Umkreis anzeigen lassen möchte. Ein anderer Anwendungsfall kann darin bestehen, alle Geschäfte in der Umgebung anzuzeigen, in denen bestimmte Services, etwa alle Coca-Cola Verkaufsstellen, verfügbar sind. Im Endeffekt ist die Geolocation API relativ einfach zu bedienen und kann in Verbindung mit Google Places zu einem durchaus mächtigen und sinnvollen Tool auch für eigene Geschäftsanwendungen sein, egal ob es um Empfehlungen oder logistische Prozesse geht.

(dpe)

So sieht sich der Mozilla Marketplace perspektivisch

Mozilla WebRT und Native Install: Chrome lässt grüßen

Um Wortschöpfungen ist man im Web seit jeher nicht verlegen. Mozilla spricht gern von der Web Run-Time oder WebRT, meint damit aber im Grunde HTML5 als Sammelbegriff für den Dreiklang aus HTML, CSS und JavaScript. Auf dieser WebRT setzt das Projekt Open Web Apps auf, an dem Mozilla seit geraumer Zeit arbeitet. Open Web Apps beinhaltet das Konzept eines eigenen, von Mozilla betriebenen Marketplace. Nach allem, was bisher besichtigt werden kann, baut Mozilla hier die Funktionalität und Funktionsweise des Chrome Webstore weitgehend nach. Desweiteren gehört zum Projekt Open Web Apps eine extensive Dokumentation, die im Detail erläutert, worauf Developer achten müssen, wenn sie ihre Web-App zu einer installierbaren Anwendung im Rahmen der Apps Native Install machen wollen. Nicht zuletzt stellt man eine JavaScript API, sowie Zugang zu Geräte-APIs mobiler Clients bereit.

Jetzt steht der zum Konzept gehörende Marketplace kurz vor dem öffentlichen Start. Zumindest US-amerikanische Developer sind bereits jetzt aufgefordert, ihre Apps einzureichen. Die flinke Entwicklerschmiede Evernote gehört auch hier wieder zu den Pionieren und hat ihre Web-App bereits untergebracht. Derzeit können jedoch nur an der Betaphase beteiligte Account-Inhaber auf den Marketplace zugreifen. Aussagen zur Funktionalität der Evernote-Umsetzung für den Firefox sind mir daher noch nicht möglich.

Mozillas Native Apps Install Experience: Nicht viel mehr als ein Launcher

Jede Web-App, die die Mozilla WebRT nebst Marketplace nutzen will, muss – wie in Chrome Webstore oder Play Store für Android – mit einer Manifest-Datei ausgestattet sein. Anders als unter Googles Ägide ist es beim Mozilla Marketplace vorgesehen, die Installation auch über Dritt-Websites, etwa die eigene Webpräsenz ermöglichen zu können. So sieht eine einfache Manifest-Datei aus. Unter installs_allowed_from können Sie sehen, welche Websites der Entwickler als Quasi-Repository autorisiert hat:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    {  
      "version": "1.0",  
      "name": "KO Round Timer",  
      "description": "A Workout Timer for Fighting Athletes!",  
      "icons": {   
        "128": "/images/icon-128.png"  
      },    
      "developer": {  
        "name": "Joe Stagner",  
        "url": "http://koscience.com"  
      },  
      "installs_allowed_from": [  
        "http://timer.koscience.com", 
	"https://marketplace.mozilla.org"   
      ],    
      "default_locale": "en"  
    }

Zu beachten ist allerdings, dass man seinen Web-Apps eine eigene Installationslogik beibringen muss, wenn man sie außerhalb des Marketplace installierbar machen will. Die Distribution über den Marketplace erfordert diesen zusätzlichen Aufwand nicht. In diesem Blogpost erklärt Mozillas Joe Stagner ausführlich und anhand von Beispielen, wie man die eigene Installationslogik relativ einfach implementieren kann.

Derzeit unterstützen nur die Nightlies für Windows und Mac das Native Install. Versionen für Linux und Android sollen bald folgen. Unter Windows sorgt der Installationsprozess dafür, dass die Web-App einen Desktop-Shortcut, sowie einen Eintrag ins Startmenü erhält, so dass der Eindruck einer lokal installierten App möglichst originalgetreu nachgebildet wird. Weitergehende Funktionalitäten bedient das Native Install jedoch nicht. So erhält man mit der Installation zwar einen lokalen Launcher, der auch eine passende UI um die App legt, jedoch keine weiteren Offline-Fähigkeiten. Will man seiner App die Möglichkleit zur lokalen Speicherung angedeihen lassen, so erfordert das den eigenhändigen Einsatz anderer Technologien, etwa localStorage, über das Kollege Sven Schannak hier im Dr. Web Magazin vor kurzem schrieb.

Meine Meinung: Ich sehe durchaus ein Potenzial in Mozillas Konzept, allerdings nicht unter klassischen Desktop-Betriebssystemen. Schon den Chrome Webstore nutze ich allenfalls als bunte Bookmarksammlung. Von einem Chromebook, das mit überaus mäßigem Erfolg vor sich hindümpelt, aus betrachtet, sieht die Sache natürlich ganz anders aus. Mozilla zielt mit dem Native Install unter anderem auf die Android-Plattform. Hier könnte sich das Konzept zum Erfolg entwickeln, aber eben nur hier. Oder bin ich zu pessimistisch und übersehe das Killerargument?