Yahoo! User Interface Blog (YUIBlog)

YUI: Öffnungszeiten Do 1. September

30. August 2011 um 10:53 Uhr von Luke Smith | In Entwicklung , Öffnungszeiten | 2 Kommentare

YUI Loader und Seed-Datei ändert, plus Loader Tipps und Tricks

Zurück Anfang Juli, Dav Glass veröffentlicht einen Artikel über Änderungen in den Loader und Seed-Dateien in 3.4.0. Es gab ein paar Fragen in den Kommentaren und einigen anderen im Forum und # yui-Kanal auf Freenode IRC , also wollte ich Dav auf die Hupe zu bekommen für ein öffentliches Q & A.

Ich erwarte nicht, das wird die ganze Stunde in Anspruch nehmen, obwohl, so nach, dass, wir werden über Loader Best Practices und Tipps und Tricks zu sprechen. Je nach Zeit, sind einige Dinge, die ich in der Hoffnung, mich zu decken:

• Wie können Sie holen nicht-Loader YUI-Dateien
• Einrichten Modul-Gruppen, und die vielen Vorteile des Einsatzes von ihnen
• Hosting und der auf Ihre eigene Combo-Service
• Wie wirkt sich jede Config wo Loader für Ihre Dateien sucht

Wenn Sie Fragen zu brennenden Loader haben, haben einen Trick, den Sie freigeben möchten, oder noch nicht klar, wie genial Loader ist, please join us!

Zeit & Details

Diese Woche werden wir die Sitzung ganz zu hosten auf Adobe Connect, einschließlich der Audio. Wir verwenden die Connect-Chat Fragen zu verwalten oder zu verwenden Connect in Audio-Unterstützung gebaut für vertiefende Gespräche.

Wir werden in der Online- Raum Öffnungszeiten von 10.00 bis 11.00 Uhr PDT am Donnerstag.

Aktualisieren

Die Aufnahme ist verfügbar auf unserem YouTube-Kanal .

Finden Gespräche: Bloglines | technorati

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

Nominieren YUI für die Open Source Awards 2011!

23. August 2011 um 04.58 Uhr von Jenny Donnelly | In Miscellany | 4 Kommentare

Wenn Sie YUI (und wir hoffen, Sie tun!) Lieben, werfen Sie bitte einen Moment Zeit, um uns zu nominieren für die Open Source Awards 2011 , gesponsert von Packt Publishing. Achten Sie darauf, um unsere glänzenden neuen Website unter Punkt http://yuilibrary.com !

Die Nominierung Form offen ist jetzt durch 9. September.

Finden Gespräche: Bloglines | technorati

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

Bei der Bekanntgabe YUI 3.4.0 und das neue YUILibrary.com

18. August 2011 um 08.54 Uhr von George Puckett | In Entwicklung | 19 Kommentare

Die YUI-Team hat nicht eine, sondern zwei Ankündigungen zu teilen heute. Erstens haben wir eine komplett überarbeitete gestartet YUILibrary.com . Die neue Website ist ein Grund auf umzuschreiben, der einheitliche Anlaufstelle für diese YUI Dokumentation, eine saubere Benutzeroberfläche und intuitiver Organisation auf einem robusten neuen Architektur. Nehmen Sie sich Zeit, um sich umzusehen. Wir hoffen, dass Sie sehr zufrieden sein mit dem, was Sie sehen.

Darüber hinaus ist YUI 3.4.0 ab sofort auf EUR sowie Download . Einige Highlights dieser Version gehören:

