Complemente a Tela com a Marcação HTML, Parte 2: Animação e renderização de texto

Supere obstáculos com camadas

A tela HTML se sobressai em vários aspectos, inclusive o grande desempenho que vem com a baixa sobrecarga e a manipulação direta dos pixels. Entretanto, a tela tem deficiências em algumas áreas em que o HTML vai muito bem: renderização de texto, SEO, acessibilidade e marcação independente do dispositivo. parte 1 desta série comparou e contrastou os pontos fortes do modelo HTML tradicional e da API de tela. Também tratou de aplicativos híbridos HTML/tela. Na conclusão da série, saiba como implementar um aplicativo de amostra que envolve a implementação em tela da renderização de texto e a criar um jogo com base em lona com uma interface com o usuário rica baseada em HTML que combina os pontos fortes das duas abordagens.

Ryan DeLuca, Software developer, The Nerdery

Ryan DeLuca photoRyan DeLuca começou a programar em 1998 e, depois de alguns anos, transformou o seu hobby em uma carreira profissional de freelancer. Decidiu formalizar o seu treinamento e se formou em 2011 pela Universidade de Wisconsin-Superior como bacharel. Pouco depois da formatura, Ryan passou a fazer parte da The Nerdery como engenheiro de software especializado em PHP, JavaScript, CSS e HTML. Seus muitos talentos também incluem bancos de dados relacionais/SQL e manipulação de gráficos.



Kevin Moot, Software Developer, The Nerdery

Kevin Moot photoKevin Moot interessa-se por computação gráfica desde quando criava jogos em sua infância, com o Apple IIe (que tinha a ampla variedade de seis cores e a espetacular resolução de 280x192). Trabalha com a tecnologia de tela de HTML5 para vários websites de ponta e é especializado em HTML/CSS, JavaScript, e .NET, entre outras coisas. Atualmente, Kevin atua como desenvolvedor de software interativo na The Nerdery.



17/Set/2012

Introdução

Abreviações usadas frequentemente

  • CSS: folhas de estilo em cascata
  • DOM: Modelo de Objeto de Documento
  • HTML: linguagem de marcação de Hipertexto
  • UI: Interface com o usuário

A parte 1 desta série de duas partes abordou a combinação dos melhores aspectos dos elementos de tela e de HTML para desenvolver aplicativos ricos para a Internet.

Neste artigo, revise os critérios para selecionar uma arquitetura centrada na tela e conheça questões de animação e superação das limitações da renderização de texto, estabelecendo a base de um jogo que utiliza camadas de elementos de HTML e lona para aproveitar as vantagens de cada abordagem. Figura 1 mostra o fundamento do jogo espacial de tiro usado como exemplo neste artigo.

Figura 1. Aplicativo de amostra que combina elementos de HTML e tela
Aplicativo de amostra que combina elementos de HTML e tela

É possível fazer o download do código fonte dos exemplos usados neste artigo.


Arquitetura

Ao arquitetar um aplicativo com componentes gráficos significativos, experiências interativas e visualizações, é importante conhecer todas as ferramentas disponíveis para o trabalho. Esta seção explora o uso do HTML para implementar componentes da UI e da lona para implementar componentes animados.

Interfaces com o usuário

Embora a tela tenha o potencial de um desempenho gráfico impressionante, nem sempre ela é a melhor opção para uma UI rica; os elementos HTML podem ser mais adequados. Muitos aplicativos ricos para a Internet são formados por várias partes com propósitos e requisitos diferentes. Uma abordagem híbrida que combina os melhores aspectos da tela e dos elementos HTML pode ser melhor para atingir os seus objetivos.

O aplicativo de amostra emprega a técnica de camadas na Figura 2. A superfície da tela será responsável pela maior parte dos gráficos e animações em tempo real, ao passo que vários elementos HTML serão sobrepostos em cima disso para formar vários componentes da UI.

Figura 2. Usando camadas de elementos HTML sobre uma tela
Usando camadas de elementos HTML sobre uma tela

Leve em conta os requisitos das partes individuais do aplicativo ao determinar a melhor abordagem. Como regra geral, os componentes da UI que requerem um alto nível de interatividade do usuário — mas não precisam de atualizações em tempo real — normalmente são adequados para a camada HTML. Esses elementos podem conter texto, hiperlinks e elementos de formulário.

Por exemplo, embora o aplicativo de amostra seja constituído predominantemente por uma tela, ele tem um componente de janela de bate-papo que usa somente marcação HTML. Isso está ilustrado na Figura 3,

