DESIGN PARA WEB - CAP 2

Prévia do material em texto

11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 1/51
DESIGNDESIGN PARA PARA WEBWEB
Me. Paulo Sérgio Pádua de Lacerda
IN IC IAR
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 2/51
introdução
Introdução
Nesta unidade, você será apresentado(a) aos conceitos básicos de uma
página HTML5 e à integração com as folhas de estilo. O Tópico I traz o
conceito inicial da estrutura de uma página web, apresentando, em formas
de camadas, o correto posicionamento do HTML e do código CSS. O item
1.1 apresenta os fundamentos da folha de estilo (CSS). Em seguida, o item
1.2 ilustra a associação das folhas de estilos com o documento HTML. Nesse
tópico, será apresentada a   associação de um arquivo CSS a um arquivo
HTML. Já no Tópico 2.0, fundamentos de tableless serão apresentados.
Tabless é o conceito de organizar os elementos sem o recurso da tabela.
Formulário é uma estrutura-chave numa página web, pois é por meio de
um formulário que dados são inseridos num sistema web. O Tópico III
aborda o assunto fazendo referência à estilização com aplicação de CSS. Por
último, o Tópico IV apresenta o uso de CSS na construção de sites com
responsividade, ou seja, para a diversidade de telas existentes de diferentes
dispositivos, como smartphones e tablets.
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 3/51
Uma página web é estruturada utilizando a linguagem de marcação HTML5.
Essa linguagem é baseada em princípios do Hyper Text Markup Language
(HTML). Hipertexto é todo texto inserido para web e que tem como principal
característica a possibilidade de se interligar a outros documentos da web
em uso por meio de links presentes na página. “Todo e qualquer texto
visualizado numa página web é um hipertexto, assim como vídeos, grá�cos,
sons e conteúdo não textuais em geral são denominados hipermídia”
(SILVA, 2015, p. 22).
Porém, o HTML é uma linguagem exclusivamente de marcação de textos e
estruturação de conteúdo. Não é função do HTML fornecer informações ao
navegador sobre a apresentação dos elementos de uma página. Toda a
parte visual do site, como cores, efeitos em imagens, posicionamento,
tamanhos e estilos de fonte, �ca a cargo das folhas de estilos. A Figura 2.1, a
seguir, ilustra, em forma de camadas, o posicionamento do HTML5 e as
folhas de estilo. O usuário, então, visualiza a página com toda a
Estrutura WebEstrutura Web
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 4/51
apresentação visual que é programada, ou seja, a página conforme se
apresenta.
A visão da camada do usuário é um site interativo, visualmente confortável
e dinâmico. Por essa razão, os conceitos de aplicação de folha de estilo são
primordiais para o desenvolvimento do design de telas. As folhas de estilos
são primordiais nos dias atuais, por trazem muitos benefícios para o
desenvolvimento de sites web.
Noções Básicas de CSS3
Uma folha de estilo consiste, em regras aplicadas, das tags da linguagem de
marcação HTML, nas quais pode-se de�nir con�gurações como tamanho de
fonte, cores, estilos de imagens e posicionamento dos elementos na tela do
navegador. Assim, um documento web pode ser dividido em duas partes:
sua estrutura e seu estilo.
Figura 2.1 - Visão em camada do HTML e folha de estilo 
Fonte: Elaborada pelo autor.
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 5/51
O conteúdo fornece as informações a serem apresentadas e o estilo de�ne
como as informações são apresentadas. O estilo, em inglês, é chamado de
Cascading Style Sheets (CSS), ou folha de estilos, em português. O CSS é uma
recomendação do World Wide Web Consortium (W3C); isso signi�ca que
todos os membros do W3C (incluindo todos os principais fabricantes de
navegadores) concordaram em apoiá-lo em seus produtos (W3C…, 2018). O
CSS tornou-se primeiro um W3C, recomendação em 1996 (chamado CSS 1),
e houve uma atualização signi�cativa em maio de 1998 (chamada CSS2).
Porém, uma evolução de novos conceitos foi inserida na CSS2, criando o
CSS3. Com o surgimento do CSS3, a folha de estilo torna-se um elemento
mais poderoso para o designer web (KALBACH, 2009). O Quadro 2.1, a
seguir, ilustra algumas funcionalidades possíveis do uso de CSS3.
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 6/51
Quadro 2.1 -Funcionalidades do CSS3
Fonte: Elaborado pelo autor.
Com o uso cada vez maior da web por uma grande variedade de
dispositivos, há uma necessidade de instalações de per�l em especi�cações
como CSS, para que um dispositivo com capacidades limitadas possa
suportar um subconjunto consistente, ou seja, que possa ser visualizado
Funcionalidades
Selecionar Primeiro e Último Elementos
Selecionar Elementos Especí�cos de um Determinado Grupo de
Elementos
Gradiente em Textos e Elementos
Bordas Arredondadas
Sombras em Texto e Elementos
Manipulação de Opacidade
Controle de Perspectiva
Animação
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 7/51
em dispositivos como telefones móveis, PDA, televisores etc. Observe a
Figura 2.2, a seguir:
Basicamente, a sintaxe da regra CSS é bem simples: um seletor e uma ou
mais declarações. Uma declaração é composta de uma propriedade, um
valor. Veja a �gura a seguir:
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 8/51
Um seletor representa a tag HTML descrita no documento web como h1, p,
u, td, body, nav, link, img etc. A propriedade faz referência às propriedades
da tag HTML, como cor, tamanho, efeito (negrito, itálico), posicionamento e
sobreposição. Por último, o valor faz referência aos valores imputados às
propriedades com a cor (vermelho, amarelo, azul), tamanho (12pt, 10%,
12em) e posicionamento (left, right). A Figura 2.4, a seguir, ilustra exemplos
de uso de CSS num documento web.
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 9/51
Pode-se notar, na Figura 2.4, o uso de aplicação nos seletores (body, p, h1).
Para o selector body foi utilizada a propriedade de cor de fundo
(background-color) e o valor lightblue. Já para o seletor h1, foram aplicadas
as propriedades: cor de texto com valor white (branco) e alinhamento de
texto (text-align) com valor centralizado (center). Por �m, no exemplo, há o
uso de duas propriedades para o seletor de parágrafo (p). A primeira
determina o tipo de fonte (font-family); e a segunda, o tamanho da fonte
(font-size). Nota-se que, como no HTML, as folhas de estilos fazem menção à
Língua Inglesa.
O seletor representa uma estrutura. “Essa estrutura é usada como uma
condição para determinar quais elementos de um grupo de elementos
serão formatados” (MILETTO; BERTAGNOLLI, 2014, p. 75). Tais elementos
podem ser encadeados, agrupados ou complexos.
a) Seletores podem ser encadeados: div p strong a { color: red; }, ou seja,
este seletor formata o link (a), que está dentro de um strong, que está
dentro de P, o qual, por sua vez, está dentro de um DIV.
Figura 2.4 -Exemplo de regra de CSS
Fonte: Elaborada pelo autor.
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 10/51
b) Seletores também podem ser agrupados: strong, em, span { color: red; },
ou seja, todos os seletores receberam a mesma formatação (nesse caso, cor
vermelha).
c) Seletores complexos:  h1+p { color:red;} , ou seja, todos os seletores após
 o h1 sofreram a formatação de cor vermelha.
