JavaScript Umfrage 2012 - Tools, JavaScript-Frameworks, Webstandards und Co.

JavaScript Umfrage 2012 - Tools, JavaScript-Frameworks, Webstandards und Co.Im Vorfeld der in wenigen Tagen beginnenden JavaScript Conference 2012 in Düsseldorf, richtete der Veranstalter infaktum eine Umfrage zum Einsatz von JavaScript aus. Von den etwa 300 befragten Teilnehmern dieser Umfrage stufen sich etwa die Hälfte aller Befragten als mittel bis sehr erfahren ein, wohingegen die andere Hälfte wenig bis gar keine Erfahrungen im Umgang mit JavaScript haben. Auch die Frage wofür die Befragten JavaScript einsetzen würden, wurde mit 85% sehr eindeutig beantwortet - für Webapplikation. Etwa 38% haben ihren Fokus in Bezug auf JavaScript auf der Entwicklung von mobilen Anwendungen. Aber auch die Frage nach den zum Einsatz kommenden Tools für die Entwicklung von JavaScript Features wurde gestellt und genau diese offenbart eines der Probleme, es fehlt an geeigneten Tools oder Akzeptanz der bestehenden Tools zur Entwicklung von JavaScript.

 (weiter)

LLJS und heap.coffee - JavaScript Dialekte nach dem Vorbild von C

LLJS und heap.coffee - JavaScript Dialekte nach dem Vorbild von CZwei JavaScript Dialekte nach dem Vorbild von C - Was wäre, wenn man JavaScript mit Low-Level-Funktionen erweitern könnte? Diese Fragen hatten sich jüngst auch die für Mozilla tätigen Forscher Shu-yu Guo und Michael Bebenita gestellt. Und Guo und Bebenita sind der Überzeugung, dass sie eine zufriedenstellende Antwort auf diese Frage gefunden haben, und präsentierten die Prototypen ihrer Lösung auf Github. Ihre Idee besteht aus zwei Ansätzen, die die Bezeichnungen "LLJS", was bis vor kurzem auch unter dem Begriff "*JS" bekannt war, und "heap.coffee" tragen und einen vielversprechenden Weg in Richtung effizienterer und stabiler Programme in JavaScript einschlagen.

 (weiter)

jQuery Plugins - Best of Summer 2010

jQuery Plugins - Best of Summer 2010jQuery-Plugins - Aufgrund des gestiegenen Interesses und den zunehmenden Bedürfnissen der Anwender nach mehr Interaktion innerhalb von Webseiten und Webanwendungen, werden unter anderem basierend auf dem JavaScript-Framework jQuery immer mehr Plugins entwickelt. Ob ImageGallery, ContentSlider, interaktives Kartenmaterial oder WYSIWYG Editor - die folgende kleine Übersicht von jQuery-Plugins, die sich im Sommer 2010 bei den Anwendern großer Beliebtheit erfreuten, bieten durchaus interessante Ansätze die natürlich auch in den nächsten Monaten noch den Weg in die ein oder andere Webseite finden werden. Wer also noch etwas Inspiration diesbezüglich benötigt, kann sich gern umsehen.

 (weiter)

jQuery Websites - The international Showcase - Be inspired!

jQuery Websites - ShowcaseJavaScript & jQuery - Unabhängig von den zuletzt in immer größerer Vielfalt vorgestellten Möglichkeiten, Slide-oder Bounce-Effekte ausschließlich mit CSS3 umsetzen zu können ( sofern diese von den Browsern unterstützt werden ), bieten die bewährten JavaScript-Frameworks wie jQuery immer noch eine Vielzahl an Ansätzen, um Inhalte von Webseiten interaktiv zu gestalten. Ob Sliding oder Fading für Navigations- oder Content-Elemente, ob Lighbox-Popups für detailierte Darstellungen oder das Einbinden von Animations-Effekten für Hintergrund-Grafiken, jQuery bietet wie die folgende kleine Auswahl an internationalen Webseiten ( inklusive Buch-Tipp! ) deutlich zeigt, immer noch ein großes Repertoire um sich davon inspirieren zu lassen.

 (weiter)

JavaScript Popup - TopUp the jQuery Solution

Javascript Popup - 
TopUp the jQuery SolutionJavascript Popup - Nicht wenige von Euch die Webseiten umsetzen benötigen aufgrund vorhandenen Bildermaterials einen Ansatz dieses bspw. auch in einer vergrößerten Darstellung abbilden zu können. Sei es ein Online-Shop, eine Bilder-Galerie oder Arbeiten des eigenen Portfolios. Und die vielen von Euch sicherlich bereits bekannte Übersicht an Lightbox-Klonen verdeutlicht auch, dass es genügend Varianten gibt ein JavaScript-Popup mittels eines kleines Scriptes realisieren zu können. Wer einen Blick auf diese Übersicht wirft fragt sich allerdings, welches dieses Plugins das Richtige für die eigenen Anforderungen ist. Wer neben Bildern auch inline HTML, Videos und Flash in diesem JavaScript-Popup abbilden muss, dem empfehle ich das auf jQuery basierende Plugin TopUp.

 (weiter)

Quicksand - The animated jQuery-Filter

Quicksand - The animated jQuery-Filter Quicksand - Das in Anlehnung an Mac-Applikationen und hier insbesondere an die Datenvisualisierung CoreAnimation ( animierte Benutzeroberfläche die bspw. auch im iPhone Anwendung findet ), entstand das auf dem JavaScript-Framework jQuery basierende Filter-Plugin Quicksand. Um auch den Besuchern von Webseiten dieses Feeling nicht vorzuenthalten wurde dieses 3KB große Plugin ( komprimierte Version ) für eine Neuordnung und / oder Filterung von Elementen anhand der Bezeichnung oder auch der Dateigröße entwickelt. Ein durchaus interessanter Ansatz zur Filterung von Produkten eines Online-Shops. Das jQuery-Plugin Quicksand bietet hierfür auch einige Optionen, wie bspw. die Art und Weise und die Dauer des Animations-Effektes für die Neuordnung der Elemente.

 (weiter)

