Wieczos Blog

Alma de Rua Capoeira Logo

Nach intensiver Vorbereitung präsentiere ich stolz die Alma de Rua Capoeira Webseite.

Ohne die Hilfe von Freunden wäre das Ergebnis nicht ganz so elegant. Harry hat das Logo entworfen, Gerrit hat die Seite designt, Julia hat die Bilder bearbeitet und ich habe die Planung und Umsetzung übernommen.

Verwendete Frameworks & Bibliotheken

Das Front-End wurde mit HTML, CSS3 & JavaScript entwickelt:

• Twitter Bootstrap als CSS-Framework
• Font Awesome für die Icons
• jQuery Vegas für die Vollbild-Hintergründe

Das Back-End wurde komplett in PHP mit dem Design Pattern MVC im Hinterkopf implementiert:

• Die ORM-Bibliothek RedBeanPHP für die Models
• Die Template Engine Twig für die Views
• Das Slim Framework für die Controller
• Zusätzlich verwendete ich Composer als Dependency Manager und Swift Mailer als Email-Bibliothek.

Ausblick

Die Webseite von Alma de Rua wird stetig weiterentwickelt. Als nächstes steht die Anpassung an Handys und Tablets mittels Media Queries(Responsive Design) an. Danach wird die Seite, um eine Karaoke-Web-App erweitert, die es erleichtert, neue Capoeira-Lieder zu lernen. Die Prototypen stehen schon, doch das Feintuning und die Tests dauern noch an.

Bei Fragen, Kritik und Anregungen stehe ich gerne zur Verfügung.

Endlich läuft mein Blog auf Stratos Servern. Ich hatte mit T-Online oft das Problem, dass das Admin-Interface nicht erreichbar war, weil es 32MB RAM gebraucht hat und nicht bekam, was sehr häufig zum HTTP-Fehler 500 führte. Zusätzlich erlaubte T-Online mir kein URL-Rewriting, was hübsche URLs verhindert hat.

Der Umzug der Domain wieczo.net von T-Onlines Nameserver zu Stratos Nameserver hat eine Weile gedauert und so war der Blog eine Zeit lang nicht erreichbar. Es tut mir leid, falls dieser Umzug einigen Lesern Probleme bereitet hat.

Ich habe lange Zeit MacFUSE in Kombination mit NTFS 3G verwendet. Doch seit Lion war es unmöglich, jegliche NTFS-Festplatten mit Schreibrechten einzubinden.

Das Problem ist, dass die NTFS-3G-Funktion fuse_wait bei jedem Mount-Versuch(dt. Einbinden der Festplatte ins Dateisystem) einen Timeout-Fehler wirft. Dieser Fehler tritt ab OS X Lion(10.7+) auf.

Die Lösung fand ich in der Wiki von OSXFUSE.

Kurzanleitung auf Deutsch

1. Den aktuellen Release von OSXFUSE runterladen und den Installer von OSXFUSE starten.
2. Während der Installation die Option “MacFUSE Compatibility Layer” auswählen. Dabei wird MacFUSE deinstalliert.
3. Die Installation von OSXFUSE abschließen.
4. NTFS-3G runterladen
5. Die Installation von NTFS-3G starten.
6. Während der Installation auf “Anpassen” klicken.
7. Die Option “MacFUSE” deaktivieren.
8. Die Installation von NTFS-3G abschließen. Üblicherweise ist kein Neustart nötig, also kann dieser abgebrochen werden.
9. Die Lösung für alle Mac OS X Lion Probleme: Das gepatchte fuse_wait von Benjamin Fleischer runterladen und installieren.
10. TADA! Schreiben auf NTFS-Volumes funktioniert wieder.

Ich weiß nicht, ob es möglich ist, einfach nur den fuse_wait Patch in eine bestehende MacFuse & NTFS-3G Konfiguration zu integrieren. Falls jemand Du hast, bitte ein Kommentar da lassen.

Um ein paar RubyGems zu installieren, habe ich make und gcc-4.2 gebraucht und festgestellt, dass sie unauffindbar waren, obwohl ich die Befehle vor dem Update von Snow Leopard auf Lion benutzt konnte. Die Lösung ist XCode über den App Store zu installieren und dann noch die Konsolen-Tools zu installieren.

Schritt für Schritt: make

• XCode runterladen und installieren
• XCode starten
• Die Einstellungen von XCode öffnen: Menü unter XCode -> Preferences
• Downloads auswählen: Im Tab Components die “Command Line Tools” installieren

• Nun ist make in der Kommandozeile verfügbar

GCC-4.2

Die erste Möglichkeit ist es einen Symlink mit llvm-gcc-4.2 zu erstellen:

sudo ln -s /usr/bin/llvm-gcc-4.2 /usr/bin/gcc-4.2

Die zweite Möglichkeit ist es GCC Mac Installer zu benutzen.

Ich verwende gerade das PHP Microframework Slim in der Version 1.5.2 für ein aktuelles Projekt. Um Downloads zu protokollieren, will ich sie über Slim laufen lassen.

Die folgenden Schritte sollten auch mit der Version 1.6.2 funktionieren:

1. Die Datei, in meinem Fall ein PDF, wird mit Hilfe der PHP-Funktion readfile in den Speicher geladen.
2. Der Content-Type wird mit der Methode header() des Slim Response-Objekts auf “application/pdf” gesetzt. Das Setzen des Content-Types ist wichtig, da ansonsten die Datei vom Browser wie eine Textdatei behandelt wird.
3. Die Datei wird via body()des Slim Response-Objektes als Antwort geschrieben.

$app = new Slim();
$app->get('/exam.pdf', function () use ( $app ) {
    $downloadFile = readfile('./public/downloads/exam.pdf');
    $response = $app->response();
    $response->header("Content-Type", "application/pdf");
    $response->body($downloadFile);
});

