2010 »August» Yahoo! User Interface Blog (YUIBlog)

YUI Theater - Douglas Crockford: "Crockford über JavaScript - Szene 6: Loopage" (52 min.)

30. August 2010 um 15.47 Uhr von Eric Miraglia | In YUI Theater | 8 Kommentare

Douglas Crockford der neueste Teil der " Crockford auf JavaScript "-Serie, ein Gespräch, in dem er deckt die Rolle des Event-Loops und die Bedeutung von Server-Side JavaScript, gibt es jetzt auf Video. Flash-Video ist unten eingebettet, oder Sie können die HD-Videos (480p ~ 370 MB) herunterladen . Video von den ersten fünf Vorträge finden Sie auf der Seite Crockford auf JavaScript .

Andere Recent YUI Theater Videos:

Nicholas Zakas und Victor Tsaran: Barrierefreiheit auf der Yahoo Homepage - Nicholas Zakas, ein Hauptentwickler der Yahoo! Homepage, und Victor Tsaran das, Yahoo! 's Senior Manager Zugänglichkeit, diskutieren die Strategien und Methoden, die eine der am meisten besuchten Websites in gemacht die Welt voll zugänglich. Der Vortrag fand im Juni 2010 BayJax Meetup bei Yahoo.
Dennis Lembree: Making JavaScript Accessible - Dennis Lembree, ein Experte Zugänglichkeit und der Schöpfer der AccessibleTwitter diskutiert die Herausforderungen der Herstellung JS-fähige Websites zugänglich. Der Vortrag fand im Juni 2010 BayJax Meetup bei Yahoo.
Ryan Dahl: Einführung in die NodeJS - Ryan Dahl, der Schöpfer von NodeJS, stellt das Projekt und spricht über Performance-Verbesserungen und neue Architektur. Der Vortrag fand im Mai 2010 BayJax Meetup bei Yahoo.
Elijah Insua: jsdom: ein CommonJS Implementierung des DOM - Elijah Insua führt eine Server-seitige Implementierung der JavaScript-DOM im Mai 2010 BayJax Meetup bei Yahoo.
Nicholas Zakas, Stoyan Stefanov, Ross Harmes, Julien Lecomte, Matt Sweeney: High Performance JavaScript - Fünf Beiträge zur High Performance O'Reillys JavaScript discuss erweitertem JavaScript und DOM-Scripting Optimierungen am April 2010 BayJax Meetup bei Yahoo.

Abonnieren von YUI Theater:

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

Introducing Yeti: Das YUI einfaches Testen Schnittstelle

25. August 2010 um 15.16 Uhr von Reid Burke | In Entwicklung | 16 Kommentare

Testen Sie JavaScript ist eine wichtige, aber oft übersehener Teil der Web-Entwicklung. Ein Grund dafür ist, weil die Entwicklung für das Web bedeutet Targeting mehr als ein Browser. YUI derzeit klassifiziert 11 verschiedene Umgebungen , die unsere höchsten Support-Level zu genießen. Darüber hinaus haben wir auch testen, YUI auf Emerging X-Grade-Umgebungen wie mobile Geräte. Wenn Sie so viele verschiedene Umgebungen zu unterstützen haben, ist es verlockend, wählen Sie einfach ein paar wichtige Bilder zu entwickeln, mit lokal und das Beste hoffen.

Bei Yui, verwenden wir Selen und Hudson für die Ausführung von YUI-Test -basierte Unit-Tests auf verschiedenen Browser-und Betriebssystem-Konfigurationen als Teil unserer Strategie, kontinuierliche Integration. Das ist großartig für den Fang von Problemen, die sich aus der Integration Ihrer Arbeit mit dem Rest eines komplexen Software-Stack. Es kommt mit einem Preis: CI-Tools wie diese sind kompliziert einzurichten und zu pflegen. In jedem Fall haben sie dir nicht helfen, während Sie mit der Entwicklung und Erprobung Code sind bevor Sie sich verpflichten.

Heute bin ich gespannt, loslassen Yeti 0.1.0, ein experimentelles Kommandozeilen-Tool entwickelt, um Cross-Browser-Test einfacher, bevor Sie eine einzige Zeile Code zu begehen.

Yeti startet automatisch JavaScript-Unit-Tests in einem Browser und meldet die Ergebnisse ohne aus dem Terminal. Es ist sehr einfach zu bedienen: einfach laufen lassen yeti test.html , um die Ergebnisse des YUI Test-basierter Test bekommen in test.html . Sie können passieren mehrere HTML-Dokumente auf mehrere Komponenten auf einmal zu testen.

 $ yeti dom/tests/dom.html attribute/tests/attribute.html json/tests/json.html ✔ DOM Tests from Safari (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16) 20 passed 0 failed ✔ Y.JSON (JavaScript implementation) from Safari (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16) 68 passed 0 failed ✔ Attribute Unit Tests from Safari (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16) 106 passed 0 failed 194 tests passed! (3217ms)

Die wahre Stärke von Yeti wird die Ausführung von Tests in mehreren Browsern gleichzeitig. Obwohl Yeti können Ihre Tests ein-by-one auf Ihrem Computer zu öffnen, ermöglicht Yeti Sie Tests auf jedem Browser auf jedem Gerät laufen, alles zur gleichen Zeit.

Wenn Sie Yeti ohne Argumente ausführen, wird es einen Web-Server zu starten, dass Sie bei Zugriff http://localhost:8000 . Sie können dann zeigen Browsern oder Geräten in Ihrem Netzwerk auf diese URL und jeden Test, den Sie laufen von diesem Punkt wird auf allen Browsern Besuch der Testseite ausgeführt werden.

Wenn kombiniert mit der exzellenten localtunnel sind Firewalls zwischen Ihnen und anderen Computern weniger schmerzhaft. Wenn Sie nicht gerade arbeiten mit sensiblen Informationen, es ist ein einfacher Weg, um Ihren Yeti im Internet verfügbar:

 $ localtunnel 8000 Port 8000 is now publicly accessible from http://example.localtunnel.com

