Continue navegando
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/37
i t d ã
DESIGN DIGITALDESIGN DIGITAL
ESTRUTURAÇÃO E FORMATAÇÃOESTRUTURAÇÃO E FORMATAÇÃO
BÁSICA DE PROJETOS DIGITAISBÁSICA DE PROJETOS DIGITAIS
Autor: Me. Leandro C. 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=_6711... 2/37
introdução
Introdução
A organização front-end, formatação e ajustes corretos de imagens para uso digital e
fechamento de arquivo para web são fundamentais nos projetos de design digital e
serão apresentados nesta unidade, além dos elementos do layout como imagens
backgrounds e formatação de tipogra�as que fazem parte de toda interface. Você irá
conhecer sites e plataformas para a criação de portfólio on-line, para já iniciar o
desenvolvimento do seu portfólio. Também serão abordados assuntos técnicos
sobre wireframe, mapa de site, inserção de links e menus de navegação, construção
do layout em softwares, aplicativos ou plataformas on-line e formatação da interface
e efeitos visuais. Os temas que envolvem os pro�ssionais de design digital e
programadores, como o desenvolvimento da codi�cação com base no mapa do site e
wireframe, aplicação de boas práticas na codi�cação, normas de acessibilidade web,
embedando APIs em sites, plataformas on-line e desenvolvimento de APIs, também
serão apresentados nesta unidade.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_6711... 3/37
Transformar os dados dos sistemas computacionais em uma interface grá�ca é o
trabalho do front-end, que utiliza os recursos das linguagens HTLM e CSS, para que os
usuários visualizem e interajam com esses dados. A organização front-end é
importante em todos os projetos de design digital, mas é fundamental em grandes
aplicações web, que possuem uma expressiva quantidade de dados. Desde o início
do projeto, é preciso se preocupar com a arquitetura da informação, para não
ocasionar maiores problemas no decorrer dele. E uma boa organização nunca é
negativa. Mesmo em casos de projetos experimentais, que sejam considerados com
pequeno �uxo de dados, a organização front-end é indicada, pois um pequeno
projeto pode crescer, e deve estar preparado para isso, principalmente porque existe
grande quantidade de sites e aplicativos que fazem sucesso inesperado de uma hora
para a outra.
Para facilitar a organização front-end, usar uma estrutura semelhante em todos os
projetos, criando regras, normas, en�m, uma convenção, facilita muito o trabalho no
qual o desenvolvedor ganha em produtividade com a consistência do trabalho.
Algumas sugestões de regras que podem ser de�nidas são que todos os arquivos
sem exceção devem ser nomeados com letras minúsculas e o principal arquivo de
cada componente deve ser nomeado como índex.
Por ter origem no idioma inglês, na linguagem de programação as pastas (diretórios),
termos e atribuídos são em inglês e a forma de organizar podem seguir padrões, por
Organização Organização Front-endFront-end
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_6711... 4/37
exemplo, na pasta components, conter os elementos dos componentes primários
como os buttons. Na pasta services, alguns elementos também podem ser utilizados
em diversas partes do projeto. Logicamente que não pode ser um componente como
um botão, que é totalmente personalizado para aquela página ou situação. A pasta
scene seria como uma espécie de programa que irá rodar no projeto para executar
alguma ação, ou seja, uma aplicação que possui uma rota, que pode possuir outras
scenes aninhadas.. Nesse momento, a programação torna-se um pouco mais
organizada e detalhada e, normalmente, nessa etapa do projeto, o designer digital
trabalha com um desenvolvedor especializado em programação.
Formatação de Imagens para Uso Digital
Nos projetos de design digital, muitas vezes, é utilizado um grande número de
imagens. O pro�ssional da área precisa conhecer a formatação correta para que a
imagem realmente possa ser visualizada. As imagens digitais são formadas por
pixels, que é o menor elemento que pode ser exibido em um dispositivo digital,
como os monitores, televisores, telas dos smartphones etc. As imagens formadas por
pixels recebem o nome de bitmap. Quando são de�nidas as suas dimensões de
largura e altura, não é possível aumentar o tamanho dessas imagens sem perder a
qualidade, mas, para diminuir, não existe problema. Dessa forma, o designer digital
precisa fazer um planejamento prévio de qual será o maior tamanho que a imagem
será exibida para formatá-la de forma correta, principalmente se for utilizá-la com o
recurso de ampliar. Os componentes de uma cor podem ser combinados de várias
formas, de acordo com a quantidade de canais que o modo de cor possui. Para o uso
digital, deve ser utilizado o modo de cor RGB.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_6711... 5/37
A unidade de medida para o uso digital são as polegadas, e, em programas de edição
de imagens como o Photoshop, é possível determinar a quantidade de pixel que
cada polegada de uma imagem terá. Dessa forma, uma imagem com uma
quantidade maior de polegadas terá uma qualidade melhor. Por exemplo, uma
imagem com a dimensão de 10 centímetros de largura por 15 de altura pode ser
con�gurada com 300 pixels por polegada, como também se pode salvar essa mesma
imagem com uma quantidade de pixels menor como 72, por exemplo. Além de
de�nir a qualidade das imagens, a quantidade de pixels por polegadas in�uencia
também no peso do arquivo dessas imagens, ou seja, quanto maior for a quantidade
de pixels da imagem, maior será o peso do arquivo dela.
Para uso digital, uma imagem com 72 pixels por polegada é o ideal para que ela seja
visualizada de forma correta e rápida, principalmente para sites ou aplicativos web,
no qual depende da velocidade da internet para baixar os arquivos com mais
rapidez. Além da quantidade de pixel por polegada, conhecida também como PPI –
pixels per inch, a extensão do arquivo também in�uencia no peso do arquivo, A .jpg é
uma extensão de compactação de imagem, que pode ser visualizada em dispositivos
digitais, e deve ser usada quando a imagem possuir muito detalhes, como uma
fotogra�a ou ilustrações digitais realísticas. A extensão .png deve ser utilizada
quando uma imagem possuir uma quantidade de detalhes menor, como um
desenho, logotipo, e também permite que ela seja salva com um fundo transparente,
em que é possível visualizar a cor do fundo de uma página, por exemplo.
Para o uso digital, também é possível salvar várias imagens no mesmo arquivo e, se
tiver alguma alteração entre elas, passa a sensação de movimento. Para isso, basta
saiba mais
Saiba mais
Conheça mais o Photoshop, o software da Adobe destinado ao tratamento, edição e
manipulação de imagens. Possui o recurso dos canais de informação de cores, em q
quando uma imagem é aberta, é criado automaticamente um canal para cada cor, e
caso de uma imagem em RGB: um para o vermelho, outro para o verde e o terceiro
cor azul. Para saber mais, acesse o link a seguir.
ACESSAR
https://helpx.adobe.com/br/photoshop/using/channel-basics.html
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_6711... 6/37
salvar o arquivo na extensão .gif, que também permite salvar as imagens com um
fundo transparente. É importante lembrar que, nessa extensão de arquivo, é
permitido salvar mais do que uma imagem. O peso também pode ser maior do que
as imagem em outras extensões, como o .jpg, por exemplo.
Fechamento de Arquivo para Web
Para uma imagem que será visualizada em dispositivosdigitais e na web, elas devem
ser �nalizadas, ou seja, fechadas em 72 PPI, conhecida também como resolução de
imagem, no modo de cor RGB e na extensão correta de acordo com as características
de cada imagem. Para con�gurar no software Photoshop, essas informações estão
no menu Imagem – Image (na versão em inglês, Mode – Mode), e deve-se selecionar
o modo RGB. Para de�nir a resolução da imagem, basta ir ao mesmo menu, Imagem
– Image, depois utilizar o menu Image Size (tamanho da imagem), no campo
Resolution (resolução), deve ter o valor 72, ao lado a opção que deve estar ativa é a
pixel/inch (pixel por polegada), como apresentado na próxima �gura.
É importante ressaltar que nunca se deve aumentar as dimensões de uma imagem
para não perder a sua qualidade de visualização. Caso uma imagem não esteja na
resolução de 72 PPI, ao abrir a janela do tamanho da imagem da Figura 2.1 o
primeiro procedimento que deve ser feito é tirar a seleção do item Resample Image
(redimensionar imagem), e depois inserir o valor correto de 72. Dessa maneira, a
imagem será redimensionada para o tamanho no qual a qualidade da imagem não
será perdida.
Figura 2.1 - Exemplo de con�gurar tamanho da imagem
Fonte: Elaborada pelo autor.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_6711... 7/37
Trabalhando com Cores, Imagens e
Backgrounds
Com a imagem corretamente con�gurada no Photoshop, para inserir no HTML a tag
utilizada é a img seguida da src, source em inglês, que signi�ca a origem, e indica o
caminho da pasta que está salvo o arquivo. Também pode utilizar a tag url caso essa
imagem já esteja hospedada na internet. Para uma imagem, é possível inserir o
atributo alt, de alternate text, texto alternativo que exibe um texto. Caso não seja
possível carregar a imagem, esse atributo otimiza a busca dela nos sites de
pesquisas. As tags width (largura) e height (altura) de�nem as dimensões da imagem
em pixels. É importante lembrar que não é indicado aumentar uma imagem para
não perder a qualidade. Veja este exemplo de código <img src="logo.jpg" alt="logo da
empresa" width=60 height=40>, que representa uma imagem na extensão .jpg, salva
com o nome de logo, com texto alternativo logo da empresa, no tamanho 60 px
(pixels) de largura por 40 px de altura.
Também é possível inserir uma imagem como background (fundo) de uma página ou
tabela, utilizando a tag background-image. A imagem estará no fundo de acordo com
as dimensões dela. É possível também que esse fundo se repita adicionando a tag
background-repeat, no qual podem ter outros atributos, como o repeat-x para repetir
verticalmente e repeat-y para repetir horizontalmente. Também é possível de�nir se
a imagem �cará �xa – �xed ou irá rolar – scroll, conforme a movimentação da barra
rolagem, por meio da tag background-attachment e os valores �xed e scroll. A posição
do plano de fundo também pode ser de�nida pela tag background-position. No
quadro a seguir, há a relação dos atributos que podem ser inseridos nessa tag.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_6711... 8/37
Quadro 2.1 - Relação de tags de background com as suas variações
Fonte: Elaborado pelo autor.
A tag background-color é utilizada para inserir um fundo com uma cor, com o
sistema de numeração hexadecimal. Esses códigos são como misturas de cores RGB.
Para saber qual a numeração que representa uma cor, no menu Seletor de cores, no
Photoshop, na primeira coluna no �nal da con�guração das cores RGB é
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_6711... 9/37
apresentado com o símbolo # o valor hexadecimal, conforme �gura a seguir
exemplo da cor: #151724 (destacado com um quadrado em azul).
Formatando Tipogra�ias
O modo mais prático de formatar tipogra�as é utilizando o CSS, e, por meio do
atributo font-family, indica a família de fontes que serão utilizadas para formatar o
texto. Veja o exemplo do código: {font-family: Arial, Verdana, Tahoma, Sans-Serif;}.
Esse código representa que a principal fonte é Arial, e, caso não tenha, ela será
trocada pela Verdana. Se não tiver a Verdana, será trocada pela Tahoma, e assim por
diante. Pelo fato de os navegadores normalmente utilizarem as fontes que estão
instaladas nos sistemas operacionais, não é aconselhável utilizar fontes
desconhecidas. O atributo color indica a cor do texto, que pode ser de�nida pelo
valor hexadecimal, ou pelo nome da cor em inglês como red, blue, green etc., ou pelo
valor RGB, separados por vírgula como o exemplo da cor vermelha que representa
os valores 255, 0, 0, (R=255, G=0, B=0).
Com o atributo line-height, de�ne-se a altura da linha, indicada para dar um
espaçamento entre uma linha e outra. Já no atributo text-transform, existem vários
valores possíveis, por exemplo, para caixa alta, o valor uppercase; para caixa baixa, o
valor lowercase; para a primeira letra maiúscula e o restante minúscula, o valor
capitalize. Para alinhar o texto, a tag é a text-align, e possui valores como left, para
texto alinhado à esquerda; o valor center, para centralizar; o valor right, para texto
alinhado à direita; e o valor justify, para texto justi�cado. Veja um exemplo de uma
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 10/37
linha de código com a formatação: {font-family: Arial, Verdana, Tahoma, Sans-
Serif;color: #333333;font-size: 12px;}p{line-height: 20px;text-align: justify;}.
Sites e Plataformas para a Criação de Portfólio
On-line
A reunião dos melhores trabalhos desenvolvidos por um pro�ssional ou empresa é
um portfólio. É mais do que um currículo: é um espaço para apresentar a experiência
e prática do que a empresa ou pro�ssional sabe fazer de melhor. A versão digital de
portfólio, além de ser um diferencial no momento de ser contrato, possibilita que um
maior número de pessoas tenha acesso ao trabalho.
Para os pro�ssionais de design, a plataforma mais utilizada para criar um portfólio
on-line é Behance, além de ser uma rede social de pro�ssionais que trabalham com
criação. Nessa plataforma, é possível postar os trabalhos e receber curtidas e
comentários, e também usar como inspiração os trabalhos realizados por outros
participantes dessa rede. Pode-se fazer a organização do trabalho por álbuns, incluir
um espaço para minicurrículo e inserir arquivos de outras redes sociais como o
YouTube, SoundCloud, e Vimeo. Não possui limites de uploads, e os arquivos podem
ser de áudio, imagem, texto ou vídeo. Além do Behance, existem outras plataformas
para a criação de portfólio on-line:
Adobe Portfolio.
Carbonmade.
DeviantArt (https://www.deviantart.com/).
Kawek.
Krop.
Portfoliobox.
Zuinn.
Há diversas maneiras de criar um portfólio on-line, com plataformas fáceis de operar.
Não se esqueça de sempre atualizar e, se a plataforma possuir personalização, deixe
o seu portfólio com uma identidade própria e inclua as suas características pessoais.
Wireframe
Wireframe ou diagrama de wireframe é a representação visual da estrutura de como
irá funcionar uma tela de um aplicativo ou uma página. Dessa maneira, o wireframe
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_6711... 11/37
deve ser criado no começo do desenvolvimento de um projeto, antes de iniciar o
processo do design visual e conteúdo. Eles podem ser desenvolvidos no papel,
diretamente em CSS, HTML ou em até em aplicativos e softwares especí�cos.
Existem algumas plataformas on-line nas quais é possível criar e organizar
wireframes. Em algumas delas, a criação é bem intuitiva e focada para projetos no
qual não é preciso desenvolver um wireframe bem detalhado. E existem inúmeros
outros sites ou plataformas, por exemplo:
cacoo: além de wireframes, permite tambémconstruir �uxogramas.
charts: existem várias opções de estilos, tamanhos, cores e orientações.
tt.google developers chart: além de wireframes, permite também construir
�uxogramas, entre outros tipos de grá�cos.
creately: além de wireframes, permite também construir mapas do site.
Mapa de Site
A representação hierárquica da estrutura de um site é denominada sitemap (mapa
de site). Com ele, é possível visualizar o tamanho do site e compreender onde será
inserido cada conteúdo. Antes do desenvolvimento, o mapa do site é um documento
que é usado e sempre consultado pelo gerente do projeto, diretor de criação, equipe
de arquitetura de informação e cliente. Esse documento facilita visualizar o escopo
do projeto, validar as hierarquias e seções, onde tudo deve ser aprovado pelo cliente.
No entanto, alguns clientes só conseguem entender o mapa do site acompanhado
pelo wireframe.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 12/37
O mapa de site também facilita a compreensão do designer digital; o planejamento
do desenvolvedor em relação às di�culdades possíveis do trabalho, além do seu
acompanhamento; e a criação do cronograma e da atualização pelo gerente de
projeto. Nessa etapa, é possível veri�car se está faltando algo, ou até se há páginas
ou informações desnecessárias, e de�nir a maneira de navegar melhor pela
estrutura e se certi�car da sua coerência. Um mapa do site pode ser desenvolvido de
uma maneira simples, parecido com um organograma, com vários quadrados de
acordo com a hierarquia, conhecidos como mind mapping, ou podem ser mais
detalhados com uma versão reduzida do wireframe, de cada página, conforme a
�gura a seguir.
Existem algumas plataformas on-line em que é possível criar e organizar mapas do
site como o Canvas, que oferece ferramentas interessantes para estudantes
iniciantes, por já possuir alguns modelos prede�nidos. O Lucidchart também é uma
plataforma de geração de wireframe on-line, entre outras que disponibilizam esse
serviço.
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... 13/37
Analise o trecho a seguir.
Podemos de�nir front-end como se fosse a primeira camada com a qual temos contato no
momento em que abrimos um aplicativo ou acessamos um site. É nessa primeira camada
que encontramos _______ de navegação com todas as informações da página ou tela como
os formulários, botões e todos os elementos que fazem parte do design. Manter o front-end
organizado é fundamental para a funcionalidade de um projeto.
Assinale a alternativa que preenche corretamente a lacuna.
a) a linguagem
b) os códigos
c) o HTML
d) o CSS
e) a interface
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 14/37
Os links ou hiperlinks possibilitam vincular um arquivo a qualquer outro arquivo ou
recurso em uma página HTML e podem ser aplicados em diferentes elementos,
como imagens e textos, os quais, no momento que são ativados, direcionam para
URL (endereço) existente no próprio site ou em outro site que esteja na internet. A
tag que indica um link é a <a>, no qual deve ser incluído o atributo href – Hypertext
Reference, justamente o endereço de destino do link. Dentro da tag <a>, deve ser
inserido o texto, a imagem ou o elemento que, ao ser ativo, direciona para o
endereço dentro do atributo href. Segue um exemplo de link no qual se é
direcionado para a página https://www.eadlaureate.com.br, quando o usuário clica
somente na palavra correspondente à EaD Laureate. O restante do texto, “Seja
redirecionado à página da”, não é um link, e, por esse motivo, não está dentro da tag
<a>.
<p>Seja redirecionado à página da
<a href=" https://www.eadlaureate.com.br/ ">EadLaureate</a></p>
No exemplo acima, o atributo href=”” é usado para adicionar um link de uma página
externa do site. Para adicionar um link para um determinado ponto da mesma
página, basta utilizar o símbolo # e, em seguida, a identi�cação do link. Por exemplo,
para direcionar um link para o rodapé da página, a tag deve ser escrita da seguinte
maneira: <a href="#rodape"></a>, e o ponto onde será direcionado ao clicar nesse
Inserindo LinksInserindo Links
https://www.eadlaureate.com.br/
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 15/37
link deve ser identi�cado com o seguinte código: <a name="rodape" id="rodape">
</a>. Quando é preciso direcionar um link para uma outra página dentro do mesmo
site, o valor que é inserido é a / (barra) para indicar o caminho da página, seguido do
nome da página com a extensão do arquivo .html.
Também é possível que o link abra na mesma aba do navegador ou em uma nova
aba por meio do atributo target, que tem os seguintes valores: _blank, _self, _parent e
_top. Como padrão, os links abrem na mesma aba, e o valor _blank de�ne que o link
abra em uma nova aba, esse comando é utilizado normalmente quando o link é
externo, para evitar que o usuário feche o site do seu projeto e comece a navegar em
outro site na mesma aba, mantendo o site do seu projeto aberto em outra aba. Veja
o exemplo de um link que direciona para uma página de contato, no qual essa
página em HTML recebe o nome de faleconosco.html, mas está dentro de uma pasta
(diretório) chamada sobre, e esse link irá abrir em uma nova janela:
<a href="../sobre/faleconosco.html" target="_blank">contato</a>.
Pelo padrão da tag <a>, no momento que é aplicada em texto �ca sublinhado,
quando utilizado no CSS esta tag é identi�cada com o atributo link, e, quando ainda
não foi aberto, o texto �ca na cor azul. Para links já abertos, quando utilizado no CSS
esta tag é identi�cada com o atributo visited, o texto como padrão é a cor roxa, e,
para links ativos, ou seja, a página em que se está navegando, a cor do texto como
padrão é vermelha, quando utilizado no CSS, esta tag é identi�cada com o atributo
active. É possível personalizar esta tag por meio do elemento <style>, de�nindo a cor
do link inserido no <head> do arquivo HTML, e aplicando atributo text-decoration, que
de�ne o que acontece com o sublinhado do texto quando passa o mouse por cima,
utilizando o atributo hover, que pode sublinhar o texto utilizando o valor underline.
Veremos a seguir um exemplo de CSS de um link identi�cado na cor verde (green),
que não estará sublinhado. Por esse motivo, o text-decoration está com o valor
none. No momento em que o link for visitado (visited), apresentará o texto na cor
azul e também irá manter sem o sublinhado, e, em razão disso, o text-decoration
está com o valor none. Quando o mouse passar por cima, o texto �cará em vermelho
(red) e, nesse momento, o texto aparecerá sublinhado. Por esse motivo, o text-
decoration está com o valor underline, e, quando estiver ativo, a cor será preta
(black). Além disso, o texto não estará sublinhado, portanto o text-decoration está
com o valor none.
<style>
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 16/37
a:link {
color: green;
text-decoration: none;
}
a:visited {
color: blue;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: black;
text-decoration: none;
}
</style>
Inserindo Menus de Navegação
Barra de navegação ou menu é importante, pois é por meio desse elemento que os
usuários visitam todas as páginas do site. É recomendável que o menu seja
construído em um arquivo externo de CSS, formatar e personalizar da maneira que
achar melhor. Como se trata de um menu, a organização é facilitada utilizando o
recurso de listas ordenadas e não ordenadas. Segue um exemplode menu com três
links: cursos, polos e vestibular.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 17/37
<ul>
<li><a href="">Cursos</a></li>
<li><a href="">Polos</a></li>
<li><a href="">Vestibular</a></li>
</ul>
Após a formatação do menu, basta inserir na página HTML, utilizando a tag <nav>,
que tem a função de agrupar blocos de links de um mesmo assunto ou links internos
do site, indicando que um determinado bloco é um bloco de navegação. É
importante lembrar que, para indicar um arquivo externo de CSS, deve-se usar
código dentro da tag <head>. Veja um exemplo de menu salvo com o nome
barranavegacao.css inserido em uma página de HTML.
<link rel="stylesheet" type="text/css" href="barranevagacao.css" />
Construção do Layout em Softwares,
Aplicativos ou Plataformas On-line
Para construir um layout, existem softwares, aplicativos e até plataformas on-line que
facilitam o desenvolvimento, não sendo necessário sempre iniciar do zero e escrever
todo o código em um programa de texto, como o bloco de notas. O software Adobe
Dreamweaver permite criar, programar e gerenciar sites dinâmicos e responsivos,
que se adaptam de acordo com o dispositivo que é visualizado, e possui um
mecanismo de programação inteligente e simpli�cado em HTML e CSS, com auxílios
visuais para reduzir erros e otimizar o desenvolvimento do site.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_6711... 18/37
Além do Dreamweaver, a Adobe disponibiliza outros softwares e plataformas para
construção de layout, como:
Adobe Xd: plataforma colaborativa que permite ser utilizada por uma
equipe e criar layout e design de sites, como também de aplicativos móveis,
jogos, interfaces de voz e muito mais.
Adobe Spark: utilizado para web e dispositivos móveis. Além de criar
páginas da web, permite criar imagens para redes sociais e até vídeos
curtos. Possui também uma biblioteca de modelos.
Além dos softwares, existem também plataformas on-line para construção de layout,
sendo o mais indicado utilizar o CMS – Content Management System, Sistemas de
Gerenciamento de Conteúdo. O WordPress é o mais utilizado, podendo ser usado
para diversos projetos, como site, blogs, lojas virtuais, sites de notícias, galerias
temáticas e interativas. É de fácil instalação nos servidores de hospedagem, e o
layout é totalmente personalizável, com a instalação de temas gratuitos ou pagos,
sendo permitido adicionar o próprio modelo de site por meio do HTML e CSS.
Funções adicionais também podem ser instaladas por meio de plug-ins, o que torna
fáceis a criação de formulário de contatos e a integração com redes sociais.
Além do WordPress, existem outras plataformas de CMS, e aplicativos que permitem
desenvolver sites e blogs na web em sistemas totalmente on-line que são:
Joomla!
Marvel App.
Invision APP.
Pixate APP.
Fluid.
Figura 2.5 - Reprodução do software Adobe Dreamwever CC 2019
Fonte: Elaborada pelo autor.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 19/37
Notism.
praticar
Vamos Praticar
Analise a �gura a seguir.
O hiperlink ou simplesmente link pode ser aplicado em uma imagem ou texto, e,
quando ele é ativado (clicado), direciona-se para a página no qual foi con�gurado o
endereço, sendo de vital importância o uso de links no menu de navegação.
Conforme o local, o link será redirecionado, existindo diferentes formas de utilização
que permitem direcionar para a mesma página, para outra página do mesmo site ou
para uma página de um outro site. A partir do exposto, associe o código da �gura
acima ao tipo de redirecionamento:
1. Link que direciona para a página de outro site.
2. Link que direciona para a mesma página.
3. Link que direciona para outra página do mesmo site.
( ) Na �gura, é representada na Linha 1 com o código href=https://www.mec.gov.br.
( ) Na �gura, é representada na Linha 3 com o código href="curso.html".
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 20/37
( ) Na �gura, é representada na Linha 4 com o código href="#trabalhe".
A partir das relações feitas anteriormente, assinale a alternativa que apresenta a
sequência correta:
a) 2, 3, 1.
b) 2, 1, 3.
c) 3, 2, 1.
d) 3, 1, 2.
e) 1, 3, 2.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_6711... 21/37
Os elementos que compõem uma página da web são divididos e distribuídos em
cada parte de uma interface grá�ca, como o menu de navegação, cabeçalho, o
próprio conteúdo da página e rodapé. Todos esses elementos podem ser
formatados de acordo com as características de suas funções na página. No HTML5,
para cada divisão foram desenvolvidas diversas tags, com o objetivo de organizar e
padronizar o desenvolvimento de uma página, e também informar aos navegadores
quais são os conteúdos nos quais estão sendo inseridos em cada tag e apresentar a
visualização da página sem erros.
O cabeçalho também pode ser formatado no HTML5, incluindo o elemento
<header>, que permite conter o título da página e inserir outros elementos, como
menu de navegação, campo de buscas, logo etc. Um dos recursos muito utilizados
pelos designers digitais é adicionar a marca da empresa no elemento <header>, no
qual é visualizado nos navegadores do lado do título da página, conforme o exemplo
a seguir. Esse recurso facilita para manter a identidade visual da empresa na sua
página na web.
Formatação de InterfaceFormatação de Interface
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 22/37
A formatação de interface deve ser uma preocupação constante em todos os
projetos, principalmente quando está construindo uma página com grande
quantidade de conteúdo, em que pode haver necessidade de ter menu que não
esteja somente no cabeçalho. Nesse caso, é indicado utilizar o elemento <nav>, que
permite agrupar uma lista de links para outras partes do site, organizar em blocos de
links que podem estar em diferentes partes do layout, como no próprio cabeçalho ou
no rodapé. Esse elemento representa uma seção de uma página que aponta para
outras páginas ou para outras áreas da página, ou seja, uma seção com links de
navegação. Também para sites com grande quantidade de conteúdo, a utilização da
tag <section> é recomendada para indicar seções no site.
Outro elemento que facilita a formatação é inserir o elemento <footer>, que
representa o rodapé de um documento ou de uma seção especí�ca dele, que pode
conter informações relacionadas ao autor e aos direitos autorais, copyright, blocos
de navegação ou links relacionados. Esses são alguns exemplos de formatação da
interface utilizando HTML5 e CSS3, mas é sempre importante ressaltar que, no
momento que está trabalhando com grandes projetos, é necessário sempre ter um
pro�ssional que trabalhe com programação na equipe.
Formatação de Efeitos Visuais
Para incrementar a interface de um aplicativo ou uma página, deve-se fazer
formatação de efeitos visuais, aplicada de uma maneira que passe um aspecto visual
agradável e seja harmônica com a identidade visual do projeto, que inclui elementos
como imagens, fotogra�as, textos e tipogra�as. Os efeitos visuais devem ser
utilizados de uma maneira que não ocasione uma interface cansativa e confusa, por
isso é indicado não utilizar os efeitos visuais em excesso.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 23/37
Existem inúmeras possibilidades de formatação de efeitos visuais, e um deles é o
marquee, que permite inserir uma área de rolagem de texto, que podepercorrer
uma página da esquerda para direita ou sentido contrário. Há vários atributos extras
para personalização desse efeito, como o behavior, bgcolor, direction, height, hspace,
loop, scrollamount, scrolldelay, truespeed, vspace e width. O atributo behavior indica
como o texto é rolado dentro da área, e possui outros valores como scroll (rolar) slide
(deslizar) e alternate (alternar). Caso nenhum valor seja de�nido, o padrão é o scroll.
Para de�nir a cor do plano de fundo, o atributo é o bgcolor, que é de�nida por meio
do nome da cor, por exemplo red, blue green, ou de um valor hexadecimal.
O atributo direction informa a direção da rolagem do texto, que podem ser
personalizados com os valores right (direito), left (esquerdo) e up & down (cima e
baixo). O padrão para esse atributo é o left (esquerdo), caso não seja aplicado
nenhuma personalização. Veja dois exemplos da aplicação dessa formatação:
<marquee>Este texto irá "rolar" da direita para esquerda</marquee>, <marquee
direction="up">Este texto vai rolar de baixo para cima.</marquee>.
Para informar a altura do letreiro na unidade de medida em pixel, ou um valor
percentual, o atributo é o height, e, para aplicar uma margem horizontal, usa-se o
atributo hspace. Já o atributo vspace aplica uma margem vertical em pixel ou em valor
percentual. O atributo width de�ne a largura em pixels ou em um valor percentual. O
atributo loop de�ne o número de repetições do letreiro. O padrão é 1, que indica que
a repetição será in�nita, e scrollamount é o atributo no qual é de�nido em pixels o
tamanho de rolagem em cada intervalo, cujo valor padrão é 6.
Para de�nir o intervalo de tempo entre a rolagem em milissegundos, o atributo que
deve ser utilizado é o scrolldelay. O valor padrão é 85, e o valor mínimo é 60. Dessa
forma, qualquer valor menor que 60 será ignorado e o valor 60 será usado, pois,
utilizando um tempo menor, a rolagem será muito rápida, não sendo possível ser
visualizada pelo olho humano. Para especi�car valores menor que 60, deve-se utilizar
o atributo truespeed.
Agora que você já conhece algumas formatações de efeitos visuais, é interessante
testar o seu aprendizado. Para isso, abra um bloco de notas, insira as tags principais
de HTLM, coloque um texto qualquer e aplique os efeitos visuais de sua escolha. Não
se esqueça de salvar o arquivo na extensão .html e abrir em um navegador.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 24/37
Desenvolvimento da Codi�icação com Base no
Mapa do Site e Wireframe
A criação do mapa do site e wireframe são de extrema importância em todos os
projetos, mas, principalmente, no desenvolvimento de projetos com grande
quantidade de conteúdo, no qual terá uma equipe responsável para a programação
do website, e o design digital logicamente terá a preocupação com a questão de
identidade visual. A equipe de desenvolvimento leva em consideração todos os
elementos que compõem o projeto, como também a posição e a localização desses
elementos. Daí a importância de o desenvolvimento do wireframe ser bem elaborado
para que, no momento do design da interface, não apareça problemas.
Após o desenvolvedor receber as informações do mapa do site, o wireframe inicia o
planejamento e desenvolvimento da programação dos códigos da página, para
diminuir a possibilidade de erros e minimizar problemas, além de desenvolver o
mapa do site e o wireframe que podemos considerar que é simplesmente uma
ilustração básica da estrutura e componentes de uma página web, é indicado
desenvolver também outros documentos que facilitam essa etapa que podem ser os
modelos ou protótipos.
De modo geral, os modelos se preocupam com a identidade visual do projeto
contendo detalhes dos elementos visuais que compõem o projeto. Na maioria dos
casos, os modelos se aproximam muito ou são exatamente idênticos ao design �nal
de como �cará o projeto após �nalizado, com todos as imagens, grá�cos, utilizando a
mesma tipogra�a e todos os elementos que compõem a página. Já os protótipos,
também conhecidos como wireframe funcional, são os layouts com alguma
funcionalidade básica já pronta, nos quais é possível visualizar com maior realidade a
navegação do site. Essa etapa é feita antes de iniciar a programação mais complexa
do projeto. Ainda não é possível utilizar todas as funcionalidades do projeto, mas é
possível interagir de uma forma básica e simular a maneira como os usuários irão
eventualmente navegar no site. Os protótipos podem incluir ou não elementos do
design �nalizado.
Aplicação de Boas Práticas na Codi�icação
Por existir inúmeras possibilidades de maneiras de alterar as características dos
elementos de uma página e chegar no mesmo resultado utilizando HTML e CSS, o
HTML5 permite que uma padronização da linguagem possa ser visualizada em
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 25/37
diferentes navegadores sem que apareçam erros. Um exemplo prático é a
formatação da cor de um texto, que pode ser de�nido simplesmente informado a cor
como “red”, os valores hexadecimais, ou valores no modo de cor RGB. Para facilitar o
trabalho do desenvolvedor, a aplicação de boas práticas na codi�cação conforme
W3C facilita muito o trabalho do desenvolvedor. Além de proporcionar uma
consistência de código e nos estilos, otimiza o tempo, evita problemas de
visualização e torna o carregamento da página mais rápido, pois, com um código
mais simples, o navegador lê mais rápido as informações, e, caso seja necessário
inserir informações ou fazer alguma manutenção, esse trabalho se tornará mais fácil.
Para aplicar as boas práticas na codi�cação, deve-se partir do princípio de que o
arquivo HTML é simplesmente para marcar e de�nir a estrutura de elementos que
irão compor a página. Essa marcação tem o objetivo de se preocupar com a
identidade visual da página, e, além de de�nir a posição dos elementos no arquivo
HTML, é necessário ter as informações de cabeçalho, parágrafos e listas. Embora seja
possível de�nir toda a formatação diretamente no arquivo HTML, o aspecto negativo
torna o arquivo muito longo e com grande quantidade de linhas de códigos.
Dessa forma, é recomendado que essas formatações estejam presentes nas folhas
de estilo, que são os arquivos de formatação de CSS, no qual em arquivo separado
do bloco de notas somente terá as linhas de códigos de uma formatação ou estilo
especí�cos, e no HTML só indica o momento que se deve ser usado esse estilo.
Utilizando as folhas de estilo, o navegador e o computador ou dispositivo pelo qual a
pessoa está navegando no site carrega uma vez a folha de estilo, e, toda vez que for
necessário o navegador apresentar a formatação de um texto com a mesma
característica, a página irá carregar mais rápido, pois essas informações dos estilos já
estarão armazenadas na memória do computador ou dispositivo.
Na codi�cação de estruturação de HTML, sugere-se também utilizar o elemento <p>
para parágrafos no lugar de utilizar duas vezes o <br>. As listas são indicadas e
devem ser representadas pelos elementos <ul> ou <ol>, e não pelo conjunto de <p>
(parágrafo). Também não é indicado utilizar o atributo size, pois é relativo ao
tamanho da fonte; no lugar é aconselhável utilizar a propriedade width do CSS.
Normas de Acessibilidade Web
Desenvolver um projeto digital para web seguindo todos os padrões é importante
para que a página seja visualizada de maneira �el nos diversos navegadores
existentes. Mas, além dessa preocupação, é necessário que as páginas sejam
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 26/37
acessíveis, que não existam fatores que di�cultam a navegação nessas páginas,
permitindo que todas as pessoas possam ter a experiência de utilização das páginas.
As normas de acessibilidade web determinam que todas as pessoas devem ter as
mesmascondições de igualdade de poder entender e navegar de forma totalmente
autônoma para ter acesso aos serviços e sites que estão disponíveis na web. Para
isso, a W3C elencou três aspectos importantes que são: a importância, a abrangência
e a universalidade da web; a reciprocidade e a multiplicidade; e a diversidade de
fatores envolvidos.
A importância, a abrangência e a universalidade da web se relacionam à relevância
da disponibilidade de acesso à web não apenas no trabalho, mas também em casa
ou nas viagens, por meio dos computadores convencionais ou smartphones, tanto
nas cidades quanto nos meios rurais em ambientes internos ou externos. Dessa
forma, os pro�ssionais têm de se preocupar cada vez mais que os aspectos visuais
também tenham essa abrangência e a universidade na sua compreensão da
interface dos sites, aplicativos e sistemas. Sobre o aspecto da reciprocidade, está
relacionado ao fato de os projetos web possuírem sempre interações com os
usuários. Sendo assim, a identidade visual deve ser planejada. Prevendo essa
interação com os usuários, todo o projeto de design digital deve levar em
consideração a abrangência que o projeto pode alcançar e também a forma como se
darão essas interações.
Em relação à multiplicidade e à diversidade de fatores envolvidos para que a
acessibilidade realmente aconteça, diversos componentes devem estar funcionando
de forma harmônica, elementos como a informação e o conteúdo que está
disponível na página, no qual se incluem os textos, imagens, vídeos e áudios e como
o código, foram desenvolvidos para disponibilizar esse conteúdo. Os navegadores
também devem cumprir o seu papel de visualizar as informações dos códigos
corretamente para que a acessibilidade seja possível. O fator da tecnologia assistiva
é fundamental para que possa viabilizar o acesso a pessoas idosas ou com
de�ciência e mobilidade reduzida, como programas leitores de tela, dos ampliadores
de tela e dos teclados alternativos, entre outros, e o designer digital precisa levar em
consideração esses aspectos, além de outros aos quais os pro�ssionais de
desenvolvimento precisam estar atentos, principalmente ao que é publicado pela
W3C.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 27/37
praticar
Vamos Praticar
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua, assinale a alternativa correta:
Fonte: Adaptada de EAD.br (2019, on-line).
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 28/37
Para um navegador web exibir corretamente a formatação de um texto, é preciso
que cada parte do texto que possua alguma característica diferente seja marcada,
informando, no código, como é a sua formatação. Com HTML5, é possível indicar
essa formatação para diversas partes do texto por meio de marcações especí�cas.
Nesse sentido, assinale a alternativa que indica qual é o elemento de marcação que
deve ser utilizado na parte azul do site da �gura anterior.
a) <head>
b) <meta>
c) <footer>
d) <title>
e) charset=utf-8
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 29/37
A função embed (incorporar) em uma página de HTML permite integrar conteúdo de
terceiros em um projeto digital, por exemplo, um site ou aplicativo. Esse conteúdo
pode ser informações de redes sociais, vídeos, podcasts, infográ�cos, narrações de
textos até APIs. API – Application Programming Interface, Interface de Programação
de Aplicativos, é um grupo de rotina padrão determinado por um programa, que
permite utilizar as funções desse programa em uma página ou outros aplicativos,
sem ter a necessidade que esse programa seja implementado no sistema, pois o site,
por exemplo, só irá utilizar algumas funções ou serviços desse programa. De forma
geral, enquanto a pessoa utiliza um aplicativo ou site, esse pode estar conectado a
diversos outros sistemas e aplicativos via APIs sem que se perceba.
O funcionamento de um API se dá por meio da comunicação de diversos códigos,
que de�nem comportamentos especí�cos de elementos em uma interface,
interligando funções como busca de imagens, notícias, artigos etc. O Google Maps é
um exemplo de API que disponibiliza o seu código para ser usado em outros sites, no
qual pode ser personalizado, como o endereço de uma empresa, e inserir dentro de
uma página do site. Utilizando APIs, os desenvolvedores de softwares e
programadores de páginas web aumentam o leque de possibilidades de desenvolver
páginas com diversos conteúdos e recursos.
Embedando APIs em SitesEmbedando APIs em Sites
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 30/37
Plataformas On-line de códigos para APIs
O Google Developers é uma plataforma que possui código-fonte aberto e uma
relação de softwares que suportam APIs da Google. O foco principal é para os
desenvolvedores de softwares e programadores, mas é importante que o designer
digital conheça essa plataforma para sugerir soluções e incrementações nas
interfaces. O acesso ocorre por meio do link https://developers.google.com/, que
possui uma grande quantidade de APIs para inserir em projetos web, como o Google
Maps, o qual está disponível no link https://developers.google.com/maps/?hl=pt-br,
entre outros.
Com o foco para os designers digitais, a plataforma Google Design,
https://design.google/, é formada por escritores e desenvolvedores, mas liderado por
um grupo de designers da Google, voltado a produzir eventos e promover parcerias
criativas que aprimoram o design e a tecnologia. Nessa plataforma, também há um
link para o site Material Design, que possui uma série de diretrizes desenvolvidas
pelo Google para padronizar o que envolve o seu sistema operacional o Android,
para que os projetos não tenham problemas de usabilidade e unidade visual.
Embora todo o projeto digital tenha a sua identidade visual, é necessário apresentar
uma unidade visual de acordo com o sistema operacional que será visualizado (no
caso, o Android).
A plataforma on-line Google Fonts disponibiliza fontes de alta qualidade para usar em
projetos web, liberadas sob licenças de código aberto que está disponível no link
https://developers.google.com/fonts/. Possui um campo especí�co para auxílio de
criação de aplicativos dinâmicos consultando o Google Fonts, para obter uma lista
precisa das famílias de fontes disponíveis. Também possui opção para classi�car a
Figura 2.7 - Exemplo de incorporação no Google Maps
Fonte: Adaptada de EAD.br (2019, on-line).
https://developers.google.com/
https://developers.google.com/maps/?hl=pt-br
https://developers.google.com/fonts/
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 31/37
lista de famílias em ordem alfabética, por data adicionada, por número de estilos,
por tendência ou por popularidade. Essas informações mais avançadas são
destinadas aos desenvolvedores de aplicativos e web, mas é importante o designer
digital ter o conhecimento para utilizar em seus projetos.
Ajustes de Imagens e Textos
Em uma página HTML, além de inserir as imagens e textos é possível aplicar alguns
ajustes como de alinhamento utilizando o atributo align, que possui os valores left
(alinhamento à esquerda), right (direita), top (alinhamento da imagem com o topo do
elemento mais alto da linha), bottom (alinhamento da imagem com a base mais baixa
dos outros elementos da linha) e center (centralizado). Veja a seguir o exemplo do
código que apresenta um alinhamento de uma imagem no formato .png, que está
salvo na pasta (diretório) imagens, com o nome de logo, alinhado à direita: <img
align="right" src="imagens/logo.png"/>. Também é possível ajustar as margens das
imagenspor meio do atributo vspace, que indica as dimensões da margem nas
bordas superior e inferior da imagem, e o atributo hspace, que indica as dimensões
da margem nas bordas esquerda e direita da imagem. Veja o exemplo de aplicação
de uma imagem com 30 pixels nas bordas superior e inferior e 10 px de margens nas
bordas esquerda e direita: <img vspace="30px" hspace="10px"
src="imagens/logo.png"/>.
Em uma página HTML, também é possível inserir um texto que é exibido somente
quando é mantido o mouse por alguns segundos sobre a imagem pelo atributo title,
como apresentado no exemplo: <img title="Este é o logo da empresa"
src="imagens/logo.png"/>. Para inserir uma borda na imagem, o atributo é o border,
exemplo de uma imagem com uma borda de 10 pixels: <img border="10px"
src="imagens/logo.png"/>.
Nos textos, são permitidos efetuar ajustes além dos mais básicos. Também existem
tags para formatação de tamanho do texto, como a <small>, que de�ne o texto em
uma letra de menor no tamanho, e a tag <big>, que de�ne o texto em uma letra de
maior tamanho, por exemplo: <big>Texto com letra grande.</big>. Os alinhamentos
de textos funcionam da mesma maneira dos alinhamentos das imagens. Outra tag
para ajustes é a <hr>, que cria uma linha horizontal, como se fosse separador. Segue
um exemplo de sua aplicação: <hr>. Abaixo desse texto, aparecerá uma linha
horizontal. <hr/>. Agora que você conhece essas formatações, para praticar comece
a produzir um portfólio utilizando esses e todos os recursos que você aprendeu.
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 32/37
praticar
Vamos Praticar
No mundo do design digital, a cada dia aparecem novas ferramentas para criar, testar e
gerenciar as interfaces de aplicações, e os _______ facilitam a vida dos desenvolvedores e
ganham um papel estratégico no desenvolvimento de web sites e aplicativos.
Assinale a alternativa que preenche corretamente a lacuna.
a) APIs
b) HTML+ e HMTL5
c) CSS
d) servidores.
e) hospedeiros
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 33/37
indicações
Material Complementar
LIVRO
Guia front-end
Diego Eis
Editora: Casa do Código
ISBN: 978-85-5519-012-4
Comentário: O autor aborda o tema front-end, com uma
linguagem de fácil entendimento para estudantes que
pretende entrar na área, ou para pro�ssionais que buscam
se especializar. Também são analisadas as necessidades do
mercado e a postura pro�ssional que se deve ter para poder
atuar na área
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 34/37
FILME
Helvetica, o �ilme
Ano: 2007
Comentário: Nesse documentário sobre design de
tipogra�a, grá�ca e cultura visual global, são apontados
fatores como modernismo, desenho tipográ�co, variações,
legibilidade e expressividade. O documentário mostra o uso
do tipo nos metrôs de Londres, nas ruas de Nova York, em
livros, logotipos de lojas, portas, outdoors e logo.
Para conhecer mais sobre o �lme, acesse o trailer a seguir.
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... 35/37
conclusão
Conclusão
Nesta unidade, foram abordados temas técnicos, como compreender a importância
de um wireframe e mapa de um site, e também compreender a relevância dos
assuntos de design de interfaces que fazem parte de todos os projetos de design
digital. Também foi apresentada a importância do trabalho em equipe,
principalmente com pro�ssionais de desenvolvimento de softwares e de
programação para que, trabalhando em conjunto, sejam apresentados projetos que
utilizem todos os recursos disponíveis de uma interface e também de back-end,
principalmente com a utilização de APIs, que abre uma gama imensa de
possibilidades de uso nos projetos de design digital.
referências
Referências Bibliográ�cas
EAD.br. Site. Disponível em: https://www.eadlaureate.com.br/. Acesso em: 13 dez.
2019.
GEEST, T. M. Web site design is communication design. Amsterdã: John Benjamins
Publishing Company, 2001.
KALBACH, J. Design de navegação web: otimizando a experiência do usuário, 1. ed.
2009. Disponível na Minha Biblioteca.
SANDERS, B. Smashing HTML5 [recurso eletrônico]: técnicas para a nova geração da
web. Tradução de Mariana Bandarra; revisão técnica de Diego Eis. Porto Alegre:
https://www.eadlaureate.com.br/
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 36/37
Bookman, 2012. Disponível em: Minha Biblioteca (UAM) -
https://integrada.minhabiblioteca.com.br/#/books/9788540700666/c�/0!/4/6@0:0
TERUEL, C. E. HTML 5 – Guia prático. 2. ed. 2014. Disponível na Minha Biblioteca,
W3SCHOOLS. HTML Tutorial. Disponível em:
http://www.w3schools.com/html/default.asp. Acesso em: 26 nov. 2018.
https://integrada.minhabiblioteca.com.br/#/books/9788540700666/cfi/0!/4/6@0:0
http://www.w3schools.com/html/default.asp
09/04/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671... 37/37Materiais relacionados
112 pág.
43 pág.
Perguntas relacionadas
