Yahoo! User Interface Blog (YUIBlog)

YUI: Orario di apertura gio 1 ° settembre

30 agosto 2011 alle 10:53 am da Luca Smith | In Development e orari di apertura | 2 commenti

YUI Loader e le modifiche ai file di semi, oltre a suggerimenti e trucchi Loader

Torna all'inizio di luglio, Dav Glass ha pubblicato un articolo sulle modifiche ai file di Loader e le sementi in 3.4.0. Ci sono state alcune domande nei commenti e alcuni altri nel forum e # yui canale su Freenode IRC , così ho voluto ottenere Dav sul corno per un pubblico Q & A.

Non mi aspetto che avrà tutta l'ora, però, così dopo che, stiamo andando a parlare di best practice e suggerimenti Loader e trucchi. A seconda del tempo, alcune cose spero di coprire sono i seguenti:

• Come rendere Loader recuperare non YUI-files
• Impostazione gruppi di moduli, e dei numerosi vantaggi del loro utilizzo
• Hosting e indicando al vostro servizio combo proprio
• Come ogni config colpisce Loader, dove andrà a cercare i tuoi file

Se avete domande sul Loader bruciando, hanno un trucco che si desidera condividere, o non hanno ancora capito quanto Loader è terribile, unitevi a noi!

Time & Details

Questa settimana andremo a ospitare la sessione interamente su Adobe Connect, compreso l'audio. Useremo la chat Connect per gestire domande o utilizzare Connect costruita nel supporto audio per più approfondite discussioni.

Saremo on-line nella stanza aprile Ore 10:00-11:00 PDT Giovedi.

Aggiornare

La registrazione è disponibile sul nostro canale YouTube .

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

Nominare YUI per gli Open Source Awards 2011!

Agosto 23, 2011 at 04:58 di Jenny Donnelly | In Miscellanea | 4 Comments

Se amate YUI (e speriamo che fare!), Si prega di prendere un momento per noi nominare per le Open Source Awards 2011 , sponsorizzati da Packt Publishing. Assicurati di puntare al nostro sito web nuovo fiammante a http://yuilibrary.com !

Il modulo di candidatura è aperta oggi a settembre 9.

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

Annunciando YUI 3.4.0 e la nuova YUILibrary.com

18 agosto, 2011 alle 8:54 am da George Puckett | In Development | 19 commenti

Il team di YUI ha non uno, ma due annunci da condividere oggi. In primo luogo, abbiamo lanciato una completamente rivisto YUILibrary.com . Il nuovo sito è uno zero riscrittura fornendo una destinazione unificato per tutta la documentazione YUI, un'interfaccia utente più pulita, e un'organizzazione più intuitiva su una robusta architettura nuova. Prendetevi del tempo per guardarsi intorno. Speriamo che essere molto felice con ciò che si vede.

Inoltre, YUI 3.4.0 è ora disponibile su CDN così come il download . Alcuni punti salienti di questa release includono:

• App Framework (beta): YUI 3.4.0 segna il debutto del quadro App da Ryan Grove e Eric Ferraiuolo. Il quadro App è un aggiornamento cumulativo del controller , modello , modello List e Vista componenti che fornisce un semplice framework MVC-style per la scrittura di una sola pagina applicazioni JavaScript. Questi componenti possono essere utilizzate separatamente o insieme per creare qualsiasi cosa, da semplici non-interattive viste per applicazioni ricche con il routing basato su URL, l'associazione dati, e pieno client-server di sincronizzazione.
• Calendario (beta): Allen Rabinovich ha aggiunto il Calendario per la raccolta YUI 3 del widget nella versione 3.4.0. Calendar è un widget flessibile, che prevede mese per mese di navigazione, la selezione della data singola o multipla, la formattazione personalizzata e internazionalizzazione. Esso introduce inoltre un nuovo approccio fino ad oggi di filtraggio che utilizza insiemi di regole nidificati, e una resa completamente template-based, che consente agli sviluppatori in modo rapido e facilmente personalizzabile per una varietà di usi.
• Loader: Il Loader YUI ha subito un aggiornamento significativo per 3.4.0 da Dav Glass, con un focus sul miglioramento delle prestazioni. Il file seme contiene Loader e la sua meta-dati che rende il caricamento dei moduli più veloci in quanto tutti i suoi meta-dati i requisiti sono già sulla pagina. Cumulativi sono stati rimossi dalle impostazioni di sistema e allowRollup su false nella config Loader. Come risultato, YUI ora solo caricare i moduli specificati piuttosto che moduli aggiuntivi inclusi come parte di un rollup. Infine, la directory di costruzione è stato esploso e sottomoduli sono stati rimossi dal sistema centrale ridurre il numero di iterazioni eseguiti dal caricatore nel calcolo delle dipendenze. È possibile fare riferimento al post del blog sui cambiamenti in 3.4.0 Loader per maggiori dettagli.
• Graphics (beta): Tripp Bridges introduce il modulo Graphics in YUI 3.4.0. Questo componente offre una API JavaScript che permette di creare forme predefinite e free-form poligoni con proprietà di riempimento e tratto in una varietà di formati. Sulla base delle funzionalità del browser e del dispositivo, grafica renderà le forme usando SVG, HTML, Canvas, o VML.
• Panel (beta) e Widget: YUI intern Tilo Mitra trascorso un'altra estate produttivo in California lavorando a una riscrittura del Panel. Ha anche fatto diversi miglioramenti al Widget inclusa la riconversione delle Widget Widget-autohide e-modalità di plugins per le estensioni, e l'introduzione di WidgetButtons, un'estensione nuovo widget che permette di posizionare in stile css pulsanti nell'intestazione e nel piè di pagina di ogni widget che implementa il supporto modulo standard.
• Scrollview: Tilo ha anche migliorato Scrollview per 3.4.0 per sostenere paging verticale e comprendono un Scrollview lista di plugin per aggiungere nomi di classi CSS per gli elementi della lista immediati.

Oltre a fornire disegni per YUILibrary.com, YUI sviluppatore e designer, Jeff Coniff, ha contribuito anche una serie di oggetti per la versione 3.4.0. Sono stati apportati miglioramenti alla progettazione e rendering di alcuni widget per una migliore estetica e l'usabilità sui dispositivi mobili. Egli ha anche messo è talenti artistici per lavorare nella creazione di una serie di nuovi esempi, come il Complesso Disegno: Violin esempio in Graphics.

In YUI 3.4.0, diversi componenti sono stati promossi da Beta allo status di GA Utility , Visualizzazione a scheda , e Query YQL . Noterete anche la rimozione del componente Compat dalla libreria, oltre alla Storia-deprecato e CSSGrids-deprecato.

Siamo molto eccitati di condividere YUI 3.4.0 e il nuovo sito con la comunità YUI. Si può imparare di più su YUI 3.4.0, esaminando la documentazione sul YUILibrary.com . Puoi anche possibile verificare il riepilogo di tutti i cambiamenti rilevati nei file di storia delle componenti per YUI 3.4.0 , nonché l'elenco completo dei biglietti YUI 3.4.0 affrontati durante lo sviluppo . Come sempre, gradiremmo che si compila tutti i suggerimenti che potreste avere o difetti si può scoprire nel nostro database biglietto. Feedback per YUI 3.4.0 può essere inserito nella banca dati 3 ticket YUI . I biglietti per YUILibrary.com possono essere inseriti nel repository YUILibrary . Se siete interessati ad un dietro le quinte della creazione del nuovo YUILibrary.com, assicuratevi di unirsi a noi per Orario di apertura Giovedi, August 18th , dove si discuterà la progettazione e implementazione.

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

YUI: Orario di apertura gio 18 agosto

Agosto 15, 2011 at 9:49 pm da Luke Smith | In Development e orari di apertura | 10 commenti

Benvenuti nel nuovo yuilibrary.com!

In parallelo con la versione 3.4.0, la nuova versione migliorata YUILibrary.com luogo sta andando vivere! Il nuovo sito è unificata, meglio organizzato, e ha un look and feel.

Cercare un post prossimo i dettagli del sito, ma unire le Orario di apertura Collegare camera questa mattina Giovedi per ottenere un first-look visita guidata da Ryan Grove e le altre persone che hanno reso questo una realtà. Saremo parlando del design del sito, l'installazione backend, progetti per il futuro, le opportunità comunitarie, e controllando tutte le nuove funzionalità che possiamo condensare in un'ora, tra cui la nuova interfaccia API docs.

Abbiamo lavorato staccandoci le code per ottenere questa cosa pronta a lanciare e non potremmo essere più felici di vedere finalmente fare la sua casa yuilibrary.com. Venite a festeggiare l'inaugurazione, dare feedback (buoni e cattivi), e imparare modi per contribuire a rendere il nuovo sito il meglio che può essere per voi e per la comunità una maggiore YUI.

Time & Details

Questa settimana, non abbiamo intenzione di utilizzare un bridge di conferenza. Invece, stiamo andando a ospitare la sessione interamente su Adobe Connect, compreso l'audio. Useremo la chat Connect per gestire domande o utilizzare Connect costruita nel supporto audio per più approfondite discussioni.

Saremo on-line nella stanza aprile Ore 10:00-11:00 PDT Giovedi.

Update: il video disponibile per il download

L'alta risoluzione, la registrazione iOS amichevole è disponibile per il download .

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

YUI: Orario di apertura gio 11 agosto

Agosto 8, 2011 at 21:47 di Luke Smith | In Development e orari di apertura | Nessun Commento

Cerca accessibilità diretta

Stiamo per dare un seguito alla precedente post sulla ricerca diretta . C'è molto di pena ricerca diretta parlando, ma per cominciare, l'esperienza di ottenere l'accessibilità è giusto sia interessante e importante. Victor Tsaran e Caridy Patiño si uniranno a noi nella chiamata a parlare del progetto, rivedere i dettagli di implementazione, e rispondere ad eventuali domande da lei sulla ricerca diretta o l'accessibilità migliori pratiche.

Time & Details

Stiamo cambiando il formato di questa settimana. Stiamo andando a cercare di ospitare la sessione interamente su Adobe Connect. Non ci sarà nessun bridge di conferenza da comporre in. L'audio sarà anche tramite Connect. Useremo la chat Connect per la gestione delle domande.

Saremo on-line, come al solito 10:00-11:00 PDT Giovedi in l'orario di apertura Connect camera .

Update: Saremo ancora sul ponte di conferenza

In un tratto di ironia, si scopre che Connect non ha una buona accessibilità per i partecipanti non vedenti, quindi useremo Connect per la condivisione dello schermo e il ponte di conferenza per l'audio come al solito. I dettagli di connessione sono:

1. Comporre al 1-888-371-8922 (Skype funziona alla grande per non statunitensi partecipanti *)
2. Inserire il codice partecipante 47188953 #
3. Partecipa alla sessione di condivisione dello schermo (questa vi verrà chiesto di installare il plugin Adobe Connect se questa è la prima volta ad usarlo)

Aggiornamento # 2: Registrare disponibili

Ecco la registrazione scaricabile per questo Orario di apertura .

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

Rendere accessibile Ricerca diretta

Agosto 8, 2011 at 09:44 di Caridy Patino | In Accessibilità e Sviluppo | 6 commenti

Pochi mesi fa abbiamo lanciato la prima versione beta di Search Direct. Questo nuovo prodotto esplora il concetto di feedback in tempo reale, fornendo immediatamente le risposte per l'utente con ogni tasto. Data la diversità del pubblico Yahoo! 's, abbiamo voluto fare ricerca diretta il più accessibile possibile. Inizialmente, eravamo convinti che questo sarebbe un compito facile, poiché questo prodotto sarebbe basata su YUI 3, una libreria JavaScript con l'accessibilità cotta nel suo DNA. Contrariamente alle mie aspettative, come un ingegnere, questo compito si rivelò più difficile del previsto.

Presentazione Ricerca diretta

Sebbene Ricerca diretta è costruito da zero utilizzando l'infrastruttura componente YUI, la sua interfaccia più visibilmente prominente si basa sul widget di YUI automatico che include molte funzioni accessibili a destra, fuori della scatola. Suggerimenti relativi a una determinata query vengono visualizzati in questa implementazione di completamento automatico. Ricerca diretta dispone anche di un pannello di contenuto, alias il pannello ricco, in cui viene visualizzato il contenuto suggestione-related. L'intenzione del pannello ricco è quello di fornire una risposta diretta all'utente quando un suggerimento dalla lista di completamento automatico è selezionata.

