Yahoo! Blog User Interface (YUIBlog)

YUI: Horário de funcionamento qui setembro 1st

30 agosto, 2011 às 10:53 am por Luke Smith | Em Desenvolvimento e Horas Abertas | 2 Comentários

YUI Loader e mudanças de sementes de arquivos, além de dicas e truques do Carregador

Voltar no início de julho, Dav Vidro postou um artigo sobre as mudanças nos arquivos do carregador e da semente em 3.4.0. Havia algumas perguntas nos comentários e alguns outros no fórum e yui # canal no freenode IRC , então eu queria Dav na buzina para um público Q & A.

Eu não espero que terá uma hora inteira, porém, depois disso, vamos estar falando sobre as melhores práticas de carregadoras e dicas e truques. Dependendo do tempo, algumas coisas que eu estou esperando para cobrir são:

• Como fazer carregador de buscar não YUI arquivos
• A configuração dos grupos de módulos, e as muitas vantagens de usá-los
• Hospedagem e apontando para o seu serviço próprio de combinação
• Como cada configuração afeta onde Loader olhar para seus arquivos

Se você queima perguntas sobre Loader, tem um truque que você deseja compartilhar, ou ainda não percebi o quão impressionante é carregador, por favor juntar a nós!

Time & Detalhes

Esta semana estamos indo para sediar a sessão inteiramente no Adobe Connect, incluindo o áudio. Vamos usar o chat Connect para gerenciar perguntas ou usar Connect construído em suporte de áudio para mais aprofundadas discussões.

Nós vamos estar online na sala de Horas Aberto 10:00-11:00 PDT quinta-feira.

Atualizar

A gravação está disponível em nosso canal no YouTube .

Encontrar conversas: bloglines | technorati

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

Nomear YUI para os 2011 Prémios Open Source!

Agosto 23, 2011 at 04:58 por Jenny Donnelly | Em Miscelânea | 4 Comentários

Se você gosta de YUI (e nós esperamos que você faz!), Por favor, tire um momento para nos nomear para os 2011 Prémios Open Source , promovido pela Packt Publishing. Certifique-se de apontar para o nosso site novinho em folha em http://yuilibrary.com !

O formulário de indicação está aberto agora até 09 de setembro.

Encontrar conversas: bloglines | technorati

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

Anunciando YUI 3.4.0 e do novo YUILibrary.com

18 agosto, 2011 em 08:54 am por George Puckett | Em Desenvolvimento | 19 Comentários

A equipe YUI tem não um, mas dois anúncios de partilhar hoje. Primeiro, lançaram uma revista completamente YUILibrary.com . O novo site é um terreno de reescrita proporcionando um destino unificado para toda a documentação YUI, uma interface mais limpa, e uma organização mais intuitiva no topo de uma arquitetura nova e robusta. Tire algum tempo para olhar ao redor. Esperamos que você seja muito feliz com o que você vê.

Além disso, YUI 3.4.0 está agora disponível em CDN, bem como de download . Alguns destaques desta versão incluem:

• App Framework (beta): 3.4.0 YUI marca a estréia do quadro App por Ryan Grove e Ferraiuolo Eric. O Quadro de App é um conjunto de Controlador , Modelo , Modelo Lista e Visualização de componentes que fornece um framework MVC-estilo simples para escrever aplicativos uma única página de JavaScript. Esses componentes podem ser utilizadas separadamente ou em conjunto para criar qualquer coisa de simples não-interativas vistas a aplicações ricas com o roteamento baseado em URL, ligação de dados e sincronização de cliente-servidor completo.
• Calendário (beta): Allen Rabinovich acrescentou Calendário para coleta YUI 3 de widgets na versão 3.4.0. Calendar é um widget flexível que fornece mês a mês de navegação, seleção de data única ou múltipla, a formatação personalizada e internacionalização. Além disso, introduz uma nova abordagem à data de filtragem que utiliza conjuntos de regras aninhadas, e uma prestação totalmente baseado em modelo, que permite aos desenvolvedores rapidamente e facilmente personalizá-lo para uma variedade de usos.
• Carregador: O Carregador de YUI sofreu uma atualização significativa para o 3.4.0 por Dav Glass, com foco na melhoria do desempenho. O arquivo de origem contém Loader e sua meta-dados que torna o carregamento de módulos mais rápido, pois todos os seus requisitos de meta-dados já estão na página. Rollups foram removidos os padrões do sistema e allowRollup para false na configuração Loader. Como resultado, YUI, agora apenas carregar os módulos especificados em vez de módulos adicionais incluídos como parte de um pacote cumulativo. Finalmente, o diretório de compilação tem sido explodiu e submodules ter sido removida a partir de o núcleo do sistema reduzindo o número de iterações executadas por Loader no o cálculo de dependências. Você pode consultar o blog sobre as mudanças no Loader 3.4.0 para mais detalhes.
• Graphics (beta): Tripp Pontes introduz o módulo de gráficos em YUI 3.4.0. Este componente fornece uma API JavaScript que lhe permite criar formas pré-definidas e de forma livre polígonos com propriedades de preenchimento e acidente vascular cerebral em uma variedade de formatos. Com base nos recursos do navegador e dispositivo, gráficos irá tornar as formas usando SVG, HTML, Canvas, ou VML.
• Painel (beta) e Widget: estagiário YUI Tilo Mitra passou mais um verão produtiva na Califórnia trabalhando em uma reescrita do Painel. Ele também fez várias melhorias para Widget incluindo a reconversão de Widget autohide e Widget modalidade de plugins para extensões, ea introdução de WidgetButtons, uma extensão do novo widget que permite que você coloque css de estilo botões no cabeçalho e rodapé de qualquer widget que implementa suporte ao módulo padrão.
• ScrollView: Tilo tem também reforçado a ScrollView para 3.4.0 para suportar paginação vertical e incluir um plugin ScrollView lista para adicionar nomes de classes CSS para os elementos da lista imediatos.

Além de oferecer projetos para YUILibrary.com, desenvolvedor e designer YUI, Jeff Coniff, também contribuiu com um número de itens para a versão 3.4.0. Melhorias foram feitas para a concepção e prestação de alguns dos widgets para melhor aparência e usabilidade em dispositivos móveis. Ele também colocou é talentos artísticos para trabalhar na criação de um número de novos exemplos, como o desenho complexo: exemplo Violino em Graphics.

Em YUI 3.4.0, vários componentes foram promovidos ao status de Beta GA Utility , TabView e consulta YQL . Você também vai notar a remoção do componente Compat da biblioteca, além de História obsoleto e CSSGrids-obsoleto.

Estamos muito animado para compartilhar YUI 3.4.0 e do novo site com a comunidade YUI. Você pode aprender mais sobre YUI 3.4.0 analisando a documentação sobre YUILibrary.com . Você pode também pode rever o resumo de todas as mudanças observadas nos arquivos do componente histórico para YUI 3.4.0 , bem como a lista completa dos bilhetes abordados durante YUI desenvolvimento 3.4.0 . Como sempre, gostaríamos que você apresentar quaisquer sugestões que você pode ter ou defeitos você pode descobrir na nossa base de dados do bilhete. Feedback para YUI 3.4.0 podem ser inseridos em banco de dados bilhete YUI 3 . Os ingressos para YUILibrary.com pode ser inscrita no repositório YUILibrary . Se você estiver interessado em nos bastidores olhar para a criação do novo YUILibrary.com, certifique-se juntar a nós para Horas Abertas quinta - feira 18 de agosto , onde estaremos discutindo o projeto e implementação.

Encontrar conversas: bloglines | technorati

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

YUI: Horário de funcionamento qui 18 de agosto

15 de agosto de 2011 às 9:49 pm por Lucas Soares | Em Desenvolvimento e Horas Abertas | 10 Comentários

Bem-vindo ao yuilibrary.com novo!

Em paralelo com o lançamento 3.4.0, o novo e melhorado YUILibrary.com site vai viver! O novo site é unificada, melhor organizado, e tem um olhar fresco e sinta.

