WEB DESIGN

AULA 1

Matias Sebastiao Peruyera

CONVERSA INICIAL

Bem-vindas e bem-vindos à nossa aula! Para entender as peculiaridades

da web em particular e do meio digital em geral, vamos começar com uma
introdução breve à história da web e do web design, falar um pouco de como a
profissão foi se modificando com as diferentes mudanças tecnológicas nesse
campo e também começar a entender como funcionam as linguagens para
construir sites – e outros produtos digitais.
Parte desse conteúdo se baseia no livro Web design, de Mônica Paz
(2021), que é o livro-base da disciplina. Recomendamos a leitura. Em vários
momentos, vamos sugerir que você amplie seus conhecimentos com partes
específicas desse livro.
Nesta aula, você vai ver os seguintes temas:

• Começos da web e do web design.

• Funcionamento da web: clientes e servidores.
• Trabalhando com web design.
• Padrões e HTML.
• Web semântica, estilos CSS e acessibilidade.

CONTEXTUALIZANDO

O meio digital tem semelhanças com o meio impresso e diferenças. Entre

as semelhanças, certamente está a aplicação de métodos e técnicas para
conseguir um resultado adequado aos objetivos que estamos buscando, fazendo
uso de boa tipografia, grids, imagens, entre outros elementos.
No começo, o web design era bastante similar ao impresso. Por exemplo,
ao projetar um cartaz, não precisamos nos preocupar com a possibilidade de a
folha de papel na qual o cartaz será impresso mudar de tamanho. Isso é
impossível. De maneira similar, podíamos confiar que o site que faríamos seria
acessado usando computadores com características similares de sistema
operacional, telas e velocidade de acesso.
A popularização da internet móvel fez com que a variedade de dispositivos
para acessar a internet aumentasse. É como se a folha do cartaz pudesse mudar
magicamente de A3 para 99×96, e o papel couchê se transformasse em papel
 pólen. Então, é necessário projetar considerando essas possibilidades. Para
isso, é importante entender como a internet e a web funcionam.

TEMA 1 – COMEÇOS DA WEB E DO WEB DESIGN

Em 1969, em plena Guerra Fria, surgiu nos Estados Unidos a Advanced

Research Projects Agency, a Arpanet. O objetivo era descentralizar a conexão
entre computadores para garantir a transmissão de informações científicas e
militares. Na década de 1980, várias outras redes que usavam a Arpanet se
fundiram a ela, o que deu origem à internet (Paz, 2021; Castells, 1999).
Apesar de usarmos os termos web e internet como sinônimos, eles não
são a mesma coisa. A web – apelido da world wide web – se refere à parte da
internet acessível por navegadores. A internet abarca também comunicação por
outros protocolos, como aplicativos, transferência de arquivos e mensagens
instantâneas. Finalmente, tanto a web como a internet fazem parte do
ciberespaço.
A web surgiu em 1989, pelas mãos do físico britânico Tim Berners-Lee.
Já naquele momento, ela se caracterizava pelo uso de linguagem HTML,
servidores que armazenavam as páginas, e “endereços” para os sites,
chamados de URL (uniform resource locator ou localizador uniforme de
recursos). Também era usado um navegador para acessar essas páginas, que
interpretavam – renderizavam – o HTML para que fosse visualizado com a
formatação determinada no código.
Outra característica da web é o hipertexto – HTML significa hyper text
markup language. As páginas podem ser ligadas entre si, permitindo uma leitura
não linear.

Saiba mais
O CERN – Conseil Européen pour la Recherche Nucléaire (Conselho
Europeu para a Pesquisa Nuclear), do qual Berners-Lee fazia parte –
disponibiliza uma simulação de como a primeira página da web era mostrada
nos computadores NeXT usados para desenvolver a linguagem. Nesse caso,
é preciso usar duplo clique para acessar os links. Disponível em:
<https://worldwideweb.cern.ch/browser>. Acesso em: 2 set. 2021.

Em 1993, foi lançado o primeiro navegador tal como conhecemos hoje, o

Mosaic, cuja empresa, depois que passou por mudanças administrativas, tornou-
3
 se a Netscape, que no começo da década de 1990 era sinônimo de navegador,