Puffing Smoke Effect with jQuery

Puffing Smoke Effect with jQueryAuf der Suche nach JavaScript-Ansätzen der vielleicht nicht ganz alltäglichen Art, bin ich kürzlich auf das jQuery-Plugin SmokeEffect gestossen. Das von Gaya Kessler entwickelte und 2KB "große" und auf jQuery basierende Plugin ist ein recht verspieltes Script, in dem aus 2 Schornsteinen abwechselnd Wolken ausgestossen werden. Die grafischen Elemente sind leicht den eigenen Anforderungen entsprechend anpassbar. Ein durchaus idealer Platz für solche Anwendungen wären vor allem auf Webseiten mit einer besonders jungen Zielklientel, auf der dieses Feature durchaus einen Weg zu steigenden Interaktionen seitens der Webseitenbesucher auf der Seite bedeuten könnte.

 (weiter)

PhotoShoot - The Photoshoot Effect with jQuery and CSS

PhotoShoot - The Photoshoot Effect with jQuery and CSSPhotoShoot - jQuery Features die einen dazu bringen, nach einem flüchtigen ersten Blick auch einen zweiten Blick zu riskieren, gibt es allein aufgrund der zunehmenden Anwender dieser JavaScript-Bibliothek zunehmend mehr. Ein solches Beispiel hierfür ist das Plugin PhotoShoot. Dieses Plugin, welches mindestens die jQuery-Version 1.3.2 als Grundlage seiner Funktionsfähigkeit benötigt, ist gerade einmal 4KB groß erzeugt einen ganz besonderen Foto-Shooting-Effekt, mit dessen Hilfe man das Arbeiten mit einer Kamera nachempfinden kann. PhotoShoot bietet hierbei einige durch den Anwender modifizierbare nützliche Optionen wie bspw. Unschärfe und Deckkraft an.

 (weiter)

Sliding Labels - jQuery and Mootools Version

Sliding Labels - jQuery and Mootools VersionWer im eCommerce erfolgreich sein will kommt um eines nicht herum - Formulare. Ob zur Registrierung und einer darauffolgenden Bestellung, der Umsetzung von Formularen kommt eine hohe Verantwortung zu, um so wichtiger ist es, dass es für die zukünftigen Kunden verständlich ist. Einen sehr interessanten Ansatz hierzu liefert Tim Wright mit Form Design with Sliding Labels. In diesem Umsetzung eines Formulars werden die Label-Elemente als Inline-Labels direkt in das Eingabefeld geschrieben. An sich nichts neues, aber auf focus gleiten diese Label mittels jQuery zur Seite, so dass der Anwender immer weiß und auch erkennt was in diesem Eingabefeld von ihm oder ihr an Angaben erwartet wird.

 (weiter)

Navigation Menu made by jQuery - Best of Tutorials

Navigation Menu made by jQuery - Best of TutorialsNicht selten werden Navigationen auf Webseiten von Internet-Nutzern aufgrund ihrer Unscheinbarkeit übersehen. Der Besucher einer Webseite sollte im Idealfall eine Navigation verstanden haben, bevor er diese benutzt hat. Prädestiniert hierfür sind unter anderem horizontal ausgerichtete Navigationen, die bei enstprechender Umsetzung selbst für multilinguale Web-Anwendungen einfach umzusetzen sind. Die folgenden ausgewählten ( auch für jQuery-Einsteiger leicht verständlichen ) Tutorials besitzen durch die Implementierung der JavaScript-Bibliothek jQuery, u.a. die Möglichkeiten den entsprechend ausgewählten Navigationspunkten zusätzlich selbsterklärende Abbildungen oder Untermenüs hinzuzufügen.

 (weiter)

jQuery 1.4 - The Future of JavaScript

jQuery 1.4 - The Future of JavaScriptjQuery 1.4 - das momentan populärste JavaScript-Framework jQuery wurde gestern an seinem 4.Geburtstag in Version 1.4 veröffentlicht und steht mit all seinen Neuerungen ab sofort zum Download bereit! Die nun wesentlich umfangreichere und mit zahlreichen neuen Features und Verbesserungen ausgestatte JavaScript Bibliothek von John Resig, bei der im übrigen 207 Bugs gefixt wurden, ist vor allem im Bereich Performance in allen Bereichen noch einmal einen Schritt besser als seine Vorgänger-Version. Das alles hat allerdings auch zur Folge, dass die nicht komprimierte 1.4er Version mittlerweile eine Dateigröße von 156KB erreicht hat. Zur Implementierung von jQuery 1.4 ist daher unbedingt die komprimierte Version mit 69KB ( 23KB Gzipped ) zu empfehlen.

 (weiter)

MopSlider - jQuery-Plugin - The Content-Slider

MopSlider - jQuery-Plugin - SliderDer Content-Slider Mopslider ist ein auf dem weit verbreiteten JavaScript-Framework jQuery basierender Slider für jede Art von Inhalt. Bei dem von Miura Hiroki entwickelten jQuery Slider und Ende letzten Jahres verbessertenScriptes können im Vergleich zu anderen jQuery Slidern, HTML-, Bild- oder aber auch Flashinhalte in den Regler integriert und auf beliebige Weise kombiniert werden. Über die Anpassung der Höhe, der Breite des Sliders oder auch des Slide-Effektes, kann MopSlider mit wenigen Handgriffen das Aussehen und das Verhalten variiert werden. MopSlider ist ein Cross-Browser-Plugin, welches mit Safari4, Firefox3, Opera9, IE6 (!), IE7, IE8 und Google Chrome funktioniert.

 (weiter)

