2010 »Agosto» Usuário de Interface Yahoo! Blog (YUIBlog)

YUI Theater - Douglas Crockford: "Crockford em JavaScript - Cena 6: Loopage" (52 min.)

Agosto 30, 2010 at 3:47 pm por Eric Miraglia | Em YUI Theater | 8 Comentários

Última parcela Douglas Crockford no " Crockford em JavaScript "série, uma conversa em que ele cobre o papel de loops de eventos ea importância de JavaScript do lado do servidor, já está disponível em vídeo. Flash vídeo é incorporado abaixo, ou você pode baixar o vídeo HD (480p ~ 370MB) . Vídeo dos primeiros cinco palestras está disponível no Crockford na página JavaScript .

Outros vídeos Theater recentes YUI:

Nicholas Zakas e Victor Tsaran: Acessibilidade na homepage do Yahoo - Nicholas Zakas, um desenvolvedor principal da página inicial do Yahoo!, e Victor Tsaran, Yahoo! 's gerente sênior acessibilidade, discutir as estratégias e os métodos que fizeram um dos sites mais visitados em o mundo totalmente acessível. A palestra teve lugar no 2010 Junho BayJax meetup no Yahoo.
Dennis Lembree: Tornar o JavaScript Acessível - Dennis Lembree, especialista em acessibilidade e criador da AccessibleTwitter discute os desafios de fazer JS sites habilitados acessível. A palestra teve lugar no 2010 Junho BayJax meetup no Yahoo.
Ryan Dahl: Introdução ao NodeJS - Ryan Dahl, o criador do NodeJS, apresenta o projeto e fala sobre melhorias de desempenho e nova arquitetura. A palestra teve lugar no 2010 Maio BayJax meetup no Yahoo.
Elias Insua: jsdom: a Implementação CommonJS do DOM - Elias Insua introduz uma aplicação do lado do servidor do DOM JavaScript no 2010 Maio BayJax meetup no Yahoo.
Nicholas Zakas, Stoyan Stefanov, Ross Harmes, Julien Lecomte, Matt Sweeney: High Performance JavaScript - Cinco contribuintes para a alta O'Reilly Desempenho JavaScript discutem avançado JavaScript e otimizações DOM scripting em abril de 2010 BayJax meetup no Yahoo.

Inscrevendo-se na YUI Theater:

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

Apresentando o Yeti: A YUI interface de teste Fácil

Agosto 25, 2010 at 3:16 pm por Reid Burke | Em Desenvolvimento | 16 Comentários

Teste de JavaScript é uma parte importante, mas muitas vezes esquecido de desenvolvimento web. Uma das razões é porque o desenvolvimento para a web significa segmentação mais de um navegador. YUI atualmente classifica 11 ambientes diferentes que gostam de nosso mais alto nível de apoio. Além disso, também testamos YUI em emergentes X-grade ambientes como dispositivos móveis. Quando você tem tantos ambientes diferentes para apoiar, é tentador Basta escolher um par mais importantes para desenvolver com local e esperar o melhor.

No YUI, usamos Selenium e Hudson para a execução de YUI Teste testes de unidade baseado no navegador e várias configurações de sistema operacional como parte de nossa estratégia de integração contínua. Isso é ótimo para a detecção de problemas que resultam da integração de seu trabalho com o resto de uma pilha de software complexo. Ele vem com um preço: ferramentas CI como estes são complicados de configurar e manter. Em qualquer caso, eles não ajudá-lo quando você estiver desenvolvendo código e testes antes de se comprometer.

Hoje, eu estou animado para liberar Yeti 0.1.0, uma ferramenta de linha de comando experimental projetado para fazer cross-browser testes mais fácil antes de cometer uma linha de código.

Yeti automaticamente lança testes de unidade de JavaScript em um navegador e relata os resultados sem sair do seu terminal. É muito simples de usar: Basta executar yeti test.html para obter os resultados do teste de YUI Teste baseado em test.html . Você pode passar vários documentos HTML para testar vários componentes de uma só vez.

 $ yeti dom/tests/dom.html attribute/tests/attribute.html json/tests/json.html ✔ DOM Tests from Safari (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16) 20 passed 0 failed ✔ Y.JSON (JavaScript implementation) from Safari (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16) 68 passed 0 failed ✔ Attribute Unit Tests from Safari (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16) 106 passed 0 failed 194 tests passed! (3217ms)

O verdadeiro poder do Yeti é a execução de testes em vários navegadores simultaneamente. Apesar de Yeti pode abrir seus testes um por um no seu computador, Yeti permite que você execute testes em qualquer navegador em qualquer dispositivo, tudo ao mesmo tempo.

Se você executar Yeti sem argumentos, ele irá iniciar um servidor web que você pode acessar em http://localhost:8000 . Você pode apontar browsers ou dispositivos em sua rede para que URL e todos os testes que você executar a partir desse ponto será executado em todos os navegadores que visitam a página de teste.

Quando combinado com o excelente localtunnel , firewalls entre você e os outros computadores são menos dolorosas. Se você não está trabalhando com informações sigilosas, é uma maneira simples de fazer o seu Yeti disponível para a internet:

 $ localtunnel 8000 Port 8000 is now publicly accessible from http://example.localtunnel.com

Você pode então visitar esse URL para acessar Yeti e começar a execução de testes:

Isto é especialmente útil para dispositivos celulares: Você pode usar a conexão da sua operadora de internet sem a necessidade de obter o seu dispositivo na mesma rede do seu computador de desenvolvimento.

Yeti pretende fazer testes de JavaScript mais fácil, no entanto, está longe de estar completa. (Não tome o número da versão 0.1.0 de ânimo leve.) Yeti assume que você está usando YUI Test, só foi testado no Mac OS X, e pode não funcionar com alguns tipos de cenários de teste. Apesar destas deficiências, Yeti foi tão útil internamente que não queria esperar mais para compartilhá-lo com a comunidade YUI.

Obtendo o código

Yeti é disponível no GitHub e oferecidos sob licença BSD YUI .

Instalar

Yeti é inteiramente escrito em JavaScript e roda em cima do NodeJS . Se você já é um NodeJS e npm usuário, a instalação é muito simples:

 $ npm install yeti@stable

Se você não tiver instalado NodeJS e NPM e você estiver em um Mac recente, você ainda pode instalar o Yeti com um instalador conveniente.

Baixe o Yeti 0.1.0 Installer 2.7 MB
Requer Mac OS X 10.6 e um processador Intel Core 2 ou melhor

Se seu computador não atende aos requisitos do instalador, você ainda pode usar Yeti se você é capaz de instalar npm. Mais de instalação e instruções de uso estão disponíveis no README do Yeti .

Sua participação é bem-vinda

Yeti é o primeiro projeto que lançamos em YUI Labs , uma categoria abrangente que nossas novas idéias e iniciativas a tomar forma. Como tal, Yeti é oferecido sem o mesmo nível de apoio como os nossos outros projetos. Nós ainda encorajamos você a fazer perguntas e dar feedback em fóruns do Yeti e espero Yeti faz teste fácil e divertido. Se isso não acontecer, por favor diga-nos , envie um bug ou considerar contribuindo para Yeti .

Testes feliz!

Sobre o Autor: Reid Burke ( @ Reid ) é o mais novo membro da equipe de YUI. Ele adora monstros de neve abomináveis e JavaScript.

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

Desenvolver um Acessível Estrela Widget Ratings

24 de agosto de 2010 às 9:00 pm por Thierry Koblentz | Em Acessibilidade e Desenvolvimento | 18 Comentários

Está com pressa? Ir para a página de demonstração .

Muitos sites de comércio eletrônico, serviços de redes sociais e comunidades on-line incluem recursos de classificação ou avaliação. Solicitar a opinião das pessoas tornou-se mesmo um modelo de negócio, existem agora sites dedicados a produtos de classificação, serviços, empresas, e muito mais.

A interface mais comum usado para exibir votos é o "sistema de classificação", em que um determinado número de pontos (geralmente expressa como estrelas) é atribuído a um item por cada revisor. Encontramos este modelo em muitos sites, da Amazon para o Yelp.

Exemplos de sistemas de classificação estrela

Figura A. Estrela exemplos de classificação de Amazônia e Yelp .

Como Figura A mostra, ambas as interfaces visuais são semelhantes, mas o que faz com que essas duas soluções interessante é a sua base de marcação. Um depende <map> , o outro em <img> .

Você pode pensar que a maioria dos sistemas de classificação seria baseada em alguma marcação provado ser semântica e "operacional" em muitos agentes - isto é, que os sistemas de avaliação seria baseada em um conjunto específico de elementos e atributos HTML ao qual se aplica um comportamento e estilo via JS e CSS. Isso faria sentido, mas é muito longe da verdade. Quando se trata de marcação, os autores tentam quase tudo:

<a> ,
<img> ,
<span> ,
<li> ,
<map> ,
<div> ,
<input> ,
e mais ...

O caso de Microformats

Antes de apresentar algumas técnicas baseadas na imagem para marcar votos, acho que vale a pena mencionar uma abordagem básica e simples (de Microformats ) que usa caracteres:

 <abbr class="rating" title="3 stars">***</abbr>

Pros: É simples e semântico.; A marcação é mínima.; O método não é dependente de CSS.; O método não é dependente de imagens.; Não há solicitação HTTP.
Contras: É impossível para representar valores de metade (ou seja, 3,5 estrelas); Ele "trabalha" somente com asteriscos ("estrelas").; Leitores de tela, por padrão, não expanda as abreviaturas (que pode não ser um grande negócio, neste caso).

Nota: Eu uso o "*" ao invés de ★ (★), porque os leitores de ecrã (pelo menos, JAWS e NVDA ) parecem ignorar entidades html.

Markup para exibir a imagem com base em avaliações

Quando se trata de exibir imagens, os autores têm muitas opções.

Uma imagem por classificação

Usando uma única imagem:

 <img src="4stars.png" alt="4 out of five">

Uma estrela
Duas estrelas
Três estrelas
Quatro estrelas
Cinco estrelas

Pros: Usando uma imagem por avaliação é simples e semântico.; O método não é dependente de CSS.; Marcação mínima.
Contras: Ele cria muitas solicitações HTTP, pois há muitas imagens diferentes.; Em cima do problema de desempenho, pode ser um pesadelo de manutenção como autores têm que lidar com mais ativos (imagens para criar, para empurrar a um CDN, para modificar quando as cores do site mudam, etc.); Selecção de texto não é possível em Opera (pelo menos na versão 9.52) como o texto alternativo é ignorado

