Boas práticas para produção e distribuição de publicações digitais. Muitos profissionais já se depararam com essa dúvida. E como escolher o formato sem saber as características, benefícios e limitações de cada um? Neste Workshop suas dúvidas sobre os principais formatos para publicações digitais serão respondidas. Palestra realizada em 18 de Maio de 2017, na WIS Educação, Vitório/ES

1. Publicações Digitais
Interativas. Qual
solução escolher?
eBooks ou Apps

2. felipe santos
designer gráfico
Pós | Design estratégico
Treinamento adobe | 1998
Publicação digital | 2011

3. “Temos uma equipe de excelentes ilustradores
e diagramadores, gostaríamos de desenvolver
internamente o conteúdo de nossa editora
com interatividades.
Algumas dúvidas também, são pertinentes e
espero que nos ajude: com a produção interna,
como poderá ser a distribuição do conteúdo,
produzido? Nossa equipe será capaz de realizar
este processo? Quais as alternativas?”
CENÁRIO

4. publicações digitais
Qual formato utilizar para publicação digital?
2.0 | 3.0 Layout Fixo APP HTML5

5. mercado editorial digital

6. pontos fortes dos formatos
APP
Layout Fixo
Interatividade/
InDesign
EBOOK
Layout Fluido
Interatividade/
HTML
PDF
Layout Fixo
Sem Interatividade/
Mobile

7. ebooks | leitura digital

8. ebooks | leitura digital

9. ebooks | conteúdo responsivo

10. ebooks | leitores
Onde posso ler
os eBooks?

11. Leitores para desktop - pc / mac
Adobe Digital
Edition
Adobe Digital
Edition
Kindle ReaderReadium
Aplicativos de leitura - iOS / Android
iBooks Gitden Kobo
iBooks
ebooks | leitores

12. EREADERS
Motores de Visualização - Adobe
Motores de Visualização - Amazon/Kindle
ebooks | leitores

13. ebooks | DRM (Digital Right Management)

14. Onde posso
distribuir /
vender os
eBooks?

15. ebooks | distribuição
Fechado
Semi-aberto
Aberto
Site da Editora/Empresa
Agregadores
Email

16. ebooks | DRM (Digital Right Management)

17. ebooks | resumo
• PUBLICAÇÃO RESPONSIVA.
• Anotações.
• Ajuste do tamanho da fonte.
• Portabilidade e operação
multiplataforma.
• Formato de código aberto.
• Proteção contra cópias com
uso de DRM (opcional).
Benefícios Desafios
• INSTABILIDADE DAS
PLATAFORMAS E
LEITURA
• Otimização do conteúdo
para plataformas/
leitores

18. ebooks | etapas de produçãoO Trabalhoso
» Reedição dos textos.
» Exportar as imagens.
» Rediagramação.
ESTILOS
» Marcação do
conteúdo com Estilos
DESIGN
» Ajustes de layout
» Sumário, Divisão, etc
TESTES
» Mobile-first
» Em telas de formatos/
plataformas diferentes
VALIDAÇÃO
» EPUB-Checker (IDPF)
» Online até 10 MB
» Offline acima de 10 MB
DISTRIBUIÇÃO
» Site / Lojas
» Livre ou Protegido
(DRM)
O Amador
» Conversões simples.
» Muito genérico.
» Funciona como
bilioteca.
O Técnico
» Edição no código.
» Poucos recursos
automáticos.
» Sumário, notas,
Divisões.
O Expert
» Edição direta do ePUB
» Gratuito
» Muitos recursos
O Profissional
» Marcação do texto.
» Produção do ePUB
para validação.
» Aplica muitas
marcações no código.
5dualpixel | www.dualpixel.com.br

19. ebooks | dicas de produção
2 - EPUB 3 - COMO PRODUZIR?
O Trabalhoso
» Reedição dos textos.
» Exportar as imagens.
» Rediagramação.
O Amador
» Conversões simples.
» Muito genérico.
» Funciona como
bilioteca.
O Técnico
» Edição no código.
» Poucos recursos
automáticos.
» Sumário, notas,
Divisões.
O Expert
» Edição direta do ePUB
» Gratuito
» Muitos recursos
O Profissional
» Marcação do texto.
» Produção do ePUB
para validação.
» Aplica muitas
marcações no código.