jQuery-Plugins and Tutorials - Sliding, fading, scrolling, zooming, ...

jQuery-Plugins and Tutorials - Sliding, fading, scrolling, zooming, ...jQuery-Plugins die den Umgang mit den verschiedensten Arten von Webseiteninhalten wie Text-, Bild-, Flash- oder aber auch Videomaterial benutzerfreundlicher werden lassen, gibt es zusehends mehr. Das heutige Posting zum Thema jQuery beinhaltet daher eine kleine Auswahl an "Plugins und Tutorials" zu Navigationskonzepten mit Slide- und Zoom-Verhalten, Hintergrund- und Spotlight-Effekte, aber auch ein animierte Cartoon-Roboter, dessen Tutorial bereist aus dem Jahr 2008 stammt, hat diesmal die Aufnahme in die kleine Beispiel-Übersicht der sehr beliebten JavaScript-Biobliothek von John Resig geschafft.

 (weiter)

jsFiddle - Test your JavaScript-Code

Shell Editor | jsFiddle | to test your JavaScript codejsFiddle ist ein auf Mootools basierender Shell-Editor, der es JavaScript-interessierten Usern ermöglicht, auf populäre und aktuelle JavaScript-Frameworks wie bspw. MooTools, jQuery, Dojo, YUI oder auch Prototype zugreifen zu können und mit Ihnen den Anforderungen entsprechende Code-Snippets zu erstellen. jsFiddle enthält einen HTML-, CSS- und einem JavaScript-Editor, eine Ausgabe der zusammengestellten Daten, welche dann entweder gespeichert oder via URL-Shortener oder auch als Einbettung via IFrame, weitere Verbreitung finden können. Der von Piotr Zalewa entwickelte Shell-Editor ( siehe Abbildung ) zum Testen von jQuery, Mootools & Co. ist eine durchaus interessante Umgebung, die es Interessierten Anwendern ermöglicht, live das ein oder andere JavaScript-Snippet zu testen und das ohne selbst Dateien abspeichern oder ablegen zu müssen.

 (weiter)

jQuery Plugin Roundabout (- Shapes) - Die interaktive Bilder Galerie

jQuery Plugin Roundabout - Die interaktive Bilder GalerieAnhand der Benutzerführung zu mehr Aktivität durch den Besucher einer Webanwendung zu kommen ist ein Ziel welches jeder gern erreichen möchte. Ein Mittel welches hierbei oft zum Einsatz kommt sind (Produkt-)Bilder die den Betrachter aufgrund ihres Motivs, ihrer Position innerhalb der Webseite oder wegen ihrer möglichen Interaktion der emotional ansprechen. Das jQuery-Plugin ( Version 1.2.3+ ) Roundabout ist ein Javascript welches eine auf Listen basierte Bildergalerie mit 3D Slideshow Effekt erzeugt, welche aufgrund der zahlreichen Variationen ( horizontal, vertikal, diagonal, ... ) an das hier im Webstandardblog bereits vorgestellte ImageFlow erinnert. Dieses von Fred LeBlanc entwickelte Plugin für jQuery liegt aktuell in Version 1.0 vor und ist 14KB groß.

 (weiter)

jQuery Plugin Meerkat - Fixed Top/Bottom Content

jQuery Plugin Meerkat - Fixed Top/Bottom Content Webinhalte (werbe)wirksam auf einer Webseite zu präsentieren, ist eines der Themen die Webseitenbetreiber fortwährend beschäftigen. Sei es eine Umfrage, die Anmeldung zu einem Newsletter oder aber auch die Positionierung von Werbung, eines haben alle gemeinsam - sie müssen dem Besucher der Webseite ins Auge fallen. Das kleine jQuery Plugin Meerkat ( zu dt. Erdmännchen ) bietet für solche Anforderungen, einen durchaus geeigneten Ansatz. Denn mittels dieses kleinen auf jQuery basierenden Scripts können solche Bereiche einer Webseite ( benötigen lediglich die id="meerkat" ) leicht und relativ unkompliziert mit entsprechenden Eigenschaften in den Fokus des Betrachters gerückt werden und somit aufgrund der Position und bei entsprechend ansprechender Umsetzung, dazu beitragen die Konversionsrate wie bspw. einem Werbebanner oder auch Google-AdSense-Werbung spürbar zu erhöhen.

 (weiter)

jQuery Features - Best of Showcase

jQuery Features - ShowcasejQuery - Um dem Suchbegriff der in diesem Jahr am meisten Besucher über die Suchmaschinen zum Webstandardblog gebracht, ein wenig Tribut zu zollen und um den Besuchern die in diesem Blog aufgrund dieses Keywords hier recht klickfreudig unterwegs waren bzw. sind, weiteren Content anbieten zu können, werden Euch heute 10 Webseiten präsentiert, die den Einsatz von eben diesem Framework nicht gescheut haben und auf diese Weise zu sehenswerten und inspirierenden Effekten gekommen sind. Ob Sliding, Pagescrolling, Lighbox-Popups oder Drag ′n Drop-Effekte, jQuery bietet genügend Möglichkeiten, um für nahezu jede Anforderung eine passende Funktion umsetzen zu können.

 (weiter)

jQuery Masonry - Floating content - The easy way!

