visuelleGedanken.de

THE EFFECT IS AMAZING, BUT THE PHOTOS AREN’T

Das trifft es eigentlich ziemlich genau. Aber gut, es sind ja auch „nur“ die ersten Schritte mit dieser Technologie. Fotos zum Anklicken und mehr Text gibt es direkt auf The Verge.

Da bewegen sich 500px.com und Flickr wohl parallel in ähnliche Richtungen. Bei einer Fotoplattform allerdings auch keine große Ãœberraschung. Ich begrüße jedenfalls die Entwicklung beider Services.

Lightroom gibt es ja immer wieder mal zu reduzierten Preisen. Gerade ist es bei Amazon zu haben. Für Studenten und Lehrer sogar noch günstiger.

Uns wird immer wieder eingebläut, dass eine Webseite nicht in allen Browsern gleich aussehen kann, bzw. muss und dass 100% pixelgenaues Arbeiten daher Utopie ist.
Dennoch arbeite ich sehr genau und versuche die Designs von Marcel so gut es irgendwie geht in HTML und CSS zu transportieren.

Ich habe bis vor einiger Zeit sehr häufig Screenshots von einzelnen Elementen im Browser gemacht an denen ich gerade arbeite und diesen Screenshot dann in Photoshop geöffnet und über das Design gelegt um Abstände, Schriftgrößen oder ähnliches genau abmessen und vergleiche zu können. Das war eine nicht unbedingt sehr effiziente Arbeit und gehört zum Glück mittlerweile auch der Vergangenheit an.

Ich wusste auch damals schon, dass es Bildschirmlineale oder ähnliche Tools gibt und habe auch einige getestet. Mir konnte allerdings keine so wirklich zu sagen und meistens boten die Apps mehr als ich wollte. Ich wollte einfach nur möglichst schnell etwas abmessen und das Tool musste per Shortcut geöffnet werden können.

Meine Rettung heißt SnapRuler. Per Shortcut (in meinem Fall cmd + shift + e) aktiviere ich ein Fadenkreuz und eine dazugehörige Lupe. Ich kann in der Lupe pixelgenau sehen was ich tue und ganz einfach alles auf dem Bildschirm abmessen. Ich kann so mein Design im Browser und das Design in Photoshop perfekt vergleichen. SnapRuler bietet auch noch die Möglichkeit die Maße wahlweise als CSS-, HTML- oder Objective-C-Code in die Zwischenablage zu kopieren und das Auswahlwerkzeug beim Abmessen an Kanten „snappen“ zu lassen. Beides nutze ich allerdings nie.

Die App kostet 7,99 € im App Store, macht eine Sache perfekt und ist nach meinem Dafürhalten jeden Cent wert.

Wen das noch nicht überzeugt hat, der kann sich auf der Website noch ein Video angucken.

Steffen Böttcher:

Da ich hier recht unvorbereitet ankam, nahm ich mir gestern einen Fahrer, der mit mir die “Delhi für Dumme” -Tour machte. So bekam ich schonmal einen Eindruck und fand ein wenig Orientierung. Er konnte sehr gut englisch, verstanden habe ich ihn trotzdem nicht. Er war sehr lustig. Delhi ist laut, heiss und staubig.

Steffen ist spontan nach Delhi geflogen und beschreibt die ersten Erlebnisse in stilpiratischer Manier. Natürlich dürfen auch Fotos nicht fehlen – und die können sich sehen lassen. Ich hab’s doch schon immer gesagt, der Mann kann fotografisch jedes Genre.

My photographs are more questions than answers. I use photography as a way to help me understand why I am here. The camera helps me to see.

– Trent Parke

Christoph Boecken:

Die New York Times hat das Fotoblog The Lively Morgue bei Tumblr eingerichtet, in dem mehrmals pro Woche digitalisierte Aufnahmen aus dem gigantischen Archiv gezeigt werden, gelegentlich mit Stories durch das Lens Blog begleitet, und ich bin mir ziemlich sicher, dass da ein paar echte Perlen zu Tage kommen werden.

Wie geil ist das denn bitte?

Hamburg, 11. Januar 2011, Fuji X100

Laut Jason Fried sind es nur noch wenige Tage bis das neue Basecamp veröffentlicht wird. Im letzten Video zeigt er vorher noch mal ein paar nette kleine Details und Features. Ich kann es kaum abwarten es zu nutzen. Klingt irgendwie verrückt, wenn man bedenkt, dass es hier um ein Projektmanagementtool geht. Aber ich habe das Gefühl, es wird mir wirklich Spaß machen. Es sieht gut aus, es scheint schnell zu sein, es hat gute, neue Ansätze und ist eine Webapp, wie ich sie mir vorstelle. Es wird nicht versucht eine native App im Browser nach zu bauen, was sich einfach oft falsch anfühlt – ich muss da an Wunderkit denken – sondern es wird etwas eigenes gebaut, das wie eine Webseite aussieht und funktioniert, sich teilweise aber wie eine App verhält – es gibt zum Beispiel Tastaturkürzel.

Dass es bald eine read-only API für QUOTE.fm geben wird ist ein offenes Geheimnis und daher baue ich gerade den Labs-Bereich in dem die API erklärt wird, man eigene Apps anlegen kann und später auch diverse Snippets für die eigene Webseite findet.

Wer zum Beispiel schon mal mit der Twitter API gearbeitet hat, weiß, dass man für jede App, die man anlegt diverse geheime Codes bekommt, die man dann kopieren und irgendwo in den eigenen Code einfügen muss. Teilweise beinhalten dieses Codes so seltsame Zeichen, dass ein schnelles Markieren per Doppelklick nicht möglich ist. Natürlich kann man den Text dann auch ganz normal markieren und kopieren. Oft nervt das aber und hält unnötig auf.

Es gibt eine – wahrscheinlich auch noch tausend andere – Möglichkeit, das schneller und einfacher zu machen. Deswegen wird man in der QUOTE.fm API einfach irgendwo in den Code klicken können und hat automatisch die komplette Zeile markiert und kann sie kopieren. Nur ein Detail, was die Arbeit aber etwas angenehmer macht, da man sowieso immer den kompletten Schlüssel braucht.

Die Lösung dafür ist ganz simpel. Statt irgendeines anderen Containers nehmen wir für den Code einfach ein input-Feld, setzen es auf readonly und stylen es als wäre es normaler Text.

<input class="key select" type="text" value="bYRlJaCBHJaksjdhaAS)(§Uk8o6IfbQMemhW7TOQ" readonly />

Das dazugehörige CSS:

.key {
    width: 100%;
    color: #3c3c3c;
    font-family: 'Monaco','Courier',monospace;
    font-size: 15px;
    line-height: 15px;
    border: 1px solid bold;
    font-style: italic;
}

Soweit sind wir optisch fertig. Jetzt brauchen wir nur noch einen jQuery Schnipsel und fertig sind wir. Und jQuery einbinden nicht vergessen.

$('.select').click(function(){
    $(this).select();
});

Wenn wir also irgendwo auf der Webseite einen Text automatisch ausgewählt haben wollen, können wir einfach die Klasse .select vergeben und brauchen uns nicht weiter um irgendwas kümmern.
In diesem Fall hätte ich mir eine der beiden Klassen sparen können, in einem größeren Projekt ergibt die Aufteilung aber durchaus Sinn. Viel Spaß damit!

Den Trick verwendet dribbble übrigens auch auf den Einzelseiten für die Permalink urls.

Update: Habe es auch mal kurz bei jsfiddle gebaut, damit ihr es testen könnt.