Yahoo! Blog User Interface (YUIBlog)

CSS Rápida Dica: Como evitar uma "queda float" no IE6

28 de outubro de 2010 às 1:52 pm por Thierry Koblentz | Em CSS 101 e Desenvolvimento | 4 Comentários

Mesmo que este comportamento é muitas vezes chamado de " queda flutuante "ou um" float queda ", a coluna que cai não tem que ser um float ... só tem que ser maior do que o espaço alocado para ele. Note que este é por spec e é um comportamento comum em todos os navegadores, se uma coluna é "muito grande", então ele vai cair.

O que faz o IE 6 posição de fora é que este navegador não suporta totalmente a width propriedade (nem height para que o assunto). Assim, ele permite que os contentores crescer para acomodar seu conteúdo. É este crescimento que cria a gota, porque a caixa não pode encaixar o seu espaço concebido.

Normalmente, os culpados são elementos que não envolvem (por exemplo, imagens, urls, etc), mas estilo de fonte (por exemplo, IE e itálico ) pode ser responsável também.

Por exemplo, para fazer a queda na coluna da direita YUIBlog no IE 6, tudo que eu tinha a fazer é ao estilo de uma das imagens no trilho certo com uma largura superior a 210 pixels. Isso obriga imagem IE 6 para aumentar a largura da coluna da direita, que, em seguida, já não pode encaixar ao lado da coluna da esquerda.

As correções do costume:

word-wrap: break-word;

Cordas envoltório quebrando na borda direita da caixa.

wbr com wbr:after {content:"\00200B"} para o Opera

O wbr elemento representa uma oportunidade de quebra de linha. Inserindo wbr dentro de cadeias longas permite o browser para adicionar uma quebra de linha, se necessário.

overflow-x:hidden;

Qualquer conteúdo mais amplo do que o recipiente é de corte na borda direita da caixa disse.

Note que as duas primeiras soluções só funcionam em cadeias e não vai impedir que imagens, etc de expandir a caixa.

Quando correções conhecidas não curto

Algumas semanas atrás, fui convidado para corrigir um "drop float" em uma das páginas do Yahoo! Finanças. Em navegadores modernos, uma longa seqüência foi saindo do trilho certo (screenshot), mas no IE 6 que fez a mesma seqüência queda coluna da direita abaixo da dobra (screenshot). Infelizmente, esse conteúdo veio de um fornecedor, de modo a edição a marcação não era uma opção.

Devido à natureza da cadeia, que era uma lista separada por vírgulas de símbolos, as correções acima não foram satisfatórios. Quebrar essa lista em um lugar arbitrário era melhor do que cortá-lo, mas ainda não é uma solução viável ...

Fazer IE 6 se comportar como os meninos grandes

O truque para fazer o IE 6 se comportar como quaisquer navegadores modernos lá fora, é o estilo da caixa com uma margem negativa direita (mais position:relative ).

Demonstração ao vivo

Sem a correção

Screenshot para aqueles que não veja esta página no IE 6.

Com a correção

.fixMe { margin-right:-100px; position:relative; }
.fixMe { margin-right:-100px; position:relative; } 

A margem negativa pode ser de qualquer valor, desde que este valor for maior que o delta entre a largura atribuída ea largura efectiva da caixa de expandida. É esta declaração que impede que o flutuador gota. O objectivo da position:relative é fazer com que o IE mostram o teor de fora das fronteiras do recipiente pai.

Porque eu gosto de elementos de estilo do mesmo através da placa, eu geralmente não sandbox esta regra.

Coisas a considerar

Este hack mantém a coluna no lugar, mas não impede que o recipiente de cada vez maior. Isto significa que você não pode estilizar o elemento com um fundo ou uma fronteira porque eles seriam pintadas fora do invólucro. Aqui está uma imagem de fundo e borda o que parece quando aplicado em combinação com esta técnica no IE 6:

Encontrar conversas: bloglines | technorati

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

jQuery e YUI 3: Um Conto de Duas bibliotecas JavaScript

27 de outubro de 2010 às 14:08 por Mark Rall | Em Desenvolvimento e Implementações YUI | 5 Comentários

Recentemente tive a oportunidade de construir o meu primeiro JavaScript aplicativo front-end. O que se segue é uma história curta da descoberta e evolução que acontece quando se tenta usar ferramentas que não são adequados para o trabalho na mão. É uma conta do aprendizado adquirido através do desenvolvimento da aplicação final frente mesmo usando duas bibliotecas muito diferentes, jQuery e YUI 3. Detalhes do cliente e do projeto foram intencionalmente omitidos.

Visão global

O projeto envolveu a refatoração de várias ferramentas do Flash díspares em um único aplicativo interativo baseado em padrões abertos para uma editora grande conteúdo. De grande importância, o pedido teve de ser altamente otimizado com uma pegada pequena inicial devido ao grande número de impressões de páginas diárias o cliente recebe. Várias fases foram envolvidos, sendo a primeira uma prova de conceito.

O conceito envolvido no desenvolvimento de uma visão do que seria a aplicação concluída. Ele consistia de:

• Um arquivo de semente inicial (<1KB) responsável pelo carregamento dinâmico de todas as estruturas (por exemplo, jQuery ou YUI 3) eo arquivo de aplicação inicial.
• O desenvolvimento e inclusão de plugins jQuery para apoiar estilo elemento de formulário e validação e visualizações de gráfico dinâmico.
• A geração ea população de interface do usuário, com base em entradas do usuário, padrões de configuração e localização do aplicativo dentro do site da editora.
• O cálculo ea apresentação da informação com base na entrada do usuário.

No interesse da divulgação cheia, minha própria experiência até o momento tinha sido no desenvolvimento de pequenas soluções independentes, o tipo de que você normalmente poderia descrever como plugins. Estes incluíram componentes de interface do usuário dinâmico, como carrosséis de imagens, mapas interativos e Twitter / Flickr widgets. No momento da primeira a brincar com JavaScript, jQuery era popular, fácil de aprender e me permitiu pegar rapidamente os conceitos básicos necessários para os projetos que eu estava trabalhando. No entanto, estes eram todas as unidades autônomas e não tinha necessidade de interagir com outro código ou como parte de uma aplicação maior.

