Wer ein- und dieselbe XAMPP-Installation mit allen dazugehörigen Projektdaten und MySQL-Datenbanken unter Windows auf mehreren Rechnern verwenden möchte, der steht vor einem Problem: Die Konfigurationsdateien von Apache, MySQL und PHP sind Laufwerksgebunden und da externe Festplatten und USB-Sticks je nach freiem Laufwerksbuchstaben auf dem jeweiligen Rechner eine andere Kennung zugewiesen bekommen, ist es mit einem einfachen Kopieren des XAMPP-Verzeichnisses auf den Datenträger leider nicht getan.

Die Lösung für dieses Problem kommt aus Vietnam: Ly Anh Tuan hat mit AMPstart eine portable Version von XAMPP geschaffen: Die AMPstart.exe muss lediglich in das XAMPP-Verzeichnis kopiert und dort fortan anstelle der xampp_start.exe bzw. xampp_control.exe ausgeführt werden.

Eine wunderbar einfache Lösung die zudem viele zusätzliche Optionen bietet - wie z.B. die Möglichkeit, seine Projekte von CD/DVD laufen zu lassen.

Link:
AMPstart - A Portable Web Server (auf Englisch/Vietnamesisch)

In der neuesten Ausgabe 04/2008 des Magazins phpsolutions ist auch ein Artikel von mir zu finden, auf den ich hier einfach mal aufmerksam machen möchte

Plugin-System im Eigenbau

Ganz gleich ob WordPress oder TYPO3: Alle großen bekannten Content Management Systeme bieten die Möglichkeit, sie durch so genannte Plugins oder Extensions zu erweitern ohne dabei den eigentlichen Programmcode des CMS direkt verändern zu müssen. Doch wie realisiert man ein Plugin-System für seine eigenen Web-Applikationen?

Sollten Sie als Leser der phpsolutions auf meine Webseite gelangt sein, so freue ich mich auf Ihre Anregungen und Diskussion zu dem Artikel in den Kommentaren dieses Beitrags.

Hinweis: Dieser Artikel behandelt den Umgang mit dem alten Flex 3 SDK.

Mit der Veröffentlichung des Flex SDK als Open Source ermöglicht es Adobe Webentwicklern endlich von offizieller Seite aus, SWF-Dateien ohne die Anschaffung des teuren Adobe Flash oder die Verwendung von Dritthersteller-Tools zu erstellen. Die Entwicklungsumgebung Adobe Flex Builder bleibt jedoch kommerziell, so dass man bei Verwendung des Flex SDKs auf die Kommandozeile angewiesen ist.

Da Adobe als kommerzieller Anbieter bewusst seine IDE pushen möchte, findet man in den Adobe-Tutorials keine wirklich brauchbare Starthilfe, die von 0 anfängt - und das schon gar nicht auf Deutsch. Das möchte ich also mit diesem Artikel versuchen zu ändern.

Download und Installation des Flex SDK

Das Flex SDK ist auf der Adobe-Website zum Download erhältlich [1]. Auf der Download-Seite ist nicht der Eintrag "Flex Builder Professional" einzuwählen, sondern weiter unten der Eintrag "Flex SDK". Dort das Häkchen neben dem License Agreement setzen und den Download der etwa 40 MB großen Datei starten.

Das ZIP-Archiv sollte an zentraler und gut erreichbarer Stelle extrahiert werden - ich habe für solche Zwecke eine eigene Partition für den Bereich Software- und Web-Entwicklung auf meinem Rechner. In meinem Beispiel also entpacke ich das Archiv nach D:\FlexSDK.

Das SDK enthält neben dem eigentlichen Flex Framework eine Fülle an Beispielen, Vorlagen und Bibliotheken. Für uns ist jedoch primär der eigentliche Flex Compiler interessant, welcher im Unterverzeichnis 'bin' zu finden ist.

Bedienung des Flex Compilers

Die Handhabung des Flex Compilers mxmlc mit seinen Standard-Einstellungen ist auf Kommandozeilen-Ebene recht einfach, da er lediglich zwei Parameter benötigt: Die Quelltextdatei und die Ausgabedatei.