Sie können dann auf diese URL zugreifen, um Yeti und starten Sie die Ausführung von Tests:

Dies ist besonders nützlich für die zelluläre Geräte: Sie können Ihre Träger der Internet-Verbindung, ohne dass Sie Ihr Gerät auf dem gleichen Netzwerk wie Ihr Computer zu bekommen Entwicklung zu nutzen.

Yeti zielt darauf ab, JavaScript Tests einfacher, aber es ist bei weitem nicht vollständig. (Nehmen Sie nicht die Versionsnummer 0.1.0 die leichte Schulter.) Übernimmt Yeti Sie verwenden YUI Test, wurde nur auf Mac OS X getestet worden, und möglicherweise nicht mit einigen Arten von Test-Szenarien arbeiten. Trotz dieser Unzulänglichkeiten hat Yeti war es so nützlich, dass wir intern wollte nicht länger warten, um es mit dem YUI-Community zu teilen.

Anreise Sie den Code

Yeti ist auf GitHub und bot unter BSD-Lizenz YUI .

Installieren

Yeti ist komplett in JavaScript geschrieben und läuft auf der Oberseite NodeJS . Wenn Sie bereits eine NodeJS bist und NPM- Anwender, die Installation ist sehr einfach:

 $ npm install yeti@stable

Wenn Sie nicht NodeJS und NPM installiert haben und du bist auf einem aktuellen Mac, können Sie trotzdem installieren Yeti mit einer komfortablen Installer.

Laden Sie die Yeti 0.1.0 Installer 2.7 MB
Benötigt Mac OS X 10.6 und einen Intel Core 2-Prozessor oder besser

Wenn Ihr Computer nicht erfüllt Anforderungen des Installateurs, können Sie immer noch Yeti, wenn Sie in der Lage, NPM installieren sind. Weitere Installations-und Anwendungshinweise sind erhältlich in Yetis README .

Ihre Teilnahme ist willkommen

Yeti ist das erste Projekt ins Leben gerufen haben wir in YUI Labs , ein Umbrella-Kategorie, wo unsere neue Ideen und Initiativen Gestalt annehmen wird. Als solcher wird Yeti nicht das gleiche Maß an Unterstützung wie unsere anderen Projekte angeboten. Wir empfehlen Ihnen, immer noch Fragen zu stellen und Feedback in den Foren von Yeti und hoffen Yeti macht das Testen einfach und macht Spaß. Wenn dies nicht der Fall, bitte sagen Sie uns , schicken Sie einen Fehlerbericht oder zu prüfen, einen Beitrag zur Yeti .

Viel Spaß beim Testen!

Über den Autor: Reid Burke ( @ Reid ) ist das neueste Mitglied der YUI-Team. Er liebt abscheulichen Monstern und Schnee JavaScript.

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

Die Entwicklung von behindertengerechten Sterne-Bewertungen Widget

24. August 2010 um 9:00 Uhr von Thierry Koblentz | In Barrierefreiheit , Entwicklung | 18 Kommentare

Haben Sie es eilig? Skip to the Demo-Seite .

Viele E-Commerce-Sites, Social-Networking-Dienste und Online-Communities beinhalten Bewertung oder Beurteilung Funktionen. Soliciting die Meinung der Leute hat sich auch zu einem Geschäftsmodell, es gibt jetzt auch Websites gewidmet Rating Produkte, Dienstleistungen, Geschäfte und vieles mehr.

Die häufigste Schnittstelle verwendet, um anzuzeigen Stimmen ist das "Sterne-System", in denen eine bestimmte Anzahl von Punkten (oft als Sterne ausgedrückt) auf einen Posten von jedem Gutachter zugewiesen wird. Wir finden dieses Modell an vielen Standorten, von Amazon zu Yelp.

Abbildung A. Sternebewertung Beispielen aus Amazon und Yelp .

Wie Abbildung A zeigt, sind beide visuelle Schnittstellen ähnlich, aber was macht diese beiden Lösungen interessant ist ihre Basis-Markup. Man verlässt sich auf <map> , die andere auf <img> .

Man könnte denken, dass die meisten Rating-Systeme würden auf irgendeiner Markup bewiesen, dass semantische und "operational" über viele Anwenderprogramme gestützt werden - das heißt, dass Rating-Systeme zu einem bestimmten Satz von HTML-Elemente und Attribute, die man trifft Verhalten beruhen würde und Stil über JS und CSS. Das würde Sinn machen, aber es ist weit von der Wahrheit. Wenn es um die Markup kommt, versuchen Autoren so ziemlich alles:

<a> ,
<img> ,
<span> ,
<li> ,
<map> ,
<div> ,
<input> ,
und mehr ...

Der Fall von Microformats

Vor der Vorstellung ein paar Image-basierte Techniken zur Markierung Bewertungen, ich denke es ist erwähnenswert, eine grundlegende und einfache Ansatz (von Microformats ), die Zeichen setzt:

 <abbr class="rating" title="3 stars">***</abbr>

Pros: Es ist unkompliziert und semantischen.; Das Markup ist minimal.; Die Methode ist nicht abhängig von CSS.; Die Methode ist nicht angewiesen auf die Bilder.; Es gibt keine HTTP-Anforderung.
Cons: Es ist unmöglich, halbe Werte (dh 3,5 Sternen) repräsentieren; Es "funktioniert" nur mit Sternchen ("Sterne").; Screen-Reader, die standardmäßig Abkürzungen nicht (was nicht eine große Sache in diesem Fall sein).

Hinweis: Ich verwende "*" statt ★ (★), da Screen-Reader (mindestens JAWS und NVDA ) in HTML-Entitäten zu ignorieren scheinen.

Markup für die Anzeige bildbasierte Bewertungen

Wenn es um die Darstellung von Bildern geht, haben Autoren viele Möglichkeiten.

Ein Bild pro Rating