O Quadro 2.2, a seguir, ilustra alguns dos exemplos de seletores complexos:
Quadro 2.2 - Seletores complexos
Fonte: Elaborado pelo autor.
O W3C é o órgão regulamentadordos padrões WEB. Padrões sobre
seletores complexos podem ser encontrados no site do W3C. Os seletores
são o elo entre as tags HTML e as folhas de estilos.
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 11/51
Os seletores podem ser especí�cos ou personalizados, não usando
elementos-padrão HTML. Esses seletores de�nidos pelo usuário podem ser
divididos em dois: identi�cador e classe. Ambos os seletores, identi�cador
ou classe, podem representar um banner, um rodapé, uma imagem, um
menu etc.
O seletor identi�cador é representado por um c-sharp(#) e um nome
determinado pelo desenvolvedor.
                                                     o #menu , #principal, #magens
O seletor identi�cador tem como característica padrão somente aparecer
uma única vez dentro de uma página web. Outra maneira de representar
um seletor é criando uma classe. Um seletor tipo classe é formado por um
ponto (.) e um nome determinados pelo desenvolvedor. Por exemplo:
.centro, .principal, .corpo. O Quadro 2.3, a seguir, ilustra exemplos de uso
de seletores identi�cadores e seletores classes:
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 12/51
Quadro 2.3 - Exemplos de seletores identi�cadores e classes
Fonte: Elaborado pelo autor.
Seletores também podem conter pseudoclasses e pseudoelementos. Esses
seletores são baseados em elementos não presentes na linguagem de
marcação HTM5 (MILETTO; BERTAGNOLLI, 2014).
Uma pseudoclasse é usada para de�nir o estado especial de um elemento.
Por exemplo, ela pode ser usada para:
1) Estilizar um elemento quando um usuário utiliza mouses sobre ele.  
2) Estilos visitados e links não visitados, de forma diferente.
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 13/51
3) Estilizar um elemento quando ele obtém o foco.
A estilização por pseudoclasse pode ser representada de forma genérica
pelo exemplo da sintaxe genérica de um pequeno trecho de código CSS,
demonstrando a aplicação a seguir:
Sintaxe: selector:pseudo-class {  property:value;}
Um bom exemplo de uso de pseudoclasse são os links. Links possuem
quatro estágios (estados): o link em si (a:link); quando o mouse está sobre
ele (a:hover); quando o link já foi visitado (a:visited); e, por último, quando o
link está ativo (a:active). O exemplo a seguir ilustra o uso dessa aplicação:
Exemplos: a:link {  color: #FF0000;} ;  a:hover { color: blue;};
a:visited{color:yellow;} , a:active { color:green;}.
As folhas de estilos podem ser a subdivididas em algumas categorias. Essas
categorias possuem propriedades, e cada propriedade possui diferentes
valores, sendo relativa a elementos de composição de uma página web,
como textos, bordas, margens etc. O Quadro 2.4, a seguir, ilustra as
categorias relativas a CSS:
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 14/51
Categoria Propriedade CSS Exemplo
Textos
color
text-align
text-decoration
text-transform
line-height
h1 {
  color: green; text-
decoration:underline;
text-align:center; text-
transform:
uppercase;line-height:
0.8;
 
}
Borda
dotted, dashed,  solid
double
border-color
border-width
 
 p {
  border-style: double;
border-color: blue;
border-width:2px;
}
Margens
Margin
(left,top,bottom,right)
h1 {
  margin: 0 0 50px 0;}
Padding Margin
(left,top,bottom,right)
p {
  padding: 0 0 50px 0;}
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 15/51
Quadro 2.4 - Propriedades CSS
Fonte: Elaborado pelo autor.
Fonte
font-family
font-size
font-weight;
font-style
p {
  font-style: normal;
font-family:arial; font-
weight:bold; font-size: 
2em;
}
Posicionamento
Static, relative, �xed,
absolute
 
div{
  position: static;}
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 16/51
O Quadro 2.4 ilustra as propriedades mais usadas na estilização de efeitos
CSS aplicados numa página web. O quadro é dividido por categorias (coluna
1), seguido de uma coluna dois, em que estão listadas as opções de valores
como linha de posicionamento, cujos valores são static, relative, absolute e
�xed. Por �m, a última coluna apresenta exemplos de código aplicados a
seletores HTML.
Cores podem ser escritas de diversas maneiras, como pelo nome da cor em
inglês ("red"), por seu valor hexadecimal ("#�0000") ou por seu valor em
RGB "rgb(255,0,0)".
“Valores em CSS para tamanho de fonte podem ser descritos em percentual
(%), em (1em equivale a 16px) ou em pixels (px). A fórmula equivalente de
pixels para em é (pixels /16 =  em). Exemplo 16pixels/16 = 1 em” (MILETTO;
BERTAGNOLLI, 2014, p. 75).
As propriedades margin e padding são, muitas vezes, não entendidas com
relação ao seu uso. Margin é usada para distanciar os elementos de seus
margins (esquerda, direita, superior ou inferior) ou determinar uma
distância entre elementos dentro de uma página. Padding é a distância do
elemento dentro de um section ou div, ou seja, a distância do elemento
com relação à sua margem interna, conforme ilustra a Figura 2.5, a seguir:
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 17/51
A regra CSS, como já mencionamos, é aplicada ao elemento HTML de
diversas formas. Essa integração será apresentada no próximo tópico.
Integração das Tags do HTML5 com
CSS3
As folhas de estilo podem ser vinculadas ao documento HTML5 de três
distintas maneiras:
Estilos INLINE
Esse método é direto e muito simples de ser usado. Os estilos CSS são
aplicados diretamente na tag HTML5 por meio da opção style. A regra é
diretamente escrita dentro da tag de abertura do elemento de marcação de
texto a ser estilizado. Um exemplo de formatação CSS inline é ilustrado na
Figura 2.6, a seguir:
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 18/51
O método inline gera um grande problema: a di�culdade de manutenção
dos efeitos. Alguns dos princípios de uso de CSS são: o reúso, ou seja, o CSS
não pode ser aplicada em outra página; e também o da centralização, ou
seja, poder controlar o estilo diretamente de um único arquivo. Com esse
formato, todas as páginas da aplicação teriam aplicações da regra
independentes.
Estilos INCORPORADOS
Nesse estilo, as regras são escritas no próprio documento, porém na parte
superior do documento, podendo ser aplicadas em toda a página. As regras
�cam entre as tags <style> dentro da área <head>. Um exemplo de
formatação CSS inline é ilustrado na Figura 2.7, a seguir:
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 19/51
Esse método possui uma vantagem em relação ao método anterior: o
agrupamento de toda a regra na parte superior do documento. Com
relação ao inline, este traz uma melhoria na utilização. Porém, ainda
permanece com o problema de manutenção, pois uma aplicação com 20
documentos (páginas web) interligados conteria 20 folhas de estilo
incorporadas a cada página do documento.
Figura 2.7 - Aplicação do CSS INCORPORADO
Fonte: Elaborada pelo autor.
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 20/51
Não seria muito sensato, toda vez que se fosse alterar algum efeito nas
páginas, alterar página por página. A grande facilidade do uso de CSS é a
condição de ser aplicada a diversas páginas ao mesmo tempo, facilitando a
manutenção.
No HTML5, as opções rel, media e type são facultativas dentro do elemento
style; porém, para um melhor entendimento do uso da tag, sempre é bom
inserir tais opções, as quais são de�nidas por:
rel = faz referência relativo a folha de estilo;
media = faz referência a qualquertipo de mídia (tv, screen,
projection,print, handheld);
type = informa qual tipo de dado será enviado (SILVA, 2015).
Mas, de acordo com os princípios básicos de folha de estilo, reúso e
centralização  de estilos, o recurso mais apropriado é o estilo externo.
Estilo EXTERNO
Nesse estilo, toda a regra de estilo é escrita num documento externo ao
documento HTML5 e vinculada ao documento HTML5 por meio da tag
reflita
Re�ita
Quanto à imagem de mercado de um site empresarial, ela
pode ser prejudicada por um péssimo design?
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 21/51
<link>. Essa tag é inserida em toda página web dentro da área de cabeçalho
de estrutura principal do documento relativo a tag <head>. Esse estilo
externo pode ser lincado ou incorporado ao documento.
1) Estilo LINCADO: associado ao documento HTML5 por meio da tag link
(<link>) e opção href (referência de hipertexto). Essa tag �ca inserida dentro
do head (<head>) na parte superior do documento HTML5. O atributo href
da tag link aponta para a localização e para o documento com extensão
“.css”, no qual toda a regra de CSS está escrita. Um exemplo de formatação
CSS externo lincado é ilustrado na Figura 2.8, a seguir:
2) Estilo INCORPORADO: o vínculo incorporado ao documento HTML5 é
realizado por meio da tag style, e incorporado por meio da diretiva @import,
dentro da folha de estilo. Esse estilo pode, também, vincular uma folha
externa a outra folha de estilo. Mais de uma folha de estilo podem ser
importadas para dentro de uma outra folha de estilo. A declaração de
diretiva @import deve sempre vir na primeira linha da folha de estilo,
exceto quando houver uma declaração de caracterização da página
@charset “utf-8”.
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 22/51
Havendo necessidade de importação de várias folhas de estilos, elas
deverão ser importadas uma após a outra, porém antes das regras de estilo
do documento. Um exemplo de formatação CSS externo incorporada é
ilustrado na Figura 2.9, a seguir:
Com a alteração de qualquer elemento dentro de uma folha de estilo
externa, imediatamente, o efeito será aplicado a uma página ou 10 mil
páginas.
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 23/51
atividadeAtividade
O HTML possui uma variedade de elementos que compõe a estrutura de uma
página. Porém, ele determina somente a espinha dorsal na página. Cores,
tamanhos e efeitos que perceptíveis na página web são modi�cados por folha de
estilo. Indique, a seguir, a alternativa que apresenta uma maneira de incorporar
externamente uma folha de estilo numa página web:
a) In-line.
b) Em bloco
c) Por meio da tg link.
d) Usando a expressão @import.
e) Por meio da tag <style>.
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 24/51
O conceito de uso de CSS é chamado de tableless, ou seja, sem a
necessidade de usar tabelas. O elemento HTML5 table engessa uma página,
pois di�culdade a manutenção. No passado, nas primeiras páginas de
internet, layouts que eram feitos, geralmente, por meio de tabelas, mas com
o advento das folhas de estilos, �caram obsoletos devido à necessidade de
manutenção dos layouts.
Na construção de um layout para um página web, alguns elementos são
essenciais, e div: é o exemplo de bloco mais comum. O elemento de bloco
sempre começa em uma nova linha e se expande para a esquerda e para a
direita o tanto quanto for possível. Outros elementos de bloco comuns são
p e form; e agora, no HTML5, temos: header, footer, section e outros.
A propriedade display é muito importante no CSS para controlar o layout.
Cada elemento tem um valor padrão para o display, dependendo de seu
tipo. O valor padrão na maioria dos elementos é, normalmente, block ou
inline. Um elemento com valor block é chamado de elemento de nível de
Construção de TabelasConstrução de Tabelas
Utilizando HTML5 e CSS3Utilizando HTML5 e CSS3
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 25/51
bloco, ou apenas elemento de bloco. Um elemento com valor inline é
sempre chamado de elemento de linha.
De�nir a largura (width) de um elemento de bloco previne que ele se estique
para as pontas do elemento que está contido tanto para a esquerda quanto
para a direita. O mesmo acontece com a altura (height). A opção “auto”
determina as margens à esquerda e à direita em automático, para
centralizar o elemento horizontalmente, em relação a onde está contido.
É importante lembrar que a opção border pode gerar problema. Ao de�nir a
largura de um elemento, esse elemento pode parecer maior do que o
de�nido: as bordas (border) e o preenchimento (padding) vão esticar o
elemento além da largura de�nida. A sugestão é de�nir um valor de largura
menor do que o desejado, subtraindo o valor de padding e border.
Mas, com CSS3, essa informação não é mais necessária, pois pode-se usar o
conceito da propriedade chamada box-sizing. Quando é de�nido o box-
sizing border-box, em um elemento, os valores do padding e do border não
são adicionados em sua largura.
Outra propriedade CSS utilizada para o layout é o �oat. O �oat é
extremamente importante quando na construção de páginas no conceito
tabless, ou seja, sem o recurso de tabela para organização das informações
de composição do layout. O �oat é uma propriedade que traz diversos
benefícios com o tempo, numa futura alteração de layout. O �oat faz os
elementos HTML serem posicionados um ao lado do outro. Como exemplo,
podemos citar um texto ao redor de uma imagem ou áreas de categorias
(sections), uma ao lado da outra.
A propriedade clear faz o �oat perder sua função, ou seja, o clear limpa o
efeito do �oat. Na substituição das tabelas HTML por CSS, deve-se levar em
consideração o posicionamento e valores (pixels, %).  
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 26/51
Construção de Páginas de Estilo para
Tabelas HTML
O elemento table do HTML5 pode ser usado para a organização de outros
elementos dentro de uma página web. Embora o próprio W3C especi�que
criar layouts e áreas lógicas usando CSS, pode-se usar tabela estilizada com
CSS.
Por exemplo, um pequeno formulário para login pode ser organizado pelo
elemento table do HTML5. Suponha um formulário de login, conforme a
Figura 2.10, a seguir, demarcado para o entendimento do uso de tabelas:
Na �gura, o formulário de login é organizado por meio do uso de tabela
dentro do documento web. Folhas de estilos podem ser usadas para
formatar as tabelas utilizadas dentro da página web.
O código é relativo a uma tabela sem formatação CSS, ilustrada na �gura
2.11, a seguir:
Figura 2.10 - Formulário de Login
Fonte: Elaborada pelo autor.
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 27/51
Utilizando folha de estilo, pode-se aplicar formatação aos elementos da
tabela. A Figura 2.12, a seguir, ilustra o código CSS e o resultado no
navegador:
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 28/51
En�m, o uso de CSS na construção de sites é preferencialmente mais
adequado do que o uso de tabela. O conceito tableless propicia reúso de
código, bem como sua centralização, facilitando sua manutenção posterior,
principalmente em relação aos ajustes de mudança de layouts. O tópico
estudado é de extrema importância na compreensão dos conceitos sobre
design para web.
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 29/51
atividadeAtividade
O HTML possui uma variedade de elementos relacionados à criação de tabelas,
porém, no dias atuais, usar tabela em página gera problemasfuturos de
manutenção. Há o conceito de tableless que signi�ca usar conceitos de CSS para
criar tabela. Marque, a seguir, a opção que contém somente elementos e
atributos correspondentes à criação de tabela com CSS:
a) table, bgcolor, div, width.
b) div, width, height, �oat.
c) table, td, div, width.
d) tr,�oat, div, width.
e) th, height, div, width.
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 30/51
Os dados são inseridos numa aplicação web mobile por meio de
formulários. Existem diversos elementos relacionados a formulários. Um
formulário transmite os dados para o servidor web. O servidor web trata os
dados enviados pelo o formulário web e devolve para o usuário em formato
HTML (texto). Toda aplicação deve conter formulário, ao menos para
contato. Observe a �gura a seguir:
Construção deConstrução de
Formulários HTML 5 Formulários HTML 5 
e CSS3e CSS3
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 31/51
No HTML5, algumas novas tags foram inseridas. O Quadro 2.5, a seguir,
mostra as novas tags HTML5 para formulário:
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 32/51
Quadro 2.5 -Novos elementos para formulário HTML5
Fonte: Elaborado pelo autor.
A relação completa dos atributos e quais navegadores são aceitos na
construção de formulários com as novas tags semânticas web pode ser
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 33/51
encontrada no site Wufoo (THE CURRENT…, 2019).
A Figura 2.14, a seguir, ilustra um formulário HTML5 sem aplicação de CSS:
No entanto, pode-se aplicar a folha de estilo aos novos elementos HTML5
para estilizá-los num formato agradável. Exemplos de código CSS3 de
formulário HTML5 podem ser encontrados em diversos endereços
eletrônicos. Na internet, diversos tutoriais podem ser encontrados, e são
um apoio ao estudo de design para web. Porém, os formulários WEB são a
entrada de dados para qualquer site WEB, como telas de login, contato e
telas de registro.
Há necessidade de estilizar um formulário para uma melhor interatividade
com o usuário. Esses formulários são estilizados por CSS, e fundamentos de
construção de formulário com aplicações CSS serão apresentados no
próximo tópico.
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 34/51
Design e Construção de Formulários
para Web
Um formulário para web depende da necessidade do desenvolvedor com
relação aos dados. Em um formulário de contato, geralmente, há a
necessidade dos dados de contato, como nome, telefone, e-mail para
contato e, quando possível, algum campo de mensagem ou observação,
juntamente com os botões de enviar e resetar os dados do campo de
formulário (Figura 2.15).
Para um login, os campos necessários são, geralmente: nome do usuário ou
e-mail, senha e o botão de login, conforme a �gura a seguir:
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 35/51
Numa aplicação web, a funcionalidade de cadastramento é realizada por
um formulário de cadastro. Geralmente, os formulários de cadastros
contêm muitos campos relativos a informações pessoais ou pro�ssionais,
como nome, telefone, endereço, cidade, país, CPF, RG, dentre outros. A
Figura 2.17, a seguir, ilustra um formulário de cadastramento com seus
devidos campos:
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 36/51
Neste tópico, foram analisados os conceitos necessários para compreender
que toda aplicação WEB precisa interagir com o usuário. Geralmente, essa
interação ocorre por meio de formulário para registro, contato, login,
dentre outras informações. Lembre-se de que, sempre, as páginas devem
ser analisadas com base em requisitos determinados no planejamento.
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 37/51
atividadeAtividade
Formulário são usados para inserção de dados em uma página web. Como novos
recursos HTML5, algumas tags e alguns atributos foram inseridos, os quais
melhoram a interatividade com usuário. Qual item a seguir não pode ser
caracterizado como um novo atributo próprio do HTML5 para formulário?
a) number.
b) url.
c) email.
d) pattern.
e) value.
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 38/51
No mundo atual, há diversos tipos de dispositivos para acesso à internet,
como tablets, smartphone, notebooks etc. Na construção de página web,
tenha atenção para fazer com que o seu site seja visualizado por todos os
dispositivos existentes no mercado.
Construção de Construção de SitesSites
Compatíveis comCompatíveis com
Desktop Desktop e Dispositivose Dispositivos
MóveisMóveis
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 39/51
Os fatores principais são as dimensões de largura de um dispositivo. Cada
dispositivo possui largura diferenciadas de tela, e esse fator faz com que as
páginas percam qualidade no aspecto visual.
Há uma variedade muito grande de tamanhos de tela, tanto para desktop
quanto para dispositivos móveis. Considerando essa diversidade, o
StatCounter  é um bom recurso para descobrir as estatísticas mais recentes,
com base em pesquisas globais na internet. Esse site possui diversos tipos
de análise relativos a dados de uso da internet (SCREEN…, 2019).
A Figura 2.18 ilustra três tipos de dispositivos de leitura de um website:
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 40/51
A relação é dada pela resolução (em pixels) ou pela dimensão da tela (em
polegadas). Como exemplos, há diversos monitores com relações diferentes
de dimensão, como 1024 x 768, 1280 x 1024, 1920 x 1080 etc., e monitores
de diversos tipos de dimensão em polegadas, como 17”, 21”, 50” etc. As
telas menores (5”, 5.5”, 10”) fazem referência a dispositivos como tablets ou
smartphones.
Construção de Folhas de Estilo CSS3
para Compatibilidade de Telas
O uso de folha de estilo é essencial para o desenvolvimento de páginas web
compatíveis com a diversidade de telas. Sites responsivos em web design
são recursos do uso de HTM5L e CSS para redimensionar automaticamente,
ocultar, encolher ou ampliar um site, para torná-lo bom de se olhar em
todos os dispositivos (desktops, tablets e smartphones).
Algumas características de um site responsivo:
Figura 2.18 - Dimensões de dispositivos.
Fonte: scyther5 / 123RF.
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 41/51
1. Melhora a experiência do usuário: de acordo com o Google Think
Insights, se um usuário acessar sua página via dispositivo móvel e
não encontrar o que procura, há 61% de chances de ele desistir e
partir para outro site.
2. Acesso via mobile está crescendo: no Brasil, há mais de 220
milhões de celulares ativos.
3. Diminuição da taxa de rejeição: ter um site responsivo reduz a
quantidade de usuários que entram em seu site e saem sem
interação alguma (FARIAS, 2018).
Uso da tag viewport: a de�nição da viewport que dará as instruções do
navegador sobre como controlar as dimensões e o dimensionamento da
página.
Exemplo: <meta name="viewport" content="width=device-width, initial-
scale=1.0">
Imagens responsivas: são imagens que escalam bem para que caiba
qualquer tamanho do navegador usando a propriedade width com valores
em percentual.
Exemplo:  <img src="img_girl.jpg" style="width:100%;">
Diferentes imagens: o elemento <picture> permite que você de�na
diferentes imagens para diferentes tamanhos de janela do navegador.
Exemplo:
<picture><source srcset="img.jpg" media="(max-width: 600px)">
        <source srcset="img.jpg" media="(max-width: 1500px)">
        <source srcset="iimg.jpg">
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 42/51
        <img src="img.jpg" alt="Carros">
