Kennt ihr noch weitere, gute, Kurse? Oder Bücher, die man mal vorstellen sollte? Ich habe ja schon seit ein paar Monaten Coding for fun mit Python auf dem Schreibtisch liegen und bin begeistert: Genau das Buch, was ich gesucht habe um einen Überblick über eine schöne Auswahl der Möglichkeiten, die Python bietet, zu bekommen ohne den sonst üblichen Einsteigerteil. Also ein echtes Buch für Fortgeschrittene.

Interessant könnte das natürlich für kommerziell erfolgreiche Blogs sein: Die Leistung passt sich den Besucherströmen an und man hat wohl keine Downtime, wenn viel los ist. Ob sich das dann rechnet kann ich natürlich nicht beurteilen.

Wie seht ihr das? Wäre das für Euch interessant oder hat da schon jemand irgendwelche Erfahrungen?

Welche Version

Python gibt es momentan in zwei Version 2.x und 3.x. Normalerweise mag ich ja eher hohe Versionsnummern aber gerade bei Python ist die 2.x verbreiteter. Ihr könnt natürlich gerne eine höhere Version bei Euch lokal installieren und mit dieser arbeiten, es wird dann aber ein paar kleine aber feine Unterschiede geben, die ihr Euch selbst beibringen müsst. Soweit mir bekannt kann die Version 2.x auch fast alles, was 3.x kann und für den Einstieg steigen wir ja auch nicht so tief in die Sprache ein.

Installation

Unter Mac OS X und Ubuntu habt ihr Python vorab installiert und müsst nicht viel machen. Unter Windows schaut einfach mal hier nach (Ich selber nutze kein Windows, kann also auch kaum Support geben).

Entwicklungsumgebung

Hier gibt es zahlreiche Möglichkeiten wobei ich mich mal auf die beschränken möchte, die ich kenne

• Eclipse mit PyDev (Windows, Linux, Mac OS X) – für Anfänger sicherlich überdimensioniert. Für erfahrene Entwickler eine tolle IDE. Ich nutze diese Umgebung besonders gerne da ich unter Eclipse auch Java entwickle
• SPE IDE (Stani’s Python Editor) (Windows, Linux, Mac OS X) – nette IDE die für Anfänger und Profis gleichermaßen geeignet sein sollte.
• Texteditor Deiner Wahl – reicht absolut. Man braucht nur Syntaxhighlighting. Ich nutze hier unter Ubuntu gerne Geany (ist in den Paketquellen drin)

Für die ersten Schritte braucht man nicht wirklich eine IDE. Bestenfalls vielleicht einen Texteditor.

Hallo Welt

Ich beziehe mich jetzt mal auf die Linux und Mac OS X Welt: Um loszulegen müsst ihr erstmal nur ein Terminal öffnen und dort folgenden Befehl eingeben:

1. python

Dieser sollte die Python Shell öffnen. Wenn ihr diese wieder schließen wollt gebt einfach folgendes eins:

1. quit()

Wenn ihr nun eine einfache Ausgabe im Terminal haben wollt (der Klassiker: “Hallo Welt”) geht dies mit dem Befehl print()

1. print("Hallo Welt")

Im Gegensatz zu vielen anderen Programmiersprachen ist nichts weiter nötig um ein Programm auszuführen.

Nun können wir ja etwas mehr ausprobieren und Python ein wenig für uns rechnen lassen. Startet die Python Shell mit python und gebt folgende Zeilen ein:

1. a = 7
2. b = 6
3. c = a * b
4. print("Answer to the Ultimate Question of Life, the Universe, and Everything: ", c)

Wir haben erstmal drei Variablen, die wir anlegen (a, b und c) wobei a den Wert 7, b den Wert 6 und c den Wert a*b zugewiesen bekommt. Natürlich wollen wir unsere Zahl am Ende auch ausgeben können und nutzen hierfür print(). Hier wäre auch ein einfaches print c möglich aber ich möchte Text und Variable mal kombinieren. Die Zeichenkette (einen String) schreibe ich in Anführungszeichen und hänge mit dem Komma die Variable an. Mehr zu print() kann ich später mal schreiben. Wir sind ja noch am Anfang.

