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