webCONSUL

the best webCONSUL(ting)

Designclou und SEO-Mod mittels einfachem JavaScript

Sie sind hier: Startseite » Archiv für javascript

Wie heute schon berichtet arbeite ich gerade für einen Kunden an seinem Webdesign beziehungsweise programmier gerade das zugehörige Template. Das Content Management System dahinter ist einfach ein WordPress, aber das tut an dieser Stelle nichts zur Sache.

Die Aufgabenstellung war, die “gelben Boxen” beim Überfahren eines Bildes zu deaktivieren. Nachdem ich herausgefunden hatte, dass damit die title- und alt-Tags bei den Bildern gemeint waren, war die Sache einfach.

So werden aktuell aus SEO-technischer Sicht zwar die Tags geschrieben, aber mit folgendem Code beim Seitenladen mittels JavaScript entfernt:

for(var i=0; i<document.getElementsByTagName('img').length; i++){
  document.getElementsByTagName('img')[i].removeAttribute('title');
  document.getElementsByTagName('img')[i].removeAttribute('alt');
}

Das mag zwar vielleicht den Google-Richtlinien widersprechen, aber heey, das hat mehrere Vorteile. Einerseits wird das Layout dadurch freundlicher und konnte dem Kundenwunsch entsprechend angepasst werden, andererseits wird vermieden, dass die Browserplugins für den 0815 Suchmaschinenoptimierer oder der konkurrierende SEO-Agentur nützliche Informationen preisgeben und letztlich ist es Google erstmal egal, da die Tags trotzdem gewertet werden.

Somit muss kein Plugin für das WordPress Template extra gehackt werden, welches die Standardoption der Tags abändert und der dicke Bonus obendrauf ist, dass man dem barrierefreiem Web nicht im Wege steht. Denn gerade Browser die keine Bilder anzeigen können und JavaScript deaktiviert haben, ist es letztlich egal, denn hier sind alle Informationen enthalten, die gebraucht werden.
Der Beweis, dass Google dynamische Inhalte oder genauer Modifikationen am DOM des Browsers aktuell nicht interessiert, habe ich damals schon getestet. Von daher: einfach machen!

Zusätzlich habe ich für einfachen Bilderklau, über den Rechtsklick, das Kontextmenü sowie den Klick deaktiviert:
  document.getElementsByTagName('img')[i].setAttribute('onmousedown', 'return false;');
  document.getElementsByTagName('img')[i].setAttribute('oncontextmenu', 'return false;');

Das hilft zwar nicht gegen jemanden der sich auskennt, denn dagegen gibt es keine wirklich wirksame Methode, aber für den 0815-Webuser dürfte das ausreichen.

Effektiver Spamschutz mit JavaScript

Sie sind hier: Startseite » Archiv für javascript

Für einen Kunden habe ich gestern folgende Methode implementiert um effektiv die Unternehmensadressen für Spambots unzugänglich zu machen.

Das Prinzip ist relativ einfach, denn der gewünschte E-Mail Link wird folgendermaßen gesetzt:
<a href="mailto:#" title="username">username --at-- example . de</a>

Damit funktioniert der Klick auf die E-Mail-Adresse noch nicht. Der gesetzte title-Tag verrät aber schon, dass aus diesem die E-Mail-Adresse erzeugt werden soll, sodass man doch mit einem Klick den Empfänger im zum Beispiel Microsoft Outlook schon gesetzt hat.

Es reicht jetzt am Seitenende folgendes JavaScript zu laden:
for(var i=0; i<document.getElementsByTagName('a').length; i++)
  if(document.getElementsByTagName('a')[i].href.match(/mailto:/))
    document.getElementsByTagName('a')[i].href =
       'mailto:'+document.getElementsByTagName('a')[i].getAttribute('title') +'@example.de';