Com tags de HTML simples e regras de CSS, é possível criar facilmente componentes de UI interativa como caixas de texto, barras de rolagem e botões. Por que passar horas de desenvolvimento tentando imitar o comportamento e a aparência dos componentes da UI na tela quando o navegador faz isso para você por padrão?

Figura 3. Janela de bate-papo implementada em HTML
Janela de bate-papo implementada em HTML

Na janela de bate-papo não há animações e as atualizações do conteúdo são relativamente pouco frequentes (sempre que um nono bate-papo entra). Portanto, essa janela é uma boa candidata para uma implementação de HTML.

Por outro lado, a tela fornece uma solução muito melhor para o conteúdo que:

  • Precisa de atualizações frequentes (por exemplo, a cada milissegundo)
  • Requer um ciclo de animação constante
  • Requer pouca interatividade com o usuário

Animação

O conteúdo animado está se tornando mais comum nos websites. Há várias opções à sua disposição, tanto para animações mais simples para dar mais vida ao website (como transições de navegação) quanto para um jogo mais avançado baseado no navegador. Com frequência, é possível fazer animações com relativa facilidade por meio do modelo HTML/CSS — o uso da tela seria um exagero.

Muitas bibliotecas, como o jQuery, oferecem ferramentas convenientes que fornecem uma saída consistente em vários tipos de navegador. Ao combinar as ferramentas dessas bibliotecas com um pouco de conhecimento de CSS, é possível reduzir bastante o esforço despendido para criar animações — inclusive as que são razoavelmente complexas.

No exemplo, o elemento de nave na Figura 4 se move e gira de acordo com o controle do jogador. É possível obter esse comportamento usando apenas animações HTML/CSS. Não é necessário ter conhecimento de tela.

Figura 4. Elemento de navio animado
Elemento de navio animado

O modelo HTML/CSS para a animação começa a desmoronar quando a escalabilidade entra em cena. Animar uma grande quantidade de elementos simultaneamente requer muito trabalho pesado por parte do navegador, prejudicando o desempenho geral do aplicativo.

Sempre que um elemento DOM é reposicionado — algo que deve acontecer várias vezes por segundo para que a animação fique boa — o mecanismo de layout do navegador requer uma sobrecarga significativa para recalcular e pintar novamente os elementos na hierarquia do DOM. Quando isso é escalado para dezenas, centenas ou milhares de elementos, é possível observar um grande impacto no desempenho, até mesmo em computadores modernos.


Texto na tela

A renderização de texto no monitor é uma tarefa tão básica para qualquer website que simplesmente supomos que o mecanismo está funcionando em segundo plano. Quando você quer colocar texto na tela, simplesmente o digita entre duas tags de elemento HTML, possivelmente acompanhadas por um pouco de CSS e deixa o navegador assumir o controle. Entretanto, isso não acontece quando se trata da tela.

Há algumas ferramentas básicas disponíveis para renderizar texto com a tela. Eles permitem realizar praticamente todas as funções básicas necessárias para fazer praticamente qualquer coisa, mas não são fáceis de usar para desenvolver um aplicativo de tela.

Os fundamentos

O objeto context da tela fornece várias propriedades que podem ser usadas para renderizar texto. Fornece também uma função para fazer a renderização em si. As propriedades são:

  • context.font

    A configuração do valor de context.font permite controlar a família da fonte e o tamanho, peso e estilo do texto a ser renderizado. O valor designado é uma única cadeia de caracteres com as várias opções juntas, separadas por espaços.

    O formato de entrada é um obstáculo nesse caso. Por exemplo, a família da fonte deve ser fornecida nessa cadeia de caracteres sempre que o valor é atualizado. Lista 1 mostra a configuração para uma fonte pequena.

    Lista 1. Configurando uma fonte pequena
    context.font = 'italic 8px Arial';
    context.fillText('Variety is the spice of life!', 0, 50);

    Lista 2 mostra a configuração para uma fonte grande.

    Lista 2. Configurando uma fonte grande
    context.font = 'italic 20px Arial';
    context.fillText('Variety is the spice of life!', 0, 50);

    O usuário não pode simplesmente configurar a família da fonte uma vez e ajustar outras opções posteriormente, dependendo do texto que deseja renderizar na tela. Mais tarde, mostrarei uma abordagem para resolver esse problema.

  • context.fillStyle

    context.fillStyle é usado para várias operações de tela; no caso do texto, você configura o valor para controlar a cor da fonte a ser renderizada na tela. O formato de entrada do valor especificado corresponde ao do CSS. Todas as amostras de entrada a seguir são válidas:

    • Cores básicas: 'red', 'blue', 'green', etc.
    • Valores hexadecimais: '#rrggbb'
    • 'rgb(r, g, b)'
    • 'rgba(r, g, b, a)'

    Por exemplo, para definir o fillStyle, use: context.fillStyle = 'red';.

  • context.fillText()

    Chame essa função para renderizar o texto na tela. Ela aceita os seguintes parâmetros:

    • (string) text: o texto a ser desenhado na tela.
    • (float) x: a dimensão x na qual o texto deve ser desenhado.
    • (float) y: a dimensão y na qual o texto deve ser desenhado.
    • [optional] (float) maxWidth: a largura máxima na qual se deve tentar manter o texto. Se possível, será utilizada uma fonte mais condensada na horizontal ou até mesmo uma fonte menor.

