jQuery
Freitag21. Oktober 2011

jQuery hat zweifelsfrei für viele Anwender und vor einigen Jahren auch für mich den Weg zum Verständnis von DOM Scripting und JavaScript geebnet. Insofern ist es wenig verwunderlich, dass mehr und mehr Lehrmaterial für jQuery auf den Markt kommt, welches sich gezielt an Einsteiger richtet und mit schnellen Ergebnissen begeistern will.

Das neueste Projekt in dieser Hinsicht ist ein sechsstündiger jQuery Video-Workshop von Gerrit van Aaken, der seit ein paar Tagen bei Undsoversity zum Kauf bereit steht und sich ausdrücklich an Einsteiger richtet. Um sich vor dem Kauf einen Eindruck vom Gebotenen verschaffen zu können, stehen insgesamt drei Kapitel (Events und EventListener, Inline-Bildergalerie und ein interaktiver HTML5-Videoplayer) mit einer Gesamtlänge von fast 2 Stunden (fast 1/3 der Gesamtlänge) kostenfrei auf YouTube bereit.

Aufgebaut sind die einzelnen Themenblöcke als Live-Coding Sessions in denen zu Beginn eine Aufgabe vorgestellt wird, die im Anschluss als “Blick über die Schulter” des Tutors mit HTML, CSS und eben jQuery (Anm: JavaScript sage ich hier bewusst nicht, denn JavaScript scheint kaum thematisiert zu werden) gelöst werden. Die Art und Weise der Präsentation finde ich von Konzept her gelungen und besonders interessant für Autodidakten (wie mich), die lieber durch Probieren als durch dumpfes Lesen neue Dinge lernen. Der Zuschauer kann die schrittweise Entwicklung des Programmcodes anhand konkreter Aufgabenstellungen miterleben und so dessen Logik sehr viel einfacher nachvollziehen, als beispielsweise aus einem spärlich kommentiertem, 2-seitigen Abdruck eines fertigen Quelltextes in einem Buch.

Den gesamten Beitrag lesen


Mittwoch18. März 2009

Vor etwas mehr als 8 Monaten hat dieses Webseite ein umfassendes Redesign erfahren. Damit einher ging ein Testballon, meine Eigenentwicklung einer dynamischen Kommentaransicht. Die Kommentare erscheinen jeweils rechts neben den Blogbeiträgen, ältere Kommentare werden dynamisch ausgeblendet, damit auch bei vielen Kommentaren kein Zaunlattenlayout (the long tail) entsteht, welches endloses Scrollen erfordert. Nach fast einem dreiviertel Jahre wird es Zeit, sich über die Zukunft dieses Features ein paar Gedanken zu machen.

Die dynamische Kommentaransicht wurde mit jQuery realisiert und blendet die jeweils neuesten 5 Kommentare ein. Ältere Kommentare werden dynamisch paginiert und können bei Interesse entweder in schrittweise (jeweils 5 Kommentare) oder vollständig aufgeklappt werden. Anfängliche Schwierigkeiten mit dem Anspringen der neuesten Kommentare von der Highresolution-Startseite waren schnell behoben. Ebenfalls bereits seit ein paar Monaten gibt es auch den von Alexander Farkas angeregten Yellow-Fade-Effekt, mit dem der angesprungene Kommentar kurzzeitig gelb hervorgehoben wird.

Im damaligen Relaunch-Artikel gab es insgesamt viel Lob aber auch einige kritische bzw. bedenkliche Stimmen, was die Position der Kommentare bzw. die ungewohnte Art der Präsentation angeht.

8 Monate später ist mein Resümee dieses Experimentes durchweg positiv. Ein Absinken des Kommentaraufkommens konnte ich nicht feststellen, das neue Bloglayout hat eher dafür gesorgt, dass viele neue Leser offensichtlich gern in diesem flexiblen Layout verweilen und durchaus auch gern und umfangreich kommentieren – obwohl ich durchschnittlich kaum mehr als 3 Beiträge pro Monat schreibe. Optisch hat die Lösung die gesetzten Ziele voll erfüllt, denn das Layout ist auf dein meisten Artikelseiten sehr gleichmäßig ausgelastet und die rechte Spalte läuft nicht mehr ins endlos nach unten. Meine Leser scheinen – zumindest ist das mein Eindruck – mit der Kommentaransicht gleichfalls gut zurecht zu kommen, denn Diskussionen innerhalb der Kommentare finden auch gelegentlich statt.

