DESIGN DIGITAL 2

Prévia do material em texto

28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&PA… 1/43
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
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&PA… 2/43
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.
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&PA… 3/43
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
Organização Organização Front-endFront-end
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&PA… 4/43
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 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
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&PA… 5/43
com a quantidade de canais que o modo de cor possui. Para o uso digital, deve
ser utilizado o modo de cor RGB.
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
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
que, quando uma imagem é aberta, é criado automaticamente um canal para cada
cor, em caso de uma imagem em RGB: um para o vermelho, outro para o verde e o
terceiro para a cor azul. Para saber mais, acesse o link a seguir.
ACESSAR
https://helpx.adobe.com/br/photoshop/using/channel-basics.html
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&PA… 6/43
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 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 imagemque será visualizada em dispositivos digitais 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.
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&PA… 7/43
É 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.
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
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&PA… 8/43
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.
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&PA… 9/43
Tag Função Atributo
background
Con�gura as
propriedades do plano
de fundo.
background-color
background-image
background-repeat
background-attachment
background-position
background-
attachment
Especi�ca se uma
imagem de plano de
fundo será �xa ou rola
com o resto da página.
scroll, �xed
background-
color
Con�gura a cor do
plano de fundo de um
elemento.
color-rgb, color-hex, color-
name, transparent
background-
image
Con�gura uma
imagem como plano
de fundo.
url, none
background-
position
Con�gura a posição
inicial de uma imagem
de plano de fundo.
top left, top center, top
right, center left, center,
center right, bottom left,
bottom center, bottom
right, x-% y-%, x-pos y-pos.
background-
repeat
Estabelece se uma
imagem de plano de
fundo será repetida ou
não.
repeat, repeat-x, repeat-y
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 10/43
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
é 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 é
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 11/43
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 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
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 12/43
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 criarum 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 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.
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 13/43
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ém construir �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.
Figura 2.3 - Exemplo de wireframe 
Fonte: Elaborada pelo autor.
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 14/43
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.
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 15/43
praticar
Vamos Praticar
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
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 16/43
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>
Inserindo LinksInserindo Links
https://www.eadlaureate.com.br/
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 17/43
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 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
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 18/43
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
textona 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>
a:link {
               color: green;
               text-decoration: none;
}
a:visited {
               color: blue;
               text-decoration: none;
}
a:hover {
              color: red;
               text-decoration: underline;
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 19/43
}
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 exemplo de
menu com três links: cursos, polos e vestibular.
<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,
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 20/43
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. 
Além do Dreamweaver, a Adobe disponibiliza outros softwares e plataformas
para construção de layout, como:
Figura 2.5 - Reprodução do software Adobe Dreamwever CC 2019 
Fonte: Elaborada pelo autor.
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 21/43
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.
Notism.
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 22/43
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.
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 23/43
(  ) Na �gura, é representada na Linha 3 com o código href="curso.html".
(  ) 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.
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 24/43
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
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 25/43
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çãoda 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.
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 26/43
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.
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 pode
percorrer 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 é
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 27/43
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.
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 é
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 28/43
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
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.
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 29/43
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çãoou 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 acessíveis, que não existam fatores que di�cultam a navegação
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 30/43
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 mesmas condiçõ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
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 31/43
de outros aos quais os pro�ssionais de desenvolvimento precisam estar atentos,
principalmente ao que é publicado pela W3C.
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:
reflitaRe�ita
Segundo a Cartilha de Acessibilidade na Web, da W3C: “Acessibilidade na web signi�ca que
pessoas com de�ciência podem usar a web. Mais especi�camente, a acessibilidade na web
signi�ca que pessoas com de�ciência podem perceber, entender, navegar, interagir e
contribuir para a web. E mais – ela também bene�cia outras pessoas, incluindo pessoas
idosas com capacidades em mudança devido ao envelhecimento”. Pense e re�ita se os
sites e aplicativos que você conhece ou têm essa preocupação de acessibilidade lendo a
cartilha na íntegra.
https://www.w3c.br/pub/Materiais/PublicacoesW3C/cartilha-w3cbr-acessibilidade-web-
fasciculo-I.html.
https://www.w3c.br/pub/Materiais/PublicacoesW3C/cartilha-w3cbr-acessibilidade-web-fasciculo-I.html
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 32/43
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
Fonte: Adaptada de EAD.br (2019, on-line).
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 33/43
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
Embedando APIs em SitesEmbedando APIs em Sites
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 34/43
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.
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 designersda Google, voltado a produzir eventos e
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
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 35/43
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 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 imagens
por 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
https://developers.google.com/fonts/
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 36/43
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.
praticar
Vamos Praticar
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 37/43
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
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 38/43
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
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 39/43
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
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 40/43
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.
https://www.eadlaureate.com.br/
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 41/43
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: 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
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 42/43
28/03/2021 Ead.br
https://anhembi.blackboard.com/webapps/late-course_content_soap-BBLEARN/Controller?ACTION=OPEN_PLAYER&COURSE_ID=_671126_1&P… 43/43