• App Framework (Beta): YUI 3.4.0 markiert das Debüt des App Framework von Ryan Grove und Eric Ferraiuolo. Die App-Framework ist ein Rollup des Controllers , Modell , Modell-Liste , und anzeigen Komponenten, die eine einfache MVC-Framework zum Schreiben Stil Single-Seite JavaScript-Anwendungen bietet. Diese Komponenten können separat oder zusammen verwendet werden, um alles von einfachen, nicht-interaktive Ansichten zu reichhaltige Anwendungen erstellen, mit URL-basiertes Routing, Datenbindung und vollständige Client-Server-Synchronisation.
• Kalender (Beta): Allen hat Rabinovich Kalender zu YUI 3 aus der Sammlung von Widgets in der 3.4.0 Version hinzugefügt. Kalender ist ein Widget, das flexibel von Monat zu Monat Navigation, einzelne oder mehrere aktuelle Auswahl, benutzerdefinierte Formatierung und Internationalisierung bietet. Er führt auch einen neuen Ansatz zur Filterung, die bisher verwendet geschachtelte Regelsätze, und eine voll Template-basiertes Rendering, mit denen Entwickler schnell und einfach anpassen, für eine Vielzahl von Anwendungen ermöglicht.
• Loader: Das YUI Loader hat ein wichtiges Update für 3.4.0 von Dav Glass unterzogen, mit dem Fokus auf Verbesserung der Leistung. Die Seed-Datei enthält Loader und seine Meta-Daten, die der Laden von Modulen schneller macht, da alle ihre Meta-Daten Anforderungen bereits auf der Seite. Rollups haben aus dem System und allowRollup Standardwerte entfernt worden, um in der Config Loader false gesetzt. Als Ergebnis wird YUI jetzt nur die Module zu laden, anstatt zusätzliche Module als Teil eines Rollup enthalten angegeben. Schließlich hat die Build-Verzeichnis in die Luft gesprengt und Teilmodule wurden aus dem Core-System reduziert die Anzahl der Iterationen durch Loader in die Berechnung der Abhängigkeiten ausgeführt wurde entfernt. Sie können sich beziehen den Blog-Post über Änderungen im Loader 3.4.0 für weitere Details.
• Graphics (beta): Tripp Bridges stellt die Grafik-Modul in YUI 3.4.0. Diese Komponente stellt eine JavaScript-API, mit dem Sie vordefinierte Formen und Freiform-Polygone mit Fläche und Kontur Eigenschaften in einer Vielzahl von Formaten erstellen können. Basierend auf den Funktionen des Browsers und Gerät, wird Graphics machen die Formen mit SVG, HTML, Canvas, oder VML.
• Panel (beta) und Widget: YUI intern Tilo Mitra verbrachte ein weiterer produktiver Sommer in Kalifornien arbeitet an einem Rewrite von Systemsteuerung. Er hat auch einige Verbesserungen Widget einschließlich der Umstellung der Widget-autohide und Widget-Modalität von Plugins, Erweiterungen gemacht, und die Einführung von WidgetButtons, ein neues Widget-Erweiterung, mit der Sie CSS-styled Schaltflächen in der Kopf-und Fußzeile von jedem Ort ermöglicht Widget, das Standard-Modul-Unterstützung implementiert.
• ScrollView: Tilo hat auch ScrollView für 3.4.0 auf vertikale Paging unterstützen und beinhalten eine Liste scrollview-Plugin, um CSS-Klassennamen zur sofortigen Liste Elemente hinzuzufügen verbessert.

Neben der Bereitstellung von Entwürfen für YUILibrary.com, YUI-Entwickler und Designer, Jeff Coniff, trug auch eine Reihe von Punkten für die 3.4.0 Version. Verbesserungen wurden an der Gestaltung und Erbringung der einige der Widgets für besseres Aussehen und Usability auf mobilen Geräten gemacht worden. Er hat auch gesetzt ist, um künstlerische Talente bei der Schaffung einer Reihe neuer Beispiele, wie das funktionieren komplexen Zeichnung: Violine, zB in Grafiken.

In YUI 3.4.0 wurden mehrere Komponenten von Beta zu GA-Status befördert worden Dienstprogramm , TabView und YQL Abfrage . Sie werden auch feststellen das Entfernen des Compat Komponente aus der Bibliothek neben der Historie-veraltet und CSSGrids-veraltet.

