Apostila - Webdesign

Prévia do material em texto

WEBDESIGN
PROF. ME. VAGNER BASQUEROTO MARTINS
Reitor:
Prof. Me. Ricardo Benedito de 
Oliveira
Pró-Reitoria Acadêmica:
Maria Albertina Ferreira do 
Nascimento
Diretoria EAD:
Prof.a Dra. Gisele Caroline 
Novakowski
PRODUÇÃO DE MATERIAIS
Diagramação:
Alan Michel Bariani
Thiago Bruno Peraro
Revisão Textual:
Fernando Sachetti Bomfim
Marta Yumi Ando
Simone Barbosa
Produção Audiovisual:
Adriano Vieira Marques
Márcio Alexandre Júnior Lara
Osmar da Conceição Calisto
Gestão de Produção: 
Cristiane Alves
© Direitos reservados à UNINGÁ - Reprodução Proibida. - Rodovia PR 317 (Av. Morangueira), n° 6114
 Prezado (a) Acadêmico (a), bem-vindo 
(a) à UNINGÁ – Centro Universitário Ingá.
 Primeiramente, deixo uma frase de Só-
crates para reflexão: “a vida sem desafios não 
vale a pena ser vivida.”
 Cada um de nós tem uma grande res-
ponsabilidade sobre as escolhas que fazemos, 
e essas nos guiarão por toda a vida acadêmica 
e profissional, refletindo diretamente em nossa 
vida pessoal e em nossas relações com a socie-
dade. Hoje em dia, essa sociedade é exigente 
e busca por tecnologia, informação e conheci-
mento advindos de profissionais que possuam 
novas habilidades para liderança e sobrevivên-
cia no mercado de trabalho.
 De fato, a tecnologia e a comunicação 
têm nos aproximado cada vez mais de pessoas, 
diminuindo distâncias, rompendo fronteiras e 
nos proporcionando momentos inesquecíveis. 
Assim, a UNINGÁ se dispõe, através do Ensino 
a Distância, a proporcionar um ensino de quali-
dade, capaz de formar cidadãos integrantes de 
uma sociedade justa, preparados para o mer-
cado de trabalho, como planejadores e líderes 
atuantes.
 Que esta nova caminhada lhes traga 
muita experiência, conhecimento e sucesso. 
Prof. Me. Ricardo Benedito de Oliveira
REITOR
33WWW.UNINGA.BR
UNIDADE
01
SUMÁRIO DA UNIDADE
INTRODUÇÃO .............................................................................................................................................................4
1. CONCEITOS DE WEBDESIGN ...............................................................................................................................5
2. GESTALT PARA O DESIGN ................................................................................................................................... 10
2.1 A TIPOGRAFIA NO WEBDESIGN ....................................................................................................................... 14
3. INTERNET E CONSUMO ...................................................................................................................................... 16
4. POSICIONAMENTO DE MARCA .......................................................................................................................... 19
CONSIDERAÇÕES FINAIS ........................................................................................................................................20
CONCEITOS GERAIS PARA PROJETOS WEB
PROF. ME. VAGNER BASQUEROTO MARTINS
ENSINO A DISTÂNCIA
DISCIPLINA:
WEBDESIGN
4WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
INTRODUÇÃO
A internet é, como podemos chamar, um espaço onde na atualidade existe praticamente 
todo o tipo de informação acessível, dos mais diversos assuntos, e que pode facilitar a vida das 
pessoas na busca por produtos, serviços, informações, conhecimento e entretenimento.
 Dessa forma, desde sua criação na década de 1990 até os dias atuais, ocorreu uma série 
