6 Artikel mit dem Tag "Tutorial"

WordPress: Post-Formats für den Tumblr-Look

Seit der WordPress Version 3.1 ist es möglich seinen Blog ein wenig Tumblr-Like zu gestalten… die Post Formats wurden eingeführt. Auf den ersten Blick keine große Neuerung, man gibt jedem Blogeintrag einfach einen bestimmten Typen und hinterlässt im Code eine Weiche wie es denn auszusehen hat wenn man dieses Format einsetzt.

In der neusten Version von Chukki.de, welche seit gestern online ist, habe ich nun auch erstmals darauf gesetzt um Gallerien und Twitter Status-Updates einzubinden. Das schöne daran ist die Tatsache das es nicht immer ein komplett neuer Blogbeitrag sein muss um die Seite am leben zu halten. Ein Statusupdate bei Twitter oder ein paar geschossene Fotos sind schneller mal angelegt als ein Tutorial über jQuery Funktionen o.ä.

Tumblr ist dafür gerade durch diese Funktion bekannt geworden zwischen den Post Types zu unterscheiden und hat sich auch deswegen von WordPress.com immer stärker differenziert. Hier hat WordPress nun endlich nachgezogen und ein schönes Stilmittel bereitgestellt. Einfach mal kurz einen Link Posten, den letzten Twitter Statusupdate, oder ein paar geschossene Hipstamatic Fotos – all dass ist nun ganz leicht einbindbar.

Lesen

jQuery Selektoren verstehen und benutzen

Wie ihr in meinen bisheringen Blogeinträgen sehen könnt bin ich ein großes Fan von jQuery. Einfach gesagt: mit jQuery kann man soooo viel machen – etwas mehr im Detail: jQuery hat eine sehr gute Engine um Effekte und Funktionen zu erstellen die bisher nur mit Flash oder sehr sehr viel Aufwand per handgeschriebenem AJAX zu erreichen waren. Mit etwas Logik und dem Verständnis für die Selektoren und Funktionen ist es eigentlich sehr sehr einfach und für jeden der schon mal etwas mit (Web)Programmierung zu tun hatte schnell zu erlernen.

Heute möchte ich gerne auf die jQuery Selektoren eingehen – diese sind so ziemlich das wichtigste was es in jQuery zu beachten gibt. Ein falsch gesetzter Selektor kann die Performance einer jeden Website sehr stark abfallen lassen, was wieder der Usability schadet – doch dieser sollte eigentlich durch das Framework geholfen werden.

Lesen

jQuery Tutorial: mitskalierende Hintergrundbilder

Flash ist nicht erst seit der Einführung von HTML5 und dessen neuem Videotag, welches h.264 abspielen kann auf dem absteigenden Ast. Flash ist properitär, die Suchmaschinen haben ihre Probleme, sehr Ressourcenfressend (zumindest auf dem Mac) und läuft zudem weder auf dem iPhone, noch auf dem iPad von Apple. Vorteil von Flash war immer das es sehr dynamisch ist und schöne Effekte kreiert werden können.

Doch diese Grenzen heben sich langsam dank jQuery und anderen Frameworks auf. Sie bringen viele Animationstechniken mit, die Scrollbare Inhalte, Farbübergänge oder ähnliches bewerkstelligen können. In einigen vorherigen Tutorials habe ich schon die jQuery Tools beschrieben und was für schöne Sachen man damit anstellen kann.

Eine schöner Effekt war bzw. ist das mitskalieren eines großen Hintergrundbildes, wie z.B. auf der Website der Deutschen Post. Dies passt sich automatisch der Browser- bzw. Auflösungsgröße des jeweiligen Users an. Zusätzlich ein paar schöne halb-transparente Text boxen und eine schöne Website ist fertig gestaltet.

Lesen

404 – Error Reporting in WordPress

404 Fehler auf Websites sind immer unschön, doch was tun wenn doch mal so ein Fehler auftritt. Ganz einfach: WordPress bietet entweder eine Datei, die auf den Namen 404.php hört oder alternativ einen “else” zweig in den Theme Dateien, welcher genutzt wird sobald die gesuchte Seite nicht verfügbar ist.

Der unterschied zwischen beiden Varianten liegt darin ob man die “Permalink-Struktur” angepasst hat. Sollte dies der Fall sein, wird die 404.php genutzt. Wenn aber die Seiten ID’s benutzt werden, wird der “else” Zweig innerhalb der Theme Dateien single.php, index.php und page.php für das error Reporting verwendet. Für beide Varianten stell ich nun eine Funktion vor, um eine E-Mail zu versenden wenn so ein Fehler auftritt. Natürlich kann die Funktion selbst auch für andere Projekte genutzt werden, aber ich beschreibe das ganze etwas vereinfacht für WordPress.

Lesen

Tabs mit Mootools

mootoolsNach ein paar schönen Tagen im Bayrischen Oberstdorf, stell ich euch nun das nächste Tutorial bereit. Diesmal handelt es sich um eine simple Tab-Navigation mittels Mootools.
Tabs sind im Trend… moderne Browser nutzen sie, Photoshop CS4 nutzt sie und auch viele Websites sind mit dieser platzsparenden Art der Contentverwaltung ausgestattet.

Sicherlich mag es mehrere Wege geben wie man diese Funktion umsetzten kann. Ich werde euch den Weg aufzeigen, welchen ich bisher immer genutzt habe. Für weitere, eventuell auch leichtere und bessere Umsetzungen würde ich mich über ein Kommentar freuen.

Lesen

Fading Opacity mit Mootools

mootools
…oder auf Deutsch gesagt: Die Deckkraft von Bildern mit einem schönen Übergang verändern.

Sicherlich ist es möglich die Deckkraft einfach per CSS zu verändern und bei “:hover” dann die volle Deckkraft zu nutzen. Ich erkläre jedoch den Vorgang in zusammenarbeit mit dem JavaScript Framework Mootools, welches viele schöne Effekte mit sich bringt und somit ein fließender Übergang zwischen den beiden Stufen der Deckkraft möglich ist.

Lesen