Uma imagem por unidade

A partir do WHATWG 's projecto de trabalho :

 <img alt="4 out of 5" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="no-star.png">

Uma estrela
Duas estrelas
Três estrelas
Quatro estrelas
Cinco estrelas

Pros: Usando duas img elementos por classificação diminui o número de solicitações HTTP.; O método não é dependente de CSS.
Contras: No Opera, quando as imagens estão desativadas, o texto alternativo não é selecionável, e (em uma pequena tela de exibição) que o texto é processado com uma fronteira que torna menos legível.

Note que este é tirado de um projecto de trabalho controverso. Na minha opinião, este método não é aceitável porque o texto alternativo não descreve a imagem com precisão e de forma sucinta. Além disso, se a base desta abordagem é que essas imagens representam o conteúdo, então por que deixar alguns deles sem alt texto?

Em Ajaxian , por exemplo, o autor está usando texto alternativo com cada imagem única, que faz muito sentido se ele considera que cada um é de conteúdo:

 <img [snip] alt="+" src="star1.png"/> <img [snip] alt="+" src="star1.png"/> <img [snip] alt="+" src="star1.png"/> <img [snip] alt="-" src="star0.png"/> <img [snip] alt="-" src="star0.png"/>

Em qualquer caso, usando quantas imagens existem estrelas versus usando um único elemento (uma img ou outra coisa) tem a vantagem principal de facilitar mecanismos de votação - onde um usuário seleciona uma das estrelas para exercer o seu voto. Assim, devemos manter isso em mente ...

Um sprite para imagens de fundo

A técnica a seguir é uma adaptação de uma estratégia originalmente implementado pelos desenvolvedores no Yahoo! Música :

Markup

 <span class="rating r1 stars">1 of 5</span> <span class="rating r2 stars">2 of 5</span> <span class="rating r3 stars">3 of 5</span> <span class="rating r4 stars">4 of 5</span> <span class="rating r5 stars">5 of 5</span>

CSS

 .stars { background: transparent url(img/sprite.png) no-repeat; } .rating { font-size: 0; height: 19px; overflow: hidden; vertical-align: middle; width: 96px; display: block; } .r1 { background-position: -385px 0; } .r2 { background-position: -288px 0; } .r3 { background-position: -192px 0; } .r4 { background-position: -96px 0; }

Uma estrela: 1 de 5
Duas estrelas: 2 de 5
Três estrelas: 3 de 5
Quatro estrelas: 4 de 5
Cinco estrelas: 5 de 5

Pros: Este método requer uma única solicitação HTTP como ele se baseia em uma imagem do sprite único.; Minimal "pegada".
Contras: O conteúdo não é revelado com imagens fora.; Nada mostra quando a página é impressa (uma folha de estilo de impressão pode cuidar desta questão).; No Opera, o estilo de alto contraste faz com que todas as estrelas desaparecem, o mesmo é verdade em Otimização modo de Alto Contraste .; Seleção de texto é possível, mas não é óbvio (via destacando).

Um sprite na marcação

Esta abordagem é baseada no método de TIP , que utiliza uma imagem de sprite como um <img> elemento em vez de uma imagem de fundo:

Markup

 <span title="1 of 5" class="rating r1"><img width="0" height="1" src="sprite.gif" alt=""/>1 out of 5</span> <span title="2 of 5" class="rating r2"><img width="0" height="1" src="sprite.gif" alt=""/>2 out of 5</span> <span title="3 of 5" class="rating r3"><img width="0" height="1" src="sprite.gif" alt=""/>3 out of 5</span> <span title="4 of 5" class="rating r4"><img width="0" height="1" src="sprite.gif" alt=""/>4 out of 5</span> <span title="5 of 5" class="rating r5"><img width="0" height="1" src="sprite.gif" alt=""/>5 out of 5</span>

