Aula 2

FERRAMENTAS DE
DESENVOLVIMENTO WEB
AULA 2
Prof. Yanko Costa

CONVERSA INICIAL
Nesta aula, vamos apresentar uma tecnologia complementar ao HTML. O

CSS já foi brevemente citado em nossos estudos para informar que a formatação
visual do HTML seria desenvolvida utilizando essa tecnologia.
Durante esta aula, aprofundaremos o conceito do CSS e serão utilizados
exemplos em conjunto com o HTML para apresentar a utilização prática dessas
duas tecnologias na interface de um sistema. Também serão verificadas
algumas formas de adaptação dessas tecnologias conforme o tipo de dispositivo
que será utilizado para executar o sistema (ou aplicação web). Por último, será
apresentado um framework que auxiliará na produtividade da montagem de
interfaces atrativas e flexíveis que poderão ser utilizadas em diferentes
dispositivos.
TEMA 1 – CASCADING STYLE SHEETS (CSS)
Com o propósito de melhorar a estética dos documentos HTML, que

estavam se tornando mais robustos em atributos visuais, e tornar os sistemas
web mais atrativos e operacionalmente mais confortáveis, em 1996 foi
implementado o conjunto de tecnologias web CSS (Cascading Style Sheets, ou
folha de estilo em cascata), que seria o responsável por separar a estrutura do
documento HTML da parte estética (CSS, 2020).
Antes do CSS, e com base no HTML 3.2, foram acrescentadas algumas
opções de formatação usando atributos de alguns elementos HTML e tags
específicas para formatação visual. Por exemplo, no HTML 3.2, um atributo
bgcolor na tag <body> possibilitava alterar a cor de fundo da página e a tag
<center> centralizava um texto na tela.
Com a implantação dessas folhas de estilos no HTML 4, o CSS ficaria
responsável por aplicar cores, definir fontes de letras, garantir o posicionamento
dos objetos em tela e implementar adereços aos componentes HTML, trazendo
a oportunidade de criar documentos mais ricos no aspecto visual e mais práticos
na formatação de um conjunto muito grande de documentos dinâmicos.
Com base nessa versão do HTML pôde-se realizar uma maior separação
da estrutura do documento da sua formatação visual, e, com a possibilidade de
manter a configuração visual em arquivo separada, a manutenção e a alteração
visual de um documento poderiam ser realizadas sem interferência na
2
informação e sua classificação, bastando para isso alterar apenas o arquivo do
CSS.
1.1 Sintaxe básica
Para aplicar a formatação ao documento HTML é necessário especificar

qual elemento terá seu estilo alterado. Para isso, a primeira parte do CSS é a
indicação do seletor, que poderá ser o nome de uma tag HTML existente, ou um
nome novo que será utilizado posteriormente em um ou mais elementos HTML.
O Quadro 1 expõe a sintaxe básica da descrição de um seletor, podendo os itens
serem digitados na mesma linha (a) ou em linhas diferentes para facilitar a leitura
(b). Em (c) é apresentado um exemplo real de alteração de estilo de uma tag
<h1>, que terá o texto alterado para a cor azul (blue), conforme mostra o exemplo
de HTML (a) e o resultado (b) no quadro Erro! Fonte de referência não
encontrada..
Quadro 1 – Seletor no CSS
a) b) c)
seletor { h1 {
seletor { propriedade : valor ; } propriedade: valor ; color: blue;
} }
No Quadro 2 (a) é exibido o documento HTML completo, trazendo a tag

<style>, que permite inserir um elemento CSS que será usado em todos os
elementos <h1> que estiverem inseridos no documento. Os demais elementos
não são afetados: o funcionamento do seletor é semelhante a um filtro de
pesquisa que procura em todo o documento pelo seletor indicado e aplica a troca
da cor do texto para azul em cada H1 que é encontrado.
Quadro 2 – HTML completo de aplicação do CSS em H1
a) b)
<html>
<head>
<title> CSS </title>
<style>
h1 {
color: blue;
}
</style>
</head>
3
<body>
<h1>Elemento H1</h1>
<p> Elemento p </p>
</body>
</html>
Com o CSS todas as características do elemento podem ser alteradas,

mesmo que, com essa mudança, o elemento perca os atributos que ele
normalmente possui e que diferencia ele dos demais. Veja o exemplo no quadro
3 –. Nesse exemplo, em (a) temos a aparência padrão dos elementos <p> e
<h1>. Depois, em (b), temos o CSS que será aplicado. Em (c) temos o resultado
com os elementos alterados. Não existe mais diferença visual entre a tag <h1>
e <p>, pois as duas estão com o mesmo tamanho (16 pixels) e a tag <h1> está
sem o negrito (font-weight: normal).
Quadro 3 – Eliminando as diferenças entre as tags <p> e <h1>
a) b) c)
<style>
h1 {
font-size: 16px;
font-weight: normal;
}
p{
font-size: 16px;
}
</style>
Existem diversas propriedades que podem ser aplicadas em textos,