Ausführbares Programm

Auch ausführbare Programme lassen sich mit Python relativ einfach erstellen. Erstellt hierfür erstmal eine Datei answer.py und schreibt den Code aus dem vorherigen Beispiel in diese Datei. Speichert diese Datei und wechselt im Terminal (nachdem ihr die Python Shell mit quit() beendet habt) in den Ordner, in dem die Datei answer.py liegt. Dort gebt ihr dann ein:

1. python answer.py

Wenn ihr alles richtig gemacht habt sollte die Ausgabe “Answer to the Ultimate Question of Life, the Universe, and Everything: 42″ erscheinen.

Nun könnt ihr Eurer erstes Programm auch relativ einfach ausführbar machen: Schreibt in die erste Zeile der Datei answer.py #! /usr/bin/env python damit das Programm so aussieht:

1. #! /usr/bin/env python
3. a = 7
4. b = 6
5. c = a * b
6. print ("Answer to the Ultimate Question of Life, the Universe, and Everything: ", c)

Macht die Datei nun im Terminal ausführbar:

1. chmod +x answer.py

Ihr könnt Eurer Programm nun mit folgendem Befehl starten

1. ./answer.py

Und jetzt?

Also wir haben einen relativ schnellen Einstieg in Python gewählt und die ersten Dinge schon oberflächlich betrachtet. Hier kann man in vielen Bereichen noch ins Detail gehen und ich habe mich mal für eine einfache Einführung entschieden.

Was ihr schon könnt:

• Text ausgeben
• Einfache Berechnungen
• ein Programm starten
• ein Programm ausführbar machen

Ein paar Aufgaben

Die Aufgaben basieren auf dem Java Vorkurs, der an der Universität Koblenz-Landau von Dr. Riediger gehalten wird (Link). Sie wiederholen das gelernte ein wenig und vertiefen die ersten Grundlagen.

1. Name ausgeben: Gib Deinen Namen auf der Konsole aus
2. Berechne, wie viel Euro der DM-Betrag 1234,56 entspricht. (1 Euro = 1,95583 DM)
3. Vertausche die Werte von zwei Variablen. Wenn am Anfang a=5 und b=3 ist, dann soll nach dem Programm a=3 und b=5 sein
4. Vertauschen 2: Man kann zwei Werte auch ohne Hilfsvariablen vertauschen…

Ich hoffe diese erste Einführung war für Euch interessant und verleitet zu mehr Interesse an Python.

Weitere Quellen

• Wer gleich mit Python 3 einsteigen möchte: http://docs.python.org/py3k/tutorial/index.html. Die Unterschiede sind aber, gerade am Anfang, überschaubar.
• Noch eine kostenlose Quelle für den Einstieg in Python: http://diveintopython3.org/

Update(s)

Der Code sollte nun auch funktionieren, wenn man Python 3 nutzt.

Sources

The informations, written down in this post, base on some other great postings in the web. First of all Drew McCormack, who has written a very helpful tutorial on MacResearch.org.

My second source, Simones Blog, describes how to install VTK with Java Wrapper under Ubuntu.

Installing VTK under Mac OS X 10.6 – Snow Leopard

CMake

Before we can install VTK we need CMake. You can get the latest release on the CMake download site. Open the disk image and install the package.

VTK

Download the latest release of VTK on the VTK download page. I picked vtk-5.4.2.zip. Now you have to unpack the .zip (or .tar.gz). I unpacked the source to /Users/daniel/Develop/VTKSource/.

Now, we need two more folders. I created those in my terminal with:

1. mkdir /Users/daniel/Develop/VTKBuild
2. mkdir /Users/daniel/Develop/VTKBin

Next step is to run cmake to configure everything for building:

1. cd /Users/daniel/Develop/VTKBuild
2. cmake ../VTKSource

Now we must modify the CMakeCache.txt and edit the following parameter (don’t forget to change the path):