jQuery Masonry - Floating content - The easy way!Kleiner Aufwand, große Wirkung! Ein Fazit das jeder gern Webseitenbesitzer von der ein oder anderen Anpassung innerhalb seines Layouts erwartet. Mit dem jQuery-Plugin Masonry allerdings, könnte dies Wirklichkeit werden. Denn jeder der im Umgang mit CSS und der Eigenschaft float konfrontiert wurde, weiß das vor allem in etwas aufwändigeren Layouts es nicht immer ganz einfach ist Elemente zu bestimmen, die von nachfolgende Elemente umflossen werden. Masonry ermöglicht es, eine Webseite im Multicoloum-Layout mit sich "umfliessenden Elementen" spielend leicht umzusetzen. Obendrein passt sich ein solches Spalten-Layout dem Viewport des Browsers an und verringert bzw. erhöht die Anzahl an Spalten, je nach dem zur Verfügung stehendem Platz.

 (weiter)

Highcharts - The most interactive Charting JavaScript Library

Highcharts - The most interactive Charting JavaScript LibraryHighcharts ist ein Plugin welches auf die interaktive grafische Auswertung von Daten ausgerichtet ist und entweder mit der JavaScript-Bibliothek jQuery oder Mootools betrieben werden kann und auf dem iPhone, sowie dem IE6 funktioniert. Allerdings unter verschiedenen Voraussetzungen, denn die an den aktuellen Entwicklungen der Webstandards ausgerichteten Browser nutzen das Canvas-Element und in manchen Anwendungsfällen SVG zum rendern der grafischen Darstellungen. Aufgrund der fehlenden Unterstützung dieses Standards, wird bei den Nutzern des Internet Explorers die Aufgabe des Renderns der grafischen Charts von VML übernommen.

 (weiter)

jQuery Plugins - Shopping-Cart, Fancy-Captcha, Sticky-Note, ...

jQuery Plugins - Shopping-Cart, Fancy-Captcha, Sticky-Note, ...Das jQuery Plugins einen interessanten und relativ leicht zu implementierenden Ansatz zur Interaktion durch den User darstellen, ist den Lesern des Webstandardblogs bereits bekannt. Um euch nun auch in Bezug auf die neuesten Entwicklungen dieses JavaScript-Frameworks für eigene Webprojekte auf dem Laufenden zu halten, wurde für Euch folgende und hoffentlich auch hilfreiche Sammlung interaktiver jQuery Plugins zusammengestellt. Vom interaktiven Bild, über einen auf "Drag & Drop" basierenden Warenkorb, bis hin zu einem sehenswerten Captcha-Ansatz sind auch diesmal einige neue Plugins dieser beliebten JavaScript-Bibliothek enthalten.

 (weiter)

Midori - The ultra-lightweight JavaScript-Framework

Midori - The ultra-lightweight JavaScript-FrameworkJavaScript-Frameworks bilden oftmals eine Unmenge an Funktionen an, von denen die ein oder andere Webanwendung lediglich ein Bruchteil benötigt. Nachteil, man hat eine relativ große JavaScript-Datei an Bord. Das JavaScript-Leichtgewicht midori geht hier einen etwas anderen Weg. Das in 10 Module untergliederte Framework, bestehend aus einer JavaScript-Datei, ist auf Drag & Drop, sowie Table- und Tab-Selection, aber auch Toggle-Effekte ( show, hide, scrollTo ) spezialisiert und kann mit unkomprimierten 45KB, eine wirklich schlanke und vor allem interessante Alternative zu arrivierten JavaScript-Bibliotheken wie jQuery oder Mootools darstellen.

 (weiter)

gRaphaël - The JavaScript Library for stunning charts on your Website

gRaphaël - JavaScript LibrarygRaphaël ist ein Plugin welches die Auswertung von Statistiken auf kreative und sehr ansehnliche Weise abbildet. Das auf der Open-Source JavaScript-Bibliothek Raphaël basierende Plugin kann aufgrund der Unterstützung von Scalable Vector Graphics (SVG) und der leider nicht vom W3C unterstützen Vector Markup Language (VML) sehenswerte Auswertungen erstellen, um so beispielsweise anschließenden Analysen seitens der Anwender, aufgrund der leichten Verständlichkeit, zu erleichtern. Das JavaScript-Plugin wird ab den folgenden Browser(-versionen) unterstützt: Firefox 3.0, Safari 3.0, Opera 9.5 und Internet Explorer 6.0.

 (weiter)

Creative Webdesign without limits - Try jQuery-Plugins!

Creative Webdesign without limits - Try jQueryjQuery-Plugins sind durchaus eine geeignete Möglichkeit Webprojekte den eigenen Anforderungen entsprechend so anzulegen, dass der Anwender mit der Webseite in Interaktion tritt, um so auch gezielt auf die Interessen und Bedürfnisse der Webseitenbesucher eingehen zu können. Das kann wie in einem der folgenden auf dem JavaScript-Framework jQuery basierenden Plugins auch ein Script zur Implementierung von Twitter-Reaktionen auf der eigenen Webseite sein, um somit beispielsweise die Besucher des Blogs oder die Mitglieder einer Community miteinander "verbinden" zu können.

 (weiter)

Mootools in Action - Gallery Showcase

Mootools in Action - Gallery ShowcaseDas nicht nur jQuery als JavaScript-Framework in der Lage ist den Weg auf die Webseiten dieser Welt zu schaffen bzw. die Inhalte derer in Sachen Interaktion zu beleben, sondern auch andere JavaScript-Frameworks wie Mootools, soll die folgende kleine Auswahl ( Showcase ) an Webseiten belegen. Ob zum Ein- bzw. Ausblenden von Webinhalten, dem Navigieren oder einer vergrößerten Zoom-Ansicht ansicht eines Produktes, die Auswahl ist vielfältig und kreativ wie sie international ist. Von Ferrari, über die Video-Plattfom Vimeo, bishin zu duoh!, der Webseite von Veerle Pieters and Geert Leyseele.

 (weiter)

ImageFlow - Die animierte Bilder-Galerie