Primeira tentativa

Ao completar a primeira fase do projeto, tornou-se dolorosamente óbvio que eu estava lidando com um animal muito diferente do que eu estava acostumado. Tendo tido pouca experiência em organização de código, o meu código tornou-se rapidamente desorganizado, ineficiente e repetitivo. Como resultado, a primeira parte que se tornaria uma aplicação muito maior era lenta para carregar. Na verdade, demorou oito segundos para gerar a única prova de conceito. A grande mudança foi necessária e, enquanto eu tinha considerado usando uma pequena biblioteca como Base de Dean de Edward ou John Resig Herança Simples JavaScript padrão para adicionar classe baseada em herança para jQuery, eu decidi ir um passo adiante.

O que eu queria era um quadro completo, maduro dentro do qual a desenvolver a minha aplicação OO em primeiro lugar. Algo que efetivamente me guiar através do processo. Ao rever as bibliotecas disponíveis decidi adotar YUI 3 para os seguintes motivos:

• Integrado, baseado em herança o apoio ao desenvolvimento do aplicativo, incluindo atributo e gerenciamento de classe.
• Solução a longo prazo:
  • Suporte para padrões e acessibilidade.
  • Financiado por uma bem conhecida Yahoo! organização de grande porte,
  • Associado com nomes respeitados como Douglas Crockford , Zakas Nicholas , e Stoyan Stefanov .
• Otimização de desempenho:
  • Arquivo semente inicial de 7KB apenas.
  • Lazy-carregados módulos sob demanda.
  • Entrega CDN.
• Documentação variada e abrangente:
  • Yahoo! Developer Network
  • YUI 3 Documentação API
  • YUI Theater
  • YUI Biblioteca
  • YUI Blog
• Evolução, maduro consistente entre os lançamentos.
• Ferramentas integradas em YUI Compressor , YUIDoc , Construtor de YUI , e Console .
• Não apenas o JavaScript, uma estrutura CSS também.

Take Two

Integrando YUI 3 trouxe vários benefícios diretos e indiretos para o projeto:

• Herança baseada em arquitetura e gerenciamento de classe através do atributo interface, e Base de Dados e Widget classes produtoras código, performant reutilizável e organizada.
• Separação de apresentação do modelo e dados usando o Widget classe para tornar exibições alternativas (em linha ou de sobreposição) com base na localização do aplicativo dentro do site.
• Sandboxing e dinâmica módulo de inclusão através YUI.use ().
• Cross-browser depuração console usando YUI Console .
• No save, otimização de performance utilizando YUI Compressor no Eclipse.
• Fácil inclusão e integração de plugins jQuery pré-existentes.
• No save, documentação de código automatizada usando YUIDoc .

O resultado final foi um cliente satisfeito e um produto acabado, com tempos inferiores a um segundo de carga (lembrando que levou 8 segundos para carregar a prova de conceito).

Lições Aprendidas

Selecione a ferramenta certa para o trabalho

Ao ler este post eu tenho certeza que alguns leitores vão ver isso como anti-jQuery. Nem um pouco. jQuery é um projeto fantástico responsável por muitas inovações. Mas, como acontece com qualquer ferramenta, ela tem seus pontos fortes e uma finalidade. Sua força está no inconsistências navegador normalização, reduzindo a barreira de entrada para os novatos e melhorar a eficiência dos programadores experientes. O aprendizado principal que saiu do projeto foi que você não pode confiar em uma única ferramenta para cada trabalho. YUI constrói sobre o que jQuery pode proporcionar oferecendo também uma estrutura de aplicativo bem arquitetado. Mas é justo dizer que tem um custo, ver o ponto seguinte.

Íngreme curva de aprendizado

Você precisa de paciência, especialmente quando se escreve o seu primeiro aplicativo com uma biblioteca desconhecido como eu fiz. No entanto, a recompensa é enorme. Ao aprender uma outra biblioteca, não só suas habilidades JavaScript núcleo melhorar, você também vai desenvolver um profundo entendimento de como funcionam as bibliotecas e os benefícios que elas trazem. Eu tento aprender algo novo sobre YUI todos os dias e quanto mais eu aprendo, mais eu estou no temor do pensamento e puro talento que se foi construindo em YUI.

Apenas carregar o conteúdo quando você precisar dele

Embora seja certamente mais fácil de programação apenas para carregar tudo o que precisa inicial, as melhorias de desempenho obtida como um resultado direto de conteúdo carregamento lento somente quando você precisar dele é enorme. Este foi um dos fatores fundamentais que contribuem para melhorar drasticamente o desempenho do aplicativo.

Interagir com o DOM tão pouco quanto possível

Este ponto não se relaciona com a biblioteca específica utilizada. Por cache os elementos necessários DOM e utilizando templates HTML mais, UI tempo de renderização caiu consideravelmente. Os nós podem ser armazenadas em cache utilizando Y.one () enquanto listas de nó podem ser capturados usando Y.all (). Também Y.Node.create () foi muito útil para converter eficientemente grandes cadeias de texto de HTML para elementos DOM antes da inserção.

Saiba por exemplo, usar um CDN

Em usando a biblioteca YUI do CDN entregue decidimos entregar todos os ativos do projeto através de CDN. Este foi provavelmente o maior fator que vem contribuindo para a melhoria do desempenho.

Hubbub Pub, sub

Para os programadores experientes lá fora, tente não rir de um presente. Tendo sido usado para escrever pouco mais de plugins no passado, eu não tinha idéia de como os aplicativos devem comunicar internamente. Mesmo depois de ler "Eventos personalizados permitem que você publique os momentos interessantes e eventos em seu próprio código para que outros componentes da página pode se inscrever para os eventos e responder a elas," Eu ainda perdeu.

Como se vê, de evento personalizado YUI publicar e-subscribe modelo funciona muito bem para a comunicação inter-classe e inter-objeto. Você ainda pode se inscrever para pré e pós eventos e incluem lógica dinâmica para suprimir a borbulhar com base em certas condições.

Integrar melhores práticas em seu fluxo de trabalho