Mit einem einzigen Bild:

 <img src="4stars.png" alt="4 out of five">

Ein Stern
Zwei Sterne
Drei Sterne
Vier Sterne
Fünf Sterne

Pros: Mit einem Bild pro Rating ist unkompliziert und semantische.; Die Methode ist nicht abhängig von CSS.; Minimal-Markup.
Cons: Es schafft viele HTTP-Anforderungen, da es viele verschiedene Bilder sind.; Auf der Oberseite des Performance-Problem, kann es ein Albtraum sein, wie Autoren mit mehr Vermögen umzugehen (Bilder zu erstellen, um zu einem EUR zu drücken, zu modifizieren, wenn vor Ort Farben ändern, etc.) haben.; Textauswahl ist nicht in Opera (zumindest in der Version 9.52) möglich, da der alternative Text wird ignoriert

Ein Bild pro Einheit

Von der WHATWG 's Working Draft :

 <img alt="4 out of 5" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="no-star.png">

Ein Stern
Zwei Sterne
Drei Sterne
Vier Sterne
Fünf Sterne

Pros: Mit Hilfe von zwei img -Elemente pro Rating verringert die Anzahl der HTTP-Requests.; Die Methode ist nicht abhängig von CSS.
Cons: In Opera, wenn Bilder deaktiviert sind, ist alternativen Text nicht wählbar, und (in kleinen Bildschirm-Ansicht) wird dieser Text mit einer Grenze, die es weniger gut lesbar macht gerendert.

Beachten Sie, dass diese aus einem umstrittenen Arbeitsentwurf genommen wird. Meiner Meinung nach, ist dieses Verfahren nicht akzeptabel, da der alternative Text nicht beschreibt das Bild genau und prägnant. Außerdem, wenn die Grundlage dieses Ansatzes ist, dass diese Bilder Inhalt darstellen, warum dann verlassen einige von ihnen ohne alt -Text?

Auf Ajaxian , zum Beispiel, wird der Autor mit alternativen Text mit jedem einzelnen Bild, das sehr viel Sinn macht, wenn er, dass jeder Inhalt ist der Auffassung:

 <img [snip] alt="+" src="star1.png"/> <img [snip] alt="+" src="star1.png"/> <img [snip] alt="+" src="star1.png"/> <img [snip] alt="-" src="star0.png"/> <img [snip] alt="-" src="star0.png"/>

In jedem Fall, egal wie viele Bilder, wie es Sterne im Vergleich mit einem einzigen Element (eine gibt img oder etwas anderes) hat den Hauptvorteil der Erleichterung Abstimmungsmechanismen - wo ein Benutzer wählt einen der Sterne, um seine Stimme abzugeben. Also sollten wir dies im Auge behalten ...

Ein Sprite für Hintergrundbilder

Die folgende Technik ist eine Anpassung der Strategie umgesetzt ursprünglich von den Entwicklern bei Yahoo! Musik :

Markup

 <span class="rating r1 stars">1 of 5</span> <span class="rating r2 stars">2 of 5</span> <span class="rating r3 stars">3 of 5</span> <span class="rating r4 stars">4 of 5</span> <span class="rating r5 stars">5 of 5</span>

CSS

 .stars { background: transparent url(img/sprite.png) no-repeat; } .rating { font-size: 0; height: 19px; overflow: hidden; vertical-align: middle; width: 96px; display: block; } .r1 { background-position: -385px 0; } .r2 { background-position: -288px 0; } .r3 { background-position: -192px 0; } .r4 { background-position: -96px 0; }

Ein Stern: 1 von 5
Zwei Sterne: 2 von 5
Drei Sterne: 3 von 5
Vier Sterne: 4 von 5
Fünf Sterne: 5 von 5

Pros: Diese Methode erfordert einen einzelnen HTTP-Anfrage, wie es auf einem einzelnen Sprite Bild setzt.; Minimal "Fußabdruck".
Cons: Der Inhalt wird nicht mit Bildern aus offenbart.; Nichts zeigt, wenn die Seite gedruckt wird (ein Druck-Stylesheet könnte Pflege dieser Frage).; In Opera, macht der hohe Kontrast Stylesheet alle Sterne verschwinden, das gleiche gilt in wahre High Contrast Modus Optimierung .; Textauswahl ist möglich, aber es ist nicht offensichtlich (via Hervorhebung).

Ein Sprite im Markup

Dieser Ansatz basiert auf der TIP-Methode , die eine nutzt Sprites Bild als <img> Element anstelle eines Hintergrundbildes:

Markup

 <span title="1 of 5" class="rating r1"><img width="0" height="1" src="sprite.gif" alt=""/>1 out of 5</span> <span title="2 of 5" class="rating r2"><img width="0" height="1" src="sprite.gif" alt=""/>2 out of 5</span> <span title="3 of 5" class="rating r3"><img width="0" height="1" src="sprite.gif" alt=""/>3 out of 5</span> <span title="4 of 5" class="rating r4"><img width="0" height="1" src="sprite.gif" alt=""/>4 out of 5</span> <span title="5 of 5" class="rating r5"><img width="0" height="1" src="sprite.gif" alt=""/>5 out of 5</span>