Wichtig ist dabei, dass der Code im Template am Ende eingefügt wird, am besten vor oder nach dem schließenden body-Tag.
In dem kurzen JavaScript-Snippet wird jeder Link auf der Seite betrachtet, falls er “mailto:” enthält, wird der Link mit “mailto:$title@exmaple.de” ersetzt. Wobei $title eben den Wert des gesetzten Attributs enthält.

Ziemlich einfach, oder?
Damit kann man als Webdesigner den Kunden einfach zufrieden stellen und das Layout bzw. Webtemplate schnell und effektiv absichern.

Crockford on Javascript

Sie sind hier: Startseite » Archiv für javascript

Die ersten zwei Videos von Douglas Crockford über Javascript sind raus:

The Early Years

And Then There Was JavaScript

Drei weitere kommen nocht.

JavaScript Funktion aus String erzeugen

Sie sind hier: Startseite » Archiv für javascript

In JavaScript will man oftmals eine Funktion erzeugen, deren Eingabe- und Ausgabeparameter vorher noch unklar sind.
Daher muss die Funktion dynamisch erzeugt werden und darin ist JavaScript ja bekanntlich ein Meister.

Mit diesem kurzen Codebeispiel kann man diese Aufgabe lösen:

var add = new Function("a", "b", "return a+b;");
alert( add(3, 5) ); // ergibt 8

Damit ist es möglich die gewünschte Funktion zu erstellen, da der letzte Wert immer als die gewünschte Funktion interpretiert wird.

Probiert es aus! In welchen Anwedungsfällen verwendet ihr das?

Yahoo! und die Applikation

Sie sind hier: Startseite » Archiv für javascript

Wie ihr alle wisst bin ich ein Fan von Yahoo!s YUI.

Durch einen Tipp bin ich zusätzlich auf Yahoo!s Application Platform gestoßen, die sich jeder Webentwickler mal ansehen sollte.
Vielleicht kannst ja auch Du damit Profit machen ;-)

Wenn Du ein wenig Zeit mitgebracht hast, dann schau Dir auch folgende Videos an:


Satyen Desai — YUI3: Design Goals and Architecture

Douglas Crockford: Ajax Performance (ein Muss!)

Dazu:
Douglas Crockford: Web Forward

und für Entwickler die mit Javascript-Events arbeiten:
PPK (Peter-Paul Koch): JavaScript Events

JSXGraph WordPress Plugin Update

Sie sind hier: Startseite » Archiv für javascript

Wie im vorherigen Post erläutert gab es letzte Woche ein neues JSXGraph Release und somit musste das WordPress Plugin dazu auch aktualisiert werden.

Die Gelegenheit habe ich genutzt um folgende Änderungen einzubauen:
1.) Jetzt werden die vorhandenen Bibliotheksdateien im Pluginverzeichnis überprüft. Vorher wurde von dem Skript aus der Pfad überprüft, was zwangsläufig zu einem Fehler führt.
Dazu als Tipp an alle: bei einem WordPress Plugin immer die Pfade aus dem “root-Verzeichnis” aus überprüfen, zum Beispiel: if(file_exists(‘wp-content/plugins/jsxgraph/jsxgraph.css’))

2.) In Abhängigkeit bereits geladener Javascript-Bibliotheken wie prototype oder jquery wird jetzt keine Bibliothek geladen oder prototype.
Der Code dazu sieht folgendermaßen aus:

if(
!(typeof Prototype != 'undefined' && Prototype.Version)
&&
!(typeof jQuery != 'undefined' && jQuery.fn.jquery)
) {
var scr = document.createElement('script');
scr.src = '". get_bloginfo("wpurl") ."/wp-includes/js/prototype.js';
document.getElementsByTagName('head')[0].appendChild(scr);
}

D.h. falls weder prototype noch jquery bekannt sind, wird das mit dem Blog ausgelieferte prototype dynamisch nachgeladen.

Gibt es dazu evtl. eine elegantere Möglichkeit?

Der Googlebot und JavaScript

Sie sind hier: Startseite » Archiv für javascript

Dem Googlebot wird nachgesagt alles zu parsen, sogar vor JavaScript und Flash soll er nicht halt machen.
Da hat mich interessiert, ob der Googlebot das wirklich kann.