Usando o Eclipse fomos capazes de integrar JSLint e YUI Compressor no processo de construção. Simplificando, cada vez que você pressione Ctrl / Cmd + S seu código JavaScript é validado e otimizado. Isso significa que você está testando código de produção otimizada, grau da primeira linha de código. Isso também significa que você não vai esquecer para otimizar na frenética corrida final para o prazo de entrega.

Aprender YUI no trabalho

Embora todo mundo tem um estilo de aprendizagem diferente, eu pensei em compartilhar o que recursos que eu usei para aprender YUI com um objetivo específico em mente.

• Assista os episódios relevantes Teatro YUI para obter uma visão geral da biblioteca ou aprender um módulo específico. Eu altamente recomendo começar com:
  • Bem-vindo Eric Miraglia para YUI 3
  • Todd Kloots em YUI Açúcar 3
  • YUI Matt Sweeney 3 Desempenho
  • Depuração Luke Smith em YUI 3
  • Isaac Schlueter na resolução de problemas com YUI 3
  • Eric Ferraiuolo em Web App Desenvolvimento com YUI 3
  • Eventos Luke Smith Evolved
• Leia-se sobre YUI no Yahoo! Developer Network . Eu tento ler um pouco a cada semana e aprender mais a cada vez que eu re-ler.
• Leia a API documentação. Se você não consegue encontrá-lo em YUI Theater ou no Developer Network, cavar a API. Ele ainda vale a pena ler diretamente o código.
• Ler e enviar perguntas para o fórum sobre YUILibrary.com .
• Joga muito e se divertir!

Conclusão

YUI 3 é uma biblioteca cheia de recursos, maduro e em constante evolução adequada para pequenas e grandes projetos. Conforme os aplicativos web front-end se tornam mais complexas, a necessidade de bibliotecas como YUI vai crescer. Enquanto que para os não iniciados, pode ser uma experiência difícil no começo, se você ficar com ela você será recompensado.

Encontrar conversas: bloglines | technorati

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

YUIConf 2010 vende para fora; Anunciando Dois Eventos noite especial

26 de outubro de 2010 às 03:35 por Jenny Donnelly | Em Desenvolvimento e Eventos YUI | Comments Off

YUIConf 2010 é vendido para fora! Obrigado a todos que se registrou - estamos ansiosos para ver todos vocês em novembro. Estamos agora dando os toques finais no nosso cronograma, mas você pode dar uma olhada no que temos na loja aqui: http://yuilibrary.com/yuiconf2010/schedule.php .

Os destaques incluem:

• A Node.js acompanhar onde você pode rampa em todas as coisas interessantes acontecendo com server-side JavaScript. Temos Node.js criador Ryan Dahl apresentação e senta-se em um painel sobre o futuro da engenharia frontend, e temos Dav YUI Glass, um dos primeiros a demonstrar Nó baseado melhoria progressiva utilizando off-the-shelf componentes da biblioteca (de YUI 3), mostrando que o futuro parece.
• Uma faixa YQL para chegar até você para acelerar sobre como alavancar YQL para acessar dados de qualquer lugar na Internet. A equipe YQL si será na mão para falar sobre seu mais recente trabalho.
• Os estudos de caso que expõem como projetos do mundo real implementar YUI em ambientes de produção. Engenheiros do Flickr e do Yahoo! Mail vai estar na mão, e Eric Ferraiuolo - vencedor de um prémio PayPalX por seu trabalho recente - vai estar aqui para falar sobre Dica da Web , o seu mais recente projeto YUI 3-based.
• Apresentações perspicazes sobre como proporcionar experiências móveis / touch.
• Mergulhos profundos nos módulos YUI, de AutoCompletar para Grids CSS às contribuições da Galeria.

Todas as sessões serão arquivados em vídeo e disponível no YUI Theater logo após a conferência.

Estamos entusiasmados por unir forças com o Yahoo! Developer Network para sediar dois eventos noturnos especiais que serão abertos ao público em geral. Assim, embora a conferência já está esgotado, qualquer pessoa pode participar dos eventos da noite por se inscrever no Meetup.com. O espaço é limitado, então se inscrever em breve! (Participantes YUIConf não precisa se inscrever.)

YUIConf Painel de Discussão de 2010: "O Futuro do Desenvolvimento Web" moderado por Ben Galbraith e Dion Almaer
08 de novembro de 2010, 06:30 - oito horas

Registe-se para participar do painel de discussão no http://www.meetup.com/BayJax/calendar/15239592/ .

YUIConf reuniu este distinto painel para explorar o futuro próximo da disciplina em um momento de grande mudança. Painelistas programadas incluem Elaine Wherry, fundador e arquiteto frontend no Meebo, Douglas Crockford, JavaScript arquiteto no Yahoo!; Tantek Çelik, tecnólogo e autor; Ryan Dahl, criador do Node.js; Joe Hewitt do Facebook, criador do Firebug e um dos mais baixados aplicativos móveis de todos os tempos (Facebook para iOS); Thomas Sha, YUI fundador da Yahoo!.

YUIConf Keynote 2010: "Future Project" por Douglas Crockford
10 nov 2010, 6:30-20:00

Registe-se para assistir à palestra na http://www.meetup.com/BayJax/calendar/15239717/ .

No desenvolvimento de software, nós sonhamos sobre arquitetura. Esta é a história verídica de como um sonho.

O assento é limitado para esses eventos especiais, por isso não deixe para se inscrever em breve!

Fotos CC:

• Dion Almaer: http://www.flickr.com/photos/seanosh/3306058997/
• Tantek Çelik: http://www.flickr.com/photos/thomashawk/409672754/
• Ryan Dahl: http://www.flickr.com/photos/blank22763/4089950858/
• Elaine Wherry: http://www.flickr.com/photos/drewm/3016944830/
• Ben Galbraith: http://www.flickr.com/photos/seanosh/3306056383/

As fotos usadas por gentil permissão:

• Douglas Crockford: http://www.flickr.com/photos/allenr/4482834276/
• Douglas Crockford: http://www.flickr.com/photos/allenr/4341338168/