até aparecer o Internet Explorer, da Microsoft. O código-fonte do Netscape
Navigador foi a base para o navegador Mozilla, que depois se tornou o Firefox,
atualmente mantido pela Mozilla Corporation.
Em 1994, Berners-Lee fundou o World Wide Web Consortium (mais
conhecido pela sigla W3C), com o objetivo de estabelecer e manter padrões para
garantir a compatibilidade entre diferentes sites, linguagens e navegadores.
Entre as últimas implementações importantes da W3C, está a quinta versão da
linguagem HTML – HTML5 –, que prioriza incluir elementos para ajudar no
desenvolvimento de aplicações web (W3C, 2021).
No começo, como é possível ver na simulação proporcionada pelo Cern,
a web era composta apenas por texto. Uma das primeiras imagens da web, e
certamente a primeira imagem de uma banda, foi a da banda Les Horribles
Cernettes, composta por quatro mulheres que cantavam músicas sobre física
nuclear em um estilo pop dos anos 1960 e foi solicitada por Berners-Lee para
seus testes (Gennaro, 2007). A popularização do uso de imagens chegou com o
navegador Mosaic. Na época, o padrão para monitores coloridos era o VGA
(640×480 pixels, com 16 cores), e um modem-padrão, para conexão discada,
alcançava 14,4 kilobits por segundo – sim, kilobits, não megabits.
Em 27 de outubro de 1994, foram veiculados os primeiros banners
publicitários (Vaz; Peruyera, 2020). Em 1995 foi lançado o AltaVista, primeiro
buscador da web.
Em 1995, a web começava a trabalhar com conteúdo dinâmico, com o
lançamento e popularização das linguagens PHP (personal home page) e
JavaScript.
Em 1996 foi lançada a primeira especificação do padrão CSS –(cascading
style sheets) para aplicar layout e estilos aos sites. Ainda demoraria alguns anos
para começar a se estabelecer.
Outra tecnologia que não é mais usada, mas foi importante entre as
décadas de 1990 e 2000, foi o Flash, da Macromedia, que depois foi adquirida
pela Adobe. A ferramenta permitia trabalhar com material interativo em formato
vetorial, ideal para banners publicitários, sites completos – era a moda da época
um site em Flash cheio de efeitos e inclusive música! – e animações. Um marco
para a decadência do Flash foi o lançamento do iPhone, em 2007, cujo

4
 navegador não suportava o formato. O desenvolvimento web passou a focar em
padrões como HTML5, CSS e Javascript.
Houve várias tentativas de transmitir vídeo e material interativo pela
internet, como o RealPlayer, lançado em 1995. Era até possível assistir a um
stream ao vivo, mas em uma resolução minúscula e com qualidade terrível.
Outras mudanças importantes foram a chamada Web 2.0, que permitia
uma participação maior do público, o qual podia produzir seus próprios
conteúdos e interagir com outras pessoas, um passo para o que chamamos hoje
de redes sociais da internet. A Web 2.0 está associada ao Ajax – Asynchronous
JavaScript And XML –, uma técnica de programação que, muito resumidamente,
permite que partes de um site sejam recarregadas separadamente.
No que se refere ao desenvolvimento, houve várias mudanças nos
métodos. Havia ferramentas focadas em leigos, como o FrontPage, que fazia
parte do pacote Office. Também houve tentativas de facilitar o trabalho de
designers gráficos que começavam a trabalhar com web, fornecendo
ferramentas que se aproximassem do trabalho com ferramentas de design
gráfico. Um exemplo é o Dreamweaver, então da Macromedia. Na época, o
código gerado por essas ferramentas era bem “inchado”, com muito mais código
do que um site otimizado feito “à mão”. Outra maneira comum de trabalhar era
projetar um site no Photoshop ou similar e depois usá-lo de base para
desenvolver um site, algumas partes com código, outras com fatias de imagens
desse arquivo.
Na época, era comum pesquisar a resolução de tela mais popular e fazer
um site para se adequar a ela. Muitos sites tinham um rodapé que dizia, por
exemplo, “Melhor visualizado em 800×600” (pixels, no caso) e um provável link
para baixar o plug-in do Flash. Alguns sites tinham uma versão móvel,
possivelmente sem imagens, para poderem ser acessados em telefones
celulares – isso antes dos smartphones. Imagine acessar a web com um
dispositivo que tinha uma tela na qual cabiam umas oito linhas de texto e que
usava o teclado numérico para digitar texto. A sigla associada a essa maneira
de acessar a internet é WAP – wireless access point.
Com a popularização da internet móvel, tornou-se necessário pensar em
novas maneiras de produção. Atualmente, não é possível presumir que o site
será acessado em um monitor com uma resolução específica; sequer é possível
presumir que ele será acessado em um computador. Assim, vão aparecendo

