protótipos em svg+javascript
TRANSCRIPT
![Page 1: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/1.jpg)
o_que_faz_quando_clico_aqui.svgbem bolado de svg com javascript para construir protótipos de tela
Augusto Rückert
![Page 2: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/2.jpg)
Um problema
![Page 3: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/3.jpg)
Como construir protótipos de tela interativos?
Um problema
![Page 4: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/4.jpg)
Como construir protótipos de tela interativos?
Um problema
Sim… o problema é meu… tenha calma e seja empático
![Page 5: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/5.jpg)
Não é um problema novonem sem solução
![Page 6: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/6.jpg)
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
![Page 7: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/7.jpg)
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
![Page 8: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/8.jpg)
Queria construir protótipos [minimamente] interativos…
… e poderia fazer isso com:
Pencil
● serve e não serve: depende do queestá sendo prototipado
![Page 9: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/9.jpg)
Queria construir protótipos [minimamente] interativos…
… e poderia fazer isso com:
Pencil
● serve e não serve: depende do queestá sendo prototipado
●
NÃO GUENTA NEM 10 MINUTU DE PORRADA COMIGO!
![Page 10: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/10.jpg)
Queria construir protótipos [minimamente] interativos…
… e poderia fazer isso com:
Indesign
● gera pdfs interativos, mas não tão legaispra usar em protótipos
● ou gera swf meio tortos
![Page 11: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/11.jpg)
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
![Page 12: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/12.jpg)
Não é um problema novonem sem solução
![Page 13: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/13.jpg)
![Page 14: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/14.jpg)
2014
![Page 15: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/15.jpg)
Bingo!
![Page 16: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/16.jpg)
Gente de negócios sorrindoé sinal de SUCESSO!
![Page 17: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/17.jpg)
SVG + javascript
![Page 18: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/18.jpg)
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ê?
![Page 19: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/19.jpg)
Vetor pra onde?Vetor de quê?
![Page 20: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/20.jpg)
(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.
![Page 21: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/21.jpg)
Inkscape + jQuerySVG + javascript
![Page 22: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/22.jpg)
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
![Page 23: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/23.jpg)
Mas e o Illustrator?
![Page 24: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/24.jpg)
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.
![Page 25: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/25.jpg)
Paradigma de desenvolvimento web
html
css
javascript
estrutura
apresentação
comportamento
![Page 26: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/26.jpg)
Paradigma de desenvolvimento web do protótipo interativo
svg
css
javascript
estrutura+apresentação
efeitos
comportamento
![Page 27: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/27.jpg)
Let's play!
![Page 28: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/28.jpg)
Let's play!
![Page 29: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/29.jpg)
http://codepen.io/ruckert/pen/bVoKqM
![Page 30: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/30.jpg)
Alguns problemas
![Page 31: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/31.jpg)
Alguns problemas
![Page 32: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/32.jpg)
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
![Page 33: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/33.jpg)
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()
![Page 34: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/34.jpg)
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
![Page 35: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/35.jpg)
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 “*”
![Page 36: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/36.jpg)
E lá vamos nós!
![Page 37: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/37.jpg)
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)
![Page 38: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/38.jpg)
Desvantagens do processo + tecnologias
● Não permite simular responsividade● [Talvez] Não permite conteúdo dinâmica
![Page 39: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/39.jpg)
Para o futuro…
● Testar tracking de cliques● Testar animações css● Manipular o svg coma Raphäel.js
![Page 40: Protótipos em svg+javascript](https://reader030.vdocuments.site/reader030/viewer/2022021417/587be5611a28ab765a8b4915/html5/thumbnails/40.jpg)
Obrigado pela atenção!