In diesem Screencast zeige ich euch wie ihr ganz leicht Videos responsive machen könnt. Und dazu benutzen wir FitVids.js.

Für mehr Videos, hier abonnieren klicken. Danke!

Was ist InstantClick.js und wie nutzt man es in der eigenen Webseite?

Die Magie von box-sizing: border-box; erklärt.
Und hier geht’s zum CodePen.

Abonnieren des Channels nicht vergessen. <3

Ich speichere alle Artikel, die ich später lesen möchte in Instapaper. Das funktioniert hervorragend. Leider landen dazwischen immer wieder Webseiten, die ich aus irgendwelchen Gründen noch genauer betrachten möchte, Videos die ich noch sehen will oder Blogposts, die keine Artikel sind sondern viel mehr eine Ansammlung von Fotos.

Das ist blöd, wenn man diese Seiten dann mobil in sein Instapaper läd und wird erst richtig nervig, wenn man sich die Instapaperartikel auf den Kindle (Partnerlink) senden lässt. Deswegen muss da jetzt eine Lösung her.
Kurz mal bei Twitter nach Services gefragt, die das machen aber ich wurde entweder falsch verstanden oder mir wurde der klassische Bookmark empfohlen. Letzterer ist auch gar nicht so verkehrt und ich habe mit Delicious, einem Tag und ifttt.com eine Lösung gebastelt, die für mich funktioniert.
Da es vielleicht auch für den ein oder anderen interessant sein könnte, möchte ich euch kurz erklären, wie ich das ganze angehe.

Die ganze Vorgehensweise nennen ich unspektakulär latr. Ich habe mir ein Bookmark im Browser auf http://delicious.com/visuellegedanken/latr angelegt wo sich meine Liste mit Links befindet, die ich später noch anschauen will. Dort werden einfach alle Links angezeigt, die ich mit “latr” getagged habe. Die Bookmarks sind privat, deshalb seht ihr nichts, bzw im Moment nur einen Link. Ich kann also jetzt einfach über das normale Delicious Bookmark einen Link speichern, taggen und habe eine Liste mit Links. Wenn ich mir die Webseite angeschaut habe kann ich entweder einfach nur den Tag löschen oder einfach den Link aus meinem Delicious entfernen.

Soweit so gut. Oft finde ich aber Links durch Twitter und das dann auch noch auf dem iPhone. Ich brauchte dafür also eine Lösung.
ifttt.com ist großartig für genau solche Anwendungszwecke. Ich habe mir also ein “Rezept” angelegt, das immer wenn ich eine E-Mail mit dem Betreff #latr und einem Link als Text der E-Mail an trigger@ifttt.com schicke, bei Delicious einen privaten Bookmark mit dem Tag “latr” erstellt. (Wenn ich es richtig sehe, reicht es, wenn der Link das erste in der Mail ist, Text danach wird ignoriert.)

Das Rezept findet ihr hier und könnt es selbst nutzen: http://ifttt.com/recipes/4439

Das funktioniert hervorragend, ist mit der “Mail Link”-Funktion direkt aus Twitter for iPhone machbar und geht recht schnell. Ich mache das ja auch nicht zehn mal am Tag.
Wundert euch nicht, wenn es nicht sofort funktioniert. Dauerte bei mir auch etwas.

Ich hoffe ihr könnt etwas damit anfangen und euer Instapaper beherbergt jetzt auch nur noch Texte. Besseres Leben!

Auf tidenhub2011.de habe ich einen kleinen Effekt im Submitbutton eingebaut, in dessen Genuss allerdings nur Benutzer mit einem Webkit-Browser (Chrome, Safari) kommen. Es geht um eine kleine Animation der Hintergrundgrafik. Umgesetzt habe ich das rein mit CSS3 und -webkit-animation.

Einfache CSS Animationen kann man auch mit -webkit-transition oder -moz-transition bauen, sobald es aber etwas komplexer wird, reichen die Möglichkeiten nicht mehr aus. Daher also -webkit-animation. Ich hoffe sehr, dass auch Mozilla da noch nachrüstet im Firefox4.

Hier eine verkleinerte Version der Hintergrundgrafik zum Verstehen:

Und hier der fertige, funktionsfähige Button:

Jetzt aber zum Code:

@-webkit-keyframes welle {
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: -1120px 0px;
    }
}

Mit @-webkit-keyframes dein_animations_name legt man fest was man animiert und wie der Stand zu welchem Zeitpunkt der Animation ist. Man kann beliebig viele Schritte in Prozentwerten hinzufügen. Mir reicht in diesem Fall Anfang und Ende. Animiert wird ganz einfach die Position des Hintergrundbildes. Es läuft sozusagen einfach von links nach rechts durch. Dadurch sieht es so aus als würde sich die Welle bewegen.

INPUT.submitexample {
    margin-bottom: 15px;
    padding: 0px;
    width: 160px;
    height: 40px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #c5deed;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    text-shadow: 0px 1px 1px #000;
    border-top: 1px solid #55a4d3;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0px 1px 2px #041e2d;
    -moz-box-shadow: 0px 1px 2px #041e2d;
    box-shadow: 0px 1px 2px #041e2d;

    background: url(img/input_submit_bg.gif) no-repeat #214b80;
    background-position: 0px 0px;
    -webkit-animation-name: welle;
    -webkit-animation-play-state: paused;
    -webkit-animation-duration: 19s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: linear;
}