5
 técnicas de web design responsivo, feito pensando em vários dispositivos,
inclusive o mobile-first, no qual a prioridade são os dispositivos móveis. Também
vão aparecendo novas divisões de tarefas entre quem trabalha desenvolvendo
sites.

TEMA 2 – FUNCIONAMENTO DA WEB: CLIENTES E SERVIDORES

Com bilhões de páginas e outros recursos, a web precisa de algum tipo

de organização. Tudo funciona com base no modelo cliente-servidor (Paz, 2021).
Vamos começar a compreender como a web funciona com base nos diferentes
elementos de um URL:

• Protocolo de comunicação: http ou https, por exemplo.

• Nome do site e tipo de domínio: nome.com, por exemplo.
• Nome da página: home.html, por exemplo. Pode ser omitido; nesse
caso, o navegador procurará a página index.html.

Na web, o cliente faz solicitações ao servidor por meio do navegador. A

partir dos comandos enviados pelo navegador, o servidor envia os dados
necessários para cumprir essas solicitações.
Digamos que você queira entrar no google.com e digita esse URL no
navegador. O URL é buscado em um servidor DNS (domain name system, ou
sistema de nomes de dominíos), que informa o número IP (internet protocol) do
site. Graças aos servidores DNS, você não precisa decorar o IP dos sites que
frequenta. Imagine tê-los anotados em uma agenda, como fazíamos com os
telefones antigamente.
Com o IP “em mãos”, o navegador estabelece uma conexão TCP
(transmission control protocol) com a porta 80 no IP 173.194.121.32 e “pede” o
arquivo index.html (porque você quis entrar na home da página). O servidor
manda o arquivo, em uma série de “pacotinhos” de dados, que, uma vez no seu
computador ou celular, são reunidos novamente no arquivo index.html e
renderizados pelo navegador. É provável que esse arquivo também precise de
outros arquivos, como imagens, fontes, folhas de estilos, que também serão
“pedidos” ao (s) servidor (es) e transferidos da mesma maneira.

6
 2.1 Sites estáticos e dinâmicos

Há várias definições possíveis do que é um site dinâmico ou estático (Paz,

2021). Um site estático é aquele que não permite nenhum tipo de interação ou
modificação nem pelo lado do cliente nem pelo lado do servidor – a não ser,
claro, modificar o código-fonte 1. Já se for projetado para ser modificado mais
facilmente, estamos diante de um site dinâmico. Nessa definição podem entrar
até sites responsivos, cujo conteúdo está programado para ser exibido de
maneiras diferentes de acordo com o dispositivo que está sendo usado para
acessá-lo.
Sendo assim, essas modificações no conteúdo do site podem acontecer
do lado do cliente – client side – ou do lado do servidor – server side.

Saiba mais

Um exemplo disso é o jogo 2048, que foi febre em meados dos anos 2010.
Você pode jogá-lo em: <https://play2048.co> (cuidado, porque vicia). O servidor
fornece todos os arquivos necessários para ele funcionar, e o processamento é
feito pelo seu computador. Isso é client-side.
Um site também pode ser dinâmico do lado do servidor. Por exemplo, um
site que use WordPress ou algum outro CMS (content management system,
sistema de gerenciamento de conteúdo) com o qual possam ser feitas
modificações no conteúdo sem ter que mexer no código fonte.
Com um sistema como esse, é possível modificar o conteúdo do site
facilmente. Nesse aspecto, ele é dinâmico. Porém, ele é dinâmico também
porque as páginas são geradas de acordo com o pedido do cliente.

Saiba mais

