Sideline Bâtiment: Leçons de YUI AIR + Adobe

Mars 31, 2009 à 09:52 par le Tchad Auld | En développement , Implémentations YUI | 13 commentaires

A propos de l'auteur: Tchad Auld est un ingénieur Front-end de travail avec l'équipe Marketing Yahoo! Buzz. Un long temps open-source contributeur, il a récemment aidé à lancer le projet MiaCMS , une fourchette de prochaine génération de Mambo construit en utilisant YUI. Dans cet article, il nous guide à travers le processus d'élaboration d'une application de bureau avec YUI sur la plateforme Adobe Air.

Capture d'écran de Sideline

Vous vous demandez ce que les gens disent en ce moment sur ​​votre entreprise, marque, service, produit, etc? Sideline , inspiré par un projet de pirater internes récente chez Yahoo!, va au-delà du processus d'enquête client standard permettant d'écouter en temps réel pour les personnes parler de vos produits et ensuite utiliser cette rétroaction afin d'améliorer votre service ou d'aider les utilisateurs à résoudre leurs problèmes.

En bref, les objectifs de notre projet étaient de

  • Créer une application bureautique qui permet la création, le regroupement et l'auto-exécution de requêtes de recherche avancée contre Twitter
  • Tirer parti des ensembles de compétences et d'outils
  • Cible Windows, Mac OS X, et les systèmes d'exploitation Linux et de minimiser la quantité de code spécifique à la plateforme qui doit être écrite
  • Open source le code de sorte que d'autres puissent apprendre, contribuer à, et / ou étendre le produit comme ils l'entendent

Notre équipe de front-end des ingénieurs sont des experts en JavaScript, CSS, HTML et PHP, mais n'a pas eu beaucoup de demandes expérience de bureau en développement. Donc la question est devenue, comment maximiser nos ensembles de compétences existants pour le développement de bureau? La réponse a été pour nous d'utiliser la plateforme Adobe AIR , qui "permet aux développeurs d'utiliser les technologies web éprouvées pour construire des applications Internet riches qui s'exécutent en dehors du navigateur sur plusieurs systèmes d'exploitation". Depuis AIR prend en charge HTML / JavaScript de développement (en plus de Flex et Flash), nous avons pu construire notre application sur les technologies web classiques, sur le dessus de YUI , et l'exécuter sur les trois principaux systèmes d'exploitation de bureau.

Grilles YUI dans AIR

Sideline contient une mise en œuvre complète de la bibliothèque de YUI. Il devrait, espérons servir de bon exemple pour d'autres développeurs intéressés à expérimenter YUI et Adobe AIR. Mise en page de l'application est construite en utilisant les grilles de YUI et fait même l'utilisation des rôles ajoutés récemment Landmark ARIA . Grilles très bien travaillé dans le milieu aérien et fait refontes qui ont eu lieu mi-développement facile à mettre en œuvre avec les changements de code minimal. Tout comme dans l'environnement du navigateur standard, les grilles YUI peut servir de base idéale pour une application AIR, même si le développeur décide de ne pas utiliser le reste de la bibliothèque JavaScript et a opté pour un autre cadre à la place.

YUI composants dans AIR

En plus de grilles, Sideline utilise également les Dom , de l'événement , Drag and Drop , JSON , sélecteur , Container , bouton , menu , curseur , et TabView composants. Je suis heureux d'annoncer que tous les composants YUI extrêmement bien dans l'environnement AIR et ne nécessite pas de modifications. Sideline ne mettre en œuvre une conception assez personnalisé et donc une certaine mesure le dépouillement des composants YUI était nécessaire, mais pas de modifications fondamentales. La plupart des applications AIR ont tendance à avoir une application de bureau riche se sentent à eux. Pour ce niveau de personnalisation, l' article skinning YUI est une excellente référence pour commencer.

Au-delà du navigateur

Une amélioration majeure de la plateforme Adobe AIR sur l'environnement web classique est l'accès à une base de données locale SQLite et le système de fichiers de l'utilisateur. Accès à la base locale est de plus en plus disponibles dans les environnements Web grâce à la technologie traditionnelle tels que Gears et HTML 5 de stockage côté client, mais pour l'instant ces solutions ne sont pas omniprésents. Pour ceux qui s'intéressent au développement AIR, Sideline a abordé plusieurs des tâches courantes que d'une application AIR typique pourrait exiger, par exemple, récupérer des données externes, la manipulation mises à jour d'application, en interaction avec la base de données locales, travaillant avec le système de fichiers local, le lancement de fenêtres de navigateur natif, afficher des notifications de bureau, etc Il devrait se révéler une référence utile à cet égard.

