Interfaz de usuario de Yahoo! Blog (YUIBlog)

Sideline Edificio: Lecciones de YUI Adobe AIR +

Alguna vez se preguntó lo que la gente está diciendo en este momento acerca de su empresa, marca, servicio, producto, etc? Sideline , inspirado en un proyecto de corte interna reciente de Yahoo!, va más allá del proceso del cliente encuesta estándar que le permite escuchar en tiempo real a las personas hablar de sus productos y luego usar esa información para mejorar su servicio o ayudar a los usuarios con sus problemas.

En pocas palabras, los objetivos de nuestro proyecto fueron

• Crear una aplicación de escritorio que permite la creación, la agrupación, y auto-realización de consultas de búsqueda avanzadas en contra de Twitter
• Aprovechar las actuales conjuntos de habilidades y herramientas
• Objetivo para el Windows, Mac OS X y sistemas operativos Linux y reducir al mínimo la cantidad de código específico de la plataforma que debe ser por escrito
• El código abierto del código para que otros puedan aprender, contribuir y / o ampliar el producto como ellos lo consideren necesario

Nuestro equipo de ingenieros de front-end son expertos en JavaScript, CSS, HTML y PHP, pero no tenía una gran experiencia en el desarrollo de aplicaciones de escritorio. Así que la pregunta se hizo, cómo aprovechar al máximo nuestras actuales conjuntos de habilidades para el desarrollo de escritorio? La respuesta para nosotros fue la de utilizar la plataforma Adobe AIR , que "permite a los desarrolladores usar tecnologías Web comprobadas para crear aplicaciones ricas de Internet que se ejecutan fuera del navegador en varios sistemas operativos". Puesto que el aire compatible con HTML / JavaScript de desarrollo (además de Flex y Flash), podríamos construir nuestra aplicación en las tecnologías web tradicionales, en la parte superior de YUI , y que se ejecute en los tres principales sistemas operativos de escritorio.

YUI Grids en AIR

Sideline contiene una aplicación completa de la biblioteca de YUI. Cabe esperar que debería servir como un gran ejemplo para otros desarrolladores interesados ​​en experimentar con YUI y Adobe AIR. El diseño de la aplicación se construye utilizando cuadrículas YUI e incluso hace uso de las funciones Landmark recientemente agregados ARIA . Rejillas funcionado muy bien en el ambiente de aire e hizo el rediseño que se produjeron a mediados de desarrollo fácil de implementar con un mínimo de cambios en el código. Al igual que en el entorno del navegador estándar, YUI Grids pueden servir como una gran base para una aplicación de AIR, incluso si el promotor decide no utilizar el resto de la biblioteca de JavaScript y optó por otro marco en su lugar.

YUI componentes en AIR

Además de las rejillas, Sideline también utiliza el Dom , eventos , arrastrar y soltar , JSON , selectores , los contenedores , los botones , los menús , los deslizantes y TabView componentes. Me complace informar de que todos los componentes YUI funcionó muy bien en el ambiente de aire y no requería de modificaciones. Sideline hace poner en práctica un diseño bastante personalizada y por lo tanto un pelado personalizada de los componentes YUI era necesaria, pero no hay modificaciones fundamentales. La mayoría de las aplicaciones de AIR tienden a tener una aplicación de escritorio rico sentir a ellos. Para este nivel de personalización, el artículo desollado YUI es una gran referencia para empezar.

Más allá del navegador

Una importante mejora de la plataforma Adobe AIR en el entorno de la web tradicional, es el acceso a una base de datos local SQLite y el sistema de archivos del usuario. Acceso a la base de datos local es cada vez más disponibles en entornos web tradicionales a través de la tecnología, como Gears y HTML 5 de almacenamiento del lado del cliente, pero por ahora estas soluciones no están en todas partes. Para aquellos interesados ​​en el desarrollo de AIR, Sideline ha abordado muchas de las tareas comunes que una aplicación de AIR típico puede requerir, por ejemplo, ir a buscar los datos externos, el manejo de actualizaciones de aplicaciones, interactuando con la base de datos local, trabajando con el sistema de archivos local, el lanzamiento de las ventanas nativas del navegador, mostrar notificaciones de escritorio, etc debe ser una referencia útil a este respecto.

Consejos para el Desarrollo AIRE