Somit ist die Datei unter http://localhost/exam.pdf verfügbar*.
* Soweit die index.php von Slim unter http://localhost/ verfügbar ist.

Die Protokollierung habe ich hier rausgelassen und mich nur auf den Download konzentriert.

Vorsicht: Diese Umsetzung sollte nur mit kleinen Dateien verwendet werde, weil man bei größeren Dateien Gefahr läuft die PHP Speichergrenze zu sprengen.

Viel zu viele Seiten erwarten, dass man sich anmeldet, um Zugriff auf Foren oder Demo-Software zu bekommen. Ich mag nicht auf jeder Seite meine Email zurückzulassen.

Mein Dank geht an zwei kluge Web-Apps, die es erlauben meine Email-Adresse zu schützen: 10 Minute Mail(eigentlich www.10minutemail.com, scheint tot zu sein) und Bug Me Not

Bug Me Not

Bug Me Not mit Logins für Adobe.com

Wenn ich eine Demo von Adobe Edge runterladen möchte, gehe ich auf Bug Me Not, suche mir die Login-Daten aus und kann dann ohne Angabe von privaten Informationen Edge testen.

10 Minute Mail

10 Minute Mail mit generierter Email-Adresse

Wenn es keinen Login auf Bug Me Not gibt, gehe ich auf 10 Minute Mail, kopiere die generierte Email-Adresse, melde mich mit der Adresse an, warte auf den Aktivierungslink und kann die Adresse wieder vergessen.

Weitere Seiten?

Ich freue mich über neue Seiten, die es mir erlauben, meine Email für mich zu behalten.

Version 1.0.4 von WPide wurde veröffentlicht und ich werde als Contributor gelistet :)

Da ich einen älteren Vertrag bei Strato habe, dauert es bis alle Server standardmäßig auf PHP 5.3.8 umgestellt sind und die Hilfe liefert nicht wirklich einen Hinweis, wie man 5.3 aktiviert.

Das geht recht schnell mit einem Eintrag in der .htaccess:

• Datei .htaccess erstellen
• “AddType application/x-httpd-php53 .php” in die .htaccess schreiben(ohne Anführungszeichen)
• Speichern & in den Ordner hochladen, wo PHP 5.3 verwenden werden soll.

Nachdem ich den Ajax.org Code Editor entdeckt habe, dachte ich mir, dass es ganz nett wäre, das Ganze in WordPress einzubinden. Die Plugin-Suche führte mich zu WPide. Das Plugin ersetzt den Theme & Plugin Editor durch ACE. Leider unterstützt es nur PHP-Highlighting. Deshalb habe ich beschlossen, es um JS- & CSS Highlighting zu erweitern. Während ich dabei war habe ich die große PHP-Klasse auseinander genommen und das JavaScript in separate Dateien ausgelagert.

Ich habe im Plugin Forum angefragt, wie ich den Code zum eigentlichen Plugin beitragen kann und warte noch auf die Antwort. Wer mal einen Blick auf meine Erweiterungen nehmen möchte, kann ihn hier finden.

Update

Mein Code ist in das Plugin eingeflossen. Jetzt muss ich nur noch warten, bis die Änderungen in das WP Plugin-Repository geschoben werden.

Die Arbeit an einer Version 2 läuft bereits :)

Gestern bin ich auf WebRTC gestoßen und heute hatte ich Zeit damit rumzuspielen. WebRTC steht für Web Real-Time Communications. Es ist eine JavaScript-API, die Zugriff auf die Webcam und das Mikrofon eines Rechners erlaubt.

WebRTC Verwendung

Um die WebRTC-Demos auszuprobieren, muss man Google Canary installieren. Dann aktiviert man “Enable MediaStream” unter chrome://flags oder man startet Canary mit dem  Kommando-Zeilen-Argument “- -enable-media-stream”.

(Opera bietet auch WebRTC Unterstützung, aber ich konnte es bisher nicht testen: http://dev.opera.com/articles/view/getusermedia-access-camera-privacy-ui/)

Problem mit den Demos

Nachdem ich die verschiedenen Demos ausprobiert habe, ist mir aufgefallen, dass der LocalMediaStream nicht geschlossen wird. Ich bin mir nicht sicher, ob die offenen Streams den Speicher zu müllen, aber das kleine, grüne LED an meiner Kamera geht nur aus, wenn ich entweder den Stream mit stop() schließe oder den Browser beende. Wenn ein Tab geschlossen wird, bleibt der Stream weiterhin geöffnet und meine Webcam meldet, dass sie noch an ist.

Dabei ist das Ganze nicht so schwer: Referenz zum Stream speichern und den Stream beim unload-Ereignis schließen.

//id des video tags
var video = document.getElementById("webcam");
var videoStream = null;
function onStream(stream) {
    // Referenz zum Stream speichern
    videoStream = stream;
    video.src = window.webkitURL.createObjectURL(stream);
    video.onerror = function(e) {
        console.log("Kamera Fehler: ", e);
    };
}
 
function onNoStream() {
    console.log("Kein Webcam-Stream");
} 
 
if (navigator.webkitGetUserMedia) {
    navigator.webkitGetUserMedia("video", onStream, onNoStream);
}
 
// Wichtig: Stream schließen, sonst bleibt die Kamera an
window.onunload = function() {
    if (videoStream)
        videoStream.stop();
};

Der Code ist ein Auszug aus der eigentlichen Demo.

Fazit

Insgesamt bin ich von WebRTC begeistert; eine weitere API, die weiter ins Feld von Flash vordringt. Ich hoffe nur, dass alle Browser-Hersteller es einbinden. Mal schauen, was sich noch damit bauen lässt.