Ferramentas adicionais

Uma ferramenta adicional importante que pode ser usada é uma função do objeto de contexto chamado measureText(), que aceita um único parâmetro de sequência. O resultado é um objeto que contém as dimensões medidas da cadeia de caracteres fornecida, como mostra a Lista 3.

Lista 3. Determinando a largura de uma cadeia de caracteres de texto
context.font = '30px Arial';
var dim = context.measureText(
    'Hello, world!'
);
 
alert(
    'width: ' + dim.width + '\n' +
    'height: ' + dim.height
);

Lista 3 mostra um alerta com uma saída semelhante à da Lista 4.

Lista 4. Alerta
    width: 164
    height: undefined

Observe o undefined resultante, referente à altura. Estranhamente, todos os navegadores sempre retornam um resultado indefinido — portanto, é efetivamente impossível determinar a altura exata do texto usando a função measureText() . Há algumas técnicas disponíveis para determinar um valor razoavelmente representativo. Em muitas fontes, certas letras são muito quadradas, como a letra M. É possível medir a largura de um desses caracteres e usar o valor como uma medida aproximada da altura da fonte.

Outro método é simplesmente usar o tamanho fornecido da fonte como base para a altura de trabalho. Se um valor de 30px é fornecido no exemplo acima, é possível adicionar alguns pixels para preenchimento vertical e usar o valor resultante como a altura aproximada.

Blocos de criação

Para aumentar a eficiência do processo de desenvolvimento, é possível usar as ferramentas mencionadas anteriormente para realizar operações básicas de forma mais conveniente criando uma classe do wrapper mais simples. A classe automatizaria a configuração e a troca das várias propriedades de contexto e, em última análise, chamaria a renderização do texto desejado na tela. É possível automatizar a questão com a propriedade context.font . O exemplo na Lista 5 foi usado na parte 1 desta série.

Lista 5. Renderizando texto com um estilo dinâmico na tela
context.font = '18px Arial';
context.fillStyle = 'green';
context.fillText('Variety', 0, 50);
context.translate(60, 0);  //move 60 pixels to the right (a)

context.font = '12px Arial';
context.fillStyle = 'blue';
context.fillText('is the', 0, 50);
context.translate(35, 0); //move 35 pixels to the right (b)

context.font = 'italic bold 12px Arial';
context.fillStyle = 'red';
context.fillText('spice of life!', 0, 50); // (c)

Figura 5 mostra as três etapas da Lista 5 para renderizar texto na tela.

Figura 5. Renderizando texto com um estilo dinâmico na tela
Renderizando texto com um estilo dinâmico na tela

Usando a API da tela bruta, você tinha que escrever bastante código. Se você pudesse simplificar o código necessário para obter o exemplo acima, isso aumentaria a eficiência ao renderizar texto na tela. Por exemplo, em vez de muitas linhas de código bruto, seria possível usar o código na Lista 6.

Lista 6. Um conceito de fluxo de trabalho para aumentar a renderização de texto na tela
var myText = new CanvasText();
myText
    .family('Arial')
    .size('18px')
    .weight('bold')
    .color('green')
    .append('Variety')
    
    .size('12px')
    .weight('normal')
    .color('blue')
    .append('is the')
    
    .style('italic')
    .color('red')
    .append('spice of life!')
    
    .render();

Figura 6 ilustra o código da Lista 6. O exemplo usa encadeamento — uma sintaxe limpa e simples que normalmente é usada no jQuery e nos plug-ins de jQuery.

Figura 6. Aumentando a renderização de texto na tela
Aumentando a renderização de texto na tela