mxmlc -file-specs=Quelltextdatei -output=SWF-Datei

Ich habe für meine Zwecke eine Batch-Datei geschrieben, die den Aufruf des Compilers vereinfacht und zudem die Kommandozeile nach Aufruf durch den Windows Explorer offen hält, falls es Fehlermeldungen beim Kompilieren gab:

1
2
3
4

@echo off
\FlexSDK\bin\mxmlc.exe -file-specs=%1 -output=%2
pause
exit

Nun kann ich mit einer Verknüpfung zur compile.bat mit dem Namen der Quelltext und der SWF-Datei als Parameter für jedes Projekt bequem die Kompilierung anstoßen.

Hallo, Welt!

Das Kerngerüst für das einfaches Oberflächen-Layout sind auf XML basierende Dateien mit einem eigenen Namespace von Adobe. Ein einfaches "Hallo, Welt!"-Programm sieht hier folgendermaßen aus:

1
2
3
4

<?xml version="1.0" encoding="utf-8" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Label text="Hallo, Welt!" />
</mx:Application>

Dies erzeugt eine leere Oberfläche mit einem einzigen Bezeichnungsfeld mit dem Inhalt "Hallo, Welt!".
Nach der Speicherung der Datei als hallo.mxml erzeugen wir also direkt unsere erste eigene Flex-Anwendung mittels unserer compile.bat durch den Aufruf:

compile hallo.mxml hallo.swf

Der Flex Compiler meldet nach kurzer Zeit die erfolgreiche Kompilierung und die hallo.swf kann im Browser aufgerufen werden - voraussetzung ist natürlich ein aktuelles Flash Plugin.

Beispiel-Anwendung: Überblenden von Bildern

Doch grau ist alle Theorie, fahren wir daher mit einer kleinen, sinnvollen Applikation fort, die auf vielen aktuellen Websites ihre Anwendung findet: Das Überblenden von Bildern.

Unser Programm wird grob gesehen aus zwei Teilen bestehen. Zum einen die MXML-Definitionen und zum anderen einem ActionScript-Teil zur Steuerung der Überblendung.

Wir beginnen also zunächst mit der Definition eines Canvas-Objekts, welches die darzustellenden Bilder enthält. Dieses Zeichenflächen-Objekt erlaubt uns, die Bilder pixelgenau übereinander zu positionieren ohne uns weiter mit dem automatisierten Layout von Flex beschäftigen zu müssen:

1
2
3
4

<mx:Canvas>
    <mx:Image id="p1" source="bild1.jpg" />
    <mx:Image id="p2" alpha="0.0" source="bild2.jpg" />
</mx:Canvas>

Unsere Bilder werden mit dieser Art und Weise zur Laufzeit aus dem Dateisystem geladen. Es ist jedoch auch möglich, Bilder direkt in die SWF-Datei einzubetten. Ein Beispiel für so eine Einbettung wäre:

<mx:Image id="p1" source="@Embed('bild1.jpg')" />

Jedes Bild erhält von uns eine eindeutige Identifikation (p1, p2) und eine Bildquelle, ausserdem wird der Alphakanal-Wert des zweiten Bildes direkt auf 0 gesetzt, damit zu Beginn nur das erste Bild zu sehen ist.

Als nächstes machen wir uns die State-Engine des Flex-Frameworks zu nutze: Mit ihrer Hilfe lassen sich Zustände innerhalb einer Flex-Applikation definieren. In unserem Beispiel wären dies zwei Endzustände:

1. Bild 1 wird angezeigt, Bild 2 wird nicht angezeigt
2. Bild 1 wird nicht angezeigt, Bild 2 wird angezeigt

Da Zustand 1 bereits oben von uns als Ausgangsposition (Bezeichnung '*' in Flex) definiert ist, müssen wir lediglich noch Zustand 2 zusätzlich definieren:

1
2
3
4
5
6