Una nuova serie di suggerimenti viene visualizzato nella lista a ogni battitura, e il primo suggerimento è selezionata per impostazione predefinita. Questa selezione di default è chiamata una selezione morbido. Soft selezioni e le interazioni successive con l'elenco suggerimento dettare il contenuto che viene eseguito il rendering nel pannello ricco. In realtà, le cose sono un po 'più complicate (ottimizzazione delle prestazioni, livelli di cache addizionali, ecc), ma per semplicità possiamo supporre che questo sia il flusso di lavoro comune.

Caratteristiche di accessibilità

Nella ricerca di rendere accessibili ricerca diretta, abbiamo preso in considerazione l'attuazione di Search Assistant, una tecnologia che Yahoo! sperimentato qualche anno fa, così come le caratteristiche di accessibilità native di YUI.

Dopo questa indagine, tre principali funzioni di accessibilità sono stati proposti per la ricerca diretta:

• Utilizzando il programma di utilità Internazionalizzazione YUI per servire contenuti localizzati.
• Impostazione role e aria-* attributi elementi all'interno del widget di autocomplete, che devono essere identificati e trattati dagli screen reader.
• Utilizzando un nascosto div che rappresenta una regione dal vivo ( aria-live ) per informare l'utente quando succede qualcosa. Ad esempio, il numero di suggerimenti disponibili, il suggerimento selezionato, ecc

Il piano era quello di informare l'utente di eventuali cambiamenti nell'interfaccia di ricerca diretta, e forniscono una serie di scorciatoie da tastiera per navigare tra i seguenti componenti visuali:

• Box di Ricerca
• Pulsante Invia
• Suggerimento list
• Pannello Rich

Suona come una brezza, giusto? Bene, facciamo un passo indietro.

Il problema

Quello che abbiamo qui sono due processi asincroni - uno di loro per l'aggiornamento del set di suggestione e l'altra per il recupero risposte corrispondenti - e sono entrambi molto veloci. Stiamo parlando di fine 250ms per finire. Poiché l'interfaccia sta cambiando a un ritmo così rapido, tenendo traccia di tutto ciò che può essere difficile per un utente di screen reader. Si ottiene un ordine di grandezza più complicata quando gli aggiornamenti accadere in uno asincrono, quasi in tempo reale modo. Perché il lettore di schermo veniva comunicata ogni cambiamento nell'interfaccia, il chiacchiericcio risultante rendeva difficile dare un senso a quello che stava succedendo.

In mancanza di una soluzione accettabile, abbiamo iniziato a collaborare con guru dell'accessibilità Yahoo! 's residente, Victor Tsaran ( @ vick08 ) per cercare di venire con qualcosa di meglio.

La prima volta che abbiamo visto Victor interagire con ricerca diretta, è stato subito chiaro per me che la maggior parte della sua attenzione si è concentrata sul pannello ricca invece dell'elenco dei suggerimenti. Questa è stata una sorpresa per me, come abbiamo visto la lista come "fonte di verità". Durante una delle nostre sessioni, abbiamo avuto un colpo di fortuna quando ci è capitato di disattivare tutte le funzioni di accessibilità della lista. Non appena il rumore introdotto dalla lista è stata tagliata fuori, di ricerca diretta ha iniziato a dare un senso a Vittorio!

Come utenti di screen reader percepiscono Ricerca diretta

Dopo aver realizzato che stavamo cercando di risolvere il problema sbagliato, siamo tornati alla storia dell'utente originale: "Come un utente, posso ottenere una risposta di tipo I". Ottenere la risposta per l'utente di fronte era la priorità. Dopo la ridefinizione del problema, abbiamo concentrato i nostri sforzi di accessibilità su un'implementazione in cui il lettore di schermo priorità il ricco contenuto pannello sopra l'elenco suggerimento.

Ad esempio, se l'utente digita "miami wea" , lo screen reader dirà loro due cose:

• 10 suggerimenti.
• METEO MIAMI, FL. OGGI, Parzialmente nuvoloso, 89 ° F 77 ° F. DOMANI, Parzialmente nuvoloso, 90 ° F 74 ° F ...