CSS

 .rating { position: relative; height: 1.6em; width: 8.1em; overflow: hidden; vertical-align: middle; display: block; } .rating img { position: absolute; width: 40.5em; height: 1.55em; top: 0; border: 1px solid #fff; } .r1 img { right: 0; } .r2 img { left: -24.4em; } .r3 img { left: -16.2em; } .r4 img { left: -8.1em; }

Uma estrela: 1 de 5
Duas estrelas: 2 de 5
Três estrelas: 3 de 5
Quatro estrelas: 4 de 5
Cinco estrelas: 5 de 5

Pros: Este método requer uma única solicitação HTTP.; Esta técnica é o único dos quatro métodos acima que revela o conteúdo quando os usuários do Firefox selecione "imagens ocultar" ou "fazer imagens invisível" (na barra de ferramentas do desenvolvedor).; Quando as imagens estão disponíveis um "x" vermelho aparece apenas na mais alta classificação (ou seja, 5 out of 5) em vez de cada um como é o caso com outras soluções que dependem img elementos.
Contras: A exibição de imagens depende de CSS.

É interessante notar que ao contrário das técnicas de Reposição Imagem, este método permite:

imagens em escala conforme o texto do tamanho de configurações.
imagens a ser impresso.
texto alternativo para ser facilmente selecionado como toda a imagem aparece em destaque (Firefox).
a imagem não a desaparecer em um ambiente de alto contraste / estilo.
seleção de texto alternativo no Opera (quando as imagens estão desativadas).
texto alternativo margens, em vista do Opera tela pequena.

Marcação para votar

Começando com um mecanismo nativo

Para votar, precisamos de um mecanismo de votação de baixo nível que permite a seleção de usuário simples e submissão. Para isso, podemos confiar em usar um formulário com rótulos e controles:

Markup

 <fieldset> <legend>Rating</legend> <label><input type="radio" name="movie" value="1_5">1/5</label> <label><input type="radio" name="movie" value="2_5">2/5</label> <label><input type="radio" name="movie" value="3_5">3/5</label> <label><input type="radio" name="movie" value="4_5">4/5</label> <label><input type="radio" name="movie" value="5_5">5/5</label> </fieldset>

Resultar

Adicionando pausas e espaços em branco

Para melhor legibilidade, nós adicionamos <br> e espaços em branco.

Markup

 <fieldset> 
 <legend>Rating</legend> <label><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label><input type="radio" name="movie" value="4_5"> 4/5</label><br> <label><input type="radio" name="movie" value="5_5"> 5/5</label> </fieldset>

Resultar

Apresentando a imagem do sprite na marcação

Para esta solução, estamos a utilizar um menor do que a entidade gráfica um no exemplo acima. Agora, é composto de duas estrelas individuais ("on" e "off").

Nós colocamos img elementos dentro das etiquetas. Nós acreditamos que eles não terão nenhum valor sem suporte a CSS, assim, "esconder", ao estabelecer dimensões específicas através de sua width e height atributos. Note que o uso 0 com ambos os atributos iria mostrar uma imagem quebrada em algum s UA.

 <form ...> <fieldset> <legend>Rating</legend> <label class="one" title="1 out of 5"><input name="LandOf" value="1" checked="checked" type="radio"> 1/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="two" title="2 out of 5"><input name="LandOf" value="2" type="radio"> 2/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="three" title="3 out of 5"><input name="LandOf" value="3" type="radio"> 3/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="four" title="4 out of 5"><input name="LandOf" value="4" type="radio"> 4/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="five" title="5 out of 5"><input name="LandOf" value="5" type="radio"> 5/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> </fieldset> </form>

Note-se que com a marcação acima, podemos esperar que (na maioria dos browsers) de seleção de campo através de seleção rótulo.

Considerando Acessibilidade

Infelizmente, como é, essa marcação cria problemas em pelo menos dois leitores de tela: JAWS e NVDA (ver caso de teste para esses bugs). O problema está relacionado com a utilização de um title de atributo e uma cadeia vazia para o texto alternativo.

A solução para não confundir um leitor de tela, os usuários é a utilização de "estrelas" como texto alternativo ( alt ) e usar o JavaScript para inserir title no mouseover.

Melhor Markup

 <fieldset> 
 <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="4_5"> 4/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="5_5"> 5/5</label> </fieldset>

Resultar

Styling

Dar dimensões para a imagem via CSS

Usamos em para permitir a imagem para aumentar ou diminuir dependendo do tamanho da fonte.

Markup

Inalterado

CSS

 img { width:2.8em; height:1.4em; }

Resultar

Como você pode ver já, ao clicar em uma imagem seleciona o botão correspondente. Não há necessidade de scripts como rotulagem implícita produz este comportamento (excepto no IE).

Removendo a imagem a partir do fluxo

Denominando a label com position:relative ea imagem com position:absolute com top / left valores é suficiente para se esconder input e texto dentro das etiquetas.

Markup

Inalterado

CSS

  label { 
    position: relative;
 } 
 img {
   width: 2.8em;
   height: 1.4em;
    position: absolute; 
    top: 0; 
    left: 0; 
 }

Resultar

Exibindo uma estrela por etiqueta

Nós o estilo do rótulo para suas dimensões corresponder a altura ea largura de uma única estrela.

Markup

Inalterado

CSS

 label { position:relative;   height: 1.4em;
  width: 1.4em;
  overflow: hidden;
  display: block; 
 }
 img {
   width: 2.8em;
   height: 1.4em;
   position: absolute;
   top: 0;
   left: 0;
 }

Resultar

Exibindo as estrelas horizontalmente

Nós removemos o br s e nós flutuamos os rótulos.

Markup

Inalterado

CSS

  br {
  display: none;
 } 
 label {
   position: relative;
   height: 1.4em;
   width: 1.4em;
   overflow: hidden;
    display: block; 
    float: left; 
 }
 img {
   width: 2.8em;
   height: 1.4em;
   position: absolute;
   top: 0;
   left: 0;
 }

Resultar

Exibindo a imagem do sprite dependendo da classificação

Para definir um "3 em 5" rating, nós aplicamos a mesma classe que nos últimos dois rótulos. Esta classe irá deslocar a posição da imagem dentro da etiqueta.

Markup

 <fieldset> <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label   class = "no_star"   > <img Src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type="radio" name="movie" value="4_5"> 4 / 5 </ label> <br>
 <Etiqueta   class = "no_star"   > <img Src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type="radio" name="movie" value="5_5"> 5 / 5 </ label>
 <Fieldset />

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left; } img { width:2.8em; height:1.4em; position:absolute; top:0; left:0; }   . No_star img {
  esquerda:-1.4em;
 }

Resultar

Não confiar na imagem só para exibir informações

