Yahoo! Blog User Interface (YUIBlog)

Sideline Edifício: Lições de YUI + Adobe AIR

Você já se perguntou o que as pessoas estão dizendo agora sobre a sua empresa, marca, serviço, produto, etc? Sideline , inspirada por um projeto de corte interna recente da Yahoo!, vai além do processo padrão cliente pesquisa para que você ouvir em tempo real para as pessoas falando sobre seus produtos e, em seguida, usar o feedback para melhorar o seu serviço ou ajudar os usuários com seus problemas.

Resumidamente, os objetivos de nosso projeto fosse

• Criar uma aplicação desktop que permite a criação, agrupamento, ea auto-execução de consultas de pesquisa avançada contra Twitter
• Aproveitar existentes conjuntos de habilidades e ferramentas
• Alvo do Windows, Mac OS X e sistemas operacionais Linux e minimizar a quantidade de código específico da plataforma que deve ser escrito
• Open source o código para que outros possam aprender, contribuir e / ou prorrogar o produto como acharem apropriado

Nossa equipe de front-end engenheiros são especialistas em JavaScript, CSS, HTML e PHP, mas não tem muita experiência no desenvolvimento de aplicações desktop. Portanto, a questão tornou-se, como maximizar nossas existentes conjuntos de capacidades para o desenvolvimento desktop? A resposta para nós era utilizar a plataforma Adobe AIR , que "permite que desenvolvedores usem tecnologias comprovadas da Web para criar aplicações ricas para internet que funcionam fora do navegador em vários sistemas operacionais". Desde AIR suporta HTML / JavaScript desenvolvimento (além de Flex e Flash), nós poderíamos construir nossa aplicação em tecnologias web tradicionais, além de YUI , e executá-lo sobre os três principais sistemas operacionais de desktop.

YUI Grids no AIR

Sideline contém uma implementação extensa da biblioteca YUI. Deve esperamos servir como um grande exemplo para outros desenvolvedores interessados ​​em experimentar com YUI e Adobe AIR. O layout do aplicativo é construído utilizando Grids YUI e até mesmo faz uso das funções Landmark adicionados recentemente ARIA . Grids funcionou muito bem no ambiente de ar e fez reformulações que ocorreram de meados de desenvolvimento fácil de implementar com alterações no código mínimos. Assim como no ambiente do navegador padrão, redes de YUI pode servir como uma ótima base para um aplicativo AIR, mesmo que o desenvolvedor decide contra o uso do restante da biblioteca JavaScript e optou por outra estrutura, em vez.

YUI Componentes em AIR

Além de Grids, Sideline também utiliza o Dom , Evento , Drag and Drop , JSON , Seletor e Container e botão e do menu e deslizante , e TabView componentes. Estou feliz de informar que todos os componentes YUI realizado muito bem no ambiente de ar e exigiu nenhuma modificação. Sideline faz implementar um projeto bastante personalizado e, assim, alguns esfola personalizada dos componentes YUI foi necessário, mas sem modificações fundamentais. A maioria dos aplicativos AIR tendem a ter uma aplicação desktop rico sentir a eles. Para este nível de personalização, o artigo esfola YUI é uma grande referência para começar.

Além do navegador

Um importante aprimoramento da plataforma AIR da Adobe sobre o ambiente web tradicional é o acesso a um banco de dados SQLite local e sistema de arquivos do usuário. Acesso banco de dados local está se tornando mais disponíveis em ambientes web tradicionais, através da tecnologia, tais como Gears e HTML 5 de armazenamento do lado do cliente, mas por enquanto estas soluções não são onipresentes. Para os interessados ​​em desenvolvimento AIR, Sideline abordou muitas das tarefas comuns que uma aplicação AIR típico pode exigir, por exemplo, buscar dados externos, manuseio atualizações de aplicativos, interação com o banco de dados local, trabalhando com o sistema de arquivos local, lançando janelas do navegador nativo, exibição de notificações de desktop, etc deve provar ser uma referência útil a esse respeito.