tabelas, parágrafos, formulários e imagens. As mesmas características que
podem ser aplicadas na formatação de publicações impressas, usando um bom
editor de texto, podem ser replicadas num documento HTML, tornando a
interface de um sistema com algo grau de sofisticação. Com o CSS podemos
configurar bordas duplas laterais, sombras, cores, espaçamento entre letras,
entre palavras, entre parágrafos ou blocos de elementos e, inclusive, animação
de elementos HTML.
Numa situação extrema, um alerta de um sistema pode ser apresentado
no formato de uma caixa com fundo vermelho, flutuando em cima do restante da
tela com a mensagem percorrendo o interior da caixa, movendo-se da esquerda
para a direita, trocando o texto de cor a cada ciclo de movimento. Esse alerta
4
poderá ficar na frente da tela do sistema, enquanto o operador não clicar em
alguma parte da tela com o mouse.
Nesta aula, serão vistas algumas propriedades para exemplificar o seu
uso. Nas práticas, outras propriedades serão utilizadas, mas nem todas as
propriedades existentes do CSS serão comentadas, pois são muitas e com
diferentes variações de valores na aplicação. Recomenda-se como uma das
fontes de consulta sobre as propriedades existentes do CSS a lista de referência
da Fundação Mozilla desenvolvedora do navegador Firefox (Mozilla, 2020).
Uma sugestão para aprofundar o entendimento e uso das propriedades é
pesquisar os elementos utilizados na formatação das telas que serão vistas nas
aulas sobre JavaScript e Angular, assim como nas aulas práticas, para identificar
outras variações de valores e novas formas de aplicação. Assim o leitor vai
experimentando formas alternativas de utilização das propriedades do CSS e
aumentando seu repertório.
No Quadro 4 foi criada uma lista com um conjunto básico de propriedades
e uma descrição simplificada para iniciar o entendimento dos exemplos didáticos
na sequência.
Quadro 4 – Exemplos de propriedades gerais do CSS
TEXTO: BORDAS:
font-size: tamanho da letra. border-style: tipos de linhas (pontilhada,
text-transform: opções de maiúscula ou dupla, tracejada).
minúsculas. border-(top/right/bottom/left): identifica
lateral da borda a ser alterada.
text-align: alinhamento de texto com relação
as laterais. Border-radius: arredondamento do canto da
borda.
font-family: tipo de fonte de letra a ser
utilizada (Arial, Times New Roman). Border: atalho que pode configurar várias
características das bordas numa única
propriedade.
CORES: ESPAÇAMENTO:
background-color: cor do fundo. margin-(top/right/bottom/left): indica o
color: cor do texto. espaço externo do elemento.
padding-(top/right/bottom/left): indica o
espaço interno ao elemento.
5
Para alterar algumas das propriedades, pode-se utilizar como seletor um
elemento HTML já existente ou pode-se criar um termo específico. Esse termo
deve estar associado posteriormente a um elemento HTML dentro do
documento, usando os atributos “id=” ou “class=”, como será visualizado nos
próximos exemplos.
No Quadro 5, temos um exemplo de várias das propriedades listadas no
quadro anterior (Quadro 4) sendo aplicadas no mesmo seletor.
Quadro 5 – Aplicação de diferentes propriedades em um seletor
a) b)
<style>
p{
font-size: 16px;
border: 2px dashed brown;
color: blue;
background-color: lightgray;
}
</style>
A mesma sequência de propriedades apresentadas no Quadro 5 pode ser

aplicada em uma tag <h1> ou num bloco com <div>. Para que a formatação
possa ser aplicada de uma maneira mais flexível, podemos colocar um termo no
lugar do seletor p do Quadro 5 e utilizar um atributo no elemento que precisarmos
formatar. Veja o novo exemplo no Quadro 6.
Quadro 6 – Seletor CSS utilizado no atributo class=
a. configuração do CSS b. Aplicação nos elementos c. Resultado

<style> <p class='quadroAula'>
.quadroAula { Aula de CSS
font-size: 16px; </p>
border: 2px dashed brown; <p>
color: blue; Elemento “p” normal
background-color: lightgray; </p>
} <h1 class='quadroAula'>
</style> Aula de CSS
</h1>
No exemplo do Quadro 6 temos alguns pontos a considerar:
6
a. o seletor agora não é o nome de uma tag HTML, mas sim um termo
“.quadroAula” que poderá ser aplicado a vários tipos diferentes de tags;
b. o termo usado como seletor tem um “.” no início, indicando que poderá ser
aplicado com um atributo “class=’quadroAula’”;
c. somente o elemento <p> com o atributo class foi formatado, o outro
elemento <p> não;
d. o elemento <h1> foi formatado, mas manteve o negrito original, pois nas
propriedades aplicadas não havia nenhuma que alterava o estilo da fonte.
Em alguns casos, será preciso aplicar um grupo de propriedades CSS em

um grupo de elementos, de maneira que todos sejam envolvidos pela
formatação. Esse é o caso de utilizar a tag de bloco <div> com o atributo de
formatação desejado, como pode ser visto no Quadro 7.
Quadro7 – Aplicação de CSS em bloco de elementos
a) b) c)
<style> <div class='quadroAula'>
.quadroAula { <p> Elemento "p"

independente.</p>
font-size: 16px;
<p> Elemento "p"
text-transform: uppercase; independente.</p>
color: white; </div>
background-color: darkgreen;
border: 3px solid black;
</style>
No Quadro 7, todos os elementos que estão dentro do bloco formado pelo

início e fechamento da tag <div> receberão a formatação aplicada pelo seletor
“quadroAula” em forma de herança. Na construção de interfaces de sistemas o
uso de um agrupador como o <div> torna mais flexível a aplicação de alguns
tipos de formatação em partes da tela sem a preocupação em identificar o tipo
de tag que será utilizado para apresentar cada informação.
7
1.2 Cascata
Até este ponto da aula, utilizamos a tag <style> na área <head> para
configurar os seletores e suas propriedades, que depois seriam aplicadas aos
elementos do documento.
Mas existem duas outras formas de incluir e alterar propriedades no
documento: importando um arquivo CSS externo, ou aplicando um atributo CSS
diretamente no elemento HTML. E todas as formas podem ser utilizadas no
mesmo documento, o que nos leva a verificar como o navegador vai tratar os
conflitos na aplicação das propriedades.
Essa característica faz parte do nome do CSS (cascade ou cascata) e se
refere a possibilidade de organizar a ordem de aplicação da formatação (CSS1,
1996).
Na Figura 1, temos um diagrama que mostra uma sequência genérica de
aplicação de formatação CSS num documento, em que as três formas são
utilizadas.
Figura 1 – Aplicação do CSS em documentos
Um exemplo de um conflito está exposto no Quadro 8. Nesse exemplo, o

mesmo seletor e a mesma propriedade, mas com valores distintos, estão
aplicados em um arquivo externo (cascata.css), no elemento <style> e no
atributo style.
8
Quadro 8 – Conflito de aplicação de CSS
a) documento HTML completo. b) arquivo “cascata.css”.