1. CMAKE_INSTALL_PREFIX:PATH=/Users/daniel/Develop/VTKBin

If you are going to develop with VTK and Java you should edit the following lines as well

1. BUILD_SHARED_LIBS:BOOL=ON
2. VTK_WRAP_JAVA:BOOL=ON

To update your build settings run again

1. cmake ../VTKSource

set the Mac OS X deployment target to your version of OS X (Snow Leopard = 10.6)

1. export MACOSX_DEPLOYMENT_TARGET=10.6

and run

1. make
2. make install

to create the binaries in your build-folder.

Using VTK and Java

To get VTK running under eclipse I had to add the vtk.jar to the build-path and add two environment variables.

First of all I added vtk.jar to the build path of my eclipse project. I found it in /Users/daniel/Develop/VTKBin/lib/vtk-5.4/java/vtk/. After this I changed my run configurations: Right-click on the class you want to run, choose “run as” > “run configurations”: Choose the “Environments”-Tab and add two variables:

• LD_LIBRARY_PATH: /Users/daniel/Develop/VTKBin/lib/vtk-5.4/
• DYLD_LIBRARY_PATH: /Users/daniel/Develop/VTKBin/lib/vtk-5.4/

If there are any questions (I started using VTK with Java today ) you can use the comments. I hope this article was helpful.

Wenn Ihr über die Twitter-API Nachrichten von Twitter abfragt bestehen diese nur aus Text. Schöner wären hier natürlich anklickbare Links, Hashtags und Nutzernamen, was ihr mit folgendem Code einfach bewerkstelligen könnt. Die Regulären Ausdrücke lassen sich natürlich auch in anderen Sprachen realisieren. Gefunden habe ich sie bei Andrea Olivato

