jQuery – 4 – Flipflop / Toggle

Ist zwar nur ein klitzekleines Script .. aber ich brauch es öfter mal.

Ihr kennt das .. manche Bereiche einer Website sollen nur dargestellt werden wenn der User sie wirklich benötigt bzw. wenn der User einen bestimmten Bereich klickt.

Dafür eignet sich unter jQuery der Toggle Befehl sehr gut. Er ersetzt z.b. auf Klick einen Bereich einer Website komplett durch ein einen anderen. Man schlägt also zwei Fliegen mit einer Klappe: Verschwinden und Erscheinen 🙂

Mein jQuery Toggle Beispiel

jQuery Code

$("a.bbb").click(         
    function() {
      $("div.news").toggle("fast");       
    }
    );

Wenn auf die Klasse “bbb” geklickt wird soll der Bereich “div.news” getoggelt werden. Die Geschwindigkeit lässt sich ebenfalls beeinflussen: “slow”, “normal” oder “fast” oder einfach die Millisekunden angeben (z.B. 1000).

HTML Code

<body>
<div class="news">
    <a href="javascript:function()" class="bbb"><h3>Ich habe die AGBs gelesen</h3></a> 
</div>    
<div class="news" style="display:none;">
   <h3><a href="http://www.getmad.de">weiter zur Anmeldung</a></h3>
</div>
</body>

Ich habe zwei “div.news” Bereiche angelegt .. einer ist sichtbar und der zweite wird unsichtbar gemacht mit dem Befehl “display:none”. Wird nun das Javascript aufgerufen wird der Style Bereich der beiden DIVs gewechselt und ich erhalte meinen Effekt.

Hier nochmal mein jQuery Toggle Beispiel (seht euch am besten den Quelltext an)

HTML5

Derzeit gibt es grundsätzlich 2 Sprachen mit denen man seine Webseiten schreiben kann. Da wäre zuerst HTML 4.01 und daneben XHTML 1.0 und XHTML 1.1.

Konfusion?

XHTML 1.0 ist quasi das selbe wie HTML 4.01 allerdings in XML geschrieben d.h. man benötigt grundsätzlich abschließende Tags, man schreibt immer klein und es muss immerdie Namensraum-Angabe für XHTML enthalten sein. (Um nur einige Dinge zu nennen). HTML ist in SGML verfasst.

XHTML 1.1 ist wesentlich strikter als sein Vorgänger. Viele Dinge die in XHTML 1.0 noch erlaubt waren sind es in 1.1 nicht mehr. Problem bei XHTML 1.1 ist/war das viele alte Browser es nicht sauber darstellen könnnen.

Im Zweifelsfall hat der Webdesigner seinen Quelltext dann in XHTML 1.0 verfasst (wenn es auf maximale Kompatibilität und möglichst geringe Kosten ankam).

Aber nun soll alles besser werden: HTML 5

HTML 5 soll die vorhandenen Spezifikationen (HTML 4.01, XHTML 1.0) ersetzen. Man wird HTML 5 in XML, SGML und als DOM-Abbildung schreiben können.
Desshalb sieht der HTML 5 Entwurf auch 3 drei Sprachformen vor: HTML 5, XHTML 5 und DOM 5.

Wie gewohnt wird es jede Menge neuer Elemente geben und auch viele alte werden wegfallen. Ein großer Vorteil soll sein das man Mediendateien (Audio/Video) nativ in den Browser einbinden kann und keine Flashplugins oder ähnliches mehr notwendig ist.

Vieles wird sich aber auch gar nicht verändern.

Ab wann kann man HTML 5 schreiben?

Grundsätzlich kann man sofort damit beginnen. Viele Browser (oder Engines) unterstützen HTML 5 teilweise obwohl es noch nicht komplett verabschiedet ist.

Am weitesten ist dabei Opera. Aber selbst Microsoft strengt sich derzeit an HTML 5 in seinen IE 8 reinzuprügeln.

Für den Produktiveinsatz eignet sich HTML 5 allerdings noch nicht und es wird wohl noch Jahre dauern bis die Mehrheit der installierten Browser HTML 5 vollständig unterstützen.

HTML 5 ist allerdings im Hinblick auf Kompatibilität mit bereits vorhandenen Browsern entstanden und viele Dinge die HTML 5 nativ kann werden heute durch Javascript quasi ersetzt.
Hier findet ihr einen Validator für HTML 5

HTML 5 Quellen

Wenn euch diese Thema weiter interessiert findet ihr hier zwei Dokumente des W3C die sich zum einen direkt mit HTML 5 und zum anderen mit dem Unterschied zu HTML 4 beschäftigen. Beide Dokumente sind die sog. letzten Versionen der Working Drafts also quasi die Vorstufe zur Norm.

Suchmaschinenoptimierung – 5 – Keywords im Quelltext

Wo sollten die Keywords in eueren Texten erscheinen?

Früh!

Man sollte gleich am Anfang des BODY Tags mit den Keywords beginnen. Also im Grunde folgt bei einer guten Strukur zuerst eine Überschrift mit dem H Tag, vielleicht eine Unterüberschrift und dann beginnt der Text direkt mit den Keyword Phrasen. Den ersten Abschnitt seines Textes sollte man nun mit seinen Keywords (sinnvoll) füllen.

Den Fehler den man nun sehr leicht begeht ist, daß man seine Keywords zu oft wiederholt oder sinnlos aneinanderreiht. Dies wird heute von jeder Suchmaschine erkannt und man wird abgewertet.

Ab dem zweiten Abschnitt kann man dies nun vernachlässigen. Die ersten 200 – 400 Buchstaben des Textes sind am wichtigsten.