Dicas para o Desenvolvimento AIR

1. Conheça o seu ambiente. AIR usa o WebKit aberto motor de navegador de código sob o capô. Desenvolvimento web tradicional destina-se a fazer um trabalho de aplicação ou site em tantos navegadores, sistemas operacionais como possível. Quais são os navegadores para apoiar normalmente se resume a um fator de custo versus uso. No entanto, que codifica para um mecanismo de processamento único, reduz a necessidade de preparar e testar contra o slue de combinações possíveis no mercado. Dito isto, ainda faz sentido desenvolver de uma maneira cross-browser, onde possível, pois pode chegar um momento em que a aplicação precisa encontrar seu caminho de volta para um ambiente de navegador mais tradicional. Usando uma estrutura como YUI irá tornar esse processo relativamente indolor. É simples de ver os navegadores e plataformas atualmente suportadas por YUI através do gráfico Graded Navegador de suporte . Os desenvolvedores devem ser bastante seguro tomar alguns atalhos básicos na construção AIR aplicativo (usando -webkit-border-radius faz cantos arredondados uma brisa), mas use com moderação e documentá-los para que eles são fáceis de detectar mais tarde.
2. Durante o desenvolvimento de uma aplicação complexa em qualquer ambiente de um sólido conjunto de ferramentas de depuração é um must-have. Adobe fornece algumas ferramentas úteis para a depuração de ar para fora da caixa. Os desenvolvedores devem investigar o AIR Debug Launcher (ADL) , o Introspector HTML , eo Source Viewer HTML . Além das ferramentas do pacote, Aptana Studio com o seu plugin Adobe AIR provou ser um trunfo indispensável. O plug-in Aptana fornece assistência com a criação de um projeto AIR, a importação de quadros comuns de JavaScript, depuração, embalagem / exportação, e assinar digitalmente o aplicativo.
3. Não se esqueça das técnicas de desempenho que aprendemos com o ambiente do navegador padrão (ou seja, otimizar suas imagens, apoucar e combinar a aplicação de CSS e JavaScript, e para pesados ​​baseados em eventos aplicações como Sideline, tirar proveito de técnicas de delegação de eventos ) . Aplicativos AIR são executados no ambiente de trabalho e assim não há clemência um pouco mais com o desempenho do que no ambiente do navegador típico, mas lembro como se fosse o próprio navegador, o recipiente AIR também consome um pedaço da memória do sistema antes mesmo de chutes do aplicativo de código personalizado em .

The Road Ahead

A versão beta do Sideline pode ser instalado em http://sideline.yahoo.com . O código é de código aberto sob os termos da licença BSD e hospedado no GitHub . Congratulamo-nos com contribuições, comentários e / ou sugestões. Além disso, no espírito de manter as coisas tão aberta quanto possível e compatível com a tecnologia emergente é bem provável que portar Sideline de titânio em um futuro próximo. Algum trabalho inicial já foi feito na porta e continuará nas próximas semanas. Também é bem possível que Sideline vai acabar a implementação de um ORM JavaScript como JazzRecord para facilitar a interação de banco de dados em diferentes plataformas. Se alguém tiver dicas adicionais de apoio às plataformas de múltiplos nós adoraríamos ouvi-los.

Agora vá adiante e bifurcar-lo !

Encontrar conversas: bloglines | technorati

Compartilhar e ampliar: Bookmark com del.icio.us | digg it! | reddit!

Foco Implementação: DocLanding

Encontrar conversas: bloglines | technorati

Compartilhar e ampliar: Bookmark com del.icio.us | digg it! | reddit!

Construir uma rápida People-Finder para Flickr com YUI AutoComplete