<html>
<head> p{
<title> Cascata do CSS</title> background-color: blue;
<link rel="stylesheet" href="cascata.css"> }
<style>
p{
background-color: yellow;
}
</style> c) Resultado.
</head>
<body>
<p> Linha de teste n.1</p>
<p style='background-color: gray'> Linha
de teste n.2</p>
</body>
</html>
No exemplo do Quadro 8, temos o carregamento do arquivo CSS externo

“cascata.css”, que contém a propriedade de cor de fundo azul para todos os
elementos <p>. Na sequência, o navegador identifica o tag <style>, que contém
a propriedade de cor de fundo amarelo para todos os elementos <p>. Por final,
o navegador encontra em um dos elementos <p> um atributo que contém a
propriedade de cor de fundo cinza para aquele elemento. Qual dessas
propriedades terá prioridade e vencerá a disputa? Seguindo a Figura 1, a
aplicação das propriedades vai se dando por sobreposição, sendo que a mais
próxima do elemento será a vencedora. No caso do primeiro elemento <p> do
documento, a propriedade do arquivo externo é sobreposta pela propriedade do
elemento <style> e o fundo fica amarelo. No segundo elemento <p> a
propriedade do elemento <style> também é sobreposta pelo atributo local e o
fundo fica cinza.
Apesar de facilitar o entendimento e ajudar nas primeiras montagens de
formatação CSS, esta é uma forma didática de visualizar o cascateamento de
propriedades CSS. À medida que o leitor vai se aprofundando no tema, vão
surgir outras considerações, e a especificação CSS estabelece um algoritmo que
impõe uma pontuação para cada situação até concluir qual propriedade vai ser
aplicada no final. Entra nesse cálculo a formatação incluída pelo autor do
9
documento, se a propriedade é em seletor HTML ou em uma classe ou ID, se
existe alguma hierarquia entre propriedades ou herança entre elementos
aninhados. Nas aulas práticas, quando alguma destas condições for aplicada em
um caso, ela será explicitada.
É importante destacar que, apesar de o arquivo externo ter sido
sobreposto pelas demais formas de inclusão de CSS, esta é uma das formas
mais flexíveis e práticas de aplicar a formatação CSS em sistemas, podendo
inclusive o sistema ter sua aparência totalmente remodelada sem alterar uma
linha de código, simplesmente alterando o arquivo CSS externo.
1.4 Cores
As cores têm um propósito importante na apresentação de informações

na tela, sendo uma das formas que o ser humano percebe mais rapidamente e
representa o maior percentual de captação de informação quando em
comparação com outros sentidos (Kulpa; Pinheiro; Silva, 2011), como podemos
ver pela Figura 2.
Figura 2 – Percentual de captação de informação pelos sentidos
3% 3% Paladar
4% Tato
Olfato
11% Audição
Visão - Formas
Visão - Cor
59%
20%
Fonte: Kulpa; Pinheiro; Silva, 2011.
O CSS permite configurar a cor de um elemento de diferentes formas e

com base em diferentes padrões (W3, 2020). As cores podem ser informadas
usando nomes padronizados em inglês (ex. Black, Purple, Aqua), mas pode
10
também ser uma combinação de números decimais ou hexadecimais
representando a combinação RGB (Red, Green e Blue, ou vermelho, verde e
azul). A partir do CSS3, foi incluído o esquema HSL (Hue, Saturation e Lightness
ou matiz, saturação e brilho) e com o CSS4, temos também o HWB (Hue,
whiteness e blackness ou matiz, branqueamento e escurecimento).
Em exemplos passados, foram utilizados os nomes padronizados das
cores em inglês na propriedade color e background-color para indicar a cor do
texto e do fundo da tela, respectivamente. No Quadro 9, temos um exemplo com
a utilização de combinação de vermelho, verde e azul do RGB.
Quadro 9 – Formatação de cor usando RGB
a) CSS usando RGB b) Resultado:

<style>
.rgb1 {
background-color: #FF00FF;
}
.rgb2 {
background-color: rgb(255, 0, 255);
}
.rgb3 {
background-color: rgba(255, 0, 255, 0.5);
}
</style>
No resultado do Quadro 9 (b), as linhas de teste 1 e 2 têm a mesma

tonalidade de cor, com base no valor máximo de vermelho e azul, resultando em
um tom de rosa (usando o termo em inglês, essa combinação é representada
pelo nome Fuchsia). Na linha de teste 1, a informação de vermelho e azul é
aplicada em hexadecimal sendo FF (255) o valor máximo de cada cor. Na linha
de teste 2, a combinação de cores é criada com base na função “rgb()” com o
valor em decimal, sendo o máximo 255. Na linha de teste 3, os mesmos valores
máximos de vermelho e azul, mas com o adicional de canal de transparência em
50% (0.5) com o uso da função “rgba()”, resultando numa tonalidade mais fraca
de rosa.
11
Quadro 10 – Comparação entre RGB, HSL e termo em inglês
a) funções rgb(), hsl() e termo. b) Resultado

