Texto Aula 2

10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB
FERRAMENTAS DE
DESENVOLVIMENTO WEB
AULA 2
Prof. Yanko Costa
https://conteudosdigitais.uninter.com/libraries/newrota/?c=/gradNova/2021/analiseDesenvSistemas/ferramentasDesenvWeb/a2 1/28
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 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
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
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>
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 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
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
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=
No
exemplo do Quadro 6 temos alguns pontos a considerar:
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.
Quadro 7 – Aplicação de CSS em

bloco de elementos
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.
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.
Quadro 8 – Conflito de aplicação

de CSS
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 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
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 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
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.
Quadro 10 – Comparação entre RGB,

HSL e termo em inglês
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
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.
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.
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
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
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.
Quadro 13 – Condição de
aplicação do float, conforme resolução
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
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.]).
Quadro 15 – Uso de variáveis
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
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.
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
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
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.
Quadro 18 – Componentes Bootstrap
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.
Quadro 19 – Componentes
adicionais para sistemas web
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
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
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.
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.
W3C. Media
Queries Level 5. W3C, 31 jul. 2020. Disponível em:
<https://www.w3.org/TR/mediaqueries-5/>. Acesso em:

10 mar. 2021.

Texto Aula 2

Enviado por

Dados do documento

Descrição original:

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

Texto Aula 2

Enviado por

Direitos autorais:

Formatos disponíveis

10/09/2021 16:12 UNINTER - FERRAMENTAS DE DESENVOLVIMENTO WEB

Prof. Yanko Costa

Nesta aula, vamos apresentar uma

utilizando essa tecnologia.

Durante esta aula, aprofundaremos o

com o HTML para

Também serão verificadas algumas formas de adaptação dessas

dispositivo que será utilizado para executar o

TEMA 1 – CASCADING STYLE SHEETS (CSS)

Com o propósito de melhorar a

confortáveis, em 1996 foi implementado o

da parte estética (CSS, 2020).

Antes do CSS, e com base no HTML

no HTML 3.2, um atributo bgcolor na tag <body>

Com a implantação dessas folhas de

cores, definir fontes

aos componentes HTML, trazendo a oportunidade de criar documentos mais ricos no

e mais práticos na formatação de um conjunto muito grande de

Com base nessa versão do HTML

arquivo separada, a manutenção e a alteração visual de um documento poderiam

interferência na informação e sua classificação, bastando

1.1 SINTAXE BÁSICA

Para aplicar a formatação ao

uma tag HTML existente, ou um nome novo que será utilizado

elementos HTML. O Quadro 1 expõe a sintaxe básica

serem digitados na mesma linha (a)

de referência não encontrada..

Quadro 1 – Seletor no CSS

inserir um elemento CSS que será usado em todos os elementos

documento. Os demais elementos não são

filtro de pesquisa que

texto para azul em cada H1 que é encontrado.

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

mudança, o elemento perca os atributos que ele normalmente possui e

demais. Veja o exemplo no quadro 3 –. Nesse exemplo, em (a) temos

elementos <p> e <h1>. Depois,

estão com o mesmo tamanho (16 pixels) e

formulários e imagens. As mesmas características que podem ser aplicadas na

publicações impressas, usando um bom editor de texto, podem ser

HTML, tornando a interface de um sistema com algo grau

configurar bordas duplas laterais, sombras,

Numa situação extrema, um alerta de

caixa com fundo vermelho,

movimento. Esse alerta poderá ficar na frente da tela do sistema,

alguma parte da tela com o mouse.

Nesta aula, serão vistas algumas

pois são muitas e com diferentes variações de valores na aplicação.

fontes de consulta sobre as propriedades existentes

desenvolvedora do navegador Firefox (Mozilla, 2020).

Uma sugestão para aprofundar o

aplicação. Assim o leitor vai experimentando formas

CSS e aumentando seu repertório.

No Quadro 4 foi criada uma lista

um elemento HTML dentro do documento, usando os

No Quadro 5, temos um exemplo de

(Quadro 4) sendo aplicadas

flexível, podemos colocar um

elemento que precisarmos formatar. Veja o novo exemplo no Quadro 6.

Quadro 6 – Seletor CSS utilizado

a. o seletor agora não é o nome de uma tag HTML, mas

b. o termo usado como seletor tem um “.” no início,

com um atributo “class=’quadroAula’”;