Digamos que você entrou no site Jovem Nerd e quer informação sobre
videogames. Eles disponibilizaram um link para a URL
<https://jovemnerd.com.br/bunker/categoria/games>, que mostrará todos os
posts do blog dentro da categoria games.
A página que aparece ao clicar nesse link não existe. Ela é gerada
dinamicamente pelo servidor. Ao receber essa URL, o servidor, com base na
programação dos arquivos do WordPress, busca em uma base de dados todas
as informações necessárias para gerar um arquivo HTML só para você. O seu

1
Termo para o código, principalmente HTML, que compõe os sites.
7
 dispositivo receberá um arquivo estático, que foi processado pelo servidor. Isso
é server-side.
Sites completamente estáticos eram típicos nos primórdios da web, como
os feitos por pessoas comuns e postados em serviços de hospedagem gratuita,
por exemplo o Geocities. Atualmente, é pouco provável se deparar com algum
site completamente estático. Essas definições e explicações atentam para o fato
de que o papel do web design não é projetar algo que não vai mudar, mas
projetar pensando em todas as possibilidades, seja do conteúdo do site ou de
como esse este será acessado.

TEMA 3 – TRABALHANDO COM WEB DESIGN

Como já contamos, antigamente a web era acessada apenas por

computadores, e webdesigners podiam ter a tranquilidade de que, se o site cabia
no monitor usado pela maior parte do público, estava tudo bem. Quem tivesse
monitores mais antigos simplesmente teria que rolar a janela para os lados –
ninguém mandou não trocar de monitor a tempo. Sites pessoais podiam ser
feitos com o Microsoft FrontPage, e designers gráficos podiam usar o
Dreamweaver para construir um site com tabelas, para emular o trabalho com
ferramentas de diagramação, ou, ainda, projetar o site inteiro no Photoshop e
passar para outra pessoa desenvolver o código e exportar as imagens
necessárias. Isso quando o site não era desenvolvido inteiramente no Flash –
dava até para pôr música!
Boas épocas que não voltam mais – felizmente. Ninguém merece sites
com música não solicitada. Com a multiplicação dos dispositivos com acesso à
web, não é mais possível pensar em um site que exija determinado tamanho de
tela ou determinado plug-in 2 para funcionar. Com isso, o trabalho de
webdesigners também mudou. Mais do que designers, agora se fala em
desenvolvedores.
Há várias ocupações relacionadas ao desenvolvimento web:

• Arquiteto da informação: organiza os conteúdos de um site de uma

maneira hierárquica e lógica.

2
Programas que adicionam funcionalidades a outros programas.
8
 • UX/UI designer: UX é a sigla de User eXperience. UI é a sigla para User
Interface. São consideradas disciplinas similares, já que as duas lidam
com o projeto das interfaces de um site ou aplicativo.
• Desenvolvedor front-end: desenvolve a parte do site – ou aplicativo – à
qual os usuários têm acesso e com a qual interagem.
• Desenvolvedor back-end: desenvolve a parte “de trás”, ou seja, o que
é necessário para que o site ou aplicativo funcione, como bases de
dados.
• Desenvolvedor fullstack: cuida tanto do front-end como do back-end.
Função comum em organizações menores.

Pessoas que trabalhem com webdesign podem se ocupar de várias

dessas tarefas. Tudo depende dos conhecimentos e da organização. Em uma
organização maior, pode haver pessoas para cuidar de várias partes de um
projeto. Por exemplo, há UX designers que se ocupam do design system, ou
seja, que desenvolvem todo um projeto visual, com partes que então serão
combinadas por outros UX designers para definir como será o visual e a interface
de um produto. Há especialistas em pesquisa de UX, para saber como as
pessoas usam seus produtos e poder fazer modificações pertinentes.
Desenvolvedores front-end vão transformar as ideias dos UX designers em
código, com a ajuda dos back-end.
Também há outras habilidades importantes, como UX writing, que se
ocupa dos textos – inclusive de botões, links e notificações –, analistas de
otimização para sites de busca (SEO), designers de interação, entre outros
títulos possíveis.
Apesar das mudanças nas questões técnicas, as habilidades para bons
webdesigners não mudaram muito. Veja algumas delas (Paz, 2021):

• Design gráfico, uso de tipografia, cores, layout, grids.

• Conhecimento sobre experiência de usuário e usabilidade.
• Conhecimento de linguagens de estruturação e marcação (HTML, XML,
CSS).
• Noções de programação (JavaScript, React, PHP, Python, Django,
Angular JS etc.).
• Conhecimentos de sistemas de informação e de serviços online.

9
 Apesar disso, é possível trabalhar com webdesign sem precisar mexer em
uma linha de código. É importante que você saiba pelo menos como as
linguagens de marcação e de programação funcionam para que possa projetar
sistemas estando ciente das limitações e das possibilidades, tanto das
linguagens como da equipe com que você trabalha.

TEMA 4 – PADRÕES E HTML

Para que a web possa funcionar e suas páginas sejam acessíveis pelo
maior número de pessoas possível, é necessário um pouco de organização. O
órgão responsável por manter os padrões (standards) de tudo o que é
relacionado ao desenvolvimento de sites é o World Wide Web Consortium – W3C
–, fundado por Berners-Lee em 1994, com centenas de funcionários e a
colaboração de várias empresas da internet (Paz, 2021).
Entre muitas outras coisas, o W3C cuida dos padrões das linguagens
usadas para desenvolver sites, como HTML, CSS e JavaScript. Cuida inclusive
do que você vai começar a aprender agora mesmo, HTML. Você vai seguir esses
padrões, mais especificamente da especificação HTML5 (W3C, 2021).
HTML é a sigla para hypertext markup language – linguagem de marcação
de hipertexto. É uma maneira de armazenar em um arquivo de texto as
informações sobre o que cada elemento do conteúdo é, para que então seja
exibido – ou renderizado – pelo navegador de alguma maneira.
Se você abrir um arquivo HTML em um editor de texto, poderá ver o
código “cru”. Se você abrir esse mesmo arquivo em um navegador, verá o
resultado da interpretação que o navegador faz desse código. Observe na Figura
1: são o mesmo arquivo.
Quando falamos em arquivo de texto, estamos nos referimos a um arquivo
no qual a única informação que pode ser salva é texto, sem formatação, como
os arquivos .txt. A maioria dos arquivos que você vai usar aqui são desse tipo.
As tags servem para isso. Elas marcam (linguagem de marcação,
lembra?) onde um elemento começa e onde termina – nem todas se comportam
assim, mas vamos aos poucos.
Ainda na Figura 1, observe que o título, que aparece maior e em bold no
navegador, está “ensanduichado” entre dois “elementos” de texto. Esses
“elementos” são as tags.

10
 No caso do título, estamos usando a tag h1, que é utilizada para o título
principal da página – h, de heading, e um número de 1 até 6 para títulos e
subtítulos. Os parágrafos são marcados com a tag p, que por acaso é
praticamente a mesma palavra em português. Há muitas outras tags, para
marcar os mais variados elementos, mas por enquanto vamos ficar com essas.
Repare agora que a tag do começo é <p>, enquanto a do final é </p>. O
navegador usará essa convenção porque precisa saber quando o título acaba.
Preste atenção, pois uma tag que não foi fechada costuma ser um pequeno
detalhe que resulta em um desastre ao abrir o arquivo no navegador.

Figura 1 – Telas de um editor de texto e de um navegador

Fonte: Peruyera, 2021.

Apesar de o navegador ser bastante tolerante com erros, é importante

estruturar o arquivo HTML da maneira correta. O primeiro que deve aparecer é
uma declaração sobre de que tipo de arquivo se trata. No caso do HTML, é
<!DOCTYPE html>.

11
 Depois, é necessário indicar qual parte do conteúdo deve ser interpretada
como HTML. Para isso, são usadas as tags <html> e </html>.
Dentro do HTML, é importante definir dois elementos: o head e o body.
Ambos são delimitados de maneira similar ao elemento html. O primeiro contém
várias informações que não são conteúdos, mas são importantes para o
funcionamento da página, como metadados, links para arquivos com scripts,
folhas de estilos, fontes, entre outros. O body é o conteúdo da página.
Com tudo isso, a estrutura de nosso arquivo HTML fica desta maneira:

<!DOCTYPE html>

<html>

<head>

<!--cabeçalhos, metadados etc. -->

</head>

<body>

<!--conteúdo da página -->

</body>

</html>

Repare que organizamos o texto colocando recuos antes de cada linha.

Essa prática é chamada de indentação. Para o navegador, dá na mesma: o
arquivo inteiro pode estar em uma única linha, porém é uma boa prática para
trabalhar com arquivos, já que é possível visualizar quais elementos estão dentro
de outros, evitando erros. Esses recuos podem ser inseridos com a tecla tab ou
com a barra de espaço, e também há recursos para fazer isso automaticamente.
Se você criar um arquivo HTML com base nesse código, ao abrir no
navegador você não verá nada. Pro navegador, ele está vazio. E essas frases
que colocamos no head e no body?
Quando colocamos qualquer texto ou código entre essas “tags” – <!-- e -->
– estamos fazendo um comentário. Os comentários são usados em várias
linguagens e servem para que essa parte do código seja ignorada. É útil para
fazer anotações que expliquem as diferentes partes do código, por exemplo. Use

12
 à vontade, tanto para lembretes seus como para que o código fique explicadinho
para quem trabalhar nele depois de você. Tenha certeza de que vão te
agradecer.
Repare, também, que usamos cores, assim como no editor de texto da
Figura 1. Essas cores não estão presentes no arquivo HTML, mas são
acrescentadas por alguns editores de texto para ajudar a visualizar as diferentes
tags e seu conteúdo. Por isso, recomendamos que você use algum editor de
texto com esse recurso, como o Notepad++. Ah! Editores comuns, como o Word
ou Libre Office, não servem para isso.

TEMA 5 – WEB SEMÂNTICA, ESTILOS CSS E ACESSIBILIDADE

Talvez você saiba que é possível inserir alguns atributos às tags HTML,
para poder formatar os elementos, mudar a fonte, colocar uma cor de fundo,
entre outras possibilidades. Isso é possível, mas não é o ideal – tanto que nem
vamos te ensinar como fazer, apesar de que em algumas situações pode ser útil
para fazer uma gambiarra – algo bem comum no desenvolvimento.
Como você já sabe, o HTML serve para marcar o que cada elemento é.
Essa prática faz parte da chamada web semântica (Paz, 2021). As tags HTML
não designam que os subtítulos precisam estar maiores e na cor verde-escuro.
No HTML, vamos dizer apenas que é um heading nível 2, ou seja, h2. Onde
vamos dizer que os h2 são maiores e verde-escuros é na folha de estilos, escrita
na linguagem CSS.
O CSS – cascading style sheets, ou folhas de estilo em cascata – é uma
linguagem que define a aparência e o comportamento dos elementos do HTML
(Paz, 2021). Ela pode ser usada diretamente nas tags HTML – o chamado inline,
que não é recomendado –, inserida diretamente no código HTML, dentro de tags
style, que por sua vez vão dentro das tags head, ou como arquivos separados,
que serão “chamados” por um link também dentro do head do arquivo HTML
Essa opção é a mais recomendada (Paz, 2021), mas em alguns dos exemplos
que você verá aqui usaremos o código CSS inserido no arquivo HTML, por ser
mais prático para exemplos didáticos.

5.1 Acessibilidade

13
 Apesar das possibilidades do CSS, é importante conceber que o arquivo
HTML precisa sobreviver sem o CSS. Para isso, é fundamental usar as tags de
maneira semântica, como acabamos de explicar.
No que se refere à acessibilidade, é primordial pensar que há pessoas
que usam uma folha de estilos própria. Pessoas com baixa visão, por exemplo,
podem usar uma folha de estilos que ignore os estilos de um site, substituindo-
os por cores, fontes e tamanhos de texto que os tornem mais visíveis (Figura 2).
Pessoas cegas podem usar a internet com leitores de tela, que vão ler em voz
alta os conteúdos de um site. Esses leitores ignoram os estilos CSS.
Daí a importância de estruturar o código HTML de maneira semântica. No
meio impresso, podemos identificar um título em uma página porque ele é maior
e em bold, por exemplo. Uma vez impresso, é irrelevante se foi definido como
um estilo de título do InDesign ou se apenas aumentaram o tamanho da fonte.
Na web, é importante não só ajustar o estilo, mas também estruturar o código
corretamente, indicando que aquilo é um título. Nas situações em que o estilo for
ignorado, a tag indicando que é um título (h1, h2 etc) precisa estar ali.

Figura 2 – Página com estilos aplicados para pessoas com baixa visão

14
 Fonte: Peruyera, 2021.