CSS

 .rating { position: relative; height: 1.6em; width: 8.1em; overflow: hidden; vertical-align: middle; display: block; } .rating img { position: absolute; width: 40.5em; height: 1.55em; top: 0; border: 1px solid #fff; } .r1 img { right: 0; } .r2 img { left: -24.4em; } .r3 img { left: -16.2em; } .r4 img { left: -8.1em; }

Ein Stern: 1 von 5
Zwei Sterne: 2 von 5
Drei Sterne: 3 von 5
Vier Sterne: 4 von 5
Fünf Sterne: 5 von 5

Pros: Diese Methode erfordert einen einzelnen HTTP-Anforderung.; Diese Technik ist die einzige der vier oben genannten Methoden, die Inhalte enthüllt, wenn Firefox-Nutzer "Bilder ausblenden" oder "Bilder machen unsichtbar" (aus der Entwickler-Toolbar) zu wählen.; Wenn Bilder nicht verfügbar sind, ein rotes "X" erscheint nur in der höchsten Bewertung (dh 5 von 5) statt in einem jeden, wie es der Fall mit anderen Lösungen, die sich verlassen ist img -Elemente.
Cons: Die Anzeige der Bilder ist abhängig CSS.

Es ist erwähnenswert, dass im Gegensatz zu anderen Image Replacement Techniken erlaubt diese Methode:

Bilder zu skalieren, je nach Text-Format-Einstellungen.
Bilder gedruckt werden.
alternativen Text auf einfache Weise gewählt werden, wie das gesamte Bild erscheint hervorgehoben (Firefox).
das Bild nicht in einem High-Kontrast-Einstellung / Stylesheet verschwinden.
Alternativtext Auswahl in Opera (wenn Bilder deaktiviert sind).
randlose alternativen Text in kleinen Bildschirm Opera Sicht.

Markup, um Stimmen

Beginnend mit einer nativen Mechanismus

Um Stimmen, brauchen wir eine Low-Level-Voting-Mechanismus, die einfache Benutzeroberfläche ermöglicht die Auswahl und Unterwerfung. Dazu können wir auf über ein Formular mit Etiketten und Kontrollen verlassen:

Markup

 <fieldset> <legend>Rating</legend> <label><input type="radio" name="movie" value="1_5">1/5</label> <label><input type="radio" name="movie" value="2_5">2/5</label> <label><input type="radio" name="movie" value="3_5">3/5</label> <label><input type="radio" name="movie" value="4_5">4/5</label> <label><input type="radio" name="movie" value="5_5">5/5</label> </fieldset>

Folge

Hinzufügen von Pausen und Leerzeichen

Zur besseren Lesbarkeit, fügen wir <br> und Leerzeichen.

Markup

 <fieldset> 
 <legend>Rating</legend> <label><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label><input type="radio" name="movie" value="4_5"> 4/5</label><br> <label><input type="radio" name="movie" value="5_5"> 5/5</label> </fieldset>

Folge

Einführung in das Sprite-Bild im Markup

Bei dieser Lösung werden wir die Verwendung einer kleineren Sprite als die in dem obigen Beispiel. Es wird jetzt zusammen aus zwei einzelnen Sterne ("on" und "off").

Wir legen img -Elemente innerhalb der Etiketten. Wir nehmen an, sie werden keinen Wert ohne CSS-Unterstützung haben, damit wir "verstecken" sie, indem sie spezifische Dimensionen über ihre width und height Attributen. Beachten Sie, dass mit 0 mit beiden Attributen würde ein fehlerhaftes Bild in einigen UA s zeigen.

 <form ...> <fieldset> <legend>Rating</legend> <label class="one" title="1 out of 5"><input name="LandOf" value="1" checked="checked" type="radio"> 1/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="two" title="2 out of 5"><input name="LandOf" value="2" type="radio"> 2/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="three" title="3 out of 5"><input name="LandOf" value="3" type="radio"> 3/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="four" title="4 out of 5"><input name="LandOf" value="4" type="radio"> 4/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="five" title="5 out of 5"><input name="LandOf" value="5" type="radio"> 5/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> </fieldset> </form>

Beachten Sie, dass mit dem oben Markup, wir erwarten können (in den meisten Browsern) Feldauswahl via Etikett Auswahl.

Angesichts Barrierefreiheit

Leider, wie ist, schafft dies Markup Probleme in mindestens zwei Screen-Reader: JAWS und NVDA (siehe Testfall für diese Fehler). Das Problem ist auf die Verwendung eines verwandten title -Attribut und einer leeren Zeichenfolge für alternativen Text.

Der Workaround, um nicht zu verwirren die Nutzer von Screenreadern ist es, "Stars" als alternativen Text (mit alt ) und verwenden JavaScript, um einfügen title beim Mouseover.

Besser Markup

 <fieldset> 
 <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="4_5"> 4/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="5_5"> 5/5</label> </fieldset>

Folge

Styling

Giving Dimensionen des Bildes via CSS

Wir verwenden em , um das Bild zu wachsen oder je nach font-size schrumpfen.

Markup

Unverändert

CSS

 img { width:2.8em; height:1.4em; }

Folge

Wie Sie bereits sehen können, klicken Sie auf ein Bild, wählt den entsprechenden Radio-Button. Es besteht keine Notwendigkeit für Skriptsprachen wie implizite Kennzeichnung produziert dieses Verhalten (außer im IE).

Entfernen des Bildes von der Strömung

Styling das label mit position:relative und das Bild mit position:absolute mit top / left Werte ist genug, um zu verbergen input und Text innerhalb der Etiketten.

Markup

Unverändert

CSS

  label { 
    position: relative;
 } 
 img {
   width: 2.8em;
   height: 1.4em;
    position: absolute; 
    top: 0; 
    left: 0; 
 }

Folge

Angezeigte einem Stern pro Etikett

Wir Stil das Label so seinen Abmessungen entsprechen der Höhe und Breite eines einzelnen Sterns.

Markup

Unverändert

CSS

 label { position:relative;   height: 1.4em;
  width: 1.4em;
  overflow: hidden;
  display: block; 
 }
 img {
   width: 2.8em;
   height: 1.4em;
   position: absolute;
   top: 0;
   left: 0;
 }

Folge

Zeige die Sterne horizontal

Wir entfernen die br s, und wir schweben die Etiketten.

Markup

Unverändert

CSS

  br {
  display: none;
 } 
 label {
   position: relative;
   height: 1.4em;
   width: 1.4em;
   overflow: hidden;
    display: block; 
    float: left; 
 }
 img {
   width: 2.8em;
   height: 1.4em;
   position: absolute;
   top: 0;
   left: 0;
 }

Folge

Anzeigen der Sprite Bild je nach Bewertung

Um eine "3 von 5" gesetzt Rating, wenden wir die gleiche Klasse auf die letzten beiden Labels. Diese Klasse wird verlegen die Position des Bildes innerhalb des Etiketts.

Markup

 <fieldset> <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label   class = "no_star"   > <img Src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type="radio" name="movie" value="4_5"> 4 / 5 </ label> <br>
 <Etikett   class = "no_star"   > <img Src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type="radio" name="movie" value="5_5"> 5 / 5 </ label>
 </ Fieldset>

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left; } img { width:2.8em; height:1.4em; position:absolute; top:0; left:0; }   . No_star img {
  links:-1.4em;
 }