</picture>
Textos responsivos: o tamanho do texto pode ser de�nido com um  "VW "
unidade, o que signi�ca "viewport Width".
Exemplo: <h4style="font-size:12vw">Olá  Amigo</h4>
Viewport: é o tamanho da janela do navegador. 1vw = 1% da largura da
viewport. Se a viewport é 50 cm largo, 1vw é 0.5 cm.
Media Queries: é a utilização de Media Types (Quadro 2.6) com uma ou mais
expressões envolvendo características de uma média para de�nir
formatações para diversos dispositivos. O browser ou a aplicação lê as
expressões de�nidas na query. Caso o dispositivo se encaixe nessas
requisições, o CSS será aplicado.
Quadro 2.6 - Media Types
Fonte: Elaborado pelo autor.
As Media Queries de�nem condições para que o CSS seja utilizado em
cenários especí�cos. Se essas condições forem aprovadas, ou seja, se o
Mídia De�nição
all todos
handled Dispositivos de mão
print impressora
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 43/51
dispositivo de adequar a todas as condições estabelecidas na sua Media
Querie, o CSS será aplicado. Algumas características podem ser analisadas
para dispositivos, como width, height, device-width, orientation, color,
resolution e grid.
Media Query é uma técnica CSS introduzida no CSS3. Ela faz uso da regra de
@media para incluir um bloco de propriedades CSS somente se uma
determinada condição for verdadeira.
Exemplo de Media Query:
@media only screen and (max-width: 500px)  {
 body {   background-color: red;  } }    
O exemplo anterior ilustra um código que determina a cor de fundo para
um navegador, se o tamanho (largura) da página for 500 px ou inferior.
Devido à expansão do uso de dispositivos mobile, criou-se o conceito
Mobile First, que, simplesmente, faz referência a desenvolver e planejar
projetos web, desde um pequeno site até um grande sistema,
primeiramente para dispositivos móveis e somente depois para desktops e
notebooks.
Essa nova realidade faz com que os desenvolvedores façam algumas
mudanças nos códigos CSS. Ao invés de alterações nos estilos de largura,
para que essa �que menor que 768 px, altera-se o design quando a largura
�ca maior que 768 px.
        Exemplo de código extraído do site W3C:
        @media only screen and (min-width: 768px) { .col-1 {width: 8.33%;}
 .col-2 {width: 16.66%;} }
Orientações (retrato ou paisagem) podem, também, ser tratadas por meio
de Media Querie.
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 44/51
        Exemplo extraído do W3C:
@media only screen and (orientation: landscape) {  body { background-
color: lightblue;
 }}
        Independentemente do formato escolhido para criar sites responsivos,
o mais importante é o planejamento dos requisitos antes de se começar a
desenvolver qualquer aplicação web ou mobile (SOMMERVILLE, 2007). Os
requisitos são essenciais para que a aplicação tenha um sucesso garantido.
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 45/51
atividadeAtividade
Devido à expansão da rede wireless, a grande maioria da população está trocando
os dispositivos desktop para dispostos mobile, como smartphones. Há uma grande
variedade de tamanho (largura) de telas, pois in�nitos tipos de smartphones são
vendidos no mundo, com telas diferenciadas em seu tamanho (5”, 5.5”, 7” etc.).
Assinale, a seguir, a alternativa que contém a sintaxe correta para determinar
uma folha de estilo para, no máximo, o tamanho de 468” de uma tela.
a) @media only tty and (max-width: 468 px).
b) @media only print  and (min-width: 468px).
c) @media only screenand (min-width: 468px).
d) @media only print and (max-width: 468 px).
e) @media only screen and (max-width: 468 px).
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 46/51
indicações
Material
Complementar
LIVRO
Fundamentos de HTML5 e CSS3
Maurício Samy Silva
Editora: Novatec
ISBN: 978-85-7522-438-0
Comentário: Esse livro é muito interessante como
suporte para os estudos de HTML5 e CSS3. Diversos
tópicos são abordados, com exemplos ilustrativos.
Uma leitura de fácil compreensão que vale a pena
conferir!
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 47/51
FILME
Web 3.0, the movie
Ano: 2010
Comentário: O �lme de 15 minutos é uma visão geral
da web semântica, ou seja, transforma todos os dados
da web em dados estruturados, de modo a de�nir
relacionamentos entre tais dados e derivar seu
signi�cado.
Para conhecer mais sobre o �lme, acesse:
<https://techcrunch.com/2010/05/10/web-30-movie/>.
Acesso em: 22 abr. 2019.
https://techcrunch.com/2010/05/10/web-30-movie/
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 48/51
conclusão
Conclusão
Nesta unidade, você compreendeu o posicionamento do HTML5 e da folha
de estilo (CSS). As folhas de estilo foram criadas para fazerem a
apresentação da página web associada às tags HTML. O CSS tem como
princípios básicos o reúso e a centralização, para melhor fazer a
manutenção de uma aplicação web. Os desenvolvedores utilizam a folha de
estilo para criar sites que se adaptam automaticamente às variedades de
dispositivos existentes no mercado, como tablets, smartphones, desktops e
notebooks.
Esse processo de adaptação do site a diversas telas é chamado de
responsividade. Com o CSS, pode-se usar Media Queries. Por meio da linha
de programação, é possível ter layouts diferentes que se ajustam a
dispositivos diferentes.  Para isso, a análise dos requisitos do site é
fundamental, principalmente para a criação de formulário e a estilização de
tabelas. Tabelas podem ser usadas na programação visual com CSS, para a
organização dos elementos de tela, mas o conceito tableless aplicado ao CSS
ajusta-se mais adequadamente aos novos conceitos de reúso. Pode-se,
portanto, criar tabela somente usando elementos CSS. Por �m, foram
apresentados exemplos que facilitam o seu entendimento sobre programar
websites utilizando folhas de estilo.
referências
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 49/51
Referências
Bibliográ�cas
FARIAS, F. 10 motivos para você usar um design responsivo em seu site.
Resultados Digitais, 28 abr. 2018. Disponível em:
<https://resultadosdigitais.com.br/blog/site-responsivo/>. Acesso em: 22
abr. 2019.
KALBACH, J. Design de Navegação Web: otimizando a experiência do
usuário. Porto Alegre: Bookman, 2009
MILETTO, E. M., BERTAGNOLLI, S. C. Desenvolvimento de software II:
Introdução ao desenvolvimento web com HTML, CSS, JavaScript e PHP.
Porto Alegre: Bookman, 2014.
SCREEN resolutions stats worldwide. StatCounter GlobalStats, 2019.
Disponível em: <http://gs.statcounter.com/screen-resolution-stats#monthly-
201602-201702-bar>. Acesso em: 22 abr. 2019.
SILVA, M. S. Fundamentos de HTML5 e CSS3. São Paulo: Novatec, 2015.
SOMMERVILLE, I. Engenharia de Software. São Paulo: Pearson, 2007.
THE CURRENT state of HTML5 forms. Wufoo, 2019. Disponível em:
<https://www.wufoo.com/html5/>. Acesso em: 22 abr. 2019.
W3C RECOMMENDATION. Selectors Level 3. W3, 06 nov. 2018. Disponível
em: <http://www.w3.org/TR/css3-selectors/#selectors>. Acesso em: 22 abr.
2019.
IMPRIMIR
https://resultadosdigitais.com.br/blog/site-responsivo/
http://gs.statcounter.com/screen-resolution-stats#monthly-201602-201702-bar
https://www.wufoo.com/html5/
http://www.w3.org/TR/css3-selectors/#selectors
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller50/51
11/12/2019 Ead.br
https://fadergsead.blackboard.com/webapps/late-Course_Landing_Page_Course_100-BBLEARN/Controller 51/51