No Flickr , recentemente acrescentamos um widget pessoas-novo seletor para algumas das nossas páginas, esse recurso é baseado no controle AutoComplete YUI . O Widget de pessoas seletor permite que nossos membros para selecionar pessoas de sua lista de contatos, que podem conter mais de 20.000 entradas. Devido à grande quantidade de dados envolvidos, técnicas tradicionais para buscar e analisar os dados não eram viáveis, principalmente devido ao extremamente lento tempos de análise. Neste post, vamos dar uma olhada em alguns dos formatos de dados diferentes que tentaram e na configuração de AutoComplete que encontramos para ser mais perfeita.

Primeiro, aqui está um resumo de vídeo do que estávamos tentando realizar, a nova interação com o widget de localização de pessoas é retratado à direita:

Buscando e análise: XHR e dados personalizados

O maior desafio foi encontrar um formato de dados que seria rápido para baixar, rápido para analisar, e - acima de tudo - segura. Nós primeiro tentamos XML e Ajax, mas a análise XML provou ser muito para diminuir - de fato, descobrimos que essa abordagem pode trazer para baixo o navegador em conjuntos de dados maiores. Depois tentamos uma combinação de JSON e Ajax, o que foi significativamente mais rápido, mas ainda demorou mais de 80 segundos para analisar a nossa maior conjunto de dados (um array contendo cerca de 10.700 objetos, cada um com várias propriedades).

No final, encontramos dois transportes / parse técnicas que acabou por ser extremamente rápida:

1. Buscando JSON (envolto em uma função de callback) usando tags de script gerados dinamicamente;
2. analisar um formato de dados personalizado (uma lista delimitada por caracteres de controle) usando split() , obtida com o Ajax (usando YUI Connection Manager ).

No final, fomos com o formato personalizado. Formatando o nosso JSON para que pudesse ser executado por uma tag de script dinâmico foi uma abordagem menos seguro e não um ganho de performance. Usando XHR nos deu uma solução mais segura e ainda muito alto desempenho.

Interação com o Usuário: YUI AutoComplete

Uma vez que tivemos uma maneira de obter os dados em JavaScript rapidamente, o próximo desafio era criar uma maneira para que o usuário pesquisar rapidamente a lista de contatos. Para isso, nós nos voltamos para controle AutoComplete YUI. Ele atendeu às nossas necessidades exatamente: extremamente rápido e muito configurável. Para usá-lo com os nossos dados personalizados, criamos uma função para usar como exemplo AutoCompletar DataSource; pressão de cada tecla no widget aciona esta função e passa a string de pesquisa. Dentro desta função, loop através de todos os contactos do membro e tentar igualar a consulta em quatro campos diferentes. Usamos expressões regulares para fazer o matching string.

Mesmo para grandes conjuntos de contatos, encontramos esta técnica é extremamente eficiente. Aqui está a versão básica do que fizemos:

  função searchContacts (query) {

        jogos var = [],
            queryRegEx = new RegExp (consulta, 'i'), / consulta / deve ser
                                                 / / Verificado antes 
                                                 / / Usando em uma regex.
            entre em contato;

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

                entre em contato = contatos [n];

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

        retornar correspondências;
 } 

Uma vez que nós tivemos os dados ligados ao widget, fizemos uma alteração na configuração padrão AutoComplete: Vamos definir o queryDelay parâmetro para 0 (o valor padrão é 200ms). Isto significa que não haverá atraso entre uma prensa de chave e uma pesquisa sendo iniciado. Há desvantagens para este (a exibição de AutoCompletar tende a tremer um pouco, se você digitar alguns caracteres em rápida sucessão), mas achei que fosse o único grande melhoria que fizemos, mais importante ainda do que as otimizações para a nossa função de pesquisa. Enquanto um queryDelay de 200ms ou mais pode ser mais apropriado para XHR ou outro remoto DataSources, descobrimos que nosso regex baseado DataSource com dados locais foi até a tarefa de buscar em cada tecla. Com AutoCompletar, temos cache livre adicionado à mistura de modo que qualquer pesquisa só teria que ser feito uma vez.

