Recco: MSc Dissertation Final Presentation

870 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
870
On SlideShare
0
From Embeds
0
Number of Embeds
120
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

  • Ao contrário do que aqui se brinca, a Internet tem sido uma nova alavanca para a banda desenhada.
  • Esta partilha é diária e gratuita e, sendo Online,de publicação imediata para audiência global.
  • estes aspectos permitem que se encurte a distância entre autores e leitores, ganhando-se sentido de comunidade
    Este trabalho foi desenvolvido no seio de uma dessas empresas interessada em manter uma destas comunidades
  • Nestas comunidades fomentam-se mecanismos simples que permitem que qualquer pessoa possa rapidamente criar e partilhar comics online





  • daquela que existe quer em papel quer nas aplicações actuais

  • Estilos diferentes a tornam numa forma de arte apelativa
    Criaram-se convenções para enriquecer imagens com outra informação sensorial como fala, som, movimento
  • PERSONAGENS E BALOES!
  • para criar comics, seleccionar imagens de bd e manipulá-las
  • só temos outro exemplo
  • e ainda outro
  • não engasgar!!! são criados, são criados... para a frente!

  • apontam num caminha diferente... utilizadores disfrutam da liberdade.
  • conjuga num só diversas técnicas
  • ponto de partida é desenho livre, mas é enriquecida com...


  • é possível reutilizar elementos criados em vinhetas ou mesmo histórias anteriores
  • propomos um novo modo de recuperar
  • módulo editor: cliente que permite a criação e edição de comics
    módulo recuperador: servidor que permite a recuperação de desenhos anteriores
  • não querendo assustar:
    - componentes são independentes, não dependem uns dos outros. Criar outras aplicações que partilhem requisitos.
    - 2 bases: MVC e SVG (desenhos independentes de aplicação)
  • Temos aqui interface do editor: agrega vários componentes que suportam diversas técnicas. É o conjunto de todas elas que forma a nossa abordagem. Partindo para cada um....
  • Não como se faz! APENAS O QUE SUPORTA MECANISMOS!!!
  • controla ciclo de vida de aplicação: oferece ferramentas diferentes, consoante objectivos do utilizador.




  • podem aproveitar a mesma interacção para desenhar e recuperar.
    assim, não são pertubados por outro tipo de tarefas como pesquisa por keywords.
  • motor de pesquisa de desenhos vectoriais.

  • desenhos são classificados com outra informação que não geometria e topologia.
  • Porquê estendemos?

  • Aviões:
    - querem todos, desenham o que existe em comum, criam abstracção visual e significado gráfico para avião. Esperam que as características em comum sejam suficientes para o sistema entender esse significado... mas não são
  • como se faz? rapido.
  • 1º!!!A partir de ag, atalho é interrogação.
    Slide.
    Atalho passa a representar visualmente um significado atribuído ao desenho original
  • slide sem explicar top, latest, etc.
    Classificar vários desenhos sobre o mesmo atalho.
  • recordar atalho ou a lógica por trás da classificação
  • Criar conjuntos semãnticos de desenhos, i.e., agrupar elementos sobre um atalho com significado para user. AVIOES.

  • intergrámos trabalho anterior com editor: Indagare server.
    camada superior de serviços que acrescentam toda a lógica dos atalhos


  • Comics Sketch : interacção baseada em desenho livre.
  • mesma história para podermos comparar resultados.

  • Nos 2 grupos a ordem nas aplicações testadas foi inversa:
    evitar viciação de resultados.
  • - tempo sempre menor, no total e nas vinhetas;
    - 1ª vinheta em Recco... restantes: desenhar guardar vs. reutilizar.
  • todos dentro e acima do esperado.
    Camadas!! A história não tinha muitos elementos em profundidade.
  • como podem ver tiveram uma boa recepção.
  • 1º: ELEMENTOS: RETRIEVAL FIXE.
    2º ATALHOS MELHOR QUE ESPERADO: EM EXCLUSIVO

  • os utilizadores preferiram a nossa aplicação
    usabilidade
    comics que foram criados.

  • ler e despachar.
  • resultou em (...)

    PARADOXO mas NãO É!!
  • apenas o MECANISMO
  • LÊ
  • adiciona alguma semântica um nível acima de topologia e geometria.





  • Recco: MSc Dissertation Final Presentation

    1. 1. Recco RecuPeração e Criação de Comics Online Ricardo Abreu Lopes Fevereiro 2009 Wednesday, February 18, 2009
    2. 2. comics e web? Wednesday, February 18, 2009
    3. 3. sucesso na partilha e distribuição Wednesday, February 18, 2009
    4. 4. comunidade web comics: encurta a distância entre autores e leitores Wednesday, February 18, 2009
    5. 5. facilidade na criação por amadores Wednesday, February 18, 2009
    6. 6. Mas criar com facilidade é suficiente? Wednesday, February 18, 2009
    7. 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. 8. ... não existe flexibilidade para criar, transformar e reutilizar livremente Wednesday, February 18, 2009
    9. 9. Os comics criados são visualmente simples sem expressividade Wednesday, February 18, 2009
    10. 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. 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. 12. Para tal, estudámos como outros criam comics Em papel no computador Wednesday, February 18, 2009
    13. 13. Em papel, comics são linguagem visual bastante rica Wednesday, February 18, 2009
    14. 14. em papel, as convenções na criação de comics levam à repetição de elementos visuais Wednesday, February 18, 2009
    15. 15. StripGenerator[Studios07] No computador, a técnica mais frequente para criar comics é a recombinação de imagens Wednesday, February 18, 2009
    16. 16. ComicKit [Williams05] Wednesday, February 18, 2009
    17. 17. Read Write Think [Think07] Wednesday, February 18, 2009
    18. 18. com esta técnica, elementos criados não podem ser reutilizados... Wednesday, February 18, 2009
    19. 19. Alderman[Alderman06] ComiKit[Williams05] Gnomz[Cheung06] ... e as tiras criadas têm fraca complexidade visual Wednesday, February 18, 2009
    20. 20. Comics Sketch[inEvo08] mas soluções com desenho livre estimulam utilizadores a criarem comics mais complexos Wednesday, February 18, 2009
    21. 21. a nossa solução é uma nova abordagem à criação de comics online Wednesday, February 18, 2009
    22. 22. interacção caligráfica para desenho livre Wednesday, February 18, 2009
    23. 23. edição rica com transformação de desenhos Wednesday, February 18, 2009
    24. 24. desenho assistido e sugestões geométricas Wednesday, February 18, 2009
    25. 25. recuperação caligráfica de desenhos anteriores Wednesday, February 18, 2009
    26. 26. mecanismo de recuperação por atalhos caligráficos Wednesday, February 18, 2009
    27. 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. 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. 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. 30. Tela de Desenho desenho livre transformação de elementos editor SVG Wednesday, February 18, 2009
    31. 31. Menu de Contextos de Edição desenho acções zoom texto recuperação Wednesday, February 18, 2009
    32. 32. Gestor de Camadas Visuais distribui desenhos por camadas sobrepostas manipulação de camadas e respectivos desenhos Wednesday, February 18, 2009
    33. 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. 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. 35. Recuperador suporta mecanismos de pesquisa e reutilização de elementos anteriores através de interacção caligráfica Wednesday, February 18, 2009
    36. 36. Porquê recuperação caligráfica? Utilizadores esboçam para desenhar e recuperar Wednesday, February 18, 2009
    37. 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. 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. 39. Contudo, decidimos estender este mecanismo com o conceito de atalho caligráfico Wednesday, February 18, 2009
    40. 40. Porquê? Observámos que utilizadores desenham poucas formas simples para pesquisar Wednesday, February 18, 2009
    41. 41. Mas querem o máximo de resultados que associam a essas formas Wednesday, February 18, 2009
    42. 42. Querem que a sua abstracção visual represente o significado de todas as instâncias que esperam Wednesday, February 18, 2009
    43. 43. Tornámos explícita a criação de abstracções visuais, os atalhos caligráficos Wednesday, February 18, 2009
    44. 44. Desenhos passam a ser também classificados por outro desenho adicional Wednesday, February 18, 2009
    45. 45. Criámos um mecanismo de sugestão de atalhos Os atalhos podem ser reutilizados para classificar outros desenhos Wednesday, February 18, 2009
    46. 46. Vantagens A pesquisa requer menos memória visual e está mais perto do que utilizadores já fazem Wednesday, February 18, 2009
    47. 47. desenhos classificados com o mesmo atalho formam grupos lógicos para o utilizador Wednesday, February 18, 2009
    48. 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. 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. 50. Wednesday, February 18, 2009
    51. 51. Wednesday, February 18, 2009
    52. 52. Como avaliámos a nossa solução? Wednesday, February 18, 2009
    53. 53. Testes de utilizador com duas aplicações: ReCCO e Comics Sketch Wednesday, February 18, 2009
    54. 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. 55. Medimos tempo de criação utilização de componentes de edição comportamento na recuperação satisfação Wednesday, February 18, 2009
    56. 56. 8 participantes que correspondem ao perfil de utilizador desejado, divididos em 2 grupos Wednesday, February 18, 2009
    57. 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. 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. 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. 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. 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. 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. 63. O que concluímos? Wednesday, February 18, 2009
    64. 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. 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. 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. 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. 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. 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. 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. 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. 72. Wednesday, February 18, 2009
    73. 73. Wednesday, February 18, 2009

    ×