Montando protótipos interativos com svg+javascript

1. o_que_faz_quando_clico_aqui.svg
bem bolado de svg com javascript para construir protótipos de tela
Augusto Rückert

2. Um problema

3. Como construir protótipos de tela interativos?
Um problema

4. Como construir protótipos de tela interativos?
Um problema
Sim… o problema é meu… tenha calma e seja empático

5. Não é um problema novo
nem sem solução

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. 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. Queria construir protótipos [minimamente] interativos…
… e poderia fazer isso com:
Pencil
● serve e não serve: depende do que
está sendo prototipado

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. 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. 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. Não é um problema novo
nem sem solução

14. 2014

15. Bingo!

16. Gente de negócios sorrindo
é sinal de SUCESSO!

17. SVG + javascript

18. 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ê?

19. Vetor pra onde?
Vetor de quê?

20. (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.

21. Inkscape + jQuery
SVG + javascript

22. 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

23. Mas e o Illustrator?

24. 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.

25. Paradigma de desenvolvimento web
html
css
javascript
estrutura
apresentação
comportamento

26. Paradigma de desenvolvimento web do protótipo interativo
svg
css
javascript
estrutura+apresentação
efeitos
comportamento

27. Let's play!

28. Let's play!

29. http://codepen.io/ruckert/pen/bVoKqM

30. Alguns problemas

31. Alguns problemas

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

33. 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()

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

35. 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 “*”

36. E lá vamos nós!

37. 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)

38. Desvantagens do processo + tecnologias
● Não permite simular responsividade
● [Talvez] Não permite conteúdo dinâmica

39. Para o futuro…
● Testar tracking de cliques
● Testar animações css
● Manipular o svg coma Raphäel.js

40. Obrigado pela atenção!