Mais detalhes sobre todas estas técnicas, incluindo detalhes sobre os diferentes formatos de dados e dados de perfis extensos para cada um, pode ser encontrado no code.flickr blog.

Encontrar conversas: bloglines | technorati

Compartilhar e ampliar: Bookmark com del.icio.us | digg it! | reddit!

In the Wild para 25 de março, 2009

Notícias e notas da comunidade YUI nas últimas semanas. Deixe-nos saber nos comentários o que perdemos, e vamos buscá-la na próxima vez:

• Ross Harmes em YUI AutoComplete eo Flickr People Finder : Ross Flickr Harmes tem uma peça interessante no blog Código Flickr fazendo o super-rápida pesquisa sugerem a criação do recurso Flickr People Finder. Ross discute em detalhe o processo que ele usa para processar listas de contatos rapidamente no cliente, levando-os em JavaScript. De lá, ele se virou para Jenny de Donnelly YUI AutoComplete : "[Com o] Uma matriz de contatos em JavaScript, precisávamos de uma forma de procurar por eles e escolher um. Para isso, usamos Widget excelente YUI AutoComplete. Para obter os dados para o widget, criamos um DataSource objeto que deveria executar uma função para obter resultados. Esta função simplesmente loop através de nossa matriz de contato e combinado a consulta dada contra quatro diferentes propriedades de cada contato, usando uma expressão regular (RegExp objetos revelou-se extremamente adequado para isso, com o tempo de busca médio para o caso de contatos vindo 10.000 em menos de 38ms). Após os resultados foram coletados, o widget AutoComplete tomou conta de tudo o resto, incluindo o cache dos resultados. "
  
• W3C Site Beta Usando YUI Reset e Fontes : Nicole Sullivan escreveu em dizer-nos que YUI Redefinir e fontes são parte do novo redesenho W3C site, que você pode visualizar aqui. O site também usa Nicole OOCS trabalho.
  
• Sítio Kellogg Brasil Construído com YUI Connection, animação e mais : Brasil Kellogg site implementa uma variedade de componentes YUI. Percebemos Connection Manager , Animação , Get , e mais, tudo descendo através de uma URL de combinação de cabo único de yahooapis.com. Nice. ( fonte original. )
  
• YUI Sighting - Greenbookings.com, Site de Viagem Sustentável : Yvo Schaap escreveu para nos dizer sobre Greenbookings.com , um site de viagens recém-lançado que incide sobre o mundo emergente de transporte sustentável. Quando você reservar através Greenbookings, eles vão caclulate e permitir-lhe para compensar a emissão de carbono gerada por suas viagens. Yvo escreve: "Eu tenho trabalhado com o quadro YUI por um longo tempo e divulgado ontem meu novo site greenbookings.com que tem quase todos os módulos do quadro em uso: calendário, guias, tabela de dados , história + calendário intervalo , grades, autocomplete, e muitos mais. Também muito esforço tem sido gasto em um carregamento de página muito rápido, removendo toda a javascript do cabeçalho para a parte inferior da página. "Nós amamos o site eo uso da contribuição de John Peloquin de YUI, o Calendário Intervalo para seleção de data .
  