ImageFlowDer von Apple eingeführte und durch die Darstellung für Musiksammlungen im 3-D Effekt bekannt gewordene Coverflow-Effekt, erfreut sich auch auf Webseiten zunehmender Beliebtheit. Wer von euch mit dem Gedanken spielt einen solchen Effekt zu verwenden, den möchte ich an dieser Stelle ImageFlow von Finn Rudolph vorstellen. Dieses von ihm umgesetzte JavaScript ermöglicht es den Anwendern, die PHP ab Version 4.3.2+ auf ihren Servern zu laufen haben, die angebotenen Bilderelemente über verschiedene Arten ( Schieberegler, Scrollrad oder Anklicken der Bilder oder Navigations-Buttons ) anzusteuern. ImageFlow besitzt aber noch weitere interessante Features, denn die Darstellung der Elemente kann wie die folgenden Beispiele zeigen, auf verschiedenste Weisen wie bspw. der Anpassung des Winkels und der Entfernung der Bilder zum Betrachter eingestellt und verändert werden.

 (weiter)

Welche JavaScript-Frameworks verwenden deutsche Internet-Agenturen?

Welche JavaScript-Frameworks verwenden deutsche Internet-Agenturen?Um das Verhalten von Nutzer auf bzw. mit Webanwendungen zu verbessern, ist neben dem Erzielen visueller Effekte nur eine der Aufgaben von JavaScript-Frameworks. Den Lesern des Webstandardblogs ist durchaus bekannt, dass ich hier gern Plugins oder auch Webseiten vorstelle die auf dem von John Resig entwickelten Framework jQuery basieren. Aber wie sieht es bei deutschen Internetagenturen aus? Mal abgesehen von reinen Flashauftritten, die mich spätestens nach den zweiten Klick nervten, gibt es überraschenderweise immer noch Agenturen (!) die bei der Umsetzung von Webseiten auf tabellenbasierte Layouts oder gar Framesets zurückgreifen. Die kleine Analyse bezüglich der verwendeten JavaScript-Frameworks hingegen ist durchaus positiv.

 (weiter)

jQuery and CSS in Action - Gallery Showcase

Gallery Showcase - jQuery and CSS in ActionjQuery zu kennen und gegebenfalls den eigenen Bedürfnissen entsprechend modifizieren zu können ist eine Sache. In Kombination mit CSS gekonnt kreativ einzusetzen, um somit bspw. die Benutzerführung einer Webseite mittels einer entsprechend angelegten Navigation nachhaltig zu verbessern und nicht nur irgendeinen Effekt zu erzeugen, eine ganz andere. Um den Lesern des Webstandardblogs diesbezüglich ein wenig Inspiration zu geben, werden in diesem Artikel die verschiedensten Effekte die mit jQuery erzielt werden können, auf unterschiedlichen Webseiten präsentiert. Vom Slide-Effect, über die Navigationen bis hin zur Bilder-Galerie, die Auswahl ist vielfältig und kreativ, wie die Webseite von Bryan Katzel ( letzte Abbildung ) beweist.

 (weiter)

Webstandards - The Power of JavaScript (jQuery) and CSS

The Power of jQuery and  CSSEin Webstandard kommt selten allein und Anwendungen deren Beschreibung mit dem Schlagwort "Web 2.0" einher gehen, schon mal gar nicht. Denn kaum eine Anwendung die dieser "Kategorie" zuzuordnen ist, kommt ohne eines der bekannten und auf dem Webstandard JavaScript basierenden Frameworks aus. Besonderer Beliebheit erfreut sich hier insbesondere das von John Resig entwickelte jQuery. In kreativer Zusammenarbeit mit weiteren Webstandards wie HTML und CSS ergeben sich oftmals sehr hilfreiche und wie die folgenden Beispiele zeigen werden, auch durchaus nützliche jQuery-Anwendungen.

 (weiter)

jQuery-Games - Memory, Tetris, Puzzle, Slotmachine, Blackjack ...

jQuery-Games - Memory, Tetris, Puzzle, Slotmachine, BlackjackOnline-Games und Webseiten können mittlerweile nicht zuletzt aufgrund von JavaScript, auch ohne Java-Applets in direkte Verbindung miteinander gebracht werden. Aus diesem Grund wurden hier für den möglichen Einsatz in Euren Webseiten oder für die Pause für zwischendurch, eine kleine Sammlung interessanter und auch altbekannter Online-Spiele zusammengestellt. So unterschiedliche kostenlose Browserspiele wie Memory, Tetris, Puzzle, Slotmachine oder Blackjack auch sein mögen, eines haben alle gemeinsam - sie basieren in Sachen JavaScript auf dem Framework jQuery. In diesem Sinne - Viel Spass beim Spielen!

 (weiter)

jQuery-Plugin Lazy - The on-demand Plugin loader

jQuery-Plugin Lazy Dank Oliver von www.mysrc.de, bin ich kürzlich auf ein Plugin aufmerksam geworden, dass sich all diejenigen die für die verschiedensten Features ihrer Webseite(n) auf mehrere Plugins des JavaScript-Frameworks jQuery zurückgreifen, mal etwas näher ansehen sollten. Das Plugin Lazy von Jan Jarfalk aktuell in Version 1.3 vorliegend, lädt "on-demand" und ermöglicht es anstatt alle in einer Webseite implementierten jQuery-Plugins zu initialisieren, nur diese Dateien zu laden ( ui.core.js und ui.draggable.css - siehe Abbildung ), welche tatsächlich auf der jeweiligen Seite durch eine Funktion aufgerufen werden.

 (weiter)

Webdesign inspired by jQuery and Twitter

