Das Putzlowitsch Test- und SEO-Blog

Lustige Zappeleffekte mit JavaScript (jQuery)

Klappfenster

Ohne ausklappenden Fenstern geht im modernen Webdesign fast gar nichts mehr. Dynamische Webseiten sind in und auch gar nicht mal so schwer zu erstellen. Durch die Nutzung einer passenden JavaScript-Bibliothek wie jQuery sind oft nur ein paar Zeilen JavaScript-Code notwendig, um die gewünschten Effekte zu erzielen.

Das nachfolgende Beispiel verwendet die Funktionen .hover() und .slideToggle() und sieht im Quelltext recht überschaubar aus:

$("#festes-fenster").hover(
 function(){
  $(this).next().slideToggle(150);
 }
);

JavaScript-Code
Beim div (Fenster) mit der id „festes-fenster“ wird für das Mausereignis „Betreten“ und „Verlassen“ eine Ereignisfunktion (Event-Handler) installiert, die das nächste div mit der Funktion slideToggle() ein- oder ausklappen läßt.

Hier das Beispiel:

festes Fenster

Zappel-Fenster

Bewegt man die Maus in das feste Fentster, wird das Zappel-Fenster ausgeklappt. Verläßt der Mauszeiger wieder den gestrichelt umrandeten Bereich, verschwindet das Fenster wieder. So weit, so gut.

Zappelphilipp

Interessant ist der untere Rand des festen Fensters, denn dieser wird vom Zappelfenster, wenn es sichtbar ist, teilweise überdeckt. Wenn nun der Mauszeiger in diesen Bereich gelangt, beginnt das Zappel-Fenster zu zappeln.

Der Grund ist die Überlappung. In dem Moment, wo das zweite Fenster ausgeklappt wird, überdeckt es das erste Fenster, wodurch die Maus dieses Fenster verläßt. Dadurch wird das Zappelfenster zugeklappt, die Maus ist wieder im festen Fenster, also wird das Zappelfenster wieder ausgeklappt, übderdeckt wieder das feste Fenster, wird wieder zugeklappt usw. usw. Das geht immer weiter, so lange sich der Mauszeiger im Überlappungsbereich der beiden Fenster befindet.

Beispiele aus der Praxis

Daß das nicht nur theoretische Überlegungen sind, zeigen zwei Bespiele aus der Parxis. Dadurch bin ich überhaupt erst auf dieses Phänomen aufmerksam geworden.

Bei Google+ gibt es in der linken Symbolleiste den Menüpunkt für „Fotos“ und ganz unten „Mehr“. Hier werden jeweils Unterfenster nach rechts ausgeklappt, die man zum Zappeln bringen kann. Ich habe das hier in einem kurzen Video demonstriert:

Beim zweiten Beispiel kommt noch eine weiterer Aspekt hinzu, ein Zappel-Speichereffekt. Ich habe es jetzt nicht genauer untersucht, aber es sieht so aus, als würden die Mausereignisse in eine Art Warteschlange eingereiht und asynchron abgearbeitet werden.

Wenn die Maus eine Weile im Zappel-Bereich verweilt und zum nächsten wechselt, zappelt das vorhergehende Fenster noch weiter. Das gibt ganz lustig aussehenden, nun ja, fast schon Tanzdarbietungen:


Splittest Zappel-Seite
Die „Musik“ ist auf der ursprünglichen Webseite nicht vorhanden, die habe ich erst im Video drunter gelegt. :-)

Weitere Artikel mit Bezug zu diesem:
3 Kommentare »

Plug and Play

Plugin 123 HTTP TransportDas mit den Plugins für WordPress ist ja wirklich eine feine Sache. Es gibt deren viele und sie leisten teilweise Dinge, von denen man gar nicht wußte, das man sie jemals gebrauchen könnte.

Ja, auch ich verwende Plugins. :-)

Das aktuelle Thema des Wabmasterfridays lautet „Welche WordPress-Plugins habt ihr aktiv im Einsatz?“ und so habe ich hier im Blog-Adminbereich einfach mal nachgeschaut. Es sind derzeit ganze 27 aktive Plugins, die ich jetzt aber nicht alle ausführlich vorstellen werde.

Der Grund ist einfach. Das hier ist mein Test- und Entwicklungsblog und so laufen da viele Sachen zu Testzwecken. Von den 27 Plúgins sind bis auf eines alles Eigenentwicklungen. Man erkennt sie an dem „123 Irgendwas“-Namen.

Fremde Plugins

Das einzige fremde Plugin ist DoFollow. Damit wird des nofollow-Attribut bei Links in Kommentaren entfernt. Das stellt aber keinen Freifahrtschein für jeden Mist dar. Erstkommentare werden moderiert und gegebenfalls Entlinkt oder Entfollowt.

Eigene Plugins

Viele Plugins sind nur kleine Helferlein, teilweise sogar ohne Optionenseite, manche bügeln nur Fehlkonfigurationen der Webhoster aus.