• YUI Sighting - Site de Jogos Infinito Crossword : Marco Egli escreveu para nos dizer sobre uma nova versão do Crossword Infinito, um site de jogo usando uma ampla gama de utilitários YUI e widgets. "Na sexta-feira uma nova versão do Crossword Infinito foi lançado. É a primeira versão que está disponível em Inglês. É um jogo de palavras cruzadas infinito que roda completamente no browser. Vários componentes diferentes YUI foram utilizados para o desenvolvimento, incluindo animação, Button, Connection Manager, Datatable, Json, Menu e muito mais. O jogo visa o desenvolvimento do quebra-cabeças maior cruzadas no mundo. Os usuários podem jogar e adicionar suas próprias perguntas. É uma mistura de palavras cruzadas e scrabble ". Confira o jogo aqui , não deixe de entrar e, em seguida, usar os menus na parte inferior da tela para adicionar as suas próprias perguntas.
• "UIs ricos do Yahoo Web para desenvolvedores Java" DevX, : DevX tem um novo artigo acima para desenvolvedores Java interessados ​​em YUI . Grava Narayanan AR: " Este é o primeiro artigo de uma série de três partes que tem como alvo principalmente os desenvolvedores de Java que não são especialistas em JavaScript, mas estão desenvolvendo aplicações web com servidor-estruturas (tais como JavaServer Pages, Struts, ou Spring). Nesta edição, os noviços JavaScript verá como usar YUI para configuração e design, e devem aprender muito sobre programação orientada a objetos JavaScript. Para os desenvolvedores já experientes em JavaScript, esta série de artigos serve como uma introdução à biblioteca YUI. "
• Video: "YUI para malucos por controle", com Christian Heilmann : A equipe tem Ajaxian YUI Christian Heilmann de falar até em vídeo, confira aqui ou no player incorporado abaixo.
  
• YUI AutoComplete e Calendário no site turco Airlines : Cagatay Civici escreveu para nos informar sobre o uso do site da Turkish Airlines de YUI AutoComplete e Calendário em sua ferramenta de reservas. Muitos sites de viagens têm usado essa combinação ao longo dos anos; Southwest.com foi um dos primeiros adotantes do calendário YUI e continua a usar uma das versões originais do calendário em seu site na reserva atual. site do Yahoo própria viagem é outro bom exemplo de como estes elementos podem ser usados ​​juntos - foi implementada por YUI ImageLoader autor Matt Mlinac. ( fonte original. )
• Caridy Patino Mayea: "YUI3: Controladores Eventos Principais Strokes (keyup, KeyDown, KeyPress)" : Caridy (autor do popular Bubbling Biblioteca extensões para YUI) tem um novo blog postar sobre como lidar com os principais eventos em YUI 3 . ( fonte original. )
• Balsamiq Mockups para componentes YUI : As maquetes to Go blog tem vários componentes YUI zombou-se usando a interface Balsamiq, incluindo menus e botões e Calendários e Carrosséus . ( fonte original. )
  
• Mais de Matt Snider em YUI-EXT-MVC : Matt foi continuar o trabalho em seu projeto YUI-EXT-MVC . De acordo com Matt, "o benefício da utilização do sistema das classes controlador AJAX é que ele simplifica YUI Connection Manager e um desenvolvedor pode pré-registrar retornos de chamada, garantindo o tipo de resposta esperada. Está disponível em http://code.google.com/p/yui-ext-mvc/source/browse/trunk/assets/js/mvc/lib/controller.js . No futuro vou estar adicionando lógica de comando padrão para a recuperação de dados JSON e HTML a partir do servidor. "
  