Dessa forma, o processo é simplificado. Embora a quantidade de linhas de código seja quase a mesma, a complexidade de cada linha é bem menor. Além disso, já não é necessário posicionar manualmente cada bloco de texto com estilos diferentes. Se posteriormente você decidir ajustar algumas das propriedades de qualquer um dos blocos de texto, já não será necessário reposicionar manualmente os blocos seguintes.

Lembre-se de que a propriedade canvas.font é uma combinação de várias propriedades que determinam como o texto será renderizado. Entre o Variety e os blocos subsequentes, você não teve que especificar a família da fonte. Entre os blocos 'is the' e 'spice of life!' , também não foi preciso especificar o tamanho e o peso da fonte. Foi aplicado aqui um mecanismo simples para lembrar as propriedades aplicadas anteriormente, eliminando a necessidade de reconfigurar as propriedades de texto desejadas que foram aplicadas antes. Consulte Recursos para ver um exemplo funcional da classe CanvasText .

Para obter os resultados acima, basta agrupar as propriedades de estilo do texto que você quer renderizar, especificando-as adequadamente e, em seguida, chamar a função append() do objeto CanvasText que fecha o grupo e o armazena para uso posterior. Quando você renderizar o texto, efetue um loop nesses grupos e aplique os estilos conforme a especificação. Conforme você faz a iteração nos grupos, mantenha um histórico funcional do estado anterior do estilo e substitua-o conforme a necessidade. Essas ações obtêm a memória do estilo e reduz a especificação necessária para renderizar texto na tela. Esse é apenas um dos benefícios do uso de uma classe do wrapper (ou conjunto de blocos de criação) para automatizar o processo de renderizar texto na tela.

Quebra automática de linha

Muitas pessoas partem do pressuposto de que a quebra automática de linha acontece. Quando um elemento HTML contém um conteúdo longo demais para caber em uma linha, a quebra simplesmente funciona. Não é necessário levar em conta o comprimento do texto, a largura do contêiner, etc. No entanto, na tela isso não é tão simples. Atualmente, os elementos HTML da tela não contêm funções integradas para gerenciar essas coisas — portanto, é preciso criar programaticamente as funções usando as ferramentas e métodos citados anteriormente.

Por exemplo, para fazer o texto quebrar quando ultrapassa a largura do contêiner, é preciso conhecer a largura do contêiner, a largura do texto que você quer renderizar e a altura de uma linha de texto. Também é necessário criar o contêiner virtual e fornecer métodos para especificar a largura desse contêiner. Depois de criar um processo para fazer isso, você está pronto para se aprofundar na lógica necessária para obter a quebra automática de linha na tela.

Lista 7 detalha a Lista 6 e fornece alguns argumentos para passar para o construtor da classe CanvasText .

Lista 7. Passando argumentos para o construtor da classe CanvasText
var myText = new CanvasText(
    {x: 50, y: 50},
    {width: 100, height: 200}
);
myText
    .family('Arial')
    .size('18px')
    .weight('bold')
    .color('green')
    .append('Variety')
    
    .size('12px')
    .weight('normal')
    .color('blue')
    .append('is the')
    
    .style('italic')
    .color('red')
    .append('spice of life!')
    
    .render();

Os argumentos adicionais representam as coordenadas x e y , as dimensões da posição do texto a ser renderizado e o tamanho do contêiner, respectivamente. Observe que foi especificada uma largura explícita para restringir o agrupamento do conteúdo.

Agora que você tem o tamanho do contêiner, é possível começar a criar as funções para obter o resultado desejado. Além de efetuar loop em cada estilo diferente, também é necessário efetuar loop em cada palavra para adquirir alguns dados sobre a largura real do texto depois da renderização. Com essas informações, é possível controlar a largura do texto já renderizado e decidir se a palavra seguinte será renderizada fora da faixa desejada. Felizmente, a função measureText() fornecerá exatamente as informações necessárias.

Lista 8 mostra o código necessário para implementar a quebra automática de linha com a classe CanvasText .

Lista 8. Incluindo funções de quebra automática de linha
// use measure text 
var currentWordWidth = context.measureText(currentWord).width

// word wrap code here
if (textAdjustment.x + currentWordWidth > this._size.x || textToDraw == '\n') {
    textAdjustment.x = 0;
    textAdjustment.y += parseInt(previousFontOptions.size, 10);
}

O resultado final é mostrado na Figura 7.

Figura 7. Resultado da quebra automática de linha
Resultado da quebra automática de linha