<mx:states>
    <mx:State name="Two">
        <mx:SetProperty target="{p1}" name="alpha" value="0.0" />
        <mx:SetProperty target="{p2}" name="alpha" value="1.0" />
    </mx:State>
</mx:states>

Hier nützen wir den SetProperty-Befehl, um einfach die Alphakanal-Werte beider Bilder zu vertauschen.

Um nun den Wechsel zwischen beiden Zuständen zu steuern, benötigen wir einen Timer mit ein wenig ActionScript:

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

<mx:script>
<![CDATA[
        import flash.utils.Timer;
        import flash.events.TimerEvent;
 
        private var t: Timer;
 
        private function init(): void
        {
            t = new Timer(5000);
            t.addEventListener(TimerEvent.TIMER, changeImage);
            t.start();
        }
 
        private function changeImage(evt: TimerEvent): void
        {
            currentState = currentState == 'Two' ? '' : 'Two';
        }
    ]]>
</mx:script>

Dieser Code-Schnipsel sollte größtenteils selbsterklärend sein: Die 5000 steht für das Zeitintervall in Millisekunden, bis der Timer ausgelöst wird und über addEventListener() wird dem Timer mitgeteilt, welche Funktion er überhaupt aufrufen soll, wenn er auslöst. Dies ist in unserem Fall die Funktion changeImage(), welche den aktuellen Status der Flex-Applikation über die globale Variable des Flex Frameworks 'currentState' neu setzt.

Damit unser Code auch ausgeführt wird, ist eine Anpassung des Wurzelknotens mx:Application unserer MXML-Datei notwendig:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">

Die im Parameter creationComplete übergebene Methode wird aufgerufen, nachdem unsere Flex-Applikation vom Flex Framework fertig geladen wurde.

Fehlt zum Abschluss nur noch die eigentliche Überblende-Animation, denn momentan ist noch ein harter Übergang beim Wechsel der Bilder zu sehen. Dieser Übergang ist dank der eingebauten Effekte in Flex sehr einfach, schnell und ohne eine weitere Zeile ActionScript zu realisieren:

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

<mx:transitions>
    <mx:Transition id="toTwo" fromState="*" toState="Two">
        <mx:Parallel>
            <mx:Fade target="{p1}" duration="2500" alphaFrom="1.0" alphaTo="0.0" />
            <mx:Fade target="{p2}" duration="2500" alphaFrom="0.0" alphaTo="1.0" />
        </mx:Parallel>
    </mx:Transition>
 
    <mx:Transition id="toOne" fromState="Two" toState="*">
        <mx:Parallel>
            <mx:Fade target="{p1}" duration="2500" alphaFrom="0.0" alphaTo="1.0" />
            <mx:Fade target="{p2}" duration="2500" alphaFrom="1.0" alphaTo="0.0" />
        </mx:Parallel>
    </mx:Transition>        
</mx:transitions>

Hier machen wir uns die Transition-Engine zu nutze, indem wir für beide Zustände einen Übergang definieren: Übergang 'toTwo' führt vom Zustand * in den Zustand 'Two', den wir weiter oben definiert haben, während Übergang 'toOne' dies umkehrt. Mit Hilfe von mx:Parallel wird ein paralleler Effekt erzeugt - also ein Effekt, der für mehrere Objekte gleichzeitig durchgeführt wird. mx:Fade wiederum ist der eigentliche Effekt, welcher den Alphakanal-Wert eines Bildes von einem Start- zu einem Zielwert überführt.

Das war es dann auch schon: Nach dem Kompilieren sehen wir auf dem Bildschirm zunächst unser erstes Bild, welches dann nach 5 Sekunden weich in das zweite Bild überblendet.

Ich hoffe, ich konnte mit diesem kleinen Tutorial die Einstiegshürde in den Umgang mit dem Flex SDK ein wenig senken und möchte zum Schluss noch auf die überlebenswichtige Flex Sprachreferenz [2] sowie die Flex Hilfe [3] verweisen, an der sich entlangzuhangeln nun kein Problem mehr sein sollte.

Ich wünsche viel Erfolg!

Links:

[1] Adobe Flex SDK Download (Englisch)
[2] Adobe Flex 3 Language Reference (Englisch)
[3] Adobe Flex 3 Help (Englisch)

Nachdem ich vor ein paar Tagen Ärger damit hatte, dass mir unterstellt wurde, eine E-Mail verschickt zu haben, die jedoch letztendlich nicht von mir kam, habe ich beschlossen ab sofort alle meine Mails digital zu signieren. Als überzeugter Anwender von Googlemail brauchte ich jedoch eine Lösung, die sich möglichst nahtlos in das Webinterface und den Browser integriert, da ich schon lange bewusst auf eine lokale Mailapplikation wie Thunderbird oder Outlook verzichte.

Die Lösung kommt in Form des Firefox-Addons FireGPG, welches sich zwar noch im Beta-Stadium befindet, aber dennoch sehr zufriedenstellende Resultate liefert. Im Folgenden möchte ich die Installation unter Windows XP bzw. Windows Vista einmal näher erläutern, Grundvoraussetzung ist ein bereits installierter Firefox-Browser:

1. Installation von GnuPG

FireGPG selbst bietet keine Möglichkeit zur Verwaltung von digitalen Schlüsseln, weswegen zunächst die Installation von GnuPG zwingend erforderlich ist. Auf der Download-Seite [1] des GnuPG Projekts findet man unter dem Abschnitt "Binaries" die passende Version für das eigene Betriebssystem. Nach kurzer Zeit ist GnuPG installiert, da es sich jedoch im Prinzip um ein Kommandozeilen-Tool handelt, finden sich im Windows Startmenü keine aufrufbaren Einträge.

2. Erzeugen eines eigenen Schlüsselpaares

Über Start > Ausführen > "C:\Programme\GNU\GnuPG\gpg.exe --gen-key" fordert man GnuPG nun dazu auf, ein neues Schlüsselpaar zu erstellen. Für meine Zwecke habe ich die folgenden Optionen gewählt:

• Schlüsselart: DSA und Elgamal
• Schlüssellänge: 2048 Bit
• Gültigkeit: Schlüssel verfällt nie
• Name: Mein Vorname, gefolgt von meinem Nachnamen
• E-Mail Adresse: Meine E-Mail-Adresse
• Kommentar: Meine Website-URL (hier kann jedoch auch ein belibiger anderer Wert stehen)

3. Installation von FireGPG

Das Firefox-Addon FireGPG ist direkt von der FireGPG-Website [2] installierbar. Nach kurzer Installation muss der Browser neu gestartet werden. Unter Extras > FireGPG > Optionen im Firefox findet man dann die Konfigurationseinstellungen, hier sollte man beachten, dass unter dem Karteireiter "Gmail" die Gmail-Unterstützung aktiviert ist.

4. Digital signierte und verschlüsselte Mails versenden

Der Rest ist kinderleicht: Beim Schreiben neuer E-Mails innerhalb der Googlemail-Weboberfläche findet man ab sofort ein paar neue Buttons direkt neben "Absenden", "Jetzt speichern" und "Entwurf löschen" oberhalb des Eingabefensters.

Damit ist der Umstieg auf digital signierte und verschlüsselte Mails abgeschlossen und ich kann in Zukunft jede Verwechselung direkt durch den einfachen Hinweis wiederlegen, dass meine digitale Signatur fehlt.

Weiterführende Links:
[1] GnuPG Binaries Download
[2] FireGPG Firefox-Addon (auf Englisch)

Adobe Flex ist die zur Zeit vorreitende Technologie für die Entwicklung sogenannter Rich Internet Applications, also von Anwendungen, die Internet-Technologien verwenden und dabei Benutzeroberflächen bieten, wie sie von heutigen Betriebssystemen bekannt sind.

Wer einen kurzen Einblick gewinnen möchte, wie mächtig Flex ist, der sollte sich dieses Video (auf Englisch) einmal näher anschauen. Im Prinzip handelt es sich also um Adobe Flash, jedoch mehr aus der Sicht eines Webentwicklers und weniger aus der eines Webdesigners.