Der ganze Kram bis background interessiert für die Animation nicht. Ab da wird es dann aber (fast) interessant. Mit background legen wir erstmal das Hintergrundbild fest. Es kachelt nicht (no-repeat) und der Hintergrund ist blau (#214b80), falls das Bild nicht geladen will. Nennt man auch Fallback.

Als nächstes setzen wir mit background-position: 0px 0px; die Hintergrundgrafik auf ihre Ausgangsposition. In diesem Fall also oben links.

Richtig interessant wird es erst jetzt. Mit -webkit-animation-name: welle; rufen wir die Animation auf, die wir oben erstellt haben. Mit -webkit-animation-play-state: paused; halten wir die Animation an, bevor sie überhaupt anfangen kann, weil die Animation nur bei Hover über dem Button passieren soll. Standardwert ist hier „running“, was bedeutet, dass die Animation sofort beginnt.

-webkit-animation-duration: 19s; sollte selbsterklärend sein. 19s ist einfach die Dauer der Animation.

-webkit-animation-iteration-count: infinite; bedeutet, dass die Animation immer wieder abläuft. Wir erzeugen hier also einen Loop. Standardwert ist 1 und man kann jede beliebige Zahl eingeben.

-webkit-animation-direction: alternate; bedeutet, dass die Animation bei allen geraden Durchläufen vorwärts abgespielt wird und bei bei ungeraden Durchläufen rückwärts abgespielt wird. Das bedeutet, dass die Animation beim ersten Mal richtig rum und beim zweiten Mal rückwärts abgespielt wird. Das in Verbindung mit einer niemals stoppenden Animation führt dazu, dass die Welle immer wieder zurück läuft, als wäre sie auf eine Wand getroffen. Standardwert ist hier übrigens normal. Da würde die Animation einfach immer wieder am Anfang starten.

-webkit-animation-timing-function: linear; bedeutet, dass die Animation einfach linear abläuft. Standardwert ist ease. Es gibt noch ease-in, ease-out und ease-in-out, durch die eine Beschleunigung der Animation jeweils am Anfang, Ende oder an beiden Enden entsteht. Am Besten einfach mal testen.
Das war es eigentlich auch schon.

INPUT.submitexample:HOVER {
    -webkit-animation-play-state: running;
}

Bei Hover über den Button verändern wir jetzt nur noch webkit-animation-play-state auf running und schon läuft die Animation. Verlassen wir den Button mit der Maus wieder, trifft wieder die obige Situation (paused) zu und die Animation stoppt. Geht man wieder mit der Maus über den Button setzt sich die Animation genau an diesem Punkt fort.

Das war jetzt eine ganze Menge Text, ist aber eigentlich alles total simpel. Viel Spaß damit!

Da Interesse bestand, dass ich mal ein paar mehr Worte zur Fotografie mit dem iPhone sage, gibt’s heute diesen Artikel. Ich werde hier darauf eingehen wie ich Fotos mit der App Best Camera mache, bearbeite und ins Netz stelle.

Als erstes braucht ihr natürlich die App an sich. Die gibt’s hier im App Store. Kostet derzeit 2,39€ und die sind wirklich sehr gut investiert.
Installieren, starten. Soweit gut. Ihr könnt nun ein paar Einstellungen vornehmen, wenn ihr oben links auf Einstellungen tippt. Welch Ãœberraschung.

Ablauf-Einstellungen

Ich habe eingestellt, dass beim Start der App immer sofort der Aufnahmemodus gestartet wird, damit ich möglichst schnell ein Foto machen kann.
Die zweite Einstellung „Effekte“ bedeutet, dass wenn ich ein Foto bearbeitet habe und dann ein neues schiesse, die Effekte des alten Fotos nicht automatische auf das neue übertragen werden. Ich möchte lieber jedes mal mit dem Originalbild anfangen und individuell bearbeiten.
Dann gibt es noch die Einstellung der Bildgröße. Hier kann man die Fotos gleich runter skalieren lassen, damit die Dateigrößen kleiner sind und somit der Upload mobil natürlich schneller geht und die App auch schneller arbeiten kann. Ich hatte hier bisher immer den Wert 800×800 eingestellt. Bin da mit der Geschwindigkeit sogar beim iPhone 3G meist sehr zufrieden gewesen. Werde aber in kommender Zeit mal 1600×1600 testen, auch wenn es nicht empfohlen wird, aufgrund von eventuellen Programminstabilitäten.
Die vierte Einstellung ermöglicht das automatische Speichern des Originalbildes nach der Aufnahme. Ich habe das ausgestellt. Mehr lesen

Ich habe gestern mal einen einfachen Screencast aufgenommen, in dem ich kurz und knapp erkläre, wie ihr eine Metadatenvorlage in Lightroom einrichtet, sodass ihr sie bei jedem Import von Fotos ganz simpel anwenden könnt.
Vielleicht ist es ja für den ein oder anderen was Neues.

Am Besten das Video in HD und in Vollbild ansehen, die Qualität sollte es hergeben. ;)

Könnt ihr mit solchen kurzen, einfachen Erklärungen etwas anfangen oder ist das die falsche Richtung?