Consulte Recursos para ver um exemplo funcional da classe CanvasText com quebra automática de linha.

Com uma classe do wrapper simples, você automatizou as tarefas de estilização e quebra automática de linha na tela. Agora essa classe do wrapper pode ser reutilizada sempre que for necessário renderizar texto com a tela.


Juntando tudo

Tendemos a pressupor que as UIs são utilizáveis. O HTML, o Flash e o Silverlight oferecem um conjunto essencial de componentes de UI na forma de texto, menus, barras de rolagem e elementos de formulário.

O próximo exemplo é um design para a base de um jogo de tiro simples. Você criará: um componente de nave espacial que voa pela área de jogo, uma janela de bate-papo e uma loja. Alguns componentes requerem informações, e outros fornecem informações textuais que talvez precisem ser atualizadas ou renderizadas com frequência.

Consulte Recursos para ver o exemplo funcional completo do jogo espacial de tiro.

Abordagem do HTML

A primeira etapa é tentar criar cada componente do jogo usando marcação HTML básica. Com um pouco de conhecimento de CSS, os componentes da UI — como a loja e o sistema de bate-papo — podem ser criados de forma razoavelmente rápida.

Agora é a parte legal: a nave espacial. Para a implementação HTML, crie um elemento DIV simples, anexe uma imagem de plano de fundo para a nave e inclua elementos para exibir coisas como o nome e as vidas do jogador. O código desses componentes, até agora, baseia-se apenas no HTML e CSS do exemplo.

Lista 9 mostra parte do CSS necessário para a nave e o texto que aparece debaixo dela. É a posição do DIV com a classe do jogador que você atualizará posteriormente na função de renderização do DOM para obter a animação.

Lista 9. CSS para estilizar a nave, o nome e as vidas do jogador
.player {
    position: absolute;
    width: 100px;
    height: 100px;
}

.text-under-ship {
    position: absolute;
    top: 100px;
    left: 0;
    width: 100px;
}

.name {
    font-family: Georgia;
    font-size: 15px;
    font-weight: bold;
    color: red;
}

.health {
    font-family: Georgia;
    font-size: 10px;
    color: yellow;
}

Neste ponto, é possível começar a trabalhar com o código envolvido para manipular a lógica do jogo, como mostra a Lista 10. O código, em sua maioria, está centralizado no objeto Game do JavaScript. Esse objeto será responsável por manipular a entrada do usuário e chamar as funções de atualização e renderização dos componentes relacionados.

Lista 10. A função gameLoop usada para acionar o aplicativo
gameLoop: function() {

    // calculate time elapsed since last update
    var currentTime = new Date().getTime();
    var elapsed = currentTime - this._previousTime;

    // call updates
    Ship.update(elapsed);

    // call renders
    if (this._canvasRendering) {
        CanvasManager.render();
        Ship.renderCanvas();
    } else {
        Ship.renderDOM();
    }

    // store current time as the previous update time
    this._previousTime = currentTime;
}

As funções de atualização da classe Ship são uma parte importante do exemplo. Essas funções são responsáveis para gerenciar e atualizar a velocidade, direção e posição da nave que serão usadas pelo código de renderização.

Até agora, a maior parte do código que você criou é reutilizável, independentemente da abordagem de renderização. Lista 11 examina mais profundamente as diferenças entre as funções rendering do DOM e da tela.

Lista 11. Função rendering do HTML
renderDOM: function() {
    var player = jQuery('#player');

    player .css({
        left: this._position.x,
        top: this._position.y
    });

    var rotationTransform = 'rotate(' + (this._rotation / 100 * 360) + 'deg)';
    var ship = player.find('#ship')
        .css('transform', rotationTransform )
        .css('-webkit-transform', rotationTransform )
        .css('-moz-transform', rotationTransform )
        .css('-ms-transform', rotationTransform )
        .css('-o-transform', rotationTransform );
}

O código na Lista 11 é mínimo porque ele usa o jQuery para posicionar a nave e configurar a rotação. Para obter uma verdadeira compatibilidade entre os navegadores, é necessário configurar vários "sabores" da propriedade transform específicos para os fornecedores.

A implementação da abordagem do HTML acabou sendo relativamente simples, com pouca complexidade e pouco código. A desvantagem é que não há potencial para obter uma taxa de quadros aceitável devido à sobrecarga do navegador relativa à renderização dos elementos DOM.

Abordagem da tela

Antes de trabalhar com a tela, é necessária uma referência do objeto de tela com o qual irá trabalhar. Depois de obter isso, é necessário inicializar o contexto no qual deseja trabalhar. Esse é o contexto abordado anteriormente neste artigo e o meio de trabalhar com um elemento de tela.