<style>
.rgb {
background-color: rgb(255, 0, 255);
}
.hsl {
background-color: hsl(300, 100%, 63%);
}
.fu {
background-color: fuchsia;
}
</style>
Uma comparação entre o padrão RGB, HSL e o termo Fuchsia pode ser
visto no Quadro 10. Nessa comparação foi identificado visualmente o tom de cor
no padrão HSL que fosse semelhante ao padrão RGB usado no exemplo
anterior. Também foi pesquisado o termo padronizado em inglês semelhante aos
dois padrões (RGB e HSL). O resultado, no quadro 10 – (b), mostra que as
tonalidades de cores podem ser representadas e usadas na construção da
interface do sistema independente do padrão utilizado.
1.5 Tableless
O uso do CSS permite uma outra forma de posicionar as informações na

tela sem a utilização de tabelas, ainda que o modelo visual utilizado seja em
linhas e colunas. Isso pode ser feito devido a algumas propriedades que podem
alterar o fluxo que as informações podem ser dispostas na tela.
Quadro 11 – Configuração de colunas com CSS
a) Estilos: b) Aplicação:
<style> <h2> Colunas iniciando pela lateral Esquerda</h2>
.col { <p class='col'> Coluna de teste n.1</p>
float: left; <p class='col'> Coluna de teste n.2</p>
width: 25%; <p class='col'> Coluna de teste n.3</p>
padding: 5px; <p class='col'> Coluna de teste n.4</p>
margin: 0px;
box-sizing: border-box; <h2> Colunas iniciando pela lateral Direita</h2>
border: 1px solid red; <p class='col2'> Coluna de teste n.1</p>
12
} <p class='col2'> Coluna de teste n.2</p>
.col2 { <p class='col2'> Coluna de teste n.3</p>
float: right; <p class='col2'> Coluna de teste n.4</p>
width: 25%; c) Resultado:
padding: 5px;
margin: 0px;
box-sizing: border-box;
border: 1px solid blue;
}
</style>
No Quadro 11 (a), no seletor col foi feita uma divisão da largura da tela de
forma proporcional (25%) indicando que um total de 4 espaços poderiam ser
utilizados. Para distribuir os elementos na tela e eles ficassem lado a lado, foi
configurado a propriedade float indicando a ordem inicial pela esquerda left.
Assim os parágrafos com a classe col foram sendo apresentados iniciando com
o texto “Coluna de teste n.1” na lateral esquerda e os demais sendo posicionados
no lado esquerdo deste primeiro texto. Para facilitar a visualização, foi formatada
uma borda simples vermelha.
Mas, ao indicar que a largura do elemento seria 25%, qualquer pixel a
mais sendo posicionado na tela junto aos 4 parágrafos teria ultrapassado a
largura total, que é o caso da borda de 1 pixel (duas laterais com um pixel de
borda vezes os 4 parágrafos teríamos 8 pixels a mais). Para que todos esses
espaçamentos fossem utilizados pelo navegador, também no cálculo da largura
(25%) foi atribuída a propriedade de “box-sizing: border-box;”. Dessa forma, não
houve necessidade de calcular os pixels utilizados na borda ou no espaçamento
do texto na largura total das colunas.
No exemplo do Quadro 11 também é apresentada a propriedade float com
o valor right, indicando que a disposição dos elementos iniciaria pela lateral
direita. Isso pode ser comprovado pela ordem que foram inseridos os elementos
de parágrafo que estavam com a classe “col2”. Ficaram ao contrário dos
elementos da classe col acima.
13
Essa forma de posicionar os elementos e criar a visão de colunas e linhas
através do CSS é mais flexível e é processada pelos navegadores de forma mais
rápida. Conforme a versão do CSS disponível no navegador, outras formas de
posicionamento são liberadas para facilitar a diagramação da interface.
TEMA 2 – RESPONSIVE WEB DESIGN (RWD)
Com a proliferação de diferentes tipos de dispositivos conectados a uma

rede e com navegadores de internet pré-instalados, as telas de páginas e
sistemas web puderam ser acessadas em vários equipamentos: smartphones,
TVs, notebooks, tablets, computadores ou displays embutidos em aparelhos.
Mas ao disponibilizar um navegador em um aparelho com uma tela
pequena, as páginas acessadas nem sempre ficavam no formato idealizado pelo
autor da página e muitas vezes as informações ficavam deslocadas e confusas,
sem o visual atrativo que tinha sido cuidadosamente elaborado.
O conceito de projeto web responsivo está associado ao desenvolvimento
de interfaces web que sejam adaptáveis a diferentes tamanhos de telas, e o
termo RWD – Responsive Web Design tendo sido criado em 2010 por Ethan
Marcotte (MDN Web Docs Mozilla, 2021).
Segundo Almeida e Monteiro (2017), a criação de uma interface
responsiva deve incluir:
a. a possibilidade de os itens distribuídos na tela se adaptarem à resolução

do dispositivo;
b. as imagens disponibilizadas na página devem poder ser redimensionadas
conforme o tamanho da tela;
c. Adaptar o tamanho de botões e links para que possam ser utilizados em
telas sensíveis ao toque, quando não houver teclado nem mouse
disponíveis;
d. usar sensores adicionais disponíveis nos dispositivos móveis para auxiliar
na orientação dos conteúdos.
Algumas técnicas para adaptação de elementos na tela envolvem a