So gesehen, werde ich dieses Feature also beibehalten und möchte deshalb hier die Frage in den Raum stellen, ob grundsätzlich Interesse an einer Plugin-Lösung auf jQuery-Basis für die dynamische Kommentaransicht besteht? Der Quelltext befindet sich grundsätzlich in recht ordentlichem Zustand, sodass die Umwandlung in ein Plugin keinen zu großen Aufwand bedeuten würde. Allerdings stellt sich eben zuvor die Frage, ob überhaupt Interesse an dieser Darstellungsform besteht – nicht nur an einer exemplarischen Umsetzung sondern auch das Interesse, ein solches Plugin im eigenen Blog einzusetzen. Ich bin gespannt auf Eure Antworten.


Montag02. März 2009

Bereits vor reichlich 3 Wochen hat Dirk Ginader in seinem Weblog ein jQuery-Plugin zur Erstellung barrierefreier Tabboxen veröffentlicht und in einem umfangreichen deutsch- wie englischsprachigen Releasebeitrag auch einen tiefen Einblick in die Hintergründe seiner Lösung gegeben. Offenbar lesen noch viel zu wenig Leute Dirks Blog, denn bei den üblichen Verdächtigen (zumindest denen, die ich über meinen Feedreader überwache) blieb es weitgehend still.

Vor ca. 1,5 Jahren, im Sommer 2007 sprach ich Dirk Ginader per Skype auf ein kleines Problem an. Damals machte ich gerade meine ersten Schritte mit jQuery und wollte für das Redesign von YAML.de ein Tabscript verwenden, um mehrfach hintereinander aufgelistete Quelltextabschnitte aufgeräumter präsentieren zu können. Zu diesem Zweck sah ich mir verschiedene Tab-Lösungen (mit und ohne jQuery) an, die jedoch alle am gleichen Problem krankten.

Die Tabs funktionieren generell nur in Verbindung mit JavaScript. Dennoch erwarteten sämtliche existierenden Scripte von mir, den für die Tabreiter notwendigen Markup (UL-Liste) fest im Layout zu integrieren. Ich hielt das für unsinnig, denn zum Wesen von unaufdringlichem bzw. zugänglichem JavaScript gehört, dass Bedienelemente, die nur in Verbindung mit der JavaScript-Applikation benötigt werden, auch per JavaScript erzeugt werden sollten.

Daraus entstand folgende Idee: Man definiert einen Bereich der Webseite, welcher die Tabinhalte beinhaltet und definiert ein HTML-Element, welches als Trenner zwischen den Tabinhalten fungiert und den Namen des Tabreiters beinhaltet. Im einfachsten Fall wäre das Bereich aus gleichrangigen Überschriften und Absatztexten. Per JavaScript könnten aus den Überschriften die Tabreiter generiert werden. Die dazwischen befindlichen Absatztexte (oder was auch immer sich zwischen den Trennelementen befindet) würden als Inhalte der Tabs interpretiert und entsprechend gestaltet. Das Schöne daran: Ist JavaScript deaktiviert, so stört kein unsinniger Listenmarkup und die Tabinhalte präsentieren sich im normalen Textfluss der Webseite.

Mit dieser Idee trat ich also im Sommer 2007 an Dirk heran und es dauerte nur wenige Tage bis die erste Version des Plugins Gestalt annahm, die im Übrigen bis heute auf YAML.de in der Dokumentation der Subtemplates ihren Dienst tut. Schon lange hatten wir vor, dieses Plugin zu verfeinern und zusammen mit YAML zu veröffentlichen. Dass es dennoch bis ins Jahr 2009 gedauert hat - naja, sei es drum. Ein großer Teil der Verzögerung floss nämlich eben in die Verfeinerung des Plugins, über die Dirk in seinem Blog auch ausführlich berichtet. So ist es gerade bei den so gern auf modernen Webseiten verwendeten Tabs alles andere als trivial, diese wirklich barrierfrei zu gestalten. Nun hat Dirk bei Yahoo in London den besonderen Vorteil, mit Artur Ortega einen blinden Kollegen neben sich sitzen zu haben, und beide gemeinsam konnten die sich langsam entwickelnde Lösung nicht nur theoretisch durchdenken, sondern auch unmittelbar im Praxistest auf Herz und Nieren testen. Vielen Dank Euch beiden, wirklich eine reife Leistung.

Momentan stehe ich mit Dirk in Kontakt, um noch weitere Verbesserungen an seinem Plugin vorzunehmen. So soll das Script in der nächsten Version unabhängig von animierten Übergängen eine vollständige Druckausgabe aller Tabinhalte unkompliziert ermöglichen und eine optionale Synchronisierung der Containerhöhen der Tabinhalte möglich sein. Eine Anreicherung mit ARIA ist ebenfalls denkbar.

Übrigens: Auf die gleiche Art und Weise ließen sich auch zugänglichere Accordion-Boxen erstellen. Die Probleme dürften sich gleichen, ebenso wie der aufgezeigte Lösungsweg.


Montag16. Februar 2009