1. Conozca a su medio ambiente. AIR utiliza el motor WebKit de código abierto motor de navegación bajo el capó. Desarrollo web tradicional tiene como objetivo hacer un trabajo de aplicación o el sitio a través de mayor número de navegadores y sistemas operativos como sea posible. ¿Qué navegadores de apoyo por lo general se reduce a un factor de coste en comparación con el uso. Sin embargo, la codificación de un motor de renderizado a un único reduce la necesidad de preparar y probar en contra de la slue de combinaciones posibles en el mercado. Dicho esto, todavía tiene sentido para desarrollar de una manera multi-navegador siempre que sea posible, ya que puede llegar un momento en que la aplicación necesita para encontrar su camino de regreso a un entorno de navegador más tradicional. Usando un marco como YUI hará que el proceso relativamente sencillo. Es fácil de ver los navegadores y plataformas soportadas actualmente por YUI a través de la tabla de Soporte del navegador gradual . Los desarrolladores deben estar bastante seguros de tomar algunos atajos básicos en la construcción de aplicaciones de AIR (con -webkit-border-radius hace esquinas redondeadas de una brisa), pero usarlos con moderación y documentarlos para que sean fáciles de ver más adelante.
2. Durante el desarrollo de una aplicación compleja en cualquier entorno de un sólido conjunto de herramientas de depuración es un must-have. Adobe ofrece algunas herramientas útiles para depurar el aire de la caja. Los desarrolladores deben investigar la AIR Debug Launcher (ADL) , el Introspector HTML , y el visor de código fuente HTML . Además de las herramientas integradas, Aptana Studio con su plugin de Adobe AIR demostrado ser un activo indispensable. El plugin de Aptana ofrece asistencia con la creación de un proyecto AIR, la importación de los marcos comunes de JavaScript, depuración, envasado / exportador, y la firma digital de la aplicación.
3. No te olvides de las técnicas de actuación que hemos aprendido desde el entorno de navegador estándar (es decir, optimizar sus imágenes, y combinarlos minify CSS de la aplicación y los archivos JavaScript, y para grandes aplicaciones basadas en eventos como la línea lateral, se aproveche de las técnicas de delegación de eventos ) . Las aplicaciones de AIR se ejecutan en el escritorio y lo que no hay indulgencia un poco más con el rendimiento que en el entorno del navegador normal, pero recuerde que al igual que el propio navegador, el contenedor de AIR también consume una porción de la memoria del sistema incluso antes de patadas de la aplicación de código personalizado en .

El camino por recorrer

La versión beta de Sideline se puede instalar en http://sideline.yahoo.com . El código es de código abierto bajo los términos de la licencia BSD y alojado en GitHub . Damos la bienvenida a las contribuciones, la retroalimentación y / o sugerencias. Además, en el espíritu de mantener las cosas lo más abierto posible y el apoyo a las tecnologías emergentes que probablemente portará la línea lateral a titanio en el futuro cercano. Algunos trabajos iniciales ya se ha hecho en el puerto y continuará en las próximas semanas. También es muy posible que Sideline va a terminar la implementación de un ORM JavaScript como JazzRecord para facilitar las interacciones a través de plataformas de bases de datos. Si alguien tiene consejos adicionales para el apoyo a múltiples plataformas nos encantaría escucharlos.

Ahora seguir adelante y que la horquilla !

Buscar conversaciones: Bloglines | technorati

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

Enfoque de Aplicación: DocLanding

Buscar conversaciones: Bloglines | technorati

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

La construcción de un rápido buscador de personas de Flickr con YUI Autocompletar

En Flickr , hemos añadido un nuevo selector de personas widget a algunas de nuestras páginas, esta función se basa en el control de YUI Autocompletar . El widget de selector permite a nuestros miembros para seleccionar las personas de su lista de contactos, que pueden contener más de 20.000 entradas. Debido a la gran cantidad de datos involucrados, las técnicas tradicionales para buscar y analizar los datos no eran viables, sobre todo debido a la lentitud extrema veces analizan. En este post, vamos a echar un vistazo a algunos de los diferentes formatos de datos que hemos intentado y en la configuración de Autocompletar nos encontramos a ser mas potente.

En primer lugar, aquí hay un resumen en video de lo que estábamos tratando de lograr, la nueva interacción con el widget de buscador de gente se representa a la derecha:

Obtención y análisis: XHR y datos personalizados

