Protótipos em svg+javascript

350 visualizações

Publicada em

Montando protótipos interativos com svg+javascript

Publicada em: Design
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
350
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
2
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Protótipos em svg+javascript

  1. 1. o_que_faz_quando_clico_aqui.svg bem bolado de svg com javascript para construir protótipos de tela Augusto Rückert
  2. 2. Um problema
  3. 3. Como construir protótipos de tela interativos? Um problema
  4. 4. Como construir protótipos de tela interativos? Um problema Sim… o problema é meu… tenha calma e seja empático
  5. 5. Não é um problema novo nem sem solução
  6. 6. Queria construir protótipos [minimamente] interativos… … e poderia fazer isso com: Código puro (html+css+js) ● ruim de leiautar ● péssimo para pensar em layout
  7. 7. Queria construir protótipos [minimamente] interativos… … e poderia fazer isso com: Axure ● não tenho licença ● a licença é cara ● há uma grande curva de aprendizado
  8. 8. Queria construir protótipos [minimamente] interativos… … e poderia fazer isso com: Pencil ● serve e não serve: depende do que está sendo prototipado
  9. 9. Queria construir protótipos [minimamente] interativos… … e poderia fazer isso com: Pencil ● serve e não serve: depende do que está sendo prototipado ● NÃO GUENTA NEM 10 MINUTU DE PORRADA COMIGO!
  10. 10. Queria construir protótipos [minimamente] interativos… … e poderia fazer isso com: Indesign ● gera pdfs interativos, mas não tão legais pra usar em protótipos ● ou gera swf meio tortos
  11. 11. Queria construir protótipos [minimamente] interativos… … e poderia fazer isso com: outros amigos ● ou deixam interativo ou servem pra layout, ou seja, duas aplicações
  12. 12. Não é um problema novo nem sem solução
  13. 13. 2014
  14. 14. Bingo!
  15. 15. Gente de negócios sorrindo é sinal de SUCESSO!
  16. 16. SVG + javascript
  17. 17. SVG é a abreviatura de Scalable Vector Graphics que pode ser traduzido do inglês como gráficos vetoriais escaláveis. Trata-se de uma linguagem XML para descrever de forma vetorial desenhos e gráficos bidimensionais, quer de forma estática, quer dinâmica ou animada. (Wikipédia,2015) SV o quê?
  18. 18. Vetor pra onde? Vetor de quê?
  19. 19. (Wikipédia,2015) javascr… JavaScript é uma linguagem de programação interpretada . Foi originalmente implementada como parte dos navegadores web para que scripts pudessem ser executados do lado do cliente e interagissem com o usuário sem a necessidade deste script passar pelo servidor, controlando o navegador, realizando comunicação assíncrona e alterando o conteúdo do documento exibido.
  20. 20. Inkscape + jQuery SVG + javascript
  21. 21. Ainda quero construir protótipos [minimamente] interativos… … e posso fazer isso com: Inkscape ● edição gráfica em vetores ● multiplataforma ● saída em svg ● opensource … mais isso: jQuery ● js for dummies (Mãe! Sou programador!) ● pegaQualquerElementoComIdComIsso $("#id"); ● opensource
  22. 22. Mas e o Illustrator?
  23. 23. Mas e o Illustrator? É possível utilizá-lo, mas há dificuldade em definir as ids dos elementos, pois somente é possível aplicar identificadores em camadas. O resultado são camadas de camadas de camadas, o que pode deixar o trabalho bem mais burocrático.
  24. 24. Paradigma de desenvolvimento web html css javascript estrutura apresentação comportamento
  25. 25. Paradigma de desenvolvimento web do protótipo interativo svg css javascript estrutura+apresentação efeitos comportamento
  26. 26. Let's play!
  27. 27. Let's play!
  28. 28. http://codepen.io/ruckert/pen/bVoKqM
  29. 29. Alguns problemas
  30. 30. Alguns problemas
  31. 31. Problema: Ocultar itens no layout para trabalhar elementos complexos ● Inkscape oculta um a um, mas desoculta todos os objetos conjuntamente ● Não há árvore de elementos
  32. 32. Problema: Ocultar itens no layout para trabalhar elementos complexos ● Inkscape oculta um a um, mas desoculta todos os objetos conjuntamente ● Não há árvore de elementos Solução: jQuery + captura de parte da id ● Colocação da palavra "hidden" na id do elemento a ser ocultado ● Utilização de camadas no Inkscape para gerenciar o layout durante o trabalho ● jQuery esconde os elementos com "hidden" na id no init()
  33. 33. Problema: Carregamento de fontes do css não afeta o svg ● Inkscape não aceita embutir a fonte (bug na fila) ● O uso de fontes de ícones e fontes não nativas fica prejudicado
  34. 34. Problema: Carregamento de fontes do css não afeta o svg ● Inkscape não aceita embutir a fonte (bug na fila) ● O uso de fontes de ícones e fontes não nativas fica prejudicado Solução: Force a fonte via CSS. Pode usar o Google fonts ● Aplique a fonte afetando todos os elementos com o seletor “*”
  35. 35. E lá vamos nós!
  36. 36. Vantagens do processo + tecnologias ● Wireframe e protótipo interativo sem necessitar a migração de um software para outro ● OpenSource ● Multiplataforma ● Roda no browser (inclusive em smartphones) ● Permite o foco no layout sem perder a possibilidade de testar a interface (inclusive a distância)
  37. 37. Desvantagens do processo + tecnologias ● Não permite simular responsividade ● [Talvez] Não permite conteúdo dinâmica
  38. 38. Para o futuro… ● Testar tracking de cliques ● Testar animações css ● Manipular o svg coma Raphäel.js
  39. 39. Obrigado pela atenção!

×