e-books e grids adaptativas (design responsive)

65

Upload: ludimila-martins

Post on 15-Dec-2014

138 views

Category:

Design


3 download

DESCRIPTION

Apresentação realizada durante seminário na disciplina Design Digital, do curso de Design Gráfico, ministrada pelo professor Wilson Leite. Goiânia, 06 de maio de 2014.

TRANSCRIPT

Page 1: E-books e Grids Adaptativas (Design Responsive)
Page 2: E-books e Grids Adaptativas (Design Responsive)

O Design editorial é uma especialidade do Design Gráfico que realiza todo o projeto de editoração podendo atuar diretamente na parte do projeto visual, da diagramação e ilustração.

Page 3: E-books e Grids Adaptativas (Design Responsive)

Podemos dizer que os primeiros designers de livros foram os escribas egípcios, que redigiam seus textos em colunas e já faziam uso da ilustração.

Page 4: E-books e Grids Adaptativas (Design Responsive)

A data exata sobre a invenção da imprensa é controversa, Johannes Gutemberg ganhou o título de “pai da impressão” em 1455. Porém,tipos móveis fundidos em molde de areia já tinham sido usados na Coréia em 1241

Page 5: E-books e Grids Adaptativas (Design Responsive)

Porém, não há duvidas que o processo de impressão de livros revolucionou o mercado, ele permitiu que

uma única pessoa pudesse reproduzir inúmeras edições, o livro impresso industrializou a produção

da linguagem tornando-os mais disponíveis e economicamente acessíveis.

Page 6: E-books e Grids Adaptativas (Design Responsive)

Mas, o que é um livro?

Page 7: E-books e Grids Adaptativas (Design Responsive)

a) De acordo com o dicionário Houaiss é: “coleção de folhas de papel, impressas ou não, cortadas, dobradas e reunidas em cadernos cujos dorsos são unidos por meio de cola, costura, etc, formando um volume que se recobre com capa resistente”

Page 8: E-books e Grids Adaptativas (Design Responsive)

a) De acordo com o dicionário Houaiss é: “coleção de folhas de papel, impressas ou não, cortadas, dobradas e reunidas em cadernos cujos dorsos são unidos por meio de cola, costura, etc, formando um volume que se recobre com capa resistente”

b) “...uma mensagem escrita(ou impressa) de tamanho considerável, destinada à circulação pública e registrada em materiais leves, porém duráveis o bastante para oferecerem uma relativa portabilidade”

Page 9: E-books e Grids Adaptativas (Design Responsive)

a) De acordo com o dicionário Houaiss é: “coleção de folhas de papel, impressas ou não, cortadas, dobradas e reunidas em cadernos cujos dorsos são unidos por meio de cola, costura, etc, formando um volume que se recobre com capa resistente”

b) “...uma mensagem escrita(ou impressa) de tamanho considerável, destinada à circulação pública e registrada em materiais leves, porém duráveis o bastante para oferecerem uma relativa portabilidade”

c) “Composição literária que preenche um conjunto de folhas”

Page 10: E-books e Grids Adaptativas (Design Responsive)

a) De acordo com o dicionário Houaiss é: “coleção de folhas de papel, impressas ou não, cortadas, dobradas e reunidas em cadernos cujos dorsos são unidos por meio de cola, costura, etc, formando um volume que se recobre com capa resistente”

b) “...uma mensagem escrita(ou impressa) de tamanho considerável, destinada à circulação pública e registrada em materiais leves, porém duráveis o bastante para oferecerem uma relativa portabilidade”

c) “Composição literária que preenche um conjunto de folhas”

d) UNESCO (1950): “uma publicação literária não periódica contendo mais de 48 páginas, sem contar as capas.”

Page 11: E-books e Grids Adaptativas (Design Responsive)

Livros interativos – aqueles que promovem uma interação além da leitura.

Page 12: E-books e Grids Adaptativas (Design Responsive)
Page 13: E-books e Grids Adaptativas (Design Responsive)
Page 14: E-books e Grids Adaptativas (Design Responsive)

E qual é a função do designer?

Page 15: E-books e Grids Adaptativas (Design Responsive)