Be inspired by jQuery and TwitterMöglichkeiten die Leser und Besucher des eigenen Blogs mit den eigenen Tweets zur versorgen, gibt es etliche. Dem JavaScript-Framework jQuery und den Programmierschnittstellen von Twitter ist es zu verdanken, dass eine große Vielfalt an Twitter-Features basierend auf diesem weit verbreiteten Framework existieren und bspw. die eigenen Tweets auf einfache Weise eingebunden und ausgeben werden können, ohne dabei Twitter oder aufrufen zu müssen. Ob die Implementierung und die Ausgabe der eigenen Tweets, die Abbildung der Twitter-Follower bzw. deren Profil-Bildes als "Mosaik" oder ein Tweet-Counter, der Kreativität sind wie so oft keine Grenzen gesetzt.

 (weiter)

jQuery dominiert bei den JavaScript-Frameworks

Aufgrund der steigenden Anzahl an JavaScript-Frameworks, steht vor jedem Projekt die Frage, welches Framework denn das geeignete ist. Bei der Entscheidung welches man einsetzt, spielen allerdings mehrere Faktoren eine Rolle. Neben dem hauptsächlichen, dem allgemeinen Funktionsumfang eines Frameworks, ist auch die Datei-Größe und damit die Ladezeit des zu ladenden Javascripts ( inklusive zusätzlicher Funktions-Plugins ) ein nicht zu vernachlässigender Entscheidungsfaktor. Aus diesem Grund habe ich via twtpoll folgende Umfrage gestartet: What's your favorite JavaScript-Framework? An dieser Umfrage haben insgesamt 363 interessierte Leser teilgenmommen und diese haben ein JavaScript-Framework eindeutig favorisiert - jQuery. Mit 64% aller Stimmen, hat dieses Framework alle anderen deutlich hinter sich gelassen. Nichts desto trotz möchte ich auch euch fragen ( sofern ihr nicht bereits an der Umfrage teilgenommen habt ), welches euer favorisiertes JavaScript-Framework ist und vielleicht auch kurz begründen, warum?

 (weiter)

Creative Image-Galleries by jQuery

Image-Galleries based on jQueryDie Phase in der sich Besucher von Webseiten entscheiden, auch nach der ersten Wahrnehmung der Webseite weiterhin auf dieser zu verweilen oder bspw. den Kauf eines Produktes erwägt, spielt die Emotion die beim Besucher geweckt wird den entscheidenden Faktor. Daraus resultierende Fragen beziehen sich dann darauf, ob diese Seite dem Besucher einen Mehrwert bietet. Das könnten gesuchte Informationen oder aber eben auch Produkte sein, die er oder sie möglicherwiese bereit sind zu kaufen. Um nun diese Emotionen zu wecken, gibt es in der Online-Welt des WWW kaum ein effektiveres Gestaltungselement als Bilder. Die Art und weise der Präsentation von Bildern und Bilder-Galerien kann auf verschiedenste Arten angegangen werden. Das JavaScript-Framework jQuery bietet für die Präsentation von Bildern zahlreiche Möglichkeiten. Ob sliding, switchen oder scrollen, der Galerie-Vielfalt sind kaum Grenzen gesetzt, aber seht selbst.

 (weiter)

jQuery - The easy way to navigate

jSlickmenuEine optimale Nutzerführung durch eine entsprechend nutzerfreundliche Navigation zu erzielen, ist das Ziel nahezu jeder Webseite. Wie man die Besucher einer Webseite mit einer Navigation zur Interaktion bringen kann, sollen die folgenden Beispiele von Navigationen zeigen, deren "Verhalten" auf dem mittlerweile recht bekannten und verbreiteten JavaScript-Framework jQuery beruht. Von der vertikalen und horizontalen Slide-, zur Akkordion - oder Tabnavigation, für nahezu jeden Navigationsansatz dürfte ein entsprechendes Plugin, inklusive einem Tutorial vorhanden sein.

 (weiter)

CSS and jQuery for interactive Webdesign - Part 2

CSS and jQueryZiel vieler Webdesigner ist es mit JavaScript bzw. den zur Verfügung stehenden Frameworks, die Nutzerführung der Webseitenbesucher zu verbessern. Da sich der erste Teil der Artikel-Serie CSS and jQuery for interactive Webdesign eher auf "Elemente in Bewegung" bezog, werden in diesem zweiten Teil Plugins zur Verbesserung der Nutzerführung vorgestellt. Ob dem Filtern von Tabelleninhalten, der veränderten Darstellung von Links basierend auf den Klickverhalten der Webseitenbesucher oder der grafischen Darstellung von Daten durch das jQuery-Plugin jqPlot, die Auswahl zeigt das mit wenigen eigenen Zeilen JavaScript, interessante und durchaus nützliche Effekte erzielt werden können.

 (weiter)

Interactive Webdesign with CSS and jQuery

CSS and jQueryDas man mit CSS nahezu alle Ansätze eines Screendesigns umsetzen kann ist nichts neues und auch das dank CSS3 einzelnen HTML-Elementen "Leben in Form von Bewegung" eingehaucht werden kann. Da diese zugegebenermaßen nicht unbedingt alltagstauglichen Animationen zudem nur in einem Browser funktionieren, gibt es dank dem JavaScript-Framework jQuery und den zahlreichen Plugins die täglich durch kreative Köpfe entstehen, zahlreiche Alternativen. Die folgende kleine Auflistung präsentiert daher heute "Elemente mit Bewegung", basierend auf CSS & jQuery.

 (weiter)

Best of Mootool-Plugins - Part 2

Mootools Plugins - zweiter TeilSeit geraumer Zeit sind Effekte im Umgang mit einzelnen Elementen wie Bildern, Texten oder aber auch Tabellen auf vielen Webseiten kaum noch wegzudenken. An mancher Stelle wie bspw. bei der Fehlervalidierung von Formularen sind sie, nicht nur aus Gründen einer besseren Usability, sogar dringend zu empfehlen. Dank zahlreicher Java-Script Frameworks gibt es hierfür unzählige Möglichkeiten. Neben jQuery ist vor allem Mootools sehr flexibel und einfach zu verwenden. Außer Bilder-Galerien, der Möglichkeit Bilder online zu bearbeiten oder Slide-Effekten, beinhaltet dieser zweite Teil insgesamt 10 Mootools-Plugins die allemal dazu beitragen können, die ein oder andere Webseite oder bestimmte Elemente dieser Seite "aktiver" gestalten zu können.

 (weiter)

