Re: [Inkscape Brasil] Animação em SVG

Quinta Março 13 14:44:04 BRT 2008

2008/3/12 Menphystofeles <menphystofeles em yahoo.com.br>:
>
> Não me lembro exatamente quem era, mas lembro que alguém aqui
> da lista fez algumas animações bem simples em SVG.

Eu faço SVG animado no navegador. (acho que é o que vc quer)
Outros colegas fazem animações baseadas em SVG, ou seja
GIFs, AVIs, etc... mas isso não é mais SVG.

> Lembro de uns exemplos simples de animação em SVG que vi na
> net também, mas queria fazer algo um pouco mais sofisticado para
> interface de websites (precisamente para um menu ou algo assim).

Para tudo!!!

Pó... é por isso que falo mal de Webdesigner Flash e as pessoas
não me entendem... Daqui a pouco vamos ter os mesmos erros
feitos com SVG.

Menu se faz em HTML. Conteúdo fica no HTML. Animação pode
ser em Flash ou inovando com SVG.

Se vc faz um menu em Flash vc já começa perdendo a indexabilidade
do seu site. Considerando que a grande maioria dos visitantes da
grande maioria dos sites chega via buscador, diminuir a indexabilidade
do seu site é um tiro no pé. Flash tb não é acessivel a deficientes
visuáis, mesmo com os recursos de acessibilidade vomitados pelos
defensores do Flash, que nem eles sabem usar e os que sabem
não usam. E lembre-se de que nem todo mundo tem flash instalado
e a Adobe parece não saber que a internet é um aglomerado de pontos
distintos entre si (por isso padrões são bons - permite que conversemos).
Para ser bem claro: Meu PowerPC (com linux claro, onde o Windows
não roda e eu nem gostaria) não tem plugin Flash da Adobe, tem um
plugin livre que ainda não implementa tudo... Ou seja, posso ver YouTube,
mas não qq site que exija Flash. Usuários Linux em máquinas 64 tb
foram vistos com descaso pela Adobe por muito tempo.

Menu pode ser feito lindamente com HTML + CSS.
Se quiser ser mais rebuscado, HTML + CSS e Javascript para animar.
Javascript para animar não tira a acessibilidade do menu e a
indexabilidade do site. Mas vc não pode sair pegando qq gerador de
menu DHTML por aí, pq a maioria gera todo o menu pelo javascript
e isso tb tira acessibilidade e indexabilidade.
 ( Falo pq além de fã do Ink, tb sou desenvolvedor web )

* * * E com SVG, o problema é o mesmo? * * *

Sim e Não.

SVG faz linkagem como o HTML, num arquivo legível, mas nem
todos "entendem" o SVG. O Google já demonstrou saber o que
é um SVG, mas não sei se já sabe indexar a partir de referências
de SVG.

Sobre a acessibilidade: Teoricamente um leitor de páginas no
Firefox poderia ler o conteúdo textual de um SVG, mas eu não
apostaria nisso. Pelo menos a implementação já feita para
HTML pode ser bastante reutilizada no SVG.

Entretanto, estamos falando de SVG no Firefox. No MSIE (argh!)
SVGs só podem ser apresentados com Plugin da Adobe.
Que já foi descontinuado pela mesma.  :-)
Acessibilidade quase zero nesse caso. (alguém ainda deve usar isso)

> Alguém sabe se dá pra fazer algo no nível do flash em SVG? Desculpem
> se a pergunta for tosca porque de fato sou amador nisso...
> Abraços.

Pra falar bem a verdade, ainda não dá mas mas dependendo do que
vc quer, SVG rola muito bem.

PQ não dá? Principalmente pq o suporte a SVG ainda não está
suficientemente maduro. Por isso é comum as coisas não ficarem
iguais no Ink e nos navegadores. Além do mais no Firefox hoje
só dá pra animar com javascript, pq a tag <animate> ainda não
foi implementada.

Mas vc quer animar? Eu fiz algumas coisas para ajudar:

Editando SVG com JavaScript
http://www.colivre.coop.br/Aurium/EditandoSVGComJavaScript
Nesta página você poderá ver alguns códigos javascript
e a animação promovida por eles. Tb poderá modifica-los
e ver no que dá pra aprender por comparação.

Moon-Lander
http://www.colivre.coop.br/Aurium/MoonLanderSVG
Eu quis fazer um jogo bonito, mas os detalhes exigem demais
(ainda mais com a implementação ainda em andamento).
Bem, mas se vc tiver um bom processador poderá ver
algo legal. Espero que no Firefox 3 funcione melhor.

RIA (Rich Internet Application) XHTML + SVG
http://www.colivre.coop.br/Aurium/SvgAndXhtml
Esqueça Flash! É por isso aqui que o SVG é o futuro.
Formatos XML podem ser mesclados, desta forma elementos
SVG podem fazer parte do HTML e vice versa, com interação
simples e direta. ;-)

Relógio Mecânico em SVG
http://www.colivre.coop.br/Aurium/ClockSVG
Tá aí o que vc queria. Uma animação mais complexa que uma
simples bolinha andando e funciona legal pro que se propõe.

SVG por Partes
http://www.colivre.coop.br/Aurium/SvgPorPartes?skin=print
Uso essa página em palestras sobre SVG para fazer a relação
entre tags e sua representação visual. Passe o mouse sobre
as tags rect, path, circle... e vc vai ve-los mais nítidos na imagem.

Boids SVG
http://www.colivre.coop.br/Aurium/BoidsSVG
Um pouco de computação Bio-inspirada. Cada bolinha é um
indivíduo independente, com vontades e dividindo espaço com
outros.

Boneco Corredor em BASH
http://www.colivre.coop.br/Aurium/BonecoCorredorBash
Tenho outros exemplos de como usar SVG fora da web para
melhorar a interação com o desktop, mas vou mandar apenas
esse aqui pq é artisticamente mais interessante. :-)

. . .

De outros e-mails:

L: "mas até onde eu sei essa liguagem foi contruida para substituir o flash..."
Opa... não é bem por aí...
O SVG será capaz de substituir sim, mas a intenção foi definir um
formato vetorial, animável, realmente livre que fosse eficiente na Web.
( se não cê chama a Adobe pra briga... :-p )

L: "vai na www.w3.com , la tem toda documentação do svg"
W: "Já dei uma olhada lá e fiquei meio sem coragem de estudar"

Rapaz... assim ninguém vai pra frente não...

W: "ainda mais porque ainda não vi nenhum exemplo que me
 convencesse a estudar"

Se eu visse uma bolinha andando pro lado, eu já saberia que
é possível fazer um boneco andar. Uma animação complexa
é a soma de pequenas animações simples.  ;-)

Mas você pode escolher. Se um dos primeiros a fazer animações
legais em SVG e virar referencial ou esperar que alguém o faça
e ser mais um.  ( frase terrorista, mas realista )  :-/

> Wellington

Hasta!
 Aurium

-- 
Aurélio A. Heckert http://colivre.coop.br/Aurium
GNU/Linux User #312507 http://counter.li.org
 - - - - - - - - - - - - - - - - - - - - - - - - -
Ilustração Vetorial Livre: http://InkscapeBrasil.org
Coop. de Tecnologias Livres: http://Colivre.coop.br
 - - - - - - - - - - - - - - - - - - - - - - - - -
 "Eu temo pela minha espécie quando penso
 que Deus é justo." Thomas Jefferson

 Antes de imprimir esta mensagem reflita
 sobre a sua responsabilidade com a
 preservação do Meio Ambiente.