1. Recco
RecuPeração e Criação de Comics
Online
Ricardo Abreu Lopes
Fevereiro 2009
Wednesday, February 18, 2009

2. comics e web?
Wednesday, February 18, 2009

3. sucesso na partilha e distribuição
Wednesday, February 18, 2009

4. comunidade web comics:
encurta a distância entre autores e leitores
Wednesday, February 18, 2009

5. facilidade na criação por amadores
Wednesday, February 18, 2009

6. Mas criar com
facilidade
é suficiente?
Wednesday, February 18, 2009

7. Não.
As soluções actuais para criar comics online
restrigem a interacção com o utilizador...
HyperComics[Games07]
Wednesday, February 18, 2009

8. ... não existe flexibilidade para criar, transformar e
reutilizar livremente
Wednesday, February 18, 2009

9. Os comics criados são
visualmente simples
sem expressividade
Wednesday, February 18, 2009

10. Objectivos
Queremos aproximar web comics ao formato
tradicional
criação confortável e sem limitações
resultados visualmente ricos e complexos
Wednesday, February 18, 2009

11. Mas queremos introduzir uma interacção mais
rica e flexível
automatizar processos de criação e edição
aumentar eficiência
assistir o utilizador na repetição de elementos
Wednesday, February 18, 2009

12. Para tal, estudámos como outros criam comics
Em papel no computador
Wednesday, February 18, 2009

13. Em papel, comics são linguagem visual
bastante rica
Wednesday, February 18, 2009

14. em papel, as convenções na criação de comics
levam à repetição de elementos visuais
Wednesday, February 18, 2009

15. StripGenerator[Studios07]
No computador, a técnica mais frequente para criar
comics é a recombinação de imagens
Wednesday, February 18, 2009

16. ComicKit [Williams05]
Wednesday, February 18, 2009

17. Read Write Think [Think07]
Wednesday, February 18, 2009

18. com esta técnica,
elementos criados não podem ser reutilizados...
Wednesday, February 18, 2009

19. Alderman[Alderman06]
ComiKit[Williams05]
Gnomz[Cheung06]
... e as tiras criadas têm fraca
complexidade visual
Wednesday, February 18, 2009

20. Comics Sketch[inEvo08]
mas soluções com desenho livre estimulam
utilizadores a criarem comics mais complexos
Wednesday, February 18, 2009

21. a nossa solução é uma nova abordagem à
criação de comics online
Wednesday, February 18, 2009

22. interacção caligráfica para desenho livre
Wednesday, February 18, 2009

23. edição rica com transformação de desenhos
Wednesday, February 18, 2009

24. desenho assistido
e sugestões geométricas
Wednesday, February 18, 2009

25. recuperação caligráfica de desenhos anteriores
Wednesday, February 18, 2009

26. mecanismo de recuperação
por atalhos caligráficos
Wednesday, February 18, 2009

27. Arquitectura da aplicação web que
concretiza a nossa solução
Client Web Application: Editor
Comics
Application
Interface
Editor Module
Context Layer
Canvas
User Menu
Editor Module Manager
Editor Module
Expectation
List
Editing
Tool
Panels List
RETRIEVAL
EVENTS
Server: Retrieval Module
Comics Retrieval
Services
SVG
Indagare
Library
Wednesday, February 18, 2009

28. Arquitectura do Módulo Editor, orientada a
Componentes
Panels
List
Canvas
Canvas
Canvas
Canvas
User Actions
Canvas
Context
Event
data binding updates model and view
Menu
Controller Context
Canvas Change
View Event
model updates view command
User Actions
instructs update
Properties
on model
Model View
Model
Watchers
User Actions
property change
triggers editor event
Canvas
Event
data binding updates values in properties model
command
replaces drawing
with suggestion Group Tool
Layer Text Tool
UI Zoom Tool
Manager Style Tool
updates
Controller Model
suggestions - color
- width
- ...
model updates view User Actions
Edition
Expectations User Actions
View Components
List
User Actions
Wednesday, February 18, 2009

29. Editor suporta modelo rico de criação de comics
abordagem em que combinamos múltiplas técnicas de
edição de desenhos
Wednesday, February 18, 2009

30. Tela de Desenho
desenho livre
transformação de elementos
editor SVG
Wednesday, February 18, 2009

