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

PDF

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

Email

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.



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









UNIDADES

DE MEDIDA


e objetos







objetos









UNIDADES

DE MEDIDA


e objetos







objetos




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


panorama

scrollable frame

Navegação

web content

hyperlink áudio

vídeo

INTERATIVIDADE - EPUB FIXO

zoom / tela cheia


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


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

PDF

LAYOUT RESPONSIVO

HTML

Adobe Muse

InDesign

ePUB Fluido

HTML

ebooks | fluxo de conteúdo

PUBLICAÇÕES

PÁGINAS

PUBLICAÇÕES

NAVEGAÇÃO “T”



PUBLICAÇÕES

SLIDE


PUBLICAÇÕES | WEB

GRID


PUBLICAÇÕES | WEB

ROLO


WEB

ESPINHA

Digital não é subproduto...

Digital first

Perguntas?

Tel. (21) 2042-0922 | [email protected]

dualpixel dualpixel.cursos pixelaula

Education

Publicações Digitais. Qual Solução Escolher? eBooks ou APPs