Na produção de um livro o designer é responsável pelo projeto da natureza física do livro, seu visual e forma de apresentação, além de cuidar do posicionamento de todos os elementos na página. Em suma, o designer cria um conceito e dentro disso: seleciona o formato, decide o acabamento, planeja grid, tipografia, layout.

Page 16: E-books e Grids Adaptativas (Design Responsive)

Formato - um livro ser projetado qualquer formato e tamanho de acordo com o conceito, para que seja conveniente à leitura, manuseio, ou não, além de ser economicamente viável.

Page 17: E-books e Grids Adaptativas (Design Responsive)

Livro do escultor Andy Goldsworthy, Touching North (1989)

Page 18: E-books e Grids Adaptativas (Design Responsive)

Witch Zelda’s Birthday Cake de Eva Tatcheva

Page 19: E-books e Grids Adaptativas (Design Responsive)

Tipo e imagem

Page 20: E-books e Grids Adaptativas (Design Responsive)
Page 21: E-books e Grids Adaptativas (Design Responsive)
Page 22: E-books e Grids Adaptativas (Design Responsive)
Page 23: E-books e Grids Adaptativas (Design Responsive)
Page 24: E-books e Grids Adaptativas (Design Responsive)

Grid – a grid define as proporções externas e divisões internas do livro, o que proporciona uma consistência ao livro tornando-o coerente em toda sua forma.

Page 25: E-books e Grids Adaptativas (Design Responsive)

Simétricos ou assimétricos

Page 26: E-books e Grids Adaptativas (Design Responsive)

Baseados na geometria

Page 27: E-books e Grids Adaptativas (Design Responsive)

Baseados em medidas

Page 28: E-books e Grids Adaptativas (Design Responsive)

Grid modernista - possui uma grade sistemática nas quais todos os elementos como texto e imagem são determinados por uma estrutura racional.

Page 29: E-books e Grids Adaptativas (Design Responsive)

Grid modernista - possui uma grade sistemática nas quais todos os elementos como texto e imagem são determinados por uma estrutura racional.

Page 30: E-books e Grids Adaptativas (Design Responsive)

Livros sem grid

Page 31: E-books e Grids Adaptativas (Design Responsive)

Livros sem grid

Page 32: E-books e Grids Adaptativas (Design Responsive)

E-book - Conceitos e Definições

E-book, ou ebook (grafada sem prejuízos ao significado), é a abreviatura do termo inglês eletronic book, que no português significa livro eletrônico ou livro digital. Assim como o e-mail é considerado a versão eletrônica da carta, o e-book é a versão eletrônica do livro. O livro eletrônico pode ser a versão de um livro físico, ou uma publicação unicamente eletrônica.

Anuradha e Usha (2006), em uma ideia restrita, definiram o e-book como um termo usado para descrever um texto semelhante a um livro que, em formato digital, possa ser exibido em um computador ou equipamento portátil (hardware).

Já Lynch(2001) aborda o assunto de forma mais ampla, define livro eletrônico como um conjunto de bits que pode ser transportado por mídia eletrônica ou entregue via rede e desenhado para ser visto em uma combinação de software e hardware, e que existem independentemente dos mecanismos que podem ser usados para acessá-los ou lê-los.

Page 33: E-books e Grids Adaptativas (Design Responsive)

Alguns autores indicam a origem do livro eletrônico como uma data conturbada, porém segundo Burk (2001) e Lourenço (2004), os primeiros arquétipos foram disponibilizados por Michael Hart de forma gratuita, Hart é fundador do projeto Gutember, o projeto digitalizou vários livros impressos para o domínio público, processo que acabou resultando na origem do termo e-book.

O dicionário Oxford define e-book como “a versão eletrônica de um livro impresso”, porém esse conceito acaba sendo muito restrito no atual cenário de produção dos livros digitais. Ao longo do tempo os e-books começaram a agregar novos suportes de conteúdo, considerando ferramentas de áudio, vídeo e interatividade. Além de se tornar cada vez mais independente, como são os casos de e-books que nunca tiveram uma versão publicada no formato do livro tradicional.

Page 34: E-books e Grids Adaptativas (Design Responsive)

Formatos e Dispositivos de Leitura