É importante oferecer uma alternativa para a exibição de estrelas, no caso as imagens não estão disponíveis. Isto é porque as etiquetas e botões de rádio são denominados de estar em cima uns dos outros. Uma solução simples é mudar input e texto fora da tela (ou seja, usando text-indent:-999em ) e aplicar uma cor de fundo para os rótulos.

Markup

Nenhuma alteração

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left;   background: teal;
  margin-right: 1px;
  text-indent:-999em; 
 }
 img {
   width: 2.8em;
   height: 1.4em;
   position: absolute;
   top: 0;
   left: 0;
 }
  . No_star {
  background: # ccc;
 } 
 . No_star img {
   esquerda:-1.4em;
 }

Nota:

text-indent também corrige a saltar para cima da imagem cada vez que os controles de obter o foco.
a margem direita é certificar-se cores de fundo criar quadrados e não retângulos (o que iria acontecer com rótulos adjacentes que compartilham a mesma cor de fundo).

Resultar

Acabamento de toque

Nós usamos a pseudo-classe :hover para criar algum efeito de rolagem,
Nós escondemos a fronteira fieldset,
Nós escondemos a lenda,
Nós o estilo do cursor.

Markup

Inalterado

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left; background:teal; margin-right:1px; text-indent:-999em; } input { position:absolute; left:-999em; top:.5em; } img { width:2.8em; height:1.4em; position:absolute; top:0; left:0;   cursor: pointer; 
 }
 . No_star {
   background: # ccc;
 }
 . No_star img {
   esquerda:-1.4em;
 }
  label: hover {
  opacidade: 0,5;
  filter: alpha (opacity = 50);
 }
 fieldset {
  margem: 0;
 }
 lenda {
  text-indent:-999em;
 }

Nota: label:hover é ignorado pelo IE6 e no Opera as hemorragias de fundo de cores através das imagens. Na página de demonstração , em vez de usar opacity , eu estou usando um duende diferente que mostra quatro estados.

Resultar

Exibindo as classificações sem permitir a interação do usuário

Nós podemos fazer as avaliações "read-only", acrescentando disabled e checked nos atributos apropriados input campos.

Markup

 <fieldset> <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"   desativada   > 1/5 </ label> <br>
   <label> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type = "radio" name = "movie" value = "2_5"   desativada   > 2/5 </ label> <br>
   <label> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type = "radio" name = "movie" value = "3_5" checked = "   verificado   "> 3/5 </ label> <br>
   <label class="no_star"> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type = "radio" name = "movie" value = "4_5"   desativada   > 4/5 </ label> <br>
   <label class="no_star"> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type = "radio" name = "movie" value = "5_5"   desativada   > 5/5 </ label>
 <Fieldset />

CSS

A regra usando :hover foi removido

Resultado h4>

Dar mais atenção ao processo de

Neste ponto, é possível votar sem o apoio script, mas os usuários com visão normal não tem nenhum indício sobre a sua seleção. Então, nós usamos o JavaScript para:

dar feedback para o usuário a respeito de sua seleção,
dar aos usuários de teclado uma pista visual enquanto eles navegam através dos botões de rádio.

Ao mesmo tempo, nós levamos vantagem de usar um script para inserir title atributos que criará "dicas" quando os usuários passar o mouse sobre os rótulos / estrelas.

Devido à falta de seleção sem comentários sobre JavaScript, etiquetas estilo e forma controla apenas se houver apoio script. Para isso usamos o JavaScript para definir um sinalizador no html do elemento e, em seguida, vamos criar uma regra baseada em seletores descendentes que contêm esse gancho. Se a bandeira está faltando, essa regra não se aplica e os elementos não são estilizadas.

Esta é a página de demonstração , o produto final. Para ver como essa solução se comporta de acordo com várias configurações, você pode querer usar suas ferramentas de desenvolvimento favoritas para aumentar o tamanho do texto, quebrar caminhos de imagem, desativar o JavaScript, ligue CSS off, e mais ...

Embrulhar

Chegando-se com uma solução "aceitável" requer para identificar as necessidades, os agentes dos usuários peculiaridades, definições de User Agents "e mais - o que significa testes extensivos.

Neste processo, o feedback dos usuários é essencial, pois seguindo as melhores práticas nem sempre é uma coisa certa. Por exemplo, como mencionado anteriormente, a definição de qualquer valor para o alt atributo das imagens nos rótulos parece ser a coisa segura a fazer, mas acontece que ele cria problemas com pelo menos dois leitores de ecrã (ver caso de teste ).