Use um simples manager de tela, como mostra a Lista 12.

Lista 12. Classe manager da tela
var CanvasManager = {
    canvas: null,
    context: null,
    _size: null,

    init: function() {
        this.canvas = document.getElementById('canvas-game-area');
        this.context = this.canvas.getContext('2d');

        this._size = {
            x: this.canvas.width,
            y: this.canvas.height,
        }
    },

    render: function() {
        this.context.clearRect(0, 0, this._size.x, this._size.y);
    }
}

Na maioria dos aplicativos, sempre que você atualiza o que é renderizado na tela, primeiro é necessário limpar o que foi renderizado antes para obter uma área de exibição limpa. É possível fazer isso com a função clearRect() , como mostra a Lista 13.

Lista 13. Função de renderização da tela
renderCanvas: function() {
    var context = CanvasManager.context;
    
    // save the context to prepare for our 
    // upcoming translation and rotation
    context.save();

    // translate the canvas to the ship's center position
    context.translate(
        this._position.x + 50, 
        this._position.y + 50
    );

    // rotate the canvas to show the angle the ship is pointing
    context.rotate(this.getRotationInRadians());

    // draw the ship with an offset of half the height
    // and width to center the image
    context.drawImage(
        this._displayImage, 
        -50,
        -50
    );

    // restore the context
    context.restore();

    this._playerName.render();
}

O código na Lista 13 mostra algumas vantagens e desvantagens da abordagem da tela. O principal benefício é a melhoria do desempenho. O efeito é maior ainda quando há mais componentes para renderizar, como mostra a Figura 8.

Figura 8. O aumento do número de naves intensifica as diferenças no desempenho
O aumento do número de naves intensifica as diferenças no desempenho

Agora o exemplo está renderizando 50 naves formando camadas uma sobre a outra (consulte Recursos para ver o exemplo funcional). A versão em HTML é claramente lenta. Ao alternar para a versão de tela, o desempenho melhora drasticamente.

A quantidade de código das duas abordagens foi bem diferente. Com o HTML, você posicionou a nave com uma chamada de função usando o jQuery. Com a abordagem de tela, é necessário fazer mais coisas.

Na Lista 13 há também uma chamada adicional para desenhar o nome do jogador. Isso não foi necessário no método HTML porque você estava posicionando um elemento que continha a nave e o texto que a acompanhava. Na tela, por outro lado, você não conta com essa conveniência. Para renderizar o nome do jogador, o exemplo usou a classe CanvasText , que transferiu efetivamente do DOM para a tela todo o trabalho de renderização da nave e do texto que a acompanhava.


Conclusão

Nesta série de suas partes, você explorou os critérios para escolher uma arquitetura centrada na tela ou no HTML. Neste artigo, você aprendeu algumas questões sobre animação e viu como superar as limitações de renderização de texto. Os exemplos mostraram como unir os conceitos e forneceram insight sobre as diversas abordagens às arquiteturas híbridas de tela e HTML.


Download

DescriçãoNomeTamanho
Article source codecanvashtmlpt2sourcecode.zip20KB

Recursos

Aprender

Obter produtos e tecnologias

  • jQuery: obtenha a conhecida biblioteca do JavaScript que simplifica o processo de atravessar documentos HTML, a manipulação de eventos, a animação e as interações do Ajax para o desenvolvimento rápido para a web.
  • Kibo: outra biblioteca conhecida escrita especificamente para a manipulação rápida de eventos de teclado em vários navegadores.
  • Versões de avaliação de produto IBM: Faça o download ou explore as versões de teste online no IBM SOA Sandbox e tenha em suas mãos ferramentas de desenvolvimento de aplicativo e produtos de middleware do DB2, Lotus, Rational, Tivoli e WebSphere.

Discutir

Comentários

developerWorks: Conecte-se

Los campos obligatorios están marcados con un asterisco (*).


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que você entrar no developerWorks, um perfil é criado para você. Informações no seu perfil (seu nome, país / região, e nome da empresa) é apresentado ao público e vai acompanhar qualquer conteúdo que você postar, a menos que você opte por esconder o nome da empresa. Você pode atualizar sua conta IBM a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Los campos obligatorios están marcados con un asterisco (*).

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Software livre
ArticleID=834866
ArticleTitle=Complemente a Tela com a Marcação HTML, Parte 2: Animação e renderização de texto
publish-date=09172012