El mayor desafío fue encontrar un formato de datos que sería fácil de descargar, rápido para analizar, y - sobre todo - seguro. En primer lugar, trató de XML y AJAX, pero el análisis de XML demostrado ser mucho más lento - de hecho, hemos encontrado que este enfoque podría provocar la caída del navegador en los conjuntos de datos más grandes. A continuación se trató de una combinación de JSON y Ajax, lo que fue significativamente más rápida, pero todavía tardó más de 80 segundos para analizar nuestro mayor conjunto de datos (una matriz que contiene alrededor de 10.700 objetos, cada uno con varias propiedades).

Al final, nos encontramos con dos de transporte / analizar las técnicas que resultaron ser muy rápido:

1. Obtención de JSON (envuelto en una función de devolución de llamada) generados dinámicamente usando etiquetas de script;
2. el análisis de un formato de datos personalizado (una lista delimitada por el control de caracteres) con split() , alcanzó con el Ajax (usando el Administrador de conexión YUI ).

Al final, nos fuimos con el formato personalizado. Formateo de nuestra JSON para que pueda ser ejecutado por una etiqueta de script dinámico es un método menos seguro y no una victoria de rendimiento. Usando XHR nos dio una solución más segura y todavía muy performante.

Interacción con el Usuario: YUI Autocompletar

Una vez que tuvimos una forma de obtener los datos en JavaScript con rapidez, el siguiente reto era crear una manera para que al usuario buscar rápidamente a través de la lista de contactos. Para lograr esto, se volvió al control de Autocompletar de YUI. Se cumplió con nuestras necesidades con exactitud: muy rápido y muy configurable. Para usarlo con nuestros datos personalizados, hemos creado una función que se utiliza como ejemplo Autocompletar DataSource, cada pulsación de tecla en el widget activa esta función y pasa en la cadena de búsqueda. Dentro de esta función, el ciclo que recorre todos los contactos de los miembros y tratar de coincidir con la consulta en cuatro campos diferentes. Hemos utilizado las expresiones regulares para hacer la correspondencia de cadenas.

Incluso para los grandes grupos de contactos, hemos encontrado que esta técnica sea extremadamente eficiente. Esta es la versión básica de lo que hicimos:

  función de searchContacts (query) {

        partidos var = [],
            queryRegEx = new RegExp (consulta, 'i'), / / ​​consulta debe ser
                                                 / / Comprueba antes de 
                                                 / / Uso de una expresión regular.
            ponerse en contacto;

         for (var n = 0, len = contacts.length; n <len; n + +) {

                póngase en contacto con los contactos = [n];

                if (contact.username.search (queryRegEx) == -1! | |
                    ! contact.realname.search (queryRegEx) == -1 | |
                    ! contact.emailAddress.search (queryRegEx) == -1 | |
                    contact.alias.search (queryRegEx)! == -1) {
                        matches.push (contacto);
                }
        }

        volver partidos;
 } 

Una vez que tuvimos los datos relacionados con el widget, hemos hecho un cambio en la configuración por defecto de Autocompletar: Fijamos el queryDelay parámetro a 0 (el valor predeterminado es 200 ms). Esto significa que no habrá ningún retraso entre una pulsación de tecla y una búsqueda que se inició. Hay aspectos negativos de este (la pantalla Autocompletar tiende a parpadear un poco si escribir unos pocos caracteres en rápida sucesión), pero nos pareció que para ser la más grande mejora que hicimos, más importante incluso que las optimizaciones a nuestra función de búsqueda. Mientras que un queryDelay de 200ms o más podría ser más apropiado para XHR o de otro tipo DataSources a distancia, encontramos que nuestro origen de datos basado en expresiones regulares con los datos locales era a la tarea de buscar en cada golpe de teclado. Con la función Autocompletar, que nos dieron el almacenamiento en caché sin agregar a la mezcla de manera que cualquier búsqueda sólo tendría que hacerse una vez.

Más detalles sobre todas estas técnicas, incluyendo todos los detalles sobre los diferentes formatos de datos y los datos de amplias capacidades de personalización para cada uno, se puede encontrar en la code.flickr blog.

Buscar conversaciones: Bloglines | technorati

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

En el salvaje de 25 de marzo 2009

Noticias y notas de la comunidad de YUI en las últimas semanas. Háganos saber en los comentarios lo que nos perdimos, y lo tendremos la próxima vez:

• Ross Harmes de YUI Autocompletar y el Buscador de Personas Flickr : Flickr Harmes Ross tiene un artículo interesante en el blog Código de Flickr de hacer super-rápida y sugieren la creación de la función de la gente de Flickr Finder. Ross analiza en detalle el proceso que utiliza para procesar con rapidez las listas de contactos en el cliente, lograr que en JavaScript. A partir de ahí, se volvió a Jenny Donnelly YUI Autocompletar : "[Con la] serie de contactos en JavaScript, que necesitaba una manera de buscar a través de ellos y seleccionar uno. Para ello, hemos utilizado un excelente widget de Autocompletar de YUI. Para obtener los datos en el widget, hemos creado un origen de datos objeto de que se ejecute una función para obtener resultados. Esta función de retransmisión a través de nuestra gama de contacto y corresponden a la consulta dada en contra de cuatro diferentes propiedades de cada contacto, utilizando una expresión regular (RegExp objeto resultó ser muy bien adaptado para ello, con el tiempo de búsqueda promedio de 10.000 para el caso de los contactos que viene en virtud de 38ms). Después de que los resultados han sido recogidos, el widget Autocompletar se encargó de todo lo demás, incluyendo el almacenamiento en caché de los resultados. "
  
• W3C sitio beta usando Perdí YUI y Fuentes : Nicole Sullivan escribió para decirnos que Perdí YUI y Fuentes son parte del rediseño del W3C nuevo sitio, que usted puede ver aquí. El sitio también utiliza Nicole OOCS trabajo.
  
• Sitio de Kellogg Brasil construyó con conexión de YUI, animación y mucho más : Brasil, Kellogg sitio web implementa una variedad de componentes YUI. Nos dimos cuenta de Connection Manager , Animación , Get , y más, todo viene abajo a través de una única combinación de mango URL de yahooapis.com. Niza. ( Fuente original. )
  
• Avistamiento de YUI - Greenbookings.com, Sitio Sustainable Travel : Yvo Schaap nos escribió para contarnos acerca de Greenbookings.com , un sitio de viajes recientemente lanzado que se centra en el mundo emergente de turismo sostenible. Al reservar a través de Greenbookings, se caclulate y le permitirá compensar la huella de carbono generada por sus viajes. Escribe Yvo: "He estado trabajando con el marco de YUI durante mucho tiempo y ayer lanzó mi nuevo sitio web greenbookings.com que tiene casi todos los módulos del marco en el uso de: calendario, fichas, tabla de datos , la historia natural intervalo de + , las redes, autocompletar, y muchos más. También un gran esfuerzo ha sido gastar en una carga de la página muy rápido mediante la eliminación de todas Javascript de la cabecera hasta la parte inferior de la página. "Nos encanta el sitio y el uso de la contribución de John Peloquin de YUI, el calendario de intervalo para la selección de la fecha .
  
• Avistamiento de YUI - Sitio infinito juego de palabras cruzadas : Marco Egli nos escribió para contarnos acerca de una nueva versión de Crossword Infinito, un sitio de juego utilizando una amplia gama de servicios YUI y widgets. "El viernes pasado una nueva versión del crucigrama infinito fue puesto en libertad. Es la primera versión que está disponible en Inglés. Se trata de un crucigrama infinito que se agota por completo en el navegador. Existen distintos tipos de componentes YUI se utilizaron para el desarrollo, incluyendo la animación, botones, Connection Manager, DataTable, JSON, menús y mucho más. El juego tiene como objetivo el desarrollo de el puzzle más grande del crucigrama en el mundo. Los usuarios pueden jugar y añadir sus propias preguntas. Es una mezcla de palabras cruzadas y el scrabble ". Echa un vistazo a el juego aquí , asegúrese de iniciar sesión y luego usar los menús en la parte inferior de la pantalla para añadir sus propias preguntas.
• "Interfaces de usuario ricas Yahoo Web para desarrolladores de Java" DevX, : DevX tiene un nuevo artículo para desarrolladores de Java interesados ​​en YUI . Escribe Narayanan AR: " Este es el primer artículo de una serie de tres partes que se dirige principalmente a los desarrolladores de Java que no son expertos en JavaScript, pero se están desarrollando aplicaciones web con marcos del lado del servidor (por ejemplo, JavaServer Pages, puntales, o de primavera). En esta entrega, los novatos de JavaScript verá cómo utilizar YUI para la configuración y diseño, y debe aprender mucho sobre programación orientada a objetos JavaScript. Para los desarrolladores ya los expertos en JavaScript, esta serie de artículos sirve como una introducción a la biblioteca de YUI. "
• Video: "YUI de Control Freaks" con Christian Heilmann : El equipo tiene Ajaxian YUI Christian Heilmann hablar hasta en video; se echa un vistazo aquí o en el reproductor incrustado a continuación.
  
• YUI Autocompletar y Calendario en Turquía Sitio Aerolíneas : Cagatay Cívicos escribió en decirnos sobre el uso del sitio de líneas aéreas de Turquía de YUI Autocompletar y el calendario de su herramienta de reserva. Muchos sitios de web han utilizado esta combinación en los últimos años; Southwest.com fue uno de los primeros en adoptar el calendario de YUI y continúa utilizando una de las versiones originales de calendario en su sitio de reservas actual. sitio de viajes de Yahoo es otro buen ejemplo de forma en que estos aparatos se pueden utilizar juntos - que fue implementado por YUI ImageLoader autor Mlinac Matt. ( Fuente original. )
• Caridy Patiño Mayea: "YUI3: control de los eventos clave Strokes (KeyUp, KeyDown, KeyPress)" : Caridy (autor de las populares Biblioteca Bubbling extensiones para YUI) tiene un nuevo blog publicaremos en el manejo de los eventos clave en el YUI 3 . ( Fuente original. )
• Balsamiq maquetas para los componentes de YUI : Las maquetas to Go blog tiene varios componentes YUI se burló usando la interfaz de Balsamiq, incluyendo menús y botones , los calendarios , y Carruseles . ( Fuente original. )
  
• Más de Matt Snider de YUI-EXT-MVC : Matt ha continuado el trabajo sobre su YUI-EXT-MVC proyecto . Según Mateo, "el beneficio de usar sistema de las clases de controlador de AJAX es que simplifica la conexión Administrador de YUI y un desarrollador puede pre-registrar las devoluciones de llamada, lo que garantiza el tipo de la respuesta esperada. Está disponible en http://code.google.com/p/yui-ext-mvc/source/browse/trunk/assets/js/mvc/lib/controller.js . En el futuro me va a agregar lógica de mando patrón para ir a buscar los datos JSON y HTML desde el servidor. "
  
• Geo Pablo Tarjan de Explorer con YQL y YUI : SearchMonkey ingeniero Pablo Tarjan tiene una interesante demostración usando YUI TabView y Yahoo Maps Ajax API para mostrar los resultados de una búsqueda YQL geográfica . La interfaz le permite introducir un nombre de lugar y luego buscar ese lugar, hermanos, que la ubicación de los antepasados ​​que la ubicación, etc Para el contexto más amplio y por qué esto es interesante, ver post PHP Rasmus inventor Lerdorff el blog sobre el tema . ( Fuente original. )
• Meg Smitley - "cargar dinámicamente YUI Dependencias" : Meg escribe (en Meglog) : "He estado usando YUI Grids y LayoutManager para la columna vertebral de la interfaz de mi aplicación desde el fin del año pasado. Ha sido una empinada curva de aprendizaje y yo todavía me considero novato en gran medida y, de hecho, sólo se nota esta semana en la pestaña "carga dinámica" en el Configurador de YUI . En lugar de estáticamente incluyendo la requerida CSS YUI y recursos de JavaScript, es posible utilizar YUILoader a dinámicamente importar la carga. Aunque aprecio que YUI los expertos no se sentirán impresionados por mi YUILoader-epifanía, este método me ha ayudado a bajar de peso JS mi aplicación a la vez que disminuye las preocupaciones de mantenimiento y por lo tanto creo que es importante mencionar para el beneficio de noobs otros. " Echa un vistazo a su artículo para más detalles .
• Uso de carrusel con SugarCRM : Roger Smith tiene un tutorial en el blog de ​​desarrolladores de SugarCRM que proporciona "una personalización rápida y sencilla ListView que aprovecha el widget de Carrusel de la interfaz de usuario de Yahoo (YUI) biblioteca . Esta personalización cambia por completo la apariencia de la ListView contacto de un 'filas y columnas de vista de los resultados de la búsqueda a una vista de carrusel Yahoo UI. La biblioteca de YUI está incluido en SugarCRM y ofrece un montón de características de interfaz de usuario más allá de lo que usamos en la aplicación principal. "
  

Buscar conversaciones: Bloglines | technorati

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

Georgiann Puckett: YUI / ASTRA Gerente de Programa (AdaLovelaceDay09)

[Nota: Este post es parte de la participación del equipo de YUI en el Día de Ada Lovelace , una celebración de los técnicos en todo el planeta.]

Georgiann Puckett (mejor conocido como "George") sirve como el director del programa de YUI y proyectos afiliados (incluyendo la biblioteca ASTRA). Programa de gestión de complejos programas técnicos que comprenden múltiples proyectos es uno de los trabajos más exigentes en una empresa de software, y George es ideal para el desafío. Ella trae a la mesa de una inteligencia rápida, la paciencia y la disciplina para manejar grandes flujos de datos, y una comprensión profundamente arraigada de los procesos mediante los cuales los programas exitosos de software se sustentan. Su experiencia sirve aquí también - como C / C + + veterano de la ingeniería, que puede identificarse directamente con las experiencias de los ingenieros con los que trabaja.

Comunicados de YUI salir con cientos de cambios, muchos de los cuales han sido sugeridos o aportados por los desarrolladores de todo el mundo. Desde que se incorporó al equipo hace dos años, George ha revolucionado la forma en toda esa información se maneja. Eso ha dado lugar a una mejor previsión, una mejor comunicación y una mejor calidad en todos los ámbitos.

George también ha proporcionado el liderazgo encomiable para el equipo de YUI en el apoyo a grandes proyectos internos en Yahoo. Cuando se designe a un proyecto interno como una "gran apuesta", algo fundamental para el futuro de la empresa, que se unen con el equipo del proyecto de ingeniería interfaz y asegúrese de que estamos haciendo todo lo posible para apoyarlos. George gestiona estas relaciones, asegurando que nuestros colaboradores conseguir a tiempo y bien documentados, y las versiones de que sus prioridades se reflejan con precisión en nuestros planes de liberación. Tener la capacidad de entender las necesidades de los diversos proyectos de y para faciliate nuestras colaboraciones de éxito es un gran desafío, y George ha hecho necesario el levantamiento pesado para asegurarse de que YUI y los ingenieros de ASTRA están proporcionando el apoyo adecuado en el momento adecuado a través de Yahoo.

Hablando de palpitante de elevación .... George es bien conocido en Yahoo como un técnico excepcional y un incansable defensor de YUI, pero también es bien conocido por los que frecuentan el gimnasio de Yahoo de los empleados. Usted encontrará George allí cuatro o cinco noches a la semana trabajando para mejorar su propio récord mundial se forman en las pesas.

El trabajo de George y su compromiso general con la excelencia sin duda ha inspirado a todos los que trabajamos con ella durante los últimos años. Le pregunté a George que la había inspirado y la envió por el camino hacia una carrera en tecnología.

¿Cuál fue su primera experiencia con las computadoras?

Yo tenía la intención de entrar en una pista de pre-medicina en la universidad y tuve un curso de Cálculo AP mi último año como parte del plan de estudios de preparación para la universidad. La suerte quiso que el maestro obtuvo una beca de dos ordenadores de Apple como parte de un ensayo para enseñar programación a nivel de escuela secundaria. No sólo lo conseguimos - tenemos competencia en él tratando de hacer las funciones más robustas con la menor cantidad de código. El primer curso de electrónica digital en la universidad, donde llegué a los circuitos del programa en un circuito utilizando el lenguaje ensamblador selló el acuerdo.

¿Tuvo algún tecnólogo modelos femeninos de conducta que influyeron en usted?

Hay dos mujeres con las que he trabajado que me han impresionado y aprendí mucho de. Darragh Muldoon, co-fundador de Software de Cricket, me contrató fuera de la universidad en la aventura, con mucho, el más asombroso inicio de mi carrera. Ella no se fue un técnico de por sí, pero he aprendido mucho de ella con respecto a sus habilidades de la gente en las principales técnicas de la gente, la construcción de equipos, y hacer crecer una empresa. La otra mujer a quien admiro y aprendí de Sheila fue Brady, quien emergió de las filas de nivel de director en la división de Apple del software del sistema. Ella definitivamente sabía cómo conducir un comunicado, en muchos casos, los principales equipos compuestos en su mayoría de ingenieros de sexo masculino. Ella exhibió un nivel de confianza, competencia y agresividad que puede ser apreciado por cualquier ingeniero - hombre o mujer.