de mudanças que passam por questões tecnológicas e até mesmo a forma como as pessoas se 
comportam, pois a sua utilização nos afeta de forma profunda, tendo em vista que, no cotidiano, 
boa parte das tarefas das pessoas passa pela internet.
Atualmente, compramos, nos divertimos, estudamos, aprendemos, nos comunicamos 
pela internet, e boa parte desse movimento, dessa “circulação” de pessoas, acontece em ambientes 
como sites, sejam de empresas, indivíduos ou instituições, nos quais as informações acerca de 
determinado assunto estão distribuídas de forma estruturada para que ocorra a interação das 
pessoas com tais dados.
Assim, quando navegamos na web, passamos por uma in� nidade de informações 
dispostas de inúmeras maneiras, com os mais variados propósitos e é justamente nesse aspecto 
que o Webdesign é importante, no sentido de contribuir para que essas informações sejam 
dispostas de maneira mais agradável, intuitiva e e� caz para as pessoas.
Portanto, pro� ssionais do Design podem se encaixar de forma contundente no 
desenvolvimento de sites para empresas, pessoas e instituições, contribuindo para que estejam na 
internet bem posicionadas, garantindo sua relevância no alcance às pessoas que fazem parte de 
seu público-alvo.
Todavia, criar um site requer uma série de conhecimentos importantes para que os 
projetos possam estar em sintonia com os recursos contemporâneos e, assim, conseguir estabelecer 
contato efetivo com as pessoas, pois devido ao número gigantesco de sites, o mais comum é não 
fazer diferença alguma à maioria dos projetos que estão funcionando. Assim, é determinante que 
os pro� ssionais, ao desenvolverem sites, estejam atentos aos conceitos básicos de Design, além 
daqueles de programação, inerentes ao funcionamento deles.
Conhecimentos básicos de composição visual, utilização de tipogra� as, linguagens de 
programação como HTML e CSS, hospedagem, domínios, terminações, redes sociais e � uxo de 
tráfego de usuários, assim como gestão de conteúdos e atualizações, fazem parte do repertório 
essencial de pro� ssionais que irão desenvolver projetos web de sites e até mesmo de aplicativos, 
que nada mais são que variações de sites.
Sendo assim, o conteúdo que será apresentado na sequência visa a capacitá-lo para o 
desenvolvimento de projetos web de sites de forma essencial e objetiva.
5WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
1. CONCEITOS DE WEBDESIGN
O Webdesign é uma área do conhecimento, especi� camente do Design, que contribui 
para que a informação seja acessível ao maior número de pessoas possível, de forma visual e 
estruturada, a � m de alcançar rapidamente aquelas pessoas que podem se interessar pelas 
informações e conteúdo que determinada empresa, pessoa ou instituição queira compartilhar, 
comercializar ou produzir (BEAIRD; GEORGE, 2016).
Figura 1 - Webdesign. Fonte: Freepik (2018).
Assim, entender os conceitos do Webdesign é fundamental para pro� ssionais que 
queiram atuar no setor, assim como pessoas que estejam empreendendo, de forma a conseguir 
dialogar com aqueles que irão desenvolver seus projetos na web, garantindo que possam falar a 
mesma língua, uma vez que ao entender de determinado assunto, mesmo que de forma básica, a 
conversa e encaminhamentos de projetos são facilitados.
Portanto, podemos entender que a essência do Webdesign está na junção entre 
funcionalidade e beleza estética de forma harmoniosa, objetivando garantir que essa fusão seja 
interessante às pessoas, sendo útil e prática sempre que possível, uma vez que as pessoas querem 
perder cada vez menos tempo em sites nos quais não conseguem encontrar as informações que 
desejam (BEAIRD; GEORGE, 2016).
Webdesign é uma das áreas do Design, na qual profi ssionais podem atuar 
e desenvolver projetos, que serão utilizados por empresas, instituições e 
profi ssionais de outras áreas, trazendo diversas possibilidades de atuação. É 
possível atuar desde projetos que serão produzidos de forma física até aqueles 
que permanecerão no meio digital.
6WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Dessa forma, é fundamental que as pessoas sejam colocadas como centro dos projetos, 
ou seja, na criação e desenvolvimento dos sites que forem projetados, uma vez que serão elas 
a utilizá-los. Isso poderá garantir que os projetos estejam mais adequados ao que as pessoas 
procuram e, dessa forma, podem fazer mais sucesso e ser mais efetivos em seus objetivos.
Figura 2 - Pessoa navegando.Fonte: Freepik (2017).
Pensando nisso, é possível fazer uma analogia entre pro� ssionais de Design e Programação, 
pois enquanto o primeiro tipo mantém seu foco na experiência das pessoas e na linguagem que elas 
utilizam ao se expressarem, o segundo tipo de pro� ssionais está mais estabelecido na linguagem 
de programação, ou seja, no funcionamento de algum tipo de comando, sem necessariamente 
levar em conta as pessoas que irão utilizar tal recurso.
Por isso, são mestres em linguagens não humanas, totalmente analíticas e cheias de 
detalhes, muitas vezes não compreendidas pelas pessoas, o que pode tornar a experiência de 
navegar em determinados sites algo penoso e fadado ao esquecimento, provocando rejeição por 
não ter proporcionado o tipo de interação desejada.
Portanto, podemos a� rmar que o webdesigner pode ser considerado o pro� ssional que 
estabelece a ligação entre a linguagem de programação e algo visual e funcional, que é entendido 
pelas pessoas de forma geral e que pode ser considerado até mesmo intuitivo e que contribui para 
que as pessoas encontrem aquilo que procuram.
Figura 3 - Pro� ssional de Web. Fonte: Freepik (2019).
7WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
É justamente a transformação de códigos binários, que é a essência de qualquer 
programação, em elementos visuais e funcionais aos meros mortais, às pessoas que utilizam 
a web para os � ns comuns de entretenimento, aquisição de produtos, de conhecimento e até 
mesmo relacionamentos, ou seja, o aspecto humano para os projetos web.
Na atualidade, os sites são algo essencial para qualquer empresa, instituição e pro� ssional 
que queira divulgar e comercializar seus produtos e serviços, mesmo que seja meramente 
institucional, daqueles tipos que somente apresentam as informações básicas acerca dos negócios 
ou instituições; assim, estar na internet sem informações fáceis de serem encontradas é algo 
inimaginável (KRUG, 2014).
Figura 4 - Empresas na Web. Fonte: Freepik (2018).
Além disso, é muito comum hoje encontrar recursos que possibilitam que as pessoas 
tenham experiências cada vez mais personalizadas e imersivas, com possibilidades que vão desde 
temas especí� cos, personalizações, interações com outras pessoas, interações com o produto ou 
serviço, uso dos mais variados recursos, como imagens, vídeos, animações tridimensionais etc.
Isso tudo faz com que a forma com a qual interagimos com os sites esteja também em 
constante mudança, o que acompanha os avanços tecnológicos que ocorrem com cada vez mais 
rapidez, e que vai desde a velocidade da conexão disponível até ferramentas de desenvolvimento 
web, que facilitam e permitem mais variedades e possibilidades aos projetos.
Assim, um dos pontos mais importantes do webdesign é a interação das pessoas com 
as informações na web. Dessa forma, o uso correto de tais recursos disponíveis pode contribuir 
para que os projetos sejam bem-sucedidos na internet, tendo em vista que, em nosso dia a dia, 
a utilizamos para diversas funções. Pro� ssionais de webdesign precisam, portanto, dominar a 
utilização dos recursos no sentido de potencializar as possibilidades de satisfação das pessoas ao 
acessarem nossos projetos web (KRUG, 2014).
Um outro aspecto importante de ser ressaltado com relação ao webdesign é o fato de 
essa área do conhecimento caminhar lado a lado com o marketing, tendo em vista que um site é 
parte integrante do conjunto de ferramentas que apresenta e constrói a relação entre um negócio, 
instituição e pro� ssional com as pessoas que podem vir a consumir e interagir com seus produtos 
e serviços, demonstrando sua importância no processo de comunicação com o mercado.
Podemos entender que essa relação entre Design e Marketing acontece quando os aspectos 
visuais se incorporam aos comunicacionais e formam, assim, um conjunto de ações que podem 
estabelecer uma série de conexões importantes entre os atores envolvidos nessa relação de troca 
na qual todos nós participamos de alguma forma (MORAIS, 2018).
8WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Figura 5 - Webdesign como ferramenta de Marketing. Fonte: Freepik (2016).
Então, outro aspecto pode ser evidenciado e deve ser citado aqui: o fato de que o 
pro� ssional de webdesign pode ser considerado uma espécie de pro� ssional híbrido, que recebe 
formação multidisciplinar, que versa por caminhos artísticos e técnicos, sendo responsável por 
essa mescla que dá forma aos projetos web de sites, traduzindo códigos em formas visuais e 
estruturas organizadas que ajudam as pessoas a chegar nas informações que estejam procurando.
Ainda pensando nesse aspecto, em que existe a utilização de elementos e conhecimentos 
multidisciplinares, no webdesign, é preciso estabelecer conexões com o estudo das cores e a 
psicologia embutida nessa utilização, conhecimentos de semiótica, quanto ao uso de formas e 
estruturas para transmitir mensagens aos usuários, transformando isso tudo em um conjunto de 
elementos funcionais técnica e esteticamente.
Quanto aos conhecimentos técnicos, podemos destacar que é necessário que tenha 
domínio sobre os so� wares que serão utilizados no desenvolvimento dos projetos web, como o 
pacote Adobe, com Photoshop, Illustrator, Indesign ou CorelDraw, e conheça, ao menos de forma 
básica, as principais linguagens de programação, como HTML e CSS, para que possa estabelecer 
bom diálogo em projetos que envolvam equipes multidisciplinares, o que é comum no mercado.
Figura 6 - Extensões de arquivos de Webdesign. Fonte: Freepik (2015).
9WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Isso é importante para momentos em que sejam necessárias mudanças em alguma parte 
do código-fonte dos projetos web, ou mesmo alterações de partes grá� cas, que depois receberão 
seus códigos na estrutura por trás daquilo que as pessoas veem na tela de seus aparelhos no dia 
a dia.
Então pode ser interessante, para as pessoas que queiram se aprofundar nos conhecimentos 
necessários para projetos mais complexos de web, conhecer também códigos de programação 
como PHP, Javascript e ASP, além de so� wares de edição de vídeo. Mas isso não as impedirá de 
atuar na área, como poderemos ver mais adiante no conteúdo.
Além disso, o que será o maior diferencial, seja em projetos web, grá� cos ou de produtos, 
é a criatividade e habilidade em transformar ideias em projetos reais e utilizáveis pelos usuários de 
forma e� caz e satisfatória, de maneira a alcançar os objetivos estabelecidos no desenvolvimento 
e, se possível, superar aquilo que puder, no sentido de agregar valor à experiência dos usuários.
Nesse aspecto, o processo criativo acontece de formas e caminhos diferentes para 
cada pessoa. Mesmo que existam maneiras pré-estabelecidas para que esse processo ocorra, 
é importante tentar identi� car quais são os caminhos que mais se adequam ao seu estilo de 
trabalho e organização pessoal. Isso pode envolver desde levar um caderno de anotações contigo, 
até utilizar uma agenda eletrônica no celular, utilizar mapas conceituais, brainstorm de ideias e 
uma série de técnicas conhecidas ou não, que podem ser descobertas.
Dessa forma, podemos entender que o webdesign e os pro� ssionais que atuam nessa 
área são relevantes para o mercado, ainda mais na atualidade, em que, cada vez mais, existem 
negócios que já nascem somente na web, sem existirem de maneira física, assim como ocorre 
uma migração cada vez maior de negócios ditos mais tradicionais, para terem uma parte de suas 
operações via web, objetivando alcançar mais pessoas, as quais estão cada vez mais conectadas e 
realizando suas diversas ações de forma virtual (ZENONE, 2017).
Assim, podemos veri� car que é uma área de atuação que demanda pro� ssionais ágeis 
e criativos, sendo necessário um processo constante de atualização e aprimoramento, mas com 
conhecimentos entre básicos e intermediários, já é possível realizar projetos interessantes de 
webdesign.
Essa atuação podevariar desde um trabalho solo, como pro� ssional autônomo, ou como 
é conhecido no mercado, freelancer, com a possibilidade de ter seu próprio CNPJ (Cadastro 
Nacional da Pessoa Jurídica) em forma de MEI (Microempreendedor Individual), e outras 
formas legais. Além disso, pode ingressar em agências de Design, Marketing, Publicidade, 
Indústrias, e empresas dos mais diversos ramos de atividades, sendo responsável pelos projetos 
web, ou fazendo parte de uma equipe responsável pela imagem das empresas, assim como pela 
comunicação em seus diversos canais com o público em geral.
É importante ressaltar que cada uma dessas formas de trabalho possui um tipo de rotina 
distinta, além da dinâmica, e isso deve ser levado em consideração ao se optar pelo caminho 
escolhido, sendo prudente formular algum tipo de plano, com detalhes e formas de como 
determinada meta poderá ser alcançada.
Portanto, dentre os conceitos gerais do webdesign, é possível entender que existe uma 
série de aspectos que precisam ser levados em consideração, assim como em outras pro� ssões, 
mas cada uma com suas especi� cidades, que precisam ser atendidas para que possam, assim, 
contribuir para o sucesso.
10WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
2. GESTALT PARA O DESIGN
Como o webdesign é uma das áreas do Design, não podemos deixar de abordar os 
princípios da Gestalt, devido à sua importância para o processo de comunicação. Assim, toda 
vez que se tem contato visual com algum objeto e isso é bom, ou seja, positivo, dentro de suas 
referências, é bem possível que ali tenha sido aplicado algum princípio da Gestalt. Isso acontece, 
pelo fato de esses princípios fazerem parte de nós, ou seja, na forma como entendemos visualmente 
aquilo que está ao nosso redor (OLIVEIRA, 2016).
Compreender tais princípios é importante, para que possam ser aplicados em nossos 
projetos e, dessa forma, conseguirmos alcançar resultados mais expressivos naquilo que 
desenvolvemos, objetivando sempre a satisfação dos usuários e a e� cácia da mensagem proposta. 
Dessa forma, é importante que você entenda esses conceitos e como aplicá-los em seus projetos 
(OLIVEIRA, 2016).
Além disso, com conhecimento dos princípios da Gestalt, temos uma maior amplitude 
em termos de repertório e formas de ações quanto ao desenvolvimento dos projetos, podendo 
utilizar essas técnicas para produzir mensagens especí� cas e personalizadas, de acordo com o 
público que se queira atingir.
Gestalt é um movimento vindo da psicologia que busca atuar na teoria da forma, sendo 
utilizada pelo Design para trazer signi� cados às formas, e é usado, mesmo que de maneira 
inconsciente, por pro� ssionais da área, assim como de outras áreas da comunicação. Ela é 
importante, pois contribui para que as pessoas entendam a mensagem e as assimile de maneira 
mais e� ciente (MARCO; SOUZA; COSCI, 2018).
Seu signi� cado tem origem germânica, que traz sua função explicitamente, ou seja, para 
que serve. Assim, Gestalt signi� ca, em português, forma ou � gura, e teve sua adoção por essa 
linha de estudos da psicologia para signi� car formas e � guras, ou um conjunto delas.
Você consegue perceber como o Design é uma área do conhecimento que reúne 
uma série de assuntos para trazer subsídios aos projetos desenvolvidos? Isso 
acontece, pois como são desenvolvidos projetos que trazem consigo signifi cados, 
é necessário que sejam incorporados conhecimentos da comunicação e 
linguagem, como os da Gestalt e Semiótica, os quais fornecem conceitos e 
informações importantes para fundamentar criações realizadas no Design, e, 
consequentemente, na vertente do Webdesign.
A Gestalt é interessante para o Design e a área do Webdesign, pois tem sua origem 
na psicologia, o que faz todo o sentido para as áreas de comunicação, pois como 
trabalha com os signifi cados, contribui para que os projetos façam mais sentido 
para as pessoas, pois aproveita o contexto e repertório das pessoas nas diversas 
faces do cotidiano, potencializando as mensagens de forma efetiva.
11WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Assim, podemos entender a Gestalt como um conjunto de entidades de diversos tipos, 
que quando juntas, formam um determinado conceito, um padrão, ou ainda algum tipo de 
con� guração uni� cada, que pode variar em diversos sentidos. Ela nos ajuda a entender as partes 
e o todo, assim como ocorre essa relação em que percebemos partes com destaque, ou o todo 
sendo o principal.
Podemos a� rmar ainda que, segundo a Gestalt, nossa mente preenche as informações 
daquilo que vemos, ou quando lemos algo, nossa vivência remete a uma imagem, uma � gura, 
com suas formas, nos ajudando a decifrar o código gerado nessa interação, ou completa um 
caminho, linhas e preenchimentos.
Então, podemos entender que nosso cérebro sempre busca conexão com um determinado 
aspecto para chegar às soluções mais fáceis possíveis, ou seja, estratégias mais e� cientes, para gastar 
menos energia e tempo, e isso pode acontecer, por exemplo, com a formação de agrupamentos 
por partes semelhantes e que contribua para um entendimento ou resultado (MARCO; SOUZA; 
COSCI, 2018).
Assim, da mesma forma que tais conceitos e forma de o cérebro pensar servem para 
realizar os agrupamentos, também é válido para a separação, ou afastamento, ou mesmo isolar 
algo, que pode ser proposital para chamar a atenção para um determinado ponto a depender 
daquilo que desejamos transmitir em determinado projeto. Assim, dentre os principais conceitos 
da Gestalt, podemos destacar os seguintes: Semelhança, Proximidade, Continuidade, Pregnância, 
Fechamento e Unidade.
A lei da semelhança é baseada no agrupamento de objetos similares, de forma a estabelecer 
algum tipo de associação, como em um conjunto de círculos e quadrados, em que se intercala 
cada uma dessas formas para estabelecer alguma sequência, ou conjunto, e que será interpretado 
pelas pessoas possivelmente pela sequência de formas, não pela forma de arranjo por linhas e 
verticais ou horizontais, por exemplo, mas sim por colunas de quadrados e círculos (GOMES 
FILHO, 2006).
Este artigo é interessante, pois trata de uma forma mais detalhada da origem da 
Gestalt, de modo a contribuir com o conhecimento desse importante aspecto do 
Design para os profi ssionais que irão atuar na área de comunicação. E mesmo 
sendo um pouco mais antigo, ainda assim, traz informações relevantes para os 
dias atuais.
BEHRENS, R. R. Art, Design and Gestalt Theory. Leonardo The MIT 
Press, [s. l.], v. 31, n. 4, p. 299-303, ago. 1998. Disponível em: <https://
muse.jhu.edu/article/607797/>. Acesso em: 4 jun. 2020.
12WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Figura 7 - Semelhança. Fonte: O autor.
Na lei de proximidade, o que podemos entender e ver é que objetos que estejam próximos 
possuem a tendência de se agruparem, formando uma unidade, e isso � cará mais claro quanto 
menor for o espaço entre os elementos. É possível notar que os quatro grupos são mais evidentes 
que o total de círculos (GOMES FILHO, 2006).
Figura 8 - Proximidade. Fonte: O autor.
A lei de continuidade se estabelece pela conexão de pontos por linhas curvas ou retas, 
que, de forma geral, podem indicar caminhos; dessa forma, em linhas pontilhadas, temos a 
capacidade de ver a complementação com linhas imaginárias contínuas (GOMES FILHO, 2013).
Figura 9 - Continuidade. Fonte: O autor.
13WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Conhecida como lei da Pregnância, institui que os objetos sejam vistos de forma mais 
simples, sendo conhecida também como lei da simplicidade, justamente por ter como premissa 
que formas sejam interpretadas da maneira mais simples possível (MARCO; SOUZA; COSCI, 
2018).
Figura 10 - Pregnância. Fonte: O autor.
Na lei do fechamento, o cérebro agrupa os elementos, mesmo que incompletos, para 
formar uma � gura, ou seja, para completá-lo em nossa mente, a � m de possibilitar que possamosver e entender o objeto completo, mesmo que ele não exista de fato (GOMES FILHO, 2013).
Figura 11 - Fechamento. Fonte: O autor.
Já a lei da uni� cação pode ser entendida como a junção entre a parte da � gura que 
vemos e o vazio, formando, ou preenchendo a forma para completar a mensagem que deve ser 
entendida, se apropriando do vazio para conseguir construir a forma, podendo ser até mesmo 
possível enxergar as linhas divisórias da � gura (GOMES FILHO, 2006).
Figura 12 - Uni� cação. Fonte: O autor.
Desse modo, podemos entender que as leis da Gestalt podem ser utilizadas, sempre que 
possível de forma consciente, para agregar mais qualidade técnica aos projetos, trazer soluções 
simples e inovadoras às mais diversas situações.
14WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
2.1 A Tipografia no Webdesign
Outro aspecto essencial no webdesign está na escolha da tipogra� a, ou como conhecemos, 
as fontes que serão utilizadas em projetos web, pois dentre todo o conteúdo na internet, a maior 
concentração é textual; sendo assim, é importante conseguir estabelecer uma boa relação na 
escolha das fontes que farão parte dos projetos desenvolvidos (FONSECA, 2008).
Figura 13 - Tipogra� as. Fonte: Freepik (2019).
A tipogra� a exerce impacto direto na experiência das pessoas na utilização dos sites e na 
interação com as informações, tendo em vista que precisamos ler as informações e assimilar o 
conteúdo. Mas é comum sentirmos desconforto ao acessarmos alguns sites, e corriqueiramente o 
problema está no conjunto de fontes escolhidas, e isso envolve a sua forma, tamanho e distribuição 
no espaço, uma vez que esse último aspecto varia de forma contundente por causa dos diversos 
aparelhos por meio dos quais acessamos os sites (CLAIR; BUSIC-SNYDER, 2009).
Uma ótima fonte de conhecimento e subsídios acerca do Design, 
este documentário, dividido em cinco episódios, é bem completo e 
pode contribuir em diversos aspectos para a formação, passando 
por diferentes tipos de objetos e projetos de Design, assim como 
conceitos e utilizações. Para assistir, é possível encontrar os 
capítulos no Youtube com o título: BBC - The Genius of Design 1 of 
5 (legendado), sendo necessário ativar as legendas, tendo em vista que são em 
inglês. Disponível em: <https://www.youtube.com/watch?v=1ofW8yT6aoM>.
15WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
As fontes utilizadas na web precisam ser claras em termos de leitura e formas, contribuindo 
para o entendimento e � uidez do conteúdo, e não atrapalhar o acesso às informações. Devem 
fazer parte do conjunto de elementos que irá compor o projeto do site de maneira a trazer mais 
qualidade ao projeto.
Assim, podemos entender que existem aspectos importantes relacionados às fontes, que 
devem ser levados em consideração e, em hipótese alguma, descartados, salvo casos em que isso 
seja intencional, ensinando algo como forma de exemplo. Tais aspectos são os estilos e usos, pesos, 
cores, responsividade, intensidade e recursos existentes, os quais serão expostos na sequência.
Dentre os estilos e usos, na tipogra� a, podemos entender que existem opções para todas 
as preferências e objetivos dos projetos e é necessário realizar uma escolha criteriosa, seguindo 
padrões e tendências em projetos mais objetivos e mesmo comerciais, até os mais personalizados, 
onde pode ser utilizado um conjunto mais diferenciado e exclusivo. 
Sendo assim, conforme acontece em projetos grá� cos físicos, existem dois grandes grupos 
de fontes que são amplamente utilizadas: com serifa e sem serifa. As fontes com serifa são aquelas 
que possuem traços horizontais em sua base e que servem como uma espécie de linha imaginária 
e ajuda na leitura de textos longos, como livros e revistas. Já as sem serifa, ou como também são 
conhecidas, retas, não possuem essa base, terminando na haste e geralmente são utilizadas em 
textos mais curtos, títulos e chamadas de reportagens (GARFIELD, 2012).
Figura 14 - Com serifa e sem serifa. Fonte: O autor.
Porém, quando entramos no campo da web, as fontes retas são mais amplamente 
utilizadas, mesmo que isso esteja mudando ao longo do tempo, justamente pensando em projetos 
exclusivos, ou aqueles que queiram se diferenciar do convencional praticado no mercado. Assim, 
já é possível ver sites que utilizam fontes serifadas se tornarem mais comuns.
Outro aspecto relevante quanto ao uso das fontes está na relação de peso e cores utilizadas, 
pois isso pode facilitar, ou atrapalhar, o reconhecimento das formas das letras e a consequente 
leitura, se forem empregados de forma ruim. Isso acontece, pois nos conceitos de Design, é 
importante trabalhar com hierarquia de tamanhos e pesos. Isso é importante para favorecer o 
caminho que usuários irão percorrer ao navegar nos sites, tendo em vista, por exemplo, que títulos 
usualmente chamam mais a atenção com tamanhos maiores; sendo assim, se esses elementos são 
os mais importantes, os demais devem ser menores, com menos peso na composição e assim 
sucessivamente, para guiar a leitura. Isso também vale no uso de cores e contrastes, que deve ser 
realizado para bene� ciar de forma mais clara possível a leitura, salvo em casos especí� cos em que 
se deseje uma mistura.
Dessa forma, é possível entender os principais pontos relacionados às tipogra� as na web, 
assim como os demais pontos abordados até o momento.
16WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
3. INTERNET E CONSUMO
As relações de consumo na história humana passam por mudanças constantemente, 
devido a uma série de fatores que contribuem para que essa relação se estabeleça. Isso passa 
por alterações na forma de se atribuir valor aos produtos e serviços, ciclos econômicos, 
posicionamentos políticos, guerras, interesses econômicos e um quão número de outras razões 
que poderiam ser elencadas, mas dentre os principais motivos de as relações mudarem, podemos 
destacar os provenientes dos avanços tecnológicos (SOLOMON, 2016).
Figura 15 - Compras on-line. Fonte: Freepik (2017).
Tais aspectos nos in� uenciam de maneira integral na atualidade, estando presentes 
em praticamente todas as tomadas de decisão de compra, por mais simples e barato que seja o 
produto ou serviço adquirido. Isso acontece pela penetração que pode ser vista pelos smartphones 
e aplicativos que auxiliam a humanidade nos mais variados afazeres.
Assim, quando pensamos em algo para comprar, em diversos momentos, veri� camos 
algo sobre esse determinado bem de desejo na internet, buscamos detalhes, opiniões de outras 
pessoas que já utilizaram, e isso faz parte da jornada que as pessoas percorrem ao pesquisar 
produtos e serviços na internet (MERLO; CERIBELI, 2014).
Dessa forma, podemos veri� car alguns dados, a partir de uma pesquisa realizada em 
conjunto pelo Serviço de Proteção ao Crédito (SPC) e Confederação Nacional dos Dirigentes 
Lojistas (CNDL) em 2018, que aponta uma gama interessante de como ocorre o consumo na 
internet, essa relação das pessoas com o consumo e como isso ocorre na internet (CNDL; SPC 
BRASIL, 2018).
A jornada de compra dos consumidores on-line em geral possui um caminho pelo qual 
as pessoas percorrem com fases nas quais 74% utilizam o smartphone em pelo menos uma delas, 
como pesquisa de preço, marca, localização, comparações, opinião das pessoas, � nalização de 
compra e assim por diante. Além disso, 93% dos consumidores conectados na internet preferem 
utilizar os sites como canal de compra, ultrapassando as lojas físicas, shoppings, aplicativos, 
catálogos, dentre outros.
17WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Em termos de gastos médios, os brasileiros � cam na faixa dos R$ 300,00, e itens de 
vestuário e artigos para a casa lideram os itens comprados, como mostra a pesquisa. Isso re� ete 
uma tendência de compras com valores mais altos estarem sendo realizadas de forma física ainda, 
mas que já mostram sinais de mudança, com empresas realizandovendas de imóveis, carros e 
outros itens com valores elevados de forma virtual (CNDL; SPC BRASIL, 2018).
Já quando pensamos em níveis de satisfação, podemos veri� car que 85% � caram satisfeitos 
com as experiências de compras realizadas pela internet, com especial atenção ao item frete grátis, 
que mais importou na decisão de compra, o que tem se tornado uma tendência amplamente 
utilizada pelas empresas, ou com a retirada em lojas físicas da mesma rede, funcionando como 
minicentros de distribuição.
Outro aspecto expressivo na pesquisa é o fato de que 95% dos participantes realizam 
pesquisas de preços antes de tomar algum tipo de decisão de compra. O que antes acontecia de 
loja em loja andando por centros comerciais, ou lojas de rua, acontece hoje na web, com a ajuda 
de smartphones, tablets e outros aparelhos conectados à rede. Entre os itens mais pesquisados, 
estão eletrodomésticos e smartphones.
O que contribui de maneira signi� cativa com a preferência da internet para a realização 
de pesquisas de preço é o fato de poder analisar e realizar comparativos com dados técnicos, 
que, em muitos casos, são detalhes que vendedores não dominam totalmente, até mesmo pela 
variedade de opções existentes e lançamentos que chegam às lojas, enquanto nos sites, é possível, 
em alguns casos, realizar comparações entre diversos modelos de produtos da mesma categoria.
Na Figura 16, é possível ver um comparativo entre as preferências dos consumidores nas 
compras pela internet com vantagens e desvantagens.
Figura 16 - Vantagens e desvantagens de comprar pela internet. Fonte: CNDL e SPC Brasil (2018, p. 11).
18WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Outro aspecto que faz diferença na opinião dos consumidores é a forma como são 
atendidos nos processos de compra on-line, seja por meio dos chats, redes sociais ou aplicativos 
de conversa como WhatsApp ou Telegram. Isso os faz se sentirem como se estivessem sendo 
atendidos pessoalmente, como num atendimento físico, o que transmite mais con� ança e 
satisfação com o processo de compra. Tal fato é apontado por 80% como algo importante.
Mas nem tudo são � ores na relação entre consumidores e empresas na internet, pois como 
aponta o estudo, 64% das pessoas já desistiram da compra pela internet no momento de realizar o 
pagamento do produto ou serviço, e os motivos são variados: 54% desistiram por causa de taxas 
ou fretes cobrados; 39% dizem ter encontrado diferenças entre preço anunciado e praticado; para 
36% o prazo de entrega foi o limitante; 36% por suspeitarem ser algum tipo de fraude, dentre 
outros itens que podem ser vistos (Figura 17).
Figura 17 - Fatores que in� uenciam na desistência de uma compra pela internet. Fonte: CNDL e SPC Brasil (2018, 
p. 18).
19WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Sendo assim, a partir desses dados, podemos veri� car a importância de empresas, 
instituições e pessoas estarem na internet, no sentido de terem uma possibilidade massivamente 
maior de alcançar pessoas de lugares que um estabelecimento físico local não tem. Podem assim 
também estabelecer formas de crescimento exponenciais, mas com cuidados que veremos a 
seguir.
4. POSICIONAMENTO DE MARCA
Que as empresas, instituições e pro� ssionais devem estar na internet, provavelmente, 
é um consenso, tendo em vista que, cada vez mais, procuramos e interagimos com pessoas e 
marcas na internet nos mais diversos tipos de relação e objetivos. Dessa forma, esse é um aspecto 
importante de se entender como acontece em termos de de� nição e seus efeitos, que passam 
do virtual para o físico em intensidades diferentes do que se via antes do advento da internet e 
desenvolvimento do digital com os aparelhos móveis e conexões mais rápidas (MORAIS, 2018).
Sendo assim, podemos a� rmar que o posicionamento de marca é a forma como desejamos 
e planejamos a representação de como queremos que a marca seja percebida, ou seja, como 
queremos que seja entendida. O que nos leva ao objetivo primordial, que é fazer com que essa 
intenção e planejamento sejam efetivos no entendimento das pessoas sobre a marca (MERLO; 
CERIBELI, 2014).
Além disso, quanto ao posicionamento da marca, é importante que alguns pontos sejam 
levantados de maneira a contribuir como formas de de� nição daquilo que é importante para o 
processo de posicionamento. Portanto, entender a quem produtos e serviços se destinam, o que 
podem resolver para as pessoas e quais diferenciais a marca possui são essenciais para conseguir 
estabelecer um posicionamento efetivo.
Figura 18 - Público-alvo. Fonte: Freepik (2017).
Dessa forma, quando pensamos a quem se destinam os produtos e serviços da marca, 
precisamos entender o per� l ideal de pessoas, e utilizar suas características e preferências para a 
produção e desenvolvimento de ações e projetos grá� cos que estejam alinhados aos pensamentos 
elencados por meio de pesquisas.
20WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
O mesmo acontece quando pensamos e de� nimos que tipo de problema nossa marca 
soluciona para as pessoas, pois dessa forma é possível atrair, de forma mais efetiva, aqueles 
que procuram as soluções que oferecemos. E � nalmente, que tipo de diferenciais a marca pode 
oferecer às pessoas, ou seja, quais são os valores vistos pelas pessoas na marca, sejam eles visíveis 
ou não, como material utilizado, preço, tecnologia embarcada, ou status, tendência, modismo e 
assim por diante. Ter clareza desses aspectos pode potencializar as relações das pessoas com a 
marca e até mesmo garantir sucesso ante concorrentes do mercado (SOLOMON, 2016).
Sendo assim, é importante conhecer o contexto social, cultural e econômico no qual 
queremos que a marca esteja posicionada, para que a comunicação seja realizada de forma efetiva 
e satisfatória para as pessoas que irão recebê-la e interagir com ela.
CONSIDERAÇÕES FINAIS
Com os assuntos abordados nesta unidade, foi possível entender os conceitos básicos de 
Design, voltados para a área especí� ca do Webdesign, passando por conceitos gerais de internet 
e demandas relacionadas aos pro� ssionais dessa área, assim como habilidades esperadas. Vimos 
conceitos como Gestalt, que auxiliam no entendimento de mensagens, assim como na formulação 
delas.
Foi possível ver a importância da tipogra� a na construção de sites e no design de forma 
geral, além das relações de consumo e utilização da internet pelas pessoas na atualidade, o que 
contribui para fortalecer a relevância do pro� ssional de Webdesign na comunicação das empresas, 
pessoas e instituições.
E, � nalmente, abordamos o posicionamento das marcas, ou seja, dos mesmos atores 
citados anteriormente, pois se pararmos para analisar o contexto, na atualidade, somos uma 
espécie de marca, pois tudo o que fazemos e expomos transmite mensagens para aqueles que nos 
observam.
2121WWW.UNINGA.BR
UNIDADE
02
SUMÁRIO DA UNIDADE
INTRODUÇÃO ............................................................................................................................................................22
1. CONCEITOS DE HTML ..........................................................................................................................................23
2. CONCEITOS DE CSS .............................................................................................................................................27
3. RESPONSIVIDADE ................................................................................................................................................30
4. SISTEMAS DE GESTÃO DE CONTEÚDOS ...........................................................................................................35
CONSIDERAÇÕES FINAIS ........................................................................................................................................40
LINGUAGENS E SISTEMAS PARA 
WEB CONTEMPORÂNEA
PROF. ME. VAGNER BASQUEROTO MARTINSENSINO A DISTÂNCIA
DISCIPLINA:
WEBDESIGN
22WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
INTRODUÇÃO
Para entendermos de forma satisfatória como ocorre o desenvolvimento web, é importante 
que possamos conhecer as principais ferramentas utilizadas nessa área do Design, que consistem 
na utilização em boa medida de linguagens de programação, ou seja, de códigos que irão ser 
traduzidos pelos navegadores para as telas dos equipamentos que utilizamos.
Assim, entender o funcionamento de linguagens como HTML e CSS, as quais são as mais 
utilizadas na construção de sites e essenciais para projetos web, farão diferença em sua atuação 
no mercado.
Da mesma forma, é importante conhecer e compreender o que é a responsividade, 
assim como para que serve e como acontece no nosso cotidiano, além dos sistemas de gestão de 
conteúdos, que se constituem em ferramentas essenciais para aquelas pessoas que querem ganhar 
agilidade.
Dessa forma, esta unidade irá tratar de uma série de assuntos importantes para o 
desenvolvimento web.
23WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
1. CONCEITOS DE HTML
Mesmo não conhecendo os códigos utilizados no HTML (HyperText Markup Language, 
que signi� ca Linguagem de Marcação de Hipertexto), você possivelmente já deve ter ouvido 
falar sobre ele, e utiliza sua estrutura em boa parte do seu dia a dia, pois sua estrutura de códigos 
contribui para a formação e construção de sites e aplicações web. Dessa forma, na atualidade, é 
praticamente impossível as pessoas não terem contato com o HTML (Figura 1).
Figura 1 - HTML. Fonte: Freepik (2020).
Com HTML, é possível realizar a criação de seções, parágrafos, cabeçalhos e links 
que são utilizados nas páginas que acessamos diariamente dos mais diversos aparelhos, desde 
computadores desktop, notebooks, tablets e smartphones, gerando uma série de possibilidades 
de interação e comunicação entre as pessoas e entidades (TERUEL, 2014).
Fazendo uma analogia, podemos comparar o HTML ao Microso� Word (Figura 2), no 
qual é possível formatar e organizar textos e estruturas visuais com imagens e ilustrações, mas que 
não permite realizar funcionalidades dinâmicas, somente estáticas, o que con� gura a necessidade 
de complementos para tornar sites e aplicações web completas.
Figura 2 - Microso� Word. Fonte: O autor.
24WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
No HTML, trabalhamos com códigos e tags, que são estruturas de linguagem de 
marcação que contêm instruções com início e � m, de modo que os navegadores consigam 
entender e executar uma determinada função, sendo especi� cados diversos comandos que serão 
interpretados pelos navegadores, os quais serão entendidos pelos usuários de forma visual, seja 
por textos, imagens, grá� cos ou elementos visuais, e não em forma de códigos (Figura 3).
Figura 3 - Site da Red Bull com códigos aparentes. Fonte: O autor.
Assim como outras tecnologias tão comuns aos indivíduos na atualidade, o HTML surgiu 
a partir de uma situação existente para um grupo especí� co que queria resolver como poderiam 
se comunicar sobre pesquisas que estavam desenvolvendo. Dessa forma, Tim Berners-Lee, um 
físico britânico, criou um sistema de hipertexto (textos que possuem links para outros textos) 
para a internet, que resolveria seu problema. Isso ocorreu em 1991 com a utilização de 18 tags, 
ou seja, comandos, e desde então, vem sofrendo modi� cações e atualizações, o que gira em torno 
de 140 tags diferentes, sendo que alguns já não são reconhecidos pelos navegadores, tendo sido 
substituídos por outras formas de codi� cação (TERUEL, 2014).
Assim, junto com a popularização da internet, o HTML foi sendo desenvolvido ao longo 
dos anos, tendo sido lançadas novas versões desde a primeira em 1991 com o HTML. Depois 
vieram: HTML 2.0 (1995), HTML 3.2 (1997), HTML 4.01 (1999), XHTML (2000), HTML 5 
(2014), HTML 5.1 (2016 e 2017) e HTML 5.2 (2017).
Os arquivos de HTML são visualizados em navegadores, os quais utilizamos em 
equipamentos eletrônicos como notebooks, desktops, tablets e smartphones, independentemente 
do sistema operacional. E suas extensões são .html e .htm. Dessa forma, com a utilização 
dessas extensões, em navegadores como o Chrome, Safari ou Mozilla Firefox, é feita a leitura e 
renderização, ou seja, a transformação dos códigos em informações que estamos acostumados a 
entender (HAROLD, 2010).
25WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
Figura 4 - Navegador. Fonte: Freepik (2018).
Os sites mais comuns, ou simples, utilizam o HTML em suas diversas páginas, as quais 
podem ser utilizadas de diferentes formas e com objetivos distintos, como páginas de entrada, 
para explicar os objetivos da empresa, missão e valores, ou simplesmente apresentar alguma outra 
informação relevante de forma prática e objetiva, sem qualquer tipo de efeito ou movimento. 
Além disso, o que todos eles possuem em comum está na junção de uma combinação de tags, que 
são considerados como blocos que formam cada página por completo.
Essa construção surge com as tags de forma hierarquizada, para que as informações 
sejam compreendidas de forma correta pelos usuários e os devidos pesos (importância) estejam 
corretos. Como acontece em um trabalho no Word, onde colocamos o título maior, com destaque, 
os parágrafos, recuos especí� cos, cabeçalhos, rodapés e qualquer outro tipo de conjunto de 
informações.
Assim como um parágrafo começa com uma letra maiúscula e termina com um ponto 
� nal, as tags do HTML iniciam com uma de abertura <tag> e outra de fechamento </tag>. 
Isso acontece justamente para organizar os elementos das páginas e tornar a codi� cação, ou 
renderização, correta e estruturada (HAROLD, 2010).
Na sequência, temos um exemplo da forma como elementos de HTML podem ser 
elencados estruturalmente:
<div>
<h1>Cabeçalho principal</h1>
<h2>Subtítulo de impacto</h2>
<p>Parágrafo um</p>
<img src=”/” alt=”Image”>
<p>Parágrafo dois com <a href=”https://example.com”>hyperlink</a></p>
</div>
26WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
O primeiro elemento é denominado como uma divisão, utilizado para marcar as seções 
com maiores conteúdos (<div></div>);
No exemplo, também é possível veri� car o cabeçalho, com a tag (<h1></h1>), o subtítulo 
(<h2></h2>), assim como dois parágrafos de textos que utilizam as tags (<p></p>) e uma 
imagem, com a tag (<img>);
Para o segundo parágrafo, possui uma tag distinta (<a></a>), que indica um link e utiliza 
um atributo href que contém a URL de destino.
Já na tag da imagem, é possível veri� car que ela possui dois atributos: src, que apresenta 
o caminho da imagem, e alt, para a descrição dela.
Ainda em termos estruturais, o HTML possui dois tipos de tags que podem ser 
consideradas como principais: os elementos de bloco e elementos em linha, os quais podem ser 
assim descritos:
• Elementos de bloco são tags que se utilizam de todo o espaço antes de começar uma nova 
linha, podendo ser vistos em cabeçalhos e parágrafos, pois formam blocos.
• Elementos em linha são mais econômicos quanto ao espaço, pois se restringem ao 
necessário, sendo utilizados para formatar elementos como links.
Dessa forma, existem tags que todo documento de HTML possui, tais como: <html>, 
<head> e <body> como elementos de bloco. A tag <html></html> seria o elemento que abre e 
fecha todas as tags. A tag <head></head> possui informações como o título, e a tag <body></
body> abrange todos os elementos que são visualizados em uma página.
Além desses, existe uma série de tags utilizadas no HTML, que vão desde a abertura e o 
fechamento de parágrafo, até negrito, itálico, indicação de imagens, links etc.
O importante é conhecer, ao menos de forma básica, os principais códigos ou tags, pois 
com a utilização de sistemas, é possível desenvolver projetos pro� ssionais, mas que eventualmente 
podem apresentar algum tipo de erro, ou necessidade de customizaçãoque seja requerida. E é 
justamente nesse momento que conhecer as tags pode ajudar a resolver essa situação.
Assim, podemos chegar à conclusão de que o HTML é um conjunto de códigos que 
auxiliam na estruturação de sites (Figura 5), algo como um esqueleto, que dá fundamento para 
o que um site poderá se tornar, com o auxílio de outras linguagens complementares, que trazem 
contribuições de movimento, estática e banco de dados, por exemplo, tornando um projeto 
completo e robusto (MILETTO; BERTAGNOLLI, 2014).
Figura 5 - Estrutura de site. Fonte: Freepik (2018).
27WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
O HTML é mantido pelo W3C (World Wide Web), um consórcio de tecnologia que 
articula seu desenvolvimento e o mantém ativo nos navegadores por meio de protocolos 
uni� cadores de linguagem e códigos.
2. CONCEITOS DE CSS
Mais uma sigla? Isso mesmo. Mas não se preocupe! O CSS é uma das linguagens mais 
utilizadas no Webdesign e seu signi� cado é Cascading Style Sheet (em tradução livre, Folhas de 
Estilo em Cascata), e surgiu em 1994, tendo sido criado por Hakon Lie, que tinha como objetivo 
facilitar a criação de sites, uma vez que era necessária uma série de códigos para criar estruturas 
simples, como uma tabela, por exemplo.
Dessa forma, o CSS surgiu para que fosse possível trabalhar com aspectos visuais de 
maneira mais fácil (Figura 6), com a utilização de estilos, parecido com o que fazemos em 
programas de formatação de texto, quando usamos estilos para títulos, parágrafos, tabelas e 
demais itens do arquivo que estivermos desenvolvendo (MILETTO; BERTAGNOLLI, 2014).
O W3C é responsável por uma série de padronizações para a WEB, sendo uma 
organização importante e que pode servir de fonte constante de consulta no que 
diz respeito às linguagens de programação, padronizações e demais aspectos 
relacionados ao bom funcionamento da internet em termos de linguagens.
Para acessar seu conteúdo, é possível verifi car seu site em <https://
www.w3c.br/Home/WebHome/>, onde existe uma variedade de 
informações, mas que em grande parte está em inglês, tendo em 
vista que esse é o idioma ofi cial das linguagens de programação.
Uma vez que o CSS trabalha com os estilos dos objetos, defi nindo como serão 
exibidos no site, temos que ter em mente o conceito de acessibilidade bem 
claro, de forma a garantir que os mais variados tipos de pessoas terão acesso 
às informações do site, como, por exemplo, pessoas com algum tipo de restrição 
visual severa, ou de movimentos dos membros superiores.
28WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
Figura 6 - Estrutura de site. Fonte: Freepik (2019).
Assim, podemos entender que o CSS funciona como uma espécie de editor de estilo para 
o site, enquanto o HTML fornece a estrutura da qual o site precisa. E por isso, existe uma relação 
tão intensa entre as linguagens, pois é fundamental que os sites tenham um bom visual e acesso 
fácil às informações, por meio de uma estrutura sólida e coesa.
Mesmo o CSS não sendo tecnicamente necessário para a criação de sites, ele acabou se 
tornando algo essencial no desenvolvimento de sites, tendo em vista o próprio crescimento da 
internet de forma geral e, consequentemente, das exigências das pessoas com relação ao visual dos 
sites. E isso é fácil de notar, pois quando vemos um site com poucos recursos, ou, por exemplo, 
com fundo branco e textos em preto ou azul, todo estático, com fontes antigas, meio quadradas, 
provavelmente esse site não utiliza CSS, ou ele não foi carregado corretamente. Isso pode ser 
visto no exemplo (Figura 7) de um site antigo, do início da internet (MILETTO; BERTAGNOLLI, 
2014).
Figura 7 - Site do UOL. Fonte: Web Archive (1996).
O que acontecia antes da criação do CSS é que qualquer estilização (customização) no site 
tinha que ser feita separadamente nas marcações do HTML, como plano de fundo, cores do texto, 
do fundo, alinhamentos, e qualquer tipo de informação “diferente”. Já com o CSS, é possível criar 
uma série de estilizações e, assim, utilizá-las em arquivos distintos, tornando o desenvolvimento 
mais ágil e pro� ssional, diminuindo a possibilidade de erros, caso esqueça alguma formatação 
numa parte especí� ca do código.
29WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
Então, podemos entender que, com o CSS, não é preciso informar todas as vezes 
as formatações de um elemento, toda vez que ele aparecer; com os estilos do CSS, isso já � ca 
formatado para o arquivo todo, sempre que esse determinado elemento aparecer, tornando o 
código, de forma geral, mais limpo e seguro de erros (MILETTO; BERTAGNOLLI, 2014).
Além disso, com a possibilidade de se ter vários estilos numa mesma página, como 
acontece ao se utilizar o CSS, é possível gerar uma grande quantidade de personalizações, 
tornando as páginas mais atrativas e de acordo com os objetivos dos projetos. Dentro dos aspectos 
mercadológicos, isso já é uma necessidade imposta pelos usuários às marcas, ou seja, ser cada vez 
mais customizado e em sintonia com suas preferências (Figura 8).
Figura 8 - Diferentes preferências. Fonte: Freepik (2018).
A vantagem do uso do CSS no desenvolvimento de sites em conjunto com o HTML é 
sua característica de leveza, diferente do JavaScript ou de outras linguagens mais complexas e 
pesadas. Com o CSS é possível criar uma experiência aos usuários de forma rica e satisfatória, 
assim como para os desenvolvedores.
Ainda é possível destacar que, com o CSS, é possível desenvolver animações, assim como 
o efeito de parallax e jogos, o que evidencia o potencial dessa linguagem leve e prática, que é 
constante no desenvolvimento de sites contemporâneos e projetos web dos mais diversos.
A sintaxe do CSS é simples e, como a maioria das linguagens, é baseada no idioma inglês, 
por meio da utilização de um conjunto de regras ou normas que regem seu funcionamento. 
Tendo em vista então que o HTML foi projetado para marcações de página, o CSS contribui para 
atribuir estilos a essas marcações.
Sendo assim, o CSS trabalha com declarações em sintaxes simples, que irão funcionar 
como seletores para modi� carem blocos de declaração, como parágrafos, títulos, imagens, 
fundo e demais elementos existentes na página. Assim, ao selecionar um elemento, é necessário 
informar, por meio dessa sintaxe do CSS, o que deseja que aconteça com ele.
É claro que existem regras e a forma correta de realizar tais ações, uma vez que isso visa 
a garantir a ordem e a correta utilização dos comandos e daquilo que irá acontecer sempre da 
mesma forma. Dessa maneira, o seletor aponta para o elemento do HTML que será modi� cado, 
o qual irá receber a ação de um bloco de declaração, que pode ter uma ou mais ordens para o 
elemento, que são separadas por ponto e vírgula (MILETTO; BERTAGNOLLI, 2014).
Todas as declarações do CSS trazem um nome de propriedade e um valor, os quais são 
separados por dois pontos, além de terminar com um ponto e vírgula e ser cercado por chaves. 
Sendo assim, se quisermos estabelecer um determinado estilo aos parágrafos que utilizam a tag 
<p>, poderíamos fazer uma declaração como no exemplo a seguir:
30WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
<style>
p {
color: blue;
text-weight: bold;
}
<style>
Ou ainda, se quiséssemos centralizar e determinar o tamanho e cor diferente, � caria 
assim:
<style>
p {
 text-align: center;
 font-size: 16px;
 color: pink;
}
</style>
Dessa forma, os exemplos apresentados servem para demonstrar como os conceitos do 
CSS funcionam na construção de um site, sendo que, como veremos adiante no conteúdo, na 
atualidade é possível construir projetos inteiros sem ao menos programar uma linha sequer. Mas 
ainda assim, é importante conhecer ao menos os conceitos que estão envolvidos nesse tipo de 
projeto, para poder entender, caso ocorra algum tipo de problema, ou para estabelecer algum 
tipo de diálogo com desenvolvedores programadores.
Portanto, nos próximostrechos do conteúdo, poderemos veri� car formas de como 
desenvolver sites sem ter conhecimentos profundos de programação, mas ainda assim conseguir 
construir projetos pro� ssionais e vencedores.
3. RESPONSIVIDADE
A responsividade é um conceito no Webdesign, relativo à possibilidade de acesso 
pelas pessoas, aos sites em diferentes aparelhos, e suas várias dimensões de telas, de maneira a 
possibilitar que seja possível visualizar todas as informações de maneira correta e satisfatória. 
Assim, podemos de� nir também como um combinado de técnicas aplicadas ao layout dos sites 
para que eles se adaptem aos muitos tamanhos dos dispositivos utilizados pelas pessoas (Figura 
9).
31WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
Figura 9 - Responsividade. Fonte: Freepik (2019).
Essa adaptação deve funcionar para as telas dos computadores, notebooks, tablets 
e smartphones, além dos diferentes tipos de navegadores usados pelas pessoas, levando 
em consideração os sistemas operacionais existentes. Isso é possível de se alcançar, com a 
utilização do HTML e CSS, cuidando da estrutura textual e visual, respectivamente (MILETTO; 
BERTAGNOLLI, 2014).
O objetivo primordial da responsividade é fazer com que o site esteja acessível em termos 
de funcionalidades para o maior número de pessoas possível, melhorando tráfego e relevância na 
internet, podendo converter acessos em negócios ou notoriedade na web. Além disso, é preciso 
ter em mente que a responsividade deve vir acompanhada de uma boa estrutura de conteúdo e 
informações, pois isso faz parte do pacote de interação, ou seja, da experiência do usuário (Figura 
10).
Figura 10 - Boa estrutura de informações. Fonte: Freepik (2018).
Podemos dizer que o design responsivo é relativamente recente, tendo seu início em 
2010. Assim como os aparelhos móveis como conhecemos, é um dos aspectos que vem sendo 
desenvolvido, com os avanços da web, conexão, aparelhos e das próprias linguagens utilizadas no 
desenvolvimento de sites.
32WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
Justamente são esses avanços que ajudaram no desenvolvimento dos sites e da 
responsividade necessária para que os projetos web tenham relevância, uma vez que é importante 
para as empresas e desenvolvedores que os usuários consigam ter acesso fácil a todas as 
informações do site (SILVA, 2018).
Dessa forma, alguns termos são importantes para esse entendimento e caminham junto 
com a responsividade; no caso, podemos destacar a experiência do usuário (User Experience) e 
interface do usuário (User Interface), que contribuem para que o processo de navegação, busca 
e interação com as informações, de um modo geral, sejam realizadas de forma satisfatória pelas 
pessoas na internet (Figura 11).
Figura 11 - UX e UI. Fonte: Freepik (2018).
Este artigo é interessante, pois trata das semelhanças e diferenças entre o UX 
(User Experience) e o UI (User Interface) sob uma perspectiva dos profi ssionais 
que desenvolvem tais técnicas e projetos, o que possibilita o entendimento de 
como podem surgir oportunidades se conhecermos bem a área na qual desejamos 
atuar.
DUPRE, H. Atenção: UX e UI design não são a mesma coisa, 
mas caminham juntos. UX Collective. 24 dez. 2019. Disponível 
em: <https://brasil.uxdesign.cc/ux-e-ui-n%C3%A3o-s%C3%A3o-
a-mesma-coisa-mas-trabalham-juntos-936af57097dc>. Acesso 
em: 17 jun. 2020.
33WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
Assim, podemos também entender o design responsivo de sites e aplicações web, a partir 
de alguns aspectos importantes, como a adaptação do layout das páginas com a resolução da 
tela onde se está visualizando as informações; o redimensionamento automático conforme o 
tamanho da tela dos diversos tipos e especi� cações de aparelhos, de modo a não sobrecarregar 
o processamento dos aparelhos, especialmente dos celulares e tablets; a simpli� cação dos 
elementos como menus e aberturas quando visitados a partir de aparelhos móveis; ocultar partes 
desnecessárias em dispositivos com tela reduzida; adaptação de botões e links para telas com 
touch e geolocalização e mudança de orientação (horizontal e vertical) (Figura 12).
Figura 12 - Posições e formas de segurar o smartphone. Fonte: Freepik (2019).
Todos os aspectos apontados são facilmente justi� cados pela quantidade massiva de 
aparelhos móveis sendo utilizados pelas pessoas no dia a dia, como celulares e tablets, ou mesmo 
os notebooks, que necessitam de sites que sejam processados de forma ágil e rápida, além de ter 
sua estrutura organizada para que as pessoas encontrem as informações rapidamente, ou seja, de 
forma intuitiva, que o caminho seja fácil e rápido para usuários iniciantes e experientes, o que 
não é uma tarefa sempre fácil (SILVA, 2018).
Podemos destacar também mais alguns elementos importantes que contribuem com 
projetos responsivos e, dessa forma, são pontos importantes de se levar em consideração quanto 
ao desenvolvimento dos projetos web de sites, pensando nos usuários e toda a experiência 
que desejamos que as pessoas tenham, no sentido de que retornem e divulguem os sites que 
desenvolvermos.
Dentre os elementos que quero destacar para você, o primeiro é que um site responsivo 
contribui para a melhora de resultados em buscadores, ou seja, melhora o posicionamento em 
motores de busca do site, que é um dos principais métodos para otimizar resultados de acesso 
e relevância na internet para sites. Assim, o SEO (Search Engine Optimization), ou motor de 
otimização de pesquisa, em tradução livre, é um dos principais atributos para que essa otimização 
ocorra (ZEMEL, 2015).
34WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
Outro ponto importante é o de que projetos de sites responsivos precisam de apenas 
uma versão do site, que irá contemplar os diversos dispositivos nos quais ele pode ser acessado e 
visualizado, dispensando a necessidade de se criar uma série de modelos para diferentes tamanhos 
e resoluções de telas, o que, em alguns casos, poderia inviabilizar um projeto, economizando 
tempo, dinheiro, equipe e prevenindo possíveis erros entre versões.
Consequentemente, ter apenas uma versão do site auxilia no gerenciamento do projeto, 
tendo em vista que a mesma versão será usada nos diversos tipos de aparelhos, sendo ajustado 
para funcionar com a mesma e� ciência e estrutura. Havendo a necessidade de se fazer algum tipo 
de atualização, que ela ocorra automaticamente em toda a estrutura e que essas alterações sejam 
acatadas para todos os tipos de aparelhos (ZEMEL, 2015).
Ainda podemos mencionar um outro elemento que é facilmente percebido em grandes 
marcas, a consciência de marca, que é quando as pessoas reconhecem uma unidade visual e 
estrutural na forma como determinada marca se comunica visualmente com as pessoas. A 
responsividade auxilia justamente nesse processo, tornando o site adaptável aos diversos 
tamanhos e resoluções, de forma a manter uma unidade visual da marca para as pessoas, o que 
contribui para que essa consciência de marca seja fortalecida.
Portanto, com todas as características e elementos mencionados, podemos entender 
que a responsividade é um dos fatores mais importantes nos projetos web na atualidade, o 
que possibilitará que usuários possam acessar o conteúdo proposto de praticamente qualquer 
aparelho eletrônico, como computadores, notebooks, tablets e smartphones, e ainda, smartwatches
(celulares/relógios de pulso), assim como em diferentes navegadores.
Ainda falando da responsividade, traçando uma conexão com a UX e UI mencionadas 
anteriormente, é importante entender alguns princípios básicos inerentes ao design de sites na 
perspectiva da atualidade e diversidade de aparelhos móveis. Dessa forma, iremos trazer alguns 
desses princípios, importantes para o design de sites responsivos (ZEMEL, 2015).
Assim, podemos começar com o � uxo, que pode ser de� nido quando as informações 
se adaptam ao formato das telas,em situações em que elas diminuem e o conteúdo preenche os 
espaços de forma mais verticalizada e as informações restantes são acondicionadas para baixo no 
sentido vertical, sendo preciso rolar para acessar o restante do conteúdo.
Um outro princípio é o uso de unidades relativas, que proporcionam ajustes em 
termos de porcentagem aos elementos do site, independentemente do tamanho da tela onde 
está sendo exibido, contribuindo para que as pessoas consigam manter a mesma experiência 
independentemente do aparelho utilizado, reforçando a consciência de marca. Dessa forma, em 
vez de estabelecermos que um determinado objeto ocupará 400px de largura, de� nimos que ele 
ocupará 50% do total da largura, e assim com os demais objetos.
Já os pontos de interrupção são interessantes, pois determinam onde é o limite para que 
informações estejam numa mesma linha, funcionando como uma espécie de quebra de página, 
como ocorre em so� wares de formatação de texto. Assim, por exemplo, se em um formato 
de tela é possível mostrar três colunas numa mesma linha, e em um outro, ocorrer o ajuste 
automaticamente, vale ressaltar que isso deve ser feito com cuidado, para que o conteúdo não 
� que desorganizado.
No desenvolvimento dos sites, é interessante que o conteúdo ocupe toda a largura de telas 
menores, como as dos smartphones, tablets e até mesmo dos notebooks. Mas imagine ocupando 
a largura total de uma televisão de tela grande, tendo em vista que na atualidade temos as smart
tvs. Por isso, um princípio interessante de se utilizar é o de valores mínimos e máximos, fazendo 
com que, por exemplo, a largura de 100% com valores máximos de 1000 pixels signi� que que esse 
determinado objeto irá ocupar a largura da tela até o limite máximo de 1000 pixels.
35WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
Na atualidade, existem negócios que nascem somente digitais e, em alguns casos, por 
in� uência das redes sociais e uso massivo dos smartphones, é possível que se pense em iniciar um 
projeto web pelo layout para mobiles, em vez de desktops. Mas, na prática, não existe uma regra 
de� nida, tendo em vista que, quando o projeto é responsivo, é possível fazer as con� gurações 
necessárias para que o layout se ajuste aos diversos tamanhos e resoluções possíveis (Figura 13).
Figura 13 - Formatos diversos para iniciar um projeto. Fonte: Freepik (2020).
Outro princípio importante de se ter em mente é quanto ao uso das fontes, ou tipogra� as, 
pois isso pode trazer algum tipo de in� uência visual e até mesmo estrutural ao projeto. Assim, 
pode ser uma decisão usar as fontes do sistema, ou fontes da web, cuja diferença está em que as do 
sistema são carregadas automaticamente, pois já fazem parte do sistema operacional do aparelho 
que estiver sendo usado, enquanto as fontes web usam a conexão para carregar, e quanto mais 
tipos forem usados, mais demorado isso pode ser (SILVA, 2018).
Já com relação aos ícones do projeto web que estiver desenvolvendo, caso sejam repletos 
de detalhes e efeitos, o ideal é a utilização de arquivos do tipo bitmap; caso contrário, o uso de 
arquivos vetoriais pode ser mais adequado, tendo em vista os mesmos conceitos utilizados para 
projetos grá� cos com objetivos de impressão, em que os arquivos bitmap são mais pesados para 
o processamento, devido à sua necessidade de resolução, e os vetores mais leves, por basicamente 
serem desenhos com a utilização de pontos e linhas. De qualquer forma, pensando nos projetos 
web, a recomendação é a de que, para imagens bitmap, se opte pelo uso de imagens jpg, png ou 
gif e, para imagens vetoriais, a melhor opção é a extensão svg (ZEMEL, 2015).
Dessa forma, é possível perceber como os conceitos, aspectos e princípios de responsividade 
devem fazer parte dos projetos web que estiver desenvolvendo, de forma a contribuir para 
melhores resultados.
4. SISTEMAS DE GESTÃO DE CONTEÚDOS
Os sistemas de gerenciamento de conteúdos ou CMS (Content Management System, em 
inglês) são plataformas onde é possível criar, gerenciar ou modi� car projetos web e seus conteúdos 
de forma direta no navegador, sem a necessidade de ter conhecimentos em programação. Ainda 
com esse tipo de conhecimento, é possível realizar customizações além das disponíveis e para 
casos especí� cos, o que não ocorre com tanta frequência e, na maioria dos casos, é possível 
atender com soluções já existentes (JENNER, 2019).
36WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
Em geral, os CMS contam com interfaces grá� cas que contribuem para que o gerenciamento 
e modi� cações dos projetos sejam feitos de maneira ágil e intuitiva, possibilitando que você crie, 
edite e realize uma série de alterações com a utilização de conteúdos diversos, como imagens, 
vídeos, textos, de modo a construir os layouts e estruturas dos sites (Figura 14). Entre os mais 
conhecidos no nosso contexto, podemos destacar o Wordpress, Joomla, Magento, Drupal e Wix 
(JENNER, 2019).
Figura 14 - CMS (Content Management System, em inglês). Fonte: Freepik (2019).
Os CMS servem para contribuir para uma maior democratização no desenvolvimento 
de sites, tornando possível essa tarefa para pessoas que não saibam programar, ou que ainda 
estejam aprendendo. Fazem com que toda a estrutura de códigos seja montada de forma grá� ca 
pelos usuários, além de possibilitar e facilitar uma série de funções e tarefas por meio de suas 
ferramentas e menus de opções, que contam com possibilidades gratuitas e pagas e vão de acordo 
com as necessidades de cada projeto (JENNER, 2019).
Portanto, toda a estrutura necessária para que um site funcione corretamente e permita 
a interação e uma boa experiência aos usuários é realizada de forma automatizada pelo sistema. 
Assim, não é necessário que o desenvolvedor domine os códigos de HTML para a estruturação do 
site, do CSS, para trazer uma boa aparência, nem tampouco de PHP, JavaScript, Python, dentre 
outras relacionadas aos bancos de dados (Figura 15).
Figura 15 - Diversas linguagens de programação. Fonte: Freepik (2020).
37WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
Os sistemas se encarregam da execução de tais atributos, tornando possível ao 
webdesigner se dedicar de forma integral ao conteúdo, estrutura e qualidade visual para que, 
assim, a experiência dos usuários seja a melhor possível, tornando as tarefas e responsabilidades 
compartilhadas e possibilitando maior agilidade e e� ciência no desenvolvimento de projetos web.
De maneira geral, os CMS funcionam com a utilização de editores de conteúdo, para a 
criação das páginas, posts (notícias ou reportagens), lojas virtuais e demais conteúdos, em que 
é possível realizar a customização por meio de menus com funções pré-de� nidas e nos quais 
podem ser adicionadas novas possibilidades à medida que novos projetos são desenvolvidos, 
entre opções gratuitas e pagas.
No geral, os CMS trabalham com a possibilidade de adicionar uma série de funcionalidades, 
como temas, plugins e extensões, os quais irão in� uenciar a forma estética, estrutural e funcional 
dos sites e servem para cada tipo de objetivo. Portanto, os CMS trazem consigo as funções básicas 
para a criação de páginas, posts e inclusão de imagens e textos, e à medida que for necessária a 
inclusão de funções mais elaboradas, é quando se faz necessária a utilização dos temas, plugins e 
extensões, para que os projetos ganhem consistência naquilo a que se propõem.
Entre os CMS mais populares, podemos destacar o Wordpress, Joomla, Magento, Drupal 
e Wix, que em termos gerais, possuem basicamente o mesmo tipo de estrutura, funcionando 
de forma que seja possível realizar a criação de projetos de sites, sem a necessidade de ter 
conhecimentos de programação, além de conter alguns aspectos interessantes para determinadas 
áreas nas quais você esteja desenvolvendo algum tipo de conteúdo (JENNER, 2019).
Dentre os mais utilizados, o Wordpress (Figura 16) é o que mais aparece nos projetos 
atualmente,com algo em torno de 30% dos sites ativos na web (BUILT WITH, 2020), o que 
demonstra sua força, que vem justamente da imensa possibilidade de temas e plugins para 
utilização e criação de sites para os mais diversos segmentos, como lojas, portfólios, instituições, 
pro� ssionais liberais etc. Conta ainda com ferramentas gratuitas e pagas, o que gera uma 
possibilidade interessante em termos de desenvolvimento e mesmo de suporte (JENNER, 2019).
Figura 16 - Site do Wordpress. Fonte: Wordpress (2020).
Já o Joomla (Figura 17) é um misto entre o Wordpress e o Drupal, no sentido de ser 
fácil de se trabalhar, contando com boa estrutura de suporte, formada por uma comunidade de 
desenvolvedores que auxiliam em dúvidas, além de possuir uma série de módulos para a criação 
de sites de comércio virtual (JENNER, 2019).
38WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
Figura 17 - Site do Joomla. Fonte: Joomla (2020).
No Magento (Figura 18), é possível criar e desenvolver plataformas de e-commerce e é 
utilizado por empresas como Samsung, Nike, Ford, dentre outras, justamente pela possibilidade 
de se criar lojas on-line com funções complexas, além de avançadas funcionalidades como banco 
de dados, trajetória de compras de produtos, entregas, controle de estoque e outras aplicações.
Figura 18 - Site do Magento. Fonte: Magento (2020).
O Drupal (Figura 19) é um CMS mais utilizado no meio corporativo, devido à necessidade 
especí� ca relacionada à segurança das informações e tempo de resposta das ações. Dessa forma, 
é possível entender essa necessidade por causa das empresas que o utilizam, como NASA, Tesla, 
Sony Music e Nokia (JENNER, 2019).
Figura 19 - Site do Drupal. Fonte: Drupal (2020).
39WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
E para � nalizar, o Wix (Figura 20) pode ser considerado um híbrido entre CMS e serviço 
de hospedagem e registro de domínio, gerando possibilidades próximas ao que os sistemas já 
citados oferecem, com a vantagem de poder realizar a hospedagem e registro do domínio no 
mesmo local, o que pode ser ruim, dependendo do ponto de vista, mas ainda assim, é uma opção 
existente no mercado (JENNER, 2019).
Figura 20 - Site do Wix. Fonte: Wix (2020).
Dessa forma, foi possível veri� car uma série de opções que podem ser utilizadas no 
desenvolvimento de nossos projetos, cada uma com algumas particularidades que precisam 
ser veri� cadas, mas que, de maneira geral, atendem bem a necessidade de criação de sites 
e� cientemente.
A indicação para esta unidade é uma palestra do TED Talks 
intitulada: O que realmente é a internet?, de Andrew Blum, a qual 
trata das conexões sob uma perspectiva mais fi losófi ca e nos 
ajuda a entender que o desenvolvimento de um site pode trazer 
uma série de signifi cados para todas as pessoas envolvidas 
e nos serve como fonte de conhecimento e refl exão. O vídeo 
tem duração aproximada de 12 min, pode ser acessado de 
forma gratuita e está disponível em: <https://www.ted.com/talks/andrew_blum_
discover_the_physical_side_of_the_internet?language=pt-br#t-700002>.
40WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
CONSIDERAÇÕES FINAIS
Nesta unidade, foi possível conhecer e entender os principais aspectos que norteiam os 
assuntos relacionados aos conceitos de HTML, CSS, responsividade e CMS (Sistema de Gestão 
de Conteúdos), os quais irão servir para todo o desenvolvimento de projetos web de sites.
Assim, tais conceitos devem ser utilizados e, se for necessário, aprofundados à medida 
que você tiver mais demandas especí� cas de projetos web, como, por exemplo, das linguagens 
HTML e CSS.
Da mesma forma, é imprescindível que você tenha os conceitos de responsividade bem 
claros em sua mente, assim como em seus projetos, para que eles garantam uma boa experiência 
aos usuários que acessarem esses sites, como também para quem contratar para desenvolvê-los.
Em um outro aspecto, conhecer e saber como funcionam os CMS disponíveis no mercado 
ajuda a escolher aqueles que melhor servirão aos projetos que forem desenvolvidos, possibilitando 
melhores resultados.
4141WWW.UNINGA.BR
UNIDADE
03
SUMÁRIO DA UNIDADE
INTRODUÇÃO ............................................................................................................................................................42
1. DOMÍNIO E REGISTRO WEB ...............................................................................................................................43
2. HOSPEDAGEM ......................................................................................................................................................49
3. TIPOS DE SITES....................................................................................................................................................52
4. RECURSOS PARA PROJETOS WEB ....................................................................................................................57
CONSIDERAÇÕES FINAIS ........................................................................................................................................61
SUBSÍDIOS PARA PROJETOS WEB
PROF. ME. VAGNER BASQUEROTO MARTINS
ENSINO A DISTÂNCIA
DISCIPLINA:
WEBDESIGN
42WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 3
EDUCAÇÃO A DISTÂNCIA
INTRODUÇÃO
Nesta unidade, iremos tratar de subsídios essenciais para todo o desenvolvimento de 
projetos web, com foco nos sites, na medida em que tais elementos podem fazer a diferença para 
que os projetos sejam profi ssionais, trazendo mais resultados aos contratantes, assim como para 
os usuários.
Tais possibilidades vão desde a interação e experiência dos usuários, até a efetivação de 
negócios por parte das empresas que utilizam sites mais contemporâneos e dotados de recursos 
mais elaborados e profi ssionais. 
Dessa forma, utilizar-se de recursos adicionais é um dos caminhos mais explorados por 
profi ssionais da área, que acaba sendo uma das características mais evidentes do Design de 
modo geral, que é a interdisciplinaridade nessa área do conhecimento.
43WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 3
EDUCAÇÃO A DISTÂNCIA
1. DOMÍNIO E REGISTRO WEB
Quando as pessoas pensavam no nome de uma empresa, usualmente levavam em conta 
algo que pudesse remeter para a área de atuação dela, ou uma lembrança relacionada ao nome 
dos proprietários, ou sobre algum tipo de objetivo e mesmo uma palavra que indique o que a 
empresa faz.
E isso é feito até hoje, e não é um problema, pois é um conceito testado e comprovadamente 
vencedor ao longo da história, mas que sofre uma interferência importante vinda de quanto 
determinada marca é exposta ao público em geral, da qualidade de seus produtos ou serviços, 
assim como com relação à experiência que as pessoas têm com essa marca.
Assim, é fácil perceber que uma boa escolha de nome é importante, pois isso irá trazer 
uma série de impactos que podem se tornar um problema em algum ponto da caminhada da 
empresa, podendo até mesmo ser um limitante de seu crescimento, gerando algum tipo de 
problema, como a necessidade de troca de nome depois de algum tempo de existência (BEAIRD; 
GEORGE, 2016).
Mas a� nal de contas, o que isso tem a ver com a criação e o registro de domínios na 
internet? A resposta pode ser simplesmente: tudo! Tendo em vista que, para que possamos ter um 
site operando na internet, é necessário que ele tenha um domínio e que esse nome seja registrado.
Esse nome, ou como é denominado tecnicamente, o domínio, deve existir e ser registrado, 
pois irá servir como a identidade da empresa, instituição ou pro� ssional, na internet. É por esse 
nome que as pessoas irão procurar esse determinado negócio (HAROLD, 2010).
Dessa forma, sem isso, a criação do site pode � car inviável, pois o nome, além de ser uma 
obrigação técnica, traz consigo uma série de signi� cados para as pessoas, que dizem respeito ao 
ramo de atividade, potencial, seriedade, solidez e con� ançaem fazer negócios com a empresa.
Além dos fatores indicados anteriormente, quando pensamos no nome de um negócio, 
devemos ter em mente alguns aspectos importantes que não podem ser negligenciados, justamente 
para não se tornarem um problema no futuro. Por exemplo, se o nome já existe, se o existente é 
no mesmo ramo, ou num ramo que pode prejudicar o negócio que está sendo criado, se é de fácil 
� xação pelas pessoas, dentre outros fatores que poderiam ser mencionados (JENNER, 2019).
Se você vai atuar na internet, é importante entender que existem 
leis e regras que regem sua utilização, trazendo direitos e deveres 
a todas as pessoas. Dessa forma, é importante saber os limites 
e possibilidades que se enquadram na lei, para que não tenha 
algum tipo de problema no decorrer de sua carreira. Por isso, 
a indicação é a leitura do Marco Civil da internet, estabelecido 
pela Lei nº 12.965, de 23 de abril de 2014. Disponível em: 
<https://www.tjdft.jus.br/institucional/imprensa/campanhas-
e-produtos/direito-facil/edicao-semanal/marco-civil-da-
internet>. Acesso em: 19 jun. 2020.
44WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 3
EDUCAÇÃO A DISTÂNCIA
Assim, um primeiro passo, que por diversas vezes é ignorado, é o de realizar uma pesquisa 
prévia na internet, em algum buscador, pelo nome. Também é possível conversar com pessoas 
perguntando sobre o nome desejado para o negócio, mas de forma objetiva e organizada e, para 
isso, existem técnicas que podem ser adotadas, como grupos focais, pesquisas por enquete, de 
forma presencial ou on-line, dentre outras.
Tudo isso é importante para que o processo seja realizado com o mínimo de problemas e 
alterações bruscas, o que pode causar impactos importantes de forma negativa no projeto, tendo 
em vista que projetos web fazem parte, geralmente, de projetos macro de criação de empresas 
(KRUG, 2014).
Mas tais aspectos também podem ser aplicados em empresas que já possuem um histórico 
de atuação, mesmo que pequeno, e querem ingressar na internet com o objetivo de atingir mais 
pessoas por meio de seus produtos e serviços.
O diferencial é que provavelmente seja necessário, caso o nome já esteja sendo utilizado 
por uma outra empresa, veri� car alternativas que possam ajudar a manter o mais próximo possível 
o nome e signi� cado original, como siglas, complementos, ou ainda, algum tipo de acordo de 
compra dos direitos do nome.
Mas � que atento, pois o registro de um domínio possui regras, como o ramo de atuação da 
empresa e a sua real utilização. Dessa forma, não adianta querer registrar uma lista de nomes, se 
você não atua de fato nos ramos e atividades, pois isso é facilmente vetado ou revogado, deixando 
o caminho livre para algum negócio que realmente irá utilizar o nome em forma de domínio, 
devidamente registrado (MILETTO; BERTAGNOLLI, 2014).
De qualquer forma, independentemente do caminho escolhido, para estar na internet 
com um site, é preciso de� nir o nome, veri� car se ele está livre para uso, realizar o registro e dar 
sequência ao desenvolvimento do projeto. E vale ressaltar que isso envolve um custo constante, 
que normalmente é pago para um determinado período e precisa ser renovado de tempos em 
tempos, como, por exemplo, anualmente e assim por diante.
Para pesquisar se um domínio existe, você pode acessar <https://
registro.br/> e digitar o nome que pretende ter para o seu site.
Há categorias para o registro de site. Consulte em <https://registro.
br/dominio/categorias/>.
45WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 3
EDUCAÇÃO A DISTÂNCIA
Outro aspecto interessante de se observar é que, na internet, existem alguns tipos de 
extensão para os sites, sendo os de .com e .com.br os mais comuns de serem utilizados, sendo 
que os .com estão associados aos negócios que querem ser reconhecidos como internacionais 
e os .com.br reconhecidamente originários do Brasil, como acontece em outros países, como 
Portugal, que utiliza .pt, ou Itália, que utiliza .it. Podem existir variações como uma empresa que 
opta pela extensão .com e adiciona versões de seu site para os países ou idiomas para os quais 
desenvolve versões, com a utilização, por exemplo: nomedaempresa.com/pt ou nomedaempresa.
com/it e assim sucessivamente, conforme for o caso.
No Brasil, as extensões possíveis e mais comuns são: .com; .com.br; .ong.br; .nte.br; .edu.
br; .art.br; .blog.br; .b.br; dentre outras possibilidades que podem ser veri� cadas no serviço que 
pretende contratar para o registro do domínio do projeto que estiver desenvolvendo.
Na atualidade, existe uma série de empresas que possibilitam a contratação do registro 
de domínios para a internet, o que facilita e traz uma boa gama de opções para comparação de 
valores, que na prática são os mesmos para o domínio, mas podem ocorrer diferenças com a 
contratação de outros serviços de forma conjunta, como iremos abordar no próximo tópico da 
unidade, quando tratarmos do assunto de hospedagem.
Você pode consultar os valores em <https://registro.br/ajuda/
pagamento-de-dominio/>.
A indicação aqui é um conjunto de vídeos da série produzida pelo Discovery 
Channel em 2008, que traz 4 documentários distintos com foco na história da 
internet: Download: The true story of the internet (A verdadeira história da internet).
a) Browser wars, sobre a briga de navegadores (estrelando o Internet Explorer e o 
Mosaic);
b) Search, sobre o nascimento do Google e como ele esmagou a busca do Yahoo;
c) Bubble, sobre o estouro da bolha da internet no começo dos anos 2000;
d) People power, sobre como a web começou a dar poder para as pessoas sob o 
ponto de vista da troca de arquivos.
Os vídeos são facilmente encontrados no Youtube, seja em inglês 
(idioma original), assim como dublado ou legendado em português. 
Segue o link do primeiro vídeo, Browser wars: <https://www.youtube.
com/watch?v=qQwCx-Ey6x8>.
46WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 3
EDUCAÇÃO A DISTÂNCIA
Dentre as principais opções para a realização do registro do domínio, iremos destacar 
algumas empresas que operam no Brasil, o que pode mudar em termos de valor e mesmo do tipo 
de serviço e pacotes oferecidos. Dessa forma, é importante pesquisar antes de contratar algum 
serviço para projetos pessoais ou de clientes.
Na atualidade, existe uma enorme gama de empresas que possibilitam a pesquisa e o 
registro de domínios, podendo estar no Brasil ou fora, tendo em vista que esse tipo de serviço 
pode ser fornecido a partir de qualquer parte do mundo. Mas entre os principais que podemos 
citar estão: Registro.br, GoDaddy, Hostgator, Hostinger, Locaweb, King Host, UOL Host, Weblink 
e Rede Host.
No Registro.br (Figura 1), é possível pesquisar e contratar o domínio a partir de um ano, 
que é renovado periodicamente, assim como pela escolha de planos mais longos, que contam 
com descontos para esse tipo de contratação, proporcionais ao período escolhido.
Figura 1 - Site do Registro.br. Fonte: Registro.br (2020).
A GoDaddy (Figura 2) é uma das maiores empresas de registro de domínio, que traz uma 
série de recursos extras, possibilitando a contratação juntamente com o registro do domínio, 
além de ter sob sua gestão mais de 17 milhões de domínios ativos.
Ao escolher uma empresa na qual irá realizar o registro do domínio, assim 
como qualquer outro tipo de serviço relacionado ao desenvolvimento do site, é 
importante ter em mente que deve ser uma empresa que possa gerar segurança, 
especialmente se for algum tipo de site que irá conter informações de clientes, 
como banco de dados, e informações de cartão de crédito, endereço e documentos 
pessoais, pois isso pode ser uma tremenda dor de cabeça, caso essas informações 
sejam vazadas.
47WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 3
EDUCAÇÃO A DISTÂNCIA
Figura 2 - Site da GoDaddy. Fonte: GoDaddy (2020).
A HostGator (Figura 3) é uma outra grande empresa do setor de internet, fornecendo 
serviços que vão do registro de domínio, entre outros, o que possibilita uma série de recursos aos 
projetos.Figura 3 - Site da HostGator. Fonte: Hostgator (2020).
A Hostinger (Figura 4) é outra empresa que conta com o serviço de registro de domínio 
e outros mais que podem ser úteis ao desenvolvimento e manutenção de projetos que esteja 
desenvolvendo.
48WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 3
EDUCAÇÃO A DISTÂNCIA
Figura 4 - Site da Hostinger. Fonte: Hostinger (2020).
A LocaWeb (Figura 5) é uma empresa nacional, que foi crescendo ao longo do tempo e 
hoje oferece uma gama consistente de serviços para internet, assim como a opção de registro de 
domínio.
Figura 5 - Site da LocaWeb. Fonte: Locaweb (2020).
Assim, é possível veri� car que existe uma diversidade de serviços ao alcance no mercado 
para o desenvolvimento dos projetos web, que podem se ajustar aos mais diferentes objetivos. 
Além de � car claro que, independentemente do caminho escolhido, é necessário realizar a 
contratação de um serviço que permita o registro do domínio do negócio para a elaboração e o 
desenvolvimento do projeto web.
49WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 3
EDUCAÇÃO A DISTÂNCIA
2. HOSPEDAGEM
Ao iniciarmos um projeto web de desenvolvimento de site, temos que ter em mente qual 
será a estrutura necessária, uma vez que isso irá impactar os seus custos de manutenção, por 
causa das opções que forem adicionadas aos serviços contratados, inclusive do país onde isso for 
feito, por causa da variação do câmbio.
Mas levando em conta que iremos contratar um serviço pago em reais, ainda assim, 
podemos contar com uma série de opções que devem ser vistas com atenção, para não correr o 
risco de contratar menos do que é necessário, assim como a possibilidade de contratar mais do 
que precisa, tornando os custos com esse aspecto variáveis conforme a realidade de cada projeto.
Dessa forma, basicamente, precisamos encontrar uma empresa que forneça o serviço de 
hospedagem (Figura 6) para nosso site e, assim como exposto anteriormente, existem diversas 
empresas no mercado atualmente, que além de fornecerem o registro de domínios, atuam 
também na hospedagem e mesmo no desenvolvimento de sites, assim como fornecem soluções 
para serem utilizadas nos sites que desenvolvemos (JENNER, 2019).
Figura 6 - Quarto de hotel. Fonte: Freepik (2018).
Dentre as opções mais relevantes do mercado na atualidade, que oferecem algum tipo 
de serviço de hospedagem, podemos encontrar: GoDaddy, Hostgator, Hostinger, Locaweb, King 
Host, UOL Host, Weblink e Rede Host.
Em diversos casos, temos uma tendência a querer economizar onde mais importa, 
que no caso de projetos web, está no aspecto da segurança, dos dados e do 
processamento das informações. Dessa forma, é importante que, ao procurar um 
serviço de hospedagem, tenha em mente que, dentre os diversos planos e opções 
de empresa, é necessário realizar uma mescla de custo/benefício, para que, no 
futuro, não seja necessário realizar migrações, ou mesmo a troca de empresa, 
o que, de qualquer forma, é um inconveniente que irá demandar algum tempo e 
talvez algum custo.
50WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 3
EDUCAÇÃO A DISTÂNCIA
Além disso, é importante pontuar que existem diferentes tipos de hospedagem, que 
oferecem serviços e suportes distintos, sendo necessário � car atento aos diferenciais de 
cada opção para veri� car se aquilo que está incluso é o que precisa para o projeto que estiver 
desenvolvendo. Sendo assim, entre os tipos de hospedagem mais comuns, estão: Hospedagem 
Gratuita, Hospedagem Compartilhada, Hospedagem Cloud, Hospedagem VPS, Colocation e 
Servidor Dedicado (JENNER, 2019) cujas características serão expostas a seguir.
A hospedagem gratuita é uma opção usualmente recomendada para alguém que esteja 
começando e que queira conhecer o funcionamento de um serviço de hospedagem, pois traz 
consigo uma série de restrições quanto ao espaço que pode ser utilizado, suporte e mesmo 
segurança; por isso, não é recomendado para projetos de clientes em geral.
Na hospedagem compartilhada, ou hospedagem de sites, como é comumente vista em 
ofertas de empresas que oferecem esse tipo de serviço, funciona com a divisão de espaços onde 
são colocados diversos domínios distintos, separados por pastas num mesmo servidor. Dessa 
forma, compartilha toda a estrutura desse equipamento, como espaço, memória, processamento, 
rede etc., trazendo uma vantagem no custo de contratação.
Já a hospedagem em Cloud, mesmo sendo compartilhada, utiliza recursos mais avançados 
para suprir necessidades especí� cas, como no caso de um alto nível de acessos causados pelo efeito 
de um lançamento de produto/serviço, em que um determinado site precisa de mais memória e 
processamento. O sistema faz essa compensação automática ou manualmente, sem comprometer 
o desempenho do site por restrições físicas pré-estabelecidas e sem que seja necessário ocorrer 
uma migração de plano.
Com o uso do servidor dedicado, ocorre a contratação de um tipo de serviço exclusivo, 
sem os limites das opções compartilhadas, o que é indicado para projetos que tenham uma alta 
demanda de processamento, fazendo jus ao investimento que deve ser realizado para tal opção, 
uma vez que a totalidade do hardware contratado estará dedicada ao projeto contratante.
Na hospedagem VPS (Virtual Private Server, ou Servidor Privado Pessoal), obtêm-se 
benefícios próximos ao do servidor dedicado, mas de forma mais acessível, uma vez que, na 
prática, utiliza-se um servidor altamente potente, onde são criados diversos “mini” servidores, de 
forma virtual, que são programados para utilizar uma determinada porção de todos os recursos 
do servidor físico.
E, � nalmente, a hospedagem em forma de Colocation acontece quando uma empresa 
monta seu próprio servidor, de maneira física, mas o deixa em um local diferente, como uma 
empresa de datacenter, para aproveitar-se da estrutura de rede, internet etc.
Dentre as opções mais relevantes na atualidade, podemos destacar a lista a seguir com os 
planos existentes que devem ser observados com detalhes à medida que houver um novo projeto 
(Figuras 7 a 10).
51WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 3
EDUCAÇÃO A DISTÂNCIA
Figura 7 - Planos da GoDaddy. Fonte: GoDaddy (2020).
Figura 8 - Planos da Hostinger. Fonte: Hostinger (2020).
Figura 9 - Planos da Hostgator. Fonte: Hostgator (2020).
52WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 3
EDUCAÇÃO A DISTÂNCIA
Figura 10 - Planos da Locaweb. Fonte: Locaweb (2020).
Assim, é possível perceber e ter em mente a real importância de se realizar uma 
pesquisa objetiva com relação ao tipo de plano e estrutura necessária para um projeto que 
esteja desenvolvendo, de maneira a otimizar custos e, consequentemente, obter retornos com 
o desenvolvimento e a manutenção dos projetos. Dessa forma, é possível construir uma base de 
clientes e portfólio.
Além disso, é interessante pensar que, de acordo com o plano e recursos escolhidos, pode 
haver a necessidade no curto prazo de efetuar um upgrade.
3. TIPOS DE SITES
Devemos concordar que uma das formas de os negócios se comunicarem e se posicionarem 
no mercado na atualidade é ter um site com, pelo menos, informações básicas e objetivas acerca de 
suas atividades. Mas isso muda totalmente de perspectiva, caso a empresa seja do setor de varejo, 
por exemplo, e deseje realizar vendas de forma on-line, ou se for um fotógrafo que compartilha 
seus projetos por meio de galerias de fotos (JENNER, 2019).
Esses exemplos são apenas referências para que possamos entender que, com o 
desenvolvimento da internet, e consequentemente dos recursos de processamento e mesmo 
de programação, foi surgindo uma série de opções de sites mais adequados para cada área de 
atuação (Figura 11), com recursos que contribuíssem para sua efetiva atividade e, dessa maneira, 
otimizassem resultados (BEAIRD; GEORGE, 2016).
53WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 3
EDUCAÇÃO A DISTÂNCIA
Figura 11 - Diversos objetivos para os sites. Fonte: Freepik (2016).
Assim, é possível identi� car aomenos sete tipos de sites que podem ser classi� cados 
como categorias, que podem atender aos negócios de maneiras especí� cas conforme objetivos 
distintos. Dentre essas categorias, temos os seguintes sites: Institucional, Dinâmico, E-Commerce, 
One-Page, Portais, Hotsite e as Landing Pages, que serão descritos na sequência.
Um dos tipos de sites mais comuns e utilizados em projetos web é o do tipo Institucional, 
que envolve aquelas ideias para negócios que querem estabelecer contato com o público em geral, 
trazendo informações que tendem a não mudar com o tempo. Sendo assim, serve como um lugar 
onde a identidade da empresa é constante e con� ável, de forma a descrever os diversos aspectos 
do negócio, como localização, equipe, produtos ou serviços, assim como formas de contato e 
atuação (Figura 12).
Figura 12 - Tema Enrolled - Codevibrant. Fonte: Wordpress (2019).
54WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 3
EDUCAÇÃO A DISTÂNCIA
Sites do tipo Dinâmico trazem características híbridas, ao combinar seções com objetivos 
institucionais e de blogs, à medida que vai trazendo informações constantes ao público que quer 
atingir com uma linguagem mais informativa, de compartilhamento de informações da área de 
atuação, seus produtos ou serviços (Figura 13).
Figura 13 - Tema Fooding - Fame� emes. Fonte: Wordpress (2018).
O site de e-Commerce, ou Loja Virtual, é um dos mais fáceis de se entender para que 
serve, pois é utilizado, basicamente, para realizar vendas de produtos, ou mesmo serviços. 
Normalmente exige um alto volume de atividades no dia a dia e deve oferecer uma boa estrutura 
de processamento, para garantir que as pessoas tenham uma boa experiência no processo de 
compra, além de trazer segurança com relação aos dados cadastrados (Figura 14).
Figura 14 - Tema Envo eCommerce - Envo� emes. Fonte: Wordpress (2019).
55WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 3
EDUCAÇÃO A DISTÂNCIA
Os sites One-Page possuem atrativos que os fazem ser populares entre desenvolvedores, 
por terem altos níveis de responsividade e trazerem, de forma resumida, as informações em 
uma única página, com subdivisões de assuntos especí� cos, e agradam as novas gerações, que 
priorizam a agilidade e rapidez no acesso ao conteúdo que buscam (Figura 15).
Figura 15 - Tema Onepress - Fame� emes. Fonte: Wordpress (2020).
Portais são sites voltados totalmente para notícias e informações ao reunirem uma alta 
concentração de dados e usualmente são separados por seções, mas que funcionam de forma 
dinâmica ao trazerem opções de destaque para assuntos do momento. São massivamente utilizados 
por empresas de comunicação como jornais, canais de notícia e agências de informações, dentre 
outros (Figura 16).
Figura 16 - Tema News Portal Mag - Mystery � emes. Fonte: Wordpress (2020).
56WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 3
EDUCAÇÃO A DISTÂNCIA
Hotsites normalmente são utilizados em momentos especí� cos, para campanhas, 
promoções ou lançamento de produtos ou serviços, por exemplo. É prontamente tirada do ar, 
quando essa determinada ação passa ou é substituída por outro hotsite, dando continuidade ao 
processo de lançamentos e ações promocionais (Figura 17).
Figura 17 - Tema Rife Free - Apollo13themes. Fonte: Wordpress (2020).
Já as Landing Pages são similares aos hotsites, porém carregam consigo uma estrutura 
mais completa, em que todo o conteúdo é exposto em uma única página, onde são apresentados 
os serviços, produtos e ocorrem as vendas. É um tipo de site utilizado de forma recorrente em 
campanhas e links patrocinados em redes sociais por criadores de cursos, autores e editoras, 
assim como negócios de diversas áreas (Figura 18).
Figura 18 - Tema VW Landing - VW � emes. Fonte: Wordpress (2020).
57WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 3
EDUCAÇÃO A DISTÂNCIA
Tanto a nomenclatura como os tipos de sites podem variar conforme a região onde se 
estiver desenvolvendo projetos, assim como de acordo com a empresa fornecedora de temas, 
plugins ou extensões (MILETTO; BERTAGNOLLI, 2014). Dessa forma, as opções trazidas aqui 
servem como uma espécie de guia para que seja possível identi� car as principais características 
existentes e possibilidades.
4. RECURSOS PARA PROJETOS WEB
Usualmente os projetos de Design Grá� co utilizam imagens, ilustrações, vídeos, 
tipogra� as e uma variedade de recursos para tornar o projeto mais elaborado, mesmo que sejam 
apenas detalhes imperceptíveis aos leigos, mas que, no � m, trazem grande diferença ao resultado.
Dessa forma, é importante entender que, na atualidade, existe uma vasta gama de opções 
gratuitas e pagas para que sejam encontrados recursos que podem ser utilizados nos projetos 
grá� cos, incluindo os sites que podemos criar.
Dentre os recursos mais utilizados, podemos citar os bancos de imagens, os quais 
possuem em sua grande maioria um banco de dados imenso, com uma in� nidade de opções para 
cada tipo de projeto, com arquivos entre fotos, desenhos, ilustrações, imagens vetoriais, mapas, 
infográ� cos, arquivos PSD, vídeos e sons, entre outros, que são utilizados para os mais diferentes 
� ns.
Assim, podemos utilizar tais recursos para melhorar nossos projetos, tornando-os mais 
pro� ssionais e possibilitando que sejam absorvidos pelo público que interagir com eles.
Outro tipo de recurso utilizado amplamente são as tipogra� as, as quais também existem 
em grande variedade de tipos, formas e possibilidades, entre gratuitas e pagas, e podem ser 
utilizadas para trazer algum tipo de customização ou mesmo melhorar a experiência de leitura 
das informações.
Todos esses recursos são facilmente encontrados em buscas na internet e se multiplicam 
de tempos em tempos, de forma a contribuir com o aumento de possibilidades que podemos ter 
para a elaboração de nossos projetos.
Vale ressaltar, porém, que é importante ter cuidado redobrado ao utilizar esse tipo de 
recurso, com relação aos direitos autorais, assim como possíveis cobranças pela utilização de 
forma errada. Por exemplo, quando utilizamos uma foto que tem restrições de uso para materiais 
editoriais, em algum projeto promocional, ou uma ilustração paga, sem que tenha ocorrido o 
pagamento.
Portanto, utilizando com cuidado e responsabilidade, podemos aproveitar ao máximo 
as possibilidades existentes, de modo a trazer mais qualidade aos projetos que estivermos 
desenvolvendo, com um custo relativamente baixo.
Assim, dentre as alternativas, podemos destacar algumas opções gratuitas, o que contribui 
de forma signi� cativa, especialmente quando um pro� ssional está no início de sua carreira, ou 
o cliente em questão possui um orçamento apertado, ou mesmo se é um projeto bene� cente que 
não tem orçamento para dispor de imagens, vídeos, fontes e ilustrações.
Com relação aos bancos de imagens, dentre as opções gratuitas, com opções de planos 
de baixo custo, ou ainda com doações, podemos citar uma lista: Pixabay (Figura 19), Unsplash, 
StockSnapp.io, Flickr, Vecteezy, Burst, Freepik (Figura 20), FreerangeStock, Flaticon, Photopin, 
Public Domain Pi ctures, Gratisography, Picjumbo, Startup Stock Photos, Iso Republic, Pexels e 
Pikwizard. Além disso, há os bancos pagos, como Adobe Stock, Getty Images (Figura 21), dentre 
outros existentes. Eles possibilitam encontrar desde imagens bitmap a vetoriais, gratuitas e pagas, 
para os mais diferentes objetivos, o que contribui imensamente com os projetos.
58WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 3
EDUCAÇÃO A DISTÂNCIA
Para se ter uma ideia em termos de valores, no Freepik, é possível comprar planos 
mensais por 7,99 Euros por mês, ou 59,99 por ano. Na Getty Images, uma foto custa em torno de 
U$4,99 e existem pacotes diversos. Mas vale ressaltar que cada serviço possui suas características 
que fazem parte do preço, como exclusividade, imagens com melhor qualidade de produção e 
resolução, editoriais para usos exclusivos e outros diferenciais.
De forma resumida, o que � ca claro é que há espaço e possibilidades paracada bolso e 
tamanho de projeto.
Figura 19 - Pixabay. Fonte: Pixabay (2020).
Figura 20 - Freepik. Fonte: Freepik (2020).
59WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 3
EDUCAÇÃO A DISTÂNCIA
Figura 21 - Getty Images. Fonte: Getty Images (2020).
Para as opções de fontes, ou tipogra� as, também podemos citar uma série de sites onde 
é possível realizar o download gratuitamente, com algum tipo de pagamento, ou doações aos 
designers autores. Dessa forma, esse tipo de serviço, assim como os bancos de imagens citados 
anteriormente se enquadram na chamada economia criativa e colaborativa, em que é possível 
compartilhar trabalhos.
Assim, podemos citar uma lista com algumas possibilidades: DaFont (Figura 22), 
Font Freak, Creative Market, Fontspace, � e Northern Block, FontStruct, 1001 Free Fonts, 
Je� Schreiber, Typedepot, Fontfabric, Font Squirrel, Google Fonts (Figura 23), � e League of 
Moveable Type, Urban Fonts, Abstract Fonts, FontZone, Acid Fonts, Fawnt, MyFonts, Behance, 
Lost Type Co-Op, Fontshop, Pixel Buddha e Net Fonts.
Vale ressaltar que a maioria das opções citadas é em inglês e pode apresentar algum tipo 
de opção de pagamento ou doação, assim como restrições sobre as possibilidades de uso das 
fontes, segundo cada autor ou site. Assim, é importante veri� car as condições de uso, da mesma 
forma que ocorre para os sites de bancos de imagens.
Figura 22 - DaFont. Fonte: DaFont (2020).
60WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 3
EDUCAÇÃO A DISTÂNCIA
Figura 23 - Google Fonts. Fonte: Google Fonts (2020).
Além dos recursos apresentados, uma prática comum no meio da comunicação grá� ca, 
como no design grá� co e webdesign, é a contratação de pro� ssionais especializados em uma 
determinada área de atuação, como um fotógrafo, ilustrador, programador, designer de tipos etc. 
Uma vez que o Design de forma geral é multidisciplinar, esse tipo de movimento é natural de 
acontecer e promove o intercâmbio entre pessoas.
61WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 3
EDUCAÇÃO A DISTÂNCIA
CONSIDERAÇÕES FINAIS
Nesta unidade, foi possível veri� car uma série de recursos que fazem parte daquilo 
que podemos utilizar para o desenvolvimento de sites, como recursos complementares, ou 
seja, que estão além das linguagens de programação e que possuem grande importância para o 
desenvolvimento de projetos web.
Assim, passamos pelo domínio e registro dos sites, que perpassam o nome, que é um dos 
principais elementos de qualquer projeto, pois ter um bom nome e de fácil memorização pode 
garantir acessos mais frequentes. E ter isso registrado garante sua utilização e seu controle.
Da mesma forma, de que adianta ter um bom nome e com o devido registro, se não temos 
onde colocar todos os arquivos que fazem parte do site? Assim, a hospedagem garante que o site 
esteja no ar e possa ser acessado pelas pessoas.
Mas depois de tudo isso, que tipo de site fazer, ou seja, desenvolver? Aqui temos uma séria 
questão a resolver, pois cada tipo de site, como visto, atende a um determinado objetivo, mesmo 
que, em alguns aspectos, haja similaridades.
E, por � m, além dos itens mencionados, é importante saber que fotos, ilustrações e 
imagens utilizar e onde buscar, assim como que fontes serão utilizadas para apresentar os textos 
que serão incluídos nos sites, para que as informações possam ser lidas e entendidas de maneira 
fácil e e� ciente.
6262WWW.UNINGA.BR
UNIDADE
04
SUMÁRIO DA UNIDADE
INTRODUÇÃO ............................................................................................................................................................63
1. ENTENDENDO O WORDPRESS ...........................................................................................................................64
2. INSTALANDO E CONFIGURANDO O WORDPRESS ...........................................................................................64
3. PROJETO 01 EM WORDPRESS ...........................................................................................................................98
4. CONHECENDO O WIX ......................................................................................................................................... 131
5. PROJETO 02 COM WIX ....................................................................................................................................... 131
CONSIDERAÇÕES FINAIS .......................................................................................................................................148
PROJETOS PRÁTICOS DE SITES
PROF. ME. VAGNER BASQUEROTO MARTINS
ENSINO A DISTÂNCIA
DISCIPLINA:
WEBDESIGN
63WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
INTRODUÇÃO
A ideia central desta unidade focaliza os conceitos fundamentais do Wordpress e Wix, 
principais ferramentas na atualidade para o desenvolvimento de sites baseado em Sistemas de 
Gestão de Conteúdos, o CMS (Content Management System).
Assim, além de conhecermos os referidos sistemas, iremos realizar dois projetos de sites, 
sendo um em cada sistema, para que você tenha a oportunidade de escolher a partir das duas 
experiências.
Pode, assim, veri� car qual dessas opções se encaixa melhor no seu per� l de pro� ssional, 
e isso � cará visível no decorrer de cada projeto que iremos desenvolver de forma prática nesta 
unidade.
64WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
1. ENTENDENDO O WORDPRESS
O Wordpress é um sistema de gestão de conteúdo (Content Management System - CMS), 
de código aberto, ou seja, é passível de modi� cações em sua estrutura de códigos, o que requer 
conhecimentos avançados de programação. Mas, ao mesmo tempo, permite que pessoas sem esse 
tipo de conhecimento, ainda assim, possam criar sites com boas funcionalidades e responsividade.
Dessa forma, é uma importante ferramenta de criação e desenvolvimento de sites, sendo 
utilizada por uma parcela signi� cativa de projetos ao redor do mundo, contando com uma 
série de possibilidades em termos de layout, con� gurações e temas para utilização, os quais são 
desenvolvidos por inúmeras equipes e empresas no sentido de oferecer alguns de forma gratuita 
e outros em versões pagas.
Dentro dessas possibilidades, é possível desenvolver desde um blog até portais de notícias 
e lojas de e-commerce, utilizando-se bancos de dados e formas de pagamento, contudo com 
todas as con� gurações necessárias.
O Wordpress é muito popular entre desenvolvedores e mesmo entre pessoas que não 
trabalham diretamente com o desenvolvimento web, pois sua linguagem e abrangência são 
massivas e existe uma in� nidade de recursos, mas que exigem um certo grau de entendimento 
dos princípios básicos de desenvolvimento web e requerem algumas con� gurações simples, que 
podem ser realizadas por qualquer pessoa.
De forma geral, o Wordpress trabalha com um sistema de modelos, que são denominados 
temas, os quais podem ser remodelados e customizados pelas pessoas, conforme as possibilidades 
existentes em cada tema, seja ele gratuito ou pago (esse tipo de versão traz mais possibilidades). 
Assim, com sua popularidade, é possível migrar de um modelo para outro, sem a necessidade de 
executar, por exemplo, o recadastramento de clientes ou bancos de dados, realizando apenas uma 
alteração visual no estilo.
Ainda assim, é importante levar em consideração que, mesmo sendo possível realizar 
esse tipo de mudança, é importante entender que isso pode gerar uma série de consequências que 
devem ser bem pensadas.
2. INSTALANDO E CONFIGURANDO O WORDPRESS
Para o entendimento das con� gurações e instalação do Wordpress, iremos trabalhar com 
um servidor local, ou seja, instalado em seu próprio computador, para que possamos evitar a 
utilização de serviços pagos, como o de hospedagem em servidores, como os citados na unidade 
anterior. E caso opte pela contratação de tais serviços, essa etapa de instalação e con� guração é 
realizada de outra maneira, seguindo passosde cada serviço contratado, mas que se assemelham 
em boa parte com os procedimentos que iremos adotar aqui.
Assim, começaremos com a realização do download do Wordpress e o programa que 
servirá para instalar um servidor local. Dessa forma, podemos realizar todo o desenvolvimento, 
sem a necessidade de publicar de fato o site, antes que ele esteja completo, mas será possível 
realizar testes de forma real nele.
Vale ressaltar ainda que todos os recursos que utilizaremos nessa parte do desenvolvimento 
do site serão gratuitos, mas que, em sua maioria, possuem versões pagas, as quais podem ser 
adquiridas, caso você acredite ser necessário ou interessante para seus projetos.
65WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Além disso, é importante entendermos que existem dois tipos de Wordpress: o Wordpress.
org e o Wordpress.com, e ambos são parecidos e atuam de formas similares, mas focaremos no 
Wordpress.org, o qual possui um suporte mais amplo e versões gratuitas de temas, plugins e 
demais ferramentas utilizadas em projetos de sites.
Dessa forma, o primeiro passo é acessar o site do Wordpress (https://br.wordpress.org/) e 
realizar o download do programa.
Figura 1- Site Wordpress. Fonte: Wordpress (2020).
Ao acessar o site do Wordpress, clique na opção “Documentação”, do menu superior. 
Essa opção o levará para a tela de instalações prévias (Support) para que o Wordpress funcione 
corretamente em sua máquina.
Figura 2 - Página de suporte para instalação. Fonte: Wordpress (2020).
66WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Na página de documentação, desça até visualizar o tópico “O so� ware Wordpress” e 
depois clique na opção do menu lateral da direita em “Instalando Localmente”.
Figura 3 - Instalação do servidor local. Fonte: Wordpress (2020).
Na página de instalação local, desça até visualizar a opção “Instalando o XAMPP”, para 
que seja realizado o redirecionamento para a página de download do servidor que utilizaremos 
para a instalação e con� guração do Wordpress. O XAMPP é uma distribuição do Apache, fácil 
de instalar, contendo PHP, MySQL e Perl. Basta fazer o download e iniciar o instalador. Ou seja, 
toda a base de banco de dados necessária para o correto funcionamento do Wordpress.
Figura 4 - Site do XAMPP. Fonte: Apache Friends (2020).
Com a página aberta, escolha a opção mais recente, contornada em vermelho. Clique em 
baixar para que o download inicie.
67WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 5 - Arquivo do XAMPP. Fonte: O autor.
É provável que o arquivo de instalação seja salvo na pasta Downloads de seu computador; 
caso ele não esteja lá, procure pelo nome em “localizar”. Ao localizar, clique duas vezes com o 
botão esquerdo do mouse para iniciar o processo de instalação.
Figura 6 - Instalador do XAMPP. Fonte: O autor.
Ao abrir o instalador, deixe habilitada apenas a instalação do Apache e do PHP, mas se 
deixar as demais habilitadas, não irá causar nenhum tipo de con� ito futuro, clique em “Next” 
(Próximo) até iniciar a instalação de fato, com uma barra horizontal, que vai carregar até o 
término do processo.
68WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 7 - Processo de instalação do XAMPP. Fonte: O autor.
Aguarde alguns minutos até que ocorra o término do processo do XAMPP, o que pode 
variar conforme a con� guração do equipamento.
Figura 8 - Finalização de instalação do XAMPP. Fonte: O autor.
Ao � nal do processo de instalação, basta clicar em “Finish” para que a instalação seja 
� nalizada e o XAMPP seja iniciado.
69WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 9 - XAMPP aberto. Fonte: O autor.
Depois de clicar em “Finish”, o XAMPP será aberto. É necessário clicar nos botões de 
“Actions”, para iniciar os módulos. 
Figura 10 - Janela do Windows Defender. Fonte: O autor.
É possível que, ao clicar em “Start”, seja aberta uma janela do Windows Defender, 
solicitando permissão. Pode clicar em “Permitir acesso”, o que deve ocorrer apenas uma vez.
Nessa etapa, iremos instalar e con� gurar o MySQL 8, que irá fornecer o banco de dados 
para a construção dos projetos de sites. Para isso, acesse o site do MySQL em https://mysql.com/.
70WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 11 - Site do MySQL. Fonte: MySQL (2020).
Já no site, procure a opção DOWNLOADS e clique nela para abrir a página onde iremos 
dar prosseguimento ao processo de instalação e con� guração.
Figura 12 - MySQL Community (GPL) Downloads. Fonte: MySQL (2020).
Quando a página carregar, procure a opção MySQL Community (GPL) Downloads
e clique nela, a qual utilizaremos, tendo em vista que é gratuita e atende às necessidades de 
desenvolvedores autônomos, e mesmo em casos onde isso ocorre já em uma empresa de pequeno 
e médio porte.
71WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 13 - MySQL Installer for Windows. Fonte: MySQL (2020).
Na sequência, escolha a opção MySQL Installer for Windows, que servirá para instalar 
todas as ferramentas necessárias do MySQL que são utilizadas no site.
Figura 14 - MySQL Community Downloads. Fonte: MySQL (2020).
Em seguida, serão mostradas duas opções: uma com algo em torno de 25Mb e outra com 
427Mb, a qual vamos escolher, pois já realiza o download de todo o pacote, enquanto a primeira 
opção só baixa o instalador e depois se conecta para realizar o download das outras partes.
72WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 15 - No thanks, just start my download. Fonte: MySQL (2020).
A Oracle pede que seja realizado o login ou cadastro para realizar o download do MySQL, 
mas não é necessário, tendo em vista que não precisamos necessariamente do suporte, uma vez 
que é isso que ocorre ao realizar esse cadastro, sendo algo que pode ser decidido depois em 
caso de necessidade por causa de uma demanda mais robusta. Então, basta clicar na opção “No 
thanks, just start my download”, que o download iniciará automaticamente.
Figura 16 - Menu de execução do instalador. Fonte: O autor.
Após o download, procure onde está o arquivo (normalmente está localizado em 
Downloads) e dê um duplo clique para executar. Provavelmente será aberta uma janela solicitando 
a con� rmação da execução da instalação. Clique em executar.
Figura 17 - Carregamento do instalador. Fonte: O autor.
73WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Aguarde alguns segundos para que ocorra a instalação e, posteriormente, iniciaremos as 
con� gurações do MySQL.
Figura 18 - Con� guração do MySQL. Fonte: O autor.
A primeira janela de con� guração é referente ao nível e opções de ferramentas que 
queremos instalar de fato; nesse caso, iremos deixar como Developer Default, o que libera todos 
os privilégios para o administrador, que é comumente denominado root.
Figura 19 - Con� guração do MySQL. Fonte: O autor.
74WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Na sequência, pode ser informado que faltam alguns recursos detectados. Não se 
preocupe, pois não serão utilizados nessas con� gurações e para o desenvolvimento de sites 
localmente. Dessa forma, clique em “Next”.
Figura 20 - Con� guração do MySQL. Fonte: O autor.
Basta con� rmar em “Yes” e, na sequência, clicar em “Next”.
Figura 21 - Con� guração do MySQL. Fonte: O autor.
75WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
O instalador irá relacionar todos os itens que serão instalados e os carregará após ser 
clicado em “Execute”. Ao � nal desse carregamento, basta clicar em “Next” para prosseguirmos.
Figura 22 - Con� guração do MySQL. Fonte: O autor.
Na próxima tela, será mostrado aquilo que está pronto para ser con� gurado. Basta clicar 
em “Next”.
Figura 23 - Con� guração do MySQL. Fonte: O autor.
76WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIANessa parte, tem-se uma con� guração para casos em que é necessária a ocorrência de 
replicação de informações, do site para um sistema na empresa, o que não é necessário em nosso 
caso, e caso ocorra esse tipo de demanda, é recomendado que se consulte um especialista em 
infraestrutura de rede. Dessa forma, deixe como na imagem e clique em “Next”.
Figura 24 - Con� guração do MySQL. Fonte: O autor.
Aqui, vemos a parte das con� gurações de portas do MySQL, sendo apenas necessário 
deixar como é apresentado na � gura, que são as con� gurações padrão do MySQL. Assim, clique 
em “Next”.
Figura 25 - Con� guração do MySQL. Fonte: O autor.
77WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Na versão MySQL 8, é informado que o método de autenticação utilizado é uma versão 
mais poderosa que nas versões anteriores, o que garante mais segurança para as informações. É o 
tipo que utilizaremos; assim, clique em “Next”.
Figura 26 - Con� guração do MySQL. Fonte: O autor.
O usuário padrão do MySQL é o root, como abordado anteriormente. Dessa forma, 
precisamos criar uma senha para esse usuário, que deve ser forte com a utilização de letras, 
números e caracteres, levando em conta maiúsculas e minúsculas. Não se esqueça de anotar ou 
guardar essa senha em um local seguro e, depois disso, clique em Add User, para criarmos um 
outro usuário, que terá um nível abaixo do root, para ser usado em con� gurações futuras.
Figura 27 - Con� guração do MySQL. Fonte: O autor.
78WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Pode escolher um usuário de sua preferência, ou usar a palavra aluno/a e de� nir uma 
senha, utilizando os mesmos critérios mencionados anteriormente. Vale ainda ressaltar que é 
importante deixar com as mesmas con� gurações da imagem, para garantir um nível de acesso 
completo. Na sequência, clique em “Next”.
Figura 28 - Con� guração do MySQL. Fonte: O autor.
Na próxima tela, proceder conforme a imagem, para a criação do servidor de serviço no 
Windows. Na sequência, clique em “Next”.
Figura 29 - Con� guração do MySQL. Fonte: O autor.
79WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
É apresentada uma lista daquilo que será instalado. Basta clicar em “Execute”.
Figura 30 - Con� guração do MySQL. Fonte: O autor.
Ao término da instalação, basta clicar em “Finish”.
Figura 31 - Con� guração do MySQL. Fonte: O autor.
É apresentada uma lista, que mostra que o servidor MySQL foi instalado. Clique em 
“Next”.
80WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 32 - Con� guração do MySQL. Fonte: O autor.
Na tela subsequente, para a con� guração do Router, basta clicar em “Finish”, sem habilitar 
nenhuma opção, tendo em vista que não precisamos dessa ferramenta.
Figura 33 - Con� guração do MySQL. Fonte: O autor.
Na tela seguinte, clique em “Next”.
81WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 34 - Con� guração do MySQL. Fonte: O autor.
Agora é o momento de conectar a instalação do servidor, utilizando o usuário root e 
a senha previamente criada, clicando em “Check” na sequência, que irá habilitar a conexão e, 
posteriormente, clique em “Next”.
Figura 35 - Con� guração do MySQL. Fonte: O autor.
Nesse momento, clique em “Execute”, para aplicar a con� guração realizada anteriormente.
82WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 36 - Con� guração do MySQL. Fonte: O autor.
Posteriormente, clique em “Finish”.
Figura 37 - Con� guração do MySQL. Fonte: O autor.
Na sequência, ao � nalizar, como apresentado na lista, conforme a imagem, clique em 
“Next”.
83WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 38 - Con� guração do MySQL. Fonte: O autor.
Antes de clicar em “Finish”, deixe somente a primeira opção habilitada, conforme a 
indicação da imagem, pois não utilizaremos o Shell para o desenvolvimento dos sites. Isso pode 
ser habilitado posteriormente, caso surja algum tipo de necessidade especí� ca. Após isso, clique 
em “Finish”.
Figura 39 - Con� guração do MySQL. Fonte: O autor.
O MySQL será aberto depois de alguns segundos, conforme apresenta a imagem. Clique 
duas vezes em Local Instance MySQL80.
84WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 40 - Con� guração do MySQL. Fonte: O autor.
Será solicitada a senha do usuário root, digite-a no espaço de “password” e habilite a 
opção “salvar”, caso queira, e depois clique em “OK”.
Figura 41 - Con� guração do MySQL. Fonte: O autor.
Após esse procedimento, o MySQL será aberto completamente, ou seja, sua interface, que 
pode ser minimizada, assim como o XAMPP.
Depois de esses procedimentos prévios serem realizados, vamos voltar ao site do 
Wordpress.org e baixar o Wordpress, para que possamos iniciar outra etapa de con� guração e 
uso da plataforma.
85WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 42 - Site do Wordpress.org. Fonte: Wordpress (2020).
No site do Wordpress, clique na opção “Baixar o Wordpress”, que se localiza no canto 
superior direito da tela.
Na sequência, clique na opção “Baixar o Wordpress 5.5.1”, ou posterior.
Figura 43 - Site do Wordpress.org. Fonte: Wordpress (2020).
O download será iniciado automaticamente. Quando � nalizar, extraia o arquivo zipado 
para uma pasta que iremos criar dentro do diretório do XAMPP, que deve estar localizado em 
C:/xampp.
86WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 44 - Pasta do diretório do XAMPP. Fonte: O autor.
Na sequência, acesse a pasta xampp, e depois uma pasta nomeada como htdocs e crie 
uma pasta chamada site.com.br.
Figura 45 - Pasta htdoc. Fonte: O autor.
87WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Após criar a pasta site.com.br, copie a pasta wordpress, ou a extraia para a pasta site.com.
br, que é onde � carão todos os arquivos do seu site.
Figura 46 - Pasta site.com.br. Fonte: O autor.
Na sequência, abra seu navegador, como o Chrome, e digite o seguinte endereço: http://
localhost/site.com.br/wordpress. Note que o caminho indicado se trata da localização dos arquivos 
para a con� guração do Wordpress em sua máquina, ou seja, localhost é uma nomenclatura 
padrão para con� gurações locais de web, com subpasta de site.com.br e, por � m, a pasta do 
próprio Wordpress.
Feito isso, será carregada uma página de con� guração, onde são solicitadas algumas 
con� gurações necessárias ao banco de dados.
Figura 47 - Página de con� guração do Wordpress. Fonte: O autor.
88WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 48 - Página de con� guração do Wordpress. Fonte: O autor.
Antes de preenchermos essas informações, iremos voltar ao MySQL para criarmos o 
banco de dados que utilizaremos nesse projeto e para a con� guração do Wordpress.
Figura 49 - Página de con� guração do Wordpress. Fonte: O autor.
Com o MySQL aberto, digite o seguinte comando na linha 1: create database site_wp; e 
depois clique em CTRL+ENTER para executar o comando. Note que, na parte inferior, aparecerá 
uma mensagem informando que o banco de dados foi criado.
89WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 50 - Página de con� guração do Wordpress. Fonte: O autor.
Depois de ter veri� cado a con� rmação do primeiro comando, clique em ENTER duas 
vezes, para adicionar mais duas linhas e, na linha 3, digite o seguinte comando: use site_wp; 
como aparece na imagem, e depois clique em CTRL+ENTER para executar o comando.
Figura 51 - Página de con� guração do Wordpress. Fonte: O autor.
Note que, na parte intermediária inferior do lado esquerdo do MySQL, você consegue 
visualizar as opções Administration / Schemas. É provável que, no momento, você esteja em 
“Administration”, e ao clicar na opção “Schemas”, será possível ver o banco de dados criado, o 
site_wp. Caso não consiga, cliqueno botão “Refresh” ao lado da palavra “Schemas” na parte 
superior no lado esquerdo, logo abaixo do título “Navigator”.
90WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 52 - Página de con� guração do Wordpress. Fonte: O autor.
Agora precisamos criar o usuário; para isso, volte para a aba Administration, em seguida, 
clique em Users and Privileges. Na sequência, clique em Add account.
Figura 53 - Página de con� guração do Wordpress. Fonte: O autor.
Nesse momento, é necessário que você crie o usuário e a senha, que devem seguir os 
mesmos critérios anteriormente levantados quanto ao nível de segurança, sendo necessário 
con� rmar e depois clique em Apply. Depois o novo usuário irá aparecer na lista do lado esquerdo, 
onde já deve ter os usuários root e aluno (ou o nome que você de� niu).
91WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 54 - Página de con� guração do Wordpress. Fonte: O autor.
Repita o processo, adicionando um outro usuário, com mesmo nome e senha; porém, ao 
invés de % (porcentagem) no “Limit to Hosts Matching”, use localhost. Isso vai garantir o acesso 
ao banco de dados na máquina. Note dessa forma que, na lista, teremos dois usuários com o 
mesmo nome, porém com acessos distintos; inclusive, pode usar a mesma senha.
Figura 55 - Página de con� guração do Wordpress. Fonte: O autor.
Agora iremos de� nir os privilégios para os usuários; assim, inicie pelo user_site_wp
localhost, clicando na aba Schema Privileges e, na sequência, em Add Entry.
92WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 56 - Página de con� guração do Wordpress. Fonte: O autor.
Ao clicar em Add Entry, será aberta uma janela suspensa onde você deve selecionar 
o site_wp para o usuário acessar na opção Selected schema. Esse processo você deve repetir 
para os dois usuários user_site_wp clicando em OK depois de escolher as con� gurações como 
apresentadas na imagem.
Figura 57 - Página de con� guração do Wordpress. Fonte: O autor.
Em ambos os casos, é importante habilitar as permissões, que serão iguais para ambos, 
e devem ser marcadas e depois clicar em Apply. As opções que devem ser habilitadas são as 
contornadas em vermelho: SELECT, INSERT, UPDATE, DELETE, EXECUTE, CREATE, ALTER, 
CREATE VIEW, CREATE ROUTINE e CREATE TEMPORARY TABLES.
93WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 58 - Página de con� guração do Wordpress. Fonte: O autor.
Após realizar os procedimentos de privilégios para os dois usuários, volte à página de 
con� guração do Wordpress e preencha os dados conforme apresentado na imagem e depois 
clique em “Enviar”. 
Figura 59 - Página de con� guração do Wordpress. Fonte: O autor.
Carregará uma página informando que a instalação ocorreu com sucesso e então podemos 
instalar a comunicação do Wordpress com o servidor. Clique em “Instalar”. 
94WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 60 - Página de con� guração do Wordpress. Fonte: O autor.
As informações necessárias para essa parte são: Título do site, em que você pode usar o 
exemplo ou de� nir algum de sua preferência, nome do usuário (nesse caso, é para o Wordpress), 
senha (pode usar uma sua ou as geradas automaticamente, mas salve), e o e-mail, que pode ser 
um criado especi� camente para isso ou um que você utilize. Na sequência, clique em “Instalar 
Wordpress”.
Figura 61 - Página de con� guração do Wordpress. Fonte: O autor.
Após alguns segundos, será exibida uma mensagem informando que a instalação foi 
concluída e que já é possível acessar o Wordpress. Clique em “Acessar”.
95WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 62 - Página de con� guração do Wordpress. Fonte: O autor.
Na página de acesso, é provável que já apareça o usuário criado e a senha preenchida; 
em caso contrário, digite os dados e uma boa opção é marcar a caixa “Lembrar-me”. Em seguida, 
clique em “Acessar” para visualizar o Wordpress.
Figura 63 - Página de con� guração do Wordpress. Fonte: O autor.
Depois de carregar, sua página deve ter essa aparência, que é o painel de controle do 
Wordpress, onde ocorrem diversas das con� gurações para a criação dos sites.
Na interface do Wordpress, é possível instalar plugins, temas e as mais variadas 
ferramentas para o funcionamento e desenvolvimento de sites. Entre esses recursos, existem os 
gratuitos e pagos com uma diversidade de preços e capacidade de suporte, pensando em cada 
tipo de atividade ou necessidade.
Antes de darmos sequência e partirmos para a criação do site, passaremos brevemente 
pelo menu e funcionalidades do Wordpress, para que você se familiarize.
96WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 64 - Wordpress. Fonte: O autor.
Na parte superior, encontramos o menu inicial da plataforma, onde é possível ver o nome 
do site que está sendo criado, ou con� gurado, assim como o usuário que está realizando tais 
tarefas.
Figura 65 - Wordpress. Fonte: O autor.
Na lateral esquerda, temos o menu de opções do Wordpress, com diversas funções 
existentes, como a criação de posts, armazenamento e carregamento de mídias, como fotos, 
ilustrações e arquivos, páginas, comentários, aparência, usuários, ferramentas e con� gurações.
Figura 66 - Wordpress. Fonte: O autor.
97WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Passe o mouse sobre cada uma das opções, que será possível ver o que cada item oferece 
em termos de opções e con� gurações.
Para a construção de nosso projeto, iremos instalar alguns recursos que facilitarão nosso 
desenvolvimento.
Figura 67 - Wordpress. Fonte: O autor.
Para isso, vá até a ferramenta Plugins e clique na opção Adicionar novo.
Figura 68 - Elementor. Fonte: O autor.
No espaço para digitar a palavra-chave, digite “Elementor”, que é o construtor de sites 
que iremos utilizar, em sua versão gratuita. Dessa forma, nessa etapa, é preciso instalar e ativar os 
dois plugins destacados. Isso pode ser feito clicando em “instalar” nos dois, e depois clicando no 
menu, na opção “Plugins”, você pode ativar ambos depois.
98WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 69 - Wpforms. Fonte: O autor.
Precisamos instalar ainda o Wpforms, para podermos colocar um formulário de contato 
em nosso site. Para isso, siga o mesmo procedimento anterior utilizado no Elementor e ative o 
plugin.
3. PROJETO 01 EM WORDPRESS
Agora que temos tudo instalado em nosso Wordpress, vamos dar início ao desenvolvimento 
do site, que, para esse caso, será um site de turismo onde teremos as principais funcionalidades 
do Elementor.
Para darmos início, vá à opção Páginas e clique em Adicionar nova, para criarmos uma 
página nova já utilizando as con� gurações do Elementor.
Figura 70 - Elementor. Fonte: O autor.
99WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Com a página aberta, em adicionar título, digite a palavra Principal. Caso a aba do menu 
lateral do Wordpress não apareça, vá até os três pontinhos ao lado da engrenagem no canto 
superior direito, clique e, nas opções que aparecerem, desabilite tela cheia. Mas caso não goste de 
tantos elementos na tela, pode deixar como está.
Na sequência, clique em Publicar e, novamente, em Publicar.
Figura 71 - Elementor. Fonte: O autor.
Agora, ache a opção Wpforms e escolha Adicionar novo, pois iremos criar e con� gurar 
um formulário de contato para nosso site.
Figura 72 - Elementor. Fonte: O autor.
No nome do formulário, digite a palavra CONTATO e depois clique na opção abaixo de 
Formulário de contato simples.
100WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 73 - Elementor. Fonte: O autor.
Com o novo formulário aberto, iremos con� gurar a parte superior; para isso, clique 
uma vez no campo de nome, como na imagem destacada em azul claro e, no lado esquerdo, em 
Formatar, mude paraa opção Simples.
Figura 74 - Elementor. Fonte: O autor.
O formulário deverá ter essa aparência. Na sequência, clique em Salvar no canto superior 
direito e depois no “X” para voltar ao painel.
101WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 75 - Elementor. Fonte: O autor.
Agora, clique em Con� gurações e depois em Leitura. Ache a opção Uma página estática 
(selecionar abaixo), habilite essa opção e depois, em Página inicial, escolha Principal.
Figura 76 - Elementor. Fonte: O autor.
Em seguida, clique em Salvar alterações na parte inferior.
Figura 77 - Elementor. Fonte: O autor.
102WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Vá novamente para Con� gurações e depois em Links permanentes. Clique nessa opção 
e escolha, dentre as alternativas, Nome do post, como é mostrado na imagem, sem se esquecer 
de salvar.
Agora, vá à opção Páginas, clique com o botão direito em Todas as páginas e escolha 
Abrir em uma nova aba. Isso vai nos ajudar durante o desenvolvimento, para podermos visualizar 
como nosso site irá � car e facilitar o uso das ferramentas.
Figura 78 - Elementor. Fonte: O autor.
No menu de Páginas, clique na opção Editar, da página Principal, que será carregada 
em seguida.
Figura 79 - Elementor. Fonte: O autor.
Essa é a aparência de sua página ao carregar o elementor. Na sequência, vá até à parte 
inferior esquerda, na pequena engrenagem de con� gurações, e dê um clique, no menu, em 
“Layout da página”, escolha a opção Elementor canvas. 
103WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 80 - Elementor. Fonte: O autor.
Sua página � cará vazia, como na imagem a seguir. 
Figura 81 - Elementor. Fonte: O autor.
Isso é interessante, pois permitirá que possamos con� gurar todos os elementos que 
quisermos no site, trazendo mais controle e liberdade.
O menu do Elementor possui diversas ferramentas e opções de comandos e funções que 
podem ser incorporadas aos sites que forem projetados nele e isso pode ser veri� cado à medida 
que você se familiariza com ele.
104WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 82 - Menu do Elementor. Fonte: O autor.
Na parte superior, onde há a palavra elementor, podemos ver, do lado esquerdo, três 
riscos. Ao clicar ali, somos conduzidos às con� gurações gerais do site, como cores, estrutura e 
preferências. Do lado direito, na grade de quadrados, ao clicar, nos leva novamente às ferramentas 
de módulos, como adicionar � guras, textos e formulários, assim como os demais elementos que 
podem compor o site.
Figura 83 - Con� guração de cores. Fonte: O autor.
Nesse momento, iremos con� gurar as cores de nosso site; para isso, clique nas três 
pequenas barras ao lado esquerdo da palavra elementor do menu. E, na sequência, clique em 
Con� gurações do site.
105WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 84 - Con� guração de cores. Fonte: O autor.
Na sequência, clique em Cores globais.
Figura 85 - Cores globais. Fonte: O autor.
Aqui você pode usar a paleta sugerida, ou criar a sua, adicionando e excluindo cores 
conforme o projeto que estiver desenvolvendo. Para o nosso projeto, iremos deixar com as cores 
da imagem. Mas experimente opções!
106WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Agora, iremos de� nir as fontes que serão utilizadas no site, pois boa parte dos sites é textual 
e o conjunto deve possuir harmonia em sua composição. Nesse aspecto, é possível trabalhar com 
uma série de opções também. Dessa forma, é interessante que você faça combinações diferentes 
conforme o projeto que estiver desenvolvendo.
Figura 86 - Fontes. Fonte: O autor.
Para isso, clique na seta que aponta para a esquerda na barra azul superior, e ao voltar 
para o menu de con� gurações gerais, clique na opção Fontes globais.
Para alterar a fonte, basta clicar na caneta em cada opção e será aberta a con� guração 
de determinado elemento. Para nosso site, deixe com a seguinte con� guração: Primário: Varela, 
Secundário: Varela, Texto: PT Sans e Acento: Roboto. Depois clique em Atualizar na parte 
inferior, no menu de con� gurações.
Figura 87 - Fontes. Fonte: O autor. Figura 88 - Fontes. Fonte: O autor.
107WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 89 - Opções de inclusão. Fonte: O autor.
Note que, ao clicar na pequena grade de quadrados, você retorna ao menu com opções de 
elementos para incluir no site que estamos construindo e podemos ver essas duas opções onde 
as partes do site serão inseridas. Uma é para adicionarmos seções e a outra, para buscarmos 
modelos de partes ou de sites completos, os quais podemos customizar.
Figura 90 - Biblioteca. Fonte: O autor.
Clicando na pasta, você é direcionado para a Biblioteca, onde é possível realizar o 
download de temas prontos, possíveis de customização, de partes especí� cas que podem ser 
necessárias para um projeto que esteja em execução, como um banner, um slide show ou galerias, 
por exemplo. Vale ressaltar que existem opções gratuitas e pagas, usualmente identi� cadas com a 
palavra PRO. Assim, é importante veri� car a viabilidade de uso.
Além disso, você pode criar modelos e salvar na biblioteca para usos futuros, caso comece 
a ter um � uxo de projetos em um mesmo setor de atuação, por exemplo, em que seja possível 
utilizar uma estrutura próxima, o que pode adiantar uma série de etapas no desenvolvimento, 
otimizando tempo e retornos.
Figura 91 - Estruturas de seções. Fonte: O autor.
108WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Clicando no sinal de “+”, é aberta a parte de estrutura de seções do site, em que é possível 
incluir seções conforme desejado, desde inteiras, que irão ocupar a largura completa, até com 
diferentes divisões.
Figura 92 - Criando seções. Fonte: O autor.
Ao clicar no “+”, escolha a primeira opção de coluna, ou seja, a inteira, e sua tela � cará 
como na imagem.
Antes de continuarmos, é importante entender a hierarquia entre seção e colunas. Assim, 
seção é a parte com o contorno azul, e a coluna é a parte interna com o sinal de “+”. Teremos 
momentos em que iremos adicionar seções, editar e, em outros, iremos criar e editar colunas, que 
� cam dentro das seções.
Vamos editar nossa primeira seção, iniciando pela coluna, onde iremos colocar um título 
para nossa página, que será: Visite o estado de São Paulo!
Figura 93 - Criando seções. Fonte: O autor.
Para isso, clique na grade de quadrados, e na opção Título, mantenha o mouse pressionado 
e arraste para a coluna até formar uma linha azul e solte, como na imagem.
No menu lateral esquerdo, digite a frase do título: Visite o estado de São Paulo!
Para trazer um certo destaque ao título, vamos alterar a cor do fundo dessa coluna. Para 
isso, vá à aba Estilo, que está entre Layout e Avançado. Lembre-se de que você deve fazer isso 
em Editar coluna!
109WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 94 - Criando seções. Fonte: O autor.
Nas opções de Tipo de fundo, escolha a do pincel (Clássico), clique no pequeno globo e 
escolha a cor cinza de Texto, e deixe clicado no quadrado cinza ao lado do globo. Deixe próximo 
da con� guração mostrada na imagem.
Figura 95 - Criando seções. Fonte: O autor.
Agora, vamos colocar uma animação para o título, para quando ocorrer o carregamento 
do site. Para isso, ainda na edição da coluna, clique em Avançado e depois em Efeitos de 
movimento. Em Animação de entrada, escolha a opção Zoom in Down e, em Duração, deixe 
como Normal.
110WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 96 - Editando seções. Fonte: O autor.
Agora iremos editar a seção, que é possível, ao clicarmos no ícone de grade de quadrados 
como apresentado na imagem e, no nosso caso, iremos inserir um vídeo de fundo, mas poderia 
ser uma cor sólida, imagem ou slide show.
Para iniciar a edição,clique no ícone de Editar Seção. Depois, no menu lateral, clique em 
Estilo.
Figura 97 - Editando seções. Fonte: O autor.
Clique na opção Vídeo, que mostra um ícone de câmera.
111WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 98 - Editando seções. Fonte: O autor.
Agora, vamos realizar o download de um vídeo de oceano em um site de banco de imagens 
gratuitas, de modo a deixar nosso site com mais qualidade. Para isso, acesse o site https://pixabay.
com/pt/ e, nas opções de arquivos, clique em Vídeos e, na barra de procura, digite “Natureza”.
Figura 99 - Site Pixabay. Fonte: O autor.
112WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Nas opções que abrirem, busque a primeira imagem da segunda linha, como na próxima 
imagem, das ondas quebrando nas pedras.
Figura 100 - Site Pixabay. Fonte: O autor.
Clique em “Download” e escolha a última opção de tamanho, que é a versão mais 
otimizada para Web. Provavelmente ele será salvo na pasta “Downloads” de seu computador.
Figura 101 - Download do vídeo. Fonte: O autor.
Agora, precisamos carregar o vídeo em nosso site. Para isso, vá à aba do painel do 
Wordpress, em Mídia e, na sequência, clique em Adicionar nova.
113WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 102 - Carregando vídeo. Fonte: O autor.
Clique em Selecionar arquivos, e ache o arquivo do vídeo em seu computador. Depois 
de carregar, clique em Biblioteca. Clique sobre o ícone do arquivo, para abrir as con� gurações.
Figura 103 - Carregando vídeo. Fonte: O autor.
Copie o endereço que é mostrado em URL do arquivo e cole na outra aba do Elementor 
no local para link do vídeo.
Figura 104 - Carregando vídeo. Fonte: O autor.
114WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Agora vamos fazer alguns ajustes, que depois você pode mudar, caso queira.
Vá à aba de Layout, do menu lateral, e deixe “Largura do conteúdo” com “Largura total”, 
“Altura” com “Altura mínima”, mude o valor para 170 e deixe a “Posição da coluna” como “Meio”. 
Seu site � cará como na imagem a seguir.
Figura 105 - Carregando vídeo. Fonte: O autor.
Pronto, nossa primeira coluna está pronta, e agora, iremos construir a segunda coluna, na 
qual utilizaremos duas colunas.
Figura 106 - Criando nova seção. Fonte: O autor.
Nessa nova seção, iremos colocar, na coluna da esquerda, uma imagem. Para isso, 
selecione a coluna e, em seguida, clique na grade de edição de seção, mantenha o mouse clicado 
na opção Imagem e arraste até o sinal de “+” da coluna da esquerda e solte.
115WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 107 - Criando nova seção. Fonte: O autor.
Para as imagens, faremos da mesma forma que foi feito para o vídeo: iremos fazer o 
download no site da Pixabay. No site, clique em Fotos (Photos) e digite “praia” ou “beach” e 
procure por uma imagem de uma mulher com o chapéu na frente.
O processo para carregar é o mesmo, indo em Mídia, carregando o arquivo em Adicionar 
nova e, depois, clicando em Escolher imagem, no menu lateral do Elementor.
Figura 108 - Inserindo imagem. Fonte: O autor.
Depois que achar a imagem, veja se está selecionada e clique em Inserir mídia.
116WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 109 - Imagem inserida. Fonte: O autor.
Certi� que-se ainda de que, no “Tamanho da imagem”, esteja como Large - 1024 X1024.
Figura 110 - Imagem inserida. Fonte: O autor.
Vamos colocar um título na coluna ao lado. Para isso, clique na grade do menu lateral, 
mantenha o mouse clicado em Título e arraste até a coluna desejada. Na opção de texto para o 
título, digite São Sebastião.
117WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 111 - Inserindo título em coluna. Fonte: O autor.
Agora, vamos realizar algumas con� gurações para o texto.
Figura 112 - Con� gurando título em coluna. Fonte: O autor.
Deixe-o com a aparência da imagem, trocando a cor do título para branco e sombra com 
as con� gurações apresentadas.
Agora, iremos con� gurar a seção, trocando a cor de fundo por um gradiente; para isso, 
selecione a seção na pequena grade que � ca na parte superior no centro. Depois vá para Estilo e 
deixe com a con� guração parecida com a apresentada na imagem a seguir.
118WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 113 - Con� gurando fundo da seção. Fonte: O autor.
Iremos acrescentar uma seção interna, que será colocada dentro da coluna onde temos o 
título.
Figura 114 - Seção interna. Fonte: O autor.
Clique na grade do menu lateral, selecione a opção Seção interna e arraste até embaixo 
do título e, quando ver a barra azul, solte o mouse para adicionar a seção interna, que é dividida 
em duas colunas.
Figura 115 - Seção interna. Fonte: O autor.
119WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Volte à grade do menu lateral e, na opção Texto, mantenha pressionado o mouse e arraste 
para uma das colunas da Seção interna, depois repita o procedimento para a outra coluna. Nosso 
site � cará como na imagem a seguir.
Figura 116 - Textos da Seção interna. Fonte: O autor.
Para essa parte, copie e cole os textos a seguir, ou crie os seus:
Texto 01: Venha conhecer São Sebastião e se encante com lindas praias, cidade bem 
estruturada e ampla rede de opções de lazer para todos os públicos, com pousadas, hosts, hotéis, 
casas e apartamentos para alugar. 
Texto 02: Praias paradisíacas com água cristalina, que contam com todas as facilidades e 
conforto, ou ainda outras quase intocadas para quem prefere exclusividade ou aventura entre a 
natureza exuberante.
Figura 117 - Textos da Seção interna. Fonte: O autor.
Vamos editar brevemente o fundo da seção, clicando na grade da parte superior da seção. 
Depois vá para Estilo, no menu lateral, e em Cor de fundo, escolha a opção Clássico, de� na a 
cor branca, arrastando o mouse até o canto superior esquerdo do quadro de cor e depois coloque 
uma transparência, como na imagem a seguir.
120WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 118 - Textos da Seção interna. Fonte: O autor.
Agora iremos criar um botão para que pessoas possam entrar em contato, caso queiram 
obter mais informações.
Para isso, vamos voltar à grade do menu lateral e com o mouse pressionado, arraste a 
opção Botão até a parte debaixo das duas colunas de texto até formar a linha azul com a largura 
total dessas duas colunas, aí solte o botão e realize as con� gurações conforme mostra a imagem 
a seguir.
Figura 119 - Botão de informações. Fonte: O autor.
Em “Texto”, digite Reserve AGORA!, depois deixe centralizado. Em “Link”, poderia ser 
seu e-mail ou até mesmo um WhatsApp para conversar com as pessoas, mas aqui pode deixar 
em branco. Para “Alinhamento”, deixe centralizado e, em “Ícone”, escolha um de calendário e, no 
� nal, deixe o espaçamento com 10, entre o ícone e a palavra.
Na sequência, vamos posicionar o botão em um lugar melhor, mais perto dos textos. Para 
isso, vá para Avançado e, na margem superior, digite -90, ou vá reduzindo até esse valor. Deve 
� car como na imagem a seguir.
121WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 120 - Botão de informações. Fonte: O autor.
Podemos colocar uma classi� cação embaixo do botão de informações. Isso exigirá alguns 
ajustes entre os espaçamentos, o que, ao � nal, deve gerar algo parecido com a � gura abaixo.
Figura 121 - Classi� cação. Fonte: O autor.
Caso sinta di� culdade em selecionar o botão ou a classi� cação, pode ser recomendado 
utilizar a opção de Navegador, do menu lateral, que � ca na parte inferior.
122WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 122 - Navegador. Fonte: O autor.
Se você já utiliza so� wares como Photoshop ou Illustrator, funcionam como camadas 
(Layers) e pode ser algo bem útil, como nesse caso.
Agora partiremospara a próxima seção. Desça a barra de rolagem e crie uma nova seção 
com largura total. Depois, inclua um título, como já realizamos anteriormente, e escreva Campos 
do Jordão. Em seguida, volte para as opções e elementos e coloque um de imagem embaixo do 
título.
Figura 123 - Nova seção com título e espaço para imagem. Fonte: O autor.
Agora é necessário que volte ao site do Pixabay e realize o download das imagens que 
utilizaremos nessa seção.
123WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 124 - Imagens de neve. Fonte: O autor.
Ache e faça o download dessas quatro imagens e as carregue na biblioteca de Mídia.
Figura 125 - Mulher na neve. Fonte: O autor.
De volta ao Elementor, clique para adicionar a imagem que utilizaremos agora, que é a da 
mulher. Na sequência, em “Tamanho da imagem”, escolha Personalizado e digite 1280X400, e 
de� na alinhamento centralizado.
124WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 126 - Mulher na neve. Fonte: O autor.
Seu site deve estar com uma aparência semelhante à da imagem acima. Agora iremos 
adicionar uma galeria de imagens logo abaixo dessa imagem da mulher. Para isso, volte às opções 
do menu lateral, clicando na grade de quadrados, e escolha a opção Carrossel de imagem.
Figura 127 - Carrossel de imagem. Fonte: O autor.
Vamos inserir as imagens que baixamos do site com as paisagens. Para isso, selecione 
o carrossel de imagem que inserimos e, no menu lateral, clique em Adicionar imagens. Em 
seguida, selecione, com a ajuda do CTRL, as três paisagens e clique em Criar uma nova galeria
e depois em Inserir Galeria.
125WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 128 - Carrossel de imagem. Fonte: O autor.
Seu site deve estar com a seguinte aparência:
Figura 129 - Carrossel de imagem. Fonte: O autor.
Iremos, nesse momento, con� gurar a galeria. Na opção “Tamanho da imagem”, selecione 
a opção Personalizado e digite as medidas 500X350 e clique em Aplicar; isso fará com que as 
imagens � quem com o mesmo tamanho.
126WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 130 - Carrossel de imagem. Fonte: O autor.
Vamos agora colocar uma frase de efeito acima do título dessa seção, ou seja, da palavra 
“Campos do Jordão”.
Para isso, utilize o texto a seguir:
Texto: Neve e gelo em São Paulo? Sim, isso é possível em Campos do Jordão!
Para colocar o texto, selecione a opção de texto, no menu lateral, e arraste até a parte de 
cima do título da seção e, quando formar a linha azul, solte o cursor do mouse. Depois con� gure 
o texto em Estilo utilizando a fonte Bad Script, a cor azul e o tamanho 39 e alinhamento à direita. 
Além disso, modi� que o espaçamento entre essa frase e o título em Avançado, para que � que 
como na imagem a seguir.
Figura 131 - Frase con� gurada. Fonte: O autor.
127WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Seguimos para a próxima seção, na qual iremos colocar o mapa e depois o formulário de 
contato na sequência.
Para isso, crie uma nova seção abaixo dessa que acabamos de criar de coluna inteira e, nas 
opções do menu lateral, clique e arraste o mapa para a seção.
Figura 132 - Mapa. Fonte: O autor.
Para adicionar o mapa, basta, no menu de opções lateral, encontrar o do Google Maps e, 
com o mouse pressionado, arrastar para a seção, onde pode colocar um endereço da agência, que, 
no nosso caso, provavelmente será um � ctício e de� nir o zoom.
Agora iremos adicionar mais uma seção com o formulário de contato, e escolhemos a 
última opção da primeira linha, que contém duas colunas, sendo a primeira mais larga que a 
segunda.
Figura 133 - Formulário de contato. Fonte: O autor.
128WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Sua seção deve ter essa aparência, como mostrado na imagem anterior. E ao � nal da 
inclusão do Wpforms que criamos no início e do título Fale conosco! e do texto auxiliar, essa 
seção estará completa.
Figura 134 - Formulário de contato. Fonte: O autor.
Lembre-se de usar os conhecimentos adquiridos até aqui para fazer mudanças em 
gradientes e espaçamentos dos elementos para adequar conforme o projeto, assim como com 
relação ao conteúdo por completo.
Para encerrar o desenvolvimento desse site, iremos inserir uma nova seção no topo do 
site, clicando no sinal de “+” e escolhendo um tipo de seção dividida, com duas colunas iguais. 
E no menu lateral de opções, procure o elemento Ícone sociais e arraste para a coluna da direita.
Figura 135 - Redes sociais. Fonte: O autor.
Agora iremos customizar. Será possível editar quais redes sociais deseja colocar, podendo 
trocar. Para isso, basta clicar na rede social que deseja trocar e escolher dentre as opções que 
existem, como Instagram, Facebook etc., e ainda pode colocar o link para que, ao clicar, a pessoa 
seja redirecionada para o site da rede social.
Ainda é possível mudar a forma; no nosso caso, deve ser escolhida a circular e o 
alinhamento, que, para o nosso site, será à direita.
129WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 136 - Redes sociais. Fonte: O autor.
Em Estilo, pode mudar o tamanho dos ícones e o espaçamento. Recomendo que utilize 
tamanho 15 e espaçamento 10 e, descendo o mouse, ainda existe a opção de Ícone ao passar o 
mouse, com efeitos. A sugestão é escolher a opção Pop.
Agora iremos editar a seção, para que os ícones � quem sobre o vídeo do mar. Para isso, 
clique na grade centralizada na parte superior da seção e em Avançado, depois em Margem, 
clique na corrente, para modi� carmos apenas a posição inferior, e vá reduzindo até os ícones 
sumirem. Para que apareçam novamente, digite “1” na opção Z-Index e termine de ajustar como 
achar melhor.
Ao � nal, clique em Atualizar e depois no ícone do olho, para visualizar como � cou o 
site e realize ajustes que achar necessários. Para as versões para tablet e smartphone, devem ser 
customizadas posteriormente com medidas e padrões especí� cos.
A partir daqui, as customizações e realizações podem variar, assim como onde o site será 
hospedado, uma vez que isso depende da contratação de serviços especí� cos e com relação ao 
domínio.
Para esse site, realizamos todas as instalações e con� gurações para que você possa fazer 
isso no futuro, com mais independência e autonomia. Mas é possível utilizar os temas prontos 
que vimos no início deste material, que podem proporcionar uma série de elementos e recursos 
mais fáceis e rápidos de serem utilizados.
Ainda assim, é importante saber realizar as alterações, que são as mesmas demonstradas 
e realizadas por você nesse desenvolvimento.
Dessa forma, provavelmente seu site esteja semelhante a este:
130WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 137 - Site Wordpress pronto. Fonte: O autor.
131WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
4. CONHECENDO O WIX
O Wix é uma plataforma na qual praticamente todo o desenvolvimento dos sites ocorre 
de forma automatizada, trazendo soluções desenvolvidas de forma prévia, o que pode gerar 
benefícios em termos de otimização de tempo, mas, ao mesmo tempo, algumas restrições, 
especialmente levando em conta que ele permite a criação de sites totalmente gratuitos, como 
tipo de domínio e ações especí� cas que podem estar disponíveis somente para versões pagas.
Essas características são importantes de se levar em consideração para que, assim, 
possamos garantir que cada pessoa possa escolher qual tipo de plataforma prefere utilizar. 
Convém lembrar que, no Wordpress, utilizando o elementor, também é possível trabalhar com 
temas prontos para os mais diversos tipos de site.
No Wix, é possível, com algumas perguntas, de� nir layouts mais adequados, assim como 
ter mais liberdade em seus tipos e possibilidades. Além disso, na plataforma, é possível criar logos 
para os sites, caso seja um projeto no qual vocêestá desenvolvendo todas as partes, o que pode 
facilitar também o processo, mas note que cada decisão in� uencia o resto do projeto. Assim, cada 
passo deve ser bem planejado.
Outra característica importante de se ressaltar no Wix é que cada tipo de plano possui 
valores e possibilidades distintas, que devem ser levados em consideração, seja pelo tipo de 
negócio, ou mesmo seu tamanho e se comercializa produtos. Isso ocorre por causa, por exemplo, 
do � uxo de acessos e cadastramento de dados por parte de clientes, que devem fornecer segurança 
e agilidade.
Todos esses aspectos devem estar no planejamento, pois serão a porta de entrada 
nessa relação da empresa com possíveis consumidores, o que pode garantir um bom ou mau 
posicionamento do site e consequentemente da empresa em buscas e feedbacks de pessoas na 
rede.
5. PROJETO 02 COM WIX
Para iniciarmos nosso projeto no Wix, o primeiro passo é acessar o site da plataforma no 
endereço https://pt.wix.com/ e clicar no botão Comece já!
Figura 138 - Site Wix. Fonte: Wix (2020).
132WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 139 - Página de cadastro Wix. Fonte: Wix (2020).
Nessa etapa, existem algumas opções, como criar um cadastro usando sua conta do 
Facebook, da Google, ou ainda realizar um cadastro do zero. Escolha uma das opções e prossiga 
com o cadastro.
Figura 140 - Página de pesquisa Wix. Fonte: Wix (2020).
Depois que você clicar em “Registre-se”, a próxima página o convidará para uma pesquisa, 
que tem como intuito customizar a experiência. Clique em Vamos lá.
133WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 141 - Página de pesquisa Wix. Fonte: Wix (2020).
Nessa etapa, pergunta-se para quem é o site. No nosso caso, escolha a opção para mim 
mesmo.
Figura 142 - Página de pesquisa Wix. Fonte: O autor.
Agora a pergunta é sobre a área de atuação para o site que desejamos criar. Escolha a 
opção restaurantes.
134WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 143 - Página de pesquisa Wix. Fonte: O autor.
Na sequência, tem-se uma pergunta sobre nossa experiência em criação de sites. Para 
esse projeto, iremos selecionar a opção nunca criei site antes.
Figura 144 - Página de pesquisa Wix. Fonte: O autor.
Essa página é muito interessante, pois na plataforma do Wix, foi desenvolvido um sistema 
que usa Inteligência Arti� cial para a de� nição de temas e opções de sites, que é chamada de Wix 
ADI. É possível responder a algumas perguntas para que o sistema gere um layout baseado nas 
respostas.
Vale ressaltar que ainda é possível ir por um caminho mais livre, na opção ao lado, a qual 
irá diretamente para o editor, mas que também fornece uma gama de opções em termos de layout 
e tipos de áreas para o desenvolvimento de sites.
Mas em nosso caso, iremos utilizar o Wix ADI; para isso, clique em Comece Já.
135WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 145 - Con� gurando o Wix ADI. Fonte: O autor.
Depois de clicar em “Comece Já”, será aberta uma nova página onde serão apresentadas 
várias perguntas. Para a primeira, escolha a opção Restaurante e depois clique em “Próx.”
Figura 146 - Con� gurando o Wix ADI. Fonte: O autor.
Escolha a opção Restaurante italiano e depois clique em “Próx.”
136WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 147 - Con� gurando o Wix ADI. Fonte: O autor.
Note que, na próxima tela, serão oferecidos diversos recursos. Para o nosso caso, adicione 
os quatro primeiros em destaque. Em seguida, clique em “Próx.”
Figura 148 - Con� gurando o Wix ADI. Fonte: O autor.
Agora é o momento de escolher o nome, ou utilizar algum que já exista. Para o nosso 
projeto, iremos utilizar o nome Pepperroni. Depois prossiga clicando em “Próx.”
137WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 149 - Con� gurando o Wix ADI. Fonte: O autor.
Na tela seguinte, é perguntado se temos imagens ou site que queiramos carregar, deixe em 
branco e clique em “Próx.”
Figura 150 - Con� gurando o Wix ADI. Fonte: O autor.
Agora são solicitadas informações e você pode colocar as suas, ou criar dados � ctícios 
para o desenvolvimento do projeto. Depois clique em “Próx.”
138WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 151 - Con� gurando o Wix ADI. Fonte: O autor.
Entramos agora na parte mais relacionada ao grá� co, em termos de identidade visual do 
site. Para o nosso projeto, escolha a opção Eterno. Depois clique em “Continuar”.
Figura 152 - Con� gurando o Wix ADI. Fonte: O autor.
Nessa tela, são oferecidos três modelos baseados em todas as etapas anteriores. Em nosso 
caso, escolha a opção da direita, clicando em Editar Site.
139WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 153 - Con� gurando o Wix ADI. Fonte: O autor.
Depois de alguns instantes, o modelo todo con� gurado será carregado, pronto para ser 
customizado dentro das necessidades e objetivos para o projeto.
Figura 154 - Con� gurando o Wix ADI. Fonte: O autor.
A partir de agora, é possível realizar uma série de modi� cações: fotos, cores, fontes, 
alinhamentos, fundos e áreas como páginas, posições de menu de opções, descrições e tudo mais 
que seja necessário.
Além disso, é possível veri� car como o site está � cando e suas implicações para o modo 
de responsividade em telas diferentes.
140WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 155 - Conhecendo o Wix ADI. Fonte: O autor.
Cada parte do site é uma seção, que pode ser modi� cada. Assim, algumas dessas 
possibilidades serão apresentadas na sequência, mas você é livre para descobrir, brincar e 
modi� car tudo aquilo que desejar, no sentido de melhorar suas habilidades no desenvolvimento 
de sites. Pode, inclusive, trabalhar com outros layouts e áreas, para ver como cada tipo de opção 
reage com as mudanças e customizações.
Figura 156 - Conhecendo o Wix ADI. Fonte: O autor.
Vamos editar o logo de nosso projeto. Para isso, posicione o mouse acima do nome e 
clique na opção Editar.
141WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 157 - Conhecendo o Wix ADI. Fonte: O autor.
No menu lateral, habilite Slogan e Logo. Você verá um slogan sugerido e, para o logo, 
minha sugestão é você usar um site de banco de imagens gratuitas e baixar um ícone de pizza em 
png ou svg para esse projeto.
Se quiser, pode mudar o slogan sugerido. Para isso, basta digitar algo que tenha em mente.
Para substituir ou editar o logo, clique na opção em azul de Editar e Substituir em Logo.
Figura 158 - Conhecendo o Wix ADI. Fonte: O autor.
Clique em Substituir e depois em Upload de Mídia, para procurar em seu computador, 
caso tenha realizado o download de um ícone ou, se preferir, pode gerar um no Illustrator e salvar 
como png para usar no projeto. Na sequência, clique em “OK”.
142WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 159 - Conhecendo o Wix ADI. Fonte: O autor.
Ainda é possível alterar o tamanho, para adequar a proporção com o nome e link para 
que, se uma pessoa clicar no desenho do ícone, ela seja levada para a página principal, ou alguma 
outra, como de pedidos, por exemplo.
Figura 160 - Conhecendo o Wix ADI. Fonte: O autor.
Também é recomendado que sejam adicionadas as redes sociais, telefone e contato, pois 
isso pode contribuir para que o site atinja maior número de pessoas, por diferentes canais.
143WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 161 - Visualizando o site para desktop. Fonte: O autor.
Feche o menu lateral e clique na opção Visualizar site, no meu horizontal superior do 
editor de site. Nele é possível ver a versão para desktop e para mobile.
Figura 162 - Visualizando o site para mobile. Fonte: O autor.
Agora volte para a opção de visualização para desktop e depois volte para o editor de site,clicando na opção no canto superior esquerdo. Vamos realizar mais alguma edição.
144WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 163 - Customizando a seção de abertura. Fonte: O autor.
Vamos editar o design da seção de abertura, para utilizarmos um vídeo, que o próprio 
Wix disponibiliza. Para isso, posicione o mouse acima da seção onde lemos Bem-vindos e clique 
em Design.
Figura 164 - Customizando a seção de abertura. Fonte: O autor.
Dentre as opções personalizadas, escolha a que aparece na imagem acima e aguarde 
carregar.
145WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 165 - Customizando a seção de abertura. Fonte: O autor.
Ao carregar, clique em cima do vídeo, para realizarmos uma customização. No menu 
lateral que será carregado, conforme a imagem acima, em Layout da Mídia, escolha a opção 
Background, e depois, em Efeito de Rolagem, escolha Parallax.
Figura 166 - Customizando a seção de abertura. Fonte: O autor.
Depois feche o menu lateral e clique em Visualizar site, para vermos como � cou com 
essa customização.
146WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 167 - Customizando a seção de abertura. Fonte: O autor.
Note que o vídeo é iniciado automaticamente e funciona em � uxo contínuo.
Esse tipo de con� guração, assim como outras, agora são parte de sua tarefa de 
aperfeiçoamento. Dessa forma, experimente, realize alterações e veja o resultado.
Para o nosso projeto, agora iremos partir para a publicação.
Figura 168 - Publicação do site. Fonte: O autor.
Como esse projeto é apenas pedagógico, não temos um domínio registrado, e por isso 
iremos usar a opção de domínio gratuito do Wix. Assim, mude apenas o � nal para “pepperoni” 
ou o nome que tenha utilizado e clique em Publique e continue.
147WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
Figura 169 - Publicação do site. Fonte: O autor.
Para ver seu site no ar, pronto para ser compartilhado, basta clicar em Visualizar.
Assim, chegamos ao � m da criação do site no Wix. Aproveite a potencialidade da 
plataforma e todos os recursos expostos durante a disciplina.
148WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 4
EDUCAÇÃO A DISTÂNCIA
CONSIDERAÇÕES FINAIS
Nesta disciplina, o objetivo central foi o de trazer conteúdos relevantes e consistentes 
que possam ajudá-lo na criação e no desenvolvimento de sites que encantem pessoas, sejam seus 
clientes, ou os clientes deles, no sentido de gerar resultados e contribuir para o desenvolvimento 
de negócios pro� ssionais e instituições por meio da internet, assim como para contribuir com seu 
desenvolvimento educacional e pro� ssional.
Dessa forma, os assuntos, recursos e técnicas são os que existem de mais atuais, de modo 
a garantir que, a partir de uma base sólida, seja possível a você buscar um desenvolvimento mais 
amplo e que possibilite encontrar caminhos melhores para o desenvolvimento de projetos.
149WWW.UNINGA.BR
ENSINO A DISTÂNCIA
REFERÊNCIAS
BEAIRD, J.; GEORGE, J. Princípios do Web Design maravilhoso. [S. l.]: Alta Books, 2016.
BEHRENS, R. R. Art, Design and Gestalt � eory. Leonardo � e MIT Press, [s. l.], v. 31, n. 
4, p. 299-303, ago. 1998. Disponível em: https://muse.jhu.edu/article/607797/summary?casa_
token=vPCUqqUvJAoAAAAA:jT2rh8pg2irgy1DqpyDSObVrQqMphjpSBJbNNfSQCt3ZP_
CLtp0u3Pkjk9_0B0sqvxFn0arpnIQ#info_wrap. Acesso em: 4 jun. 2020.
BUILT WITH. WordPress Usage Statistics. Disponível em: https://trends.builtwith.com/cms/
WordPress. Acesso em: 17 jun. 2020.
CLAIR, K.; BUSIC-SNYDER, C. Manual de tipogra� a: a histó ria, a té cnica e a arte. Traduç ã o de 
Joaquim da Fonseca. 2. ed. Porto Alegre: Bookman, 2009.
CNDL; SPC Brasil. Consumo pela internet. [S. l.]: SPC Brasil, 2018. 
DAFONT. Disponível em: https://www.dafont.com/pt/. Acesso em: 4 out. 2020.
DRUPAL. Disponível em: https://www.drupal.org/. Acesso em: 4 out. 2020.
DUPRE, H. Atenção: UX e UI design não são a mesma coisa, mas caminham juntos. UX Collective. 
24 dez. 2019. Disponível em: https://brasil.uxdesign.cc/ux-e-ui-n%C3%A3o-s%C3%A3o-a-
mesma-coisa-mas-trabalham-juntos-936af57097dc. Acesso em: 17 jun. 2020.
FONSECA, J. Tipogra� a & design grá � co: design e produç ã o grá � ca de impressos e livros. Porto 
Alegre: Bookman, 2008.
FREEPIK. Graphic resources for everyone. Disponível em: https://www.freepik.com/. Acesso 
em: 4 out. 2020.
FREEPIK. Woman using computer. 2018. 1 fotogra� a. Disponível em: https://www.freepik.com/
free-photo/woman-using-computer_3277757.htm. Acesso em: 30 set. 2020.
FREEPIK. Crop man working with laptop. 2017. 1 fotogra� a. Disponível em: https://www.
freepik.com/free-photo/crop-man-working-with-laptop_1363923.htm. Acesso em: 30 set. 2020.
FREEPIK. Close-up image of programer working at his desk in o� ce. 2019. 1 fotogra� a. 
Disponível em: https://www.freepik.com/free-photo/close-up-image-programer-working-his-
desk-o� ce_5698344.htm. Acesso em: 30 set. 2020.
FREEPIK. Digital laptop working global business concept. 2018. 1 fotogra� a. Disponível em: 
https://www.freepik.com/free-photo/digital-laptop-working-global-business-concept_2862168.
htm. Acesso em: 30 set. 2020.
FREEPIK. Marketing online strategy with drawings. 2016. 1 fotogra� a com desenhos. Disponível 
em: https://www.freepik.com/free-photo/marketing-online-strategy-with-drawings_902917.
htm#page=1&query=online%20marketing&position=11. Acesso em: 2 out. 2020.
150WWW.UNINGA.BR
ENSINO A DISTÂNCIA
REFERÊNCIAS
FREEPIK. File formats collection. 2015. 1 desenho vetorial. Disponível em: https://www.freepik.
com/free-vector/� le-formats-collection_801555.htm#page=1&query=css&position=30. Acesso 
em: 2 out. 2020.
FREEPIK. Colorful gradient typography. 2019. 1 imagem vetorial. Disponível 
em: https://www.freepik.com/free-vector/colorful-gradient-typography_4429016.
htm#page=2&query=letters&position=19. Acesso em: 2 out. 2020.
FREEPIK. Man holding credit card in hand and entering security code using smart phone 
on laptop keyboard, online shopping concept. 2017. 1 fotogra� a. Disponível em: https://www.
freepik.com/free-photo/man-holding-credit-card-hand-entering-security-code-using-smart-
phone-laptop-keyboard-online-shopping-concept_1202145.htm#page=1&query=buying%20
on%20internet&position=12. Acesso em: 2 out. 2020.
FREEPIK. Business strategy success target goals. 2017. 1 fotogra� a. Disponível em: 
https://www.freepik.com/free-photo/business-strategy-success-target-goals_1211528.
htm#page=1&query=target&position=0. Acesso em: 2 out. 2020.
FREEPIK. Website html code browser view printed on white paper, closeup view. 2020. 1 
fotogra� a. Disponível em: https://www.freepik.com/free-photo/website-html-code-browser-
view-printed-white-paper-closeup-view_8487291.htm#page=1&query=html&position=0. 
Acesso em: 2 out. 2020.
FREEPIK. Icon of a web browser. 2018. 1 desenho vetorial. Disponível em: https://www.freepik.
com/free-photo/icon-web-browser_2755631.htm#page=1&query=navegador&position=0. 
Acesso em: 2 out. 2020.
FREEPIK. Web design concept with � at style. 2018. 1 desenho vetorial. Disponível 
em: https://www.freepik.com/free-vector/web-design-concept-with-� at-style_2488324.
htm#page=1&query=site&position=0. Acesso em: 2 out. 2020.
FREEPIK. Website setup concept for landing page. 2019. 1 desenho vetorial. Disponível 
em: https://www.freepik.com/free-vector/website-setup-concept-landing-page_5757023.
htm#page=1&query=site&position=22. Acesso em: 2 out. 2020.
FREEPIK. Friends on social media. 2018. 1 fotogra� a. Disponível em: https://www.
freepik.com/free-photo/friends-social-media_4191298.htm#page=1&query=people%20
internet&position=0. Acesso em: 2 out. 2020.
FREEPIK. Responsive concept illustration. 2019. 1 desenho vetorial. Disponível 
em: https://www.freepik.com/free-vector/responsive-concept-illustration_6170520.
htm#page=1&query=responsive&position=37. Acesso em: 2 out. 2020.
FREEPIK. Isometric e-commerce elements background. 2018. 1 desenho vetorial. Disponívelem: 
https://www.freepik.com/free-vector/isometric-e-commerce-elements-background_3063178.
htm#page=1&query=e+commerce&position=1. Acesso em: 2 out. 2020.
151WWW.UNINGA.BR
ENSINO A DISTÂNCIA
REFERÊNCIAS
FREEPIK. Ux ui design, mobile development application, user interface building, mobile 
phone screen. 2018. 1 desenho vetorial. Disponível em: https://www.freepik.com/free-vector/
ux-ui-design-mobile-development-application-user-interface-building-mobile-phone-
screen_4102317.htm#page=1&query=ux%20ui&position=18. Acesso em: 2 out. 2020.
FREEPIK. Touch screen hand gestures design elements of swipe pinch and tap 
isolated vector illustration. 2019. 1 desenho vetorial. Disponível em: https://www.
f reepik .com/free-vec tor/ touch-screen-hand-gestures-des ign-elements-swipe-
pinch-tap-isolated-vector- i l lustrat ion_4547268.htm#page=1&quer y=hand%20
smartphone&position=32#position=32&page=1&query=hand%20smartphone. Acesso em: 2 
out. 2020.
FREEPIK. Man is a man working on a laptop and testing on mobile devices. 2020. 1 fotogra� a. 
Disponível em: https://www.freepik.com/free-photo/man-is-man-working-laptop-testing-
mobile-devices_10001979.htm#query=notebook&position=45. Acesso em: 4 out. 2020.
FREEPIK. Programmer working with CMS. 2019. 1 desenho vetorial. Disponível 
em: https://www.freepik.com/free-vector/programmer-working-with-cms_5480312.
htm#page=1&query=cms&position=0. Acesso em: 4 out. 2020.
FREEPIK. Programming concept. 2020. 1 desenho vetorial. Disponível em: https://www.freepik.
com/free-vector/programming-concept-illustration_7118756.htm. Acesso em: 4 out. 2020.
FREEPIK. Hotel room. 2018. 1 fotogra� a. Disponível em: https://www.freepik.com/free-photo/
hotel-room_4075647.htm#query=hotel&position=1. Acesso em: 4 out. 2020.
FREEPIK. Laptop with di� erent applications installed. 2016. 1 fotogra� a com desenhos. 
Disponível em: https://www.freepik.com/free-photo/laptop-with-di� erent-applications-
installed_902746.htm#page=1&query=web%20site&position=3. Acesso em: 4 out. 2020.
GARFIELD, S. Esse é meu tipo: um livro sobre fontes. São Paulo: Zahar, 2012.
GETTY IMAGES. Movendo o mundo com imagens. Disponível em: https://www.gettyimages.
com.br/. Acesso em: 4 out. 2020.
GODADDY. Hospedagem de sites da GoDaddy. Disponível em: https://www.godaddy.com/pt-
br/hospedagem. Acesso em: 4 out. 2020.
GOMES FILHO, J. Design do objeto: bases conceituais. [S. l.]: Escrituras, 2006.
GOMES FILHO, J. Gestalt do objeto: sistema de leitura visual da forma. [S. l.]: Escrituras, 2013.
GOOGLE FONTS. Disponível em: https://fonts.google.com/. Acesso em: 4 out. 2020.
HAROLD, E. R. Refatorando HTML: como melhorar o projeto de aplicações web existentes. 
Tradução de Eduardo Kessler Piveta. Porto Alegre: Bookman, 2010.
152WWW.UNINGA.BR
ENSINO A DISTÂNCIA
REFERÊNCIAS
HOSTGATOR. Hospedagem de sites. Disponível em: https://www.hostgator.com.br/
hospedagem-de-sites-seu-sucesso?gclid=Cj0KCQjw5eX7BRDQARIsAMhYLP8R7MtJNfZCU
RFyZoAGzPWzYI7edWfUT-_KhpGBy4XVzita6KynoS4aAj_mEALw_wcB. Acesso em: 4 out. 
2020.
HOSTINGER. Hospedagem de sites. Disponível em: https://www.hostinger.com.br/
hospedagem-de-sites. Acesso em: 4 out. 2020.
JENNER, N. Building websites for beginners: introduction to WordPress, Joomla, Wix and 
Drupal. São Paulo: Amazon, 2019.
JOOMLA. � e � exible platform empowering website creators. 2020. Disponível em: https://
www.joomla.org /. Acesso em: 4 out. 2020.
KRUG, S. Não me faça pensar. [S. l.]: Alta Books, 2014.
LOCAWEB. Hospedagem de sites. Disponível em: https://www.locaweb.com.br/hospedagem-
de-sites-com-dominio-gratis/. Acesso em: 4 out. 2020.
MAGENTO. Tour Magento commerce. 2020. Disponível em: https://magento.com/pt. Acesso 
em: 4 out. 2020.
MARCO, I.; SOUZA, J.; COSCI, T. Estudo da teoria da Gestalt em anúncios da marca Heineken. 
Revista Unaerp, [s. l.], n. 10, p. 100-114, 2018.
MERLO, E.; CERIBELI, H. Comportamento do consumidor. Rio de Janeiro: LTC, 2014.
MILETTO, E. M.; BERTAGNOLLI, S. C. Desenvolvimento de so� ware II: introdução ao 
desenvolvimento web com HTML, CSS, JavaScript e PHP. Porto Alegre: Bookman, 2014.
MORAIS, F. Planejamento estratégico digital. 2. ed. São Paulo: Saraiva Educação, 2018.
OLIVEIRA, S. Â. V. Guia digital sobre a Gestalt. 2016. Trabalho de Conclusão de Curso 
(Bacharelado em Desenho Industrial) – Universidade de Brasília, Brasília, 2016.
PIXABAY. Use o nosso banco de imagens Royalty Free. Disponível em: https://pixabay.com/pt/. 
Acesso em: 4 out. 2020.
REGISTRO.BR. Disponível em: https://registro.br/. Acesso em: 4 out. 2020.
SILVA, M. S. Web Design responsivo: aprenda a criar sites que se adaptam automaticamente a 
qualquer dispositivo, desde desktops até telefones celulares. São Paulo: Novatec, 2018.
SOLOMON, M. R. O comportamento do consumidor: comprando, possuindo e sendo. Tradução 
de Beth Honorato. 11. ed. Porto Alegre: Bookman, 2016.
153WWW.UNINGA.BR
ENSINO A DISTÂNCIA
REFERÊNCIAS
TERUEL, E. C. HTML5: guia prá tico. 2. ed. rev. atual. e ampl. Sã o Paulo: É rica, 2014.
WEB ARCHIVE. [Site do UOL]. 1996. Disponível em: https://web.archive.org/
web/19961223175947/http://uol.com.br/. Acesso em: 4 out. 2020.
WIX. Aqui você pode criar seu site pro� ssional. 2020. Disponível em: https://pt.wix.com/. 
Acesso em: 4 out. 2020.
WORDPRESS. Conheça o Wordpress. 2020. Disponível em: https://br.wordpress.org/. Acesso 
em: 4 out. 2020.
WORDPRESS. Tema Enrolled. 2019. Disponível em: https://br.wordpress.org/themes/enrolled 
/. Acesso em: 4 out. 2020.
WORDPRESS. Tema Fooding. 2018. Disponível em: https://br.wordpress.org/themes/fooding/. 
Acesso em: 4 out. 2020.
WORDPRESS. Tema Envo eCommerce. 2019. Disponível em: https://br.wordpress.org/themes/
envo-ecommerce/. Acesso em: 4 out. 2020.
WORDPRESS. Tema Onepress. 2020. Disponível em: https://br.wordpress.org/themes/onepress/. 
Acesso em: 4 out. 2020.
WORDPRESS. Tema News Portal Mag. 2020. Disponível em: https://br.wordpress.org/themes/
news-portal-mag/. Acesso em: 4 out. 2020.
WORDPRESS. Tema Rife Free. 2020. Disponível em: https://br.wordpress.org/themes/rife-free/. 
Acesso em: 4 out. 2020.
WORDPRESS. Tema VW Landing. 2020. Disponível em: https://br.wordpress.org/themes/vw-
landing-page/. Acesso em: 4 out. 2020.
ZEMEL, T. Web Design responsivo: páginas adaptáveis para todos os dispositivos. São Paulo: 
Casa do Código, 2015.
ZENONE, L. C. Fundamentos de marketing de relacionamento: � delização de clientes e pós-
venda. 2. ed. São Paulo: Atlas, 2017.