Yahoo! User Interface Blog (YUIBlog)

Aufbauend TipTheWeb mit YUI 3

5. Oktober 2010 um 09.35 Uhr von Eric Ferraiuolo | In Entwicklung , In the Wild , YUI-Implementierungen | Keine Kommentare

Über den Autor: Eric Ferraiuolo ist Direktor des TipTheWeb und Co-Founder von Oddnut Software . Er schreibt in seinem Blog: 925 HTML und kann auf Twitter zu finden: @ ericf . Eric war ein Top-Moderatorin bei YUIConf 2009 .

TipTheWeb ist ein neuer Service, dass die Menschen direkt unterstützen ihre Lieblings-Web-Inhalten durch Kippen es können. Zum Beispiel, wenn Sie eine große Blog-Eintrag zu finden, können Sie tip es 25 Cent.

TipTheWeb ist eine Non-Profit-Organisation zur Förderung von frei zugänglichen, qualitativ hochwertige Web-Inhalte durch die Vergabe von Verlagen, die Tipps. Wenn Sie online veröffentlichen, können Sie Ihre TipTheWeb Konto der Orte, die Sie veröffentlichen, um Tipps zu erhalten und Anspruch auf Auszeichnungen aus TipTheWeb erhalten Anspruch.

TipTheWeb die Verwendung von YUI 3

Die Benutzeroberfläche von TipTheWeb ist vollständig auf der YUI 3 aufgebaut (wir tranken die Kool-Aid.) Der Ansatz, den wir nahmen war es, YUI 3 als die Grundlage und Struktur für unsere JavaScript-Code verwenden. Wir haben 33 eigene YUI 3 Module gebaut (56, wenn Sie beinhalten Module, Plugins und Roll-ups), von denen einige wir trugen die YUI 3 Galerie: Component Manager , Markout , Overlay Extras und REST Ressourcen .

Page-Level-Klassen

Die Kernfunktionen von TipTheWeb auf einige wenige hoch-funktionale Webseiten, die mit dem Server über Ajax kommunizieren umgesetzt. Für jede dieser Seiten haben wir eine eigene YUI 3 Modul, dass eine Seite-level-Klasse verwendet, um Aktionen zwischen der funktionalen Teile der Seite koordinieren macht.

In einem unserer Anwendung der wichtigsten Seiten, die Tipps-Seite können Sie sehen, wie dieser Ansatz mit den Seiten-Klasse TipsWindow angewendet wird. Die wichtigsten funktionalen Teile der Seite sind die Widgets: CreateTip für die Erstellung von Spitzen verwendet, und die TipList Widgets für die Bearbeitung, Abbrechen und Finanzierung bestehender Spitzen.

A Lot of Overlays

Wir verwenden Y.Overlay s ausgiebig durch unsere Anwendung UI auf Benutzer-Interaktionen zu implementieren, dies ermöglicht es uns, die Schnittstelle Krempel-frei zu halten, während immer noch die Funktionalität für erweiterte Funktionen finden Sie auf der Seite. Wir benötigten Funktionen, die nicht in gebaut wurden Y.Overlay , so haben wir Overlay Extras , die in der YUI 3 Galerie ist und von vielen anderen YUI 3 versorgt Sites verwendet werden. Hier sind einige Ort, wo wir Overlays auf TipTheWeb:

Aktueller Stand der TipTheWeb

Wir würden uns freuen, Sie versuchen, aus TipTheWeb ; jetzt sind wir in invite-only Beta, so Anfrage eine Einladung auf unserer Seite und wir senden Ihnen eine Einladung Code.

Achten Sie darauf, unser Gespräch zu fangen YUIConf 2010 , wo wir präsentieren werden (mehr in die Tiefe) auf, wie wir mit YUI 3 und YQL bei TipTheWeb.

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!