Buscar conversaciones: Bloglines | technorati

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

Jenny Han Donnelly: Ingeniero de YUI (AdaLovelaceDay09)

[Nota: Este post es parte de la participación del equipo de YUI en el Día de Ada Lovelace , una celebración de los técnicos en todo el planeta.]

Jenny Han Donnelly is the author of three YUI components:

1. The DataTable Control : YUI's DataTable is one of our signature UI widgets, providing a powerful menu of interactive options for tabular data.
2. The AutoComplete Control : AutoComplete provides typeahead, suggest, filtration and combo-box functionality to any text input area.
3. The DataSource Utility : Shared by DataTable, AutoComplete and the Charts Control , DataSource serves as a conduit between widgets and potential sources of data — including server-side data, JavaScript arrays, and DOM structures like HTML tables.

Jenny's work inspires us in part because of the technical challenges she takes on — try getting fixed headers with xy scrolling to work in IE6 using a semantically sound base table sometime, if you have any doubts. Jenny has taken on some of the most complex HCI challenges anywhere in YUI and engineered them to suit virtually any environment. DataSource enables other YUI components to work with anything from flat files to JSON and XML to JavaScript arrays and DOM structures. We've heard from thousands of people on the YUI forums using all of these features and more in ecclectic and novel ways.

We're also inspired by the organizational leadership Jenny has shown in her time at Yahoo. Currently, she's the lead editor of YUIBlog, bringing technical voices from throughout Yahoo to these pages to share their insights. She has also organized our annual frontend engineering summit at Yahoo, bringing hundreds of Yahoo engineers from around the world together in a rich weeklong technical conference. She's taught weeklong YUI courses to engineers in the USA, Korea and Japan, and she's been an integral member of the hack day group at Yahoo that's such an important part of our engineering culture.

Whether she's coding, writing, teaching or leading — all of which are aspects of the modern technologist's job description — Jenny sets a high bar with her intelligence, dedication, imagination and wit. Ada would be proud.

[ photo of Jenny used by kind permission of Stephen Woods ]

Buscar conversaciones: Bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

Survey: When is an Accordion not an Accordion?

I'm looking for feedback from people who have designed or built an interface using an “accordion” module (or are considering doing so). You see, I've been working on a design pattern for accordion modules, and I'd like to throw out a handful of open questions to the community via this brief survey . I'll be listening elsewhere as well, on twitter ( @mediajunkie ) and on mailing lists where web designers and developers hang out.

(I realize this is not a scientific survey. I'm just interested in engaging the wider community in a discussion instead of trying to impose my view or Yahoo!'s view on the community as authoritative.)

Everywhere I go lately, it seems that interaction designers and web developers are talking about accordion widgets and debating about what makes an accordion an accordion. Not everyone working in this field has heard the term (some may simply refer to “stacked panels” or “collapsible panels”) but most get the gist fairly easily. Ironically, none of the UI elements described as accordions share the actual behavior of a real-world accordion (the musical instrument): namely, that stretching an accordion opens all the folds evenly.

Accordions have been an on-and-off topic of discussion on the main IxDA mailing list ; we discussed them in our Pattern Library workshop in Vancouver earlier this month, and there's been an ongoing discussion about accordions on our internal designer mailing list here at Yahoo!.

So I sat down with some folks from the YUI team (and Marco, the maker of an experimental YUI accordion widget ) a little while ago to sort through a draft of an accordion pattern that might help inform the development of an official YUI component.

Broadly speaking, most people agree on what we're talking about when we talk about an accordion interface element. Everyone agrees that accordions are used to compress content into a limited space and that they consist of panels that can collapse or expand. Beyond this, there are a number of subtle nuances that not everyone agrees on.

One trend I've noticed is that front-end developers tend be agnostic about how the accordion should work, viewing it as really just a variant on a tree widget. Designers tend to be more prescriptive, saying that to be an accordion it must behave in thus and such a way (but not all designers agree on what these rules are).

In the end, the YUI folks will produce code that can be made to do just about anything. We aren't going to try to impose our own taste or preferences in design through the functionality of the code itself. However, we will use the associated pattern to make suggestions and recommendations drawn from the experience of the entire design community, and we will probably lobby for default behaviors that match what most people expect.

So, if you've got a few minutes and an opinion, please visit the survey and let me know what you think!

I'll close the survey on April 30.

Buscar conversaciones: Bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!