6 Artikel mit dem Tag "JavaScript"

jQuery: floating Menü

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.

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

jQuery Tools – Teil 1: Tabs

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.

Lesen

Websitegeschwindigkeit optimieren

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.

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