Procure um posto próximo sobre os detalhes do site, mas juntar as Horas Abertas Ligue quarto esta manhã quinta-feira para obter uma primeira turnê-guiada pelo olhar Ryan Grove e as outras pessoas que fizeram isto uma realidade. Nós estaremos falando sobre o design do site, a configuração backend, planos futuros, as oportunidades da comunidade, e verificar todas as novas funcionalidades podemos enfiar uma hora, incluindo a nova interface API docs.

Nós estamos trabalhando nossas caudas fora para começar essa coisa pronta para lançar e nós não poderíamos estar mais felizes de vê-lo finalmente fazer a sua casa em yuilibrary.com. Venha celebrar a inauguração, dar feedback (bom e mau), e aprender maneiras que você pode ajudar a tornar o novo site o melhor que pode ser para você e para a comunidade YUI maior.

Time & Detalhes

Esta semana, não vai usar uma ponte de conferência. Em vez disso, vamos sediar a sessão inteiramente no Adobe Connect, incluindo o áudio. Vamos usar o chat Connect para gerenciar perguntas ou usar Connect construído em suporte de áudio para mais aprofundadas discussões.

Nós vamos estar online na sala de Horas Aberto 10:00-11:00 PDT quinta-feira.

Update: vídeo disponível para download

A alta resolução, iOS gravação é amigável disponível para download .

Encontrar conversas: bloglines | technorati

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

YUI: Horário de funcionamento qui 11 de agosto

8 de agosto de 2011 às 21:47 por Luke Smith | Em Desenvolvimento e Horas Abertos | No Comments

Pesquisar Acessibilidade direto

Vamos acompanhar o anterior post sobre Pesquisa Directa . Há muito sobre o valor Busca Direta falando, mas para começar, a experiência de obter a acessibilidade correcta é interessante e importante. Victor Tsaran e Caridy Patiño se juntem a nós na chamada para falar sobre o projeto, analisar os detalhes de implementação, e responder a quaisquer perguntas que você tem sobre busca direta ou acessibilidade melhores práticas.

Time & Detalhes

Nós estamos mudando o formato esta semana. Nós vamos tentar sediar a sessão inteiramente no Adobe Connect. Não haverá ponte de conferência para discar para. O áudio também será através Conectar. Vamos usar o chat Connect para gerenciar questões.

Nós vamos estar online, como de costume 10:00-11:00 PDT quinta-feira no Aberto das Horas Ligue quarto .

Update: Nós ainda vai estar na ponte de conferência

Em um golpe de ironia, verifica-se que Connect não têm boa acessibilidade para os participantes cegos, por isso vamos estar usando Connect para o compartilhamento de tela e da ponte de conferência de áudio como de costume. Os detalhes de conexão são:

1. Disque para 1-888-371-8922 (Skype funciona muito bem para não-americanos participantes *)
2. Digite o código de participante 47188953 #
3. Junte-se a sessão de compartilhamento de tela (este irá pedir-lhe para instalar o plugin Adobe Connect, se esta é sua primeira vez de usá-lo)

Update # 2: Gravação disponível

Aqui está a gravação para download para este Horário de funcionamento .

Encontrar conversas: bloglines | technorati

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

Fazendo Pesquisa Directa Acessível

8 de agosto de 2011 às 09:44 por Caridy Patino | Em Acessibilidade e Desenvolvimento | 6 Comentários

Alguns meses atrás nós lançamos a primeira versão beta da busca direta. Este novo produto explora o conceito de feedback em tempo real, de imediato, oferecendo respostas para o usuário com cada tecla. Dada a diversidade de audiência do Yahoo!, nós queríamos fazer Busca Direta tão acessíveis quanto possível. Inicialmente, acreditávamos que isso seria uma tarefa fácil, já que este produto seria baseado no YUI 3, uma biblioteca JavaScript com acessibilidade cozido em seu DNA. Contrariamente às minhas expectativas como um engenheiro, essa tarefa acabou por ser mais difícil do que prevíamos.

Apresentando Pesquisa Directa