Folge

Nicht allein unter Berufung auf Bild, um Informationen anzuzeigen

Es ist wichtig, eine Alternative zur Anzeige von Sternen bieten bei Bilder nicht verfügbar sind. Dies liegt daran, Labels und Radio-Buttons gestaltet werden, um auf der jeweils anderen zu sein. Eine einfache Lösung ist sich zu bewegen input und Text-off-screen (dh unter Verwendung von text-indent:-999em ) und tragen Sie eine Hintergrundfarbe auf den Etiketten.

Markup

Keine Änderung

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left;   Hintergrund: teal;
  margin-right: 1px;
  text-indent:-999em; 
 }
 img {
   width: 2.8em;
   height: 1.4em;
   position: absolute;
   top: 0;
   left: 0;
 }
  . No_star {
  background: # ccc;
 } 
 . No_star img {
   links:-1.4em;
 }

Hinweis:

text-indent behebt auch ein nach oben im Bild zu springen jedes Mal, wenn die Steuerelemente den Fokus erhalten.
der rechte Rand ist, um sicherzustellen, Hintergrundfarben erstellen Quadrate und Rechtecke nicht (das wäre mit benachbarten Etiketten die sich im selben Hintergrundfarbe passieren).

Folge

Schliff

Wir verwenden die Pseudo-Klasse :hover , einige Rollover-Effekt erstellen,
Wir verstecken das fieldset Grenze,
Wir verstecken die Legende,
Wir Stil des Cursors.

Markup

Unverändert

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left; background:teal; margin-right:1px; text-indent:-999em; } input { position:absolute; left:-999em; top:.5em; } img { width:2.8em; height:1.4em; position:absolute; top:0; left:0;   cursor: pointer; 
 }
 . No_star {
   background: # ccc;
 }
 . No_star img {
   links:-1.4em;
 }
  Label: hover {
  Opazität: 0,5;
  filter: alpha (opacity = 50);
 }
 fieldset {
  border: 0;
 }
 Legende {
  text-indent:-999em;
 }

Hinweis: label:hover wird von IE6 und Opera in der Hintergrundfarbe blutet durch die Bilder ignoriert. In der Demo-Seite , anstatt opacity , bin ich mit einem unterschiedlichen Sprite , die vier Staaten zeigt.

Folge

Anzeige der Bewertungen, ohne dass Benutzer-Interaktion

Wir können die Ratings "read-only", indem disabled und checked Attribute in den entsprechenden input Felder.

Markup

 <fieldset> <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"   deaktiviert   > 1/5 </ label> <br>
   <label> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type = "radio" name = "movie" value = "2_5"   deaktiviert   > 5.2 </ label> <br>
   <label> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type = "radio" name = "movie" value = "3_5" überprüft = "   geprüft   "> 5.3 </ label> <br>
   <label class="no_star"> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type = "radio" name = "movie" value = "4_5"   deaktiviert   > 5.4 </ label> <br>
   <label class="no_star"> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type = "radio" name = "movie" value = "5_5"   deaktiviert   > 5.5 </ label>
 </ Fieldset>

CSS

Die Regel mit :hover wurde entfernt

h4> Ergebnis

Eine bessere Berücksichtigung des Prozesses

An dieser Stelle ist es möglich, Stimmen ohne Script-Unterstützung gegossen, sondern sehende Benutzer haben keine Ahnung über ihre Auswahl. Also haben wir JavaScript verwenden, um:

Feedback an den Benutzer über seine Auswahl,
Tastatur geben Benutzern einen visuellen Hinweis, während sie durch die Radio-Buttons navigieren.

Zur gleichen Zeit, nutzen wir mithilfe eines Skripts einfügen title Attribute, die "Tooltips" schaffen wird, wenn Benutzer über die Aufkleber / Sterne schweben.

Wegen des Mangels an Feedback bezüglich Auswahl, ohne JavaScript, steuert man Stil Beschriftung und Formular nur, wenn es Skript-Unterstützung. Um das zu tun, damit wir Sie JavaScript, um eine Flagge auf dem Set zu verwenden html -Element und dann haben wir eine Regel erstellen, auf der untergeordneten Selektoren mit diesem Haken basiert. Wenn die Fahne fehlt, ist diese Regel keine Anwendung, und Elemente sind nicht gestylt.

Dies ist die Demo-Seite , das Endprodukt. Um zu sehen, wie diese Lösung nach diversen Einstellungen verhält, können Sie Ihre Lieblings-Entwickler-Tools verwenden, um Text-Größe zu erhöhen, brechen Bildpfade, deaktivieren Sie JavaScript, CSS-off schalten und vieles mehr ...

Einpacken

Coming up mit einem "akzeptablen" Lösung erfordert, um die Bedürfnisse der Nutzer, User Agents 'Eigenheiten, Anwenderprogramme' Einstellungen und vieles mehr zu identifizieren - was bedeutet, umfangreiche Tests.

In diesem Prozess ist der Nutzer Feedback wichtig, weil nach besten Praktiken ist nicht immer eine sichere Sache. Zum Beispiel, wie bereits erwähnt, setzen keinen Wert für die alt Attribut der Bilder innerhalb der Etiketten scheinen das sichere Sache zu tun, aber es stellt sich heraus, dass es Probleme mit mindestens zwei Screenreader (siehe schafft Testfall ).

