WEB DESIGN

AULA 6

Prof. Matias Peruyera

 CONVERSA INICIAL

Para esta aula, vamos aprofundar algumas áreas já vistas. Vamos

apresentar algumas tags HTML básicas e importantíssimas, complementar as
possibilidades de trabalhar com os estilos de fundos e ver algumas questões
específicas de desenvolvimento para dispositivos móveis e as ferramentas que
podem ser usadas. Tudo isso dividido em cinco temas:

• mais alguns elementos HTML;

• imagens de fundo;

• mais algumas possibilidades do CSS;

• design responsivo e media queries; e

• ferramentas e métodos.

CONTEXTUALIZANDO

O trabalho com HTML e CSS – por não mencionar as outras tecnologias

envolvidas em um site –, ao mesmo tempo que é um pouco desafiador, permite
várias soluções e até “gambiarras” fáceis de encontrar em uma busca na web. É
importante que você entenda o funcionamento básico dessas linguagens, mas
também que há toda uma série de possibilidades já explorada pela comunidade
online. A solução que você precisa está a poucas buscas de distância. Por isso,
não desista! Já teve alguém que precisou resolver o mesmo problema e que se
dispôs a publicar a solução.

TEMA 1 – MAIS ALGUNS ELEMENTOS HTML

Há muitos elementos HTML. Aqui vamos falar de três elementos

importantes, que servem para pôr imagens em uma página, para fazer links e
para desenhar tabelas.
Recomendamos que você conheça os outros elementos HTML, para o
caso de ser necessário para algum projeto específico. Há elementos específicos
para elaborar glossários, por exemplo. Pesquise qual é. Mas antes, veja estes.

2
 1.1 Imagens

Quando a imagem é parte do conteúdo, ela é inserida no HTML com uma

a tag img. Esta tag não precisa ser fechada, mas precisa de atributos. Um deles
é o endereço da imagem. No exemplo, o arquivo, para ser encontrado, precisa
estar na mesma pasta que o HTML.

<img src="bolodecenoura.jpg" alt="Imagem de bolo de cenoura sobre

prato branco.">

O outro atributo é o alt, espaço para inserir uma descrição da imagem,

que aparecerá caso a imagem não possa ser carregada ou caso a pessoa tenha
desligado a exibição de imagens por algum motivo, ou será lida para pessoas
com deficiência visual que estejam usando um leitor de telas. Por isso, é
importante lembrar de inserir essa informação.
As imagens também podem aparecer dentro de um elemento figure, que
contém a imagem e mais uma legenda (figcaption):

<figure>
<img src="bolodecenoura.jpg" alt="Imagem de bolo de cenoura sobre
prato branco.">
<figcaption>Bolo de cenoura.</figcaption>
</figure>

1.2 Hiperlinks

Links são a essência da web. A tag para criar um hiperlink em HTML é

<a>. Porém, assim como a tag <img>, ela precisa de alguma indicação do
destino desse hiperlink. Essa indicação fica no argumento href. A tag <a> precisa
de fechamento, então, o que fica entre as tags de abertura e fechamento é a
palavra que ficará disponível para clicar.

<a href=”http://www.site.com”>Clique aqui!!!!</a>

Demos como exemplo, mas nunca use “clique aqui” para links. Uma regra
de usabilidade básica é que o texto do link explique o destino desse link. Vejamos
um exemplo melhor, dentro de uma tag de parágrafo.

<p>Para saber mais sobre capivaras, acesse o <a href=”

https://pt.wikipedia.org/wiki/Capivara”>artigo sobre capivaras da
Wikipédia</a>.</p>

3
 Um hiperlink também pode direcionar para uma parte específica da
mesma página em que o link está, ou para uma parte específica de outra página.
Podemos continuar usando a Wikipédia como exemplo. Cada subtítulo tem um
id – lembra deles? – próprio. Por exemplo, o título “Etimologia e nomes
populares” está dentro de um elemento com
id="Etimologia_e_nomes_populares”.

Sendo assim, o código

<p>Você sabia os outros nomes da capivara? <a href=”

https://pt.wikipedia.org/wiki/Capivara#Etimologia_e_nomes_populares”>V
eja na Wikipédia</a>.</p>

Leva você diretamente para essa seção. Um link nessa mesma página pode ser
simplesmente <a href="#Etimologia_e_nomes_populares">.

1.3 Tabelas

As tabelas são uma excelente maneira de apresentar informação. O

HTML tem tags específicas para formatar tabelas. O elemento table contém
elementos tr – table row, as linhas. Estes, por sua vez, contêm elementos th –
table header – ou td – table data. Cole o código dentro do body de um arquivo
HTML e compare com a figura 1.

<table>
<tr>
<th>Animal</th>
<th>Ordem</th>
<th>Peso máximo</th>
</tr>
<tr>
<td>Capivara</td>
<td>Roedor</td>
<td>90 kg</td>
</tr>
<tr>
<td>Porquinho-da-Índia</td>
<td>Roedor</td>
<td>1,5 kg</td>
</tr>
</table>

4
 Figura 1 – Tabela em HTML

Animal Ordem Peso máximo

Capivara Roedor 90 kg

Porquinho-da-Índia Roedor 1,5 kg

Fonte: Matias Peruyera.

Claro que está simples demais, e inclusive difícil de entender. Mas, com
CSS, é possível alterar fundos, colocar bordas, cuidar do alinhamento do texto
etc. É muito melhor e mais acessível do que simplesmente usar uma captura de
tela de uma tabela feita em outro programa.

TEMA 2 – IMAGENS DE FUNDO

Enquanto no HTML é possível inserir imagens que serão parte do

conteúdo da página, no CSS é possível determinar as imagens de fundo de
vários elementos. Vamos voltar ao HTML que estavámos usando para estudar
os fundos, e deixar uma imagem na mesma pasta do HTML. No CSS, use o
seguinte código e compare com a Figura 2.

.testesfundo {
background-image: url(cara.png);
}

Figura 2 – Imagem de fundo

Fonte: Matias Peruyera.

5
 Como você deve imaginar, é possível determinar várias propriedades para
o background. Acrescente uma cor, para facilitar a visualização dos resultados.
Como a imagem que usamos aqui tem fundo transparente, vai funcionar.
Além disso, é possível alterar também como a imagem se repete. Por
padrão, ela se repete na horizontal e na vertical, mas é possível determinar que
ela se repita apenas em um sentido ou que não se repita. Mude o estilo e
compare com a Figura 3.

.testesfundo {
background-color: lightblue;
background-image: url('cara.png');
background-repeat: repeat-y;
background-position: right;
}

Figura 3 – Exemplo de repetição vertical

Fonte: Matias Peruyera.

Antes do surgimento dos gradientes em CSS, era usada uma imagem com
um gradiente de um pixel de largura ou altura, configurada para repetir horizontal
ou verticalmente.
Dependendo dos resultados desejados, é necessário trabalhar com as
imagens para que elas encaixem perfeitamente umas nas outras. Na Figura 4,
por exemplo, temos uma imagem que, se repetida, gerará um fundo que você já
viu antes.

6
 Figura 4 – Figura para se repetir em um fundo

Fonte: Matias Peruyera.

Ela foi cuidadosamente editada – no Photoshop, no caso – para que não

tenha sequer um pixel que impeça a repetição. Para esse caso, é mais
interessante usar a solução em código, mas é interessante para observar como
deve ser feito. Como exercício, tente reproduzir essa imagem e escrever o
código para conseguir um fundo idêntico àquele que você já viu. Dica: a imagem
deve ficar com 80 pixels de lado.
Também é possível usar várias imagens para o fundo de um único
elemento. O código começa a ficar complicado, mas pode ser adequado para
alcançar certos resultados que não conseguiríamos com cores ou gradientes.
Com imagens bem planejadas, é possível criar até ilustrações.

TEMA 3 – MAIS ALGUMAS POSSIBILIDADES DO CSS

Vamos ver mais alguns elementos que podem ser alterados apenas com
CSS, que podem enriquecer um layout e torná-lo mais usável.

3.1 Bordas

As propriedades border permitem aplicar bordas a elementos HTML.

Vamos retomar o HTML de nossa receita e aplicar bordas ao header. Vamos,
novamente, trabalhar separadamente dos seletores que já definimos, mas
lembre-se de que eles podem ser agrupados depois. No arquivo CSS,
acrescente o seguinte código e compare com a Figura 5.

header {
border: 4 px solid red;
}

7
 Figura 5 – Borda aplicada ao header

BOLO DE CENOURA
Que tal um bolo de cenoura bem gostoso? O segredo é
bater tudo no liquidificador, menos a farinha. Receita ideal
para um café da tarde com jeito caseiro.

Fonte: Matias Peruyera.

Nesse caso, estamos determinando a espessura da borda (4px), que é

uma linha contínua (solid) e é vermelha (red). É possível aplicar opções a cada
um dos quatro lados separadamente. Vamos aplicar algo no estilo que estamos
procurando. Veja o código e o resultado da Figura 6.

header {
border-bottom: 4px dotted black;
}

Figura 6 – Borda inferior pontilhada

BOLO DE CENOURA
Que tal um bolo de cenoura bem gostoso? O segredo é
bater tudo no liquidificador, menos a farinha. Receita ideal
para um café da tarde com jeito caseiro.

Fonte: Matias Peruyera.

Um efeito muito desejado que finalmente foi implementado no CSS3 são

os cantos arredondados (Figura 7), que podem ser definidos como parte do

8
 border – nesse caso, especificamos todas as propriedades do border e
acrescentamos os valores da propriedade border-radius, o raio da parte circular
da borda. Também experimente deixar apenas o valor do border-radius.

header {
border: 10px double black;
border-radius: 30px;
}

Figura 7 – Borda dupla com cantos arredondados

BOLO DE CENOURA
Que tal um bolo de cenoura bem gostoso? O segredo
é bater tudo no liquidificador, menos a farinha.
Receita ideal para um café da tarde com jeito caseiro.

Fonte: Matias Peruyera.

No livro de Paz (2021, p. 99-100), você pode ver propriedades específicas

do border. No mesmo quadro, você verá que as propriedades margin e padding
podem ter especificações similares, e que cada lado pode ter seu próprio valor.
Geralmente, esses três valores precisam ser trabalhados em conjunto.

3.2 Sombras

Aplicar sombras pode ser visto como algo excessivo, mas em alguns
casos elas colaboram na usabilidade, para percebermos que um elemento está
por cima de outro. Vamos continuar explicando isso com nossa receita, apesar
de que não pareceria ser necessário. Comece com o valor box-shadow: 5px
20px; e veja o que esses dois números definem. Depois, acrescente um terceiro

valor, e depois uma cor. Como ficou? Na Figura 8, usamos box-shadow: 5px 5px
5px #aaa; para um resultado mais sutil.

9
 Figura 8 – Aplicação de sombra

BOLO DE CENOURA
Que tal um bolo de cenoura bem gostoso? O segredo é
bater tudo no liquidificador, menos a farinha. Receita ideal
para um café da tarde com jeito caseiro.

Fonte: Matias Peruyera.

Uma dica é usar sombras com cores com um pouco de transparência,

para que fiquem mais naturais quando sobrepostos a elementos coloridos.

3.3 Listas

Voltando aos ajustes tipográficos, vamos refinar os marcadores das

nossas listas. Inclusive, se você usar as técnicas de resetar o CSS, precisará
indicar novamente como devem ser os marcadores. Acrescente o seguinte
código ao seu arquivo CSS:

ul {
list-style-type: square;
}

ol {
list-style-type: upper-roman;
}

As listas ul terão quadrados em vez de círculos e as listas numeradas ol

terão números, armênios – para vocês perceberem como é importante pensar
em vários idiomas e culturas (Figura 9).

10
 Figura 9 – Estilos de listas

Ingredientes Modo de preparo

Massa Massa

• ½ xícara (chá) de óleo a. No liquidificador, bata a