Best of jQuery-Tutorials - Part 3

Best of jQuery-Tutorials - Part3Das in letzter Zeit bei vielen Anwendern immer beliebter werdende JavaScript-Framework jQuery besitzt wie Teil 1 und Teil 2 der Serie "Best of jQuery-Tutorials" belegen, eine unglaubliche Flexibilität die es erlaubt, vielfältigste Plugins für die verschiedensten Einsatzgebiete erstellen zu können. Von Slide- und Switch-Effekten, über Tooltips, bis hin zum jQuery-Puzzel für zwischen durch. Eines aber haben alle jQuery-Plugins gemeinsam und das ist einer der Vorteile, sie sind relativ schnell in jedes Webprojekt übertragbar. Wer auch diesmal weitere interessante jQuery-Anwendungsbeispiele kennt und sie mit anderen teilen möchte, ist hiermit dazu aufgerufen den entsprechenden Link im Kommentarbereich zu kommunizieren.

 (weiter)

Formulardaten validieren - so einfach geht es

Formular ValidierungWelche Grundlagen der Gestaltung von Formularen es gibt, sind bekannt. Wie die innerhalb eines Formulars abzufragenden Daten validiert werden und welche Möglichkeiten hierbei die zahlreichen JavaScript-Frameworks bieten, ist Ziel des heutigen Beitrages. Eines ist bei bzw. nach der Validierung von Formulardaten unabdingbar. Fehlermeldungen müssen sich klar vom übrigen Layout absetzen, damit ihrer Bedeutung Rechnung getragen werden kann. Eine zu dezente oder fehlende Kennzeichnung von Formularelementen führt eher zur Verunsicherung seitens des Users, als ihm oder ihr dabei behilflich zu sein das entsprechende Formularfeld zu finden. Die folgende Liste von Validierung-Plugins basierend auf jQuery, Mootools oder Prototype, ermöglichen Ansätze Formulardaten ( neben einer serverseitigen Validierung ) validieren zu können.

 (weiter)

Best of Mootools-Plugins and Tutorials

Best of Mootools-Plugins and TutorialsJava-Script Frameworks gibt es unglaublich viele. Manche disqualifizieren sich aufgrund der geringen Möglichkeiten erweiterbar zu sein, andere hingegen sind in Sachen Dateigröße viel zu "großzügig" und damit oftmals sehr träge bezüglich der Ladezeiten. Andere Frameworks wie jQuery wiederum, sind flexibel und können durch kleine Plugins unproblematisch erweitert werden. Da sich aber nicht jeder, mit dem von uns bevorzugten Framework, auseinandersetzen möchte, bieten wir Euch eine kleine Sammlung an Plugins für das Framework mootools an. Vom Kalender-Plugin, über Bilder-Galerien, bishin zur Validierung von Formularendaten, auch mootools bietet einige Ansatzpunkte, Webseiten mittels JavaScript etwas Leben einhauchen zu können.

 (weiter)

Best of jQuery-Tutorials - Part 2

Best of jQuery-Tutorials - Part2jQuery ist ein mittlerweile recht bekanntes JavaScript-Framework, mit dem Online-Anwendungen durch entsprechende Features auf kreative Weise "Leben eingehaucht" werden kann. Aus diesem Grund wurden für Euch nach dem Erfolg des Beitrags "Best of jQuery-Tutorials" Teil 1, ein paar weitere jQuery-Plugins bzw. jQuery-Tutorials aus den verschiedensten Einsatzgebieten zusammengetragen. Von Slide- und Panorama-Effekten, bis hin zu Tooltips, auch diesmal dürfte für hoffentlich (fast) jeden etwas dabei sein.

 (weiter)

7 Möglichkeiten Tabelleninhalte einfach zu sortieren

Sortieren von TabelleninhaltenTabellen sind für die Darstellung tabellarischen Daten unverzichtbar. Oftmals sind diese, je nach Quantität der Daten, sehr umfangreich und deshalb oftmals auch nicht besonders übersichtlich. Um diese Daten über mehrere Zeilen oder Spalten hinweg besser miteinander vergleichen zu können, gibt es dank spezieller JavaScripte und einiger bekannter Frameworks, zahlreiche Lösungsansätze diese Daten, dem User übersichtlicher präsentieren zu können. Der folgende Artikel beinhaltet 7 verschiedene Varianten zur Sortierung via JavaScript auf, wodurch für jeden Anwender etwas dabei sein sollte.

 (weiter)

Best of jQuery-Tutorials

Anwendungen zum JavaScript-Framework jQuery gibt es zahlreiche, aber nicht alle erfüllen unbedingt die Prädikate "nützlich & praktikabel". Aus diesem Grund wurden für Euch ein paar jQuery-Plugins & jQuery-Tutorials aus den verschiedensten Einsatzgebieten zusammengetragen. Von verschiedensten Navigationsvarianten, über Zoom-Funktionen, bis hin zur dekorativen Bilder-Galerie. Mehr jQuery-Tutorials und Plugins gibt es in Teil 2 und Teil 3 der Serie "Best of jQuery-Tutorials".

jQuery-Plugin - Tab-Navigation
jQuery - Tab-Navigation

 (weiter)

jQuery und jParallax, bringen Bewegung ins Web