Essa poi continua a leggere il resto del contenuto pannello ricco. L'utente non ha bisogno di sapere tutti i 10 consigli di fronte, ogni volta che gli aggiornamenti della lista. Se si vuole sapere, le informazioni sono facilmente accessibili tramite la navigazione da tastiera.

Per garantire che l'elenco suggerimento è un valore aggiunto per l'esperienza, ci assicuriamo che la prima frase nel pannello ricco è strettamente legato al suo suggerimento corrispondente. Ad esempio, in base al precedente esempio, "weather miami" è la prima frase nel pannello ricco per il suggerimento: "tempo miami".

Victor Tsaran, del Laboratorio di Accessibilità Yahoo!, mostra come funziona su FireFox con lo schermo NVDA lettore:

L'esperienza di lettura dello schermo per la nostra applicazione è più facile da seguire dal momento che oggi si concentrano solo sui seguenti due componenti visuali:

• Box di Ricerca
• Pannello Rich

Le modifiche dell'elenco di completamento automatico nel suo insieme non sono più traccia, e il pulsante submit viene ignorato in quanto l'utente può sempre premere invio per la query corrente o utilizzare una scorciatoia da tastiera (Tilda tasto di accesso: [control, alt or shift] + ~ ) per passare tra l'elemento di ingresso e il pannello ricco. Queste opzioni di navigazione da tastiera si rivelano all'utente quando il box di ricerca è riconosciuto dallo screen reader.

Dal punto di vista ingegneristico, questo cambiamento notevolmente semplificato le cose. La quantità di manipolazione del DOM nella componente più attivo è stato drasticamente ridotto, migliorando le prestazioni complessive di Ricerca Direct. Ecco un esempio di implementazione:

 SDAAria funzione () {
     var node = this._liveRegion = Y.Node.create ('<div role="status" class="off-screen" aria-live="assertive"> </ div>');
     / / Crea la regione dal vivo ARIA ...
     Y.one ('body') append (nodo).;
     / / Ascolto per aria: i messaggi in diretta per aggiornare la regione dal vivo
     this.on ('aria: in diretta', this._handlerMsg, this);
     / / In attesa di gossip: aggiornamento per annunciare quanti suggerimenti
     this.on ('gossip: refresh', this._handleGossipRefresh, this);
 }
 SDAAria.ATTRS = {
      stringhe: {
          valueFn: function () {
              ritorno Y.Intl.get ('sd-aria');
          }
      }
 };
 SDAAria.prototype = {
     _ariaSay: function (stringID, info) {
         var message = this.get ('stringhe.' + stringID) | |'';
         this._liveRegion.setContent (? subs Y.Lang.sub (messaggio, subs): messaggio);
     },
     _handlerMsg: function (e) {
         se (e.id) {
             this._ariaSay (e.id, e.subs);
         }
     },
     _handleGossipRefresh: function () {
         var size = this.get ('suggerimenti') size ().;
         this._ariaSay (dimensioni (> 0 degli utenti: SUGGERIMENTI? 'NO_SUGGESTIONS'), {
             n: dimensione
         });
     }
 };

Le lezioni apprese

Quando si crea un'interfaccia accessibile, è importante porre le domande giuste. Rendere ogni momento della vostra applicazione accessibile non può essere l'approccio giusto.

Richiesta feedback anticipato da parte degli utenti di screen reader - Non dare per scontato che avete i vostri basi coperte fino ad ottenere un feedback degli utenti. Utilizzando tutti gli strumenti e funzionalità a vostra disposizione non può avere l'effetto desiderato.

Gli utenti di screen reader possono avere difficoltà a tenere traccia di aggiornamenti in tempo reale, specialmente se gli screen reader sono bombardati con le notifiche. In questi scenari, meno può essere di più. Identificare e concentrarsi su ciò che è importante per l'utente, invece di cercare di replicare l'esperienza grezza della domanda per il lettore di schermo.

Circa l'autore: Caridy Patiño, Frontend principale per la ricerca diretta Yahoo!. E 'stato un collaboratore di lunga data YUI e creatore di Bubbling Biblioteca Extension YUI, così come guest blogger YUIBlog.com a condividere parte della sua esperienza la costruzione di applicazioni web alte prestazioni. Strategie di carico, architetture event-driven e SSJS sono alcuni dei temi Caridy dove trascorre la maggior parte del suo tempo in questi giorni.

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!