Zwar ist das Flex SDK (Software Development Kit) von Adobe in Form von Open Source und damit kostenlos veröffentlicht worden, doch die passende Entwicklungsumgebung Flex Builder bleibt ein proprietäres Vollpreisprogramm, welches für Studenten bei einem Preis von 299 US-$ nicht erschwinglich ist. Ohne den Flex Builder ist die Entwicklung von Flex-Anwendungen jedoch sehr unkomfortabel, da Features wie Autovervollständigung nicht verfügbar sind und der Compiler auf Kommandozeilenebene bedient werden muss - man verbringt also zwangsweise mehr Zeit mit Dokumentationen lesen als mit Programmieren.

Doch glücklicherweise gibt es eine Lösung für Studenten: Auf einer speziellen, gut versteckten (da nirgendwo offiziell auf der Adobe-Website verlinkten) und nur englisch-sprachigen Website kann man sich als Student bei Adobe registrieren um einen Lizenzschlüssel für den "Adobe Flex Builder 3 Pro for Education" zu erhalten. Natürlich muss ein entsprechender Nachweis erbracht werden, dass man auch wirklich eingeschriebener Student ist - beispielsweise durch eine gültige Immatrikulationsbescheinigung.

Ich habe mich also mal für die Prüfung registriert und hoffe, dass sie auch für einen deutschen Studenten einigermaßen zeitnah von Adobe bearbeitet wird. Laut Website dauert es jedenfalls bis zu 2 Wochen.

Wer sich ebenfalls registrieren möchte, hier der passende Link:

Adobe Flex Registration

Für die Portierung meiner Website von meinem selbst-entwickelten Weblog-System "CyJournal" zu WordPress musste ich mich ein wenig tiefergehender in die Funktionsweise der Open-Source-Software einarbeiten. Die beiden für mich dabei wichtigsten Links möchte ich gerne hier kurz vorstellen:

WordPress Cheat Sheets (="Spickzettel")

Die Website Kahi's WP notes hat in einem Eintrag eine ganze Reihe nützlicher "Cheat Sheets" verlinkt, die einem auf einen Blick wichtige Funktionen von WordPress verraten oder aber das Datenbank-Schema (leider in einer etwas veralteten Version) übersichtlich darstellen. Unter anderem finden sich dort die folgenden Spickzettel:

• Der WordPress-Loop mit seinen Template-Tags
• Die wichtigsten Funktionen des Plugin-APIs
• Die WordPress Datenbank-Struktur
• Die wichtigsten Template-Tags

Link: WordPress cheatsheets summarized (auf Englisch)

WordPress-Tutorials: Wir schreiben ein simples Plugin

Frank Bültge bietet auf seiner Website ein umfangreiches Tutorial in mehreren Teilen über die Entwicklung eigener WordPress-Plugins, angefangen vom grundlegenden Layout über die Hooks der WordPress-API bis hin zur Einbindung in das Administrationsmenü.

Link: bueltge.de: Wir schreiben ein simples WP-Plugin

Die Auszeichnungssprache HTML bietet in ihrer Version 4.0 dem Gestalter über das sogenannte Target-Attribut die Möglichkeit, für jeden Link individuell zu bestimmen, wo der Inhalt der folgenden Seite für den Surfer dargestellt werden soll. Der Befehl "_self" steht dabei für das selbe Browserfenster, während "_blank" ein neues Fenster erzwingt.

Was in Vergangenheit unter Umständen noch Sinn machte, ist jedoch heute nichts weiter als ein Ärgernis. Der neue Standard XHTML findet mehr und mehr Verbreitung und in diesem ist das Target-Attribut - völlig bewusst - nicht mehr definiert. Doch im Zuge der allgemeinen Vernachlässigung der wichtigen Webstandards interpretieren die heutigen Browser brav weiterhin sämtliche Target-Attribute im XHTML-Modus, obwohl dies nicht zugelassen ist. Deswegen ist es auch im Jahr 2008 bedauerlicherweise gängige Praxis, dass man nach einem normalen Linksklick auf einen Link plötzlich in einem neuen Fenster landet (oder aber Tab, sofern der eigene Browser entsprechend konfiguriert ist).

