Publicações Digitais. Qual Solução Escolher? eBooks ou APPs
Transcript of Publicações Digitais. Qual Solução Escolher? eBooks ou APPs
Publicações Digitais Interativas. Qual solução escolher? eBooks ou Apps
felipe santos
designer gráfico
Pós | Design estratégico
Treinamento adobe | 1998
Publicação digital | 2011
“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
publicações digitais
Qual formato utilizar para publicação digital?
2.0 | 3.0 Layout Fixo APP HTML5
mercado editorial digital
pontos fortes dos formatos
APP
Layout Fixo
Interatividade/InDesign
EBOOK
Layout Fluido
Interatividade/ HTML
Layout Fixo
Sem Interatividade/Mobile
ebooks | leitura digital
ebooks | leitura digital
ebooks | conteúdo responsivo
ebooks | leitores
Onde posso ler os eBooks?
Leitores para desktop - pc / mac
Adobe Digital Edition
Adobe Digital Edition
Kindle ReaderReadium
Aplicativos de leitura - iOS / Android
iBooks Gitden Kobo
iBooks
ebooks | leitores
EREADERS
Motores de Visualização - Adobe
Motores de Visualização - Amazon/Kindle
ebooks | leitores
ebooks | DRM (Digital Right Management)
Onde posso distribuir / vender os eBooks?
ebooks | distribuição
Fechado
Semi-aberto
AbertoSite da Editora/Empresa
Agregadores
ebooks | DRM (Digital Right Management)
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
ebooks | etapas de produção
2 - EPUB 3 - COMO PRODUZIR?
O 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
ebooks | dicas de produção
2 - EPUB 3 - COMO PRODUZIR?
O 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
ebooks | dicas de produção
3 - Formatação de imagens e Vetores » Criar imagens para Capa num arquivo à parte com 1000 px de altura e 150 ppi (largura proporcional).
» Inserir imagens como objetos INLINE.
» 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
3 - Formatação de imagens e Vetores » Criar imagens para Capa num arquivo à parte com 1000 px de altura e 150 ppi (largura proporcional).
» Inserir imagens como objetos INLINE.
» 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
3 - Formatação de imagens e Vetores » Criar imagens para Capa num arquivo à parte com 1000 px de altura e 150 ppi (largura proporcional).
» Inserir imagens como objetos INLINE.
» 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
ebooks | dicas de produção
ebooks | dicas de produção
INTERATIVIDADE - EPUB FLUIDO
zoom / tela cheia
slideshow image sequence
panorama
scrollable frame
Navegação
web content
hyperlink áudio
vídeo
INTERATIVIDADE - EPUB FLUIDO
CSS 3 - animaçãoJavascriptMathML
Media Overlay
INTERATIVIDADE - EPUB FIXO
zoom / tela cheia
slideshow image sequence
panorama
scrollable frame
Navegação
web content
hyperlink áudio
vídeo
INTERATIVIDADE - EPUB FIXO
zoom / tela cheia
slideshow image sequence
panorama
scrollable frame
Navegação
web content
hyperlink áudio
vídeo
INTERATIVIDADE - APP
Aplicativos
Tipos de APP
Revista Continente Instituto Ciência Hoje Evolve
APP BANCAPeriódicos
APP ÚNICOLivros, Catálogos
WEBAPPComunicação Interna
APPS | banca de edições
publicações digitais - impressos x sites
Mobile
IMPRESSO WEB
Reaproveite habilidades
Designers continuarão a trabalhar em softwares como o Adobe InDesign para a criação da edição digital.
COMO FUNCIONA
APPS | hub de conteúdoAPLICATIVOCENTRALIZADOR
DE CONTEÚDOS
Material Didático
AmbienteVirtual
InDesignPDF
HTMLVídeos
FórumQuizChat
OFFLINE
ONLINE
publicações digitais | Plugins / apps
Pro
duçã
o do
App
Adobe App Builder
Apple iTunes Connect
Aguarde a aprovação Feedback da Apple
Exporte o IPA
Certi�cados
Exporte o ZIP
Photoshop
publique!
Adobe Content Viewer
Compartilhe
ADOBE DIGITAL PUBLISHING SUITE WORKFLOW
etap
a do
is:
Original: © City Desktop Traininghttp://www.cd.com.auCreated by Bart Van de Wiele
http://www.adobe.com/products/digital-publishing-suite-family.html
OVERVIEW
etap
a um
: Pro
duçã
o do
Folio
InDesign DPS Tools
LAYOUT
Muse
Photoshop Illustrator
Dreamweaver Edge Animate
Premiere Pro After Effects Media Encoder
Parabéns!
Prepare imagens para slideshows, sequences, botões e iconogra�a 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 �nal 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.
Acesse sua conta no Apple Developer Portal para iniciar a produção dos certi�cados através do Keychain do Mac.
Use o arquivo IPA como app de teste da publcação nos
devices cadastrados para tal tarefa. Sincronize o device
pelo iTunes.
Envie esse arquivo para Apple quando estiver satisfeito com o IPA. Use o
utilitário Application Loader para envio do app para aprovação da Apple Crie o app através do utilitário App Builder após reunir todas
as informações necessárias de certi�cados e imagens. Faça o download da versão de Teste (IPA) ou a versão �nal
para distribuição na App Store (ZIP).Crie toda iconogra�a para produção do App, como
icones, Splash Screens e Banners
Com a mesma conta Apple Developer Portal cadastre os metadados do app que serão visualizados na App Store.
Adicione 2 semanas ao deadline do projeto para evitar supresas.
Receba a aprovação da Apple ou orientações do que precisa ser corrigido no app
APP ToolS
Interatividade
zoom / tela cheia
slideshow image sequence
panorama
scrollable frame
Navegação
web content
hyperlink áudio
vídeo
INTERATIVIDADE - APP
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
7Curso InDesign para publicações digitais
Boas práticas - Formato ideal
SMARTPHONES
SOMENTE VERTICAL
• 320 x 568 pixels
TABLETS
VERTICAL OU/E HORIZONTAL
• 768 x 1024 pixels
7Curso InDesign para publicações digitais
publicações digitais | InDesign
Material didático / PublicaçõesAPP EDITORIAL
ebooks | leitor personalizado
• Estabilidade na entrega do conteúdo (Apple/Android)
• RELATÓRIOS de uso/download
• Envio de NOTIFICAÇÕES
• Mais recursos interativos
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
RELATÓRIOS
Exemplos
HTML/Apps
APP ONLINE | HTML 5
22º CIAED
dualpixel - produção de apps editoriais
Mitos das Publicações
Digitais
É precisoc o n h e c e rPROGRAMAÇÃO
#1
É PRECISO CONHECER PROGRAMAÇÃO?
NÃOCrie sua publicação no ADOBE INDESIGN sem editar uma linha de código.
é preciso conhecer programação
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.
Publicações são para APPS
#3
Publique na web (desktops) usando o mesmo arquivo do InDesign, com todos os recursos interativos.
Apps são GRATUITOS
#4
3 modalidades de venda / monetização
> Venda avulsa das edições.
> Venda de assinatura direto com a empresa (via login/senha).
3 modalidades de venda / monetização
> Venda do Aplicativo.
Precisoestar sempre CONECTADO
#5
Aplicativos permitem acesso OFFLINE ao conteúdo já baixado.
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 FluidoResponsivo
Layout FixoTablet/Phone
APPS | Experiência de leitura
Foco no usuário
LAyout Fluido
APPPersona-lizado
LAyout Fluido
LAyout Fixo
1
2
3
e se for para escolher...
PUBLICAÇAO DIGITAL
LAYOUT FIXOInDesign
Publish Online
ePUB FXL
APP
Phone
Tablet
LAYOUT RESPONSIVO
HTML
Adobe Muse
InDesign
ePUB Fluido
HTML
ebooks | fluxo de conteúdo
PUBLICAÇÕES
PÁGINAS
PUBLICAÇÕES
NAVEGAÇÃO “T”
ebooks | fluxo de conteúdo
ebooks | fluxo de conteúdo
PUBLICAÇÕES
SLIDE
ebooks | fluxo de conteúdo
PUBLICAÇÕES | WEB
GRID
ebooks | fluxo de conteúdo
PUBLICAÇÕES | WEB
ROLO
ebooks | fluxo de conteúdo
WEB
ESPINHA
Digital não é subproduto...
Digital first