Conseils pour le développement AIR

  1. Connaissez votre environnement. AIR utilise le moteur WebKit navigateur open source sous le capot. Développement web traditionnel vise à rendre une application ou un site de travail à travers autant de navigateurs / systèmes d'exploitation que possible. Quels sont les navigateurs de soutien vient généralement vers le bas pour un facteur de coût par rapport l'utilisation. Toutefois, codant pour un moteur de rendu unique réduit le besoin de se préparer et tester contre l'slue de combinaisons possibles dans le marché. Cela étant dit, il a encore un sens pour développer de manière cross-browser lorsque cela est possible car il peut arriver un moment où l'application a besoin pour retrouver son chemin dans un environnement de navigateur plus traditionnelles. L'utilisation d'un framework comme YUI va rendre ce processus relativement indolore. Il est simple de voir les navigateurs et plates-formes actuellement supportées par YUI via le tableau Support du navigateur Graded . Les développeurs doivent être assez sûr de prendre quelques raccourcis de base lors de la construction d'une application AIR (en utilisant -webkit-border-radius rend coins arrondis une brise), mais les utiliser avec parcimonie et les documents de sorte qu'ils sont faciles à repérer plus tard.
  2. Pendant le développement d'une application complexe dans n'importe quel environnement d'un solide ensemble d'outils de débogage est un must-have. Adobe fournit quelques outils utiles pour le débogage air hors de la boîte. Les développeurs doivent enquêter sur le débogage du lanceur AIR (ADL) , l'Introspector HTML , et la visionneuse de source HTML . En plus des outils groupés, Aptana Studio avec son plugin Adobe AIR s'est avéré être un atout indispensable. Le plugin Aptana fournit une aide à la création d'un projet AIR, l'importation des frameworks JavaScript courants, le débogage, le conditionnement / l'exportation, et la signature numérique de l'application.
  3. Ne pas oublier les techniques de performance que nous avons appris de l'environnement du navigateur standard (ie, optimiser vos images, rapetisser et se combinent CSS de l'application et les fichiers JavaScript, et pour lourde basée sur des événements des applications comme Sideline, profiter des techniques de délégation de l'événement ) . Les applications AIR s'exécutent sur le bureau et il ya donc la clémence un peu plus avec la performance que dans l'environnement typique d'un navigateur, mais rappelez-vous que le navigateur lui-même, le récipient AIR consomme également un morceau de la mémoire du système, avant même code personnalisé de l'application entre en action .

Le chemin à parcourir

La version bêta de Sideline peut être installé à http://sideline.yahoo.com . Le code est open source sous les termes de la licence BSD et hébergé sur GitHub . Nous saluons les contributions, commentaires et / ou suggestions. Aussi, dans l'esprit de garder les choses aussi ouvert que possible et de soutenir les technologies émergentes nous allons probablement le port de Sideline titane dans un proche avenir. Certains travaux préliminaires ont déjà été réalisés sur le port et se poursuivra dans les prochaines semaines. Il est également fort possible que Sideline finira en œuvre un ORM JavaScript tels que JazzRecord pour faciliter les interactions base de données sur toutes les plateformes. Si quelqu'un a des conseils supplémentaires pour soutenir les plates-formes multiples, nous serions ravis de les entendre.

Maintenant aller en avant et c'est la fourchette !

Trouver des conversations: Bloglines | technorati

Partager et prolonger: Conservez ce lien avec del.icio.us | Digg it! | reddit!

Mise en oeuvre: DocLanding

Mars 30, 2009 à 10:24 par Eric Miraglia | En implémentations YUI | 1 Commentaire

DocLanding: en ligne, gestion de documents à la demande

Fishback Todd est le président de DocLanding , une solution basée sur le Web de gestion de documents. Todd se joint à nous pour discuter sur les YUIBlog choix de son équipe d'utilitaires YUI et des widgets de l'interface utilisateur DocLanding. Vous pouvez en apprendre davantage sur DocLanding partir de sa présentation à la conférence Demo automne 2008 .

Parlez-nous un peu sur DocLanding - quels sont les problèmes centraux que vous résolvez pour vos utilisateurs?

DocLanding est une solution à la demande de gestion de documents qui fournit de classe entreprise des fonctionnalités de gestion documentaire pour une fraction du coût des solutions les plus entreprise. Le logiciel peut être livré par notre Software as a Service (SaaS) offre ou comme un système en interne. Nos clients sont principalement dans les services financiers et les arénas de la santé.

