Pixelfans

DropBox und PHP

geschrieben von Pawel

Als ich eine Einladung für die DropBox bekommen hatte, fand ich das zunächst nicht spektakulär. Unter Linux bin ich es gewohnt, nahezu jedes Laufwerk mounten zu können. Komfortable Programme für Mobiles und jedes Betriebssytem und das automatische und schnelle Synchronisieren haben mich überzeugt. Daten in die DropBox zu schieben ist so einfach, dass es jeder kann, der sich mit einem Smartphone oder Computer ein wenig auskennt.

Seit Mai 2010 steht auch eine API zur Verfügung, die aber Wünsche offen lässt. Es gibt nur eine Handvoll Methoden. Irritierend ist dabei auch die Begrifflichkeit. Natürlich ist der Zugriff nicht nur vom Smartphone möglich.

Die für mich naheliegende Anwendung per PHP Daten aus der DropBox in das CMS seiner Wahl zu kopieren, scheint niemand bisher realisiert zu haben. PHP scheint von den Entwicklern ohnehin nicht Sprache der Wahl zu sein, obwohl es eine Klasse bei Google Code gibt, die aber sehr viele Abhängigkeiten mitbringt.

Glücklicherweise hat sich Tijs Verkoyen dieses Problem angenommen und eine kompakte Klasse entwickelt, die sich auch der OAuth-Problematik annimmt. Damit lassen sich alle Methoden der API aufrufen. Tijs hat eine Dokumentation zur Verfügung gestellt.

Zur Nutzung benötigt man neben der E-Mailadresse und seinem Passwort die zwei Keys, die man bei der Registrierung einer APP in der DropBox erhält.Die API erhält keine Methode, um Dateien auf den eigenen Webspace zu verschieben. Deshalb muss dort die Datei neu anlegt werden und den Inhalt des Response hinein schreiben.

$dest = 'test';//folder on your pc
if (isset($_GET['file'])) {
//kleine Pfadverschleierung
$dbfile = x0rdecrypt($_GET['file'], $secretxorkey) ;
$response = $dropbox->filesGet($dbfile);
//sichere Dateinamen
$filename = array_pop(explode('/', $dbfile));
$file = base64_decode($response['data']);
//Datei neu im Zielverzeichnis anlegen
$file_copy = fopen( './'.$dest.'/'.$filename,"wb");
//schreiben und schließen
fwrite($file_copy, $file);
fclose($file_copy);
}

Da der Beispielcode diesmal deutlich umfangreicher geworden ist, habe ich bei Github einen Fork der Klasse angelegt und die Beispieldateien ergänzt. Das Ergebnis ist eine übersichtliche Oberfläche, die es ermöglicht Dateien anzuschauen oder zu verschieben.

Kategorie: Ideen , PHP | Trackbacks (0) | Permalink

Box Reflection mit CSS für Webkit und Fox

geschrieben von Pawel

Im letzten Blogbeitrag habe ich eine einfache Möglichkeit für die Simulation einer Textreflektion gezeigt. Bisher gelingt aber die Spiegelung eines gesamten Containers nur mit -webkit-box-reflect, wie es im Webstandardblog für die Webkitbrowser beschrieben ist.

Da mein Lieblingsbrowser der Firefox bleibt, habe ich nach einer Möglichkeit gesucht, diesen Effekt auch dort nur mit CSS verfügbar zu machen. Firefox unterstützt zwar die o.g. Eigenschaft nicht, bringt aber mit dem -moz-element eine eigene Eigenschaft mit, jedes beliebige HTML-Element als CSS-Hintergrund verwenden zu können. Erwartet wird lediglich eine id eines Elements.

Ich habe das Beispiel dahingehend verändert, dass es einen zusätzlichen Container enthält, der die Reflektion für den Firefox anzeigt. Der Container vcard wird nun statt mit einer Klasse mit einer id gekennzeichnet.

Die eigentliche Arbeit wird durch folgende CSS-Anweisung geleistet:

background: 
-moz-linear-gradient(top, rgba(255,255,255,1) 55%, rgba(255,255,255,0) 80%),
 -moz-element(#vcard) no-repeat;
-moz-transform: scale(1,-1);

Es werden mehrere Hintergründe genutzt. Ein Farbverlauf von Transparent zu weiss, die aber aber "umgedacht" werden muss, da transform den gesamten Container und damit auch den Farbverlauf kippt.Der zweite Hintergrund ist der Inhalt von #vcard. Eine Besonderheit gibt es im Unterschied zu den Webkitbrowsern, es wird tatsächlich nur der Inhalt verwendet der innerhalb des Containers steht. Sollen CSS-Anweisungen mit übertragen werden, müssen sie als Inlinestyles geschrieben werden.

Das erweiterete Beispiel für Webkit und Firefox:

Box Reflection mit CSS

Zum Vergleich das Original des Webstandardsblog:

Beispiel des Webstandardsblog

Nachtrag (02.07.2011)

Lea Verou hat sich auch mit dem Thema beschäftigt. Ich habe ihr Beispiel genutzt, um mein Beispiel weiterzuentwickeln.

das verbesserte Beispiel

Kategorie: CSS | Trackbacks (0) | Permalink

Generated Content

geschrieben von Pawel

Eine der Highlights der CSS-Spezifikation ist für mich generated content. Damit wird es möglich Text aber auch Bilder hinzuzufügen, die eher Design, der Lesbarkeit u.ä. dienen, aber keinen inhaltlichen Charakter haben und daher auch nicht ins Markup gehören. Alle modernen Browser beherrschen diesen Standard, der Internet Explorer seit der Version 8.

Natürlich lassen sich darüber auch die beliebten Liststyle-Symbole einfügen, kleine Grafiken, häufig auch via Sprites. Wenig bekannt und genutzt sind Unicode-Charakter. So fügt

a.email:before{position:absolute; top:0; left:-25px; content:"\002709 \0000A0"}

einen ✉ (envelope) vor die E-Mail-Adresse ein. Das Unicodezeichen 2709 (Suchtipp: U+2709) ist der Umschlag, das Zeichen danach ein Leerzeichen.

Es gibt Wikipediaseiten, die einen guten Einstieg ermöglichen. Ein bisschen Vorsicht ist bei der Entwicklung für mobile Seiten geboten. Einige Androidfonts unterstützen den Briefumschlag nicht.

Die Unicode-Symbole haben gegenüber den Bildern nicht nur den Vorteil, dass kein Request nötig ist, sondern das sie auch bei der Skalierung der Seiten ihre Wirkung nicht verlieren.

Viel Spass, bei eigenen Experimenten. Wie wäre es z.B. mit U+2263 in Verbindung mit einer border?

Eine gewisse Dynamik beim eingefügten Content ermöglicht die Nutzung von Attributen.

h1:after{content: ""attr(title)"";}

In diesem Fall wird davon ausgegangen, dass das h1-Element einen title hat. In HTML5 könnte man auch data-text als Attribute verwenden. Was damit möglich ist, zeigt folgendes Beispiel einer

Textreflexion nur mit CSS

Kategorie: CSS | Trackbacks (0) | Permalink