Encontrar conversas: bloglines | technorati

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

Anunciando YUI 2.8.2 - atualização de segurança importante para todos os usuários de YUI 2.4.0-2.8.1

25 de outubro de 2010 às 11:34 am por Eric Miraglia | Em Desenvolvimento | 6 Comentários

A equipe YUI YUI lançado 2.8.2 hoje. Esta versão corrige um defeito relacionado à segurança que foi introduzido no 2 Flash YUI início infra-estrutura componente com o lançamento 2.4.0 YUI. Este defeito permite façanhas injeção JavaScript para ser criado contra domínios que hospedam afetados YUI .swf arquivos. Visite o boletim de segurança para YUI 2.8.2 para obter detalhes completos sobre como identificar e substituir os arquivos afetados .

Se o seu site hospeda um YUI 2 Distribuição entre a versão 2.4.0 e 2.8.1, que inclui esses arquivos, é afetado por essa vulnerabilidade.

Se o seu site carrega YUI 2 de CDN do Yahoo ( yui.yahooapis.com ) ou a partir de CDN do Google ( ajax.googleapis.com ), e os arquivos não estão hospedados em seu próprio domínio, você não é afetado. YUI 3 não é afetado por este problema.

Você pode baixar YUI 2.8.2 (e versões corrigidas do YUI 2.4.0-2.8.1) a partir da página de downloads YUILibrary.com .

Veja o boletim de segurança para obter informações sobre como determinar se o seu site é afetada, como resolver o problema, e como verificar a correção.

Encontrar conversas: bloglines | technorati

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

No YUI 3 Gallery: Extensões para SVG, criado para SVG Wow!

18 de outubro de 2010 às 11:18 am por Vincent Hardy | Em Desenvolvimento e YUI 3 Galeria | 2 Comentários

Introdução

SVG ( Scalable Vector Graphics ) fornece uma sintaxe declarativa para interativos, imagens animadas em 2D: formas, imagens e texto. Suporte SVG é parte do HTML 5 e especificação SVG é implementada por todos os principais navegadores, incluindo Internet Explorer da Microsoft na versão 9 .

Os svg-wow.org web vitrines do site que pode ser feito com SVG hoje. As demonstrações deste site foram criados para o SVG Abrir conferência, onde o SVG Wow! sessões têm sido uma tradição de vários anos. O SVG Wow! As sessões eram iniciadas por Dean Jackson, em seguida, em colaboração com a mim mesmo e depois continuou por Erik Dahlstrom . Erik e eu collorated na sessão para os 2009 e 2010 edições da conferência.

Nos últimos dois anos, os demos têm usado cada vez mais estruturas Ajax, aplicando seus recursos para SVG em vez de (ou além) de HTML. YUI é o quadro mais amplamente utilizado no site, que usa tanto YUI 2 e 3 YUI .

Vou começar com uma rápida visão geral SVG e, em seguida, discutir o tipo de demos que YUI apoiada e as extensões que você adicionou ao 3 YUI Galeria de fazê-lo funcionar com SVG. (Estas extensões agora está livre para usar sob os termos da licença BSD YUI .)

SVG visão geral

Assim como o HTML, SVG é uma especificação W3C. Ele fornece uma sintaxe para descrever formas básicas (retângulos, círculos, linhas, polígonos, elipses, polilinhas), formas arbitrárias (descrita em termos de segmentos de caminho que podem ser linhas, quadrática ou cúbica curvas de Bezier), texto e imagens.

A imagem seguinte é uma captura de tela do exemplo de estilo alternativo em svg-wow.org e mostra algumas características SVG em jogo: renderização ricos (efeitos de sombra, gradientes, padrões) e formas simples e complexas.

Como as imagens SVG são definidos em termos de atributos de geometria e processamento, é possível a torná-los em qualquer resolução. Como resultado, as imagens SVG pode ser redimensionada em qualquer tamanho, mantendo uma qualidade de renderização de alta, por exemplo, quando a impressão (sem arestas mais pontiagudas).

A seguir, zoom-in vista mostra a mesma imagem SVG mostrado anteriormente prestados, mas em uma resolução maior, preservando a qualidade.

Assim como HTML, SVG suporta interatividade: é possível adicionar ouvintes de eventos em objetos gráficos para interações de mouse ou teclado. Claro, SVG suporta o Document Object Model, o que torna fácil para manipular as propriedades diferentes de objetos gráficos, tais como a geometria ou estilo de renderização.

Há muito para a especificação SVG: estilos de renderização avançada (acariciando, enchimento, padrões, gradientes), efeitos de filtro (borrões, sombras, matrizes de cor), estilo CSS, funcionalidades avançadas de texto (como texto em um caminho) e animação declarativa . Você pode conferir as referências no final deste post para saber mais sobre as características do formato SVG.

SVG e HTML

Com HTML5 , SVG pode ser embutido em documentos HTML, sem mais delongas. Browsers estão começando a suportar esse recurso (por exemplo, o Firefox 4 ). Por enquanto, todos os principais navegadores suportam SVG embutido em XHTML, que fornece a mesma funcionalidade. SVG em XHTML apenas exige que os namespaces são devidamente declarado.

 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         ....
     </ Head>
     <body>
         <h1> inline SVG </ h1>

         <Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1"
          xmlns: xlink = "http://www.w3.org/1999/xlink"
          width = "100%" height = "100%" id = "backgroundSVG">
             <- Conteúdo svg aqui ->
         </ Svg>
     </ Body>
 </ Html>
        

Todas as amostras de código desta página usar esta forma de inlining SVG em XHTML.

SVG e YUI

SVG suporta animação declarativa. Por exemplo, você pode animar o raio de um <circle> elemento como este:

 <circle cx="50" cy="100" r="40">
     <animate attributeName="r" values="40,60,20,40" dur="1.5s" />
 <Círculo />
       

O <animate> tag é emprestado do SMIL especificação e, junto com os outros elementos de animação, ele fornece um mecanismo de animação muito poderoso para SVG.

Infelizmente, até recentemente, o suporte ao navegador para animação SVG era escasso. Ele tem melhorado ao longo dos últimos dois anos, mas a Microsoft já deixou claro que não vai apoiar animação SVG declarativa no IE 9.

