design e novas midias aula 5

Prévia do material em texto

DESIGN E NOVAS MÍDIAS 
AULA 5 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Profª Fabiane Lima 
 
 
2 
CONVERSA INICIAL 
O conhecimento necessário ao designer que se aventura no universo das 
novas mídias é progressivamente expansível. Todos os dias, novas tecnologias, 
ferramentas e modos de interação são criados ou têm novas possibilidades e 
funcionalidades acrescidas ao que já existe. No entanto, mais importante que ser 
versado na última tecnologia da moda é desenvolver a habilidade de enxergar 
para além da superfície técnica. E uma das formas de se desenvolver essa 
habilidade é dar uma espiadinha por debaixo do “capô”. 
Ter esse conhecimento é importante porque a tecnologia computacional 
é justamente o meio em que se sustentam não apenas as ferramentas de criação 
de aplicativos e redes, mas também todo o ferramental técnico que auxilia e 
possibilita o trabalho do designer, seja ele de qualquer uma das especialidades 
da área existentes hoje. É por sobre inúmeras camadas de abstrações 
computacionais que criamos e fazemos funcionar as interfaces com as quais 
interagimos, as funções dos aplicativos que utilizamos, bem como toda a 
computação possibilitada pela informática (Preece et al., 2013). 
Nesta aula, vamos apresentar a você, estudante, algumas noções dos 
códigos que fazem a Internet funcionar. Ainda que você tenha a impressão de 
que isso possa parecer difícil, a forma como vamos realizar essa abordagem 
será bastante simples e indolor. E você terá uma noção bem mais sólida de como 
acontece a transformação de um protótipo em um produto funcional. 
CONTEXTUALIZANDO 
Nos anos 1990, o físico britânico Tim Berners-Lee buscava um modo 
eficiente de comunicação para disseminar as pesquisas que ele e seus colegas 
desenvolviam no CERN, o instituto europeu de pesquisa nuclear. Na mesma 
época, a rede mundial de computadores – que viria a se tornar o que hoje 
conhecemos como “internet” – começava a se tornar pública, uma vez que antes 
era de acesso restrito a militares, universidades e institutos de pesquisa. 
 
 
3 
Tim, em conjunto com outros cientistas, criou uma linguagem que usava 
uma série de marcadores com regras sintáticas flexíveis, que mais tarde se 
tornou o HTML. A linguagem de marcação de hipertexto – é exatamente isso que 
a sigla em inglês significa – hoje é a base da web. Cada marcador HTML define 
a formatação de um trecho do documento, possuindo atributos e valores 
personalizáveis (Duckett, 2016). 
Hoje, o HTML está em sua quinta versão. Ao longo dos anos, a linguagem 
evoluiu: possui marcadores compatíveis com linguagens de programação como 
o JavaScript, tem suporte para multimídia (vídeos, sons e animações) e atua em 
conjunto com outras linguagens, como o CSS e o XML. Mas apesar de toda essa 
evolução, a linguagem é tão simples quanto poderosa, acessível até para quem 
nunca editou código na vida. 
Já o CSS, que também abordaremos aqui, é uma linguagem de estilo. 
Sua sigla significa Cascading Style Sheets (folhas de estilo em cascata) e ela 
existe para formatar documentos escritos em HTML. Ela permite que as 
especificações do conteúdo estruturado em HTML estejam separadas da 
formatação de layout, cores, fontes etc. Seu funcionamento é por meio de 
seletores que, vinculados aos marcadores HTML, especificam o modo como 
cada estrutura dessas será exibida na tela para os usuários. O CSS também foi 
criado pelo mesmo time de cientistas que desenvolveu o HTML no CERN, mas 
demorou um pouquinho mais para se popularizar. 
Nas próximas seções, veremos na prática o funcionamento de ambas as 
linguagens. Elas se assemelham bastante com outras linguagens, como 
algumas utilizadas no desenvolvimento de aplicações para dispositivos móveis, 
por exemplo. Tenha em mente que nenhuma dessas duas linguagens é de fato 
uma linguagem de programação, ainda que elas possam trabalhar em conjunto 
com essas linguagens, como a já citada JavaScript. O HTML é uma linguagem 
de marcação, enquanto que o CSS é uma linguagem de estilo. 
TEMA 1 – HTML: CONHECENDO A LINGUAGEM 
O HTML é a linguagem de marcação de hipertexto padrão para a 
construção de páginas web. Ela é fácil de aprender e, com ela, podemos criar 
nossos próprios sites e aplicações. Por ser uma linguagem de marcação – e não 
de programação –, para construir um documento HTML precisamos apenas 
declarar as estruturas, tags e atributos necessários – respeitando as 
 
 
4 
especificações e recomendações da linguagem. Os documentos HTML podem 
ser editados em um editor de texto simples ou em softwares dedicados a esse 
tipo de desenvolvimento e usam a extensão “.html” para diferenciá-los de outros 
tipos. 
Como se trata de uma linguagem de marcação, quase todas as tags 
HTML possuem uma declaração de início e fim. Por exemplo, a tag que delimita 
o início do documento naturalmente é “<html>”; a tag “</html>” (note a barra no 
início) delimita o fim dele. Em geral, se usa uma tag de cabeçalho antes da 
“<html>” que especifica a versão da linguagem que estamos usando, a 
“<!doctype>”: isso é importante principalmente porque, muitas vezes, 
navegadores antigos podem ter dificuldade de interpretar código de versões 
novas, de modo que podem simplesmente ignorar as tags que não reconhecem, 
sem causar muitos problemas aos usuários. A tag “<!doctype>” não possui 
fechamento. 
Entre as tags que estabelecem os limites do documento, duas delas 
marcam as suas duas estruturas principais: “<head>” e “<body>”. Cada uma 
dessas tags possui abertura e fechamento. Entre as tags “<head>” e “</head>”, 
colocamos metadados, que são dados que servem para informar ao navegador 
o título do documento, o idioma em que está composto o conteúdo, informações 
úteis a buscadores e também para incluir ligações com outros documentos que 
auxiliam o funcionamento da página, como arquivos de folhas de estilo (CSS) ou 
scripts com funções diversas. 
A tag “<body>”, por sua vez, engloba todas aquelas informações que 
serão diretamente renderizadas na página e estarão às vistas dos usuários, 
como o conteúdo e sua estrutura formal e visual. É aqui que a mágica acontece: 
dentro da tag “<body>”, declaramos tags como “<p>”, que delimitam inícios e fins 
de parágrafos de texto; “<h1>”, “<h2>” ... “<h6>”, que estabelecem a hierarquia 
dos títulos; “<blockquote>”, que formata blocos de citação; as tags “<ul>” e 
“<ol>”, que, respectivamente, delimitam listas não-ordenadas e ordenadas e 
envolvem elementos marcados pelas tags “<li>”, que delimitam cada um dos 
itens de uma lista; e as famosas “<div>”, que englobam trechos do código que 
descrevem estruturas do site que podem ser formatadas via CSS de forma 
bastante flexível. 
O trecho de código abaixo é um exemplo de como geralmente um 
desenvolvedor HTML estrutura um documento desse tipo de forma básica, para 
 
 
5 
que possa dar início ao seu trabalho. Note que aqui trabalhamos com o HTML 
puro, sem a adição de bibliotecas e frameworks de desenvolvimento, para 
propósitos didáticos. Na prática, designers que lidam com código têm à sua 
disposição um arsenal técnico para trabalhar com essa linguagem que é quase 
ilimitado. 
<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8"> 
 <title>Minha página de teste</title> 
</head> 
<body> 
 <h1>Título do Texto</h1> 
 <p>Texto de parágrafo, um pouquinho mais longo, apenas 
para servir de exemplo.</p> 
</body> 
</html> 
O HTML possui um amplo conjunto com mais de uma centena de tags. 
Além das que comentamos anteriormente, temos também tags que declaram 
onde um dado arquivo de imagem será carregado (“<img>”, essa sem um 
fechamento definido) e que marcam links (“<a>”). Quase todas as tags HTML 
têm atributos específicos personalizáveis. Por exemplo, a tag “<img>” possui 
entre seus atributos possíveis o “src” (source, fonte), que indica o caminho do 
qual será puxado o arquivo de imagem propriamente dito que queremos exibirna página. A tag “<a>”, por sua vez, entre outros, possui um atributo bastante 
semelhante, o “href”, que é a referência para a qual aponta um dado link, que 
pode ser dentro do site em questão ou externo. Quando a tag “<a>” aponta um 
link que não existe mais ou não funciona, dizemos que este é um link quebrado. 
No próximo item, estruturaremos um conteúdo simples dentro da lógica 
do código HTML, de forma que você possa ter noção prática visível de como 
essa linguagem de marcação funciona. Não se preocupe com o fato de a 
linguagem ter muitas tags. Em geral, se aplica aqui também o princípio da Lei de 
Pareto: para criar 80% dos efeitos que queremos, usamos por volta de apenas 
20% de todo o conhecimento disponível para tanto. 
TEMA 2 – HTML NA PRÁTICA 
Sendo o HTML uma linguagem muito simples e acessível, para criar uma 
página web você não precisa de nenhum software especial: basta apenas um 
 
 
6 
simples editor de texto como o Bloco de Notas ou o Sublime Text (que pode ser 
baixado gratuitamente em <http://sublimetext.com>). Ao criar um novo 
documento, salve-o com a extensão “.html” – de preferência, nomeie-o como 
“index.html”; quando o navegador acessa um site, a primeira página que ele 
exibe é justamente a que possui esse nome. Use a mesma pasta na qual você 
salvou a página para salvar outros recursos, como imagens e arquivos de folha 
de estilo. Para ver os resultados do texto que você edita nesse arquivo 
renderizados em um navegador, basta abrir esse arquivo em um navegador! 
Vamos imaginar que estamos construindo um site de receitas culinárias e 
estamos estruturando o conteúdo da página que abriga cada uma dessas 
receitas. Resgatando e simplificando um pouco a nossa metodologia de design 
de experiência de usuário (Garrett, 2011), quais requisitos mínimos de conteúdo 
devemos levantar que compõem cada página de receita? 
Como você deve ter imaginado logo de início, o dado mais obviamente 
importante é o nome da receita, que nos informa de que se trata o conteúdo da 
página. A seguir, precisamos de uma lista de ingredientes e de um passo a passo 
que nos informe de que modo devemos fazer os ingredientes interagirem para 
atingirmos o resultado final, em uma ordem específica. E para que saibamos que 
resultado teremos ao final do processo, é bom que a receita traga uma imagem 
ilustrativa. 
É claro que existem outras possibilidades de conteúdo a serem inclusas 
em uma página de um site de receitas, como tags relacionando receitas 
similares, espaço para comentários, além de outras estruturas de conteúdo que 
permitam navegar em um site mais complexo, como barra de navegação e menu 
lateral de opções. Mas para os nossos propósitos aqui, manteremos a estrutura 
desse site o mais simples possível. 
Vamos iniciar abrindo nosso documento HTML e estruturando esse 
conteúdo textual dentro das possibilidades de formatação de conteúdo que a 
linguagem nos traz. Assim, usaremos tags de título “<h1>”, “<h2>” e “<h3>” para 
estabelecer as hierarquias entre as diferentes partes do texto, “<ul>” para 
englobar a lista de ingredientes e “<li>” para cada item, “<p>” para o parágrafo 
com os passos necessários a cada procedimento do modo de preparo e “<img>” 
para agregar uma imagem ao conjunto. Colocamos também todo o nosso 
conteúdo entre um par de tags “<div>” – vamos explicar mais adiante o porquê; 
pois isso tem relação com a interação do HTML com o CSS. 
 
 
7 
Dessa forma, e reaproveitando a estrutura base que vimos no item 
anterior, nosso código fica assim: 
<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8"> 
 <title>Pudim de Leite Condensado</title> 
 </head> 
<body> 
 <div class=“conteudo”> 
 <h1>Pudim de Leite Condensado</h1> 
 <img src="img/pudim.jpg"> 
 <h2>Ingredientes</h2> 
 <h3>Pudim</h3> 
 <ul> 
 <li>1 lata de leite condensado</li> 
 <li>1 lata de leite</li> 
 <li>3 ovos inteiros</li> 
 </ul> 
 <h3>Calda</h3> 
 <ul> 
 <li>1 xícara de chá de açúcar</li> 
 <li>1/2 xícara de água</li> 
 </ul> 
 <h2>Modo de Preparo</h2> 
 <p>Primeiro, bata bem os ovos no liquidificador. 
Acrescente o leite condensado e o leite, e bata 
novamente.</p> 
 <p>Derreta o açúcar na panela até ficar moreno, 
acrescente a água e deixe engrossar. Coloque em uma 
forma redonda e despeje a massa do pudim por cima.</p> 
 <p>Asse em forno médio por 45 minutos, com a 
assadeira redonda dentro de uma maior com água. Espete 
um garfo para ver se está bem assado. Deixe esfriar e 
desenforme.</p> 
 <p>Para a calda de seu pudim dar certo, use 
sempre a proporção de meia medida de água para cada 
medida de açúcar.</p> 
 </div> 
</body> 
</html> 
 
 
 
8 
Figura 1 – Estrutura HTML renderizada no navegador 
 
Crédito: Lima, 2021. 
Na imagem anterior, podemos ver que nossa página web está estruturada 
e bem-organizada, uma vez que a renderizamos no navegador. Entretanto, as 
coisas parecem ainda um pouco fora de lugar. No próximo tema, veremos de 
que forma podemos aplicar o CSS para tornar nossa página melhor, mais legível 
e mais bonita. 
TEMA 3 – CSS: CONHECENDO A LINGUAGEM 
CSS é a sigla para Cascading Style Sheets, folhas de estilo em cascata. 
A linguagem tem esse nome porque suas declarações de valores se influenciam 
mutuamente, de modo que a ordem das declarações afeta o resultado final. 
Assim, quando um valor é declarado depois de outro e ambos afetam a mesma 
estrutura HTML, o último valor declarado é o que prevalece. Isso é bastante útil 
em projetos complexos, em que várias folhas de estilo poderão interagir, já que 
uma mesma folha de estilos pode ser usada para formatar várias páginas ao 
mesmo tempo (Duckett, 2016). 
Existem algumas formas de se incorporar o CSS às páginas HTML, mas 
nesta aula iremos focar na mais correta e recomendada pelos próprios criadores 
e mantenedores da linguagem, o consórcio internacional W3C: ainda que 
 
 
9 
possamos declarar CSS diretamente no arquivo, é melhor que editemos esse 
código em um arquivo separado e façamos referência ao seu caminho entre as 
tags “<head>”, no cabeçalho do HTML (ver adiante). 
A sintaxe do CSS consiste em um seletor acompanhado de um bloco 
declaratório, que encapsula entre chaves os valores que formatam cada 
estrutura que temos no arquivo. Cada estrutura do HTML tem um seletor 
equivalente no CSS, com seu conjunto específico de atributos. Caso não 
declaremos um valor para uma estrutura existente, o navegador a renderizará 
com base em seus valores padrão, como no caso da nossa página antes da 
aplicação do CSS, apresentada na figura 1. No bloco de código de exemplo 
abaixo, podemos inclusive ver de que modo o efeito cascata do CSS acontece: 
body { 
 color: grey; 
 font-size: 12px !important; 
} 
p { 
 color: red; 
 font-size: 11px; 
} 
Se você experimentar usar esses valores na folha de estilo do nosso site 
de exemplo, notará que, com exceção do texto entre as tags “<p>” no modo de 
preparo, que estará em vermelho, tudo o mais será renderizado na cor cinza. No 
entanto, todo o texto, inclusive o delimitado pelas tags de título, estarão em 
tamanho 12 pixels. Note que a tag “<p>” possui uma declaração de tamanho de 
texto diferente da que possui a tag “<body>”; no entanto, a declaração 
“!important” logo após o valor do atributo “font-size” obriga que o texto da tag 
“<p>” permaneça no tamanho estipulado na tag “<body>”. 
A propriedade “color” possui muitas possibilidades de valores, podendo 
eles serem em notação hexadecimal (como, por exemplo, “#e7a9bc”, que 
corresponde a um rosa claro), em notação RGB (a mesma cor nessa notação 
seria “rgb(231,169,188)”) ou, como no exemplo do bloco de código acima, 
referenciando a cor pelo seu nome. No caso desse rosa claro específico, ele não 
possui um nome padrão no HTML; assim, podemos ver que essa notação é útil 
para ampliar a nossa gama de possibilidades de cores, mas referenciá-las pelo 
seu nome também pode ser prático. 
Além da possibilidade de se formatartexto, o CSS é uma linguagem muito 
poderosa também no momento de se formatar a estrutura propriamente dita das 
 
 
10 
páginas web. Você deve ter visto no item anterior, no qual criamos nossa página 
de exemplo, que usamos a tag “<div>” para abarcar todo o conteúdo. Além dela, 
existe uma série de tags pensadas especificamente para a “diagramação” dos 
conteúdos on-line, que foram recentemente adicionadas à linguagem, como 
“<footer>” (para os rodapés de página), “<header>” (não confundir com 
“<head>”, aquele cabeçalho invisível do documento HTML), “<content>” (que 
envolve o conteúdo principal da página), entre outras. 
Ainda que o CSS seja em si uma linguagem muito completa e complexa, 
abarcando as mais variadas estruturas e possibilidades do HTML, ela é também 
muito flexível, permitindo aos desenvolvedores criarem seletores personalizados 
por meio das classes e dos IDs. Classes são declaradas usando um ponto (“.”) 
antes do seu nome e podem receber todo tipo de valor; IDs, por sua vez, são 
declaradas usando o caractere tipográfico cerquilha (“#”), que muitos conhecem 
por ser usado para marcar tags em redes sociais. A diferença entre classes e 
IDs é que os IDs só podem ser usados uma única vez no código, pois delimitam 
elementos únicos; classes podem ser usadas quantas vezes for necessário. 
Classes e IDs em geral são usados em conjunto com as estruturas descritas no 
parágrafo anterior. 
É importante também ter em mente que o CSS, enquanto estruturador de 
conteúdo, funciona em um modelo chamado “box model”. Isso significa que todo 
elemento que pode ser formatado em CSS pode ser considerado como envolto 
em uma caixa. Essa caixa possui margens, bordas e espaçamentos que 
possuem atributos que podem ser declarados de forma independente, o que traz 
um sem-número de possibilidades compositivas. Isso leva alguns designers a se 
lançarem ao desafio de até criar desenhos complexos usando somente as 
possibilidades do CSS. No próximo tema, no qual abordaremos o uso do CSS 
na prática, você terá uma noção melhor de como isso funciona. 
TEMA 4 – CSS NA PRÁTICA 
Como apontado no tema anterior, a melhor forma de relacionar uma folha 
de estilos com um conjunto de declarações CSS para formatar uma página 
HTML é por meio de um arquivo externo. Para fazer isso, salvamos nosso 
arquivo na mesma pasta em que estamos editando o HTML e o referenciamos 
no cabeçalho do arquivo. Assim: 
 
 
11 
<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8"> 
 <title>Pudim de Leite Condensado</title> 
 <link rel="stylesheet" href="meuestilo.css"> 
 </head> 
<body> ... 
Note, no bloco de código anterior, que a tag “<link>” possui dois atributos: 
“rel”, que indica que tipo de link estamos fazendo (no caso, linkamos para uma 
folha de estilos), e “href”, que, como no caso da tag “<a>”, indica o caminho físico 
do arquivo na estrutura de pastas em que o site está organizado. Agora, 
poderemos trabalhar em nosso arquivo CSS sem nos preocuparmos com o 
conteúdo HTML, de forma independente. Podemos também criar outras páginas 
em outros arquivos usando a mesma estrutura e folha de estilos para formatar 
ambas. 
Lembra-se de que na nossa estrutura HTML, envolvemos todo o conteúdo 
em uma única tag “<div>”? Pois é por meio dela que poderemos entender o tal 
do modelo de caixas do CSS, o já referenciado anteriormente box model. No 
nosso arquivo HTML, essa tag possui um atributo de classe chamado 
“conteudo”. Em vez de referenciarmos essa “<div>” no CSS pelo nome da 
estrutura, a referenciaremos pelo seu nome de classe. Dentro do bloco de 
declarações, estabeleceremos que ela não ocupará toda a largura da página no 
navegador, uma vez que a leitura fica difícil quando temos linhas de texto muito 
longas. Também declaramos margens nas laterais direita e esquerda desse 
bloco, para que o conteúdo se centralize na página. 
Uma vez que o box model vigora sobre todo e qualquer elemento que 
possa ser manipulado pelo CSS, usando a sua lógica podemos também dar 
instruções para que a imagem que temos na nossa página seja formatada. 
Assim, estipulamos o valor da largura que a imagem deve ter em relação ao 
elemento em que ela está contida: a imagem ocupará, então, 25% da largura 
total da “<div>” em que ela se encontra, com margens nas laterais para mantê-
la centralizada. Colocamos algumas cores de fundo na página toda, uma cor 
específica para o bloco da “<div>” que encapsula o conteúdo, cores, 
alinhamentos e famílias tipográficas para os textos. E, apenas para que você 
tenha um gostinho do tipo de coisa que o CSS pode fazer, colocamos bordas 
arredondadas (declaradas como “border-radius”) e uma sombra (“box-shadow” 
no CSS) nesse mesmo bloco. O nosso código então fica assim: 
 
 
12 
body { 
 background: #C03660; 
 color: #292929; 
} 
 
.conteudo { 
 width: 60%; 
 margin: 20px; 
 margin-left: 18%; 
 margin-right: 18%; 
 background: #e7a9bc; 
 padding: 2%; 
 border-radius: 30px; 
 box-shadow: -7px 7px 5px #292929; 
} 
 
.conteudo img { 
 width: 50%; 
 margin-left: 25%; 
 margin-right: 25%; 
} 
 
h1, h2, h3 { 
 font-family: Arial, sans-serif; 
 color: #C03660; 
} 
 
h1, h2 { text-align: center; } 
Renderizando a página no navegador, teremos: 
Figura 2 – HTML e CSS interagindo juntos para criar a visualidade de um site, 
e seu resultado renderizado no navegador 
 
Crédito: Lima, 2021. 
 
 
13 
Tenha em mente que o trabalho profissional com o CSS, ainda que em 
um primeiro momento pareça um tanto intimidador pelo número de detalhes que 
pode envolver, é, como toda habilidade, algo que se conquista com a prática. 
Além disso, aqui priorizamos a demonstração do uso do conhecimento da 
linguagem pura, sem o auxílio de ambientes de desenvolvimento ou frameworks 
que, ainda que facilitem o trabalho do designer desenvolvedor com certa 
experiência, podem dificultar a compreensão por parte do designer ainda na fase 
aprendiz. 
Note também que, ainda que o nosso projeto seja bastante simples, ele 
funciona direitinho em qualquer largura de navegador, sendo adaptável a 
qualquer dispositivo e largura de tela, seja desktop ou móvel. Quando 
aprendemos corretamente os fundamentos de qualquer assunto ou disciplina, 
podemos ver que mesmo o design mais simples deve seguir recomendações 
projetuais que valem também para os grandes e complexos projetos. 
TEMA 5 – ALGUMAS DICAS E RECOMENDAÇÕES 
Neste tema, buscamos trazer as linguagens HTML e CSS de uma forma 
simplificada e didática, apropriada para a introdução de seus conceitos mais 
fundamentais a estudantes ainda inexperientes. Com o conhecimento que 
apresentamos aqui, você é capaz de criar uma página que pode ser hospedada 
em um servidor e vista por qualquer um que tenha acesso ao domínio que aponte 
para ela. Mas existe uma série de outros conhecimentos úteis que vêm com a 
prática, os quais abordaremos aqui na forma de recomendações e dicas. 
Entre as principais dicas que podemos dar diz respeito à organização do 
trabalho. Dado que o projeto que realizamos é bastante simples – possui, no final 
das contas, três arquivos somente: o HTML, o CSS e a imagem exibida na 
página – não necessitamos de uma estrutura de pastas numerosa para organizá-
lo. Porém, projetos de maior complexidade podem exigir até uma pasta 
específica separada para guardar apenas as suas folhas de estilo. Assim, 
busque organizar os arquivos do seu site de forma coerente com seu tipo e 
função, separando as imagens em uma pasta própria, bem como scripts e outros 
arquivos acessórios necessários ao bom funcionamento do site. O tipo de 
organização que você deve manter aqui é o mesmo que você deve manter ao 
organizar os arquivos em seu computador, ou ao organizar as camadas dos 
arquivos em um software de edição, como o Illustrator ou Photoshop. 
 
 
14 
Outra dica útil é se atentar para os diferentes tamanhos e unidades de 
medida disponíveis ao trabalho no ambiente do ciberespaço.Tendo o 
ciberespaço as suas próprias lógicas, ele também possui a sua própria forma de 
estipular tamanhos e proporções. A unidade de medida que usamos em nossos 
exemplos aqui foi o pixel – a unidade de medida básica dentro da virtualidade – 
mas o CSS possui uma série de outras unidades que têm utilidades diversas 
específicas. 
Por exemplo, ainda dentro do nosso exemplo, usamos porcentagens para 
calcular as margens e espaçamentos da “<div>” que encapsula o documento, 
uma vez que não são unidades fixas, e sim proporcionais, e podem fazer o 
design se adaptar a qualquer tamanho de tela. Algumas outras unidades de 
medida, como “em” (relativa ao tamanho da fonte, bastante usada) e “vw” 
(unidade relativa à largura da tela do dispositivo) podem ser muito úteis em 
determinados contextos. Unidades fixas que usamos no mundo real, como 
centímetros e paicas, também podem ser usadas em um projeto digital por ter 
sua aplicação na geração de páginas impressas. 
Conforme fizemos questão de deixar claro desde o início, nem o HTML 
nem o CSS são linguagens de programação. Suas funções são estruturar e 
formatar o conteúdo. Ainda que sejam recursos bastante ricos, permitindo 
interações e animações de nível até que bastante avançado, permitindo até 
realizar a construção de sites inteiros (estáticos) apenas com essas ferramentas, 
elas não contam a história toda do desenvolvimento web. Elas são, por outro 
lado, a melhor porta de entrada disponível nesse mundo: sem esse 
conhecimento, os outros são inacessíveis. 
Mas mesmo esse conhecimento, por questões de espaço e ementa, aqui 
está bastante reduzido. Por exemplo, não abordamos toda a complexidade dos 
atributos de posicionamento – relativo, absoluto e fixo –, isso sem considerar 
ainda atributos que governam a estrutura de grids, como box sizing e colunagem. 
Entretanto, sem que você desenvolva também a habilidade de encontrar esses 
conhecimentos por conta própria, a habilidade de manipular o código também 
fica restrita. O trabalho do programador, do desenvolvedor, ou ainda, do 
famigerado “designer que programa”, exige que todos os dias novos 
conhecimentos sejam agregados ao seu ferramental técnico. 
Essa busca diária por conhecimentos pode ser bastante recompensadora: 
todos os dias são criadas ferramentas que facilitam esse trabalho, seja criando 
 
 
15 
fundações para que os designers não precisem começar o seu trabalho do zero 
toda vez que forem criar um novo projeto digital, seja possibilitando que eles 
trabalhem desenvolvendo sites completos inteiros sem a necessidade de saber 
programar. 
Ainda que necessitem saber lidar com código – como vimos, uma coisa é 
uma coisa, e outra coisa é outra coisa – muito do trabalho de programação já foi 
realizado e está disponível. Frameworks como o Bootstrap (disponível em: 
<https://getbootstrap.com/>), por exemplo, possuem uma vasta biblioteca de 
componentes de interface prontas para uso. Sistemas de gestão de conteúdo de 
código aberto como o Wordpress (<https://br.wordpress.org/>), Joomla 
(<https://www.joomla.org/>) e Drupal (<https://www.drupal.org/>), por sua vez, 
são construídos na linguagem PHP, mas não exigem qualquer conhecimento 
prévio nessa linguagem específica – e nem mesmo em linguagens de aplicação 
mais específica, como as de bancos de dados – para a construção de sites que 
fazem uso deles. 
Se você tem por objetivo trabalhar no desenvolvimento de produtos 
digitais, seja como designer ou desenvolvedor, é importante que a princípio você 
saiba ao menos navegar por esses códigos sem sentir-se intimidado pelo que 
você não sabe. Com o tempo, você notará que metade do tempo nesse tipo de 
desenvolvimento é gasto no Google, buscando soluções que outras pessoas 
desenvolveram para problemas semelhantes. Trabalhar nessa área é ser 
eternamente um estudante. 
TROCANDO IDEIAS 
Nos primórdios do acesso à internet e na lida com as plataformas 
disponíveis até então, muitas pessoas acabaram lidando com código de forma 
amadora e, por causa disso, acabaram se tornando profissionais da área com o 
tempo. Por vezes, meio que sem saber o que estavam fazendo, muitos editaram 
códigos HTML e CSS em plataformas de blog buscando personalizar sites 
pessoais, acabando por aprender um ofício quase que sem querer. Você já teve 
experiência anterior com código? Em caso negativo, como você imaginava que 
esses comandos se convertiam em gráficos na tela? Converse com seus colegas 
de curso no fórum da disciplina sobre suas experiências. 
 
 
16 
NA PRÁTICA 
Utilizando a base de código e a lógica de organização de conteúdo que 
apresentamos aqui ao destrinchar os mistérios das linguagens de que tratamos 
nesta aula, crie sua própria página web. Lembre-se de que, para isso, você só 
precisa de um editor de texto simples. Você pode partir dessa mesma estrutura, 
incorporando a esse projeto fictício outras ideias: por exemplo, por que não uma 
seção de comentários na qual os usuários possam trocar dicas e experiências 
sobre a receita? Ou ainda, uma galeria de imagens na qual possam compartilhar 
os resultados (ou fracassos) de suas experiências culinárias? Observe sites com 
o mesmo propósito do nosso e incorpore essas ideias. 
FINALIZANDO 
Nesta aula, tratamos da complexidade de algumas das principais 
linguagens que usamos na composição de páginas web. Buscamos fazer essa 
apresentação de forma leve e descomplicada, de modo que você possa lidar na 
prática com esse assunto sem a pressão de memorizar comandos ou tags. 
Mesmo que você não escolha o caminho do desenvolvimento web e do trabalho 
direto com códigos do tipo, descortinar essas abstrações é importante para que 
você tenha uma noção mais clara da forma como essas tecnologias funcionam. 
Além disso, é possível também ver que, apesar das tecnicalidades e das 
nomenclaturas, elas não são nenhum bicho de sete cabeças. 
 
 
 
17 
REFERÊNCIAS 
DUCKETT, J. HTML e CSS: projete e construa websites. Rio de Janeiro: Alta 
Books, 2016. 
GARRET, J. J. The Elements of User Experience: User-Centered Design for 
the Web and Beyond. 2. ed. Berkeley: New Riders, 2011. 
PREECE, J.; ROGERS, Y.; SHARP, H. Design de Interação: além da interação 
humano-computador. Tradução de Viviane Possamai. Porto Alegre: Bookman, 
2013.