Apesar de Pesquisa Directa é construído a partir do zero usando infra-estrutura YUI componente, sua interface mais visível proeminente é baseado no widget AutoComplete YUI que inclui vários recursos de acessibilidade para a direita fora da caixa. Sugestões relacionadas com uma determinada consulta são exibidos nesta implementação autocomplete. Busca Direta também apresenta um painel de conteúdo, também conhecido como o painel rico, onde o conteúdo relacionado sugestão é exibida. A intenção do painel de rico é dar uma resposta direta para o usuário quando uma sugestão da lista de preenchimento automático está selecionado.

Um novo conjunto de sugestões é exibida na lista em todas as teclas, ea primeira sugestão é selecionada por padrão. Esta seleção padrão é chamado de uma seleção suave. Seleções suaves e interações subsequentes com a lista de sugestões ditar o conteúdo que é apresentado no painel de rico. Na realidade, as coisas são um pouco mais complicado (otimizações de desempenho, camadas adicionais de cache, etc), mas por uma questão de simplicidade, podemos supor que este é o fluxo de trabalho comum.

Os recursos de acessibilidade

Na busca para fazer pesquisa direta acessível, nós olhamos para a implementação de Assistente de Pesquisa, uma tecnologia que foi pioneira Yahoo! alguns anos atrás, bem como os recursos de acessibilidade nativas da YUI.

Após esta investigação, três recursos de acessibilidade primários foram propostos para pesquisa direta:

• Usando o utilitário Internacionalização YUI para servir conteúdo localizado.
• Definir role e aria-* atributos em elementos dentro do widget autocomplete, que precisam ser identificados e processados ​​por leitores de tela.
• Usando um oculto div que representa uma região ao vivo ( aria-live ) para notificar o usuário quando algo acontece. Eg, o número de sugestões disponíveis, a sugestão selecionado, etc

O plano era para notificar o usuário de quaisquer alterações na interface de busca direta, e fornecer um conjunto de atalhos de teclado para navegar os seguintes componentes visuais:

• Caixa de pesquisa
• Botão Enviar
• Lista de sugestões
• Rico painel

Soa como uma brisa, certo? Bem, vamos dar um passo atrás.

O problema

O que temos aqui são dois processos assíncronos - um deles para atualizar o conjunto de sugestão e outro para recuperar respostas correspondentes - e ambos estão realmente rápido. Estamos falando de final 250ms para terminar. Uma vez que a interface está mudando em um ritmo tão rápido, mantendo o controle de tudo pode ser difícil para um usuário de leitor de tela. Ela recebe uma ordem de magnitude mais complicado quando as atualizações acontecem em um assíncrono, quase em tempo real forma. Como o leitor de tela estava sendo notificado de todas as alterações na interface, a vibração resultante tornou difícil entender o que estava acontecendo.

Na falta de uma solução aceitável, começamos a colaborar com Yahoo! 's guru acessibilidade, residente Victor Tsaran ( @ vick08 ) para tentar chegar a algo melhor.

A primeira vez que assistiu Victor interagir com Procura Directa, ficou imediatamente claro para mim que a maioria de seu foco estava no painel rico em vez da lista de sugestões. Isso foi uma surpresa para mim, como visto na lista como a "fonte da verdade". Durante uma de nossas sessões, tivemos um golpe de sorte, quando aconteceu a desativar todos os recursos de acessibilidade da lista. Assim como o ruído introduzido pela lista foi cortada, a busca direta começou a fazer sentido para Victor!

Como os usuários de leitores de tela perceber Busca Direta

Depois de perceber que nós estávamos tentando resolver o problema errado, voltamos para a história do usuário original: "Como usuário, eu posso obter uma resposta como eu digito". Obtendo a resposta para o usuário através era a prioridade. Depois de redefinir o problema, nós nos concentramos nossos esforços de acessibilidade em uma aplicação onde o leitor de tela priorizado o conteúdo rico painel sobre a lista de sugestões.

Por exemplo, se o usuário digita "miami wea" , o leitor de tela irá dizer-lhes duas coisas:

• 10 sugestões.
• TEMPO MIAMI, FL. HOJE, Parcialmente Nublado, 89 ° F 77 ° F. AMANHÃ, Parcialmente Nublado, 90 ° F 74 ° F ...