Como resultado, a maioria das demos no site svg-wow.org usar animação com script ao invés de animações declarativas. Por um lado, isso é lamentável, porque animações declarativas são mais eficientes do que animações script. No lado positivo, animações script pode ser muito flexível, e eles trabalham em implementações muito bem.

A necessidade de uma solução boa animação roteiro é o que impulsionou o uso do YUI nas svg-wow demos. No entanto, os demos também utilizar outras funções YUI, em particular o carregador e Nó módulos.

Animando SVG com YUI

As demos de svg-wow usar YUI para criar batidas elásticas e formas de morphing ou texto rotativo e formas , por exemplo. Usando YUI com SVG necessário algumas extensões YUI, vou descrevê-los em apenas um momento.

texto rotativo e formas	formas de morphing
batidas de tambor elásticas

A seguir ilustra como YUI vem a calhar para simplesmente animar e manipular gráficos SVG.

Animando o SVG transform atributo

Todos os elementos gráficos SVG ter uma transform atributo. Esse atributo especifica um 2D transformação afim em elementos, que pode ser usado para dimensionar, inclinar, girar ou traduzir.

As extensões de svg-wow.org YUI para SVG permite animar a transform atributo assim:

 var anim = new Y.Animate ({
     nó: '# circleA',
     a partir de: {
         transformar: {tx: 0, ty: 0, sx: 2, sy: 2}
     },
     para: {
         transformar: {tx: 20, ty: 20, sx: 1, sy: 1}
     },
     transformTemplate: "traduzir (# tx, ty #) escala (# sx, sy #)",
     duração: 1
 });
        

Veja as animações de transformação testes.

Você vai notar que os valores de transformação são definidas em termos de "componentes" (como tx ou ty ), que são combinados para formar um valor usando o transformTemplate encontrado no objeto de configuração da animação.

O modelo é um mecanismo flexível para a construção de transformar os valores, enquanto componentes separados se torna mais fácil para calcular os valores animados. Este é um exemplo onde o modelo de animação YUI permitiu maior flexibilidade (e poder mais expressiva) do que animação SVG de SMIL elemento ( animateTransform ). A fim de criar a animação descrito acima, a declaração equivalente SMIL teria sido:

 <circle ...>
     <AnimateTransform attributeName = "transformar" type = "translate"
                       from = "0,0" para = "20,20" dur = "1s" begin = "scaleAnim.begin" />
     <AnimateTransform id = "scaleAnim" attributeName = "transformar" type = "escala"
                       from = "2,2" para = "1,1" dur = "1s" begin = "indefinido" />
 <Círculo />
        

Note-se como o fragmento acima requer múltiplos animateTransform elementos que têm de ser sincronizado: a begin atributo da primeira animação é definido como scaleAnim.begin para sincronizar o início das duas animações. Um recurso interessante do mecanismo de animação YUI é que o timing de uma animação (ou seja, Início, fim e duração) pode ser compartilhada para aplicar as propriedades de elementos múltiplos.

A extensão do YUI para animar transformações SVG é usado extensivamente, como no câmera e letras animadas exemplos. O primeiro utiliza uma extensão do YUI 3, enquanto o último usa uma extensão do YUI 2.

Animando geometria

Geometria básica

Animando geometria SVG com YUI é bastante simples. Os seguintes exemplo anima um <rect> raios elemento largura, altura e canto:

 var anim = new Y.Animate ({
     nó: '# recta',
     a partir de: {
         width: 200,
         height: 100,
         rx: 5,
         ry: 5
     },
     para: {
         width: 300,
         height: 100,
         rx: 10,
         ry: 10;
     },
     duração: 2,
     easing: Y.Easing.elasticOut
 });
        

Veja as animações forma testes.

Como discutido mais tarde, algumas mudanças sob o capô YUI feito este trabalho. Mas do ponto de vista de um desenvolvedor, a animação funciona exatamente da mesma forma como a animação de qualquer outro atributo HTML ou CSS propriedade.

O <path> 's d atributo

Um atributo de geometria é um pouco especial: o d atributo no <path> elemento. O <path> elemento é usado para a geometria arbitrariamente complexo. A <path> pode descrever qualquer forma. Seu d atributo descreve a sua geometria em termos de segmentos de caminho que podem ser linhas, arcos, quadrática ou cúbica curvas de Bezier (há mais uns poucos comandos, mas o mapa todo em curvas Bezier).

Animando a d atributo também necessitam de um pouco de extensão para motor YUI de animação, mas com essa extensão, o d atributo pode ser animado como qualquer outra, como mostrado abaixo.

 var anim = new Y.Animate ({
     nó: "# patha",
     de: {d: "M 0 0 C 50 0 100 50 100 100 C 50 100 0 50 0 0 Z"},
     para: {d: "M 0 0 C 100 0 100 0 100 100 C 0 100 0 100 0 0 Z"},
     duração 1s,
     easing: Y.Easing.bounceBack
 });
        

Veja as animações caminhos testes, que mostra, entre outras coisas, uma marca de seleção se transformando em uma cruz ao longo do tempo, como representado nas imagens a seguir.

O Gandhi aspas demo utiliza esta técnica de animação da d atributo para se transformar em formas figura de Gandhi.

Animando outros atributos SVG

Naturalmente, a animações YUI não estão limitados aos atributos de geometria. Qualquer atributo SVG pode ser animado. Por exemplo, os seguintes anima animação o raio borrão em um filtro de mancha horizontal.

 / Snippet / SVG
 <Filtro ..
     <FeGaussianBlur id = "BlurFilter" stdDeviation = "10 10" ...  />
 </ Filter>

 / / JavaScript animação
 var anim = new Y.Animate ({
     nó: '# BlurFilter',
     de: {stdDeviation: [0, 20]},
     para: {stdDeviation: [0, 0]}
 });
        

Ver os filtros de animações testes. A imagem seguinte mostra como animar um Gaussian Blur pode ser usado para fazer a transição entre estados de botão.