• 3 cenouras média raladas cenoura, os ovos e o óleo no

• 4 ovos até ficar homogêneo.

b. Acrescente o açúcar e bata
• 2 xícara (chá) de açúcar
por 5 minutos.
• 2 e ½ xícaras (chá) de farinha
c. Despeje a mistura em uma
de trigo
tigela e acrescente a farinha.
• 1 colher (sopa) de fermento
Misture à mão ou com
em pó
batedeira.

Fonte: Matias Peruyera.

O CSS ainda permite acrescentar pequenas imagens a cada item da lista.

Porém, tudo pode ficar mais interessante apelando a outro tipo de técnica.
Vamos ver como trocar a cor dos bullets da lista de ingredientes. Na verdade, o
que vamos fazer é retirar os bullets (com o list-style:none) e depois colocá-
los novamente, no estilo desejado. Comece com o seguinte código:

ul {
list-style: none;
}

li::before {
content: "\00261E"; color: red;
}

Como ficou? Essa mãozinha dá um ar antigo, gostou? Ela é determinada

ali no content, com o código \00261E. O ::before é um pseudoelemento, que
serve para fazer seleções mais avançadas no CSS, e, nesse caso, está sendo
usado para inserir conteúdo não no HTML, mas pelo CSS.

11
 Reduza a largura da janela do seu navegador. Reparou que as mãozinhas
“invadem” o bloco de texto? Para evitar isso, substitua o código por este:

li::before {
content: "\00261E"; color: red;
display: inline-block; width: 1.5em;
margin-left: -1.5em;
}

Isso cria uma margem negativa para a primeira linha, e deixa tudo
alinhado, como mostra a Figura 10.

Figura 10 – Lista estilizada

½ xícara (chá) de óleo

3 cenouras média raladas

4 ovos

2 xícara (chá) de açúcar

2 e ½ xícaras (chá) de farinha de trigo

1 colher (sopa) de fermento em pó

Fonte: Matias Peruyera.

Mostramos esse exemplo das listas principalmente para mostrar o poder

dos pseudoelementos e mostrar que, às vezes, é necessário aplicar outra lógica.
E, também, para mostrar que podemos alcançar resultados interessantes sem
precisar fazer alterações desnecessárias no HTML. Não é correto – e muito
menos acessível – transformar uma lista em um monte de parágrafos com a
mãozinha “escrita” no HTML.

Saiba mais

Veja mais truques para formatar listas no artigo escrito por Chris Coyier
(2020):
Disponível em: <https://css-tricks.com/custom-list-number-styling>.
Acesso em: 13 set. 2021.
12
 TEMA 4 – DESIGN RESPONSIVO E MEDIA QUERIES

Cada vez mais a web foi sendo acessada por dispositivos móveis. As
primeiras maneiras de satisfazer esses usuários eram preparando uma versão
separada do site, que apareceria caso fosse detectado que o acesso era por um
celular. Com o CSS3, surgiram as media queries – ou “consultas de mídia”, que
permitem fornecer estilos especialmente projetados para diferentes dispositivos
(Paz, 2021, p. 160). As media queries são uma parte muito importante do design
responsivo, que “responde” aos diferentes tamanhos de tela.
No nosso arquivo CSS, temos os estilos padrão, mas também podemos
ter diferentes media queries para atender diferentes dispositivos. Geralmente,
esses dispositivos são identificados pela largura da tela, mas é possível ter
media queries para outras especificidades dos dispositivos, como se a tela
estivesse vertical ou horizontal (Paz, 2021, p. 161). A estrutura, então, é:

@media only screen and (max-width: 600px) {

}

Dentro dessas chaves, você deve inserir o código CSS que substituirá a
propriedade padrão. Vamos ao CSS de nossa receita. Cole o seguinte código ao
final, salve o CSS, recarregue o navegador e mexa na largura da janela para ver
o que acontece.

@media only screen and (max-width: 600px) {

header {
background:red;
}
}

Assim que a largura da janela estiver em 600 pixels, a cor de fundo do

header, que era #ffd9cc, será substituída pela cor especificada na media query.
Mas isso não é lá muito útil. Outra coisa que acontece quando a janela
está em 600 pixels de largura é que as colunas dos ingredientes e do modo de
preparo ficam estreitas demais, dificultando a leitura.
Nesse caso, vamos repensar o layout. Seria melhor que simplesmente
ficassem uma debaixo da outra. Para isso, vamos desistir do layout usando grid
e trocar para inline. Vamos manter a mudança da cor de fundo, só para
visualizarmos melhor o que acontece.

13
 @media only screen and (max-width: 600px) {
header {
background:red;
}

article {
display:inline;
}
}

Agora está mais organizado, mas o texto parece um pouco grande. Vamos
diminuí-lo um pouco. Inclua este código dentro do media query:

h1 {
font-size:2em;
}

p {
font-size:1.2em;
}

h2 {
font-size:1.2em;
}

h3 {
font-size:1em;
}

Repare que as propriedades que havíamos declarado antes, como o

text-transform: uppercase do h1 e o itálico do h3, continuam ativas. A única

que foi substituída é a que aparece aqui (no caso, o font-size desses quatro
elementos). Verifique as diferenças entre a versão original e nossas duas
versões do media query na Figura 11.

14
 Figura 11 – Versões do site

BOLO DE BOLO DE CENOURA

BOLO DE CENOURA
CENOURA Que tal um bolo de
Que tal um bolo de cenoura bem cenoura bem gostoso? O
gostoso? O segredo é bater tudo no Que tal um bolo de segredo é bater tudo no
liquidificador, menos a farinha. cenoura bem liquidificador, menos a
Receita ideal para um café da tarde gostoso? O segredo farinha. Receita ideal para
é bater tudo no um café da tarde com jeito
com jeito caseiro. caseiro.
liquidificador, menos
a farinha. Receita Ingredientes
Ingredientes Modo de ideal para um café da
preparo tarde com jeito Massa
Massa caseiro.
Massa ½ xícara (chá) de
½ xícara (chá) Ingredientes óleo
de óleo No liquidificador,
bata a cenoura, Massa 3 cenouras média
3 cenouras os ovos e o óleo raladas
média raladas ½ xícara (chá) de
no até ficar óleo
homogêneo. 4 ovos
4 ovos
3 cenouras média 2 xícara (chá) de
Acrescente o raladas
2 xícara (chá) açúcar e bata açúcar
de açúcar por 5 minutos. 4 ovos 2 e ½ xícaras (chá)
2 e ½ xícaras Despeje a de farinha de trigo
(chá) de farinha 2 xícara (chá) de
de trigo mistura em uma açúcar 1 colher (sopa) de
tigela e fermento em pó
1 colher (sopa) 2 e ½ xícaras (chá)
acrescente a
de farinha de trigo
de fermento em farinha. Misture à
pó mão ou com 1 colher (sopa) de
batedeira. fermento em pó

Fonte: Matias Peruyera.

Esse foi um exemplo breve que serve para mostrar a importância de

pensar nos dispositivos móveis, e em como o design responsivo apresenta
benefícios também durante o desenvolvimento.
Sites mais complexos têm outros problemas. Repare que em vários sites
responsivos o menu de navegação, em larguras menores, concentra-se em um
menu de hambúrguer (os três risquinhos horizontais). Isso exige outras técnicas.

15
 TEMA 5 – FERRAMENTAS E MÉTODOS

Desenvolver um site ou outro produto digital pode demandar o trabalho de

várias pessoas. É possível que uma única pessoa cuide de todos os aspectos,
mas isso dificilmente acontecerá em uma empresa maior.
Por outra parte, projetos maiores exigem maiores cuidados a cada etapa
do processo. Refazer um site pessoal de uma única página é fácil se comparado
a refazer um site de e-commerce ou um portal de notícias. Por isso, dividir o
projeto em etapas – pense nos planos definidos por Garrett (2011) que já vimos
– e assignar especialistas para cada uma dessas etapas é uma prática comum.
Cada etapa terá suas ferramentas típicas. A etapa da arquitetura da
informação, por exemplo, muitas vezes faz uso de ferramentas de papelaria,
como papéis e notas adesivas, para facilitar a manipulação e organização do
conteúdo. É comum inclusive fazer protótipos em papel – os chamados de baixa
resolução – para testar ideias antes do desenvolvimento do produto final. Os
wireframes – típicos do plano do esqueleto – podem começar a ser rascunhados
em papel, já que ainda não é momento de trabalhar com fontes e cores (Figura
12).

