protótipos em svg+javascript

o_que_faz_quando_clico_aqui.svgbem bolado de svg com javascript para construir protótipos de tela

Augusto Rückert

Um problema

Como construir protótipos de tela interativos?

Um problema

Como construir protótipos de tela interativos?

Um problema

Sim… o problema é meu… tenha calma e seja empático

Não é um problema novonem sem solução

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

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

Queria construir protótipos [minimamente] interativos…

… e poderia fazer isso com:

Pencil

● serve e não serve: depende do queestá sendo prototipado

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!

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

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

Não é um problema novonem sem solução

2014

Bingo!

Gente de negócios sorrindoé sinal de SUCESSO!

SVG + javascript

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

Vetor pra onde?Vetor de quê?

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

Inkscape + jQuerySVG + javascript

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

Mas e o Illustrator?

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.

Paradigma de desenvolvimento web

html

css

javascript

estrutura

apresentação

comportamento

Paradigma de desenvolvimento web do protótipo interativo

svg

css

javascript

estrutura+apresentação

efeitos

comportamento

Let's play!

Let's play!

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

Alguns problemas

Alguns problemas

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

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

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

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

E lá vamos nós!

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)

Desvantagens do processo + tecnologias

● Não permite simular responsividade● [Talvez] Não permite conteúdo dinâmica

Para o futuro…

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

Obrigado pela atenção!