A Adobe mostra prévia da sua IDE de animações com HTML5

Postado por Dionysios G. Synodinos , traduzido por Rafael Marques em 29 Out 2010

Seções

Desenvolvimento

Tópicos

jQuery ,

JavaScript ,

Ruby ,

CSS ,

Java ,

Linguagens Dinâmicas ,

Adobe ,

.NET ,

Linguagens ,

Programação ,

Arquitetura ,

RIA

Compartilhar |

A Adobe durante a sua conferência anual para desenvolvedores, ofereceu uma prévia da sua IDE de animações com HTML5. A IDE cujo codenome é Edge, utiliza a engine de renderização do WebKit para mostrar as animações e, assim como o Dreamweaver, oferece um modo de edição de código fonte. 

A interface de usuário do Edge segue os mesmos princípios das outras ferramentas da Adobe, logo será familiar para os desenvolvedores Flash. Ele oferece uma janela que mostra o layout da página, e uma janela inferior que mostra as modificações ao longo do tempo. Ao lado da janela de layout da página, há um painel de camadas para os elementos DOM. Selecionando uma camada será apresentado as propriedades dela no property explorer,  além disso ele suporta transformações CSS para 2D e 3D. Há também outras semelhanças ao Flash, como a utilização de Actions, Symbols, etc.

Por baixo dos panos, o Edge utiliza JQuery e CSS para gerênciar as transições:

// Action executada em um evento específico , e.g. clique de um botão
$.Edge.symbol.get(‘#pageHolder’).showContent(‘coffe’);

Para o exemplo apresentado, o Edge aparenta também utilizar o jQuery UI e o jQuery Easing plugin.

Para maiores informações, há um vídeo na AdobeTV com o Mark Anderson demonstrando o protótipo da IDE.

Ainda é incerto como a Adobe planeja levar este protótipo, e se em breve ele oferecerá suporta a utilização de mais tags do HTML5, como <canvas> e <video>.