Animação na Web De elementos de design a um meio de transmissão de conteúdos.

Apresentação em tema: "Animação na Web De elementos de design a um meio de transmissão de conteúdos."— Transcrição da apresentação:

1 Animação na Web De elementos de design a um meio de transmissão de conteúdos

2 Índice  Introdução  Contextos de Utilização  Animação e Usabilidade  Tecnologias de Animação

3 Contextos de Utilização  Produção de conteúdos pedagógicos ou didácticos  Objectivos comercias ou de produção  Interfaces de navegação  Conteúdo artístico ou lúdico  Elemento de design

4 Produção de conteúdos pedagógicos e didácticos  Desenvolvimento de Jogos Interactivos  Ilustração de gráficos e apresentações com objectivos didácticos  Utilização de gráficos e modelos dinâmicos Nik: JOGOS... http://www.nik.pt/ http://www.nik.pt/ El País: GUERRA... http://www.elpais.es/multimedia.html http://www.elpais.es/multimedia.html

5 Objectivos comerciais de promoção  Publicidade e Promoção de produtos  Comércio electrónico  Promoção de Sites  Comunicação da Cultura da empresa Balthaser Studios Animação de Introdução do Site www.balthaser.com www.balthaser.com

6 Desenvolvimento de Interfaces e Navegação  A animação para ilustrar transição entre estados  Animação de menus e sistemas de navegação Home Shocking Network http://www.homeshocking.com/hsn.html http://www.homeshocking.com/hsn.html Indegenous Australia http://www.indig.com/flash/indig_main.html http://www.indig.com/flash/indig_main.html

7 Conteúdo artístico e lúdico  Animação como expressão artística  Divulgação de trabalhos desenvolvidos recorrendo a técnicas tradicionais Sumo Air Colin Powell, 2000 “Eight New York Digital Saloon” http://www.sva.edu/salon/animationFrames.html http://www.sva.edu/salon/animationFrames.html

8 Animação como elemento de design  Melhorar o design global da página  Chamar a atenção para zonas da página  Utilização de metáforas gráficas  Ilustrar conceitos simples

9 Animação e Usabilidade “a usabilidade de um interface é simplesmente uma medida de eficiência e satisfação com que os utilizadores podem alcançar determinados objectivos num determinado ambiente com esse interface.” Definição da ISO (International Standardisation Organization)

10 Animação na web e Usabilidade Assim, usabilidade pode(m) ser:  a organização da informação no site;  a utilização de diversos elementos (cor, imagens...);  os tipos de letra e dimensão do texto;  o aspecto global do site e adequação ao conteúdo.

11 1.Riscos da utilização da animação fora de contextos adequados. 2.Excesso de animação numa página que desvia a atenção do utilizador. 3.Problemas de tempo de carregamento das páginas. 4.Incompatibilidade dos browsers com alguns tipos de animação. Animação na web e Usabilidade

12 1. Riscos da utilização da animação fora de contextos adequados  Um site institucional tem um aspecto mais sóbrio tem uma finalidade definida;  Onde a informação a transmitir é mais textual pode não se justificar animação. Animação e Usabilidade

13 2. Excesso de animação numa página que desvia a atenção do utilizador  A animação pela animação faz sentido?  O excesso de imagens animadas distrai, confunde, cansa... Animação e Usabilidade

14 3. Problemas de tempo de carregamento das páginas  Normalmente as animações fazem aumentar o tempo de visualização das páginas;  O autor deve pensar se as animações são mesmo necessárias;  20 segundos depois...é o desânimo. Animação e Usabilidade

15 4. Incompatibilidade dos browsers com alguns tipos de animação  A necessidade de Plug-Ins para visualizar determinadas páginas;  Flash: 99% Bad [Nielsen 99] Animação e Usabilidade

16 4. Incompatibilidade dos browsers com alguns tipos de animação Flash: 99% Bad:  O Localizar deixa de funcionar;  As cores dos links não exibem o que já foi visto e o que falta ver;  Aumentar o tamanho das fontes é impossível. Animação e Usabilidade

17 Tecnologias  Animação GIF  Flash  Shockwave  Javascript

18 Animação GIF  Criação fácil e divertida  Capacidade de atracção  Explosão do movimento  Fácil integração  Reconhecida pela maioria dos browsers  Limitações

19 Flash  Formato padrão para a animação na Web  Interactividade  Atractividade  Software mais barato  Alta resolução de imagem  Necessidade de Plug-ins

20 Shockwave – Director  Animação mais complexa  Criação de conteúdos dinâmicos  Interactividade e versatilidade  Compatibiliadde com o Flash  Necessidade de Plug-ins

21 Javascript  Fácil criação  Planeamento de animação  Sobreposição de imagens  Controlo total do utilizador  Compatível com a maioria dos browsers