Les problèmes communs nous résolvons pour nos clients comprennent fournissant un référentiel basé sur le Web centralisé pour la main-d'œuvre distribuée, à la demande basée sur le Web à balayage à faible volume de papier des bureaux, et de bureau basé sur la numérisation par lots dans des bureaux du volume de papier. D'autres questions nous nous adressons inclure le partage sécurisé de documents et la collaboration, l'édition de documents / annotations, de contrôle de version, document commentant, et du document de tatouage. Notre approche unique de référentiels de documents contrôlés séparément mais lié permet aux utilisateurs d'accéder à des référentiels disparates avec une connexion commune.

Quelles ont été l'interface utilisateur en particulier des défis présentés par la conception de votre produit?

DocLanding: UI aperçu du document.

Nous avons appris de certains de nos travaux plus tôt que vous ne pouvez pas sous-estimer l'importance de la conception conviviale. Création d'un site est assez facile, mais de créer une application web vrai que doit répondre aux besoins des entrepreneurs est un véritable travail. Notre produit tente de prendre la gestion de documents à partir strictement du domaine de la grande entreprise et la rendre disponible à n'importe quelle petite entreprise. Gestion électronique de documents à sa base n'est pas une tâche simple. L'objectif est d'organiser et de contrôler l'accès à un nombre massif de fichiers, en plus de les rendre entièrement consultable. Pour cette raison, l'interface utilisateur est effectivement là où la majorité de nos temps de développement a traditionnellement été dépensés.

Nous avons constaté que vous allez économiser temps et argent sur les problèmes de support quand vous faites de votre site simple et facile à utiliser. Une partie de cette détente est le cahier des charges nécessaires au fonctionnement du site. Nous avons obtenu notre réduits à peu près n'importe quel navigateur moderne avec JavaScript et Flash. La conception du site fondamentales nous sommes arrivés avec ses propres défis présentés à son utilisation très spécifique de l'écran de l'immobilier. Nous avons trouvé nos utilisateurs étaient mieux en mesure de faire pleinement usage de l'application lorsque nous nous attention aux couleurs, l'iconographie et la proximité des contrôles de leur fonction. Nous pensons que nous sommes sur la bonne voie, car notre page de commentaires a retourné plus de demandes pour des fonctionnalités supplémentaires que pour les demandes d'aide.

Vous avez choisi de YUI pour aider à alimenter votre site. Que vous a conduit à cette décision?

DocLanding: gestion de documents à la demande

La réponse simple est la cohérence et la vitesse. Nous avions besoin d'un cadre qui nous permettrait de répondre aux spécifications de conception de notre produit. Plus précisément, nous avions des objectifs de conception ambitieux comme le maintien d'un point de vue un seul écran et en minimisant ou en éliminant publications pleine page. De plus, nous voulions que nos éléments nécessaires à regarder et à la fonction identique dans le plus grand nombre les différents navigateurs que nous avons pu gérer. Il ya des questions assez de cohérence entre les navigateurs et leurs méthodologies de rendu pour composer avec déjà, donc nous avons choisi un cadre nécessaire pour minimiser la quantité de navigateur spécifique de codage, nous aurions à faire. Après avoir expérimenté avec une variété d'outils différents, YUI est venu très clairement sur le dessus. Il y avait un peu d'une courbe d'apprentissage pour tous les produits, mais YUI avait la meilleure récompense.

Le cadre de base ne nécessite pas un plug-in, il joue bien avec. NET, et les scripts sont la lumière, serré et solide. Une fois que nous avons eu le coup de la charpente, nous avons trouvé qu'il éclairant de comparer nos anciens pages de l'interface traditionnelle pour les versions de YUI. Dans tous les cas, en ajustant notre méthodologie UI retour des gains énormes de la performance et la cohérence avec les plus légers téléchargements à nos clients.

DocLanding: Mult-téléchargement de fichier en utilisant YUI Uploader.

Quels composants YUI utilisez-vous le plus dans votre application?

