GRA1350 DESIGN DIGITAL GR0634211 - 202110 ead-14892 01 pdf TT

Prévia do material em texto

09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_67112... 1/39
DESIGN DIGITALDESIGN DIGITAL
DESENVOLVIMENTO DEDESENVOLVIMENTO DE
PROJETOS DIGITAISPROJETOS DIGITAIS
CONTEMPORÂNEOSCONTEMPORÂNEOS
Autor: Me. Leandro Cardoso
Revisor :  Amanda de Br i t to Murt inho
I N I C I A R
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_67112... 2/39
introdução
Introdução
Neste material será abordado o tema da codi�cação em frameworks, a técnica
e a documentação necessária para desenvolver a codi�cação de frameworks,
além de seus componentes mais comuns, assuntos de extrema relevância,
principalmente para projetos de médio e grande porte. Os conceitos de
cultura da convergência de Henry Jenkins e de transmídia e crossmídia serão
apresentados para assim tentarmos compreender as pessoas, a cultura e
aplicar nos projetos digitais. Serão apresentadas técnicas para a construção
de projetos digitais que contemplem e dialoguem com a transmídia e a
crossmídia. Por �m, abordaremos o per�l dos pro�ssionais ideais para
compor o desenvolvimento de um projeto utilizando essas novas maneiras de
comunicação.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_6711... 3/39
Os frameworks disponíveis no mercado possuem documentação para facilitar
a sua codi�cação, tornar mais fácil a manipulação e executar as alterações
necessárias para adaptar ao projeto de design digital que será aplicado. O
pro�ssional de design digital, em conjunto com a equipe de desenvolvimento
de back-end, podem construir o próprio framework.
Codi�cação em Codi�cação em FrameworksFrameworks
Figura 4.1 - Desenvolver o próprio framework é uma solução, quando não é
encontrado o que atenda às necessidades do projeto. 
Fonte: Rawpixel / 123RF.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_6711... 4/39
O desenvolvimento de framework normalmente acontece se, na pesquisa que
foi elaborada, não for constatado nenhum framework que atende ao objetivo
do projeto, também quando se faz necessário o controle total sobre o código
ou realmente existe a necessidade de algo efetivamente menos complicado
ou com quantidade menor de objetos na programação do que os frameworks
disponíveis no mercado.
Desenvolvimento de Codi�icação de
Frameworks
Para desenvolver a codi�cação de frameworks é importante se preocupar com
a organização, principalmente a relacionada à nomenclatura dos códigos que
fazem parte da programação, sempre lembrando de que o objetivo principal
de um framework é que ele possa ser utilizado em outros projetos, então tem
de ser de fácil entendimento para outros pro�ssionais utilizarem e
modi�carem. Dessa forma, os componentes e classes da programação devem
ter a melhor organização e padronização possíveis.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_6711... 5/39
Veja exemplos de padronização de classe de botão: Botão = .button, .botao,
.btn, .bt. Depois de de�nir o padrão, não se deve esquecer de manter a
padronização também nas suas variações. Observe um exemplo no qual foi
padronizado utilizando os caracteres bt para de�nir um botão e, em seguida,
as suas variações: .bt-salvar, .bt-enviar, bt-pesquisar, bt-cancelar, etc. Com
esta organização e padronização, a redundância no pre�xo é criada de uma
maneira natural, conforme o exemplo:  <a href="#" title="salvar" class="bt bt-
salvar">Salvar</a>. Com base nesses fundamentos, a codi�cação do
framework torna-se mais �uida, acompanhando a mesma linha das outras
diferenciações que vierem a aparecer. Por exemplo, se são codi�cações
diferenciais especí�cas do componente de botão ou se é uma variação
genérica, como no modelo a seguir.
/* classe full específica */
<a href="#" title="salvar" class="bt bt-salvar bt-
full">Salvar</a>
/* classe full generica */
<a href="#" title="salvar" class="bt bt-salvar
full">Salvar</a> 
No exemplo acima, o que diferencia a classe especí�ca da classe genérica é
que, na especí�ca, foi necessária a indicação do botão identi�cado em
destaque amarelo como bt, e na genérica, houve uma alteração do framework,
de modo que não foi necessário identi�car este código. Para facilitar a
organização, é recomendável contextualizar para outras classes e seus
devidos pre�xos, conforme apresentado no quadro a seguir.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_6711... 6/39
Quadro 4.1 - Função e sugestão de classes para codi�cação de framework 
Fonte: Elaborado pelo autor.
É importante ressaltar que, para o desenvolvimento de um framework, a
organização das nomenclaturas e o seu emprego correto no código é de
extrema importância. Também não pode esquecer de que o nome utilizado
no componente deve vir como pre�xo das suas diversi�cações. Se acontecer
de uma das variações ser usada para outros componentes, pode-se recorrer a
ela sem pre�xo, por exemplo, full, clear, left, right, error. Mapear as
nomenclaturas e as possibilidades de desdobramentos e opções com a
equipe de desenvolvimento, e não sozinho, minimiza as possibilidades de
erros.
Documentação da Codi�icação de
Framework
Todos os códigos e padrões de um framework devem estar disponíveis em um
único local. Nesse sentido, é importante ressaltar que uma das de�nições de
framework pressupõe que ele possa ser reutilizado e, no desenvolvimento, já
deve ser pensado desta maneira, cujos elementos possam ser reutilizados,
alinhados e harmonizados para outros projetos, e não somente no projeto
que foi pré-desenhado. É importante lembrar também que, se os códigos
Função Sugestão de classes
Botão = .button, .botao, .btn, .bt
Tabela = .table, .tabela, .tbl, .tb
listas = .list, .lista, .group
widgets = .widgets, .wid
títulos = .title, .tit, .tt, .header, .h
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_6711... 7/39
foram criados para resolver somente uma solução de um projeto, não pode
ser considerado um framework mas códigos personalizados para aquele
sistema.
Para deixar disponíveis os códigos, é aconselhável criar uma página web,
apresentando todos os elementos padronizados e a documentação
necessária para que possa ser reutilizados. Recomenda-se apresentar, nessa
página, toda a lista dos componentes padronizados e a identi�cação dos
componentes novos que foram inseridos e informar as melhorias ou soluções
de bugs, além de manter sempre a página atualizada.
É aconselhável que a versão do framework para projetos responsivos seja
disponibilizada em uma página dedicada somente para esta opção, uma
página por exemplo, com o nome padrao-mobile.html ou outro nome
parecido. Além de mostrar que o framework foi construído de forma
pro�ssional, o que aumenta a credibilidade, essa página pode mostrar um
exemplo de adaptação da largura do dispositivo pretendido pelo pro�ssional
que for utilizar o framework.
Caso for inserida a versão responsiva na mesma página destinada a ser
utilizada em desktops, será necessário o redimensionamento do navegador
para a visualização do elemento em tamanho real em dispositivos móveis.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_67112... 8/39
Componentes Comuns em Framework
A codi�cação de um framework pode ser construída de maneira totalmente
personalizada, utilizando nomes no idioma em português, abreviações e
padronizações que o desenvolvedor achar interessantes. Mas é recomendável
a utilização do idioma em inglês, pois, além de facilitar a lógica da
programação, o framework pode ser utilizado no mundo inteiro,o que
também irá facilitar a sua compreensão. Também existem alguns itens
comuns que praticamente a maioria dos frameworks disponibiliza, e estes
componentes são: grid, tipogra�a, botões, formulários. É óbvio que cada
projeto tem as suas particularidades e a de�nição é da equipe de
desenvolvimento, que precisa ser �exível.
Sobre o grid, deve-se levar em consideração se no layout terá �oat (será
�utuante), se as colunas terão um tamanho �xo em pixels ou serão �exíveis,
ajustáveis, de acordo com o tamanho do monitor que é exibido, ou se as
colunas serão responsivas de acordo com o dispositivo no qual será
visualizado. Essas de�nições normalmente são aplicadas no atributo CSS box-
sizing e alteram o display do box model, assim o padding e o border são
considerados na hora de aparecer na largura ou altura �nal (o box-model
convencional não os considera na largura e altura), e soma-se, no resultado,
os valores, ou seja, 200px de largura acaba se tornando 200px + 2px de borda
+ 10px de padding = 212px total.
No componente de tipogra�a, o pro�ssional de designer digital precisa pensar
em todos os elementos de textos do framework ‒ normalmente links, títulos,
listas, parágrafos etc. Recomenda-se efetuar simulações com as combinações
possíveis, por exemplo, título grande, parágrafo de 2 linhas e outras
combinações com título pequeno, parágrafo com 3 linhas etc. para tentar
prever como serão resolvidas essas situações.
A padronização dos grupos de botões também deve ser considerada.
Normalmente um framework dispõe de 2 tipos de botões, o genérico e o
primário. O botão primário pode ser identi�cado na programação, a exemplo
do .bt-primary, que executa a função principal de uma página, e do botão da
ação �nal, que encerra um procedimento. Já o botão genérico pode ser
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_6711... 9/39
utilizado nas funções variadas que não sejam da �nalização, como salvar,
cancelar, avançar, upload etc. O designer digital precisa estudar a maneira de
diferenciar visualmente a interface, pois executa ações diferentes às quais
deve ser aplicado o conhecimento de interface do usuário UI. Padrões
normalmente devem apresentar atributos como .small em uma versão
menor, e quando é necessário ocupar uma largura, utilizar o atributo .full. A
utilização de ícones, o desenvolvimento de uma padronização como .bt-icon,
  e a obtenção de valores, como .bt-disabled (desabilitado), .bt-loading