Atualmente os principais formatos de e-book que encontramos são o Epub, arquivos em padrões abertos como o html, xml e css, o pdf, Mobi/AZW - formato utilizado pela Amazon para o kindle-, há também formatos como o FB2 e o CHM.

O epub, que é a abreviação para Eletronic Publication, ou em sua tradução Publicação Eletrônica, e se trata de um arquivo digital de formato livro e aberto. Esse formato foi criado pelo IDPF - International Digital Publishing Forum, que é basicamente uma coleção de documentos de texto nos formatos XHTML e XML, que são compactados em um formato zip. Inicialmente, esse padrão foi desenvolvido com o objetivo de funcionar como um formato oficialmente exclusivo para a distribuição e venda dos ebook, e no mercado editorial vem tendo grande aceitação.

Page 35: E-books e Grids Adaptativas (Design Responsive)

Procópio (2010) afirma que “o formato mais convergente, mais padrão apesar de algumas questões, sem dúvida alguma, é o formato EPUB.” Porém apenas em sua nova versão 3.0, foi que esse formato começou a permitir a utilização de recursos de áudio, vídeo e animação, e mesmo assim, quado se trata de interface existem muitas coisas para melhorar, além dos softwares precisarem de ajustes para reconhecer tais recursos.

Page 36: E-books e Grids Adaptativas (Design Responsive)

Dispositivos

Softbook

Rocket book

Sony Reader

Page 37: E-books e Grids Adaptativas (Design Responsive)

Dispositivos

Cybook Gen3

iPad

Kindle DX

Page 38: E-books e Grids Adaptativas (Design Responsive)

Tecnologia:

E-ink (eletronic ink)

Page 39: E-books e Grids Adaptativas (Design Responsive)

Formatos x Dispositivos:

Tablets PDF ePUB Flash Folio

iPad X X X

Android 3.0 X X X X

Kindle Fire X X X X

E-Ink PDF ePUB Flash Folio

Kindle X X

Nook X X

Celular PDF ePUB Flash Folio

Iphone X X X

Android Phone X X X

Page 40: E-books e Grids Adaptativas (Design Responsive)

Software

Page 41: E-books e Grids Adaptativas (Design Responsive)

Benefícios do ePUB:

Formato flexível ao tipo de leitor;Hyperlinks e Notas de rodapé;Portabilidade;Imagens, tabelas auto-ajustáveis;Vídeo e Aúdio;Formatação acessíveis;Fácil atualização de conteúdo;Menor custo (sem royalties);Maior rede de distribuição.

Page 42: E-books e Grids Adaptativas (Design Responsive)

Mercado:

Inicialmente os e-books encontraram certas resistências no Brasil. Nosso país ainda tem um acesso quase restrito a literatura, tanto os livro, quanto os e-books possuem um preço elevado, e a cultura tecnológica não era tão popular, eram poucos que tinham acesso a tecnologia.

Fechado

O mercado fechado são grandes empresas de tecnologia que concentram a distribuição do conteúdo por meio de seus dispositivos de leitura (Amazon, Google Books, iBooks). Permite a venda direta dos autores e apresenta pouca flexibilidade para negociação com editoras.

Page 43: E-books e Grids Adaptativas (Design Responsive)

Semi-aberto

Livrarias e editoras baseadas na distribuição pelo Adobe Content Server – DRM. Pouco atrativo para autores e apresenta certas limitações.

Aberto

Independentes de plataformas com características de distribuição sem DRM. Permite a venda direta dos autores e apresenta pouca flexibilidade para negociações com editoras.

ex.: Pottermore, O’Reilly.

Page 44: E-books e Grids Adaptativas (Design Responsive)

Qual o papel do design na produção dos e-books?

Segundo Rodrigues (2011), "O designer de eBooks está se tornando uma nova profissão. Nos Estados Unidos é uma profissão extremamente necessária. No Brasil é algo que possivelmente venha a ser solicitado em breve."