Será, então, continue lendo o resto do conteúdo do painel rico. O usuário não precisa saber todas as 10 sugestões na frente, toda vez que as atualizações da lista. Se eles não querem saber, a informação é facilmente acessível via navegação do teclado.

Para garantir que a lista de sugestões é agregar valor à experiência, temos certeza de que a primeira frase no painel rico está intimamente relacionado com a sua sugestão correspondente. Por exemplo, com base no exemplo anterior, "weather miami" é a primeira frase no painel rico para a sugestão: "weather miami".

Victor Tsaran, do Laboratório de Acessibilidade Yahoo!, mostra como ele funciona no FireFox com o ecrã NVDA leitor:

A experiência de leitor de tela para a nossa aplicação é mais fácil de seguir, já que agora apenas se concentrar nas duas seguintes componentes visuais:

• Caixa de pesquisa
• Rico painel

As alterações à lista autocomplete como um todo não são mais controladas, eo botão de submit é ignorado, pois o usuário sempre pode bater entrar para a consulta atual ou usar um atalho de teclado (tecla de acesso tilda: [control, alt or shift] + ~ ) para alternar entre o elemento de entrada e do painel de rico. Estas opções de navegação do teclado são revelados para o usuário quando o searchbox é reconhecido pelo leitor de tela.

Do ponto de vista de engenharia, esta mudança simplificou as coisas. A quantidade de manipulação DOM no componente mais ativo foi drasticamente reduzida, melhorando o desempenho geral de Pesquisa Directa. Aqui está um exemplo da implementação:

 SDAAria função () {
     var node = this._liveRegion = Y.Node.create ('<div role="status" class="off-screen" aria-live="assertive"> </ div>');
     / / Cria a região ARIA ao vivo ...
     Y.one ('body') append (nó).;
     / / Ouvindo ária: mensagens ao vivo para atualizar a região ao vivo
     this.on ('aria: ao vivo ", this._handlerMsg, this);
     / / Para ouvir fofocas: atualização para anunciar quantas sugestões
     this.on ('fofoca: refresh', this._handleGossipRefresh, this);
 }
 SDAAria.ATTRS = {
      strings: {
          valueFn: function () {
              voltar Y.Intl.get ('sd-aria');
          }
      }
 };
 SDAAria.prototype = {
     _ariaSay: function (stringID, subs) {
         var mensagem = this.get ("strings". + stringID) | |'';
         this._liveRegion.setContent (? subs Y.Lang.sub (mensagem, subs): message);
     },
     _handlerMsg: function (e) {
         if (e.id) {
             this._ariaSay (e.id, e.subs);
         }
     },
     _handleGossipRefresh: function () {
         var tamanho = this.get ('sugestões') size ().;
         this._ariaSay (tamanho (> 0 "sugestões:? dos NO_SUGGESTIONS '), {
             n: tamanho
         });
     }
 };

As lições aprendidas

Ao criar uma interface acessível, é importante fazer as perguntas certas. Fazendo cada bit do seu aplicativo acessível não pode ser a abordagem certa.

Solicite feedback inicial dos usuários de leitores de tela - não assuma que você tem suas bases cobertas até que você obter algum feedback do usuário. Utilizando todas as ferramentas e recursos à sua disposição não pode ter o efeito pretendido.

Usuários de leitores de tela podem ter dificuldade em manter o controle de atualizações em tempo real, especialmente se os leitores de tela são bombardeados com as notificações. Nesses cenários, menos pode significar mais. Identificar e focar no que é importante para o usuário ao invés de tentar replicar a experiência crua do pedido de leitor de tela.

Sobre o autor: Caridy Patiño, Frontend principal para Yahoo! Search Direct. Ele tem sido um colaborador de longa data YUI e criador da borbulhagem Biblioteca de Extensão YUI, bem como blogueiro convidado no YUIBlog.com compartilhar alguns de sua extensa experiência construção de aplicações web de alta performance. Estratégias de carga, event-driven arquitecturas e SSJS são alguns dos temas em Caridy passa a maior parte do seu tempo nestes dias.

Encontrar conversas: bloglines | technorati

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