Nous sommes en réalité en utilisant beaucoup de composants. Les plus bénéfiques ont été celles qui nous permettent de faire autant avec et sur ​​un écran que possible, de sorte que le TreeView , Menu , SimpleDialog et Layout Manager ont été extrêmement utiles. En vérité, nous utilisons presque tous les contrôles, mais nous apprécions particulièrement le contrôle Uploadeur la capacité d 'poignée de sélection de fichiers multiples. Nous avons été à la recherche d'une solution à ce problème depuis quelque temps et YUI a été le plus élégant que nous avons rencontrées jusqu'ici. Nous faisons bon usage de l' utilitaire de JSON et de Connection Manager pour minimiser considérablement la taille et le nombre de requêtes vers le serveur que nous faisons, ce qui maintient notre empreinte bas et surtout garde nos utilisateurs qui travaillent, pas d'attente.

Quelle est la prochaine DocLanding? Quels sont les défis que vous travaillez à l'adresse dans vos communiqués à venir?

Nous travaillons constamment pour améliorer l'ensemble des caractéristiques de notre produit. Nos utilisateurs ont demandé des fonctionnalités pour mieux intégrer la rédaction de leurs documents avec l'application principale donc nous allons prendre le temps pour cela. Nous travaillons également sur une meilleure accueillir télécharge de gros fichiers. Sinon, nous avons plusieurs idées sur la table et nous sommes pesant celles qui seraient les plus bénéfiques pour nos utilisateurs. Une version du site optimisée pour les téléphones portables et les netbooks en est au stade de conception déjà, ainsi que des outils pour importer des dossiers structurés depuis le bureau directement dans DocLanding. Expérimentalement, on jongle avec l'idée de ne stocker les métadonnées sur le site et en tirant le contenu directement à partir de machines clientes en réseau exécutant notre logiciel. Finalement, les besoins de nos utilisateurs dicteront dans quelle direction nous nous déplaçons prochaine.

Trouver des conversations: Bloglines | technorati

Partager et prolonger: Conservez ce lien avec del.icio.us | Digg it! | reddit!

Construire un rapide gens-Finder pour Flickr avec YUI saisie semi-automatique

Mars 26, 2009 à 08:59 par Ross Harmes | En développement | 1 Commentaire

Au Flickr , nous avons récemment ajouté un nouveau sélecteur de personnes widget à quelques-uns de nos pages; cette fonction est basée sur le contrôle AutoComplete YUI . Le widget des personnes-sélecteur permet à nos membres de choisir des personnes de leur liste de contact, qui peut contenir plus de 20000 entrées. En raison de la grande quantité de données concernées, les techniques traditionnelles pour récupérer et analyser les données ne sont pas réalisables, surtout à cause extrêmement lent parfois analyser. Dans ce post, nous allons jeter un oeil à quelques-uns des formats de données différents, nous avons essayé et à la configuration semi-automatique, nous avons trouvé pour être plus performants.

D'abord, voici un récapitulatif vidéo de ce que nous essayions d'accomplir, la nouvelle interaction avec le widget de personnes-finder est représenté sur la droite:

Récupération et analyse: les données XHR et Custom

Le plus grand défi était de trouver un format de données qui serait rapide à télécharger, rapide à analyser, et - par-dessus tout - sécuritaire. Nous avons d'abord essayé de XML et Ajax, mais l'analyse XML se sont avérés beaucoup pour ralentir - en fait, nous avons constaté que cette approche pourrait faire tomber le navigateur sur des ensembles de données plus importants. Suivant que nous avons essayé une combinaison de JSON et d'Ajax, ce qui était significativement plus rapide, mais il a encore fallu plus de 80 secondes pour analyser notre plus grand ensemble de données (un tableau contenant environ 10 700 objets, chacun avec plusieurs propriétés).

À la fin, nous avons trouvé deux transports / parse techniques qui s'est avéré être extrêmement rapide:

  1. Récupération JSON (enveloppé dans une fonction de rappel) en utilisant les balises de script généré dynamiquement;
  2. l'analyse d'un format de données personnalisé (une liste de contrôle délimité caractères) en utilisant split() , récupéré avec l'Ajax (en utilisant le Gestionnaire de connexion YUI ).

En fin de compte, nous sommes allés avec le format personnalisé. Formatage de nos JSON afin qu'il puisse être exécuté par une balise de script dynamique a été une approche moins sûr et non une victoire des performances. Utiliser XHR nous a donné une solution plus sécurisée et toujours très performant.

Interaction utilisateur: YUI saisie semi-automatique