20. ebooks | dicas de produção
» Controlar a posição das imagens através dos estilos de
parágrafo.
» Controlar a posição dos objetos através dos estilos de objetos.
» Utilizar imagens entre 600 a 1200 pixels de largura com 150 ppi.
» Exportar para o formato ePUB com a opção de otimização
automática de imagens. Mantenha também sempre habilitada a
opção Em relação à página / Relação ao fluxo do texto
» Imagens com transparência devem utilizar o formato PNG
UNIDADES
DE MEDIDA
Porcentagem
» Largura das imagens
e objetos
» Margem das páginas
(eBook)
EM
» Tamanho das fontes
» Margem entre
parágrafo
Pixel
» Margem entre
parágrafos (até 30px)
Viewport Height
» Altura de imagens e
objetos
11dualpixel | www.dualpixel.com.br
» Controlar a posição das imagens através dos estilos de
parágrafo.
» Controlar a posição dos objetos através dos estilos de objetos.
» Utilizar imagens entre 600 a 1200 pixels de largura com 150 ppi.
» Exportar para o formato ePUB com a opção de otimização
automática de imagens. Mantenha também sempre habilitada a
opção Em relação à página / Relação ao fluxo do texto
» Imagens com transparência devem utilizar o formato PNG
UNIDADES
DE MEDIDA
Porcentagem
» Largura das imagens
e objetos
» Margem das páginas
(eBook)
EM
» Tamanho das fontes
» Margem entre
parágrafo
Pixel
» Margem entre
parágrafos (até 30px)
Viewport Height
» Altura de imagens e
objetos
11dualpixel | www.dualpixel.com.br
» Controlar a posição das imagens através dos estilos de
parágrafo.
» Controlar a posição dos objetos através dos estilos de objetos.
» Utilizar imagens entre 600 a 1200 pixels de largura com 150 ppi.
» Exportar para o formato ePUB com a opção de otimização
automática de imagens. Mantenha também sempre habilitada a
opção Em relação à página / Relação ao fluxo do texto
» Imagens com transparência devem utilizar o formato PNG
UNIDADES
DE MEDIDA
Porcentagem
» Largura das imagens
e objetos
» Margem das páginas
(eBook)
EM
» Tamanho das fontes
» Margem entre
parágrafo
Pixel
» Margem entre
parágrafos (até 30px)
Viewport Height
» Altura de imagens e
objetos
11dualpixel | www.dualpixel.com.br

21. ebooks | dicas de produção

22. ebooks | dicas de produção

23. INTERATIVIDADE - EPUB FLUIDO
zoom /
tela cheia
slideshow image
sequence
panorama
scrollable
frame
Navegação
web
content
hyperlink áudio
vídeo

24. INTERATIVIDADE - EPUB FLUIDO
CSS 3 - animação
Javascript
MathML
Media Overlay

25. INTERATIVIDADE - EPUB FIXO
zoom /
tela cheia
slideshow image
sequence
panorama
scrollable
frame
Navegação
web
content
hyperlink áudio
vídeo

26. INTERATIVIDADE - EPUB FIXO

27. zoom /
tela cheia
slideshow image
sequence
panorama
scrollable
frame
Navegação
web
content
hyperlink áudio
vídeo
INTERATIVIDADE - APP

28. Aplicativos

29. Tipos de APP
Revista Continente Instituto Ciência Hoje Evolve
APP BANCA
Periódicos
APP ÚNICO
Livros, Catálogos
WEBAPP
Comunicação Interna

30. APPS | banca de edições

31. publicações digitais - impressos x sites
Mobile
IMPRESSO WEB

35. Reaproveite
habilidades
Designers continuarão a
trabalhar em softwares como
o Adobe InDesign para a
criação da edição digital.
COMO FUNCIONA

36. APPS | hub de conteúdoAPLICATIVO
CENTRALIZADOR
DE CONTEÚDOS
Material
Didático
Ambiente
Virtual
InDesign
PDF
HTML
Vídeos
Fórum
Quiz
Chat
OFFLINE
ONLINE

37. publicações digitais | Plugins / apps

38. publique!
Adobe Content Viewer
Compartilhe
etapaum:ProduçãodoFolio
InDesign DPS Tools
LAYOUT
Muse
Photoshop Illustrator
Dreamweaver Edge Animate
Premiere Pro After Effects Media EncoderPrepare imagens para slideshows,
sequences, botões e iconografia para
a página de “Como Usar” e importe
tudo para o InDesign.
Utilize ferramentas de edição para criar videos com
efeitos especiais de alto impacto ideias para aplicação
em capas. Otimize o formato final do video para mobile.
Crie animações em HTML5, formulários e interatividade
com HTML, CSS e JavaScript para
enriquecer sua publicação.
Utilize a opção Share Folio
para compartilhar o projeto
com o tablet do cliente.
Visualize a publicação direto no
device usando o app Adobe Content
Viewer, a partir do InDesign.
Produza o layout em formato para tablet e adicione
os recursos interativos do Folio Overlay.
Empacote tudo no formato Folio pelo painel Folio
Builder com sua conta DPS.
APP ToolS

