webmatze.de

Die Sprache eines Links kennzeichnen

Ein bislang fast nie benutztes Attribut des <a> Tags ist das Attribut hreflang, welches beschreibt in welcher Sprache die Seite geschrieben ist, zu der ein Link führt. Dieses Attribut darf nur gesetzt werden, wenn auch das href Attribut angegeben wurde.

Doch scheint das hreflang Attribut keinen wirklichen Nutzen zu haben, da es ja in keiner Weise auf der angezeigten HTML Seite dargestellt wird. In den nächsten Abschnitten möchte ich zwei Wege zeigen, wie man das Attribut doch sichtbar machen kann.

Die CSS Methode

Moderne Browser wie Firefox erlauben es per CSS auf Elemente der Seite mit bestimmten Attributen zuzugreifen und diesen dann einen Style zuzuweisen. Dies geschieht, indem man den Attribut Namen in eckigen Klammern hinter den Tag Namen schreibt:

a[hreflang] {
	...Styles...
}

Weiterlesen →

Das Problem mit scrip.aculo.us Effect.scroll()

Oliver Schwarz beschreibt in seinem Blog wie man "Unaufdringliches Scrollen in großen Webseiten" mit Hilfe von JavaScript umsetzen kann. Gemeint ist damit das Springen von einer Stelle einer bestimmten Seite zu einer anderen Stelle auf der selben Seite. Nur eben, dass der Browser nicht wirklich zur neuen Position springt, sondern weich dort hinscrollt.
Dies gelingt ihm unter Einsatz des JavaScript Frameworks prototype und der Effekt Bibliothek script.aculo.us. Letztere bietet eine Funktion Effect.scroll() an, um zu jeder beliebigen Position innerhalb einer Seite scrollen zu können.
Auch wenn es sich bei Olivers Lösung, welche auf der mediastyles Seite zu bewundern ist, um einen ansehnlichen Effekt handelt, sind in den Kommentaren zu seinem Blog-Eintrag einige wichtige Bemerkungen gemacht worden.
In einem Kommentar beschreibt Christine Kühnel das Problem des nicht mehr funktionierenden Back-Buttons.

"Der Scroll-Effekt ist ganz schön, hat aber einen Nachteil: Der Back-Button funktioniert nicht mehr wie gewohnt. Ich denke, viele Leute benutzen den ganz gern, um wieder nach oben zu springen."
"Es gibt zwar andere Möglichkeiten, wieder auf Anfang zu springen (Tasten z.B.), aber ich denke, ein wenig bedenklich ist es immer, wenn Browser-Standard-Verhalten beeinflusst wird..."

Damit spricht sie natürlich ein großes Problem bei vielen Webseiten/Webanwendungen an, welches sich auch besonders in AJAX Anwendungen wiederfinden lässt. In einem späteren Kommentar bietet sie aber auch gleich eine mögliche Lösung an. Durch ein Aufrufen des angesprungenen Ankers nach dem erfolgten Scrollen wird die URL im Browser geändert, was eine Verwendung des Back-Buttons wieder möglich macht. Allerdings sind dazu noch ein paar Tricks notwendig, welche dazu führen, das die Seite nach dem Scrollen kurz flackert, was den Effekt natürlich etwas unschön erscheinen lässt. Das Resultat ist auf dieser Testseite zu betrachten.

Hier muss meines Erachtens nach noch eine bessere Lösung gefunden werden. Auch wenn der Effekt schön anzusehen ist, sollte man es sich momentan besser zweimal überlegen, ob solch ein Scrolleffekt eine Seite wirklich besser benutzbar macht.

FireBug 0.4 – Der ultimative Web Debugger

Webseiten von heute bestehen meistens nicht nur aus HTML und CSS, sondern häufig auch viel JavaScript. Es sind häufig gar keine Webseiten mehr, sondern schon richtige Webanwendungen. Und wir alle wissen, dass Anwendungen häufig auch Fehler enthalten können. Auch Webanwendungen sind davon nicht ausgeschlossen.
Bisher war es meistens schwierig solche Fehler im JavaScript Code oder im HTML zu finden. Es fehlen die richtigen Tools, wie man sie z.B. bei der Programmierung mit Java ode C++ gewohnt ist, um diese Fehler aufzuspüren und zu beheben. Da HTML, CSS und JavaScript im Browser ausgeführt und angezeigt werden, braucht man auch Tools, um sie genau da - während sie ausgeführt werden - zu debuggen. Der Browser Firefox bietet hierfür einige gute Tools an. Ein guter Debugger ist z.B. Venkman. Und mit dem DOM Inspector kann man sich bequem den DOM Tree der Seiten anschauen.
Doch in Zeiten von web 2.0 und Ajax braucht man noch bessere und spezialisiertere Tools. Und eins dieser "Übertools" ist FireBug, welches jetzt in der Version 0.4 erschienen ist.

Hier ein kurzer Überblick über die neuenFeatures:

JavaScript Debugger

FireBug ermöglicht es, Breakpoints im JavaScript Code zu setzen, Schritt für Schritt durch die Codezeilen zu springen und lokale Variablen sowie den Stack zu betrachten.

Stack Traces bei JavaScript Fehlern

Jeder JavaScript Fehler wird mit einem Stack Trace angezeigt. So kann man genau sehen, an welcher Stelle im Code und durch welchen Aufruf ein Fehler genau aufgetreten ist.