utilização de unidades de largura e altura em percentuais – que já existiam em
versões antigas do HTML – e outras ferramentas que vieram com as novas
versões do CSS.
14
Um exemplo é inserir uma imagem ou uma tabela com uma largura de
100%, o que faria com que estes dois itens se adaptassem ao tamanho da tela.
Uma propriedade incluída no CSS permite também a montagem de layout
em grade (grid), que é semelhante ao uso de tabelas, mas que foi desenvolvido
com a expectativa de ser responsivo. Assim, o desenvolvedor de interfaces pode
usar esse método como alternativa ao uso de tabelas e floats, como mostrado
no Quadro 12.
Quadro 12 – Colunas com o uso de grid
a) b)
<h2> Colunas sem formatação</h2>
<style> <div class='grade-completa'>
.grade-completa { <p> Coluna de teste n.1</p>
display: grid; <p> Coluna de teste n.2</p>
grid-row-gap: 10px; <p> Coluna de teste n.3</p>
grid-template-columns: auto <p> Coluna de teste n.4</p>
auto auto auto; </div>
padding: 5px; <h2> Colunas formatadas</h2>
border: 1px solid red; <div class='grade-completa'>
} <p class='col-grade'> Coluna de teste n.1</p>
.col-grade { <p class='col-grade'> Coluna de teste n.2</p>
background-color: lightgray; <p class='col-grade'> Coluna de teste n.3</p>
padding: 5px; <p class='col-grade'> Coluna de teste n.4</p>
margin: 5px; </div>
border: 2px solid green;
c)
}
</style>
No exemplo do Quadro 12, temos a aplicação do “display: grid;” no seletor

grade-completa. A quantidade de colunas foi configurada para quatro com a
largura calculada automaticamente (“auto auto auto auto”). Na primeira parte do
exemplo, os parágrafos são disponibilizados um ao lado do outro, formando as
quatro colunas, bastando, para isso, estarem incluídos dentro da <div>, que tem
15
a classe grade-completa. A borda vermelha que envolve todas as colunas faz
parte da grade-completa e não permite diferenciar as colunas. Para perceber os
limites das colunas, foi aplicado na segunda parte do exemplo, em cada
parágrafo, uma classe col-grade, que possui entre as propriedades a formatação
de uma borda verde.
Mesmo com a possibilidade de utilizar unidades em percentual e cálculos
de larguras automatizados, em alguns casos o desenvolvedor ainda vai precisar
identificar em qual dispositivo o sistema web está sendo visualizado e fazer
algumas adaptações específicas. Nesses casos, havia a possibilidade de se
utilizar códigos em Javascript para retornar a resolução da tela. Com base no
CSS 3, foi introduzida uma possibilidade de tratar a resolução do aparelho
diretamente no CSS e, com isso, criar combinações alternativas de layout
responsivo e posicionamentos na tela, podendo criar conjuntos de propriedades
específicas para um tipo de resolução (W3C, 2020). Esse mecanismo foi o Media
Queries.
2.1 Media Queries
Conforme o tipo do dispositivo ou conforme a resolução da área do

navegador onde o HTML será apresentado, uma quantidade de colunas pode
deixar o conteúdo muito pequeno, ou algumas imagens não podem ser dispostas
uma ao lado da outra sem que seja habilitado o scroll horizontal do navegador.
Saiba mais
Scroll é uma pequena barra (horizontal ou vertical) que permite ao

operador deslizar lateralmente ou horizontalmente para conseguir ver a
informação que passa a área útil do navegador.
Com a criação das media queries, o CSS pode ser configurado

dinamicamente conforme a resolução do aparelho em uso. Pode também
identificar se o conteúdo vai ser exibido na tela (screen), impresso (print) ou lido
por um mecanismo de voz (speech) (MDN Web Docs Mozilla, 2019).
Usando a técnica de construção de colunas com o uso de float, o Quadro
13 mostra a condição a ser aplicada conforme a resolução da janela do
navegador.
16
Quadro 13 – Condição de aplicação do float, conforme resolução
a) b)
<style> <h2>
.col { 4 ou 2 colunas conforme resolução.
float: left;
</h2>
width: 25%;
<p class='col'> Coluna de teste n.1</p>
padding: 5px;
<p class='col'> Coluna de teste n.2</p>
margin: 0px;
box-sizing: border-box; <p class='col'> Coluna de teste n.3</p>
border: 1px solid red; <p class='col'> Coluna de teste n.4</p>
} </div>
@media screen and (max-width: 600px) {
.col {
float: left;
width: 50%;
padding: 2px;
margin: 0px;
box-sizing: border-box;
border: 1px solid blue;
}
}
</style>
No exemplo do Quadro 13, temos duas configurações para o mesmo

seletor col. Na primeira configuração, a largura está configurada para 25%. A
segunda configuração está subordinada ao media querie, em que temos uma
condição para que seja aplicada: deve ser uma tela (screen), e a janela deve ter
no máximo 600 pixels. Acima de 600 pixels a formatação volta a ser a primeira
(padrão). O resultado das duas situações está indicado no Quadro 14.
Quadro 14 – Resultado das colunas conforme dimensionamento da janela do

navegador
a. Resolução da tela do navegador maior que 600px.
17
b. Resolução da tela do navegador menor que 600px.
No primeiro resultado (a) do Quadro 14, a janela do navegador está

dimensionada para um pouco acima de 600 pixels. Ao diminuir um pouco a janela
e a resolução útil ficar abaixo (basta um pixel a menos), a configuração aplicada
é a interna da media querie. Nesse caso, em dispositivos menores como o
smartphone, apenas duas colunas (50%) serão apresentadas no navegador. Se
for necessário, outras configurações podem ser condicionadas a resolução,
assim como outras resoluções podem ser incluídas, podendo a interface do
sistema web apresentar elementos dispostos de maneira diferente em
smartphones, computadores, tablets ou TVs.
TEMA 3 – EXTENSÃO CSS
Um arquivo CSS de um sistema pode ficar extenso e com muitas

