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

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

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

34.
publicações digitais | Plugins / apps

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

36.
Interatividade

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

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

39.
publicações digitais | InDesign

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

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

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

43.
RELATÓRIOS

44.
Exemplos

45.
HTML/Apps

46.
APP ONLINE | HTML 5
22º CIAED

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

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

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

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

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

52.
Apps são
GRATUITOS
#4

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

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

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

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

57.
APPS | Experiência de leitura

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

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

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

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

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

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

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

65.
ebooks | fluxo de conteúdo
WEB
ESPINHA

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

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