Ein paar haben aber schon einen etwas größeren Umfang und Nutzwert.

  • 123 IntLink
    IntLink zählt zu meinen ältesten Plugins und hat sogar Editor-Buttons. Mit dem Plugin kann man mit der Artikel-ID (bzw. Kommentar-ID) einfach auf bloginterne Artikel, Seiten oder auch Kommentar verlinken. Die Links werden erst zur Laufzeit generiert. Damit passen sie immer, egal ob man mal die Permalinks ändert oder mit dem ganzen Blog umzieht.
  • 123 Shrink Link
    Wer kennt das nicht, im Kommentar hinterläßt jemand einen monstermäßig langen Link, der dann weit nach rechts über den Rand hinausragt und das in mühsamer Arbeit erstellte Design zerstört. Mit Shrink-Link werden solche Links für die Anzeige gekürzt. Mit ein paar Optionen kann man das Kürzungsverhalten steuern.
  • 123 Homelink
    Lange Zeit war es in WordPress nur möglich einen Menüeintrag mit einem Link zur Startseite im Theme zu programmieren. Das Plugin ermöglicht das Hinzufügen des Startseiten Links im Backend, außerdem das Ein- und Ausblenden von Seiten aus dem Menü un das ändern der Menütexte.
    Seit WP 3.0 ist das alles mit den Benutzermenüs ja bereits fest eingebaut.
  • 123 Tools
    Das Plugin ist eine Art Sammelplugin für kleinere Funktionen, für die sich kein eigenes Plugin lohnen würde. Ein Werkzeugkasten halt. :-)

Dann gibt es noch mehrere nicht öffentliche Plugins, die ganz unterschiedliche Funktionen haben. Mit dem „123 Character Mixer“ kann man Buchstaben vertauschen, so daß eigenartig fremdsprachig anmutende Texte entstehen. Sehr wichtig ist mir das „123 Shortlink“-Plugin, damit kann ich per Artikel- oder Attachment-ID eine Weiterleitung auf den Artikel oder direkt auf ein Bild generieren. Das brauche ich z.B., wenn ich die Artikel oder Bilder in Twitter abkippen will. :-)

Apropos in Twitter abkippen, das werde ich jetzt auch gleich tun… :-)

2 Kommentare »

Mit der Bildersuche Geld verdienen, so einfach ist das

In der Reihe „Geld verdienen im Internet“ stelle ich heute eine weitere Möglichkeit anhand eines praktischen Beispiels vor. Es geht um die Bildersuche, aber nicht etwa darum, wie man selber hochwertige Bilder veröffentlicht und wenn diese sich dann nach hartem Kampf in den Suchergebnissen vorgearbeitet haben, die Besucher auf die eigene Seite bringen, sondern wie man andere Bilder dafür einspannt.

Bildersuche

Ausgangspunkt ist wieder die Yahoo-Search-API, mit deren Hilfe man mit ein paar Programmierkenntnissen eine eigene „Suchmaschine“ aufziehen kann. Hier hat sich jemand speziell auf die Bildersuche eingeschossen, sinnigerweise heißt die Seite dann auch „FindBilder“. Im Unterschied zur originalen Yahoo-Bildersuche kann man beim Find-Bilder noch nach Dateitypen filtern. Zur Auswahl stehen BMP, GIF, JPG und PNG, aber was das eigentlich bringt, weiß ich auch nicht.

Interessant ist zumindest z.B. bei der Suche nach Erdbeeren mit dem Typ BMP, daß nicht die angezeigte Datei-Endung über den Dateityp entscheidet, denn was da als .jpg oder .ico angezeigt wird, ist tatsächlich aber ein BMP-Bild. Fehlerhaft ist auf jeden Fall die Info-Anzeige

„Treffer: 1 – 9 von 10 f�r erdbeeren“

für dargestellte 8 Treffer. Naja, da sollte nochmal nachgebessert werden.

Geld verdienen

Zum Geld verdienen fehlen nun eigentlich nur noch die Werbeblöcke, aber die sind ja auf der rechten Seite vorhanden. Na dann kann der Rubel ja rollen. :-)

Keine Kommentare »

Mit Werbung Geld im Internet verdienen, so einfach ist das

Meist sehe ich einen Großteil der Werbung auf Internetseiten nicht, nun habe ich aber mal testweise meine Werbeausblendemaschine ausgeschaltet und war verwundert, wo überall Werbung auftaucht. Teilweise enthalten die Seiten mehr Werbung als Inhalte und die Inhalte sind zudem noch nicht mal eigene.

Geld mit einer Suchmaschine verdienen

Erstes Beispiel ist die „Suchmaschine“ Tixuma. Die Suchergebnisse dort stammen von Yahoo, die Yahoo-API „BOSS“ erlaubt ausdrücklich das Erstellen eigener Suchapplikationen. Das eigentlich interessante ist aber das Geschäftsmodell hinter dieser Seite. In den FAQ steht dort:

1.1. Was ist Tixuma ?
Tixuma ist eine Suchmaschine, die seinen registrierten Usern Geld dafür zahlt, daß diese Tixuma für Ihre Suche im Internet verwenden. Zu diesem Zweck wird, wie bereits von anderen Webseiten bekannt, Werbung in Form von Werbebanner etc., in den Suchergebnissen eingeblendet. Im Gegensatz zu anderen Seiten jedoch, werden bis zu 80% der Werbeeinnahmen an seine User ausgeschüttet.