• Geo Paul Tarjan do Explorer com YQL e YUI : SearchMonkey engenheiro Paul Tarjan tem uma demonstração interessante de usar YUI TabView eo Yahoo Maps API Ajax para exibir os resultados de uma pesquisa geo YQL . A interface permite que você insira um nome de lugar e depois procurar esse local, os irmãos que localidade, ancestrais que localização, etc Para o contexto mais amplo e por isso é interessante, ver post PHP inventor Rasmus Lerdorff do blog sobre o assunto . ( fonte original. )
• Meg Smitley - "carregar dinamicamente YUI Dependências" : Meg escreve (em Meglog) : "Estou usando o YUI Grids e LayoutManager para a espinha dorsal da interface de meu aplicativo desde o final do ano passado. Tem sido uma íngreme curva de aprendizado e eu ainda me considero novato muito e, de fato, só notei esta semana a guia 'carregamento dinâmico' no Configurator YUI . Em vez de estaticamente incluindo o requerido YUI CSS e recursos JavaScript, é possível utilizar YUILoader dinamicamente importar-los em carga. Embora compreenda que Yui-especialistas não ficará impressionado com a minha YUILoader epifania, esta abordagem tem me ajudado a emagrecer arquivos minha app do JS enquanto diminui as preocupações de manutenção e assim que eu sinto é pena mencionar para o benefício de noobs outros. " Confira seu artigo para obter mais detalhes .
• Usando carrossel com SugarCRM : Roger Smith tem um tutorial no blog do desenvolvedor SugarCRM que fornece "uma rápida e simples personalização ListView que aproveita o Widget do carrossel da interface do usuário Yahoo (YUI) biblioteca . Essa personalização muda completamente a aparência do ListView contato de um 'linhas e colunas de vista dos resultados da pesquisa a uma visão do carrossel Yahoo UI. A biblioteca YUI está incluído no SugarCRM e fornece uma tonelada de recursos de interface do usuário além do que usamos no aplicativo principal. "
  

Encontrar conversas: bloglines | technorati

Compartilhar e ampliar: Bookmark com del.icio.us | digg it! | reddit!

Georgiann Puckett: YUI / ASTRA Program Manager (AdaLovelaceDay09)

[Nota: Este post é parte da participação da equipe YUI em Ada Lovelace Day , uma celebração de tecnólogos do sexo feminino em todo o mundo.]

Georgiann Puckett (mais conhecido como "George") serve como o gerente de programa e projetos YUI afiliadas (incluindo a biblioteca ASTRA). Programa de gestão de complexos programas técnicos que compreendem múltiplos projetos é um dos trabalhos mais exigentes em uma empresa de software, e George é ideal para o desafio. Ela traz para a mesa uma inteligência rápida, a paciência e disciplina para gerenciar grandes fluxos de dados, e uma compreensão profundamente enraizada dos processos pelos quais programas bem sucedidos são sustentados. Seu fundo serve aqui também - como C / C + + veterano de engenharia, ela pode simpatizar diretamente com as experiências dos engenheiros com quem ela trabalha.

Lançamentos YUI sair com centenas de mudanças, muitos dos que são sugeridos ou contribuído por desenvolvedores de todo o mundo. Desde que ingressou na equipe há dois anos, George revolucionou a forma como toda essa informação é tratada. Isso levou a uma melhor previsão, melhor comunicação, e de melhor qualidade através da placa.

George também tem proporcionado a liderança louvável para a equipa YUI em apoiar grandes projetos internos no Yahoo. Quando designar um projeto interno como uma "grande aposta", algo fundamental para o futuro da empresa, que faz equipa com o projeto da equipe de engenharia frontend e certifique-se que estamos fazendo tudo o que pudermos para apoiá-los. George gerencia essas relações, garantindo que nossos colaboradores se oportunas e bem documentadas de builds e que suas prioridades são precisamente refletida em nossos planos de lançamento. Ter a capacidade de entender as necessidades dos diversos projetos de e para facilitar o nosso colaborações de sucesso não é um desafio pequeno, e George fez o trabalho pesado necessário para garantir que YUI e engenheiros ASTRA estão fornecendo o apoio certo no momento certo durante todo Yahoo.

Falando de arfando levantamento .... George é bem conhecido no Yahoo como um técnico excepcional e um defensor incansável da YUI, mas ela também é bem conhecida de quem ginásio empregado Yahoo freqüente do. Você encontrará George há quatro ou cinco noites por semana trabalhando para melhorar a sua forma própria recorde mundial dos pesos livres.

Trabalho de George e seu compromisso geral com a excelência, certamente, inspirou a todos nós que trabalhamos com ela ao longo dos últimos anos. Perguntei a George que a inspirou e mandou-a para o caminho em direção a uma carreira em tecnologia.

