Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Sistema digital de informações de ônibus de Curitiba para iphone - Apresentação
Next
Download to read offline and view in fullscreen.

2

Share

Web-infográficos e web-apps: como organizar informações

Download to read offline

Apresentação interna na Gazeta do Povo sobre organização de informações para produção de infográficos e aplicativos para a web.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Web-infográficos e web-apps: como organizar informações

  1. 1. webinfos e webaplicativos Como organizar informações Gazeta do Povo, 6 de maio de 2015
  2. 2. Quem somos Infografia Webdesign & Webdev Patrícia EvandroMarcos Leandro Guilherme Fabiane Chantal Lucas EDITORES DESENVOLVEDORDESIGNERS
  3. 3. Infográfico estático Infográfico interativo Web app App mobile Especial multimídia O que produzimos?
  4. 4. Infográfico estático Infográfico interativo Web app App mobile Especial multimídia
  5. 5. Infográfico estático Infográfico interativo Web app App mobile Especial multimídia
  6. 6. Infográfico estático Infográfico interativo Web app App mobile Especial multimídia
  7. 7. Infográfico estático Infográfico interativo Web app App mobile Especial multimídia
  8. 8. Infográfico estático Infográfico interativo Web app App mobile Especial multimídia
  9. 9. Infográfico estático 1-7 dias Infográfico interativo 3-7 dias Web app 2-4 semanas App mobile 3-4 semanas Especial multimídia 4-8 semanas Prazo Envolvidos Infografia Webdesign & webdev
  10. 10. Infográficos
  11. 11. Exemplos Dados / Gráficos
  12. 12. Dados / Gráficos
  13. 13. http://goo.gl/EXtSGW Dados / Gráficos
  14. 14. Mapas geográficos
  15. 15. Mapas geográficos http://goo.gl/a7pi9x
  16. 16. Mapas geográficos
  17. 17. Mapas geográficos
  18. 18. Mapas de dados http://goo.gl/nNUHvL
  19. 19. Ilustrados
  20. 20. Ilustrados
  21. 21. Ilustrados Colocar um de saúde? Do tipo como funciona? (talvez aquele do alcool)
  22. 22. Ilustrados
  23. 23. Fluxos/ Relações
  24. 24. Fluxos/ Relações
  25. 25. Fluxos/ Relações
  26. 26. Calculadoras
  27. 27. O que eles tem em comum? Estáticos: • menor volume de informação • informação pode ser apresentada em uma única imagem sem comprometer a compreensão Interativos: • volume maior de informação ou outra característica que justifique sua interatividade • informações multimídia (som e movimento)
  28. 28. Prazos Estáticos: • 1-7 dias Interativos: • 3-7 dias
  29. 29. Web apps
  30. 30. Guia de pós- graduação http://goo.gl/Qaiks2
  31. 31. Guia de pós- graduação
  32. 32. Guia de pós- graduação
  33. 33. Diagrama de Nolan http://goo.gl/rMh3BN
  34. 34. Resultados de provas (OAB) http://goo.gl/SpcVpU
  35. 35. Resultados de provas (OAB)
  36. 36. Exemplos Aniversário de Curitiba http://goo.gl/RPaJcl
  37. 37. Aniversário de Curitiba
  38. 38. Aniversário de Curitiba
  39. 39. Aniversário de Curitiba
  40. 40. O que eles tem em comum? • Maior volume de informações (em relação a um infográfico interativo) • Geralmente dividido em várias páginas • São ferramentas/serviços independentes (não precisam de um conteúdo editorial extra ou para explicar)
  41. 41. Itens que teremos que avaliar • Identificar quais dados serão exibidos na ferramenta • Identificar a origem dos dados: – dinâmicos (por meio de um cadastro em painel) – ou estáticos (planilha) • Como será a navegação principal? – Lista, mapa, info, filtros, abas, menus? • Como devem abrir as informações de detalhe? – Em nova janela, página inteira, modal, sanfona, com efeito (fade, flip, slide Up/Down), “do ladinho”?
  42. 42. Prazos 2-4 semanas
  43. 43. Apps mobile
  44. 44. Exemplos Álcool ou Gasolina
  45. 45. Festival Bom Gourmet
  46. 46. Eleições 2014
  47. 47. Guia de Turismo
  48. 48. O que eles tem em comum? • São ferramentas / serviços • Podem ser úteis para o usuário por mais de uma vez
  49. 49. Prazos • 3-4 semanas • Etapas 1 2 3 4 Organizar informações (prototipagem) x Desenvolver layout (tema, ícones, splash) x x x Desenvolver painel de controle x x Desenvolver WebServices x x Programar conexão e exibição dos dados x Testes (UX, performance) x Preparar app nas lojas (Google Play, iTunes) x x Fechar app e enviar (compilar para publicação) x Validação da Apple (7 a 10 dias) x Design Desenvolvimento Externo Semanas
  50. 50. Especial Multimídia
  51. 51. Catedral
  52. 52. Catedral
  53. 53. Exemplos Erva-Mate http://goo.gl/pEFbLG
  54. 54. Erva-Mate
  55. 55. Guerra do Paraguai http://goo.gl/9IQ1FJ
  56. 56. Guerra do Paraguai
  57. 57. Ferrovia 130 anos http://goo.gl/NcWtqA
  58. 58. Ferrovia
  59. 59. Ferrovia
  60. 60. Ferrovia
  61. 61. O que eles tem em comum? • Envolvem diversos setores da Redação (reportagem, infografia, vídeo, ilustração, fotografia, comercial) • Compreendem grande volume de informação, por isso levam um tempo maior para serem produzidos
  62. 62. Itens para avaliar • Conteúdo que seja amplo o suficiente para ser dividido em seções • Cada especial tem sua própria demanda de estruturas multimídia (infográficos interativos, vídeos, galeria de imagens, etc). A utilização de cada uma delas precisa ser justificável, caso contrário o especial não passará de um acúmulo de estruturas redundantes ou desconexas Organização interna Por envolver grande número de pessoas é de grande utilidade uma planilha com as atividades em andamento com seus respectivos responsáveis e prazos
  63. 63. Prazos 4-8 semanas
  64. 64. Planejamento
  65. 65. Infográfico estático 1-7 dias Infográfico interativo 3-7 dias Web app 2-4 semanas App mobile 3-4 semanas Especial multimídia 4-8 semanas Prazo Envolvidos Infografia Webdesign & webdev
  66. 66. Infográfico estático • Evolução do volume de águas, ou • Dicas para economizar água Infográfico interativo • Histórico de cheias em todos os municípios do estado, ou • Como funciona uma represa Web app Calcule o consumo de água em casa App mobile Calculadora de consumo, notícias sobre água, informe vazamento... Especial multimídia Crise hídrica: como chegamos até aqui (histórico, panorama atual, fotos, vídeos, ….) Exemplo: Crise Hídrica
  67. 67. Infográfico estático • Volume mínimo de informações • Conteúdo editado / organizado Infográfico interativo • Volume maior de informações • Componente multimídia (som, movimento, …) Web app • Serviço • Independente App mobile • Deve ser útil por mais de uma vez Especial multimídia • Conteúdo multimídia (fotos, vídeos, infográficos, ...) Requisitos Em todos os casos – Valor editorial / aposta do jornal – Retorno (leitores ou patrocínio)* – Disponibilidade da equipe – Conversar com a equipe antes de compilar informações – “É a melhor forma?” – “Qual é o objetivo / necessidade?” – “O conteúdo disponível rende / ou justifica?”
  68. 68. TEMOS ALGO PARA CONTAR? SERÁ MAIS FÁCIL DE ENTENDER EM UM GRÁFICO? HÁ INFORMAÇÃOSUFICIENTE PARA REALIZÁ-LO? HÁ TEMPO SUFICIENTE PARA QUE SEJA PRODUZIDO COM QUALIDADE? TEMOS TRABALHO NÃOSIM NÃOSIM NÃOSIM NÃOSIM Planejamento
  69. 69. Ideias e coisas práticas
  70. 70. Simplificar tarefas corriqueiras • Tabelas • Abre e fecha • Linhas do tempo • Mapas simples • Quiz • ... • ...
  71. 71. Tabelas • Google Docs – http://drive.google.com – Novo > Planilhas – Arquivo > Publicar na Web – Tutorial com dicas para publicar: http://goo.gl/8MNPu4 • Tables Generator – http://www.tablesgenerator.com/html_tables – File > Paste table data (copie uma tabela e cole ali) – Fazer ajustes de cor, tamanho, fonte, bordas.... – Botão “Generate” para gerar o código html
  72. 72. Exemplos de tabela com Google Docs Abre e fecha http://goo.gl/EtJ9Qv
  73. 73. Exemplos de tabela com Google Docs Agendão “Tô na Gazeta” http://goo.gl/iQWufg
  74. 74. Linhas do tempo • Timeline JS – linhas do tempo interativas com fotos, descrição, ... – o conteúdo é jogado numa tabela do Google Docs • TimeMapper – igual ao Timeline JS + mapa • Tutorial: http://goo.gl/zRpuZ4
  75. 75. Exemplos de linha do tempo interativa 1 ano da “Lava-Jato” http://goo.gl/9DHO4M
  76. 76. Outras ferramentas: http://dadosfinos.blogspot.com.br
  77. 77. Méthode
  78. 78. Manual do Méthode http://goo.gl/AL7hyu • pautar infográficos – criar pedido de gráfico, atribuir, anexar arquivos • como inserir código html – Painel “Componentes Web” (Exibir > Biblioteca de Componentes > Componentes Web). – Arraste o componente “Script HTML” para cima da matéria, no local onde o conteúdo (tabela, infográfico interativo, etc) deve aparecer. – Abra o painel Metadado rápido (Arquivo > Metadado rápido ou “Ctrl+Shift+M”) > “Editar Script”. Cole o código
  79. 79. Obrigado!
  • JoaquimMarinhoneto

    Feb. 24, 2018
  • deniseom

    Aug. 29, 2016

Apresentação interna na Gazeta do Povo sobre organização de informações para produção de infográficos e aplicativos para a web.

Views

Total views

1,702

On Slideshare

0

From embeds

0

Number of embeds

1,022

Actions

Downloads

15

Shares

0

Comments

0

Likes

2

×