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

jQuery ist mit Mootools und Prototype zusammen wohl die mächtigste und beste JavaScript Library die es momentan gibt. Damit alleine sind schon sehr schöne DOM (Document Object Model) Effekte möglich, jedoch für die meisten nicht so leicht einsetzbar, da doch etwas weitreichendere JavaScript Kenntnisse nötig sind.

Und genau da setzt jQuery Tools an - einmal als eigenständige Datei oder als Komplettpaket in Verbindung mit der jQuery Library auch wahlweise auf einem, von den Entwicklern bereitgestellten CDN (Content Distribution Network). So kann innerhalb von wenigen Sekunden jede Website durch schöne und sinnvolle Effekte aufgewertet werden.

Die jQuery Tools können hier heruntergeladen werden und bieten viele verschiedene Elemente um die eigene Seite durch Features in der Usability zu verbessern und optisch aufzuwerten - Tabs, Tooltips, Scrollable, Overlay, Expose und Flash Embed sind die Funktionen, welche die Library mit sich bringt. Was sich hinter den ganzen Begrifflichkeiten versteckt erläutere ich in dieser Reihe. Heute angefangen mit den Tabs, werde ich jeden Tag ein weiteres Element der jQuery Tools mitsamt Programmierbeispielen erläutern.

...., aber er kann nicht!

Die Diskussion über das Ableben des IE6 ist momentan größer denn je. Webdesigner und -entwickler fordern mit Nachdruck, dass eine weitere Unterstützung des Internet Explorers 6 unterbunden werden sollte. Die Fakten sind da: Der IE6 ist mitlerweile 8 Jahre alt, kann keine aktuellen Webstandards richtig umsetzten, die Dateiformate .png und .svg werden nur sehr geringfügig unterstützt und er bedeutet oft einen (riesigen) Mehraufwand bei der Umsetzung von Projekten.

Please update!

Die Entwicklung der Debatte rund um den IE6 entwickelt sich momentan dahin, das immer mehr große Web 2.0 Websites die Unterstützung fallen lassen und einen Hinweis darauf anbieten, doch bitte einen neuen und aktuellen Browser zu nutzen. Da ist unter anderem die Initiative "IE6 No More" mit einer Reihe an unterstützenden Websites und einem Warnhinweis, der allen Usern mit IE6 eine Update Meldung anzeigt.

Der normale Hover Effekt durch CSS reicht vielen aus, wer es jedoch etwas hübscher haben möchte, kann Mootools zur Hilfe nehmen. Durch ein paar Zeilen Code wird aus den 2 Zuständen (Normal & Hover) eine Animation gebildet. Dies ist ganz nützlich um ein wenig "Ambiente" in die Seite zu bringen und sie etwas dynamischer wirken zu lassen.

Dazu nutzen wir die Mootools Funktion tween, welche einen Überlauf zwischen zwei CSS Eigenschaften zulässt.

Die Geschwindigkeit einer Website zu optimieren ist meist ein Zwiespalt. Einerseits möchte man eine möglichst schöne, oft durch gimmicks (JQuery, Mootools) gespickte Website haben - andererseits aber möchte man auch nicht ewig auf die auslieferung der Websites warten.

Zum Glück hat sich dieses Problem durch Breitband-Anschlüsse etwas verringert, trotzdem ist eine Optimierung der Website Geschwindigkeit nicht zu unterschätzen. Angriffspunkte um die Geschwindigkeit zu verbessern sind die Bilder, die CSS & Javascript Dateien und die gZip Komprimierung der Seite mittels PHP und Apache.

Nach 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.

Nettuts hat in einem Beitrag 10 Wege aufgezeigt den Social Networking Dienst Twitter in die eigene Seite zu integrieren. Dies geht entweder über Plugins direkt für Wordpress oder aber auch über Dienste/Scripte von anderen Anbietern.

Die Einbindung von Twitter geschieht dann über Buttons, Widgets oder auch durch Listen, alle mit mehr oder minder großem Funktionsumfang. Welcher Weg für euch der Beste ist müsst ihr selber testen. Mein Favorit ist das Plugin "Twitter for Wordpress". Es ist sowohl sehr einfach zu konfigurieren, als auch optisch sehr leicht (CSS Wissen vorrausgesetzt) an das eigene Theme azupassen.

Uns erreicht ihr weiterhin unter http://twitter.com/chukki_de

...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.