jParallaxParallax Scrolling, ein Effekt der es ermöglicht lediglich mit CSS und HTML, ein wenig Bewegung in Eure Webseiten zu bringen, erfährt nun einen Ausbau. jParallax, ein jQuery-Plugin ermöglicht es nun Bewegung in die Tiefe des Raumes zu bringen und vermittelt damit einen, nennen wir es mal, Pseudo 3-D Effekt. Im Vergleich zum Parallax-Scrolling, was auf die Veränderung der Größe des Viewports reagiert, reagiert jParallax auf die veränderte Position des Cursors. Grafiken die via CSS entsprechend positioniert werden, erzeugen hierdurch ein Gefühl der Bewegung. So könnten bspw. in einem Webshop, Produkte innerhalb eines Regals in Bewegung versetzt werden und somit in den Fokus des Betrachters gerückt werden. Was sich erst links oder rechts des Betrachtungsfokus eines Users befand, kann somit ins Blickzentrum gerückt werden, wie in diesem, allerdings auf Flash basierten, Auftritt. Das in Version 0.6 und im Beta-Stadium befindliche Plugin, ist ganze 12KB groß und bietet interessante Möglichkeiten der Anwendung.

jQuery.com, Geburt und Tod eines Rock Stars an einem Tag

jQuery Homepage ScreenshotDie Webseite jquery.com für das gleichnamige JavaScript-Framework, wurde am Wochenende einem Redesign unterzogen. Eigentlich nichts besonderes, wenn Teile des Designs nicht solch einen Aufschrei in Teilen der Community verursacht hätte. Der hier im ersten Absatz abgebildete Entwurf wurde am selben Tag wieder verändert, da er der Community, und hier insbesondere die Illustration samt dem Slogan "Be a JavaScript Rock Star", eine zu gravierende Veränderung darstellte. Die darauf folgende Diskussion und die Entscheidung der Macher der Seite, führten somit zur Geburt und des Todes eines Rock Stars an nur einem einzigen Tag. Die Meinungen bezüglich der "drastischen" Änderung sind breit gefächert und gehen von Bewunderung für das neue Design, über Lob für den Schritt der Veränderung, bis hin zu Bemerkungen wie "schreckliche Seite". Wir sind diesbezüglich anderer Meinung, denn der erste mittlerweile vom Netz genommene Entwurf, war wirklich sehenswert und alles andere als unpassend.

 (weiter)

Top 10 aller JavaScript-Frameworks

Top 10 der JavaScript FrameworksJavaScript-Frameworks sind in Mode und seit dem es diese Bibliotheken mit ihren zahlreichen Funktionen gibt, ist JavaScript auch nicht mehr mit diesem negativen Image behaftet, wie das vor einigen Jahren noch der Fall. Denn dank dieser modular aufgebauten Bibliotheken kann fast jeder diese JavaScripts anwenden und fast beliebig erweitern. Um die Vielzahl dieser Frameworks ein wenig einzuschränken, werden an dieser Stelle die Top-10 aktueller JavaScript Frameworks zusammengefasst. Welche für die eigenen Webdesign-Ansprüche und Anforderungen ideal ist sollte jeder selbst herausfinden, denn jede dieser Anwendungen hat sein Vor- und Nachteile ( Dateigröße, Funktionsumfang, etc. ).

 (weiter)

moo.rd for MooTools

moo.rdMoo.rd ist eine kleine aber feine objektorientierte JavaScript-Bibliothek, die das beliebte JavaScript-Frameworks MooTools mit zahlreichen Effekten ergänzt. moo.rd 1.3.1 ist die erste offizielle Version dieser Erweiterung und wird seit gestern von den Entwicklern zum Download angeboten. Für Einsteiger in das Thema JavaScript-Frameworks, bietet der dazugehörige Weblog des Leichtgewichtes, auch ein kleines "how to use mo.rd".

Neue Features mit jQuery 1.2

Das jQuery wird seit Anfang der Woche in der neuen Version 1.2 zum Download angeboten. Dieses Versions-Update beinhaltet einige Neuerung und Verbesserungen in den Bereichen Selektoren, Attribute, etc. Eine ausführliche Liste gibt der Releasenotes es auf jquery.com. Weiter Infos und Hinweise zu diesem Framework gibt es auch im HACKTHENET-Blog von Christian oder auf ajaxian.com.

YAML 3.0 geht an den Start

Web-Frameworks gibt es viele, aber YAML von Dirk Jesse ist eines derer die sich wie die zahlreichen Referenzseiten beweisen, durchgesetzt haben. Der aktuelle Versionssprung von 2.5.2 auf 3.0 beinhaltet vor allem die überarbeitete, zweisprachige Dokumentation des Frameworks auf deutsch und englisch, sowie eine Optimierung des CSS Bausteine in Sachen Barrierefreiheit. Wer bisser noch keine Erfahrungen mit diesem Projekt gemacht hat und gern mehr darüber erfahren möchte, wird vor allem im Bereich Überblick / Funktionen der überarbeiteten Webseite oder im Forum fündig.

jQuery 1.1.3 übertrifft Erwartungen

Das JavaScript Framework jQuery hat nach Monaten von Tests und Entwicklungsarbeiten eine neue Version ( 1.1.3 ) veröffentlicht, die wie gewohnt zahlreiche Neuerungen an den Start bringt und bisherige Bugfixes schließt. Wirklich beeindruckend aber ist die neu gewonnene Geschwindigkeit, bei nahezu gleichbleibender Dateigröße. Um einen Vergleich der Geschwindigkeiten anbieten zu können, hat John Resig einen Vergleich der jQuery Versionen erstellt. Die Unterschiede sind, wie in den getesteten Browsern und Betriebssystemen ( Windows XP & Vista, Mac OS X, Linux Debian 3.0 ) zu erkennen, wirklich offensichtlich.

 (weiter)