Une fois que nous avions un moyen d'obtenir les données en JavaScript rapidement, le prochain défi était de créer un moyen pour l'utilisateur de rechercher rapidement à travers la liste de contacts. Pour ce faire, nous avons tourné à commande semi-automatique de Yui. Il répondait à nos besoins exactement: extrêmement rapide et très configurable. Pour l'utiliser avec nos données personnalisées, nous avons créé une fonction pour l'utiliser comme l'instance de saisie semi-automatique DataSource; chaque pression de touche dans le widget déclenche cette fonction et passe dans la chaîne de recherche. Dans cette fonction, nous avons une boucle sur tous les contacts du membre et d'essayer de correspondre à la requête sur quatre domaines différents. Nous avons utilisé les expressions régulières pour faire le string assorti.

Même pour les grands ensembles de contacts, nous avons trouvé que cette technique soit très efficace. Voici la version de base de ce que nous avons fait: 

  searchContacts fonction (query) {

        var correspond = [],
            queryRegEx = new RegExp (requête, 'i'), / / ​​requête doit être
                                                 / / Vérifié avant 
                                                 / / Utilisation dans une regex.
            contact;

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

                = contact contacts [n];

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

        matches retour;
 }

Une fois que nous avions les données liées au widget, nous avons fait un changement à la configuration par défaut AutoComplete: Nous avons fixé le queryDelay paramètre à 0 (la valeur par défaut est 200ms). Cela signifie qu'il n'y aura pas de délai entre une touche et une recherche d'être lancé. Il ya des inconvénients à cela (l'affichage Saisie semi-automatique a tendance à scintiller un peu si vous tapez quelques caractères dans une succession rapide), mais nous avons trouvé que c'était la plus grande amélioration simple nous avons fait, plus importante encore que des optimisations à notre fonction de recherche. Alors qu'un queryDelay de 200ms ou plus pourrait être plus approprié pour XHR ou d'autres sources de données à distance, nous avons constaté que notre regex basé DataSource avec les données locales a été à la hauteur de la recherche sur chaque frappe. Avec saisie semi-automatique, nous avons obtenu la mise en cache sans ajouter au mélange de sorte que toute recherche donnée ne doit être faite une fois.

Plus de détails sur toutes ces techniques, y compris les détails sur les formats de données différents et les données de profilage vaste pour chacun d'eux, peuvent être trouvés sur le code.flickr blog.

Trouver des conversations: Bloglines | technorati

Partager et prolonger: Conservez ce lien avec del.icio.us | Digg it! | reddit!

Dans le Wild pour Mars 25, 2009

Mars 25, 2009 à 09:08 par Yui équipe | Dans In the Wild | 3 commentaires

Nouvelles et notes de la communauté YUI dans la cours des dernières semaines. Laissez-nous savoir dans les commentaires ce que nous avons manqué, et nous aurons la prochaine fois:

Trouver des conversations: Bloglines | technorati

Partager et prolonger: Conservez ce lien avec del.icio.us | Digg it! | reddit!

Georgiann Puckett: YUI / ASTRA Programme Manager (AdaLovelaceDay09)

Mars 24, 2009 à 08:06 par Eric Miraglia | En développement | 1 Commentaire

Dav verre et George Puckett de l'équipe de YUI