Wir freuen uns sehr, YUI 3.4.0 und die neue Website mit dem YUI-Community zu teilen. Sie können mehr über YUI 3.4.0 mit der Durchsicht der Unterlagen zu lernen YUILibrary.com . Sie können auch überprüfen Sie die Zusammenfassung aller Änderungen in der Komponente History-Dateien für YUI 3.4.0 vermerkt sowie die vollständige Liste der Karten während YUI 3.4.0 Entwicklung angesprochen . Wie immer würden wir uns freuen, dass Sie irgendwelche Vorschläge haben Sie vielleicht Mängel oder Sie in unserem Ticket-Datenbank aufdecken könnte einreichen. Feedback für YUI 3.4.0 kann eingegeben werden dem YUI 3 Ticket-Datenbank . Tickets für YUILibrary.com können eingegeben werden dem YUILibrary Repository . Wenn Sie sich für ein Interesse hinter die Kulissen bei der Schaffung des neuen YUILibrary.com schauen, achten Sie darauf, uns für beitreten Öffnungszeiten Donnerstag, 18 August , wo wir diskutieren werden, die Konzeption und Umsetzung.

Finden Gespräche: Bloglines | technorati

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

YUI: Öffnungszeiten Do 18. August

15. August 2011 um 09.49 Uhr von Luke Smith | In Entwicklung , Öffnungszeiten | 10 Kommentare

Willkommen auf der neuen yuilibrary.com!

Parallel zum Release 3.4.0, das neue und verbesserte YUILibrary.com wird vor Ort Going Live! Die neue Website ist einheitlich, besser organisiert und hat einen frischen Look and Feel.

Schauen Sie für eine anstehende Post über den Standort Details, sondern verbinden die Öffnungszeiten Schließen Zimmer an diesem Donnerstag Morgen, um eine First-Look-Führung durch bekommen Ryan Grove und die anderen Leute, die diese Realität gemacht. Wir werden über die Website-Design, Backend-Setup, Zukunftspläne, Gemeinde Möglichkeiten zu sprechen, und auschecken Sie alle neuen Funktionen wir in einer Stunde stopfen können, einschließlich der neuen API-Dokumentation Schnittstelle.

Wir haben gearbeitet, unsere Schwänze ab, um das Ding fertig zu starten und wir könnten nicht glücklicher sein zu sehen, es endlich zu seiner Heimat auf yuilibrary.com. Kommen Sie und feiern die Einweihung, Feedback (gute und schlechte), und lernen Sie Möglichkeiten, wie Sie dazu beitragen, dass die neue Website die besten für Sie und für die größere Gemeinschaft zu sein kann YUI können.

Zeit & Details

In dieser Woche werden wir nicht zu einer Konferenz Brücke zu benutzen. Stattdessen werden wir die Sitzung ganz zu hosten auf Adobe Connect, einschließlich der Audio. Wir verwenden die Connect-Chat Fragen zu verwalten oder zu verwenden Connect in Audio-Unterstützung gebaut für vertiefende Gespräche.

Wir werden in der Online- Raum Öffnungszeiten von 10.00 bis 11.00 Uhr PDT am Donnerstag.

Update: Video zum Download zur Verfügung

Die high-res, ist iOS freundliche Aufnahme zum Download zur Verfügung .

Finden Gespräche: Bloglines | technorati

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

YUI: Öffnungszeiten Do 11. August

8. August 2011 um 09.47 Uhr von Luke Smith | In Entwicklung , Öffnungszeiten | Keine Kommentare

Suchen Sie für direkte Zugänglichkeit

Wir werden im Nachgang zu dem vorherigen Post über direkte Suche . Es gibt eine Menge zu suchen Direkte Rede wert, aber für den Anfang, die Erfahrung immer die Zugänglichkeit Recht ist beides interessant und wichtig. Victor Tsaran und Caridy Patiño Sie uns auf der Konferenz teilzunehmen, um über das Projekt sprechen, lesen Sie die Details der Implementierung und Ihre Fragen beantworten zu suchen haben Direkte Erreichbarkeit oder Best Practices.

Zeit & Details

Wir ändern das Format in dieser Woche. Wir werden versuchen, die Sitzung ganz zu hosten auf Adobe Connect. Es wird keine Konferenz Brücke zu wählen sein. Der Ton wird auch durch zu verbinden. Wir verwenden die Connect-Chat auf Fragen verwalten.