Auch der Name ist recht gut gewählt, denn wenn man Tixuma in die Laute zerlegt, kommt da z.B. Tick-Suma raus. Na, macht es klick? :-)

Geld mit Twitter verdienen

Zweites Beispiel ist die…, ja was ist das eigentlich? Na egal, das zweite Beispiel ist Twitter-Trends. Dort werden mit der Twitter-API Trends und Tweets abgegriffen und mit Google-Adsense-Werbung umgeben.
Auf der Startseite steht:

Der beliebte Zwitscherdienst Twitter wird heute auf vielseitige Weise genutzt. Um zu erkennen, welche Themen derzeit angesagt sind, wurde diese Seite erschaffen. …

Ich habe eher den Eindruck die Seite wurde geschaffen, um mit Google-AdSense-Werbung Geld zu verdienen :-)

Das Rezept für schnelles Geld im Internet

Man nehme die API eines großen Webdienstes, greife dort die Inhalte ab, zeige sie auf einer eigenen Webseite an und packe ordentlich Werbung drumherum. Fertig ist die Laube.

Gut, ein kleines Detail will ich nicht verschweigen. Man sollte sich zumindest grundlegend mit Programmierung, z.B. in PHP, auskennen, um die API-Funktionen nutzen zu können. Oder man kennt jemanden, der sich damit auskennt. Oder man findet jemanden, der davon Ahnung hat, z.B. über eine Online-Anzeige. :-)

2 Kommentare »

Hinweis für WordPress-Plugin-Programmierer

Das einfachste Plugin für WordPress besteht nur aus einer PHP-Datei, da gibt es auch keine Probleme. Wenn man aber das Plugin modular gestaltet, eventuell noch Grafiken, Stylesheets oder JavaScript-Dateien laden will, fangen die Schwierigkeiten an.

Das Nachladen von PHP-Modulen ist noch relativ einfach, sofern sich die Dateien im selben Verzeichnis wie das Hauptmodul befinden. Da reicht ein einfaches

include( 'modul-2.php');

und man muß sich keine Gedanken über Pfade und Verzeichnisse machen.

Anders ist es bei Grafik-, CSS- oder Javascript-Dateien. Hier wird eine gültige URL benötigt, also muß man das Verzeichnis wissen, in dem sich das Plugin befindet. Und zwar nicht den absoluten Pfad auf dem Server, sondern den Pfad bezogen auf die Webseiten-Adresse. Häufig sieht man dann so etwas:

$css = get_option( 'siteurl' ).'/wp-content/plugins/my-plugin/my-style.css';

Es wird also einfach davon ausgegangen, daß Plugins immer im Verzeichnis ‚wp-content/plugins‘ liegen. Das müssen sie aber nicht, denn in WordPress ist dafür extra die Konstante PLUGINDIR vorgesehen.

Diese wird in der wp-settings.php wie folgt definiert:

if ( !defined('PLUGINDIR') )
	define('PLUGINDIR', 'wp-content/plugins'); // no leading slash, no trailing slash

Das if ( !defined(‚PLUGINDIR‘) ) läßt erahnen, daß es durchaus vorgesehen ist, hier auch vorab ein anderes Verzeichnis zu definieren. Ganau davon mache ich Gebrauch, indem ich ein abweichendes Plugin-Verzeichnis in der wp-config.php definieren. Das ist eine einfache Möglichkeit, sich ein wenig vor Angriffen auf Schwachstellen in Plugins zu schützen. Denn auch die meisten Angreifer gehen davon aus, daß sie Plugins in Verzeichnis ‚wp-content/plugins‘ liegen, sofern sie überhaupt so intelligent sind.

Wenn nun ein Plugin selbst einfach ‚wp-content/plugins‘ anstelle von PLUGINDIR verwendet, sind Schwierigkeiten vorprogrammiert. Deshalb, liebe Plugin-Programmierer, verwendet bitte immer PLUGINDIR, um Pfade zusammenzusetzen. Für das obige Beispiel könnte das etwa so aussehen:

$css = get_option( 'siteurl' ).'/'. PLUGINDIR.'/my-plugin/my-style.css';

Ich verwende z.B. folgende Funktion, damit ich auch unabhängig davon bin, in welchem Unterverzeichnis innerhalb des Pluginverzeichnisses die Dateien liegen:

// ermittelt das Pluginverzeichnis
function plw123_plugin_basedir( $file ) {
	$file = str_replace('\\','/',$file); // Windows Verzeichnistrenner "umkippen"
	$file = preg_replace('|/+|','/', $file); // doppelte Schrägstriche entfernen
	$file = preg_replace('|^.*/' . PLUGINDIR . '/|','',$file); // relativen Pfad zum Plugin-Dir ermitteln
	return '/'.PLUGINDIR."/$file/";
}

...

$pluginPath = plw123_plugin_basedir( dirname(__FILE__) );
$css = get_option( 'siteurl' ).$pluginPath.'my-style.css';
8 Kommentare »