Um outro exemplo de como fazer um código acessível são as diferentes

maneiras de deixar um texto em bold e/ou itálico (Paz, 2021). A maneira mais
comum era usar as tags <b> e <i>. Porém, bold e itálico são atributos que se
referem à aparência. É recomendado substituir essas tags por <strong> e <em>
(de emphasis), que, por padrão, também deixam o texto bold e itálico, mas
podem ser interpretadas para mudar o tom de voz de um leitor de tela, por
exemplo.
Essas não são técnicas especiais. É o recomendado pelos padrões – web
standards. Para chamar a atenção para essas questões, em abril de 2006
aconteceu o primeiro CSS Naked Day, durante o qual vários sites e blogs
desabilitaram os estilos, mostrando como um site deveria funcionar mesmo sem
eles. Uma reprodução da página pode ser vista em: <https://css-naked-
day.github.io>.
Um dos objetivos dos padrões web é que a web seja acessível a todo
mundo. Você, ao desenvolver um site e seguir esses padrões, está fazendo parte
dessa missão e tornando a web – o que inclui o seu site – acessível para todos’.

15
 Faça você mesmo
É muito provável que você use o navegador Chrome. Nele – e em
outros navegadores –, é possível instalar extensões com as mais variadas
funcionalidades, muitas delas pensadas para ajudar o trabalho de
desenvolvimento de sites.
Vamos te sugerir instalar a extensão Web Developer e usá-la para
desabilitar os estilos de um site. Instale a extensão e experimente desabilitar
os estilos de vários sites. Eles continuam legíveis sem os estilos? O HTML
aparenta estar bem estruturado?

5.2 Praticidade

Pensar e fazer um bom uso dos estilos CSS também garante um código
limpo e fácil de manter. Imagine que você precise redesenhar um site com
milhares de páginas (HTML). Se essas páginas tiverem um código HTML correto
e estiverem linkadas a uma única folha de estilos, seu trabalho será
(relativamente) fácil. Basta modificar essa folha de estilos para que todas as
páginas mudem o seu visual. Lembra que era a prática recomendada? Agora
você sabe por que. Já se cada página tiver os estilos definidos de alguma outra
maneira… é melhor passar um café, porque o trabalho vai demorar.
Você já viu a importância de saber usar folhas de estilo para conseguir
um site acessível e fácil de desenvolver. Mais adiante, você verá como escrever
código CSS, que será das suas principais ferramentas para desenvolver sites –
e não só! Há várias situações, em desenvolvimento de aplicativos, por exemplo,
nas quais saber CSS também é útil.

TROCANDO IDEIAS

Considerando suas habilidades e as técnicas que você sabe, quais delas

continuarão sendo úteis caso você resolva começar a trabalhar com web design?
Discuta com seus colegas.

NA PRÁTICA

Que tal começar a preparar seu portfólio? É uma ferramenta fundamental

para quem quiser começar a trabalhar com design gráfico. Muitas vezes, o
portfólio em si é uma peça mais interessante do que os trabalhos que ele contém.

16
 Você preparar seu portfólio em HTML e CSS também servirá como prova dos
seus conhecimentos.
Comece fazendo um esboço. Selecione famílias tipográficas, pense em
paletas de cores e vá selecionando seus trabalhos.

FINALIZANDO

Nesta aula, você aprendeu o básico da história da web e também

começou a entender como sites são construídos. Isso é importante para
entender a evolução das técnicas, das linguagens, dos padrões, e o porquê de
as diferentes tarefas serem executadas dessa maneira. Você também aprendeu
sobre a importância de um web design que siga os padrões, para garantir uma
internet mais acessível a todo mundo.

17
REFERÊNCIAS

CASTELLS, M. A sociedade em rede. São Paulo: Paz e Terra, 1999.

GENNARO, S. de. Les Horribles Cernettes. Musiclub. Disponível em:

<https://musiclub.web.cern.ch/bands/cernettes/firstband.html>. Acesso em: 2
set. 2021.

PAZ, M. Web design. Curitiba: InterSaberes, 2021.

VAZ, O.; PERUYERA, M. Uma história da publicidade. Curitiba: InterSaberes,

2020.

W3C. HTML 5.2. Disponível em: <https://www.w3.org/TR/html52/>. Acesso em:

2 set. 2021.