Wir werden wie immer online sein, von 10.00 bis 11.00 Uhr PDT Donnerstag in den Öffnungszeiten Schließen Zimmer .

Update: Wir werden noch auf der Konferenz Brücke sein

In einem Hub von Ironie, stellt sich heraus, dass Connect verfügt nicht über eine gute Zugänglichkeit für blinde Teilnehmer, so werden wir mit für Screen Sharing und der Konferenz für Audio-Brücke wie gewohnt anschließen. Die Verbindungsdaten sind:

1. Wählen Sie sich in 1-888-371-8922 (Skype funktioniert gut für Nicht-US-Teilnehmer *)
2. Geben Sie den Teilnehmer-Code 47188953 #
3. Join the Screen-Sharing-Sitzung (dies wird Sie auffordern, die Adobe Connect-Plugin zu installieren, wenn dies Ihre erste Mal benutzen)

Update # 2: Aufnehmen verfügbar

Hier ist der Download für die Aufnahme dieser Öffnungszeiten .

Finden Gespräche: Bloglines | technorati

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

Direkte Suche machen Accessible

8. August 2011 um 21.44 Uhr durch Caridy Patino | In Barrierefreiheit , Entwicklung | 6 Kommentare

Vor ein paar Monaten starteten wir die erste Beta-Version von Search Direct. Dieses neue Produkt untersucht das Konzept der Echtzeit-Feedback, sofort liefert Antworten auf die Anwender mit jedem Tastendruck. Angesichts der Vielfalt der Yahoo! 's Publikum, wollten wir machen Suchen Direktflüge so zugänglich wie möglich. Anfangs glaubten wir, dass dies eine leichte Aufgabe sein, da dieses Produkt auf YUI 3, eine JavaScript-Bibliothek mit Zugang in seine DNA gebacken basieren würde. Entgegen meinen Erwartungen als Ingenieur, wandte sich diese Aufgabe als schwieriger als erwartet.

Einführung Suchen Direktflüge

Obwohl direkte Suche wird von Grund auf mit YUI die Komponente Infrastruktur aufgebaut, wird am deutlichsten sichtbar wird seine prominenten Schnittstelle auf der Basis von YUI AutoVervollständigen-Widget , das viele Eingabehilfen direkt aus der Box enthält. Anregungen zu einer bestimmten Abfrage werden in diesem autocomplete Umsetzung angezeigt. Direkte Suche auch über einen Content-Panel, auch bekannt als die reiche Tafel, wo Vorschlag im Zusammenhang mit Inhalt angezeigt wird. Die Absicht der reichen Tafel ist es, eine direkte Antwort auf den Benutzer, wenn ein Vorschlag aus der AutoVervollständigen-Liste ausgewählt wird.

Eine neue Reihe von Vorschlägen wird in der Liste auf jeden Tastendruck angezeigt, und der erste Vorschlag ist standardmäßig ausgewählt. Diese Standard-Auswahl wird eine weiche Auswahl genannt. Weiche Auswahlen und nachfolgenden Interaktionen mit der Vorschlagsliste diktieren den Inhalt, der in die reiche Tafel wiedergegeben wird. In Wirklichkeit sind die Dinge ein wenig komplizierter (Performance-Optimierungen, zusätzliche Cache-Schichten, etc.), sondern für die der Einfachheit halber können wir davon ausgehen, dass dies der gängigen Workflow ist.

Eingabehilfen

Auf der Suche nach was suchen Direkte zugänglich, schauten wir uns die Durchführung der Such-Assistent, eine Technologie, dass Yahoo! ein paar Jahre Pionierarbeit zurück, ebenso wie die einheimischen Eingabehilfen von YUI.

Nach dieser Untersuchung wurden drei primäre Eingabehilfen für Suchen Direktflüge vorgeschlagen:

• Mit dem YUI Internationalisierung Dienstprogramm zur lokalisierten Inhalten dienen.
• Einstellen role und aria-* Attribute auf Elemente der Autocomplete-Widget, das identifiziert und von einem Screen Reader verarbeitet werden müssen.
• Mit einem versteckten div , die eine Live-Region repräsentiert ( aria-live ), um den Benutzer benachrichtigen, wenn etwas passiert. ZB ist die Anzahl der verfügbaren Vorschläge, die ausgewählte Vorschlag, usw.

Der Plan war, den Nutzer über Änderungen in der Suche Direkte Schnittstelle zu benachrichtigen, und bieten eine Reihe von Tastenkombinationen, um die folgenden visuellen Komponenten zu navigieren:

• Suchfeld
• Submit-Button
• Vorschlagsliste
• Rich-Panel

Klingt wie ein Kinderspiel, oder? Nun, lassen Sie uns einen Schritt zurück.

Das Problem

Was wir hier haben sind zwei asynchrone Prozesse - einer von ihnen für die Aktualisierung der Vorschlag Satz und das andere für das Abrufen von entsprechenden Antworten - und sie sind beide wirklich schnell. Wir reden über 250ms Ende zu Ende reden. Da die Schnittstelle an einem solchen rasanten Tempo verändert, die Verfolgung der alles sein kann für einen Screenreader Nutzer schwierig. Es wird eine Größenordnung komplizierter, wenn Updates geschehen in einem asynchronen, nahezu in Echtzeit Weise. Da der Screen-Reader wurde von jeder Änderung in der Schnittstelle mitgeteilt wird, hat die resultierende Geschwätz es schwierig zu verstehen, was los war zu machen.

In Ermangelung einer akzeptablen Lösung, begannen wir die Zusammenarbeit mit Yahoo! 's Resident Zugänglichkeit Guru, Victor Tsaran ( @ vick08 ) zu versuchen und sich etwas einfallen besser.

Das erste Mal sahen wir uns mit Victor Suchen Direktflüge interagieren, es war mir sofort klar, dass eine Mehrheit der seinen Fokus auf die reiche Tafel statt der Vorschlagsliste war. Das war eine Überraschung für mich, wie wir die Liste angesehen als die "Quelle der Wahrheit". Während einer unserer Sitzungen hatten wir ein Glücksfall, wenn wir an all die Eingabehilfen von der Liste zu deaktivieren passiert. Sobald der Lärm von der Liste eingeführt geschnitten wurde, begann Suche Direkt zum Sinn, Victor zu machen!

Wie Nutzer von Screenreadern wahrnehmen Suchen Direktflüge

Nach der Realisierung, dass wir versuchten, das falsche Problem zu lösen, gingen wir wieder auf den ursprünglichen Benutzer Geschichte: "Als Benutzer kann ich eine Antwort bekommen, als ich geben". Anreise über die Antwort an den Benutzer war die Priorität. Nach Neudefinition des Problems, konzentrierten wir unsere Bemühungen auf die Zugänglichkeit einer Implementierung, bei der Screenreader priorisiert die reiche Tafel Inhalte über das Vorschlagsliste.

Zum Beispiel, wenn der Benutzer "miami wea" , wird der Screen-Reader sage ihnen zwei Dinge:

• 10 Tipps.
• Wetter Miami, FL. HEUTE, Gewitter, 89 ° F 77 ° F. MORGEN, Vereinzelte Gewitter, 90 ° F 74 ° F ...

Es wird dann weiterhin das Auslesen der Rest der Platte reichen Inhalt. Der Anwender muss nicht alle 10 Vorschläge im Vorfeld wissen, jedes Mal, wenn die Liste aktualisiert. Wenn sie wissen wollen, sind die Informationen leicht zugänglich über die Navigation per Tastatur.

Um sicherzustellen, dass die Vorschlagsliste ist die Wertsteigerung der Erfahrung stellen wir sicher, dass der erste Satz in der reichen Tafel ist eng mit dem entsprechenden Vorschlag im Zusammenhang. Zum Beispiel, basierend auf dem vorherigen Beispiel "weather miami" ist der erste Satz in der reichen Tafel für den Vorschlag: "Miami Wetter".

Victor Tsaran, der Yahoo! Accessibility Lab, zeigt, wie es auf Firefox funktioniert mit dem NVDA Screenreader:

Der Screenreader Erfahrung für unsere Anwendung ist einfacher zu folgen, da wir erst jetzt auf den beiden folgenden visuellen Komponenten konzentrieren:

• Suchfeld
• Rich-Panel

Änderungen an der AutoVervollständigen-Liste als Ganzes werden nicht mehr verfolgt, und der Submit-Button wird ignoriert, da der Benutzer immer schlagen können für die aktuelle Abfrage eingeben oder eine Tastenkombination (Tilda Zugriffstaste: [control, alt or shift] + ~ ) um zwischen dem Eingang und dem reich-Panel wechseln. Diese Tastatur-Navigation Optionen werden für den Benutzer, wenn das Suchfeld durch den Screenreader anerkannt wird enthüllt.

Aus technischer Sicht, diese Änderung stark Dinge vereinfacht. Die Höhe der DOM-Manipulation in der aktivste Komponente wurde drastisch reduziert, die Verbesserung der Gesamtleistung der Suche Direct. Hier ist ein Beispiel für die Umsetzung:

 Funktion SDAAria () {
     var node = this._liveRegion = Y.Node.create ('<div role="status" class="off-screen" aria-live="assertive"> </ div>');
     / / Erstellen des ARIA Live-Region ...
     Y.one ('body') append (Knoten).;
     / / Hören für Arie: Live-Nachrichten, um den Live-Region aktualisieren
     this.on ('Arie: live', this._handlerMsg, this);
     / / Hören für Klatsch: Aktualisieren, um wie viele Vorschläge bekannt geben
     this.on ('Gossip: refresh', this._handleGossipRefresh, this);
 }
 SDAAria.ATTRS = {
      Streicher: {
          valueFn: function () {
              zurück Y.Intl.get ('sd-Arie');
          }
      }
 };
 SDAAria.prototype = {
     _ariaSay: function (stringID, subs) {
         var message = this.get ("Strings". + stringID) | |'';
         this._liveRegion.setContent (? subs Y.Lang.sub (Nachricht, subs): message);
     },
     _handlerMsg: function (e) {
         wenn (e.id) {
             this._ariaSay (e.id, e.subs);
         }
     },
     _handleGossipRefresh: function () {
         var size = this.get ('Vorschläge') size ().;
         this._ariaSay ((size> 0 'Vorschläge':? 'NO_SUGGESTIONS'), {
             n: Größe
         });
     }
 };

Lessons learned

Bei der Erstellung einer Schnittstelle zugänglich, ist es wichtig, die richtigen Fragen zu stellen. So dass jedes Bit Ihrer Anwendung zugänglich möglicherweise nicht der richtige Ansatz zu sein.

Fordern Sie frühzeitig Rückmeldungen von Benutzern von Screenreadern - nicht davon ausgehen, dass Sie Ihre Basen bedeckt, bis Sie einen Benutzer-Feedback zu bekommen. Mit Hilfe jedes Werkzeug und Funktion zu Ihrer Verfügung haben nicht die beabsichtigte Wirkung.

Nutzer von Screenreadern können Schwierigkeiten haben, die Verfolgung von Echtzeit-Updates, vor allem, wenn Screen-Reader mit Meldungen bombardiert werden. In diesen Szenarien kann weniger mehr sein. Identifizieren und konzentrieren, was für den Anwender anstatt zu versuchen, die rohen Erfahrungen mit der Anwendung für den Screenreader replizieren wichtig.

Über den Autor: Caridy Patiño, Principal Frontend für Yahoo! Search Direct. Er war ein langjähriger YUI Contributor und Schöpfer von YUI-Bibliothek Sprudelnde Extension, sowie Gast-Blogger bei YUIBlog.com teilen einige seiner umfangreichen Erfahrung im Aufbau Hochleistungs-Web-Anwendungen. Lädt Strategien, ereignisgesteuerte Architekturen und SSJS sind einige der Themen, bei denen Caridy verbringt die meiste seiner Zeit in diesen Tagen.

Finden Gespräche: Bloglines | technorati

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