31. Menu de Contextos de Edição
desenho
acções
zoom
texto
recuperação
Wednesday, February 18, 2009

32. Gestor de Camadas Visuais
distribui desenhos por camadas sobrepostas
manipulação de camadas e respectivos desenhos
Wednesday, February 18, 2009

33. Fila de Expectativas
reconhecimento e sugestão de formas
reconhecimento e execução de acções
mostra resultados de recuperação
Wednesday, February 18, 2009

34. Lista de Painéis
contém a tira de comics
manipula vinhetas
actualiza e é actualizado por Tela de Desenho
troca de dados SVG
Wednesday, February 18, 2009

35. Recuperador suporta mecanismos de pesquisa e
reutilização de elementos anteriores através de
interacção caligráfica
Wednesday, February 18, 2009

36. Porquê recuperação caligráfica?
Utilizadores esboçam para desenhar e recuperar
Wednesday, February 18, 2009

37. Figura 6.7: Interface do motor de busca Indagare - p´gina de resultados.
a
˜o obtidos atrav´s de uma chamada ass´
a e ıncrona ao servidor, utilizando o desenho seleccionado como
Utilizámos trabalho anterior na
nterroga¸˜o. Desta forma, o utilizador tem oportunidade de ver a informa¸˜o referente ao desenho
ca ca
ue escolheu, sem ter que ficar ` espera da resposta do servidor.
a
recuperação caligráfia de desenhos
.2.1.2 Backoffice
ssim que come¸´mos a realizar opera¸˜es de manipula¸˜o de dados, como a constru¸˜o da base de
ca co ca ca
Wednesday, February 18, 2009

38. While these relationships are weakly discrim
rotation and translation.
9
4
56
7
8 1
3
2
1
Fig. 3. Special polygons computed from shape.
Fig. 3. Drawing and Top
ombine these attributes with known commensurable values for simple convex
rimitives, such as quadrilaterals and triangles. What is more important, using
eometric features instead of polygon classification, allows us to index and store
Neste trabalho, desenhos e interrogações
otentially unlimited families of shapes in a scalable manner.
Our geometric description method uses a set of global geometric properties
Since graph matching is apela sua
NP-complete pr
xtracted from drawing entities. We start the calculation of geometric features
são descritos e comparados
y computing the Convex Hull of the provided element, using Graham’s scan
9]. Then, we compute three special polygons from the convex hull: the Largest
topology graphs topologia
for searching similar draw
geometria e
rea Triangle and the Largest Area Quadrilateral inscribed in the convex hull
], and finally, the Smallest Area Enclosing Rectangle [12]. Figure 3 depicts an
xample of polygons extracted from a irregular shape.
graph spectra instead. For each topology gr
Finally, we compute the ratios between area and perimeter from each special
olygon. We experimentally evaluated several ratios, as described in detail in
we compute descriptors based on its spect
], before we reach the set of features listed in Table 1. This set of features
llow the description of shapes independently of their size, rotation, translation
rWednesday, February 18, 2009 features can either be used to classify drawings or
line type. This way, such

39. Contudo, decidimos
estender este
mecanismo com o
conceito de
atalho caligráfico
Wednesday, February 18, 2009

40. Porquê?
Observámos que utilizadores desenham
poucas formas simples para pesquisar
Wednesday, February 18, 2009

41. Mas querem o máximo de resultados
que associam a essas formas
Wednesday, February 18, 2009

42. Querem que a sua abstracção
visual represente o significado de
todas as instâncias que esperam
Wednesday, February 18, 2009

43. Tornámos explícita a criação de abstracções visuais,
os atalhos caligráficos
Wednesday, February 18, 2009

44. Desenhos passam a ser também classificados por
outro desenho adicional
Wednesday, February 18, 2009

45. Criámos um mecanismo de sugestão de atalhos
Os atalhos podem ser reutilizados para
classificar outros desenhos
Wednesday, February 18, 2009

46. Vantagens
A pesquisa requer menos memória visual e
está mais perto do que utilizadores já fazem
Wednesday, February 18, 2009

47. desenhos classificados com o mesmo atalho
formam grupos lógicos para o utilizador
Wednesday, February 18, 2009

48. Os atalhos são uma extensão ao mecanismo tradicional.
Solução continua válida para quem sente dificuldade nos
atalhos
Wednesday, February 18, 2009

49. Arquitectura do Módulo Recuperador
Retrieval events created in editor
invoke the appropriate service
Query
Retrieval
Query Indagare
Indagare Server Results Service
PHP Extension
Query
Shortcut Suggestion
Classify Service
Results
DrawingLib
Classify Classify
Classify Service
Results function
Classify shortcut
SBR Classify shortcut Classify Shortcut
function
Service
Retrieval Services
writes or gets SVG Layer
SVG Files
Library
Wednesday, February 18, 2009

50. Wednesday, February 18, 2009

51. Wednesday, February 18, 2009

52. Como avaliámos a nossa solução?
Wednesday, February 18, 2009

53. Testes de utilizador com duas aplicações:
ReCCO e Comics Sketch
Wednesday, February 18, 2009

54. Lampâda no tecto, apagada Lampâda cresce um pouco
Guião da Quantos
Quantos engºs
é que
de Usabilidade
TU Escadote
são precisos para
prancha a criar
Escadote aberto achas? em
trocar uma lampâda?
e em pé Oh, depende...
pé
Pessoa 1 Cão pequeno
Cão pequeno entra
Lampâda 2 no chão Lampâda 2 no chão
GRANDE PLANO
Lampâda está GIGANTE
Lampâda está
muito maior
Será que esta é sequer
a pergunta certa?
Nielsen tem
1 sobre
lampâdas
precisamos
de fazer
Cão no topo do escadote,
1 avaliação e
a olhar para lampâda e 1 workshop?
1 relatório
com brindes!
Pessoa 2
Foco no topo entra
do escadote
Cão
Pessoa 1
sim, o utilizador
Escadote deitado, abandonado
deseja ter luz?
ponta da lampâda 2, esquecida
Pedaços de vidro e lampâda chovem
se soubéssemos mais cedo...
Grande plano da lampâda a talvez na próxima release!
explodir com um grande BAM!
era demasiado tarde,
nesta fase do
desenvolvimento
Grande plano em cão
Wednesday, February 18, 2009

55. Medimos
tempo de criação
utilização de componentes de edição
comportamento na recuperação
satisfação
Wednesday, February 18, 2009

56. 8 participantes que correspondem ao
perfil de utilizador desejado, divididos em
2 grupos
Wednesday, February 18, 2009

57. +,--./quot;01234quot;+5-6quot;
'#quot;
-4789:quot;6;,<9=/quot;01234quot;+5-6quot;
+,--./quot;01234quot;-65+quot;
'!quot;
-4789:quot;6;,<9=/quot;01234quot;-65+quot;
&quot;
!quot;#$%&'#()*&
%quot;
$quot;
#quot;
!quot;
Resultados para
!quot; 'quot; #quot; (quot; $quot; )quot; %quot; *quot;
+(),quot;-.&
tempo de criação #%$ &'quot;&$
&'quot;($
&#$
&%$
!!quot;#$
!#$
!quot;#$%&!%'()&*#+,-&
!%$
!%$
)#$
)%$
(#$
(%$
#$
%$
*+,-.$/012$ *+,-.$120/$
./0$%&1quot;&23)+4(1%/quot;5&
/3114$ 1.5678$293:7;$$
Wednesday, February 18, 2009

58. Valor Valor
Medida (nº de ocorrrências)
Esperado Obtido
293
transformações de desenhos 145
147
desenhos apagados 102
19
operações de grupos 14
1.475
média de camadas visuais / vinheta 1.7
27
elementos textuais criados 25
60
sugestões geométricas aceites 68
25
acções gestuais realizadas 26
Utilização de Componentes de Edição
Wednesday, February 18, 2009

59. As operações de desenho assistido foram as mais
comentadas
*(#$
)%#$
'quot;#$
quot;%#$ '(#$
quot;%#$
&(#$
(%#$
)(#$
'%#$ !quot;#$ !quot;#$
quot;(#$ %&#$
!%#$
%(#$
!quot;#$
&%#$ !(#$
%#$ (#$
*+,-./0.$ 1.2-./0.$ 1.2-./0.$3.45678248$ +,-./01/$ 2/3./01/$ 2/3./01/$4/56789359$
As sugestões geométricas foram As acções por esboço são mais
uma ajuda importante? fáceis que as restantes?
Wednesday, February 18, 2009

60. Resultados para recuperação
#*quot;
##&!quot; ##&!quot;
#$quot;
##quot; ##quot;
##quot;
%&(!quot;
#'quot;
%quot;
!quot;#$%&#'&()&*+',,-.+$%/&
%quot;
,quot;
(quot;
+quot; !&$!quot;
!quot;
!quot; )&$!quot;
)quot;
*quot;
$quot;
$quot;
#quot; '&(!quot; '&!quot;
#quot; '&$!quot;
'quot;
'quot;
-.quot;/0quot;010203456quot; -.quot;/0quot;687064?06quot;/0quot; -.quot;/0quot;010203456quot; -.quot;/0quot;A340::579=?06quot; -.quot;/0quot;A340::579=?06quot;
789:/9/56quot;;9:9quot; 9491@56quot;9<0A406quot;quot;quot;quot;quot; :0<8;0:9/56quot;B80quot; /0quot;:0<8;0:9=>5quot; /0quot;:0<8;0:9=>5quot;;5:quot;
:0<8;0:9=>5quot;quot;quot;quot;quot;quot; C5:92quot;8D1AE9/56quot;quot;quot;quot;quot;quot;quot; F4:9/A<A5391Gquot;quot;quot;quot;quot; 9491@5quot;quot;quot;
H915:quot;I6;0:9/5quot; J:8;5quot;KLMNquot; J:8;5quot;MNLKquot;
Wednesday, February 18, 2009

61. Atalhos foram compreendidos e aceites
88% dos participantes acharam que os atalhos
melhoravam a pesquisa de desenhos
75% afirmaram que os atalhos permitem
organizar melhor o conteúdo classificado
Até os 25% que não acharam que criar atalhos é fácil
utilizaram este mecanismo
Wednesday, February 18, 2009

62. Satisfação com usabilidade e comics criados
file:///Users/rval/Desktop/1.svg
file://localhost/Users/rval/Sites/amfphp/services/reccoServices...
4 50 35106
Quantos Engenheiros de Usabilidade
sao precisos
para trocar uma lampada???
file:///Users/rval/Desktop/2.svg
Quantos e que
TU 1 of 2 1/6/09 3:49 PM
achas? Oooh... depende!
Wednesday, February 18, 2009

63. O que concluímos?
Wednesday, February 18, 2009

64. Componentes e mecanismos de criação
são valorizados pelos utilizadores
permitem ganhos no tempo de
concepção
incentivam a criatividade e riqueza
visual
Wednesday, February 18, 2009

65. Contribuímos com nova abordagem para criar
comics online
oferece aumento na flexibilidade e eficiência na
criação
estimula o autor a ser mais exigente e ambicioso
Wednesday, February 18, 2009

66. A recuperação caligráfica de
desenhos resolve a necessidade de
reutilização de elementos numa
narrativa de comics
Wednesday, February 18, 2009

67. Contribuímos com novo conceito de
recuperação por atalho caligráfico
natural e vantajoso para utilizadores
melhor solução para reutilização numa aplicação de
desenho livre
vantagens compensam passo adicional de criação de
atalho
Wednesday, February 18, 2009

68. Pensamos que a reutilização de atalhos traz
flexibilidade à recuperação de desenhos
novo tipo de classificação a adicionar a topologia e
geometria
melhor organização
Wednesday, February 18, 2009

69. Trabalho Futuro
Ajustes à usabilidade da aplicação editor
Problemas identificados na avaliação experimental
apontam o caminho
undo, acção de cópia, alteração de tamanho de
vinhetas, sugestão de símbolos comics, pesquisa
por exemplo...
Wednesday, February 18, 2009

70. Mais Trabalho Futuro
Insatisfação com resultados de recuperação
Ambiguidade: mecanismo tradicional vs.
atalhos
Resultados encorajam tornar exclusivo o mecanismo
por atalhos
mas necessários estudos adicionais de usabilidade
... ou então adaptação de algoritmos de reconhecimento
e recuperação
Wednesday, February 18, 2009

71. Publicações
Poster
3ª Conferência Nacional de Interacção Pessoa-
Máquina (Interacção 2008)
Submissão de artigo
9th International Symposium on SMART GRAPHICS
Wednesday, February 18, 2009

72. Wednesday, February 18, 2009

73. Wednesday, February 18, 2009