Chukki.de - Der Tumblr-Blog über Webdesign, Wordpress, Social Media, Cloud und Webentwicklung

Es ist nun wieder etwas länger her, dass ich etwas auf Chukki.de geschrieben habe. Dies hat viele Gründe, sowohl beruflich als auch privat. Der private Part ist schnell erzählt: Ich bin umgezogen, vom Dortmunder Land in die City ... und somit näher am Puls der Stadt, näher am Leben und damit verbunden einfach mehr Abwechslung in meinem jungen Leben.

Der berufliche Teil ist etwas weitläufiger. Ich habe nach fast 4 Jahren als angestellter bei Lovibond gekündigt. Ich war dort in einer Inhouse-Abteilung verantwortlich für die Print- & Webdesignarbeiten, als auch für alle Coding-Aktivitäten rund ums Web & Intranet. In diesen 4 Jahren habe ich - dies war meine erste Position nach der Ausbildung zum Fachinformatiker in Fachrichtung Anwendungsentwicklung - sehr viel gelernt, sowohl im Print als auch im Web-bereich.

Sie scheinen zurzeit der große Trend zu sein: floating Menüs - also Menüs oder Interface-Elemente, die mit den Interaktionen des Users "mitfliegen". So hat z.B. Google in GMail vor ein paar Tagen diese Funktion eingebaut und dadurch das Bearbeiten der Mails deutlich erleichtert. So wird interaktives Design geschaffen und mit einer leichten Funktion der Nutzwert von Applikationen enorm erhöht.

Weitere Einssatzzwecke dieser Funktion sind z.B. Social Media Buttons: Wer einen hohen Wert auf diese Buttons legt, könnte sie rein theoretisch mit dem Benutzer beim Lesen mitfliegen lassen - so dass der User jederzeit die Möglichkeit hat die Buttons während des Lesens aufzufinden und den Beitrag zu teilen.

Ich habe das floating Menü (oder auch floating DIV) gestern hier auf Chukki.de eingebaut, wenn der User nun nach unten Scrollt bleiben ihm trotzdem die wichtigsten Funktionen erhalten - das Menü, die Suche und die Social Media Links. Auf einer Seite wie Chukki.de nicht unbedingt wichtig für ein gutes User Interface, aber ein Beispiel dafür wie man mit jQuery den Nutzwert einer Seite doch sehr leicht erhöhen kann.

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.

Steve Jobs hat in der letzten Woche eine riesen Diskussion um Flash im Internet losgetreten. Sein offener Brief mit seinen Gedanken zu Flash hat viele für- und wiedersprecher. Im groben sagt Steve Jobs das Flash properitär, ressourcenfressend und die Vergangenheit des Internets sei.

Normalerweise würde es niemanden interessieren wenn eine Person bzw. dessen Firma etwas derartiges äußern würde. Doch das iPhone und das iPad sind Verkaufsschlager die ihresgleichen suchen. Gestern erst wurde vermeldet das bereits 1 Million iPads verkauft wurden. 1 Million Geräte, dessen Hauptaufgabe die Erkundung des Webs ist. 1 Million Geräte und User die ohne Flash auskommen.

Dazu kommen noch weltweit etwa 85 Million verkaufte iPhones. Also rund 86 Million potentielle Kunden für jede kommerzielle Website - selbst wenn weniger als 1% dieser Nutzerschicht die eigene Website besuchen würde, wäre so ziemlich jede Firma oder jeder Online Shop glücklich. Bei diesen Zahlen also eine Äußerung die man ernst nehmen sollte.

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.

jQuery...liest und sieht man zur Zeit an jeder Ecke im Web. Viele Tutorials, Scripte und Plugins gibt es... doch irgendwie fehlt das grundlegende Wissen und die Quellen dazu. Ich habe schon einige Erfahrung mit JavaScript und auch anderen Frameworks wie Mootools gemacht... doch irgendwie überzeugt mich jQuery einfach immer mehr. Mit etwas Frickelei und der Orientierung an Mootools konnte ich eigentlich fast alles umsetzen was ich mir so gewünscht habe. Aber irgendwie war ich als ausgebildeter Softwareentwickler nicht so wirklich glücklich mit der Situation.

Aus diesem Grund dachte ich mir "du brauchst mehr Grundlagenwissen" und habe mich auf die Suche nach einem guten Buch zu jQuery gemacht. Ich habe nach Blogs und deren Buchtipps gesucht, allerdings viel zu wenig fundiertes gefunden - leider.

Nach einer einwöchigen Auszeit möchte ich euch heute gerne eine weitere Funktion aus den Reihen der jQuery Tools erläutern. Nachdem ich bereits die Tabs und die Tooltips etwas näher erläutert habe, werde ich heute die Scrollable Funktion erklären.

Was bedeutet Scrollable? Im Grunde ist es versteckter Content, der durch eine Scrollfunktion sichtbar gemacht wird. Optimale Einsatzgebiete dafür sind Bildergalerien oder Newsticker. So wird der Fokus auf ein Thema oder eine begrenzte Anzahl an Fotos gelegt - sollte einen User dies nicht für Interessant halten, kann er mit einem klick andere Themen und Bilder sichtbar machen. Insgesamt eine sehr schöne und imposante Funktion, welche den Content auf Seiten deutlich lebendiger werden lässt.