1. var tweet = 'woohoo dank @ugotit von http://www.ugotit.de hab ich ein paar tolle #regular #expressions gefunden.';
2. tweet = tweet.replace(/http([s]?):\/\/([^\ \)$]*)/,'<a href="http$1://$2" rel="nofollow" title="$2">http$1://$2</a>');
3. tweet = tweet.replace(/@([a-zA-Z0-9_]*)/,'<a href="http://twitter.com/$1" title="$1 profile on Twitter" rel="nofollow">@$1</a>');
4. tweet = tweet.replace(/\#([a-zA-Z0-9_]*)/,'<a href="http://search.twitter.com/search?q=%23$1" title="search for $1 on Twitter" rel="nofollow">\#$1</a>');

Was es sonst noch so zu entdecken gibt könnt Ihr auf der Homepage der Weave sehen.

Wenn man, wie ich, viel mit jQuery arbeitet gibt es immer wieder Funktionen die man häufiger braucht und daher natürlich auch gerne wieder verwenden würde. An einem sehr einfachen Beispiel möchte ich Euch daher mal zeigen, wie man ein eigenes jQuery Plug-In schreibt.

Der Ansatz ist hier ein sehr einfacher: Wir hätten gerne unter unseren Bildern einen Text zum Bild der über jQuery eingebunden werden soll. Unser erster Ansatz hier ist folgender:

1. Um das Bild einen div-Container setzen mit .wrap()
2. dann unter das Bild einen Absatz (<p>) in dem der Inhalt des alt-Attributs steht

Umsetzen könnte man das u.a. so:

1. var alt = $('img.addCaption').attr("alt");
2. $('img.addCaption').wrap('<div class="image"></div<').after('>p<');
3. $('.image p').text(alt);

Wir gehen bei diesem sehr einfachen Beispiel davon aus das wir nur ein Bild mit der Klasse .addCaption im HTML-Dokument haben und speichern zunächst dessen alt-Attribut in einer Variable var ab. In der zweiten Zeile des Codes umschliessen wir das Bild (.wrap()) mit einem div-Container mit der Klasse .image und fügen dann noch hinter dem Bild einen leeren Absatz ein (.after()).
In der dritten und letzten Zeile bekommt dann der Absatz innerhalb von div.image den in alt gespeicherten Text eingesetzt (.text()).

Dieser Code hat einige Nachteile: Er klappt nur bei einem Bild da er bei mehreren Bildern mit der Klasse .addCaption immer den Text des letzten alt-Attributs einfügen würde und wenn ich schon so eine Funktion einfüge muss diese auch alternative Texte anbieten können.

Viel von den fehlenden Bedingungen könnte ich auch ohne Plug-In machen aber darum geht es hier ja nicht.

Bevor wir unsere Funktion nun in ein Plug-In stecken und ein wenig erweitern schauen wir uns den Rahmen an:

1. $.fn.addCaption = function(options) {
2. return this.each(function(){});
3. };

In der ersten Zeile definieren wir unsere Funktion und geben ihr den Namen .addCaption(). Das Gerüst erklärt sich fast von selbst. Für Euch ist erstmal nur interessant das ihr mit $.fn.funktionsname =function(){} eine Funktion definiert die Ihr später wie die bekannten jQuery-Funktionen verwenden könnt. Auf options innerhalb der Funktion gehe ich weiter unten ein.

Sehr wichtig ist dann noch die zweite Zeile. Wir möchten ja, das unsere Funktion für beliebig viele Bilder verwendet werden kann und daher müssen wir, in unserem Fall für jedes einzelne Bild, ein eigenes Ergebnis liefern.

Dabei bedeutet return erstmal das die Funktion etwas zurückgibt (für die Programmierer unter Euch nix neues). Interessanter ist da der folgende Code (also das, das wir zurückgeben): this.each(function(){}) bezieht sich erstmal auf die ausgewählten Elemente. Genauer gesagt: this bezeichnet quasi alle ausgewählten Elemente die von unserer Funktion bearbeitet werden. Mit .each() geben wir an jedes einzelne Element bearbeiten zu wollen. hr könnt Euch das so vorstellen als ob der Browser im Hintergrund jedes einzelne Element nimmt und dann die Schritte mit diesem durchgeht die wir innerhalb von function(){} durchgehen.

Bevor es jetzt richtig losgeht noch eine Absicherung: Eigentlich sollte man $ nicht verwenden wenn man ein Plug-In schreibt da es hier durchaus Probleme mit anderen Bibliotheken geben kann. Ich persönlich habe mich aber an $ gewöhnt und möchte das auch in meinem Plug-In verwenden. Wenn es Euch ähnlich geht hilft Euch folgender Code der nur zum Ziel hat das sich $ auf jQuery bezieht. Wenn Ihr Euch die zwei Zeilen sparen wollt setzt an die Stelle von $ einfach jQuery:

1. (function($){
2. $.fn.addCaption = function(options) {
3. return this.each(function() {});
4. };
5. })(jQuery);

Nun wollen wir die Funktionalität aus unserem Code weiter oben erstmal in unser Plug-In einbauen. Schon jetzt ist unser Plug-In etwas besser da wir mit dem Plug-In gleich schon mehrere Bilder bearbeiten können.

1. (function($){
2. $.fn.addCaption = function(options) {
3. return this.each(function() {
4. var obj = $(this);
5. var capText = obj.attr('alt');
6. obj.wrap('<div class="image">').after('<p>').next("p").text(capText);
7. });
8. };
9. })(jQuery);

Neu ist erstmal die Zeile 4 in der wir einer Variable obj $(this) zuweisen. Das heisst nicht mehr als das wir mit obj nun das momentane Element auswählen können. Also statt $(this).funktion() klappt innerhalb der Schleife auch obj.funktion(). Demnach schreiben wir nun auch var capText = obj.attr('alt'); um den Wert des alt-Attributs zu speichern.

Der Rest ist analog zu unserem Beispiel. Herzlichen Glückwunsch unser Plug-In ist fertig … fast…

Wir haben bei Plug-Ins noch die Möglichkeit Optionen einzubauen um das Plug-In etwas anpassbarer zu machen. Schliesslich sollten Nutzer unserer Plug-Ins nicht selber am Plug-In schrauben müssen sondern möglichst einfach anpassen können. Bei diesem Beispiel werden wir zwei Dinge dynamischer machen: Die Klasse des umschliessenden div-Containers und den Text der unter einem Bild angezeigt wird, wenn kein alt-Attribut definiert wurde.

Innerhalb de Plug-Ins definieren wir nun erstmal Standardwerte für beide Optionen. Dafür nehmen wir die Variable defaults.

1. (function($){
2. $.fn.addCaption = function(options) {
3. var defaults = {
4. wrapClass: 'image',
5. altText: 'entweder ein leeres oder kein alt-Attribut verwendet'
6. };
7. return this.each(function() {
8. var obj = $(this);
9. var capText = obj.attr('alt');
10. obj.wrap('<div class="image">').after('<p>').next("p").text(capText);
11. });
12. };
13. })(jQuery);

Diese neuen Zeilen bringen noch nichts und erzeugen eigentlich nur ein Objekt defaults dessen Werte man nun verwenden könnte. So liefert defaults.wrapClass den String ‘image’. Wir benötigen diese Standardwerte für den Fall das der Nutzer selber keine Optionen angegeben hat (options) und müssen nun im nächsten Schritt den Wert von options durch die Werte von defaults ergänzen. jQuery bietet hierfür die Funktion .extend() mit der wir ein Objekt vervollständigen können. Wenn also ein Wert innerhalb von options nicht gesetzt wird nehmen wir hier den Wert aus defaults.

1. (function($){
2. $.fn.addCaption = function(options) {
3. var defaults = {
4. wrapClass: 'image',
5. altText: 'entweder ein leeres oder kein alt-Attribut verwendet'
6. };
7. var options = $.extend(defaults, options);
8. return this.each(function() {
9. var obj = $(this);
10. var capText = obj.attr('alt');
11. obj.wrap('<div class="image">').after('<p>').next("p").text(capText);
12. });
13. };
14. })(jQuery);

Da wir nun einige Variablen haben (Klasse des div-Containers und der Text für ein leeres alt-Attribut) müssen diese noch in unserem Plug-In eingebaut werden:

1. (function($){
2. $.fn.addCaption = function(options) {
3. var defaults = {
4. wrapClass: 'image',
5. altText: 'entweder ein leeres oder kein alt-Attribut verwendet'
6. };
7. var options = $.extend(defaults, options);
8. return this.each(function() {
9. var obj = $(this);
10. var capText = obj.attr('alt');
11. if(capText == '') capText = options.altText;
12. obj.wrap('<div class="'+options.wrapClass+'">').after('<p>').next("p").text(capText);
13. });
14. };
15. })(jQuery);

In Zeile 11 wird die Länge des alt-Attributs abgefragt. Wenn dies leer ist wird als Bildunterschrift der Wert von options.altText (aus options oder defaults, je nachdem was der User möchte). Die Klasse des div-Containers setzen wir in Zeile 12 dynamisch ein.

So fertig ist ein kleines Plug-In. Der Aufruf funktioniert dann entweder über:

1. $("img").addCaption();

dann werden die Standardwerte genommen, oder über

1. $("img").addCaption({
2. wrapClass='klassenname',
3. altText='Ein anderer Text'
4. });

Besonders gut gefällt mir bei Chrome der Ansatz, den die Entwickler bei den Erweiterungen gehen: Mozillas Firefox zeigte hier ja schon vor einigen Jahren, wie interessant Erweiterungen für Nutzer sein können. Angefangen bei Werbeblockern, E-Mail Benachrichtungen bis zu vollwertigen Twitter-Clients findet man allerlei nützliches (aber auch überflüssiges) um den eigenen Browser zu verbessern.

Googles Chrome geht hier einen interessanten Weg denn im Prinzip basieren die Extensions erstmal auf HTML, CSS und JavaScript und nutzen die Möglichkeiten, die diese Sprachen liefern (u.a. auch client-side data storage in HTML5), vollständig. Es lässt sich also, mit Kenntnissen in diesen drei Sprachen schon eine eigene Erweiterung programmieren, was ich Euch an einem einfachen beispiel demonstrieren möchte.

Vorbereitungen

1. Lade Dir Chrome oder Chromium (wenn Du ein wenig Googlest ersparst Du Dir ggf. den Browser selber compilieren zu müssen) auf Deinen Rechner: (Windows/Linux / Mac)
2. Erstelle einen Ordner "HelloWorld" auf Deinem Rechner der den Code beinhalten wird.
3. Erstelle eine Datei manifest.json, die einige Informationen zu Deiner Erweiterung beinhalten wird.

manifest.json

1. {
2. "name": "Hallo Welt",
3. "version": "1.0",
4. "description": "Meine erste Erweiterung.",
5. "browser_action": {
6. "default_icon": "icon.png"
7. }
8. }

Die Bezeichnungen in der JSON-Datei sollten selbsterklärend sein. Die einzigen Punkte hier sind "browser_action" und "default_icon" welche wir brauchen, damit unsere Erweiterung auch ein Icon neben der Adressleiste in Chrome bekommt.

icon.png

Natürlich brauchen wir auch ein passendes Icon für unsere Anwendung. Ich greife hier auf ein Iconset von Manuela Hoffmann zurück, welches ihr unter www.pixelgraphix.de findet. Das Icon Eurer Wahl wandelt Ihr dann noch schnell in png um und nennt es icon.png. Sowohl manifest.json als auch icon.png kommen in den Ordner HelloWorld.

Erster Test

Und schon können wir die Erweiterung testen:

1. Öffne Chrome und dort die Seite mit den Erweiterungen. (Unter Linux findet man diese, wenn man auf das Icon mit dem Schraubenschlüssel klickt. Am Mac unter dem Menüpunkt "Fenster.")
2. Klicke auf "Entwicklermodus"
3. Importiere den Ordner HelloWorld indem Du auf "Entpackte Erweiterung laden…" klickst

Du solltest jetzt, wenn Du alles richtig gemacht hast, das Icon oben neben der Adressleiste sehen. Du kannst zwar schon auf das Icon klicken aber noch bringt Dich das nicht weiter.

Etwas anzeigen

Interessanter wird es jetzt, wenn wir die Erweiterung ein wenig ausbauen. Es geht uns jetzt erstmal nur um ein kleines Fenster in dem, wie der Name des Tutorials schon vermuten lässt, "Hallo Welt" steht.

Damit unsere Erweiterung auch weiß, welche HTML-Datei sie anzeigen soll, ergänzen wir die manifest.json nun um eine neue Zeile:

1. ...
2. "browser_action": {
3. "default_icon": "icon.png",
4. "popup": "popup.html"
5. },
6. ...

popup.html

Bei der Datei popup.html, die wir ebenfalls in unserem Ordner HelloWorld speichern, handelt es sich um eine simple HTML5-Datei:

1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>Hallo Welt</title>
6. </head>
7. <body>
8. <p>
9. Hallo Welt.
10. </p>
11. </body>
12. </html>

Wenn Du diese Erweiterung jetzt installierst (deinstallier die allte Version besser vorher – habe ich schon erwähnt, wie toll es ist nicht bei jeder Änderung an Erweiterungen den Browser neu starten zu müssen?) solltest Du bei einem klick auf Dein Icon den Text "Hallo Welt" lesen können.

Optimierungen

Damit unsere Ausgabe nun etwas schöner ist formatieren wir sie jetzt noch mit etwas CSS. Auf die Möglichkeiten die JavaScript uns noch bietet gehe ich vielleicht später mal ein.

HTML

1. <head>
2. ...
3. <link rel="stylesheet" href="style.css" type="text/css" />
4. </head>

CSS

1. body {
2. font-size: 150%;
3. font-family: Helvetica,Arial,Verdana,sans-serif;
4. color: #fff;
5. text-shadow: 0px 2px 3px #555;
6. font-weight: bold;
7. background: #cdd9e6;
8. width: 350px;
9. height: 75px;
10. }