Darüber hinaus lässt die Rückmeldungen von Hilfsgeräten 'Benutzer einige Validierung Fehlermeldungen ignorieren - wie die, dass die Firefox Accessibility Toolbar Berichte (nach http://bestpractices.cita.uiuc.edu/html/nav/form/ ).

Ziel war es hier nicht, um alles zu fixieren, though. Die Möglichkeit, Stimmen ohne ein Zeigegerät werfen war eine meiner Prioritäten, sondern die Verbesserung der Optik und der Lösung in Opera, wenn Bilder deaktiviert werden fühlen, ist nicht etwas, was ich für wesentlich halte.

Der interessanteste Teil dieser "Reise" war es, die Lösung zugänglich zu viele Nutzer unter verschiedenen Bedingungen zu machen, auf Fragen wie:

Bilder aus,
Javascript ausgeschaltet,
CSS aus,
eine Kombination der obigen.

Es ist auch schön zu wissen, dass diese Technik verlässt sich auf img -Elemente statt Hintergrund-Bilder, die die Sterne zu können:

Größe sich nach den Einstellungen des Benutzers,
zeigen in kontrastreichen Modus,
standardmäßig gedruckt werden (im Gegensatz zu Hintergrund-Bilder).

All dies geschieht ohne Performance-Einbußen, da diese Lösung stützt sich auf diese einzelnen Sprite:

Späte Suche nach

Ich habe kürzlich entdeckt das System Amazon für seine Stimmabgabe Seite aufgebaut hat. Es ist recht interessant, da sie eine andere Lösung in Abhängigkeit von Skript-Unterstützung dienen. Wenn es Script-Unterstützung, verwenden sie ein Bild <map> (interessanter Ansatz), wenn es kein Skript Unterstützung, die sie verwenden, Radio-Buttons. In beiden Fällen ist die Lösung zugänglich Tastatur Benutzer, und dies hilft, den Zugriff auf eine Funktion, die einen Kern Unterscheidungsmerkmal für die Amazon-Plattform ist zu maximieren.

Beachten Sie, dass sie nicht verwenden JavaScript, um die Radio-Buttons mit einem Bild ersetzen <map> , sondern verwenden sie noscript Elemente, in denen Tabellen-Markup enthält Optionsfelder.

"Out of the box"-Lösungen

Dreamweaver ^®: Spry-Widget Rating
YUI: Star Rating Script für YUI; Star Rating Script mit YUI
JQuery: Half-Star Rating Plugin; jQuery Ajax Rater; Simple Star Rating System; 5-Sterne-Rating-System in PHP, MySQL und jQuery
WordPress: GD Star Rating System für WordPress; GD Star Rating; Star Rating für Bewertungen
Blitz: 5-Sterne-Rating-System-Komponente
Misc.: Wie ein Sterne sein sollte; Starry Widget 2

Ein besonderer Dank

Besonderer Dank geht an Victor Tsaran und Todd Kloots für ihr wertvolles Feedback.

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

Bei der Bekanntgabe YUI 3.1.2: Critical Security Update für alle Benutzer YUI 3.1.x/3.2.0pr1

19. August 2010 um 12.35 Uhr von Eric Miraglia | In Entwicklung | Keine Kommentare

Die YUI-Team freigegeben YUI 3.1.2 heute. Dies ist ein wichtiges Sicherheits-Update für alle Nutzer von YUI 3.1.x und 3.2.0pr1. Wenn Sie Gastgeber YUI 3.1.x oder 3.2.0pr1 sind auf Ihrer Seite, oder wenn Sie YUI 3.1.x/3.2.0pr1 IOs Cross-Domain-Funktionalität zu nutzen, sind Sie betroffen.

XDR in YUI der IO-Dienstprogramm implementiert eine Flash-Transport als Fallback für Browser, die keine Unterstützung nativer XDR. Ein Fehler in unserer Implementierung des Flash-Fallback in YUI-Versionen 3.1.x und 3.2.0pr1 ermöglicht die io.swf Datei auf unsichere Weise zu betreiben, ob aus dem Yahoo! EUR oder von Ihrem eigenen Server bedient. Die Abhilfe für dieses Problem ist ein zweifaches:

Wenn Sie entfaltet die volle YUI 3.1.x/3.2.0pr1 Build-Verzeichnis auf Ihrem Server haben, ersetzen Sie build/io/io.swf in der betroffenen Version mit der Version 3.1.2 in YUI enthalten. Sie so, ob Sie verwenden Die IO-Dienstprogramm oder seine XDR-Funktion.
Wenn Sie mit der XDR-IO-Feature werden, ein Upgrade auf die Version 3.1.2 von io-swf behandelt die Sicherung Problem. Host-Version 3.1.2 von io.swf auf Ihrem eigenen Server (diese Datei kann nicht sicher betrieben von einem EUR, es wird nicht auf dem EUR ab 3.1.2 enthalten). Wenn Sie gezeichnet haben io.swf aus http://yui.yahooapis.com , entfernen Sie diese Domain von Ihrem crossdomain.xml -Datei.

Mehr Informationen zu diesem Thema finden Sie in den IO-Dienstprogramm Dokumentation .

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

Quick Edit-Modus für zwei DataTable YUI

19. August 2010 um 08.42 Uhr von John Lindal | In Entwicklung | 9 Kommentare

YUI 2 DataTable bietet slick Inline-Editing. Wenn disableBtns auf wird in der Spalte Konfiguration gedreht, Bearbeiten einfache Werte wie Strings oder Zahlen fühlt sich an wie Excel. Allerdings kann die Erfahrung nicht so reaktionsschnell wie eine Desktop-Anwendung, da jede Veränderung erfordert in der Regel ein XHR Aufruf an den Server zu speichern (oder ablehnen!) Den neuen Wert. Wenn der Benutzer braucht, um viele der angezeigten Werte zu ändern, kann es eine langsame und frustrierende Erfahrung sein. Um das zu lösen, entwickelte ich QuickEditDataTable. Dieser erstreckt sich DataTable zu Quick Edit-Modus, der alle editierbaren Werte in einem Großteil des Betriebs geändert werden können hinzufügen:

( Klicken Sie auf den Screenshot, um bei diesem Beispiel zu spielen .)

Überblick

Um Quick Edit-Modus zu gelangen, rufen Sie startQuickEdit() . Um Quick Edit-Modus zu beenden, rufen Sie cancelQuickEdit() .

Es ist Ihre Verantwortung, um die Änderungen zu speichern, bevor Sie sich cancelQuickEdit() . Um diese Aufgabe zu vereinfachen, stellt QuickEditDataTable getQuickEditChanges() . Dies gibt ein Array von Objekten, eines für jede Zeile. Jedes Objekt enthält nur die Werte, die in dieser Zeile geändert wurden, eingegeben von der Säule id. Zum Beispiel, wenn die Tabelle 4 Spalten (Titel, Autor, Jahr, Menge), und der Benutzer nur geändert werden, die Menge in einer Reihe auf 20, dann ist das Objekt für diese Zeile wäre {quantity:20} . Die anderen Werte würde entfallen.

QuickEditDataTable leicht erweitern kann YAHOO.widget.ScrollingDataTable , wenn Sie diese Funktionalität benötigen. Wenn Sie dies benötigen, machen Sie einfach eine Kopie der Quelldatei und ändern Sie die Basisklasse.

Konfiguration

Quick Edit is a modal state in which the cell formatters for editable columns are swapped out and replaced with special formatters that generate input , textarea , or select elements. Only columns that have quickEdit configuration will be editable. The configuration options are:

copyDown

If true, the top cell in the column will have a button to copy the value down to the rest of the rows.

formatter

The cell formatter which will render an appropriate form field: <input type=”text”>, <textarea>, or <select>. By default, the cell formatter YAHOO.widget.QuickEditDataTable.textQuickEditFormatter is used for all cells to produce input elements. To get a textarea element, configure a column to use YAHOO.widget.QuickEditDataTable.textareaQuickEditFormatter instead. You can also write a custom quick edit formatter — see below.

validation

Validation configuration for every field in the column.

css

CSS classes encoding basic validation rules:

yiv-required: Value must not be empty.
yiv-length:[x,y]: String must be at least x characters and at most y characters. At least one of x and y must be specified.
yiv-integer:[x,y]: The integer value must be at least x and at most y . x and y are both optional.
yiv-decimal:[x,y]: The decimal value must be at least x and at most y . Exponents are not allowed. x and y are both optional.

fn

A function that will be called with the DataTable as its scope and the cell's form element as the argument. Return true if the value is valid. Otherwise, call this.displayQuickEditMessage(...) to display an error and then return false.

msg

A map of types to messages that will be displayed when a basic or regex validation rule fails. The valid types are: required , min_length , max_length , integer , decimal , and regex . There is no default for type regex , so you must specify a message if you configure a regex validation. The default error messages for the other types are stored in YAHOO.widget.QuickEditDataTable.Strings and can be overridden and/or localized.

regex

Regular expression that the value must satisfy in order to be considered valid.

Sometimes, a non-editable column must be rendered differently during Quick Edit mode. The best example is a column containing a link, since navigating away from the page while in Quick Edit mode can be disastrous. To remove the link during Quick Edit, configure qeFormatter for the column to be YAHOO.widget.QuickEditDataTable.readonlyLinkQuickEditFormatter . For email addresses, use YAHOO.widget.QuickEditDataTable.readonlyEmailQuickEditFormatter . You can also write you own custom, read-only formatter. Simply follow the normal rules for constructing a DataTable cell formatter.

Custom Quick Edit Formatters

To write a custom cell formatter for QuickEdit mode, you must structure the function as follows:

function myQuickEditFormatter(el, oRecord, oColumn, oData) {
  var markup =
    '<input type="text" class="{yiv} yui-quick-edit yui-quick-edit-key:{key}"/>' +
    YAHOO.widget.QuickEditDataTable.MARKUP_QE_ERROR_DISPLAY;
    el.innerHTML = lang.substitute(markup, {
      key: oColumn.key,
      yiv: oColumn.quickEdit.validation ? (oColumn.quickEdit.validation.css || '') : ''
     });
    el.firstChild.value = extractMyEditableValue(oData);
    YAHOO.widget.QuickEditDataTable.copyDownFormatter.apply(this, arguments);
 };

You can use textarea or select instead of input , but you can only create a single field.

extractMyEditableValue() does not have to be a separate function nor must it be limited to using only oData . The work should normally be done inline in the formatter function, but the name of the sample function makes the point clear.

About the author: John Lindal ( @jafl5272 on Twitter) is one of the lead engineers constructing the foundation on which Yahoo! APT is built. Previously, he worked on the Yahoo! Publisher Network.

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

Using YUI 2 on the DuckDuckGo Search Engine

August 19, 2010 at 5:41 am by Gabriel Weinberg | In YUI Implementations | 2 Comments

DuckDuckGo is a search engine that uses YUI extensively. Here's what it uses in particular:

ImageLoader . Matt Mlinac's YUI 2 ImageLoader was the first thing I implemented and what originally hooked me on YUI for this project. DuckDuckGo has favicons next to results and often has “Zero-click Info” above results that usually includes an image . I didn't want these images to compete with the results when loading, as getting results as fast as possible is the ultimate goal.
The ImageLoader Utility handles this well by loading the images after the page load. DDG also auto-loads the next page of results when you scroll down. Sometimes the favicons icons are therefore hidden, and with ImageLoader their load is delayed (sometimes indefinitely) until necessary. To accomplish this, there is a different image group per (internal) page, each with its own custom trigger.
```
 div.event=new YAHOO.util.CustomEvent('it');
    var ig1=new YAHOO.util.ImageLoader.group(div,'click');
    ig1.addCustomTrigger(div.event);
    div.ig = ig1;
```
Cookie . DuckDuckGo has a lot of settings , which are stored via cookies and alternately via URL params . When cookies are used, I use Nicholas Zakas's YUI 2 Cookie Utility to easily get and set the values.
```
 YAHOO.util.Cookie.set(cookie, value, { expires: new Date("January 12, 2025") });
  x=ki||YAHOO.util.Cookie.get("i"); 
```
StyleSheet . Some DDG settings change the look and feel of the site. These changes are actually accomplished after page load via Luke Smith's YUI 2 StyleSheet Utility . Some of these changes are straightforward and I can just use the setStyle Dom function .
```
 YAHOO.util.Dom.setStyle('b2','display','block'); 
```
Others require actual class changes, which I use the utility to do.
```
 YAHOO.util.StyleSheet('DDG').set('.ci', {display: "block"}).
            set('.cid', {display: "block"}).
            set('.ci2', {display: "block"}).
            enable(); 
```
Dom . I also use some functions in Matt Sweeney's base YUI 2 Dom component . I referenced setStyle above, and I also use the related getStyle , addClass and removeClass functions. In addition, I find the getViewportHeight , getViewportWidth , getX and getY functions to be incredibly useful to make things work cross-browser, and now on mobile screens as well.
KeyListener . DDG has a bunch of keyboard shortcuts that let you navigate results without the mouse. I use the YUI 2 KeyListener component to enable these shortcuts.
```
 kl14 = new YAHOO.util.KeyListener(document, { keys:[70] }, { fn:not } );kl14.enable(); 
```
AutoComplete . I'm currently working on adding search suggestions to the search engine, and will be using Jenny Donnelly's YUI 2 AutoComplete component for the front-end. I understand that AutoComplete is getting introduced in YUI 3 soon. Everything else I use has already been introduced in YUI 3, though I still use YUI 2. However, I will be exploring the migration to YUI 3 soon.

About the author: Gabriel Weinberg is the founder of the DuckDuckGo search engine, based out of Valley Forge, PA. Gabriel has been a startup founder for over ten years, and his last company was sold in 2006. Gabriel holds degrees from MIT in Physics and the Technology and Policy Program.

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

Implementing YUI on the Assembla.com Agile Planner

August 18, 2010 at 6:35 am by Joachim Larsen | In YUI Implementations | Comments Off

Fast and fun – that was the user requirement for the new Assembla.com Agile Planner – an AJAX interface for adding development tasks, building story/feature outlines, and scheduling them into releases. We were lucky to have YUI 3 to make it fast and fun to implement as well.

I had used YUI 2 for a number of prior projects and I had been impressed by the engineering of the UI components and the underlying library infrastructure. I wanted to learn more about YUI 3, with its compact syntax and deeper focus on DOM manipulation and CSS3-style selectors. This project, with a low dependence on 'prebuilt widgets,' was a perfect opportunity to get my feet wet with YUI 3. The facilities for 'large app' implementation via custom modules and integration with YUI loader made it a natural choice.

The Agile Planner supports a number of drag and drop user interactions with multiple interaction groups and context based behaviors. At the same time, it handles a complex set of interactions with the server, including merging in new data from the server, and propagating changes to the server.

We improved on the existing Planner which was based on Rails handlers and Prototype.js. YUI's sandbox philosophy and strong OOP facilities made coexisting with Prototype.js a breeze.

We used a large number of YUI components, including:

Async-Queue to offer a responsive experience on a page that can involve 1000+ simultaneous tickets
Drag and Drop with interaction groups.
IO as a connection manager to queue and massage server interaction.
Event-delegate to allow simply hydrating html templates and forgetting about them.
Event-key for keyboard interaction and navigation.
Collection for giving us a consistent implementation experience across browsers.
Cookie for easy short-term UI persistence.
Profiler to find the biggest speed gains
YUI Doc to leave information for the rest of the team

Working with YUI 3 on an app like this has been fun, and I am looking forward to hearing what our users will urge us to do next!

About the author: Joachim Larsen is a frontend engineer with Assembla.com.

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

Nächste Seite »

Präsentiert von WordPress auf Yahoo! Web Hosting .

Andere Recent YUI Theater Videos:

Abonnieren von YUI Theater:

Anreise Sie den Code

Installieren

Ihre Teilnahme ist willkommen

Der Fall von Microformats

Markup für die Anzeige bildbasierte Bewertungen

Ein Bild pro Rating

Ein Bild pro Einheit

Ein Sprite für Hintergrundbilder

Markup

CSS

Ein Sprite im Markup

Markup

CSS

Markup, um Stimmen

Beginnend mit einer nativen Mechanismus

Markup

Folge

Hinzufügen von Pausen und Leerzeichen

Markup

Folge

Einführung in das Sprite-Bild im Markup

Angesichts Barrierefreiheit

Besser Markup

Folge

Styling

Giving Dimensionen des Bildes via CSS

Markup

CSS

Folge

Entfernen des Bildes von der Strömung

Markup

CSS

Folge

Angezeigte einem Stern pro Etikett

Markup

CSS

Folge

Zeige die Sterne horizontal

Markup

CSS

Folge

Anzeigen der Sprite Bild je nach Bewertung

Markup

CSS

Folge

Nicht allein unter Berufung auf Bild, um Informationen anzuzeigen

Markup

CSS

Folge

Schliff

Markup

CSS

Folge

Anzeige der Bewertungen, ohne dass Benutzer-Interaktion

Markup

CSS

Eine bessere Berücksichtigung des Prozesses

Einpacken

Späte Suche nach

"Out of the box"-Lösungen

Ein besonderer Dank

Überblick

Konfiguration

Custom Quick Edit Formatters

YUI-Bibliothek auf Twitter

Übersetzen

Syndikat

Aktuelle Beiträge

YUI-Bibliothek

Archiv:

Blogroll

Richtlinien für Kommentare

Werden Sie Yahoo!

Meta: