Bannerwerbung mit jQuery

67 %
33 %
Information about Bannerwerbung mit jQuery
Technology

Published on February 20, 2009

Author: lioninside

Source: slideshare.net

Description

Eine W.I.P. Sammlung von Ideen für den Einsatz von jQuery in der klassischen Bannerwerbung

Werbeformen mit Für Kommentare, Ergänzungen: http://snurl.com/c6jv7 W.I.P

jQuery

Was ist jQuery? jQuery ist ein freies, umfangreiches JavaScript-Framework, das komfortable Funktionen zur Manipulation und -Navigation zur Verfügung stellt. Das von John Resig entwickelte Framework wurde im Januar 2006 auf dem BarCamp (NYC) in New York veröffentlicht und wird laufend weiterentwickelt. Mittlerweile haben Microsoft und Nokia angekündigt, jQuery in ihren Produkten zu verwenden. Microsoft wird jQuery in die Entwicklungsumgebung Visual Studio in Verbindung mit dem ASP.NET MVC Framework und ASP.NET Ajax verwenden und Nokia wird es in ihrer Web-Runtime-Plattform integrieren. Quelle: Wikipedia JQUERY

jQuery ist ein freies, umfangreiches JavaScript-Framework, das komfortable Funktionen zur Manipulation und -Navigation zur Verfügung stellt.

Das von John Resig entwickelte Framework wurde im Januar 2006 auf dem BarCamp (NYC) in New York veröffentlicht und wird laufend weiterentwickelt.

Mittlerweile haben Microsoft und Nokia angekündigt, jQuery in ihren Produkten zu verwenden.

Microsoft wird jQuery in die Entwicklungsumgebung Visual Studio in Verbindung mit dem ASP.NET MVC Framework und ASP.NET Ajax verwenden und Nokia wird es in ihrer Web-Runtime-Plattform integrieren.

Ideen für jQuery- Werbeformen

Seite verschieben Die Werbeanzeige ist neben der Hauptseite angeordnet und ist nicht vollständig sichtbar (kein horizontaler Scrollbalken). Click/Rollover auf die Anzeige schiebt diese nach links in die Mitte des Fensters. Der Schieb-Effekt dauert ca. 1s und ist sichtbar. Die Anzeige kann mit Click auf einen Button wieder zurück geschoben werden. Beispiel: http://www.alexbuga.com/v8/ Website Ad IDEEN

Die Werbeanzeige ist neben der Hauptseite angeordnet und ist nicht vollständig sichtbar (kein horizontaler Scrollbalken).

Click/Rollover auf die Anzeige schiebt diese nach links in die Mitte des Fensters.

Der Schieb-Effekt dauert ca. 1s und ist sichtbar.

Die Anzeige kann mit Click auf einen Button wieder zurück geschoben werden.

Beispiel: http://www.alexbuga.com/v8/

Packen und verschieben Auf der Website werden zwei Werbeanzeigen angezeigt. Die jQuery Funktion Draggable ermöglicht ein „packen“ und „verschieben“ von Elementen. Wird ein Element in ein anderes verschoben, löst sich eine Aktion aus. Diese Technik kann z.B. für ein Gewinnspiel eingesetzt werden. Ad 2 ist ein Brief, Ad 1 ein Briefkasten Verschiebt der User Ad 1 in den aktiven Bereich von Ad 2 wird eine Aktion ausgelöst (z.B. Text: „Danke für deine Teilnahme“) Weitere Möglichkeiten: Hund füttern => Hund schwänzelt Münze einwerfen => Gewinnlos wird ausgestellt. Website Ad 2 Ad 1 IDEEN

Auf der Website werden zwei Werbeanzeigen angezeigt.

Die jQuery Funktion Draggable ermöglicht ein „packen“ und „verschieben“ von Elementen.

Wird ein Element in ein anderes verschoben, löst sich eine Aktion aus.

Diese Technik kann z.B. für ein Gewinnspiel eingesetzt werden.

Ad 2 ist ein Brief, Ad 1 ein Briefkasten

Verschiebt der User Ad 1 in den aktiven Bereich von Ad 2 wird eine Aktion ausgelöst (z.B. Text: „Danke für deine Teilnahme“)

Weitere Möglichkeiten:

Hund füttern => Hund schwänzelt

Münze einwerfen => Gewinnlos wird ausgestellt.

Explosion Mit dem Effekt Explode kann eine Website zum explodieren gebracht werden d.h. der Inhalt zersplittert in einzelne Teile und fliegt aus dem Bild. In Rectangle in der Mitte der Website wird ein Bild eines Zünders gezeigt. Bei Click auf den Schalthebel explodiert die Seite. Die hinter die Seite gelegte Werbung wird sichtbar. Optional lässt sich dieser Effekt noch mit dem bekannten Browserfenster-Schüttel Java Code ergänzen. Ad IDEEN

Mit dem Effekt Explode kann eine Website zum explodieren gebracht werden d.h. der Inhalt zersplittert in einzelne Teile und fliegt aus dem Bild.

In Rectangle in der Mitte der Website wird ein Bild eines Zünders gezeigt.

Bei Click auf den Schalthebel explodiert die Seite.

Die hinter die Seite gelegte Werbung wird sichtbar.

Optional lässt sich dieser Effekt noch mit dem bekannten Browserfenster-Schüttel Java Code ergänzen.

Tabs Die Tab-Navigation ist die am meisten verwendete jQuery Funktion. Ein idealer Einsatzort sind Widgets. Die Informationen der Werbeanzeigen können mit Tabs strukturiert werden. Die klar ersichtliche Navigation bietet dem User die Gewissheit sich schnell informieren zu können und nicht auf eine fremde Seite „entführt“ zu werden. In die Tabs können Formulare wir z.B. eine Newsletter-Anmeldung direkt integriert werden. Website IDEEN

Die Tab-Navigation ist die am meisten verwendete jQuery Funktion.

Ein idealer Einsatzort sind Widgets.

Die Informationen der Werbeanzeigen können mit Tabs strukturiert werden.

Die klar ersichtliche Navigation bietet dem User die Gewissheit sich schnell informieren zu können und nicht auf eine fremde Seite „entführt“ zu werden.

In die Tabs können Formulare wir z.B. eine Newsletter-Anmeldung direkt integriert werden.

Show/Hide Die Show/Hide Funktion wird bereits häufig bei z.B. Werbebanner eingesetzt. Der User kann via Click/Rollover die Anzeige zusätzlich vergrössern. Der „extended“ Bereich überlappt sich mit dem bestehenden Inhalt. Mit einen spannenden Motiv, das z.B. nicht vollständig sichtbar ist, kann eine Motivation geschaffen werden, den Banner „auszufahren“. Beispiel: http://snurl.com/c6yh7 Website IDEEN

Die Show/Hide Funktion wird bereits häufig bei z.B. Werbebanner eingesetzt.

Der User kann via Click/Rollover die Anzeige zusätzlich vergrössern.

Der „extended“ Bereich überlappt sich mit dem bestehenden Inhalt.

Mit einen spannenden Motiv, das z.B. nicht vollständig sichtbar ist, kann eine Motivation geschaffen werden, den Banner „auszufahren“.

Beispiel: http://snurl.com/c6yh7

LightBox Lightbox ist ein weiterer jQuery Klassiker, der aber (noch) äusserst selten für Werbezwecke eingesetzt wird. Die Lightbox ist ein Fenster, das sich in den Vordergrund rückt und die restliche Seite abdunkelt. Lightbox können für Formulare etc. verwendet werden. Ein möglicher Einsatz für Werbezwecke ist das Abspielen eines Films, der z.B. via Click auf den Banner gestartet wird. IDEEN

Lightbox ist ein weiterer jQuery Klassiker, der aber (noch) äusserst selten für Werbezwecke eingesetzt wird.

Die Lightbox ist ein Fenster, das sich in den Vordergrund rückt und die restliche Seite abdunkelt.

Lightbox können für Formulare etc. verwendet werden.

Ein möglicher Einsatz für Werbezwecke ist das Abspielen eines Films, der z.B. via Click auf den Banner gestartet wird.

Links Offizielle jQuery Seite: http://jquery.com/ Guten jQuery Demo Sammlung: http://snurl.com/c70mn 40+ jQuery Tutorials: http://bit.ly/DW2Os ... LINKS

Offizielle jQuery Seite: http://jquery.com/

Guten jQuery Demo Sammlung: http://snurl.com/c70mn

40+ jQuery Tutorials: http://bit.ly/DW2Os

...

 

Add a comment

Related presentations

Related pages

Jquery Banner Slideshow | jQuery Slideshow

Jquery Banner Slideshow. jQuery Slider Gallery! Enhance your website with online photo album software! Anything Slideshow Jquery With Swf
Read more

Scroll-Down FadeIn/SlideIn Div oder Banner

Mit FadeIn- oder SlideIn-Bannern, lassen sich wieder gute Klickraten auf Werbung erreichen. Wir zeigen, wie man's mit JQuery einbindet.
Read more

Bannerwerbung - Formate, Fakten und Kosten - Dr. Web

JavaScript & jQuery; Apps; ... Ähnlich wie bei der klassischen Werbung mit Anzeigen und Plakaten haben sich auch bei der Bannerwerbung Standards ...
Read more

Banner Slider Jquery | jQuery Slider

Banner Slider Jquery. jQuery Slider Gallery enables you to make an online photo slideshow with ease. Jquery Slider With An Iframe
Read more

Jquery Slider Banner | jQuery Slider

Jquery Slider Banner. jQuery Slider Gallery is an excellent program that is friendly to amateur web developers, but at the same time is powerful enough to ...
Read more

Banner Slideshow Js | Free Javascript Slideshow

Kleinanzeiger24: Bannerwerbung ... Mit dem praktischen jQuery Plugin InnerFade kannst du leicht animierte Banner und Slider auf deiner Webseite integrieren.
Read more

Banner Carousel Jquery | jQuery Carousel

Banner Carousel Jquery. jQuery Carousel Gallery is the first software that creates AJAX-powered online image slideshows without the need for server-side setup.
Read more

Jquery Scroll Banner | jQuery Slideshow

Jquery Scroll Banner. Create an online photo album in minutes with jQuery Slider! Jquery Slideshow Plugin Multiple On
Read more