6 Artikel mit dem Tag "jQuery"

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

Apple vs. Flash – der Kampf um die Zukunft des Webs

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.

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

Buchtipp zu jQuery

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.

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