Interfaz de usuario de Yahoo! Blog (YUIBlog)

YUI: Horario jue septiembre 1 ª

30 de agosto 2011 a las 10:53 am por Luke Smith | En Desarrollo , los horarios de entrada | 2 comentarios

YUI Loader y los cambios de semillas de archivos, además de consejos y trucos del cargador

Volver a principios de julio, Dav Glass publicó un artículo acerca de cambios en los archivos del cargador y de las semillas en 3.4.0. Había un par de preguntas en los comentarios y algunos otros en el foro y # yui canal IRC de freenode , por lo que yo quería Dav en el cuerno de un público Q & A.

No espero que se llevará a toda la hora, aunque, por lo que después de eso, vamos a estar hablando de las mejores prácticas de carga y de consejos y trucos. Dependiendo del tiempo, algunas cosas que estoy esperando a cubrir son los siguientes:

• Cómo hacer Loader busca de archivos no YUI
• La creación de grupos de módulos, y las muchas ventajas de su uso
• Hosting y señalando a su servicio combinado propia
• ¿Cómo afecta a cada configuración, donde se verá Loader para sus archivos

Si tiene ardor preguntas acerca de cargador, tiene un truco que quieras compartir, o no han dado cuenta de lo impresionante es cargador, por favor, únase a nosotros!

Fecha y detalles

Esta semana vamos a organizar la sesión por completo de Adobe Connect, incluyendo el audio. Vamos a utilizar el chat Connect para gestionar las preguntas o utilizar Connect construido en el soporte de audio para más discusiones en profundidad.

Vamos a estar en línea en la sala de Horas Open 10 a.m.-11 a.m. PDT jueves.

Actualizar

La grabación está disponible en nuestro canal de YouTube .

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!

Nombrar YUI para el 2011 los Premios Open Source!

23 de agosto de 2011 a las 4:58 pm por Jenny Donnelly | En Miscelánea | 4 comentarios

Si te gusta YUI (y esperamos que usted lo hace!), Por favor tome un momento para nosotros nominar a los Premios 2011 de Código Abierto , patrocinado por Packt Publishing. Asegúrese de apuntar a nuestro sitio web nuevo y brillante en el http://yuilibrary.com !

El formulario de inscripción está abierto desde ahora hasta el 9 de septiembre.

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!

Al anunciar YUI 3.4.0 y el nuevo YUILibrary.com

18 de agosto 2011 a las 8:54 am por George Puckett | En Desarrollo | 19 comentarios

El equipo de YUI tiene no uno, sino dos anuncios para compartir hoy. En primer lugar, hemos puesto en marcha una revisión completa YUILibrary.com . El nuevo sitio es una reescritura de cero ofrecer un destino unificado para toda la documentación YUI, una interfaz de usuario más limpia, y una organización más intuitiva en la parte superior de una nueva arquitectura robusta. Tómese su tiempo para mirar a su alrededor. Esperamos que seas muy feliz con lo que ve.

Además, YUI 3.4.0 ya está disponible en CDN, así como de descarga . Algunos aspectos destacados de esta versión incluyen:

• App Marco (beta): YUI 3.4.0 marca el debut del marco de aplicación de Ryan Grove y Ferraiuolo Eric. El marco de aplicación es un paquete de controlador , de modelo , la Lista Modelo y Vista los componentes que proporciona un simple estilo de MVC-marco para la escritura de una sola página las aplicaciones JavaScript. Estos componentes se pueden utilizar por separado o en conjunto para crear cualquier cosa, desde simples no interactivas vistas a las aplicaciones ricas con el enrutamiento basado en URL, el enlace de datos y la sincronización completa de cliente-servidor.
• Calendario (beta): Allen Rabinovich ha añadido a la colección Calendario YUI 3 de widgets en la liberación 3.4.0. Calendario es un widget flexible que ofrece mes a mes de navegación, selección de fecha simple o múltiple, de formato personalizado y la internacionalización. También introduce un nuevo enfoque a la fecha de filtrado que utiliza conjuntos de reglas anidadas, y con una interpretación totalmente basada en plantillas, que permite a los desarrolladores de forma rápida y fácil de personalizar para una variedad de usos.
• Cargador: El cargador de YUI ha experimentado una importante actualización de 3.4.0 de Dav de vidrio, con un enfoque en mejorar el rendimiento. El archivo contiene la semilla y su cargador de meta-datos que hace que la carga de módulos más rápido ya que todos sus requisitos de meta-datos ya se encuentran en la página. Paquetes acumulativos han sido retirados de los valores predeterminados del sistema y allowRollup en false en la configuración del cargador. Como resultado, YUI ahora solo cargar los módulos específicos en lugar de módulos adicionales que se incluyen como parte de un paquete de continuación. Finalmente, el directorio de construcción ha sido explotado y submódulos se han eliminado del sistema básico de reducir el número de iteraciones ejecutadas por cargador en el cálculo de las dependencias. Puede referirse a la entrada de blog acerca de los cambios en el cargador 3.4.0 para más detalles.
• Gráficos (beta): Tripp Bridges presenta el módulo de gráficos en YUI 3.4.0. Este componente proporciona una API de JavaScript que permite crear formas predefinidas y los polígonos de forma libre con las propiedades de relleno y de trazo en una variedad de formatos. Con base en las capacidades del navegador y el dispositivo, gráficos hará que las formas con SVG, HTML, lienzo, o VML.
• Grupo (beta) y el Widget: YUI pasante Tilo Mitra pasó un verano productivo en California trabajando en la reescritura del Grupo. También ha realizado varias mejoras para Widget incluyendo la conversión de Widget-Widget ocultación automática y de modalidad de plugins a las extensiones, y la introducción de WidgetButtons, una extensión del nuevo widget que te permite colocar el CSS de estilo botones en la cabecera y el pie de cualquier widget que implementa el soporte para módulos estándar.
• ScrollView: Tilo también ha mejorado ScrollView de 3.4.0 para admitir la paginación vertical y son un complemento ScrollView-lista para agregar nombres de las clases CSS para elementos de la lista inmediatamente.

Además de proporcionar diseños para YUILibrary.com, desarrollador y diseñador de YUI, Jeff Coniff, también contribuyó con una serie de artículos para la liberación 3.4.0. Se han realizado mejoras en el diseño y la prestación de algunos de los widgets para mejorar la apariencia y la usabilidad en dispositivos móviles. Él también ha puesto es talentos artísticos para trabajar en la creación de una serie de nuevos ejemplos, como el dibujo complejo: Ejemplo de Violín en el gráfico.

En YUI 3.4.0, varios componentes han sido promovidos a la condición de Beta GA Utilidad , TabView y consulta YQL . También se dará cuenta de la eliminación del componente Compat de la biblioteca, además de la historia-en desuso y CSSGrids obsoleto.

Estamos muy emocionados de compartir YUI 3.4.0 y la nueva página web con la comunidad de YUI. Usted puede aprender más acerca de YUI 3.4.0 mediante la revisión de la documentación sobre YUILibrary.com . Usted puede también puede revisar el resumen de todos los cambios observados en los archivos de componentes de la historia de YUI 3.4.0 , así como la lista completa de los billetes tratados durante el desarrollo de YUI 3.4.0 . Como siempre, le agradecería que usted presente alguna sugerencia que pueda tener o defectos que pudieran revelar en nuestra base de datos de entrada. Comentarios de YUI 3.4.0 se pueden introducir en la base de datos billete de YUI 3 . Las entradas para YUILibrary.com se pueden introducir en el repositorio YUILibrary . Si usted está interesado en un vistazo entre bambalinas a la creación de la YUILibrary.com nuevo, asegúrese de unirse a nosotros en Horario Jueves, 18 de agosto , donde vamos a discutir el diseño e implementación.

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!

YUI: Horario jue 18 de agosto

15 de agosto de 2011 a las 9:49 pm por Luke Smith | En Desarrollo , los horarios de entrada | 10 comentarios

Bienvenido a la nueva yuilibrary.com!

En paralelo con la liberación 3.4.0, la nueva y mejorada YUILibrary.com sitio va en vivo! El nuevo sitio está unificado, mejor organizado, y tiene una mirada fresca y siéntase.

Busque un próximo post acerca de los detalles del sitio, pero unirse a los Horario Conecte sala de este jueves por la mañana para obtener una primera gira, mira guiado por Ryan Grove y las otras personas que hicieron esto una realidad. Vamos a hablar sobre el diseño del sitio, configuración de back-end, los planes futuros, las oportunidades de la comunidad, y la salida a todas las nuevas características que se pueden meter en una hora, incluyendo la nueva interfaz API docs.

Hemos estado trabajando fuera de nuestras colas para conseguir esto listo para el lanzamiento y no podíamos estar más contentos de ver que finalmente hacen su casa en yuilibrary.com. Ven a celebrar la inauguración, dar retroalimentación (buena o mala), y aprender maneras de ayudar a hacer que el nuevo sitio lo mejor que puede ser para usted y para la gran comunidad de YUI.

Fecha y detalles

Esta semana, no vamos a utilizar un puente de conferencia. En su lugar, vamos a organizar la sesión por completo de Adobe Connect, incluyendo el audio. Vamos a utilizar el chat Connect para gestionar las preguntas o utilizar Connect construido en el soporte de audio para más discusiones en profundidad.

Vamos a estar en línea en la sala de Horas Open 10 a.m.-11 a.m. PDT jueves.

Actualización: vídeo disponible para su descarga

La alta resolución, grabación de IOS es amigable disponible para su descarga .

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!

YUI: Horario jue 11 de agosto

8 de agosto de 2011 a las 9:47 pm por Luke Smith | En Desarrollo , los horarios de entrada | Sin Comentarios

Buscar la accesibilidad directa

Vamos a dar seguimiento a la anterior post sobre búsqueda directa . Hay mucho sobre la pena de búsqueda directa hablando, pero para empezar, la experiencia de obtener el acceso a la derecha es a la vez interesante e importante. Víctor Tsaran y Patiño Caridy se unan a nosotros en la llamada para hablar sobre el proyecto, revisar los detalles de implementación, y responder a cualquier pregunta que tenga sobre cómo Buscar las mejores prácticas, directas o accesibilidad.

Fecha y detalles

Estamos cambiando el formato de esta semana. Vamos a tratar de organizar la sesión por completo de Adobe Connect. No habrá puente de conferencia para marcar a. El audio también será a través de Connect. Vamos a utilizar el chat Connect para gestionar preguntas.

Vamos a estar en línea, como de costumbre 10 a.m.-11 a.m. PDT el jueves en las horas de apertura Conecte habitación .

Actualización: Todavía estará en el puente de conferencia

En una ironía del destino, resulta que Connect no tiene una buena accesibilidad para los participantes ciegos, así que vamos a usar Connect para compartir la pantalla y el puente de conferencia de audio como de costumbre. Los detalles de la conexión son los siguientes:

1. Marque 1-888-371-8922 para (Skype funciona muy bien para no estadounidenses participantes *)
2. Ingrese el código de participante 47188953 #
3. Únete a la sesión de compartir pantalla (esto le preguntará si desea instalar el plugin de Adobe Connect, si esta es tu primera vez con él)

Actualización # 2: Grabación disponible

Aquí está la grabación descargable para este Horario .

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!

Hacer accesible la búsqueda directa

8 de agosto de 2011 a las 21:44 por Caridy Patiño | En Accesibilidad y Desarrollo | 6 comentarios

Hace unos meses lanzamos la primera versión beta de búsqueda directa. Este nuevo producto explora el concepto de retroalimentación en tiempo real, al instante la entrega de respuestas a los usuarios con cada pulsación de tecla. Dada la diversidad de la audiencia de Yahoo! 's, hemos querido hacer de búsqueda directa lo más accesible posible. Inicialmente, se creía que esto sería una tarea fácil ya que este producto se basa en YUI 3, una biblioteca de JavaScript con la accesibilidad al horno en su ADN. Contrario a mis expectativas como un ingeniero, esta tarea resultó ser más difícil de lo que esperábamos.

Presentación de búsqueda directa

A pesar de la búsqueda directa se construye desde la base utilizando la infraestructura de YUI componente, su interfaz más visiblemente prominentes se basa en el widget de YUI Autocompletar , que incluye muchas características de accesibilidad a la derecha de la caja. Sugerencias relacionadas con una consulta en particular se muestran en esta aplicación de autocompletado. Búsqueda directa también cuenta con un panel de contenido, también conocido como el panel de rica, donde se muestra el contenido de la sugerencia relacionada con el. La intención del panel de rica es proporcionar una respuesta directa al usuario cuando una sugerencia de la lista Autocompletar está activada.

Un nuevo conjunto de sugerencias que se muestran en la lista de cada golpe de teclado, y la primera sugerencia es seleccionado por defecto. Esta selección por defecto se llama una selección blanda. Selecciones suaves y de las interacciones posteriores con la lista de sugerencias dictar el contenido que se representa en el panel de rica. En realidad, las cosas son un poco más complicado (optimizaciones de rendimiento, las capas adicionales de caché, etc), pero en aras de la simplicidad, podemos asumir que este es el flujo de trabajo común.

Las características de accesibilidad

En la búsqueda de hacer accesible la búsqueda directa, nos fijamos en la aplicación de Asistente de búsqueda, una tecnología pionera que Yahoo! hace unos años, así como las características de accesibilidad nativas de YUI.

Después de esta investigación, los tres principales características de accesibilidad se han propuesto para la búsqueda directa:

• Uso de la utilidad de Internacionalización YUI para servir contenido localizado.
• Establecer role y la aria-* atributos de los elementos dentro del widget de autocompletado, que necesitan ser identificados y procesados ​​por los lectores de pantalla.
• El uso de un escondido div que representa una región en vivo ( aria-live ) para notificar al usuario cuando ocurre algo. Por ejemplo, el número de sugerencias disponibles, la sugerencia seleccionada, etc

El plan era para notificar al usuario de cualquier cambio en la interfaz de búsqueda directa, y proporcionar un conjunto de atajos de teclado para navegar por los componentes visuales siguientes:

• Cuadro de búsqueda
• Botón Enviar
• Lista de sugerencias
• Panel de Rich

Suena como una brisa, ¿no? Bueno, vamos a dar un paso atrás.

El problema

Lo que tenemos aquí son dos procesos asíncronos, una de ellas para actualizar el conjunto de la sugestión y el otro para la recuperación de las respuestas correspondientes - y los dos son muy rápidos. Estamos hablando de finales 250ms hasta el final. Puesto que la interfaz está cambiando a un ritmo tan rápido, no perder de vista todo lo que puede ser difícil para un usuario de lector de pantalla. Se pone un orden de magnitud más complicado cuando las actualizaciones ocurren en una máquina asíncrona, casi en tiempo real forma. Debido a que el lector de pantalla fue la notificación de cualquier cambio en la interfaz, la charla que resulta hace difícil dar sentido a lo que estaba pasando.

A falta de una solución aceptable, que empezó a colaborar con el gurú de Yahoo! 's de accesibilidad residente, Víctor Tsaran ( @ vick08 ) para tratar de llegar a algo mejor.

La primera vez que vimos a Víctor interactuar con búsqueda directa, que fue inmediatamente claro para mí que la mayoría de su atención se centró en el panel de rico, en lugar de la lista de sugerencias. Esto fue una sorpresa para mí, como hemos visto en la lista como "la fuente de la verdad". Durante una de nuestras sesiones, que tuvo un golpe de suerte cuando nos pasó a deshabilitar todas las características de accesibilidad de la lista. Tan pronto como el ruido introducido por la lista fue cortada, de búsqueda directa comenzó a tener sentido a Victor!

¿Cuántos usuarios de lectores de pantalla perciben de búsqueda directa

Después de darse cuenta de que estábamos tratando de resolver el problema equivocado, nos fuimos de nuevo a la historia de usuario original: "A medida que un usuario, puedo obtener una respuesta mientras escribo". Obtener la respuesta en el usuario era la prioridad. Después de redefinir el problema, nos hemos concentrado nuestros esfuerzos en la implementación de accesibilidad en el lector de pantalla priorizado el contenido del panel ricos sobre la lista de sugerencias.

Por ejemplo, si el usuario escribe "miami wea" , el lector de pantalla les diré dos cosas:

• 10 sugerencias.
• Del tiempo en Miami, FL. HOY, Parcialmente nublado, 89 ° F 77 ° F. MAÑANA, Parcialmente nublado, 90 ° F 74 ° F ...

A continuación, se continúa leyendo el resto del contenido del panel rico. El usuario no necesita saber todas las 10 sugerencias al frente, cada vez que las actualizaciones de la lista. Si quieren saber, la información es fácilmente accesible a través de la navegación mediante teclado.

Para asegurarse de que la lista de sugerencias es la adición de valor a la experiencia, nos aseguramos de que la primera frase en el panel de rica está estrechamente relacionada con su propuesta correspondiente. Por ejemplo, basándose en el ejemplo anterior, "weather miami" es la frase por primera vez en el panel de rica a la sugerencia: "El clima de Miami".

Víctor Tsaran, del Laboratorio de Accesibilidad de Yahoo!, muestra cómo funciona en Firefox con la pantalla NVDA lector:

La experiencia de lector de pantalla para nuestra aplicación es más fácil de seguir ya que ahora sólo se centran en los siguientes dos componentes visuales:

• Cuadro de búsqueda
• Panel de Rich

Los cambios en la lista de autocompletar en su conjunto ya no se registra y el botón de envío se tiene en cuenta ya que el usuario siempre puede pulsar enter para la consulta actual o usar un atajo de teclado (Tilda clave de acceso: [control, alt or shift] + ~ ) para cambiar entre el elemento de entrada y el panel de rica. Estas opciones de navegación del teclado se revela al usuario cuando el cuadro de búsqueda es reconocida por el lector de pantalla.

Desde el punto de vista de ingeniería, este cambio simplifica enormemente las cosas. El importe de la manipulación del DOM en el componente más activo se redujo drásticamente, mejorando el rendimiento global de búsqueda directa. He aquí un ejemplo de la aplicación:

 SDAAria función () {
     var nodo = this._liveRegion Y.Node.create = ('<div role="status" class="off-screen" aria-live="assertive"> </ div>');
     / / Se crea la región de ARIA en vivo ...
     Y.one ('body') append (nodo).;
     / / Escuchar el aria: mensajes en vivo para actualizar la región en directo
     this.on ('aria: en vivo ", this._handlerMsg, this);
     / / Escuchando chismes: actualización para anunciar cuántas sugerencias
     this.on ('cotilleo: actualización ", this._handleGossipRefresh, this);
 }
 SDAAria.ATTRS = {
      cuerdas: {
          valueFn: function () {
              volver Y.Intl.get ('sd-aria');
          }
      }
 };
 SDAAria.prototype = {
     _ariaSay: function (stringID, info) {
         var message = this.get ("cadenas". + stringID) | |'';
         this._liveRegion.setContent (? submarinos Y.Lang.sub (mensaje, info): mensaje);
     },
     _handlerMsg: function (e) {
         if (e.id) {
             this._ariaSay (e.id, e.subs);
         }
     },
     _handleGossipRefresh: function () {
         var size = this.get ('sugerencias') size ().;
         this._ariaSay (tamaño (> 0 'SUGERENCIAS':? NO_SUGGESTIONS '), {
             n: tamaño
         });
     }
 };

Las lecciones aprendidas

Al crear una interfaz accesible, es importante hacer las preguntas correctas. Hacer que cada pedacito de su solicitud de acceso puede no ser el enfoque correcto.

Solicite información a principios de los usuarios de lectores de pantalla - no asuma que usted tiene sus bases cubiertas hasta obtener alguna respuesta de los usuarios. Utilizando todas las herramientas y características a su disposición no puede tener el efecto deseado.

Los usuarios de lectores de pantalla pueden tener dificultades para hacer el seguimiento de actualizaciones en tiempo real, sobre todo si los lectores de pantalla son bombardeados con las notificaciones. En estos casos, menos puede ser más. Identificar y enfocarse en lo que es importante para el usuario en lugar de tratar de replicar la experiencia en bruto de la aplicación para el lector de pantalla.

Sobre el autor: Caridy Patiño, director Frontend para Yahoo! Search Direct. Ha sido desde hace mucho tiempo colaborador de YUI y creador de Burbujas de Extensión Biblioteca YUI, así como blogger invitado en YUIBlog.com compartir algo de su amplia experiencia en la construcción de aplicaciones web de alto rendimiento. Estrategias de carga, las arquitecturas basadas en eventos y SSJS son algunos de los temas en los que pasa la mayor parte Caridy de su tiempo en estos días.

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!