Qual foi sua primeira experiência com computadores?

Eu tinha a intenção de entrar uma faixa pré-med na faculdade e eu tinha um AP curso de cálculo meu último ano como parte do currículo da faculdade de preparação. Como ele teria sorte, o professor tem uma bolsa de dois computadores da Apple como parte de um ensaio para ensinar programação a nível do ensino médio. Não só obtê-lo - nós temos competitiva para ele tentar fazer os recursos mais robustos com a menor quantidade de código. O curso de eletrônica digital, primeiro na faculdade onde eu comecei a circuitos de programa em um breadboard usando linguagem assembly selou o acordo.

Você tem modelos femininos tecnólogo papel que o influenciaram?

Há duas mulheres com quem trabalhei que eu tenho ficado impressionado com e aprendi muito com. Darragh Muldoon, co-fundador do Software Cricket, contratou-me para fora da faculdade para, de longe, a aventura mais incrível de arranque da minha carreira. Ela estava não era um técnico, por si só, mas eu aprendi muito com ela com relação a suas habilidades de pessoas nos principais pessoas técnicas, formação de equipes, e fazer crescer uma empresa. A outra mulher que eu olhar para cima e aprendi foi Sheila Brady, que subiu na hierarquia com o diretor-nível no software da Apple, sistema de divisão. Ela definitivamente sabia como dirigir um lançamento, em muitos casos, liderando equipes compostas principalmente de engenheiros do sexo masculino. Ela exibiu um nível de confiança, competência e agressividade que poderia ser apreciado por qualquer engenheiro - masculino ou feminino.

Encontrar conversas: bloglines | technorati

Compartilhar e ampliar: Bookmark com del.icio.us | digg it! | reddit!

Jenny Han Donnelly: YUI Engenheiro (AdaLovelaceDay09)

[Nota: Este post é parte da participação da equipe YUI em Ada Lovelace Day , uma celebração de tecnólogos do sexo feminino em todo o mundo.]

Jenny Han Donnelly é o autor de três componentes YUI:

1. O controle de DataTable : DataTable YUI é um dos nossos widgets UI assinatura, proporcionando um poderoso menu de opções interativas para dados tabulares.
2. O controle AutoComplete : AutoCompletar oferece typeahead, sugerir, filtração e combo-box funcionalidade para qualquer área de entrada de texto.
3. O DataSource Utility : Compartilhado por DataTable, AutoComplete e Gráficos de Controle , DataSource serve como um canal entre widgets e potenciais fontes de dados, incluindo dados do servidor, matrizes JavaScript, DOM e estruturas como tabelas HTML.

Jenny trabalho nos inspira, em parte por causa dos desafios técnicos que ela assume - tentar obter cabeçalhos fixos com xy rolagem para trabalhar em IE6 usando uma tabela base semanticamente som algum, se você tiver quaisquer dúvidas. Jenny tomou em alguns dos mais complexos desafios de IHC em qualquer lugar YUI e projetado-los para atender praticamente qualquer ambiente. DataSource permite que outros componentes YUI para trabalhar com qualquer coisa de arquivos simples para JSON e XML para matrizes de JavaScript e estruturas DOM. Nós ouvimos de milhares de pessoas nos fóruns YUI utilizando todos esses recursos e mais em formas eclético e inovador.

Estamos também inspirados pela liderança organizacional Jenny mostrou em seu tempo no Yahoo. Atualmente, ela é o editor principal do YUIBlog, trazendo vozes técnicos de toda a Yahoo a estas páginas para compartilhar suas idéias. Ela também organizou a nossa cimeira anual frontend engenharia do Yahoo, trazendo centenas de Yahoo engenheiros de todo o mundo juntos em uma conferência de uma semana rica técnico. Ela ministrou cursos de uma semana YUI para os engenheiros nos EUA, Coréia e Japão, e ela tem sido um membro integral do grupo Hack Day no Yahoo que é uma parte tão importante da nossa cultura de engenharia.