Warum aber sollte auf dieses auf den ersten Blick praktisch erscheinende Attribut nun verzichtet werden? Immerhin lässt sich so bei einem Klick auf einen externen Link vermeiden, dass der Benutzer gleichzeitig die eigenen Seiten verlässt, denn diese bleibt weiterhin geöffnet - so wird sicher so mancher argumentieren.

Doch: Allererste und somit Hauptaufgabe einer Webseite ist die Transportierung von Informationen. Die Webseite sollte dabei in der Regel auf bekannte Navigations- und Inhalskonzepte setzen, damit der Benutzer schnell die gewünschte Information finden kann. Denn was manche Webdesigner gerne vergessen: Die Seite soll sich dem Benutzer anpassen und nicht umgekehrt und dem Anwender dabei seine gewohnte Arbeitsumgebung lassen (dies gilt natürlich genauso für Software). Deswegen ist auch z.B. jegliche Form von Veränderungen am Browserfenster per JavaScript ein absolutes "do not".

Der Benutzer soll also immer selber entscheiden können, auf welche Art und Weise er einem Link folgt!

Doch was ist nun in Fällen, in denen beispielsweise ein PDF verlinkt wird? Hier würde es ja eventuell durchaus Sinn machen, dies in einem neuen Fenster zu öffnen. Aber auch hier soll nichts erzwungen werden, sondern der Benutzer in seiner Entscheidung allenfalls unterstützt werden: Beispielsweise durch die Kennzeichnung des Links durch das vorangestellte gängige PDF-Symbol. Mit dieser Methode können natürlich ebenso externe Links für den Surfer gekennzeichnet werden.

Man braucht sich also keine Sorgen zu machen, dass ohne gesetztes Target die eigene Website beim Besucher in Vergessenheit gerät: War die Information für ihn hilfreich, wird er wiederkommen. War sie es jedoch nicht, so wird auch die im Hintergrund weiterhin geöffnete eigene Seite schnell durch einen Klick auf den Schliessen-Button ins Datennirvana befördert.

Vor einiger Zeit hatte ich bereits gezeigt, wie es möglich ist mit Hilfe des Drittanbieters GooSync den Google Kalender mit dem eigenen Mobiltelefon oder PDA abzugleichen.

Nun bietet Google endlich auch selbst ein kostenloses Software-Tool an, welches die Synchronisation zwischen Outlook und dem Google Kalender ermöglicht. Da wiederum viele Handy- und PDA-Software (wie etwa die Nokia PC Suite oder Microsoft ActiveSync für PocketPCs) von Haus aus die Möglichkeit bietet, den mobilen Kalender mit Outlook abzugleichen, spart einem dies in Zukunft den Umweg über einen Drittanbieter.

Link: Google Calendar Sync

Warum ist Ihre Homepage www.jethwa.de bei Google nicht auffindbar?

Da musste ich dann doch unweigerlich lachen, bevor ich den Spam endgültig ins Datennirvana geschickt habe - komisch, woher die etwa 300 Besucher über Google täglich kommen, wenn ich da doch angeblich gar nicht gelistet bin?!

Inzwischen scheint es jedoch eine ganze Reihe brauchbarer (Open Source) Frameworks zu geben, die ich hier einfach mal ohne Wertung und Anspruch auf Vollständigkeit aufzählen möchte:

CakePHP
symfony
Qcodo
PHP on TRAX
PRADO
Horde
Zend Framework

Sobald ich die Zeit finde, werde ich mir einige dieser Kandidaten sicherlich mal näher anschauen.

Update:
Das Open Source Magazin T3N hat auf seiner Website einen Artikel zum Thema PHP Frameworks veröffentlicht. In Teil 1 werden hierin die Systeme CakePHP,
Symfony und eZ Components beschrieben.

Link:
T3N Magazin: PHP-Frameworks