JavaScript Fehler debuggen

Wenn ein Fehler auftritt, reicht es meistens nicht, nur den Stack Trace zu sehen. Meistens möchte man auch sehen, welche Werte bestimmte Variablen gerade hatten, als der Fehler auftrat. Mit FireBug kann man durch die Einstellung "Break On Error" den Debugger automatisch anhalten lassen, wenn ein Fehler auftritt. Man wird dann sofort zur richtigen Stelle im Code gebracht.

Logging Funktionalitäten

Über das console Objekt kann man verschiedene Nachrichten auf der Konsole ausgeben lassen, während der JavaScript Code ausgeführt wird. Dabei kann man verschiedene Stufen wählen, wie z.B. console.debug(), console.info(), console.warn() oder console.error(). Diese Meldungen werden dann auch noch in unterschiedlicher Farbdarstellung in der Konsole kenntlich gemacht.

Außerdem besitzt FireBug noch viele weitere wichtige und nützliche Funktionen. So kann man sich detailiert den Request anschauen, der bei Ajax gesendet wird. FireBug liefert auch eine sinnvolle JavaScript command line, um schnell kleine JavaScript Schnipsel ausführen zu können. Und über die verschiedensten Inspektoren können alle möglichen Aspekte von HTML, DOM, CSS und JavaScript genau betrachtet werden.

Ich finde das FireBug ein "Must Have" Tool für Webentwickler ist. Es läßt sich leicht als Erweiterung in den aktuellen Firefox 1.5 Browser integrieren.

cloneNode() Problem bei TextAreas im Firefox

Bei einem aktuellen Projekt benötigte ich eine Möglichkeit, bestimmte Inhalte einer Webseite zu Drucken. Dazu habe ich mir per JavaScript einen Bereich der Seite genommen, diesen geclont, ein neues Fenster geöffnet und dort den geclonten Bereich wieder eingefügt.

Falls sich in diesem geclonten Bereich interaktive Elemente wie Butons, Links oder Eingabefelder befanden, habe ich diese ebenfalls mittels JavaScript entfernt oder den Textinhalt der Eingabefelder bzw. Textareas kopiert und als Text an die gleiche Stelle wieder eingefügt. Als Ergebnis gibt es dann eine HTML Seite ohne Links und Buttons.

So weit so gut, aber da gibt es ein Problem, welches mir vorher noch nicht bewußt war und was ich auch noch nirgendwo dokumentiert sah. Wenn man im Firefox eine Textarea clont in welche der User zuvor noch Inhalte eingegeben hat, werden diese Inhalte nicht mitgeclont. Im Internet Explorer funktioniert dies richtig. Ich habe dazu mal eine Testseite erstellt, wo man dieses Verhalten nachprüfen kann. Getestet habe ich es zur Zeit nur im Firefox 1.5!

Node.cloneNode() Test

Ich werde mal weiter nachforschen, ob dies ein gewolltes Verhalten von den Firefox Entwicklern ist, oder ob es dafür schon Bugeinträge in Bugzilla gibt.

Yahoo! stellt User Interface Library zur Verfügung

Heimlich, still und leise mausert sich Yahoo! immer mehr zum besten Freund des Webentwicklers. Im Yahoo! Developer Network werden nach und nach immer mehr Services für Entwickler bereitgestellt, um z.B. auf Bookmarks von del.icio.us oder Bilder von Flickr zugreifen zu können. Beide Seiten wurden vor kurzem von Yahoo! aufgekauft.
Nun hat Yahoo! auch eine JavaScript Bibliothek (Yahoo! User Interface Library) bereit gestellt, welche Entwickler beim Erstellen von Ajax Anwendungen unterstützen soll. So sind zum Beispiel Funktionen enthalten um Trees zu erstellen.
Weiterhin stellt Yahoo! eine Design Pattern Library online, auf der Hilfestellungen zu Verschiedenen Benutzeroberflächen Problemen gegeben werden.
Google sollte sich warm anziehen. Da ist etwas im Kommen.

Wirklich einfache JavaScript Tooltips

UPDATE: Eine neue cross-browserfähige Version dieses Scriptes könnt ihr hier finden: Ein einfacher Cross-Browser Tooltip mit JavaScript und CSS.

Heute möchte ich euch zeigen wie man mit wenig JavaScript sehr ansprechende Tooltips erstellen kann, die sich beliebig mit CSS formatieren lassen und deren Inhalt man mit HTML gestalten kann. Bei anderen im Netz erhältlichen Tooltip Scripten sind dafür häufig viele Zeilen Code notwendig. Ich habe jedoch versucht den Code so gering wie möglich zu halten. Worauf außerdem Wert gelegt werden sollte, ist die volle Funktionalität sowohl im Internet Explorer als auch im Mozilla. Und nicht zu vergessen eine hohe Ausführgeschwindigkeit!

Für den Tooltip benötigter HTML Code

Wir nehmen an, dass wir auf unserer Seite einen Link haben bei dem ein Tooltip erscheinen soll, wenn jemand mit der Maus darüber fährt. Wie ein Link aussieht weiß sicher jeder:

Ein Link

Den Tooltip selber definieren wir irgendwo auf der Seite, indem wir ein <div> Element erstellen und dieses mit Text füllen:
Weiterlesen →