Um herauszufinden, ob das klappt, habe ich kurzerhand ein kleines Testskript geschrieben, welches die Prototype JS-Library verwendet um einen einfachen Ajax.Request zu machen:

<script type="text/javascript" language="javascript" src="prototype.js"></script>
<script type="text/javascript" language="javascript">
var r = new Ajax.Request('searchtest.php?r=r', {method: 'get', onSuccess: function(t) {
          document.body.innerHTML = t.responseText;
      }});
</script>

Bei erfolgreichem Abfragen soll einfach der komplette HTML-Inhalt im “body” mit dem zurückgelieferten Inhalten ersetzt werden, die schlimmstenfalls zu 100% abweichen (wie in meinem Test).

Das Resultat ist, dass der Googlebot die Seiten schön indiziert und parst, allerdings eben genau diese Hürde nicht nimmt oder nicht schafft. Die Datei prototype.js hat er laut den Serverlogs nicht geladen und auch der “neue Inhalt” wird in der Suche nicht gefunden.
Das heißt, der Googlebot indiziert bei interaktiven Seiten den Quelltext und kann so mit anderen Inhalten manipuliert werden.

qed ;-)

Gutes im Netz

Sie sind hier: Startseite » Archiv für javascript

Selten findet man wirklich Gutes im Netz, aus diesem Grund haben die Macher von Yigg die Kategorie “Gute Nachrichten” eingeführt.

Um fortzufahren kann ich die zwei Videos im Fontblog empfehlen: “Im Tarnanzug bei Ikea
Hier wundere ich mich allerdings, dass diese Aktion nicht gleich als Marketinginstrument missbraucht verwendet haben.

Bei Dr. Web gibts heute auch einen Anleitung wie man ein Daumenkino mit jQuery realisiert. Die Idee ist an sich nicht schlecht, als JavaScript-Programmierer finde ich es ein wenig viel Aufwand, beziehungsweise nicht 100% elegant gelöst, aber für den Einstieg passabel. Schöner finde ich da ebenfalls bei Dr. Web den Artikel über Supersized. Schaut mal rein.

Zum Abschluss muss ich noch auf die wunderschönen Städtefotografien verweisen. Leider ist Hongkong – wo ich als nächstes hinreise – nicht dabei, darüber gibts allerdings bei Lufthansa einen super Guide: Hongkong – Travelworld

Das waren auch die besten Links für heute.

JSXGraph MediaWiki Extension

Sie sind hier: Startseite » Archiv für javascript

JSXGraph – Datenvisualisierung der Zukunft

Sie sind hier: Startseite » Archiv für javascript

JSXGraph – graphics with javascript“.
Mehr muss man als Titel glaub ich nicht dazu sagen.

Konkret geht es bei dem Projekt an der Uni Bayreuth um eine Bibliothek zur Grafikerzeugung im Webbrowser.
Warum man JSXGraph statt einer der etablierten Bibliotheken einsetzen soll, liegt klar auf der Hand. Neben der eigentlichen Datenvisualisierung besteht die Möglichkeit der Nutzerinteraktion bis zur interaktiven Geometrie. Das reine Plotten von Funktionen ist dabei nur ein brauchbarer Nebeneffekt.

In der Wikipedia findet sich dazu auch ein Artikel und Verweise von Data visualization, Visualization (computer graphics) und interactive geometry software neben zahlreichen Verweisen von mathematischen Funktionen.

Gerade Webentwickler sollten sich die mächtige Software anschauen, um im Nu peppige Graphen, Charts und mehr zu erstellen und jede Webseite damit aufmotzen zu können. Dabei wird weder die Performance reduziert noch eine unheimlich lange Ladezeit wie bei anderen Applikationen nötigt.
Die lediglich 55kB große Bibliothek lässt sich schnell und einfach einbinden.
Im Entwicklerwiki gibt es dazu eine Unmenge an Beispielen und Showcases.