(carregando), também são ações importantes a serem feitas no grupo de
botões. Portanto o designer digital precisa se atentar às funções desses
ícones que serão representados na interface, e mais uma vez, os
conhecimentos de interface do usuário precisam ser aplicados.
Nos formulários, é preciso pensar como os elementos que compõem os
dados podem ser preenchidos e a maneira em que pode ser disposta a lista
de checkbox, radio, select. É importante realizar testes e veri�car como eles
podem se comportar em navegadores diferentes. O atributo box-sizing,
utilizado no grid, pode servir para controlar a largura do formulário de forma
segura com o objetivo de que os elementos não �quem muito longe dos
dados inseridos e não ocupem uma linha inteira.
Figura 4.3 - Os elementos dos formulários precisam ser padronizados no
framework 
Fonte: Freepik.com.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 10/39
Nos formulários, também se deve levar em consideração as mensagens de
erro e as informações positivas, como as que informam que os dados foram
enviados com sucesso, padronizando-as.
praticar
Vamos Praticar
Quando se está trabalhando em um projeto de desenvolvimento e existe uma
grande quantidade de padrões de�nidos em equipe, a produtividade aumenta e
ocorre a diminuição de erros no projeto, principalmente no desenvolvimento de um
framework.
Nesse sentido, assinale a alternativa que indica outro resultado obtido com a
utilização de padrões na codi�cação de frameworks:
a) Facilita o entendimento front-end.
b) Facilita o entendimento da UI.
c) Facilita o entendimento da identidade visual do projeto.
d) Facilita o entendimento para a sua manipulação.
e) Facilita o entendimento da navegação.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_6711... 11/39
É bem provável que a primeira utilização do termo convergência, em mídias
digitais, tenha sido feita ao �nal da década de 70 pelo professor Nicholas
Negroponte, do Massachusetts Institute of Technology ‒ a título de curiosidade,
é a mesma instituição na qual Henry Jenkins futuramente lecionará anos mais
tarde. O professor Negroponte organizou uma série de palestras com o
objetivo de arrecadar fundos e nas quais apresentava a palavra convergência
para mostrar que a então não relevante interseção entre os três principais
ramos da comunicação e da informação iria se transformar até o ano 2000,
principalmente as telecomunicações e o cinema, mídia impressa e
informática. Com a fusão tanto das empresas quanto das linguagens não
seria mais possível lidar com cada área em separado (FIDLER, 1997), como
apresenta a �gura a seguir. 
Entendendo a Cultura daEntendendo a Cultura da
Convergência de Henry JenkinsConvergência de Henry Jenkins
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_6711... 12/39
A terminologia convergência é utilizada por pro�ssionais, praticamente desde
o surgimento dos primeiros projetos digitais, para de�nir diversas situações.
Com a publicação do livro Cultura da Convergência (2014), de Henry Jenkins, a
palavra convergência passou a ser de�nida de forma diferenciada referindo-
se aos dispositivos que executam diversas funções em somente um aparelho,
como os smartphones e tablets, funções antes desempenhadas por vários
aparelhos. Henry Jenkins aponta que o termo convergência é usado para
entender a maneira de uma forma ativa de consumir cultura, proporcionada
pelas tecnologias digitais.
As atuais tecnologias digitais proporcionam para os consumidores da cultura,
por meio dos dispositivos digitais, comentar, parodiar, editar, compartilhar
séries, �lmes, livros, entre outros. Também permitem aos consumidores ou
aos usuários recon�gurar tudo que está em volta das mídias a ponto de
estabelecer uma nova cultura, nomeada como a cultura da convergência. Essa
maneira de pensar, válida tanto para estudiosos acadêmicos e quanto para
pro�ssionais de marketing, tem o intuito de compreender esse público
consumidor.
Conceitos de Transmídia
O termo transmídia é empregado no sentido de que as diferentes mídias
podem transmitir diversos conteúdos para o público, de forma que os meios
Figura 4.4 - Exemplo de convergência no ramo da comunicação, segundo
Nicholas Negroponte 
Fonte: Fidler (1997, p. 25).
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_6711... 13/39
se complementam. A ideia é que se o público usar somente um canal, irá
obter somente a mensagem parcial do assunto que está sendo abordado, já
que a transmídia in�uencia a atitude de contar histórias por meio de várias
mídias com um conteúdo especí�co para cada uma.
O conceito de transmídia existe há vários anos, mas com o avanço das
tecnologias digitais na era da internet e o papel signi�cativo das mídias sociais
na propagação da informação, podemos pensar em transmídia na utilização
de algumas mídias para contar uma história ou transmitir uma mensagem a
determinado público. Por possuir esse poder, a transmídia é utilizada como
recurso estratégico pelo marketing para a transmissão de uma ideia ao
público-alvo de maneira mais e�caz, ou seja, por meio de recursos que
efetivamente atraiam a sua atenção.
Essa necessidade se justi�ca pelo fato de que, nos dias de hoje,a quantidade
de informações que chegam para cada pessoa é surpreendente e que, para
chamar a atenção a uma determinada informação, esta realmente deve ser
interessante ou transmitida de forma diferente. É preciso, nesse contexto,
contar uma história de maneira diferente, que envolve as pessoas. Assim o
pro�ssional de design digital também pode relacionar a experiência do
usuário em um projeto.
Contudo aplicar os conceitos de transmídia não é uma tarefa fácil, pois o
pro�ssional precisa ser multidisciplinar e ter conhecimentos de várias áreas, e
não somente de marketing e design. Os conceitos cinematográ�cos, por
exemplo, são importantes para se saber como contar uma história. Levando
em consideração que a transmídia é um conjunto de mídias que contam
juntas uma determinada história e cada mídia possui maneiras especí�cas e
bem próprias de contá-la, entende-se que cada mídia irá contribuir de forma
especí�ca para o enredo �nal. O grande desa�o é aplicar esse conhecimento
às formas de comunicação atuais para estabelecer uma relação e�ciente com
o consumidor, utilizando interatividade e informação e tornando o site,
aplicativo ou outro projeto digital importante para a vida dos usuários, desde
que eles obtenham as informações que consideram relevantes e da maneira
mais apropriada.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 14/39
Conceitos de Crossmídia
A crossmídia, ou crossmedia, pode ser de�nida como o modo de distribuir os
serviços, produtos e até mesmo as experiências por meio das diversas
plataformas e mídias de comunicação que o mundo digital pode permitir. A
crossmídia distribui a mesma narrativa nos diversos segmentos de mídia,
logicamente se adaptando às características de cada mídia, o que pode incluir,
texto, música, vídeo, aplicativos, entre outros. Na prática, você pode utilizar
várias mídias, como o Youtube, para distribuir vídeos, ou um blog para
distribuir imagens e textos, e até inserção de vídeos ou de aplicativos
especí�cos para transmitir uma mensagem ou narrativa com uma maior
interação.
Para funcionar a aplicação de crossmídia, não basta simplesmente postar o
mesmo conteúdo em mídias diferentes como Youtube, Facebook e Instagram,
é necessário também incentivar o usuário, o público-alvo, a interagir e
consumir o conteúdo nos diferentes meios, de forma que uma mídia
complemente a outra.
Desenvolvimento de Projeto de Digital
Dialogando com Conceitos de Transmídia e
Crossmídia
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 15/39
Com o conhecimento de transmídia e crossmídia, é quase uma obrigação que
os projetos de design digital sejam desenvolvidos dialogando com esses
conceitos. Nesse sentido, a utilização de frameworks é um dos elementos que
facilita o trabalho do designer digital, pois os projetos de transmídia devem
estar presentes em vários canais. Um exemplo é a utilização de frameworks
no desenvolvimento de um site ou aplicativo, que permite que atualizações de
diferentes mídias, como Facebook, Instagram, Twitter e Youtube, apareçam
em tempo real ao serem postadas no site ou aplicativo que contém o
framework.
Outros frameworks que permitem ao usuário compartilhar o conteúdo de um
site ou aplicativo diretamente em sua rede social também proporciona que o
projeto dialogue com conceitos de transmídia e crossmídia. Dessa maneira, o
conteúdo pode ter vídeos, textos, fotogra�as que utilizem a mesma
linguagem de cada rede social. Esses botões ou ícones de compartilhamento
devem estar dispostos na interface, de modo que o usuário encontre
facilmente e entenda que é um conteúdo que pode ser compartilhado, e não
simplesmente um link que direciona para a rede social do site ou aplicativo no
qual ele está navegando.
O designer digital deve utilizar a sua experiência para orientar a equipe que
cuidará do conteúdo do site ou do aplicativo de modo a ter o cuidado com a
redação e a linguagem, que devem estar de acordo com a mídia na qual o
conteúdo será compartilhado e com a persona. Isso promove um melhor
engajamento com o público que está navegando no site ou aplicativo. Deve-se
ainda levar em consideração que o público do site pode ser diverso e o texto
tem de ser de fácil entendimento para todos.
praticar
Vamos Praticar
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 16/39
Leia o excerto a seguir:
“Por convergência, re�ro-me ao �uxo de conteúdos através de múltiplas
plataformas de mídia, à cooperação entre múltiplos mercados midiáticos e ao
comportamento migratório dos públicos dos meios de comunicação, que vão a
quase qualquer parte em busca das experiências de entretenimento que desejam.”
Fonte: JENKINS, H. Cultura da convergência. São Paulo: Aleph, 2009. p. 29.
Sobre a cultura da convergência, analise as asserções a seguir e a relação proposta
entre elas.
i. As transmissões ao vivo pelo Youtube, Facebook e até por aplicativos a
partir de smartphones é um exemplo ilustrativo de convergência. 
Porque:
ii. Trata-se da junção do áudio do antigo telefone com a transmissão da
imagem em simultâneo, antes um privilégio das emissoras de TV.
A seguir, assinale a alternativa correta:
a) As asserções I e II são proposições verdadeiras, e a II é uma justificativa correta da I.
b) A asserção I é uma proposição verdadeira, e a asserção II é uma proposição falsa.
c) As asserções I e II são proposições verdadeiras, mas a II não é uma justificativa correta da I.
d) A asserção I é uma proposição falsa, e a II é uma proposição verdadeira.
e) As asserções I e II são proposições falsas.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 17/39
A interatividade na web não está relacionada apenas a websites interativos,
mas também a todas as possibilidades de interação que a rede mundial de
computadores, World Wide Web (WWW), pode proporcionar. Inicialmente a
rede mundial de computadores era utilizada somente para transmitir
informações de forma difusiva, de modo que somente as informações eram
transmitidas e o público recebia as informações.
Outros meios de comunicação em massa também iniciaram dessa forma,
como o rádio e a televisão, mas hoje a interatividade nas rádios dá-se por
meio de aplicativos, ligações e mensagens, em que o ouvinte pode interagir
com o locutor. Na televisão, a interação também pode ser através de
mensagens, ligações e aplicativos, mas também de inúmeras possibilidades
que a TV digital possibilita pela recepção das smart TVs conectadas à internet
e pela implantação da TV interativa, projeto que está em fase de estudos e
implementação.
A web interativa se relaciona com todos os dispositivos que podem estar
conectados na rede mundial de computadores e que possam se comunicar. É
Projeto Digital, Transmídia eProjeto Digital, Transmídia e
CrossmídiaCrossmídia
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_6711... 18/39
importante ressaltar que um dos princípios de comunicação a�rma que uma
ação tem o poder de modi�car o outro, se isso não acontece, a comunicação
não é e�ciente, simplesmente se está difundindo a informação. O princípio da
comunicação, relacionado à ação de modi�car o outro, na web interativa,
refere-se à interatividade pela qual uma informação é transmitida, e se
acontece alguma interatividade, é uma constatação de que a comunicação foi
efetiva. 
Atualmente, devido ao bombardeio de informações que recebemos no nosso
dia a dia, para uma comunicação ser e�caz, a construção de um projeto digital
deve contemplar parte de transmídia e crossmídia, e se for um projeto
relacionado a veículos ou portais de comunicação, talvez seja necessário o
projeto inteiro para contemplar a transmídia e a crossmídia.O designer digital
precisa pensar que a web interativa está em todos os dispositivos com os
quais é possível se comunicar na internet, sempre lembrando de que na
comunicação efetiva, como foi explicado anteriormente, a ação do emissor
tem de provocar a reação do receptor. Na web interativa, os produtos que
permitem a comunicação não são somente os tradicionais, como web sites,
também envolvem os aplicativos que podem ser baixados nas lojas dos
sistemas operacionais dos smartphones, como a Apple Store ou Google Play.
As smart TVs conectadas à internet também são um canal que se pode
comunicar com a mídia, embora a questão de usabilidade e de ergonomia do
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 19/39
controle remoto não seja mais ideal para a interatividade. Nesse sentido, o
uso de aplicativos para controlar as smart TVs vem suprindo essa de�ciência
do controle remoto, na medida em que facilita efetuar buscas de vídeos no
Youtube, por exemplo, simplesmente com um toque para assistir na tela
grande da televisão.
O telespectador pode usar o smartphone no momento em que assiste
televisão para comunicar-se com a mídia televisiva, com a qual ele interage
respondendo a enquetes, votando em uma próxima atração ou interagindo
com um programa de reality show. Além disso, pode enviar uma mensagem
através das redes sociais utilizando hashtags (#), que fazem com que a
mensagem possa aparecer na tela do programa televisivo, interagir por vídeo
gravado em transmissão ao vivo, ou interagir por QR Code mostrado na tela
da TV e ter acesso a mais informações sobre o assunto ou produto, e até pelo
meio tradicional de uma ligação. São diversas as formas de interação com
essa mídia, e o pro�ssional de design digital precisa pensar como será feita a
interface da smart tv para contemplar os recursos de transmídia e crossmídia.
O pro�ssional de design digital é o responsável por construir todos esses
projetos, desde o mais tradicional de websites e aplicativos, passando pela
interface das smart tvs e dos aplicativos que interagem com as próprias smart
tvs, e pelo menos uma parte desses projetos devem ser planejados de modo
a contemplar transmídia e crossmídia.
Construção de Projeto Digital que
Contempla Parte de Transmídia e
Crossmídia
As inúmeras possibilidades dos smartphones e tablets aliados à web
interativa proporcionam que os usuários elaborem conteúdos autorais e os
compartilhem, gerando novos formatos de produção nos meios de
comunicação e na própria indústria cultural. Os designers digitais precisam
estar atentos a esses conteúdos, e principalmente ao projeto a ser concebido,
para que o conteúdo do website, aplicativo etc., que foi desenvolvido, seja
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 20/39
compartilhado, reutilizado, sobretudo seja uma referência de conteúdo, e
uma vez que algum usuário o compartilhe em outras mídias, é necessário
pensar no desenvolvimento do layout, que deve identi�car se o
compartilhamento é original do site ou do aplicativo, construindo assim um
projeto que contempla parte de transmídia e crossmídia.
As novas tecnologias não somente agregaram maneiras inovadoras de
comunicação do usuário e com a mídia, mas também a possibilidade do
próprio usuário transmitir a sua informação, a sua história. O designer digital
pode utilizar essas referências que as novas tecnologias proporcionam no
momento da construção de um projeto digital, levando em consideração os
conceitos de transmídia e crossmídia. Dessa forma, é preciso analisar as
adaptações necessárias dos formatos tradicionais, por exemplo, a literatura, à
outra mídia de reprodução, como �lme, cinema. Muitos livros, ao serem
lançados, são objeto de discussão sobre possíveis e futuras adaptações para o
cinema. Em alguns casos, até séries não são só transmitidas pelas emissoras
de televisão tradicionais e plataformas de streaming de vídeos como Net�ix,
Globoplay e Playplus, mas também as chamadas web séries têm sido
planejadas para ser visualizadas no ambiente web, seja no desktop, seja no
notebook, smart tv ou smartphone.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_6711... 21/39
Essas adaptações da literatura para o cinema, por exemplo, tornaram-se mais
fáceis, principalmente com o avanço das novas tecnologias de exibição, como
a televisão, os smartphones, notebooks, tablets etc., consideradas
transmídias, e com as novas redes de distribuição pela rede mundial de
computadores, como Youtube, Facebook, Instagram, aplicativos de
transmissão ao vivo de vídeo, como Skype, FaceTime da Apple, e aplicativos
como WhatsApp, considerados crossmídia. Toda essa realidade, que já está
acontecendo, deve servir como referência para que a construção do projeto
de design digital contemple parte de transmídia e crossmídia. Na verdade,
isso já faz parte do dia a dia das pessoas; um site ou aplicativo com essas
referências faz com que o usuário se sinta mais familiarizado. Neste sentido,
Jenkins aborda a importância e o signi�cado abrangente de transmídia em
projetos digitais como no exemplo a seguir.
A transmídia se refere a um conjunto de escolhas feitas sobre a melhor abordagem para
contar uma história particular a um público especí�co, em um contexto particular, em
função dos recursos disponíveis para determinados produtores particulares.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_6711... 22/39
 
A narrativa transmídia pode ser considerada como um fenômeno sobretudo
pela grande expansão dos dispositivos digitais. Dessa forma, possui valores
especí�cos em relação à produção e ao tipo de consumo das informações.
Desenvolvimento de Layouts para
Entendimento dos Processos
Transmidiáticos
Os pro�ssionais de design desempenham um grande papel nos processos da
transmídia, desde o pro�ssional de design grá�co que trabalha no projeto
grá�co de um livro de uma editora. Nesse projeto, o produto principal pode
ser submetido a vários desdobramentos e se diversi�car num leque de vários
outros produtos, assim, no exemplo de um livro impresso, à obra escrita
podem ser acrescentados elementos de textos, visuais e imagens. O designer
digital entra no desdobramento do produto principal, seja no processo de
convergência do livro impresso para um e-book, usando os recursos mais
simples, como links, ou até em um desdobramento mais planejado com
desenvolvimento de aplicativo extremamente dinâmico e interativo,
transformando os textos e imagens do livro impresso em links, vídeos, áudios,
animações, em que é necessário o desenvolvimento de layouts para
entendimento dos processos transmidiáticos.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 23/39
Para facilitar o desenvolvimento de layouts, os pro�ssionais da área de design
podem utilizar algumas ferramentas como o Adobe Creative Cloud,
plataforma que, por meio de compartilhamento na nuvem, permite criar um
grande �uxo de produtos digitais interconectados, ou seja, de transmídia.
Essa plataforma possibilita criar livros impressos e lançar ao mesmo tempo,
logicamente de forma planejada, um e-book com interativa básica ou
aplicativos com nível de interatividade mais avançada. Utilizando softwares
como o InDesign CC para o desenvolvimento do projeto grá�co, é possível
exportar arquivos no formato conhecido como ePub, relacionado a uma
publicação digital, que pode con�gurar a exportação de forma �uida e
responsiva adaptada a dispositivos nos quais os arquivos possam ser
visualizados. Para o desenvolvimento da versão web, é possível utilizar as
ferramentas do Adobe XD, em formatação HTML5, com a con�guração
responsiva, além do software AnimateCC, exportandopelo Indesign CC no
formato HTML5 responsivo, caso o objetivo seja criar animações a partir do
livro impresso.
A utilização das novas tecnologias em projetos impressos ou não digitais, a
exemplo de um livro, é somente uma das opções que o pro�ssional de design
digital pode utilizar como referência no desenvolvimento de layouts para
entendimento dos processos transmidiáticos. Também é uma grande solução
para que as editoras possam concorrer dentro do universo da multimídia sem
perder a sua expertise, que é trabalhar com livros. O designer digital pode
Figura 4.8 - Os livros em suas versões digitais podem proporcionar novas
experiências como audiobooks. 
Fonte:  Monika Wisniewska / 123RF.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 24/39
aproveitar seus conhecimentos do design thinking e apresentar soluções
inovadoras para os seus clientes.
praticar
Vamos Praticar
O aumento expressivo tanto das mídias tradicionais já existentes quanto das digitais
conectadas entre si no dia a dia das pessoas permitiu o surgimento dos fenômenos
crossmídia e transmídia, que se perpetuam nos projetos de design digital. Nesse
sentido, assinale a alternativa que indica uma das de�nições de transmídia:
a) Quando uma mesma mensagem é transmitida por diversas mídias sem sofrer alteração no
conteúdo.
b) Quando uma mensagem é transmitida por mídias específicas de vídeo, de modo que uma
mídia complementa a informação da outra.
c) Quando uma mensagem é transmitida por mídias específicas de podcast, de modo que uma
mídia complementa a informação da outra.
d) Quando uma mensagem é transmitida por mídias de texto curto, de modo que uma mídia
complementa a informação da outra.
e) Quando uma mensagem é transmitida por diversas mídias, em que uma mídia complementa a
informação da outra
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 25/39
Para estruturar um projeto de transmídia e crossmídia, o pro�ssional de
designer digital precisa trabalhar em equipe com pro�ssionais de outras
áreas e até pro�ssionais especializados de um determinado campo do design,
como autores e roteiristas, focados em transmídia, pro�ssionais criativos,
design thinkers, designers de comunicação, desenvolvedores de softwares,
game designers, entre outros.
Estruturação de Equipe Transmídia e
Crossmídia
Uma das bases da transmídia é o cinema. Dessa forma, é recomendável que a
equipe tenha um autor, um roteirista transmídia, que possui o conhecimento
total da história e direciona para os outros pro�ssionais, como o designer
digital. O roteirista auxilia no direcionamento do rumo que a história deve
seguir, ele pode indicar qual será a mídia principal e as adaptações que
devem ser feitas nas outras mídias. Embora seja o pro�ssional que detém o
maior conhecimento da história, é um dos pro�ssionais que mais dialoga com
Estruturação Transmídia eEstruturação Transmídia e
CrossmídiaCrossmídia
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 26/39
os demais pro�ssionais, principalmente o designer digital, se estiver à frente
da gestão do projeto. O designer digital, uma vez atuando no papel de gestor
de projeto, não pode deixar de lado a sua função principal relacionada à
criatividade. Caso o projeto seja desenvolvido por uma agência de
publicidade, o designer digital precisa atuar em parceria com diretores de arte
para participar ou ser o responsável da criação de peças publicitárias e de
comunicação do produto principal e de seus subprodutos.
Uma área de atuação em que o pro�ssional de designer digital pode se
especializar é a de design thinking transmídia, na qual será responsável pela
idealização de ideias, aliando o seu conhecimento técnico à arte e à criação de
um projeto, avaliando e combinando os procedimentos, técnicas, métodos,
tecnologias, materiais e os processos para o desenvolvimento, analisando os
custos, a normatização e os procedimentos legais, com o objetivo de cumprir
todos os requisitos do projeto, de maneira que seja compatível com o
investimento e a necessidade do cliente. O design thinker transmídia,
logicamente precisar estar sempre atualizado com as mudanças e inovações
do mundo globalizado e em rede, além de possuir algumas qualidades como:
criatividade para apresentar resultados inovadores;
formação aliada ao design digital e boa capacitação técnica para
desenvolvimento de projetos;
Figura 4.9 - O designer digital deve estar à frente do processo criativo
transmídia e crossmídia 
Fonte: Rawpixel.com / Freepik.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 27/39
capacidade para analisar, avaliar e solucionar problemas;
competência para trabalhar em equipe e com pro�ssionais de outras
áreas;
comprometimento e ética para atuar seguindo os valores da
sociedade.
Outra área em que o designer digital pode ser especializar é a de design da
comunicação, na qual será responsável pelas etapas de criatividade que
atuam na concepção de mensagens. Precisa ter conhecimento de design
grá�co, que inclui a habilidade de trabalhar com identidade visual,
logomarcas, material promocional, além dos conhecimentos do próprio
design digital, que incluem a criação de interfaces de software, aplicativos,
navegação e UX, e outras áreas de design como o editorial, superfície,
produtos. Design de comunicação é uma das áreas mais amplas do design, e
é fundamental nos projetos de transmídia e crossmídia.
Os desenvolvedores de software transmídia também são pro�ssionais
essenciais que precisam fazer parte da equipe por dominarem linguagens,
ferramentas e conceitos computacionais que contribuem para os projetos
digitais através da sua visão sistemática. São considerados criativos, pois que
responsáveis por conceber soluções inovadoras através da programação.
Também são denominados tecnólogos criativos ou coders – codi�cadores. Os
pro�ssionais especialistas em narrativas não lineares interativas são os game
designers, pro�ssionais indicados para participarem de uma equipe de
transmídia não simplesmente para desenvolver jogos em um projeto
transmídia, mas para agregar o seu conhecimento sobre engajamento através
da diversão e do desa�o, sobretudo porque conhecem os processos de
interação homem-máquina. São pro�ssionais criativos nos projetos de
gami�cação e fun, projetos com conceito de divertimento por meio da
realização de uma atividade interativa.
Tendências Transmídia e Crossmídia
A internet das coisas - internet of things, ou simplesmente IOT, está
relacionada à interconexão digital de objetos do nosso dia a dia, que podem
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_6711... 28/39
ser eletrodomésticos, como máquina de lavar, microondas, cooktops, com
uma rede de objetos físicos capaz de reunir e de transmitir dados. A
transmídia e a crossmídia podem ser empregadas no conteúdo da internet
das coisas de maneira sincronizada com os eletrodomésticos, wearables,
tecnologias vestíveis, que podem ser roupas (ainda não se tornaram
populares); o termo pode ser conhecido também como dispositivos vestíveis,
entre os quais os mais populares são as pulseiras e os relógios.
O designer digital é o responsável pela interface desses eletrodomésticos e
dos dispositivos, que geralmente podem ser operados por aplicativos
próprios ou multitelas para facilitar a operação e o gerenciamento dos
eletrodomésticos, pois a função nativa de uma máquina de lavar, por
exemplo, é lavar roupas no momento em que ela é acionada. No aplicativo ou
na multitela, esta ação poderá ser feita de qualquer lugar do mundo, desde
que o dispositivo e a máquina estejam conectados à internet. Na prática, em
uma campanha transmídia e crossmídia,poderia se pensar na publicidade de
comidas congeladas numa geladeira, ou comidas que devem ser
armazenadas nesse eletrodoméstico, anúncios de amaciantes ou sabão em
pó numa máquina de lavar, publicidade de comidas de preparo rápido num
microondas etc. Mas além da publicidade, poderia se pensar na prestação de
serviços como sugestões de receitas, dicas para lavar roupa ou para o
armazenamento correto de comidas na geladeira e no refrigerador.
Figura 4.10 – Exemplo do que pode ser controlado através da internet das
coisas 
Fonte: Macrovector / Freepik.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 29/39
A internet das coisas, no conceito de transmídia e crossmídia, pertence às
novas mídias que podem proporcionar o acesso sob demanda para qualquer
conteúdo, em qualquer lugar e hora, e também em qualquer dispositivo
digital, objetos que tenham outros �ns como os eletrodomésticos, por
exemplo. Esses objetos, através de aplicativos e multitelas, permitem a
interatividade e a inserção de comentários, e até avaliações, com a
participação ativa e criativa dos usuários. As novas mídias podem ser
consideradas desde as mais conhecidas, como os buscadores na web, portais,
lojas virtuais, serviços web, sites, blogs, as mídias sociais, como Twitter,
Facebook, dispositivos como smartphone, tablets, aplicativos para
computador ou móvel, até mídias que fazem parte do nosso dia a dia e não
são percebidas como segunda tela, Whatsapp, tv digital com interatividade,
IPTV, a televisão pela internet, podcast, digital signage (sinalização digital ou
painéis informativos), mídias interativas, 3D, hologra�a, dispositivos vestíveis,
internet das coisas, realidade aumentada, streaming ao vivo, telões como
outdoors e totens multimídias.
Cases de Processo de Transmídia e
Crossmídia
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 30/39
A transmídia e a crossmídia são termos técnicos que parecem que são
utilizados somente nos departamentos de marketing e para estudiosos da
área, mas atualmente fazem parte do nosso dia a dia. Para desenvolver
campanhas crossmídia, é necessário compreender os hábitos do consumidor
e identi�car em quais meios de comunicação o engajamento maior. Algumas
empresas sabem bem como utilizar essa estratégia. A seguir, serão
apresentados alguns exemplos.
O Blog da Lu da loja de varejo Magazine Luiza, por exemplo, divulga
informações sobre os produtos vendidos na loja e mostra como usar alguns
produtos, além de comentar sobre funcionalidades especí�cas; a linguagem é
simples, normalmente utilizada no blog e na página do Facebook.
A empresa Ferrero desenvolveu para o produto Nutella a possibilidade de
customizar a embalagem e receber um rótulo com o seu nome. A campanha
foi realizada em várias mídias como TV, rádio e mídias digitais. Para poder
customizar, era necessário que a pessoa curtisse a página do Facebook e
depois acessasse um aplicativo criado exclusivamente para essa campanha.
Após a customização, era possível compartilhar no feed do usuário. A ideia
era disponibilizar 1000 rótulos por semana; a campanha teve sucesso e
alcançou a marca de 1000 rótulos por dia; foi extremamente bem planejada,
partindo de uma divulgação em mídias de massa como televisão, causando
grande impacto, depois, através dos dados dos consumidores que curtiram e
acessaram o aplicativo, a empresa conseguiu captar base para utilizar em
outras campanhas. Além disso, os próprios consumidores compartilharam na
sua rede social, e a campanha se tornou viral; poderia ser mantida pelos
próprios consumidores, mesmo acabando a veiculação em outros meios de
comunicação.
praticar
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_6711... 31/39
p
Vamos Praticar
Analise o trecho a seguir:
A transmídia utiliza como uma de suas bases o cinema com os conceitos de
narrativa. Assim, para projetos de transmídia e crossmídia, é recomendável que na
equipe tenha um ________, que dialogue com toda equipe para orientar todo o
processo de desenvolvimento.
Assinale a alternativa que preenche corretamente a lacuna:
a) ator.
b) diretor.
c) continuísta.
d) autor.
e) figurinista.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 32/39
indicações
Material Complementar
LIVRO
Cultura da Convergência
Henry Jenkins
Editora: Aleph
ISBN: 857657084X
Comentário: Livro referência sobre o assunto, mostra
as mudanças fundamentais sobre as novas mídias e a
cultura, e a convergência entre eles, de forma que o
mundo inteiro passa a interpretar o conteúdo e a
transmitir as informações de uma nova maneira.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 33/39
FILME
Matrix
Ano: 1999
Comentário: O �lme exempli�ca narrativas transmídia,
pois nele dá-se origem a um videogame onde cada
novo elemento adiciona uma camada extra de sentido
no mundo da Matrix. Já que um único usuário
di�cilmente é capaz de decifrar o enigma em sua
totalidade, cabe aos jogadores transitarem pelas
múltiplas plataformas e montar esse quebra-cabeça em
conjunto. Acesso em: 22 jan. 2020.
T R A I L E R
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 34/39
conclusão
Conclusão
Neste material, foram apresentados os assuntos relacionados à codi�cação
em frameworks, à técnica e à documentação necessárias para desenvolver a
codi�cação de frameworks, além dos componentes mais comuns em projeto
de design digital. Aprofundamos os conceitos da cultura da convergência de
Henry Jenkins e de transmídia e crossmídia, mostrando técnicas para a
construção de projeto digital que contemple e dialogue com a transmídia e a
crossmídia. Também foram discutidas as características indicadas aos
pro�ssionais para participar de projetos com a nova linguagem de
comunicação e mídia.
referências
Referências Bibliográ�cas
ANDERSON, C. A cauda longa: do mercado de massa para o mercado de
nicho. Rio de Janeiro: Elsevier, 2006.
FIDLER, B. School leadership: some key ideas. School Leadership and
Management, [S.I.], v. 17, 1997.
JENKINS, H. Convergence culture: where old and new media collide. New
York: NYU Press, 2006.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 35/39
JENKINS, H. Cultura da convergência. São Paulo: Aleph, 2009.
PRESSMAN, R.; MAXIM, B. Engenharia de software. 8. ed. Porto Alegre:
AMGH, 2016.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 36/39
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 37/39
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 38/39
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 39/39