Quando Rodrigues afirma que esse novo profissional, o designer de ebooks, será solicitado em breve é em decorrência que no atual cenário de produção dos livros digitais o que vem ocorrendo é a migração de designers que até o momento estavam ligados somente ao meio de produção impressa para esse novo tipo de produção. Esse profissional acaba tendo que assumir as responsabilidades de um programador, para assim conseguir se inserir nesse novo tipo de mercado literário, é com o aperfeiçoamento de designers na área de programação digital que surge esse novo profissional, o designer de ebooks.

Page 45: E-books e Grids Adaptativas (Design Responsive)

Rodrigues (2011) volta a afirmar que “Quem faz parte dessa profissão são aqueles que estão no mercado editorial e passam a se voltar para as linguagens CSS, HTML ou então os web designers que passam a entender um pouco mais do mercado editorial.”.

É com o uso da linguagem hipermidiática que o e-book busca o design como uma ferramenta de criação da interação entre usuário e interface que conquiste o interesse dele pela leitura, que torne agradável essa experiência.

Page 46: E-books e Grids Adaptativas (Design Responsive)

E-book interativo

Existem classificações entre os e-books, há aqueles que são considerados como tradicionais, que fazem uso somente dos artifícios que podem ser aplicados em livros físicos. E os e-books interativos, esses utilizam recursos de hipermídia como vídeo, áudio, games, quizzes, imagens, animações e outros.

Artifícios de interação, que não leva grandes experiências ao interator, no atual contexto de produção dos livros digitais acabam se tornando indiferentes, muita coisa já evoluiu e para que essa experimentação seja satisfatória é necessário que o digital ofereça recursos que não seriam possíveis com o livro.

Page 47: E-books e Grids Adaptativas (Design Responsive)

A estrutura de um e-book interativo não é tão semelhante a sua forma tradicional, o projetista desse formato precisa se preocupar com o comportamento do interator, pensando que o e-book pose se reinventar a cada nova “página”, o leitor irá descobrir e absorver por conta própria as informações propostas para ele.

Atualmente a maioria dos livros interativos com recursos altamente avançados foram desenvolvidos no formato de aplicativo e voltados somente para um certo dispositivo de leitura. Isso acontece porque tais produtos requer altos investimentos, é necessário uma ampla equipe de profissionais especializados nas mais diversas áreas que englobam a produção de um e-book interativo, toda essa equipe precisa trabalhar em conjunto para desenvolver interações satisfatórias.

https://www.youtube.com/watch?v=_c9dYmXxw2chttps://www.youtube.com/watch?v=r8kfEeNdE7U

Page 50: E-books e Grids Adaptativas (Design Responsive)

E-book infantil

O e-book infantil é diferente e um pouco mais complexo do que outras publicações da mesma natureza. Essa complexidade é consequência do público alvo, para conquistar o público infantil um livro digital requer todo um conjunto de recursos como funcionalidade de imagens, animações e interatividade que se mantenham atuais para conservar a atenção do usuário.

As crianças são consumidores em potencial, porém ainda é um público não muito explorado pelo mercado editorial, e são vários os obstáculos enfrentados, como resistência dos pais, a atmosfera cultural criada em ambientes de venda dos livros, e nesse caso mais especifico a falta de investimento.

A criação de um e-book que supra todas as necessidades de uma criança requer muita pesquisa, investigação de temas e ideias, e a forma como essas ideias serão aplicadas. É necessário um investimento muito alto, e que pode resultar em um retorno não muito lucrativo.

Page 51: E-books e Grids Adaptativas (Design Responsive)

Por enquanto, os títulos encontrados não são uma grande novidade, na maioria dos casos são adaptações de clássicos populares, que aos poucos vão apresentando novas funcionalidades. É um mercado ainda tímido, mas que a longo prazo pode resultar em melhorias significativas no aprendizado e desenvolvimento das crianças.

https://www.youtube.com/watch?v=6RL76JyEj8M

https://www.youtube.com/watch?v=YFdfoe0A6Mk

https://www.youtube.com/watch?v=1GVPOCCnAfchttps://www.youtube.com/watch?v=CysfZOzFTEkhttps://www.youtube.com/watch?v=0jBqLacBaFc

Page 57: E-books e Grids Adaptativas (Design Responsive)

Grids Adaptativas (Design Responsive)

Page 58: E-books e Grids Adaptativas (Design Responsive)