YAML kommt bereits seit einigen Versionen mit einem speziellen Debug-Stylesheet daher, welches einerseits ermöglicht, die Layoutstruktur zu visualisieren, andererseits auch darüber Auskunft gibt, ob die CSS-Datei iehacks.css im Internet Explorer korrekt eingebunden ist. Ebenfalls seit einiger Zeit liegt das Debug-Stylesheet dem Downloadpaket bei, sondern es konnte auch über ein kleines Bookmarklet in jede beliebige Seite eingebunden werden. So schön der Gedanke auch ist, so unübersichtlich ist das Ergebnis, wenn ein solches Debug-Stylesheet zuviele Informationen enthält. Deshalb habe ich im Verlauf der letzten Wochen YAML Debug vollständig überarbeitet und eine eigenständige Applikation daraus entwickelt.

YAML Debug Application Screenshot

Die neue Applikation basiert auf jQuery und wird per Bookmark auf jeder beliebigen Seite hinzugeladen. Die Funktionalität umfasst Informationen über den Rendering-Mode, die Anzahl eingebundener externer Stylesheets, Scripts und Bilder. Per Klick können veraltete Elemente oder auch Elemente mit Inline-Styles hervorgehoben werden. Ebenso ist es möglich, sich auf einen Klick einen Überblick über die Layoutstruktur (DIV-Verschachtelung) oder die semantische Auszeichnung der Inhalte direkt im Layout zu verschaffen. WAI-ARIA roles, states und properties können hervorgehoben werden, Relationen z.B. über aria-labelledby macht das Tool durch das Hovern mit der Maus über die jeweilige Eigenschaft sichtbar. Schließlich gibt YAML Debug auch Auskunft über alle eingebundenen Stylesheets. Alle externen Stylesheets können zudem deaktiviert, angezeigt oder direk an den Validierungsdienst des W3C gesandt werden.

Einen vollständigen Überblick über den Funktionsumfang gibt es auf der zugehörigen kleinen Microsite, die ich diesem Projekt spendiert habe. Von dort kann dann auch das Bookmarklet bezogen werden. Aus der Browserwelt werden momentan Firefox 3, Opera 9.x und Safari 3.x/Webkit voll unterstützt, wobei der Safari 3.x aktuell das Deaktiveren von per @import eingebundenen Stylesheets verweigert. Der Internet Explorer 7 erhält momentan nur eine sehr eingeschränkte Unterstützung. Hier habe ich mich aufgrund der doch umfangreichen Abweichungen vom Standard (sowohl bei CSS, als auch bei JavaScript) auf die Bereitstellung der Stylesheet-Infos beschränkt, um gerade bei YAML-basierten Layouts eine einfache Kontrolle der korrekten Einbindung der Patch-Dateien zu ermöglichen. Auf die JS-Nachprogrammierung der ansonsten per CSS funktionierenden Hervorhebungsoptionen habe ich zunächst verzichtet, da es sich bei YAML Debug um ein Markup-Analysetool handelt und dieser ist im Normalfall in allen Browsern identisch. Demzufolge sollte man für seine Tests einen der o.g. voll unterstützten Browser verwenden.

Ich wünsche Euch viel Spaß mit dem Tool und freue über jegliches Feedback, sowohl hier in den Kommentaren als auch über die Projektseite.

Für Feedback (Meinungen, Bugmeldungen oder Wünsche für weitere oder verbesserte Funktionen) habe ich auf der Projektseite ein Kontaktformular eingerichtet, von welchem ihr hoffentlich rege Gebrauch macht. Die aktuelle Version 0.9 ist noch im Betastadium und ich möchte durch den öffentlichen Test mehr Informationen und vor allem Featurewünsche sammeln, um das Tool Schritt für Schritt zu vervollständigen. Ab YAML 3.1.1 wird es im Übrigen auch das bisherige debug.css ablösen.

Nachtrag: Als Spielwiese eignen sich besonders gut die YAML-Layoutbeispiele oder die Seite Einfach für Alle, die bereits mit WAI-ARIA angereichert ist und sich daher die Funktionalität des Tools dort sehr schön testen läst.


Donnerstag16. Oktober 2008

Morgen Abend gehts zum Barcamp nach Berlin. Ich habe vor, dort eine Q&A (Questions & Answers) Session zu YAML zu halten. Dazu werde ich mir einige häufig gestellte Fragen aus dem Forum herauspicken und hoffe natürlich gleichsam auf Fragen der Sessionteilnehmer, schließlich soll das kein langweiliger Vortrag werden.

Weiterhin habe ich auch eine jQuery-Session geplant, in welcher live ein kleines Plugin entstehen wird. Wer von Euch Lesern sich also ebenfalls am WE auf dem Barcamp herumtreibt und Fragen hat, sprecht mich an. Ich freu mich drauf.


Seite 1 von 3 Seiten

 1 2 3 >