Além disso, o feedback dos usuários dos dispositivos de assistência permite ignorar algumas mensagens de erro de validação - como a que os relatórios da barra de ferramentas do Firefox Acessibilidade (de acordo com http://bestpractices.cita.uiuc.edu/html/nav/form/ ).

O objetivo aqui não era para corrigir tudo, embora. Ser capaz de votar sem um dispositivo apontador foi uma das minhas prioridades, mas melhorando a aparência da solução no Opera quando as imagens estão desativadas não é algo que considero essencial.

A parte mais interessante desta "viagem" foi para fazer a solução acessível para muitos usuários sob várias condições, abordando questões como:

imagens de folga,
javascript desligado,
CSS off,
uma combinação do acima.

Também é bom saber que esta técnica se baseia em img elementos ao invés de imagens de fundo, o que permite que as estrelas:

redimensionar-se de acordo com as configurações do usuário,
mostrar em modo de alto contraste,
ser impresso por padrão (ao contrário de imagens de fundo).

Tudo isso vem sem sacrificar o desempenho, como esta solução depende desse sprite único:

Tarde encontrar

Eu descobri recentemente o sistema amazônico construiu para a sua página de votação. É muito interessante como eles servem uma solução diferente, dependendo do apoio script. Se não houver apoio script, eles usam uma imagem <map> (abordagem interessante), se não houver apoio script que usar os botões de rádio. Em ambos os casos, a solução é acessível aos utilizadores do teclado, e isto contribui para maximizar o acesso a uma característica que é um núcleo diferenciador para a plataforma Amazon.

Note que eles não usam JavaScript para substituir os botões de rádio com uma imagem <map> , em vez disso, eles usam noscript elementos em que mesa de marcação contém botões de rádio.

"Out of the box" soluções

Dreamweaver ^®: Spry Rating Widget
YUI: Estrela Script Avaliação para YUI; Estrela roteiro Avaliação com YUI
JQuery: Metade Star-Plugin Avaliação; jQuery Ajax Rater; Sistema de Classificação Simples Estrela; 5 sistema de classificação em PHP, MySQL e jQuery
WordPress: GD sistema de classificação para o WordPress; GD Star Rating; Votos para Comentários
Flash: 5 Star componente sistema de classificação
Misc.: Como uma estrela deve ser; Starry Widget 2

Agradecimentos especiais

Um agradecimento especial a Victor Tsaran e Kloots Todd para o seu feedback valioso.

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

Anunciando YUI 3.1.2: Atualização de segurança crítica para todos os usuários YUI 3.1.x/3.2.0pr1

19 de agosto de 2010 às 12:35 por Eric Miraglia | Em Desenvolvimento | Comments Off

A equipe YUI YUI lançado 3.1.2 hoje. Esta é uma atualização de segurança importante para todos os usuários do YUI 3.1.x e 3.2.0pr1. Se você está hospedando YUI 3.1.x ou 3.2.0pr1 em seu site, ou se você usar a funcionalidade YUI 3.1.x/3.2.0pr1 IO de cross-domain, você é afetado.

XDR no utilitário YUI IO implementa um transporte Flash como uma alternativa para browsers que não suportam XDR nativa. Um erro na nossa implementação da reserva de Flash nas versões 3.1.x YUI e 3.2.0pr1 permite que o io.swf arquivo para operar insegura se servido do CDN Yahoo! ou a partir do seu próprio servidor. O remédio para este problema é duplo:

Se você tiver implantado o pleno YUI 3.1.x/3.2.0pr1 construir diretório para o servidor, substituir build/io/io.swf na versão afetada com a versão incluída no YUI 3.1.2. Fazê-lo se você está ou não usando o utilitário IO ou a sua funcionalidade XDR.
Se você estiver usando o recurso de IO de XDR, a atualização para a versão 3.1.2 do io-swf aborda o problema de segurança. Anfitrião versão 3.1.2 do io.swf em seu próprio servidor (este arquivo não pode operar com segurança a partir de um CDN, não está incluído no CDN a partir de 3.1.2). Se você foi desenhar io.swf de http://yui.yahooapis.com , remova este domínio de seu crossdomain.xml arquivo.

Mais detalhes sobre este assunto podem ser encontrados em documentação do utilitário IO .

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

Modo de edição rápida para YUI 2 DataTable

19 de agosto de 2010 às 8:42 pm por John Lindal | Em Desenvolvimento | 9 Comentários

YUI 2 DataTable fornece edição inline slick. Quando disableBtns está ligado na configuração de coluna, edição de valores simples, como seqüências de números ou sente apenas como o Excel. No entanto, a experiência não pode ser tão sensível como uma aplicação desktop, pois cada mudança exige normalmente uma chamada XHR para o servidor para armazenar (ou rejeitar!) O novo valor. Se o usuário precisa mudar muitos dos valores apresentados, pode ser uma experiência lenta e frustrante. Para resolver isso, eu desenvolvi QuickEditDataTable. Isso amplia DataTable para adicionar modo de edição rápida, que permite que todos os valores editáveis ser mudado em uma operação em massa:

( Clique na imagem para jogar com este exemplo .)

Visão global

Para entrar no modo de edição rápida, chamar startQuickEdit() . Para sair do modo de edição rápida, chamar cancelQuickEdit() .

É de sua responsabilidade para salvar as alterações antes de chamar cancelQuickEdit() . Para simplificar esta tarefa, QuickEditDataTable fornece getQuickEditChanges() . Isso retorna um array de objetos, um para cada linha. Cada objeto contém apenas os valores que foram alterados nessa linha, com chave na coluna id. Por exemplo, se a tabela tem 4 colunas (título, autor, ano, quantidade), eo usuário só mudou a quantidade em uma linha a 20, então o objeto para essa linha seria {quantity:20} . Os outros valores seria omitido.

QuickEditDataTable pode facilmente estender YAHOO.widget.ScrollingDataTable se você precisar essa funcionalidade. Se você precisa disso, basta fazer uma cópia do arquivo de origem e alterar a classe base.

Configuração

Quick Edit é um estado modal em que os formatadores de celulares para as colunas editáveis são trocados e substituídos por formatadores especiais que geram input , textarea , ou select elementos. Somente as colunas que têm quickEdit de configuração será editável. As opções de configuração são:

copyDown

Se for verdade, a célula superior na coluna terá um botão para copiar o valor para baixo para o resto das linhas.

formatter

O formatador de célula que irá processar um campo de formulário apropriado: <input type="text">, <textarea>, ou <select>. Por padrão, o formatador de célula YAHOO.widget.QuickEditDataTable.textQuickEditFormatter é usado para todas as células para produzir elementos de entrada. Para obter uma textarea elemento, configurar uma coluna para usar YAHOO.widget.QuickEditDataTable.textareaQuickEditFormatter vez. Você também pode escrever um costume formatador de edição rápida - veja abaixo.

validation

Configuração de validação para cada campo na coluna.

css

Classes CSS codificam regras de validação básicas:

yiv-required: Valor não deve estar vazio.
yiv-length:[x,y]: Corda deve ser, pelo menos x caracteres e na maioria dos y caracteres. Pelo menos um de X e Y deve ser especificado.
yiv-integer:[x,y]: O valor inteiro deve ser pelo menos x e, no máximo, y . x e y são ambos opcional.
yiv-decimal:[x,y]: O valor decimal deve ser pelo menos x e, no máximo, y . Expoentes não são permitidos. x e y são ambos opcional.

fn

Uma função que será chamado com o DataTable como o seu alcance e elemento da célula forma como o argumento. Retorna true se o valor é válido. Caso contrário, ligue para this.displayQuickEditMessage(...) para exibir um erro e, em seguida, retornar false.

msg

Um mapa de tipos de mensagens que serão exibidas quando uma regra de validação básica ou regex falhar. Os tipos válidos são: required , min_length , max_length , integer , decimal , e regex . There is no default for type regex , so you must specify a message if you configure a regex validation. The default error messages for the other types are stored in YAHOO.widget.QuickEditDataTable.Strings and can be overridden and/or localized.

regex

Regular expression that the value must satisfy in order to be considered valid.

Sometimes, a non-editable column must be rendered differently during Quick Edit mode. The best example is a column containing a link, since navigating away from the page while in Quick Edit mode can be disastrous. To remove the link during Quick Edit, configure qeFormatter for the column to be YAHOO.widget.QuickEditDataTable.readonlyLinkQuickEditFormatter . For email addresses, use YAHOO.widget.QuickEditDataTable.readonlyEmailQuickEditFormatter . You can also write you own custom, read-only formatter. Simply follow the normal rules for constructing a DataTable cell formatter.

Custom Quick Edit Formatters

To write a custom cell formatter for QuickEdit mode, you must structure the function as follows:

function myQuickEditFormatter(el, oRecord, oColumn, oData) {
  var markup =
    '<input type="text" class="{yiv} yui-quick-edit yui-quick-edit-key:{key}"/>' +
    YAHOO.widget.QuickEditDataTable.MARKUP_QE_ERROR_DISPLAY;
    el.innerHTML = lang.substitute(markup, {
      key: oColumn.key,
      yiv: oColumn.quickEdit.validation ? (oColumn.quickEdit.validation.css || '') : ''
     });
    el.firstChild.value = extractMyEditableValue(oData);
    YAHOO.widget.QuickEditDataTable.copyDownFormatter.apply(this, arguments);
 };

You can use textarea or select instead of input , but you can only create a single field.

extractMyEditableValue() does not have to be a separate function nor must it be limited to using only oData . The work should normally be done inline in the formatter function, but the name of the sample function makes the point clear.

About the author: John Lindal ( @jafl5272 on Twitter) is one of the lead engineers constructing the foundation on which Yahoo! APT is built. Previously, he worked on the Yahoo! Publisher Network.

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

Using YUI 2 on the DuckDuckGo Search Engine

August 19, 2010 at 5:41 am by Gabriel Weinberg | In YUI Implementations | 2 Comments

DuckDuckGo is a search engine that uses YUI extensively. Here's what it uses in particular:

ImageLoader . Matt Mlinac's YUI 2 ImageLoader was the first thing I implemented and what originally hooked me on YUI for this project. DuckDuckGo has favicons next to results and often has “Zero-click Info” above results that usually includes an image . I didn't want these images to compete with the results when loading, as getting results as fast as possible is the ultimate goal.
The ImageLoader Utility handles this well by loading the images after the page load. DDG also auto-loads the next page of results when you scroll down. Sometimes the favicons icons are therefore hidden, and with ImageLoader their load is delayed (sometimes indefinitely) until necessary. To accomplish this, there is a different image group per (internal) page, each with its own custom trigger.
```
 div.event=new YAHOO.util.CustomEvent('it');
    var ig1=new YAHOO.util.ImageLoader.group(div,'click');
    ig1.addCustomTrigger(div.event);
    div.ig = ig1;
```
Cookie . DuckDuckGo has a lot of settings , which are stored via cookies and alternately via URL params . When cookies are used, I use Nicholas Zakas's YUI 2 Cookie Utility to easily get and set the values.
```
 YAHOO.util.Cookie.set(cookie, value, { expires: new Date("January 12, 2025") });
  x=ki||YAHOO.util.Cookie.get("i"); 
```
StyleSheet . Some DDG settings change the look and feel of the site. These changes are actually accomplished after page load via Luke Smith's YUI 2 StyleSheet Utility . Some of these changes are straightforward and I can just use the setStyle Dom function .
```
 YAHOO.util.Dom.setStyle('b2','display','block'); 
```
Others require actual class changes, which I use the utility to do.
```
 YAHOO.util.StyleSheet('DDG').set('.ci', {display: "block"}).
            set('.cid', {display: "block"}).
            set('.ci2', {display: "block"}).
            enable(); 
```
Dom . I also use some functions in Matt Sweeney's base YUI 2 Dom component . I referenced setStyle above, and I also use the related getStyle , addClass and removeClass functions. In addition, I find the getViewportHeight , getViewportWidth , getX and getY functions to be incredibly useful to make things work cross-browser, and now on mobile screens as well.
KeyListener . DDG has a bunch of keyboard shortcuts that let you navigate results without the mouse. I use the YUI 2 KeyListener component to enable these shortcuts.
```
 kl14 = new YAHOO.util.KeyListener(document, { keys:[70] }, { fn:not } );kl14.enable(); 
```
AutoComplete . I'm currently working on adding search suggestions to the search engine, and will be using Jenny Donnelly's YUI 2 AutoComplete component for the front-end. I understand that AutoComplete is getting introduced in YUI 3 soon. Everything else I use has already been introduced in YUI 3, though I still use YUI 2. However, I will be exploring the migration to YUI 3 soon.

About the author: Gabriel Weinberg is the founder of the DuckDuckGo search engine, based out of Valley Forge, PA. Gabriel has been a startup founder for over ten years, and his last company was sold in 2006. Gabriel holds degrees from MIT in Physics and the Technology and Policy Program.

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

Implementing YUI on the Assembla.com Agile Planner

August 18, 2010 at 6:35 am by Joachim Larsen | In YUI Implementations | Comments Off

Fast and fun – that was the user requirement for the new Assembla.com Agile Planner – an AJAX interface for adding development tasks, building story/feature outlines, and scheduling them into releases. We were lucky to have YUI 3 to make it fast and fun to implement as well.

I had used YUI 2 for a number of prior projects and I had been impressed by the engineering of the UI components and the underlying library infrastructure. I wanted to learn more about YUI 3, with its compact syntax and deeper focus on DOM manipulation and CSS3-style selectors. This project, with a low dependence on 'prebuilt widgets,' was a perfect opportunity to get my feet wet with YUI 3. The facilities for 'large app' implementation via custom modules and integration with YUI loader made it a natural choice.

The Agile Planner supports a number of drag and drop user interactions with multiple interaction groups and context based behaviors. At the same time, it handles a complex set of interactions with the server, including merging in new data from the server, and propagating changes to the server.

We improved on the existing Planner which was based on Rails handlers and Prototype.js. YUI's sandbox philosophy and strong OOP facilities made coexisting with Prototype.js a breeze.

We used a large number of YUI components, including:

Async-Queue to offer a responsive experience on a page that can involve 1000+ simultaneous tickets
Drag and Drop with interaction groups.
IO as a connection manager to queue and massage server interaction.
Event-delegate to allow simply hydrating html templates and forgetting about them.
Event-key for keyboard interaction and navigation.
Collection for giving us a consistent implementation experience across browsers.
Cookie for easy short-term UI persistence.
Profiler to find the biggest speed gains
YUI Doc to leave information for the rest of the team

Working with YUI 3 on an app like this has been fun, and I am looking forward to hearing what our users will urge us to do next!

About the author: Joachim Larsen is a frontend engineer with Assembla.com.

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

Página Seguinte »

Alimentado por WordPress em Yahoo! Web Hosting .

Outros vídeos Theater recentes YUI:

Inscrevendo-se na YUI Theater:

Obtendo o código

Instalar

Sua participação é bem-vinda

O caso de Microformats

Markup para exibir a imagem com base em avaliações

Uma imagem por classificação

Uma imagem por unidade

Um sprite para imagens de fundo

Markup

CSS

Um sprite na marcação

Markup

CSS

Marcação para votar

Começando com um mecanismo nativo

Markup

Resultar

Adicionando pausas e espaços em branco

Markup

Resultar

Apresentando a imagem do sprite na marcação

Considerando Acessibilidade

Melhor Markup

Resultar

Styling

Dar dimensões para a imagem via CSS

Markup

CSS

Resultar

Removendo a imagem a partir do fluxo

Markup

CSS

Resultar

Exibindo uma estrela por etiqueta

Markup

CSS

Resultar

Exibindo as estrelas horizontalmente

Markup

CSS

Resultar

Exibindo a imagem do sprite dependendo da classificação

Markup

CSS

Resultar

Não confiar na imagem só para exibir informações

Markup

CSS

Resultar

Acabamento de toque

Markup

CSS

Resultar

Exibindo as classificações sem permitir a interação do usuário

Markup

CSS

Dar mais atenção ao processo de

Embrulhar

Tarde encontrar

"Out of the box" soluções

Agradecimentos especiais

Visão global

Configuração

Custom Quick Edit Formatters

YUI Library no Twitter

Traduzir

Sindicato

Mensagens recentes

YUI Biblioteca

Arquivos:

Blogroll

Comentário Política

Torne-se um Yahoo!

Meta: