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

SVG in VML konvertieren

geschrieben von Pawel

Thomas Magnum würde sagen:

Ich weiss was Sie jetzt denken und Sie haben recht.

VML ist das diese steinzeitliche, proprietäre Vektorsprache von Microsoft, die von den Browsern nur der Internet Explorer interpretiert?

Im Gegensatz dazu ist SVG doch leistungsfähiger und wird auch vom kommenden IE9 nativ unterstützt. Zudem kann das Format direkt aus gängigen Vektorprogrammen erzeugt werden.

Wenn SVG heute auf einer großen Seite verwendet wird, dann meist mit der Javascriptbibliothek Raphaël, um für die IE eine VML-Grafik zu erzeugen. Das ist solange nötig, bis die IE-Familie sich völlig erneuert hat, was noch 2-3 Jahre dauern wird.

Jede Lösung bleibt begrenzt, da das Format Filter, Animation u.v.m. nicht unterstützt. Statische Grafiken können aber auch ohne Javascript recht einfach halbautomatisch konvertiert werden.

Innerhalb von Inkscape sollten alle Farbverläufe durch gut abgrenzbare Vollfarben ersetzt werden.

Die Grafik wird dann im odg-Format gespeichert, welches OpenOffice versteht. Dieses Format ist so armselig, da es keine Farbverläufe anzeigtt. Die Grafik kann jetzt mit OO Draw geöffnet und per Kopieren und Einfügen in eine OpenOffice Textdokument kopiert werden, um es als doc (Word)-Datei abzuspeichern.

Wenn diese Datei jetzt mit dem Microsoftprodukt geöffnet wird, ist die Vektorkonvertierung bereits geschehen. Ab Word 2007 kann sogar die Grafik editiert werden und bestimmte Farbverläufe wieder hinzugefügt werden.

Ich empfehle die zu erstellende html-Datei als iframe in einen switch einzubinden, wie ich es im Blog schon erläutert habe. Nur Klugscheißer optimieren die niemals valide Datei per Hand weiter.

Wie das aussieht, kann man sich bei den Alternativgrafiken von meiner Batik-Seite abschauen.

Kategorie: Ideen , Layout , SVG | Trackbacks (0) | Permalink

Weniger Bilder durch CSS Icons

geschrieben von Pawel

Vor langer Zeit gab es eine Arbeitsgruppe, die sich mit der Zukunft beschäftigte, die XHTML2 heißen sollte. In den Entwürfen war auch mal die Abschaffung des img-Tags angedacht. Zunächst mutet es skurril an, sich eine Website ohne Bilder auszudenken. Stellt man jedoch den Inhalt in den Vordergrund, dann ist es nicht mehr so absurd. Der Entwurf sah ja ohnehin vor, Medieninhalte über das object-Tag einzubinden, wozu dann auch ausgewählte Bilder gehören können. Schmuckbilder im Markup sollten der Vergangenheit angehören.

Die Zeiten haben sich geändert und jeder Gestalter nutzt Schmuckbilder nur innerhalb der CSS. Damit diese nicht zuviel Ladezeit kosten, werden sie fachgerecht in eine einzige Bilddatei zusammengesetzt und an verschiedenen Stellen mit verschieden Teilen eingeblendet. Diese sogenannten Sprites erleichtern die optische Hervorhebung von Zitaten, Aufzählungen, Loginfeldern usw. . Damit schienen alle Möglichkeiten des modernen Webdesigns ausgereizt, bis Nicolas Gallagher mit seinen CSS-GUI-Icons nachwies, dass moderne Seiten anscheinend doch ohne Bilder auskommen können, ohne nach digitaler Steinzeit anzumuten.

Nicolas Idee beruht darauf, dass er bis zu 4 Pseudoelemente erzeugt, die er innerhalb der Liste absolut positioniert. Hauptsächlich werden die Ränder der neuen Elemente gebogen und gedreht, um typische Icons damit zu erzeugen. Es geht nicht in alten Internet Explorern, funktioniert aber problemlos in der kommenden Version 9, die mittels -ms auch CSS-Transformationen beherrscht.

Bei der Konzeption einer heutigen Website muss noch berücksichtigt werden, dass mit Opera einer der wichtigsten Mobilbrowser border-radius noch nicht interpretiert. Wohl deshalb kennzeichnet der Erfinder seinem Vorschlag noch als experimentell.

Wer in der beeindruckenden Vielfalt noch etwas vermisst, findet genügend Anregungen für eigene Experimente:

/* PAGE CURL */
/* a rectangle, border-radius should hide the topright corner */
.page a:before {
    left:5px;
    width:8px;
    height:12px;
    border:2px solid #c55500;
    -moz-border-radius-topright:7px
    -webkit-border-top-right-radius:7px;
    border-top-right-radius:7px;
    background:transparent;
}

/* a triangle with position on the top right corner of the rectangle */
.page a:after {
    left:11px;
    border-width:3.5px;
    border-style:solid;
    border-color:transparent transparent #c55500 #c55500 ;
    margin-top:-10px;
    background:transparent;
}

/* lines on the page*/
.page:after {
    left:8px;
    width:5px;
    height:1px;
    margin-top:-2px;
    border-top:2px double;
    border-bottom: 2px double;
    border-color:#c55500;
    background:transparent;
}

.page a:hover:before,
.page a:focus:before,
.page:hover:after,
.page a:active:before {
    border-color:#730800;
    background:transparent;
}

.page a:hover:after,
.page a:focus:after,
.page a:active:after {
    border-color:transparent transparent #730800 #730800;
}

Mein Icon stellt ein stilisiertes Blatt mit umgeknickter Ecke dar. Nicolas Idee lässt sich auch auf andere HTML-Elemente übertragen, wie die

Demo einer Loginbox

ohne Bilder zeigt. Seine Idee ist damit ein Meilenstein, der das Weblayout ähnlich voranbringen wird, wie 2003 die "Sliding Doors".

Kategorie: CSS , Ideen , Layout | Kommentare (0) | Trackbacks (0) | Permalink