Am Ende des Textes sollte die Keyworddichte aber wieder steigen da hier quasi ein Fazit etc. erwartet wird. Textlinks auf weitere Erklärungen und weitere Seiten innerhalb der Website sollten hier auch gesetzt werden. Eure wichtigsten Keywords solltet ihr hier nun auch mit B, STRONG und U Tags herausstellen.

Keyworddichte

Wie schon in den vorhergehenden Artikeln mehrfach erwähnt sollte die Keyworddichte bei 4-6% des Gesamttextes liegen. Manche Suchmaschinen analysieren den kompletten Quelltext andere nur den BODY Bereich. Eine exakte Aussage lässt sich hier nicht treffen.

Bevor man jetzt aber den Taschenrechner auspackt. Mit www.keyworddensity.com lässt sich recht gut ermitteln wie hoch euere Keyworddichte ist .. oder sucht einfach mal nach Keyworddichte. Wichtig ist hierbei das Suchmaschinen sog. Stopwords ignorieren. D.h. der, die, das, oder, bei, mit usw. werden von Suchmaschinen nicht mitgezählt.

Achtung

Es ist ein schmaler Grat zwischen richtiger Anzahl der Keywords und einer Keywordüberhäufung. Wenn Suchmaschinen zuviele Keywords im Text finden wird man gnadenlos abgestraft. Auch ist nicht immer sicher auf welcher Basis Suchmaschinen die Keyworddichte berechnen. Desshalb sollte man zu Beginn vorsichtig vorgehen und lieber mal ein paar Monate lang testen.

Anmerkung: In diesem Text kommt das Wort Keyword definitv zu oft vor!

Suchmaschinenoptimierung – 4 – HTML

Wie hat nun suchmaschinenfreundlicher Quelltext auszusehen?
Nachfolgend mal ein Beispiel eines Headers:

<head>
 <title>Erdnussgummibärchen - Hamburg</title>
 <meta name="keywords" content="erdnussgummibärchen, erdnüsse, gummibärchen .. " />
 <meta name="description" content="Erdnussgummibärchen aus Hamburg" />
 <meta name="robots" content="index" />
 <meta name="robots" content="follow" />
 <link rel="stylesheet" type="text/css" href="src/blue42.css" />
 <script type="text/javascript" src="src/jquery.js"></script>
 <script type="text/javascript" src="src/accept.js"></script>
</head>

Die zwei wichtigsten Keywords haben wir in den TITLE Tag gepackt. META KEYWORDS und META DESCRIPTION sind korrekt ausgefüllt. Dem Spider befehlen wir mit content=“index” unsere Seite in seinen Index aufzunehmen und wir sagen ihm er soll allen Links die er in diesem Dokument findet folgen (content=“follow”).

Sämtliches CSS und JAVASCRIPT haben wir in externe Dateien ausgelagert um die HTML Datei (vor allem im oberen Drittel) nicht mit völlig unnützen Informationen aufzublasen und es dem Spider einfach zu machen “durchzucrawlen”.

Viele Webdesigner machen den Fehler CSS und Javascript im HEAD ihrer HTML Files unterzubringen .. für gute SEO ist das natürlich völlig contraproduktiv. Unser Ziel ist es den Spider zum Honigtopf zu führen .. ohne Umwege und schnell. Wir möchten natürlich das er den Keywordreichen BODY Bereich indiziert.

BODY Bereich

<body>
  <div id="content">
    <h1>Erdnussgummibärchen - eine Spezialität aus Hamburg</h1>
    <p>blabla blubblub text text <strong>Erdnussgummibärchen hergestellt in
   Hamburg</strong> blabla blubblub text text</p>
    <h2>Erdnussgummibärchen - Die Herstellung</h2>
    <p>blabla blubblub text text <strong>Erdnussnüsse werde gemahlen</strong>
   blabla blubblub text text</p>
  </div>
</body>

Ich beginne nach dem Layer direkt mit einem H1 Tag in dem ich schonmal zwei wichtige Keywords unterbringe … dann folgt Text. Keywords im Text hebe ich mit dem STRONG Tag heraus.

Wie schon in anderen Beiträgen erwähnt sollte man beim Einsatz von Bilder und Links drauf achten das ALT Tag (bei Bildern) und der TITLE Tag aussagekräftig gepflegt sind. Ansonnsten sollte man die Möglichkeiten die HTML bietet einsetzen H1-H6, U, B, STRONG usw.

Ein Fehler wäre es, Pseudoformatierungen im CSS anzulegen und für alle verschiedenen Textteile z.b. nur den FONT Tag zu verwenden. Für den menschlichen Besucher kein Problem. Ein Spider kann dann aber nicht erkennen auf was ihr wert legt.

Wieviele Keywords?

Nicht mehr als 4% – 8% der gesamten Wortzahl sollen Keywords sein. Eine Zusammenfassung des Textes am Ende der Seite und einige Textlinks mit weiterführenden Informationen oder querverweisen gehören auch dazu. Es gilt nicht mit den Keywords um sich zu schmeißen und sie da einzusetzen wo es Sinn macht.

Typische Fehler

  • TABLES zum strukturieren der Seite (unötiger Code) -> DIVs einsetzen
  • zuviele verschiedene Keywords -> 2-3 sind das MAXIMUM pro Seite
  • gleicher HEAD Bereich in allen Seiten -> jede Seite bekommt einen angepassten HEADER
  • Framesets -> sind einfach nicht mehr zeitgemäß
  • Splash Screen (Willkommen – Klicken sie “weiter”) das bringt niemandem was vor allem mag das kein Spider
  • Grafiken die Text ersetzen -> Spider crawlen keine Grafiken