Se ela está de codificação, escrevendo, ensinando ou levando - os quais são os aspectos da descrição do tecnólogo moderna trabalho - Jenny define uma barra de alta com sua inteligência, dedicação, imaginação e inteligência. Ada ficaria orgulhoso.

[ foto de Jenny usado com permissão tipo de Stephen Woods,]

Encontrar conversas: bloglines | technorati

Compartilhar e ampliar: Bookmark com del.icio.us | digg it! | reddit!

Pesquisa: Quando é um acordeão Accordion não uma?

Estou à procura de feedback das pessoas que projetaram ou construída uma interface usando um "acordeão" módulo (ou estão a considerar fazê-lo). Você vê, eu tenho trabalhado em um padrão de design para os módulos de acordeão, e eu gostaria de jogar um punhado de perguntas abertas para a comunidade através deste breve estudo . Eu vou estar ouvindo também em outros lugares, no twitter ( @ mediajunkie ) e em listas de discussão onde os web designers e desenvolvedores de sair.

(Sei que isso não é uma pesquisa científica. Eu só estou interessado em envolver a comunidade em uma discussão, em vez de tentar impor meu ponto de vista ou Yahoo! é vista na comunidade como autoridade.)

Onde quer que eu vá, ultimamente, parece que os designers de interação e desenvolvedores web estão falando sobre widgets acordeão e debater sobre o que faz um acordeão um acordeão. Nem todos que trabalham neste campo tem ouvido o termo (alguns podem simplesmente se referem a "painéis empilhadas" ou "painéis desmontáveis"), mas a maioria começa a essência com bastante facilidade. Ironicamente, nenhum dos elementos da IU descritos como acordeões compartilhar o comportamento real de um acordeão do mundo real (o instrumento musical), a saber: que o alongamento um acordeão abre todas as dobras uniformemente.

Acordeões tem sido tema em-e-off de discussão na lista principal de discussão IxDA ; discutidas em nossa Biblioteca Padrão workshop em Vancouver no início deste mês, e houve uma discussão em curso sobre acordeões em nossa lista interna de designer de discussão aqui no Yahoo !.

Então, sentei-me com algumas pessoas da equipe do YUI (e Marco, o fabricante de um experimental Widget acordeão YUI ) há pouco tempo para resolver através de um projecto de um padrão de acordeão que podem ajudar a informar o desenvolvimento de um componente YUI oficial.

De um modo geral, a maioria das pessoas concordam com o que estamos falando quando falamos de um elemento da interface acordeão. Todos concordam que acordeões são utilizados para comprimir o conteúdo em um espaço limitado e que consistem em painéis que pode contrair ou expandir. Além disso, há uma série de nuances sutis que nem todos concordam com.

Uma tendência que notei é que os desenvolvedores de front-end tendem ser agnósticos sobre como o acordeão deve funcionar, vendo-o como realmente apenas uma variante de um widget árvore. Designers tendem a ser mais prescritiva, dizendo que para ser um acordeão, deve comportar-se, assim, e tal forma (mas não todos os designers concordam em quais são essas regras).

No final, as pessoas YUI irá produzir um código que pode ser feito para fazer praticamente qualquer coisa. Não vamos tentar impor o nosso próprio gosto ou as preferências de design através da funcionalidade do código em si. No entanto, vamos usar o padrão associado para fazer sugestões e recomendações extraídas da experiência da comunidade de design de todo, e provavelmente vamos fazer lobby por comportamentos padrão que correspondem ao que a maioria das pessoas espera.

Então, se você tem alguns minutos e um de opinião, por favor visite o levantamento e deixe-me saber o que você pensa!

Vou fechar o inquérito em 30 de abril.

Encontrar conversas: bloglines | technorati

Compartilhar e ampliar: Bookmark com del.icio.us | digg it! | reddit!