SenSEO - 1000 Downloads
Vor einem Monat habe ich SenSEO bei Mozilla veröffentlicht - heute gab es den 1000sten Download. Wenn man bedenkt, daß man sich für den Download bei Mozilla registrieren muß, ist das schon ganz ordentlich. Auf jeden Fall werde ich nächste Woche eine Runde Bier im kap spendieren.
Tooltip unobtrusive mit JavaScript anzeigen
Die Aufgabe bestand darin, einen Tooltip-Effekt an ein Element mit einer bestimmten CSS-Klasse unobtrusive mit JavaScript zu binden.
Bekannt ist der Tooltip-Effekt vor allem bei semantisch ausgezeichneten Akronymen, die über ein entsprechendes title-Attribut ihre vollständige Schreibweise zugewiesen bekommen. Mit einer entsprechenden CSS-Regel werden diese Elemente so gestaltet, daß eine Hover-Eigenschaft erkennbar wird. Dies alles können moderne Browser nativ leisten.
Ich habe diese Idee dahingehend erweitert, daß (fast) beliebiges Markup in solch einen Tooltip gewandelt werden kann. Dabei werden Inline-Elemente mit bestimmten CSS-Klassen versehen, die per JavaScript in den Tooltip-Effekt überführt werden. Im Regelfall sieht das dann in etwa so aus:
<span class="tooltip">
IDN-Domain
<span class="tooltip-text">
Eine <strong>Domain</strong>, welche die Verwendung von <strong>Umlauten</strong> zuläßt.
</span>
</span>
Mit Hilfe von JavaScript werden alle Elemente mit der Klasse tooltip-text immer dann an der Mauszeigerposition eingeblendet, wenn das sie umgebende Element gehovert wird.
Die JavaScript-Lösung basiert auf der YUI und reagiert auf verschiedene Events wie mouseover, mousemove und mouseout. Dabei wird das Tooltip-Element initial eingeblendet und positioniert, wird bei einer Mausbewegung neu positioniert und beim Verlassen des Elementes wieder ausgeblendet.
Der Vorteil im Vergleich zur Verwendung eines title-Attributes liegt wie bereits erwähnt in der Verwendung beliebigen Markups und einer gewissen Gestaltungsfreiheit durch den Einsatz von CSS.
Berlin, du bist so wunderbar
Ich habe mal wieder ein Wochenende in Berlin hinter mir. Was für eine Stadt! Ich bin wie immer hin und weg. Die Entdeckung diesmal: Das Rosi's in der Revaler Straße unweit der Oberbaum City, in der ich als Student ein 6-monatiges Praktikum bei LuraTech absolviert hatte. Der Club liegt etwas abseits, was dem Zulauf aber so garnichts anhaben kann. Bis 3 Uhr kam durchaus tanzbarer Elektro-Beat in einem wirklich abgefahrenen Ambiente. Ab 3 wurde es aber so dermaßen voll, daß wir das Weite gesucht haben. Irgendwie scheint in Berlin das Rauchen in Clubs und Bars wieder erlaubt zu sein, was ich so gar nicht verstehen kann 
In der Nacht zum Sonntag brach dann auch noch der Winter in Form von Kälte und Schnee über die Stadt herein. Was dazu führte, daß die Leute aus den Bars und Kneipen kamen um im T-Shirt eine Schneeballschlacht anzufangen.
Der Rückweg nach Karlsruhe war nur mit Hürden zu nehmen. Bei Biblis kam es beim ICE zu einem Triebkopfschaden - die Leute mußten auf einem Provinz-Bahnhof angeleitet durch einen Bahnangestellten mit Megaphon in einen Ersatz-ICE umsteigen. Alles in Allem hat mir das eine Verspätung von 2 Stunden eingebracht. Klasse war das Wochenende trotzdem, deshalb jetzt noch was Passendes auf die Ohren.
Update: SenSEO
In der Version 0.5.1 habe ich weitere Verbesserungen vorgenommen. Die Benotung wird ein wenig anders berechnet. Nicht gefundene Komponenten werden mit "Not found" markiert. Weiterhin werden zu lange Bildernamen, welche unter "Show Components" angezeigt werden, nun in der Länge beschnitten.
Sollten sich in nächster Zeit keine größeren Probleme zeigen, werde ich die Extension bei Mozilla zur Freigabe anmelden. Immerhin laden sich trotzt der Hürde des Logins wöchentlich mehr als 200 Leute SenSEO herunter - im Vergleich zu anderen Extensions mit der Sandbox-Beschränkung ist das ausgezeichnet. Fast 300 Leute nutzen SenSEO aktiv, was nicht so schlecht sein dürfte. Auch die Reviews geben ein positives Feedback. Für mich alles Anzeichen dafür, daß die Idee durchaus Potenzial hat und dies durch eine Freigabe seitens Mozilla bestätigt werden dürfte.
Update: SenSEO
In den letzten Versionen habe ich einige Bugs gefixt und die Usability verbessert. Es gibt nun eine bessere Anleitung zur Nutzung des Tools (Hinweis auf die Eingabe von Keywords, Fokussierung des entsprechenden Feldes bei fehlenden Keywords). Ausschlaggebend war ein Hinweis, der bemängelte, daß die Extension nicht funktioniert.
Neu ist auch die Verlinkung der analysierten Kriterien mit weiterführenden Informationen. Als komplett neues Feature führte dies zur Erhöhung des minor-release.
SEO on-page criteria
First of all it is important to know how to deal with SEO. The SenSEO-rules try to follow the Google Webmaster Guidelines.
Google says:
Avoid tricks intended to improve search engine rankings. A good rule of thumb is whether you'd feel comfortable explaining what you've done to a website that competes with you. Another useful test is to ask, "Does this help my users? Would I do this if search engines didn't exist?"
So please keep this in mind whenever you try to push your site in SERPs (Search Engine Result Pages) and do SEO moderately.
Use Title-Tag correctly
The Title-Tag is quite important for SEO. This tag should be unique for each webpage. Put your main keywords at the beginning followed by the category. Put the brand of your company at the end. The title should not be longer than 65 characters. This is the maximum length displayed in SERPs.
TITLE tags and ALT attributes
Use Meta-Description correctly
The Meta-Description is used as a Snippet in SERPs. It's maximum length is 150-160 characters. More characters are cut off. If possible put your keywords at the beginning.
Meta tags
Use Meta-Keywords correctly
In the last years, Meta-Keywords became increasingly irrelevant. You should only use keywords which can be found in the content of the page. Don't use more than 10 of them and write them all lowercase.
Meta tags
Headline-Tags
Headlines have a strong semantic value. That's why you should place your keywords inside them. Use H1 only one time and be sure to use H2 and H3 in correct hierarchical order. H4-H6 have a weak relevance.
Page-Content
The content is one of the most important SEO criteria. Each page should have a good deal of textual content, which should always be unique and of high quality. Try to place your keywords with a density of 5-7 % in the visible content. Also be sure to use keywords in tags like <strong> and <em>.
For every picture try to find a describing alt-attribut. For links use the title-attribute. For search engines this is content, too. Use the noscript-tag and noframes-tag to alternatively describe such content.
How can I create a Google-friendly site?
Domain
If possible place your keywords in the domain. Keywords (maximum 2-3) should be seperated by hyphens. Remember that you have to communicate the domain, so try to keep it as short as possible. Don't use IDN-Domains (domains with special characters).
"Older is better": Search engines admit old domains greater value.
Creating a Google-friendly URL structure
Path
Use canonical URLs (only one URL per page), that prevents duplicate content. If you have more than one URL for one page, redirect them with 301 redirect to one URL. Dont't place session-data in your URL. Instead try to keep your session cookie based. Dont't nest your documents too much. The higher the directory level the more relvance the document has.
Creating a Google-friendly URL structure
Dynamic pages
Make sure your code is semantic and valid
To make sure that the content of pages is indexed correctly keep their code valid. Semantic code has a great influence, because search engines have to analyze pages by algorithm and that's why they dependent on a good semantical structure.
Making sure your site appears properly in different browsers
Google's SEO Starter Guide
Google offers an official Starter Guide focussed on on-page rules you should follow to optimize your page for search engines.
Google's SEO Starter Guide
Reiter-Navigation mit statischem Tab
Die Reiter-Navigation, welche ich bereits in diesem Artikel vorgestellt habe, hat eine Erweiterung erfahren. Es ist nun möglich, einen bestimmten Reiter als "statisch" zu markieren. Dies führt dazu, daß bei Klick auf einen Reiter, dieser den Platz mit dem statischen Reiter tauscht. Die Markierung des aktiven Reiters verändert also nicht die Position und bleibt im Falle des 1&1 Wechsler-Service immer im Vordergrund.
In diesem Fall kommt eine weitere Funktionalität - die Vorauswahl eines Reiters - hinzu. Der Provider des jeweiligen Besuchers ist hierfür ausschlaggebend.
Fortgeschrittene CSS-Techniken
Ich muß an dieser Stelle die "ultimative Lobhuddelei" für dieses Buch anstimmen. Meine Erwartungen, durch einen genauen Blick in das Inhaltsverzeichnis und durch die Amazon-Rezensionen ohnehin sehr hoch, wurden von Fortgeschrittene CSS-Techniken. Inklusive Debugging (Ingo Chao und Corina Rudel) noch weit übertroffen.
Die beiden Autoren haben ein Werk geschaffen, daß ich in nächster Zukunft gar nicht hoch genug werde schätzen können. Egal welchen CSS-Themas sich die beiden in ihrem Buch angenommen haben - Vertikale und horizontale Anordnungen, Floats, Positionierung und Stapelung, Debugging, praktische Anwendungen und einiges mehr - es bleibt keine Frage unbeantwortet. Angefangen mit einleitenden Betrachtungen, über ausführliche Erläuterungen zu den durch die W3C-Spezifikation vorgegebenen, standardkonformen Lösungen bis zu genauen Anleitungen, wie ältere Browser (vornehmlich alle existierenden IE-Versionen) zu behandeln sind, wird hier ein umfassender Einblick in alle aktuellen Fragestellungen zu CSS-Techniken gegeben.
Besonders das intelligente und in sich geschlossene Konzept des Buches hat mich dabei überzeugt. Werden anfänglich verschiedene CSS-Prinzipien auf hohem Niveau erklärt, finden diese in einem weiteren Teil des Buches mit vielen Querverweisen und im komplexen Zusammenspiel ihre praktische Anwendung. Auch auf das strategische Debuggen von Layoutfehlern wird eingegangen. Dabei wird nicht nur der Umgang mit hilfreichen Werkzeuge erläutert, sondern die Autoren versuchen, eine Art Philosophie hinter den vorgestellten Methoden zu vermitteln. Dieser Wille zur Vermittlung des "großen Blicks" merkt man dem Buch dabei in jedem seiner Kapitel an.
Letztendlich möchte ich mich der Aussage eines der Amazon-Rezensenten anschließen, der schreibt: "Für mich das Pflichtbuch des Jahres für jeden, der sich mit HTML und CSS beschäftigt. ".
Archive
- Februar 2010 (10)
- Januar 2010 (11)
- Dezember 2009 (8)
- November 2009 (6)
- Oktober 2009 (10)
- September 2009 (9)
- August 2009 (12)
- Juli 2009 (16)
- Juni 2009 (17)
- Mai 2009 (8)
- April 2009 (12)
- März 2009 (8)
- Februar 2009 (10)
- Januar 2009 (9)
- Dezember 2008 (2)
- November 2008 (8)
- Oktober 2008 (13)
- September 2008 (3)
- August 2008 (5)
- Juli 2008 (9)
- Juni 2008 (5)
- Mai 2008 (5)
- April 2008 (7)
- März 2008 (2)
- Januar 2008 (3)
- September 2007 (4)
- Das Neueste ...
- Älteres ...