[Note: Ce billet fait partie de la participation de l'équipe de YUI en Ada Lovelace Day , une célébration de femmes technologues du monde entier.]

Georgiann Puckett (mieux connu comme "George") sert de gestionnaire de programme pour YUI et projets affiliés (y compris la bibliothèque ASTRA). La gestion du programme des programmes complexes comprenant de multiples projets techniques est l'un des emplois les plus exigeants dans une société de logiciels, et George est idéalement adapté à l'enjeu. Elle apporte à la table une vive intelligence, la patience et la discipline pour gérer les flux importants de données, et une compréhension profondément enraciné des processus par lesquels les logiciels de succès sont soutenus. Ses antécédents sert ici même - en tant que C / C + + vétéran de l'ingénierie, elle peut sympathiser directement avec les expériences des ingénieurs avec lesquels elle travaille.

Communiqués de YUI sortir avec des centaines de changements, dont beaucoup sont suggérées ou fournis par les développeurs du monde entier. Depuis qu'il a rejoint l'équipe il ya deux ans, George a révolutionné la façon dont toute cette information est traitée. Cela a conduit à une meilleure prévision, une meilleure communication et une meilleure qualité dans l'ensemble.

George a également fourni le leadership louable pour l'équipe de YUI à soutenir les grands projets internes chez Yahoo. Lorsque nous désignons un projet interne comme un «grand pari», quelque chose de crucial pour l'avenir de l'entreprise, nous faisons équipe avec l'équipe du projet frontend ingénierie et de s'assurer que nous faisons tout ce que nous pouvons pour les soutenir. George gère ces relations, en s'assurant que nos collaborateurs se opportun, bien documenté construit et que leurs priorités sont correctement reflétées dans nos plans de libération. Ayant la capacité de comprendre les besoins des divers projets et de faciliter notre collaboration réussie n'est pas une mince, et George a fait le gros du travail nécessaire pour assurer que les ingénieurs YUI et ASTRA sont fournissant le soutien approprié au bon moment tout au long de Yahoo.

Parlant de soulèvement de levage .... George est bien connu chez Yahoo en tant que technologue exceptionnelle et un défenseur infatigable de YUI, mais elle est également bien connu de ceux qui gymnase salarié fréquente de Yahoo. Vous trouverez George il ya quatre ou cinq soirs par semaine de travail pour mieux ses propres record du monde sur le formulaire de poids libres.

Le travail de George et son engagement général à l'excellence a certainement inspiré chacun d'entre nous qui travaillent avec elle au cours des dernières années. J'ai demandé à George qui l'avait inspiré et l'a envoyée sur le chemin vers une carrière dans la technologie.

Quelle a été votre première expérience avec les ordinateurs?

J'ai été l'intention de pénétrer une piste en pré-médecine au collège et j'ai eu un cours AP Calculus ma dernière année dans le cadre du programme d'études préparatoires au collège. Comme par hasard aurait-il, l'enseignant a obtenu une subvention pour les ordinateurs Apple deux comme une partie du procès pour enseigner la programmation au niveau du secondaire. Non seulement nous l'obtenons - nous avons eu moins compétitifs qu'il essaie de faire les fonctionnalités les plus robustes avec le moins de code. Le cours de l'électronique dans le premier moyen de collège où je suis arrivé à circuits programme sur une planche à pain en utilisant un langage assemblage scellé l'affaire.

Avez-vous eu des modèles féminins rôle de technicien qui vous ont influencé?

Il ya deux femmes avec qui j'ai travaillé que j'ai été impressionné par et appris beaucoup de choses à partir. Darragh Muldoon, co-fondateur du logiciel de cricket, m'a embauché hors de l'université de loin dans l'aventure la plus étonnante de démarrage de ma carrière. Elle était n'était pas un technologue en soi, mais j'ai appris beaucoup de son par rapport à ses compétences de personnes dans les principaux gens de technique, le renforcement des équipes, et la croissance d'une entreprise. L'autre femme, je regarde jusqu'à appris de Sheila était Brady, qui a gravi les échelons au niveau de directeur de la division d'Apple du logiciel système. Elle a vraiment su comment conduire un communiqué, dans de nombreux cas les meilleures équipes composée principalement d'ingénieurs masculins. Elle a exposé un niveau de confiance, de compétence et d'agressivité qui pourrait être apprécié par n'importe quel ingénieur - mâle ou femelle.

Trouver des conversations: Bloglines | technorati

Partager et prolonger: Conservez ce lien avec del.icio.us | Digg it! | reddit!

Jenny Han Donnelly: Ingénieur YUI (AdaLovelaceDay09)

Mars 24, 2009 à 08:05 par Eric Miraglia | En développement | 3 commentaires

Jenny Han Donnelly, ingénieur principal, Yahoo, auteur de YUI DataTable, DataSource et saisie semi-automatique

[Note: Ce billet fait partie de la participation de l'équipe de YUI en Ada Lovelace Day , une célébration de femmes technologues du monde entier.]

Jenny Han Donnelly est l'auteur de composants YUI trois:

  1. Le contrôle DataTable : DataTable YUI est un de nos widgets signature, fournissant un menu d'options interactives puissantes pour les données tabulaires.
  2. Le contrôle de saisie semi-automatique : Saisie semi-automatique offre typeahead, suggérer, de filtration et de la combo-box fonctionnalité à toute zone de saisie de texte.
  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 ]

Trouver des conversations: Bloglines | technorati

Partager et prolonger: Conservez ce lien avec del.icio.us | Digg it! | reddit!

Survey: When is an Accordion not an Accordion?

March 23, 2009 at 9:20 pm by Christian Crumlish | In Design , Development | 6 Comments

example of 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.

Trouver des conversations: Bloglines | technorati

Partager et prolonger: Conservez ce lien avec del.icio.us | Digg it! | reddit!

Page Suivante »
Hébergé par Yahoo!

Copyright © 2006-2011 Yahoo! Tous droits réservés. Politique de confidentialité - Conditions d'utilisation

Propulsé par WordPress sur Yahoo! Web Hosting .