Este tipo de efeito é utilizado na rápida borrão efeito de demonstração, mesmo que essa demonstração não usa animação, mas YUI declarativas elementos de animação SMIL (à custa de apenas executando em navegadores que suportam esse recurso, como explicado anteriormente).

Animando propriedades CSS

Assim como o HTML, os elementos SVG ter atributos e também propriedades CSS. SVG tem algumas propriedades CSS específicas . Estas propriedades podem ser animado, às vezes para criar efeitos surpreendentes. Por exemplo, o stroke-dashoffset propriedade pode ser usada para simular desenho uma forma.

 / Snippet / SVG
 <rect id="rectA" width="100" height="50" stroke-dasharray="300 300" stroke-dashoffset="300" />

 / / JavaScript
 var anim = new Y.Animate ({
     nó: "# recta",
     para: {"stroke-dashoffset ': 0},
     duração: 0,25
 });
        

Veja os tempos animações testes.

O graffitis demo utiliza esta técnica (ainda que sem YUI animação), assim como o câmera demo (desta vez com YUI animação).

YUI e SVG: Sob o capô

O site svg-wow.org usa tanto YUI YUI 2 e 3 e tem SVG extensões específicas para ambos. A seção seguinte deste artigo centra-se nos 3 YUI extensões.

Extensões foram necessárias para:

• tornar o trabalho YUI com especificidades SVG do DOM
• conta as diferenças de implementação
• adicionar suporte para novos tipos de atributos, tais como SVG transforma
• adicionar intervalo de animação adicional e recursos de sincronização

Contabilização de Especificidades SVG DOM

Conforme descrito anteriormente, os atributos SVG pode ser animado com elementos declarativas como <animate> . Para suportar o modelo de animação SVG, os valores dos atributos SVG segurar tanto uma animação e um valor base. Por exemplo, o r atributo em um <circle> elemento é um SVGAnimatedLength definida como se segue:

 SVGAnimatedLength interface de {
   readonly atribuir SVGLength baseVal;
   readonly atribuir animVal SVGLength;
 };

Como resultado, mesmo em implementações que não suportam animação declarativa, precisamos chegar até o baseVal para ler o valor de um atributo:

 var círculo = document.getElementById ('# myCircle');
 var rvalue = circle.getAttribute ('r') baseVal.value.;

Extensões foram necessárias para permitir que o motor de animação para explicar a atributos SVG "modelo de valor incomum. Felizmente, YUI 3 tem um conceito de comportamentos de animação. Comportamentos são essencialmente atributo específicos ganchos, e foi bastante fácil de adicionar suporte para lidar com os valores dos atributos SVG. Por exemplo, SVGAnimatedLength atributos são tratadas da seguinte forma:

 var lengthBehavior = {
     set: function (anim, att, de, para, decorrido, a duração do divertimento,) {
         / / Manipulação de SVG específico
     },

     get: function (anim, attr) {
         / / Manipulação de SVG específico
     }
 };

 / / Identificador do atributo <circle> 'sr
 Y.Animate.behaviors.r = lengthBehavior;

Há mais extensões para outros valores SVG atributos tais como a transform de atributos, os valores dos atributos de cor (como fill , stroke ou stop-color ) e atributos, tais como stdDeviation mencionados anteriormente.

Alguns ajustes semelhantes foram necessários, por exemplo, no Y.Node.prototype.toString método, mais uma vez para dar conta do SVG baseVal (este tempo sobre o className propriedade nó). Outro exemplo é o setter nó padrão no Node módulo.

Contabilização de diferenças de navegador

Embora as extensões anteriores são necessárias por causa das diferenças de especificação entre HTML e SVG, é necessário o seguinte por causa das variações de implementação entre os navegadores.

SVG tem uma categoria especial de atributos chamados atributos de apresentação . Em implementações também suportam CSS styling (que suportam todos os navegadores), esses atributos de apresentação são realmente apenas uma outra maneira de especificar uma propriedade CSS com uma baixa especificidade . A partir da especificação SVG:

Os atributos de apresentação, assim, irão participar na cascata CSS2 como se eles fossem substituídos por correspondentes regras de estilo CSS colocados no início da folha de estilo autor com uma especificidade de zero. Em geral, isto significa que a apresentação atributos têm prioridade mais baixa que outras regras de estilo CSS especificados em folhas de estilo do autor ou atributos 'estilo'.

Infelizmente, alguns navegadores não implementam a especificação correta e window.getComputedStyle nem sempre conta para todas as possíveis fontes para definir as propriedades CSS: SVG seletores CSS, atributo de estilo e atributos de apresentação.

YUI veio aos agradecimentos de resgate para o Node módulo que pode ser estendido para esconder essas diferenças de navegador. Os Y.DOM.CUSTOM_STYLES ea Y.Node.prototype.getComputedStyle poderia ser estendido para oferecer uma maneira uniforme para ler as propriedades de estilo SVG.

Estendendo Y.DOM

YUI envolve todo o acesso DOM através do Node de interface. Como resultado, alguns SVG métodos específicos DOM, como getBBox (usado para calcular os limites de um elemento SVG), não são acessíveis sobre o objecto moldado.

Para facilitar as coisas para o programa para SVG, extensões para o módulo Y.DOM padrão (que Node utiliza) foram adicionados a qualquer expor recursos SVG DOM ou adicionar métodos de conveniência, geralmente necessários quando da manipulação de conteúdo:

• firstElement/lastElement/prevElement/nextElement/removeAllChildren (não SVG específico)
• getMatrix/setMatrix . Fornece uma maneira fácil de manipular transforma em elementos SVG, algo notoriamente difícil com o padrão SVG DOM
• getBBox/getViewportBBox fornecer maneiras simples de acessar a caixa delimitadora no sistema de coordenadas do elemento ou no espaço viewport.
• loadContent . A utility to insert a DOM fragment described using a JavaScript object literal. Por exemplo:

  myNode.loadContent({
      tag: 'g',
      fill: 'red',
      stroke: 'none',
      children: [{
          tag: "rect",
          x: 10,
          y: 10,
          width: 200,
          height: 300
      }, {
          tag: 'circle',
          r: 10,
          cx: 105,
          cy: 155
      }, {
          tag: 'image',
          'xlink:href': 'images/photo.png',
          width: 200,
          height: '300px'
      }, prevSibling);
          

  is a shorthand for making various DOM calls (such as createElementNS , setAttributeNS and appendChild ) to create a g element and its children and inserting it before prevSibling under myNode . The utility deals with namespaces for attributes and elements.

Additions to the Animation engine for timing and synchronization

Many, if not most effects involving animation require multiple choreographed animation instances. Typically, several animations are required to create a desired effect, and the start or end of animations depend on each other, sometimes with a time offset: animations need to be synchronized.

For example, if you have a set of shapes which need to fade in one after the other, you will need to create a fade animation for each element and then chain their start time with a slight offset.

var chained = Y.all('#chained circle'),
    firstAnim, previousAnim;

chained.each(function (circle) {
    var anim = new Y.Animate({
        node: circle,
        from: {'fill': 'white'},
        to: {'fill': 'gray'},
        duration: 0.25
    });
    if (previousAnim !== undefined) {
        // Synchrnoize the start of anim to be 0.15 seconds after the begining
        // of the previous circle's animation (previousAnim).
        previousAnim.onBegin(anim, 0.15);
     Else {}
        firstAnim = anim;
     }
    previousAnim = anim;
});

// Start the first animation 1s after a click on any of the circles.
// Note that this is an extension to the default YUI run method which does not
// take a time offset.
chained.on('click', function () {
    firstAnim.run(1);
});

See the time offsets tests.

The method onBegin makes it easy to synchronize the start of two animations, with an optional time offset. Actually, onBegin can also invoke a function with a time offset. Likewise, the onEnd extension makes it easy to synchronize with the end of an animation.

By default, YUI animations have events which provide a way to synchronize. The onBegin and onEnd methods express the synchronization more concisely (a similar example of conciseness is shown below).

In addition, it is sometime necessary to synchronize an animation with an event, again with a time offset. The beginOn and endOn extensions allow us to express that. Por exemplo:

anim.beginOn(Y.one('#button'), 'click', 0.5);

will start the animation 0.5s after the element with id 'button' was clicked. This is a short-hand for:

Y.one('#button').on('click', function () {
    setTimeout(500 /* ms */, function () {anim.run();});
});

A final extension made to the animation class was the ability to make an animation object apply its first frame's state before it was actually started. This is often needed when creating animation effects involving multiple animations which start at different time offsets.

var anim = new Y.Animate({
    node: Y.one('#button'),
    from: {r: 30, 'fill-opacity': 0, color: 'crimson'},
    to: {r: 80, 'fill-opacity': 1, color: 'gold'},
    duration: 0.25
});

// the following will set the desired state on the target object prior to
// actually starting the animation.
anim.applyStartFrame();
anim.run(2);

The picture shuffle demo uses animation offsets for the effect that spreads the stack of pictures or puts the pictures back in a stack.

Conclusion

Working with SVG and YUI, and in particular YUI 3, has been a very enjoyable experience: a lot of the YUI functionality applies to SVG right out of the box and YUI's extensible architecture made it possible to work around occasional issues and to add desired functionality.

Of course, increased standard support for SVG in YUI would be helpful, in particular making YUI work with stand alone SVG documents and making the Node class wrap SVG elements without workarounds.

There are also a few enhancements that would be helpful. For example, it would help if animations could target multiple elements. Likewise, supporting multiple values (as in the <animate> SVG element for example) would be helpful to create more sophisticated effects.

The demos on svg-wow.org were written for YUI 3.1 and ported to 3.2 for the purpose of this blog. In 3.2, transitions were introduced which make use of native CSS transitions if available in the browser. It might be possible for the YUI animation engine to similarly leverage SMIL animation where available (Opera, Firefox and WebKit at the time of this writing) which should also yield performance improvements.

The SVG extensions on the svg-wow.org web site are available as a YUI 3 Gallery module for those who want to enjoy the fun of working with YUI and SVG.

Referências

• SVG Wow!
• SVG Specification
• SVG Tutorial
• Adobe's SVG Zone (a little dated, but still has good examples)
• carto.net examples
• KevLinDev

Encontrar conversas: bloglines | technorati

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

In the Wild for October 15, 2010

October 15, 2010 at 10:03 am by Eric Miraglia | In In the Wild | 2 Comments

YUIConf 2010 is right around the corner , and we continue to have our heads down working on that event and the upcoming YUI 3.3.0 release. In the meantime, here's what we've noted in the community in the past few weeks. Let us know @yuilibrary (or in the comments below) what we missed!

• Andrew Wooldridge, “Learning YUI: Pt. 2 – Community, Logging, and the Console” : Andrew Wooldridge (@triptych) is back with part 2 of his new “Learning YUI” blog series. I particularly like (and agree with) his take on the YUI community: “In a word, community is really what makes YUI stand out to me as a javascript library. If you need help working with YUI, there are community forums , an IRC channel , as well as Open Hours that allow you to talk directly with YUI developers. I would recommend that you get connected early on in your learning experience, especially with the IRC channel because you will discover a helpful group of smart folks hang out there and are willing to answer any question, no matter how seemingly mundane. You also should follow yuilibrary on twitter as you will be tapped into the latest YUI news there.” Check out the full blog post for more . I covered part one in a previous “In the Wild” column . #
  
• Andrew Burgess's “Crash Course” on YUI 2 Grids on NetTuts : Andrew Burgess's “Crash Course” on YUI 2 Grids, which we first noted in May last year , has been picked up by NetTuts and is bringing a new wave of attention to what has historically been one of YUI's most popular projects. #
  
• Create a BlogRoll with Google Spreadsheets and YUI3 : Andrew Wooldridge (@triptych) continues his series of YUI 3-focused articles with a new entry that ties together YUI 3 and Google Docs. “I admit it: I was inspired by this article by Codeinfront.com. The idea of creating a snippet of code that anyone can share, update, and learn from is just extremely compelling and gratifying. So, I offer to you something that you may have never thought of. You can use Google Spreadsheets as a JSON data source. YUI3′s JSONP module talks very nicely to this JSON data source and allows you to essentially create sites that can be data driven and yet never require you to have a complicated PHP MyAdmin setup or MYSQL database. You can do it all via client-side technologies and some help from Google Spreadsheets. If you combine this with the Forms ability in G Spreadsheets, you could even create a cool report page based on some survey you create. Let's get down to code.” Get down to code with the full blog post here #
  
• Video Remixing Site Dragontape Using YUI 3 : Video remixing site Dragontape is making extensive use of YUI 3. Here's how the site's authors describe the project: “Dragontape is a webapp that enables you to create mixtapes of your favorite online videos, so you can watch them as a continuous show. The tapes you create are accessed through a single URL, so you can easily share with friends or embed them in a webpage. The source clips remain in their original locations, Dragontape simply remembers where to find them.” #
  
• Erik Eldridge, “Simple YUI 3 Module for Yahoo! Login” : YDN evangelist Erik Eldrige has written up a nice tutorial on his personal blog that shows you how to leverage YUI 3 and Yahoo!'s OpenID system simply and efficiently. Writes Erik: “Looking at the OpenID landing page on the YDN site might give the impression that logging users into a site with a Yahoo! ID is difficult. Given the following conditions, however, adding Yahoo! login to your site can be quite simple:
  1. Because we're only targeting Yahoo! accounts, we can preset the login location to https://open.login.yahooapis.com/openid/op/auth
  2. If we log users in via a popup, but manage everything via JavaScript on the parent page, we can skip validation of the response coming back from Yahoo!”
  You can find the full tutorial here . #
  
• Upstage, a New YUI 3-powered HTML5 Presentation System by Reid Burke : @Reid is just getting this project underway, but there's a lot to like already. Following in the footsteps of a series of standards-based presentation tools that have launched in the last few years, Upstage puts a YUI 3 twist on the genre. Code is on GitHub — download, fork, and have fun. ( Original source. ) #
  
• A Simple Twitter Widget with YUI 3 and YQL (by @codeinfront) : @codeinfront has posted a new tutorial on using YUI 3 and YQL in a Twitter mashup. “While in between projects I've been playing around with JavaScript dates including conversion to relative time. This then lead me to testing the function within a Twitter widget context. I ended up with a Twitter widget using YUI 3 and YQL. The code below explores a couple of interesting concepts…” Check out the blog post for full details . #
  
• “YUI, How Dare You Make Me Rethink…” : Michigan Techie writes that YUI 3 is designed to break bad habits and challenges him to find new, hopefully better coding patterns. “When you use YUI3 you have a YUI().use() and everything gets encapsulated within that bit of code. So if I were to just move the MyApp code into the YUI block I'm no longer able to access it from the page of content I want to run JS on. So this is good, no JS globals, but it's bad…not the way I've been doing things.” You can see MT's full epiphany here . #
  
• Jeez.eu on Building a Custom Search Engine with YUI : Jeez.eu's tutorial on building a custom search engine relies heavily on YUI 2 widgets and utilities. #
  
• Node.js Resource List from @codeinfront Includes Crockford, Dav Glass : Blogger Mark Rall (@codeinfront) has compiled a set of his favorite Node.js-related resources. Key among them are two recent YUI Theater talks from Douglas Crockford and Dav Glass. For his other favorites, head over to his blog . #
• ErisDS Has Updated Her Carousel Custom-navigation Example for 2.8.x : Northampton blogger ErisDS has updated her work on custom navigation for YUI 2 Carousel to support YUI 2.8.x. “Last year I published two parts of a three part tutorial (doh) on the YUI2 Carousel Widget which worked with YUI Carousel 2.7.0. Since that time, a new couple of new versions of the YUI2: Carousel widget have been released (2.8.0 and 2.8.1), and it seems my examples do not work with the updated code. This post covers the issues, the reasons why they occur and how to resolve them.” Check out the full post here . #
  
• Tweet of the Week : From @bartt : “Being able to use #YUI on both client & server is so nice. JavaScript + my favorite library on both sides of the fence == !context switch.” #
  

Encontrar conversas: bloglines | technorati

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

YUIConf 2010: Early-bird inscrição termina esta semana

7 de outubro de 2010 em 9:03 am por Jenny Donnelly | Em Desenvolvimento e Eventos YUI | 2 Comentários

Uma linha impressionante é no lugar para YUIConf 2010 , que será realizado no Yahoo! 's Sunnyvale, CA campus em novembro deste ano 8-10. Douglas Crockford estará de volta com um novo discurso intitulado "Future Project", e Dion Almaer e Ben Galbraith será moderador de um painel sobre o futuro da disciplina. Temos uma linha estelar de palestrantes, incluindo Christian Heilmann, Vidro Dav, e Zakas Nicholas, tendo o pódio este ano sobre temas que abrangem YQL, NodeJS, e YUI:

• Uma Introdução à YQL
• YQL + YUI: Construindo End-to-End Applications
• Construir YQL tabelas de dados abertos com YQL Executar
• Using (Not Abusing) YQL for Caching, Filtering and Collating Data
• NodeJS + YUI 3
• Usando NodeJS e YUI 3 para o servidor ou processamento do navegador Vista Lateral
• Avoiding Spaghetti Code with Server-Side JavaScript
• Compreender melhora progressiva com YUI: Escreva menos, conseguir mais
• Aplicações Internacionalização Usando YUI 3
• Editor: The Next Generation
• AutoComplete: Deep Space Nine
• A viagem desde a idéia até Widget Funcionamento em YUI 3
• Finger Tips: lições aprendidas na construção de uma experiência baseada em toque
• e muito, muito mais!

Certifique-se de se inscrever nesta semana para receber a taxa de início de ave de US $ 35. Depois de 08 de outubro, os ingressos custam R $ 50.

Para pessoas que viajam de fora da área da baía, fizemos taxas Yahoo! disponíveis em alguns hotéis próximos casal. Confira http://yuilibrary.com/yuiconf2010/ para mais detalhes.

CC foto de Dion Almaer por seanosh no Flickr.

Update: The early-bird price was incorrect. Tickets cost $35 through October 8.

Encontrar conversas: bloglines | technorati

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