situações criadas especificamente para o projeto em questão, e outras que
podem ser usadas em outros projetos. Mas, ao criar valores específicos para a
largura de um objeto ou tamanho de fonte, por exemplo, algumas condições
podem mudar (tamanho de tela) ou mesmo em diferentes partes do sistema
podem não ser adequadas. Nesses casos, seria interessante criar alguma forma
de generalizar o trecho de CSS com algumas variáveis ou até condições.
Alguns desenvolvedores criaram mecanismos de estender o uso do CSS
para aumentar a produtividade, pois alguns arquivos ficavam grandes e difíceis
de gerenciar, e trechos, para serem reaproveitados em diferentes sistemas,
necessitavam de muitas adaptações. Alguns desses projetos funcionam como
uma linguagem simples que vai gerar o arquivo CSS padrão a ser incluído no
sistema web. Podem ser incluídos no framework Angular (Angular Styles, [S.d.])
que será visto nesta disciplina.
Duas funcionalidades que podem auxiliar a entender este mecanismo e
estão implementados nos projetos Sass, Less e Stylus exemplificados neste
tema são o uso de variáveis e mixins (Sass, [S.d.]; Less, [S.d.]; Stylus, [S.d.]).
18
Quadro 15 – Uso de variáveis
a) SASS b) LESS c) STYLUS

$largura: 25% @largura: 25%; largura = 25%
.col { .col { .col
width: $largura; width: @largura; width largura
} }
No Quadro 15 foi feita uma adaptação das propriedades usadas em

exemplos anteriores para as três ferramentas citadas, facilitando a comparação
do uso de variáveis e as diferenças na sintaxe entre elas. O uso de variáveis
pode auxiliar o desenvolvedor que precisa utilizar alguns arquivos de CSS entre
diferentes projetos. Pode criar um local separado para as variáveis e os
parâmetros que precisam ser adaptados entre os projetos.
Quadro 16 – Uso de mixins
a) SASS b) LESS c) STYLUS
@mixin texto( ) { .texto { texto( )

color: darkgray; color: darkgray; color darkgray
background-color: white; background-color: white; background-color white
font-family: Arial, Helvetica, font-family: Arial, Helvetica, font-family Arial, Helvetica,
sans-serif; sans-serif; sans-serif
} }
.alerta { .alerta { alerta
border: 1px solid red; border: 1px solid red; border 1px solid red
@include texto(); texto(); texto()
} }
.saldo { .saldo { saldo
font-size: 14px; font-size: 14px; font-size 14px
@include texto(); texto(); texto()
} }
No Quadro 16, há um exemplo de reaproveitamento de trecho de CSS

dentro do próprio contexto do sistema em desenvolvimento. Um conjunto de
propriedades que devem ser aplicadas em diferentes classes pode ser chamado
conforme a necessidade, sem a repetição dos trechos e deixando o arquivo CSS
mais limpo.
19
TEMA 4 – BOOTSTRAP
Quando um sistema precisa ser desenvolvido, a interface com o usuário

muitas vezes requer diferentes componentes visuais para destacar informações
variadas, sejam estas buscadas em bases de dados, coletadas do próprio
operador do sistema ou produzidas por meio de cálculos e combinações entre
dados.
Durante o desenvolvimento da interface do sistema, conceitos de
usabilidade como satisfação do usuário e facilidade de uso (Abran et al.,
2003) são utilizados como forma de tornar a experiência de uso do sistema mais
atrativa.
Uma das formas de facilitar o uso é a combinação de componentes
gráficos de uso comum como cartões, botões, barra deslizante, adesivos, placas,
com o uso de mouse ou telas sensíveis ao toque e janelas com diferentes
tamanhos (ver tema sobre RWD).
Um dos frameworks mais utilizados para o desenvolvimento de interfaces
web é o Bootstrap, que foi desenvolvido e utilizado internamente na empresa
Twitter e depois foi liberado na forma aberta (open-source). Além do conceito de
grade visto nos temas anteriores, possui diversos componentes gráficos prontos
para utilização no sistema e com a vantagem de ser responsivo (Bootstrap,
[S.d.]).
Como exemplo de uso do Bootstrap temos uma tela utilizada
anteriormente em nossos estudos, reapresentada na Figura 3.
Figura 3 – Tela de formulário com o uso do Bootstrap
20
Nesta tela, foram utilizados botões, listas personalizadas e opções para
cor e sombra, combinados com CSS normal.
TEMA 5 – EXEMPLO DE BOOTSTRAP
Para utilizar o Bootstrap num projeto, é necessário fazer a referência para

seu conjunto de componentes CSS e Javascript. No Quadro 17, foi utilizado o
formato de referência externa para tornar mais prático, mas outras formas podem
ser utilizadas conforme a documentação do framework.
Quadro 17 – Inclusão do Bootstrap no documento HTML
<head>
<title> página principal </title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-
beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-
giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-
beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-
ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
integrity="sha384-
lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
crossorigin="anonymous">
</head>
Com essa configuração o Bootstrap pode ser chamado por meio das
classes pré-configuradas, e no último link foi incluído também uma fonte externa
chamada Awsome, que contém muitos ícones que podem ser usados na
interface.
5.1 Componentes
Alguns componentes já utilizados em nossos estudos são apresentados

no Quadro 18. Esses componentes foram utilizados para tornar o HTML
apresentado mais estimulante. As cores utilizadas fazem parte do padrão do
Bootstrap, que indica a cor azul (a) com primary e verde (c) com success.
21
Quadro 18 – Componentes Bootstrap
a)
<img src='logo.png' style='width:100px; heigth:
50px' class='rounded-circle shadow'>
b)
<ul class='list-group'>
<li class='list-group-item bg-primary'>
Cadastro >>
</li>
Consulta
</li>
Gráficos
</li>
</ul>
c)
<div class="btn btn-success btn-icon-split btn-
sm">
<i class="fas fa-check"></i>
<input type="submit" name="grava"
value="Grava" class="btn btn-success btn-sm">
</div>
No Quadro 18 foram incluídos:
a. uma configuração na imagem do logotipo do sistema, tornando-o

arredondado e com sombra;
b. configuração de listas com fundo azul, linhas divisórias e cor de texto
branco;
c. botão com ícone de sinal de checagem com fundo verde e letra branca.
Este último item também é uma opção de formulário (submit) que coleta
e envia as informações para processamento.
5.2 Componentes adicionais
Além dos componentes utilizados anteriormente, foram listadas opções

para servir de exemplo no desenvolvimento de aplicações. No Quadro 19, mais
três opções a serem consideradas.
22
Quadro 19 – Componentes adicionais para sistemas web
a)
<div class="dropdown">
<button type="button" class="btn btn-
info dropdown-toggle" data-
toggle="dropdown">
Menu principal
</button>
<div class='dropdown-menu'>
<h1 class='dropdown-header'>
Opções:</h1>
<a class='dropdown-item'
href='/item1.html'> Cadastro </a>
href='/item2.html'> Consulta </a>
href='/item3.html'> Gráficos </a>
<div class="dropdown-divider"></div>
href='/sobre.html'> Sair...</a>
</div>
b)
<div class="alert alert-danger alert-
dismissible">
<button type="button" class="close" data-
dismiss="alert">×</button>
<strong>Atenção!</strong> O login e
senha não conferem!!
</div>
c)
<button type="button" class="btn btn-
primary">
Clientes faturados <span class="badge
badge-light">47</span>
</button>
Na opção (a), temos um menu dinâmico que lista as opções ao ser clicado.
É muito usado em interfaces para mostrar opções do usuário ou de rápido
acesso. Na opção (b), um quadro dinâmico que será fechado e liberado o espaço
ocupado ao clicar no x do canto superior direito. E, na opção (c), um botão que
pode dar acesso a um relatório do sistema, mas que também informa um dado
23
numérico dentro do próprio botão, permitindo o usuário avaliar antes se precisa
ou não clicar no botão com base na informação adicional.
Na Figura 4, um exemplo da aparência de um conjunto de abas dinâmicas
que mostram conteúdo diferente ao serem clicadas. Cada aba mostra uma tabela
com informações de Faturas pagas ou Faturas em aberto.
Figura 4 – Abas dinâmicas
No Quadro 20, temos o código HTML usado na criação de abas de

conteúdo da Figura 4.
Quadro 20 – Criação de abas dinâmicas
<ul class="nav nav-tabs" role="tablist">

<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#pago">Faturas pagas</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#aberto">Faturas em aberto</a>
</li>
</ul>
<div class="tab-content">
<div id="pago" class="container tab-pane active"><br>
<h3>FATURAS PAGAS</h3>
<table class='table table-striped'>
<tr><td>Fornecedor</td><td>Valor</td><td>DT pagto</td></tr>
<tr><td>Empresa de Alcool Gel Ltda</td><td>2.560,00</td><td>22/06/2020</td></tr>
24
<tr><td>Transportes SA</td><td>1.680,00</td><td>16/11/2020</td></tr>
</table>
</div>
<div id="aberto" class="container tab-pane fade"><br>
<h3>FATURAS EM ABERTO </h3>
<table class='table table-striped'>
<tr><td>Fornecedor</td><td>Valor</td><td>DT vencto</td></tr>
<tr><td>Industria de cimentos SA</td><td>8.150,00</td><td>14/03/2021</td></tr>
</table>
</div>
</div>
</div>
No Quadro 20, também é apresentada a configuração das tabelas usando

classes específicas do Bootstrap para tabelas (bordas e fundo listrado). Ao clicar
em uma aba, o conteúdo de uma das tabelas torna-se visível para o usuário e
este poderá interagir.
FINALIZANDO
Nesta aula, foram apresentados os mecanismos utilizados para a

formatação visual das interfaces de sistemas web. Junto com os aspectos
técnicos da apresentação visual foi incluído um conceito presente na arquitetura
dos sistemas web atuais: responsividade.
No conjunto de ferramentas, o CSS é uma importante base para a
construção das telas de sistemas e, mesmo que o desenvolvedor utilize
posteriormente um framework com componentes prontos como o Bootstrap, vai
precisar conhecer como o CSS funciona para conseguir integrar as diversas
bibliotecas e frameworks utilizados no desenvolvimentos de sistemas e
aplicativos.
Para melhorar a produtividade no gerenciamento de extensos grupos de
códigos CSS, também foram expostas nesta aula algumas ferramentas que
convertem algumas extensões da sintaxe do CSS para um arquivo CSS puro,
aproveitando os recursos de variáveis e de reaproveitamento de código.
25
REFERÊNCIAS
ABRAN, A. et al. Usability meanings and interpretations in ISO standards.

Software quality journal, v. 11, n. 4, p. 325-338, 2003.
ALMEIDA, F.; MONTEIRO, J. The Role of Responsive Design in Web

Development. Webology, v. 14, n. 2, 2017.
ANGULAR. Angular workspace configuration. Angular, [S.d.]. Disponível em

<https://angular.io/guide/workspace-config#styles-and-scripts-configuration>.
Acesso em: 10 mar. 2021.
BOOTSTRAP. Disponível em:

<https://getbootstrap.com/docs/5.0/about/overview/>. Acesso em: 10 mar. 2021.
CSS1. Cascading Style Sheets, level 1. CSS1, [S.d.]. Disponível em