Figura 12 – Imagem de banco de imagens que pode representar uma designer

preparando um protótipo de baixa fidelidade para um teste – também podem ser
apenas esboços

Crédito. Chaosamran_studio / shutterstock.

16
 Saiba mais

Veja como um protótipo de baixa fidelidade pode ser algo bem rudimentar.
No primeiro vídeo a seguir, é feito um teste de usabilidade de um site infantil.
Observe como o pesquisador pede à criança que execute determinadas tarefas
e como ela simula a navegação pelo site. No outro, o protótipo também é de
papel, com algumas simulações de interação bem criativas.

Disponível em: <https://www.youtube.com/watch?v=9wQkLthhHKA> e

<https://www.youtube.com/watch?v=yafaGNFu8Eg>. Acesso em: 14 set. 2021.

Para quem quiser começar a trabalhar com web design, a dica é se abrir
a novas ferramentas. Programas como Illustrator e Photoshop têm o peso de
várias décadas de existência. Eles obviamente são úteis e podem ser usados,
mas é interessante pensar em novas ferramentas. Um exemplo é o Figma
(Figura 13), software de ilustração vetorial voltado para a prototipação de
produtos digitais. É típico que a interface de um site seja prototipada nele, para
poder usar os recursos que simulam o comportamento de uma tela ou de
diversos dispostivos, e o mesmo arquivo seja tomado como base por quem fizer
o desenvolvimento, já que ele fornece várias facilidades, como códigos CSS do
que foi projetado nele. Além disso, permite que várias pessoas trabalhem nele
em um mesmo projeto (Paz, 2021, p. 219).

Figura 13 – Tela do Figma, no navegador

Fonte: Matias Peruyera, elaborado com base em Figma.com.

17
 É claro que isso varia de cada pessoa. Tem gente que gosta de começar
a trabalhar o quanto antes com código, e isso pode facilitar certos processos.
Caso esse seja o seu caso, também fique de olho em softwares que possam
facilitar a sua vida, para montar a sua caixa de ferramentas.

TROCANDO IDEIAS

Depois de tudo o que você aprendeu, quais os próximos passos para

continuar o aprendizado? Aprender alguma linguagem de programação? Qual?
Aprender novas técnicas de CSS? Aprender a configurar algum gerenciador de
conteúdo, como o WordPress? Sair correndo, porque web não é para você? O
que seus colegas acham?

NA PRÁTICA

Talvez o seu portfólio possa se beneficiar de alguns dos refinamentos que

mostramos aqui. Certamente, ele precisará de uma versão para dispositivos
móveis. Que tal cuidar disso e testar vários tamanhos de tela? A vantagem desse
portfólio é que ele, em si, é uma peça. Se você estiver procurando trabalhar com
web design, talvez esse site seja o motivo para te contratarem. Por isso,
capriche!

FINALIZANDO

Nesta aula, complementamos as técnicas que aprendemos em ocasiões

anteriores. Você aprendeu algumas tags HTML básicas e importantíssimas,
como o uso de hiperlinks. As bordas e os fundos com imagens complementam
o aprendido antes sobre fundos, e as media queries reforçam a importância de
pensar em um design que funcione em vários dispositivos.

18
 REFERÊNCIAS

COYIER, C. Custom List Number Styling. CSS-Tricks, 2020. Disponível em:

<https://css-tricks.com/custom-list-number-styling>. Acesso em: 27 ago. 2021.

GARRETT, J. J. The Elements of User Experience. Berkeley: New Riders,

2011.

PAZ, M. Web Design. Curitiba: Intersaberes, 2021.

19