impressao (9)

Prévia do material em texto

WEB DESIGN 
AULA 6 
 
 
 
 
 
 
 
 
 
 
 
Prof. Matias Peruyera 
 
 
2 
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. 
 
 
3 
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. 
 
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): 
 
 
Bolo de cenoura. 
 
1.2 Hiperlinks 
Links são a essência da web. A tag para criar um hiperlink em HTML é 
. Porém, assim como a tag , ela precisa de alguma indicação do 
destino desse hiperlink. Essa indicação fica no argumento href. A tag precisa 
de fechamento, então, o que fica entre as tags de abertura e fechamento é a 
palavra que ficará disponível para clicar. 
Clique aqui!!!! 
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. 
Para saber mais sobre capivaras, acesse o artigo sobre capivaras da 
Wikipédia. 
 
 
4 
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 
Você sabia os outros nomes da capivara? V
eja na Wikipédia. 
Leva você diretamente para essa seção. Um link nessa mesma página pode ser 
simplesmente . 
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. 
 
 
Animal 
Ordem 
Peso máximo 
 
 
Capivara 
Roedor 
90 kg 
 
 
Porquinho-da-Índia 
Roedor 
1,5 kg 
 
 
 
 
 
5 
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. 
 
 
6 
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. 
 
 
 
7 
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 arquivoCSS, 
acrescente o seguinte código e compare com a Figura 5. 
header { 
border: 4 px solid red; 
} 
 
 
 
8 
Figura 5 – Borda aplicada ao header 
 
 
 
 
 
 
 
 
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 
 
 
 
 
 
 
 
 
 
 
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 
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. 
 
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. 
 
 
 
9 
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 
 
 
 
 
 
 
 
 
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. 
 
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. 
 
 
 
10 
Figura 8 – Aplicação de sombra 
 
 
 
 
 
 
 
 
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). 
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. 
 
 
 
11 
Figura 9 – Estilos de listas 
Ingredientes 
 
Massa 
 
• ½ 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ó 
Modo de preparo 
 
Massa 
 
a. No liquidificador, bata a 
cenoura, os ovos e o óleo no 
até ficar homogêneo. 
b. Acrescente o açúcar e bata 
por 5 minutos. 
c. Despeje a mistura em uma 
tigela e acrescente a farinha. 
Misture à mão ou com 
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. 
 
 
12 
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: . 
Acesso em: 13 set. 2021. 
 
 
13 
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. 
 
 
14 
@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. 
 
 
 
 
 
 
 
 
 
 
 
 
 
15 
Figura 11 – Versões do site 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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. 
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. 
 
Ingredientes 
Massa 
½ 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ó 
 
 
Modo de 
preparo 
Massa 
No liquidificador, 
bata a cenoura, 
os ovos e o óleo 
no até ficar 
homogêneo. 
Acrescente o 
açúcar e bata 
por 5 minutos. 
Despeje a 
mistura em uma 
tigela e 
acrescente a 
farinha. Misture à 
mão ou com 
batedeira. 
 
 
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. 
 
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. 
 
Ingredientes 
Massa 
½ 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ó 
Ingredientes 
Massa 
½ 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ó 
 
 
 
 
 
 
16 
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. 
 
 
17 
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: e 
. 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. 
 
 
18 
É 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. 
 
 
 
19 
REFERÊNCIAS 
COYIER, C. Custom List Number Styling. CSS-Tricks, 2020. Disponível em: 
. Acesso em: 27 ago. 2021. 
GARRETT, J. J. The Elements of User Experience. Berkeley: New Riders, 
2011. 
PAZ, M. Web Design. Curitiba: Intersaberes, 2021.