39. Interatividade

41. zoom /
tela cheia
slideshow image
sequence
panorama
scrollable
frame
Navegação
web
content
hyperlink áudio
vídeo
INTERATIVIDADE - APP

42. publicações digitais | InDesign
Boas práticas - Formato ideal
SMARTPHONES
SOMENTE VERTICAL
• 320 x 568 pixels
TABLETS
VERTICAL OU/E HORIZONTAL
• 768 x 1024 pixels
SMARTPHONES
SOMENTE VERTICAL
• 320 x 568 pixels
TABLETS
VERTICAL OU/E HORIZONTAL
• 768 x 1024 pixels

43. publicações digitais | InDesign

44. Material didático / Publicações
APP EDITORIAL

45. ebooks | leitor personalizado
• Estabilidade na entrega
do conteúdo (Apple/
Android)
• RELATÓRIOS de uso/
download
• Envio de NOTIFICAÇÕES
• Mais recursos
interativos

46. app editorial
Foco no layout/conteúdo
2 formatos TODOS Plataformas
Interatividade avançada
Recursos em HTML (Adobe Muse)
Objetos Educacionais (Edge Animate)
Designer Gráfico

50. RELATÓRIOS

51. Exemplos

54. HTML/Apps

57. APP ONLINE | HTML 5
22º CIAED

58. dualpixel - produção de apps editoriais
Mitos das
Publicações
Digitais

59. É preciso
c o n h e c e r
PROGRAMAÇÃO
#1

60. É PRECISO CONHECER
PROGRAMAÇÃO?
NÃO
Crie sua publicação no
ADOBE INDESIGN sem
editar uma linha de código.
é preciso conhecer programação

61. Não há como
BUSCAR textos
dentro das edições
#2
A pesquisa de texto está disponível para
cada edição, via menu superior.

62. Publicações
são para APPS
#3
Publique na web (desktops)
usando o mesmo arquivo
do InDesign, com todos os
recursos interativos.

63. Apps são
GRATUITOS
#4

64. 3 modalidades de venda / monetização
Venda avulsa das edições.
Venda de assinatura direto com a
empresa (via login/senha).

65. 3 modalidades de venda / monetização
Venda do Aplicativo.

66. Preciso
estar sempre
CONECTADO
#5
Aplicativos permitem acesso
OFFLINE ao conteúdo já
baixado.

67. APPS | resumo
• LEITOR PERSONALIZADO
• Venda Avulsa/Assinatura
• Banca de Edições
• Anotações.
• Ajuste do tamanho da fonte.
Benefícios Desafios
• PARCEIRO/PLATAFORMA
PARA PUBLICAÇÃO
• Distribuição com
foco no mobile -
APP STORES
Layout Fluido
Responsivo
Layout Fixo
Tablet/Phone

68. APPS | Experiência de leitura

69. Foco no usuário
LAyout Fluido
APP
Persona­
lizado
LAyout Fluido
LAyout Fixo
1
2
3

70. e se for para escolher...
PUBLICAÇAO DIGITAL
LAYOUT FIXOInDesign
Publish Online
ePUB FXL
APP
Phone
Tablet
PDF
LAYOUT RESPONSIVO
HTML
Adobe Muse
InDesign
ePUB Fluido
HTML

71. ebooks | fluxo de conteúdo
PUBLICAÇÕES
PÁGINAS

72. PUBLICAÇÕES
NAVEGAÇÃO“T”
ebooks | fluxo de conteúdo

73. ebooks | fluxo de conteúdo
PUBLICAÇÕES
SLIDE

74. ebooks | fluxo de conteúdo
PUBLICAÇÕES | WEB
GRID

75. ebooks | fluxo de conteúdo
PUBLICAÇÕES | WEB
ROLO

76. ebooks | fluxo de conteúdo
WEB
ESPINHA

77. Digital não é subproduto...
Digital first

78. Perguntas?
Tel. (21) 2042-0922 | felipesantos@dualpixel.com.br
www.dualpixel.com.br
dualpixel dualpixel.cursos pixelaula