<https://www.w3.org/TR/CSS1/>. Acesso em: 10 mar. 2021.
KULPA, C. C.; PINHEIRO, E. T.; SILVA, R. P. A influência das cores na

usabilidade de interfaces através do design centrado no comportamento cultural
do usuário. Perspectivas em Gestão & Conhecimento, v. 1, n. 1, p. 119-136,
2011.
LESS. Disponível em: <http://lesscss.org/>. Acesso em: 10 mar. 2021.
MDN WEB DOCS MOZILLA. Referência de CSS. Mozilla, 24 set. 2019.

Disponível em <https://developer.mozilla.org/pt-
BR/docs/Web/CSS/CSS_Reference>. Acesso em: 10 mar. 2021.
_____. Responsive design. Mozilla, 3 mar. 2021. Disponível em

<https://developer.mozilla.org/en-
US/docs/Learn/CSS/CSS_layout/Responsive_Design>. Acesso em: 10 mar.
2021.
SASS. Sass – CSS with superpowers. Sass, [S.d.]. Disponível em <https://sass-

lang.com/guide>. Acesso em: 10 mar. 2021.
STYLUS. Disponível em <https://stylus-lang.com/>. Acesso em: 10 mar. 2021.
W3. Standards. W3, [S.d.]. Disponível em <https://www.w3.org/standards/>.

Acesso em: 10 mar. 2021.
_____. CSS Color Module Level 4. W3, 12 nov. 2020. Disponível em

<https://www.w3.org/TR/css-color-4/>. Acesso em: 10 mar. 2021.
26
W3C. Media Queries Level 5. W3C, 31 jul. 2020. Disponível em:
<https://www.w3.org/TR/mediaqueries-5/>. Acesso em: 10 mar. 2021.
27

Aula 2

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Aula 2

Enviado por

Direitos autorais:

Formatos disponíveis

FERRAMENTAS DE

Prof. Yanko Costa

Nesta aula, vamos apresentar uma tecnologia complementar ao HTML. O

TEMA 1 – CASCADING STYLE SHEETS (CSS)

Com o propósito de melhorar a estética dos documentos HTML, que

1.1 Sintaxe básica

Para aplicar a formatação ao documento HTML é necessário especificar

Quadro 1 – Seletor no CSS

No Quadro 2 (a) é exibido o documento HTML completo, trazendo a tag

Quadro 2 – HTML completo de aplicação do CSS em H1

Com o CSS todas as características do elemento podem ser alteradas,

Quadro 3 – Eliminando as diferenças entre as tags <p> e <h1>

Existem diversas propriedades que podem ser aplicadas em textos,

Quadro 4 – Exemplos de propriedades gerais do CSS

Quadro 5 – Aplicação de diferentes propriedades em um seletor

A mesma sequência de propriedades apresentadas no Quadro 5 pode ser

Quadro 6 – Seletor CSS utilizado no atributo class=

a. configuração do CSS b. Aplicação nos elementos c. Resultado

No exemplo do Quadro 6 temos alguns pontos a considerar:

Em alguns casos, será preciso aplicar um grupo de propriedades CSS em

Quadro7 – Aplicação de CSS em bloco de elementos

<style> <div class='quadroAula'>

.quadroAula { <p> Elemento "p"

border: 3px solid black;

No Quadro 7, todos os elementos que estão dentro do bloco formado pelo

Figura 1 – Aplicação do CSS em documentos

Um exemplo de um conflito está exposto no Quadro 8. Nesse exemplo, o

a) documento HTML completo. b) arquivo “cascata.css”.

No exemplo do Quadro 8, temos o carregamento do arquivo CSS externo

As cores têm um propósito importante na apresentação de informações

Figura 2 – Percentual de captação de informação pelos sentidos

Fonte: Kulpa; Pinheiro; Silva, 2011.

O CSS permite configurar a cor de um elemento de diferentes formas e

Quadro 9 – Formatação de cor usando RGB

a) CSS usando RGB b) Resultado:

No resultado do Quadro 9 (b), as linhas de teste 1 e 2 têm a mesma

a) funções rgb(), hsl() e termo. b) Resultado

O uso do CSS permite uma outra forma de posicionar as informações na

Quadro 11 – Configuração de colunas com CSS

TEMA 2 – RESPONSIVE WEB DESIGN (RWD)

Com a proliferação de diferentes tipos de dispositivos conectados a uma

a. a possibilidade de os itens distribuídos na tela se adaptarem à resolução

Algumas técnicas para adaptação de elementos na tela envolvem a

Quadro 12 – Colunas com o uso de grid

No exemplo do Quadro 12, temos a aplicação do “display: grid;” no seletor

2.1 Media Queries

Conforme o tipo do dispositivo ou conforme a resolução da área do

Scroll é uma pequena barra (horizontal ou vertical) que permite ao

Com a criação das media queries, o CSS pode ser configurado

No exemplo do Quadro 13, temos duas configurações para o mesmo

Quadro 14 – Resultado das colunas conforme dimensionamento da janela do

a. Resolução da tela do navegador maior que 600px.

No primeiro resultado (a) do Quadro 14, a janela do navegador está

TEMA 3 – EXTENSÃO CSS

Um arquivo CSS de um sistema pode ficar extenso e com muitas

a) SASS b) LESS c) STYLUS

No Quadro 15 foi feita uma adaptação das propriedades usadas em

Quadro 16 – Uso de mixins

a) SASS b) LESS c) STYLUS

@mixin texto( ) { .texto { texto( )

No Quadro 16, há um exemplo de reaproveitamento de trecho de CSS

Quando um sistema precisa ser desenvolvido, a interface com o usuário

Figura 3 – Tela de formulário com o uso do Bootstrap