Ethan Marcotte, em 2010 publica o artigo "Responsive Web Design" no blog A List Apart. Nesse artigo as ideias do arquiteto Christopher Wren são apresetadas, Wren acredita que a arquitetura tem um próposito eterno, e que uma prédio deve ser construído para ser admirado e hábitado por séculos. E por que isso não pode ser aplicado também no Design Digital? O que é projetado na internet acaba se tornando obsoleto em um intervalo de tempo muito pequeno.O problema só cresceu mais ainda com a difusão dos dispositivos móveis. É impossível imaginar que certo conteúdo será acessado pelos mesmos modelos de aparelhos, com mesmos sistemas operacionais, browsers, resoluções de tela, e outros tipos de configurações. O Design Responsivo começa então, a se tornar a resolução para esse problema.

Page 59: E-books e Grids Adaptativas (Design Responsive)

E foi isso que Marcotte propôs, um design que tenha respostas diferentes quando acessados por dispositivos diferentes. Que se adeqüe da melhor forma em telas de tamanhos diferentes, e que para isso não seja necessário a criação de um site para desktop e outro para mobile.O design responsivo não é apontado como a resposta conclusiva para esses problemas, na verdade, existem muitas discussões ao redor do tema. Até porque ele não responde todos os questionamentos, porém é um caminho que deve ser explorado, testado e remodelado.

Page 60: E-books e Grids Adaptativas (Design Responsive)
Page 61: E-books e Grids Adaptativas (Design Responsive)

E como as grids adaptativas funcionam?

O CSS3 possue uma propriedade chamada media queries que identifica o tipo de dispositivo utilizado no acesso e direciona o usuário a determinado formato de tela. Os formatos de tela passam por adaptações de tamanho, orientação, resolução, proporção, etc. Tudo para que as informações sejam visualizadas da forma mais agradável e organizada no dispositivo.As media queries não são a única ferramenta utilizada no desenvolvimento de plataformas que seguem as ideias do design responsivo, porém é a ferramenta de maior abrangência e utilização atualmente.

Page 62: E-books e Grids Adaptativas (Design Responsive)
Page 63: E-books e Grids Adaptativas (Design Responsive)
Page 64: E-books e Grids Adaptativas (Design Responsive)

DEBATES

1. Qual sua posição quanto a disputa livro x e-book?

2. Muita coisa mudou no mercado dos livros digitais, hoje e-books são mais acessíveis que antes, porém eles ainda não se popularizaram, por que?

Page 65: E-books e Grids Adaptativas (Design Responsive)

Referências

● http://www.significados.com.br/ebook/● http://www.tecmundo.com.br/educacao/1519-o-que-e-e-book-.htm● http://pt.wikipedia.org/wiki/Livro_digital● http://sautlink.com/pequenos-leitores-digitais/● http://pt.slideshare.net/marciom10/ebook-desvendando-os-livros-feitos-de-pixels● http://lerebooks.wordpress.com/2012/04/16/ebooks-interativos-leitura-e-aprendizagem/● http://sautlink.com/e-books-interativos-uma-nova-forma-de-interagir-com-seus-clientes/● http://pt.slideshare.net/stelladauer/entenda-o-livro-digital● PROCÓPIO, Ednei. O livro na era digital. São Paulo: Giz Editorial, 2010.● RODRIGUES, Stela Maris Dauer. Workshop Como Produzir E-books no Formato

ePub. Informação verbal. Texto não publicado. São Paulo: Simplíssimo, 2011.● STUMPF, Alexsandro; GONÇALVES, Berenice Santos. O design do livro digital interativo: uma análise

sobre a atuação dos profissionais envolvidos na produção do livro 'A menina do narizinho arrebitado' para leitura em dispositivos tablet. Santa Cataria. 2012

● http://www.princiweb.com.br/blog/front-end/css/o-que-e-design-responsivo.html● http://blog.popupdesign.com.br/design-responsivo-i-o-que-e-e-por-que-usar/● http://www.midiatismo.com.br/o-mobile/design-responsivo-entenda-o-que-e-a-tecnica-e-como-ela-funciona● http://www.finalizart.com/o-mundo-do-design/718-21-exemplos-de-web-design-responsivo