o uso de html5 e css3 na viabilização do design responsivo
TRANSCRIPT
UNIFEOB – CENTRO UNIVERSITÁRIO DA FUNDAÇÃO DE ENSINO OCTÁVIO BASTOS
Curso de Sistemas de Informação
O USO DE HTML5 E CSS3 NA VIABILIZAÇÃO DO
DESIGN RESPONSIVO
SAMUEL DE PAIVA MUCIN
SÃO JOÃO DA BOA VISTA, SP, 2012
SAMUEL DE PAIVA MUCIN
O USO DO HTML5 E DO CSS3 NA VIABILIZAÇÃO DO DESIGN RESPONSIVO
Trabalho de Conclusão de Curso realizado na área
de Desenvolvimento Web como requisito legal para
a obtenção do Grau de Bacharel em Sistemas de
Informação no Curso de Sistemas de Informação da
UNIFEOB – Centro Universitário da Fundação de
Ensino Octávio Bastos de São João da Boa Vista -
SP, sob orientação do Prof. João Ricardo Gomes
dos Reis.
CENTRO UNIVERSITÁRIO DA FUNDAÇÃO DE ENSINO OCTÁVIO BASTOS
SÃO JOÃO DA BOA VISTA, SP, 2012
MUCIN, Samuel de Paiva. O uso de HTML5 e CSS3 na viabilização do design
responsivo. São João da Boa Vista, SP. (Trabalho de Conclusão de Curso de
Sistemas de Informação da UNIFEOB – Centro Universitário da Fundação de
Ensino Octávio Bastos).
Orientador: Prof. João Ricardo Gomes dos Reis
DECLARAÇÃO DE APROVAÇÃO
Declaro para fins de avaliação de desempenho escolar, que o aluno Samuel
de Paiva Mucin, apresentou o Trabalho de Conclusão de Curso intitulado O uso do HTML5 e
do CSS3 na viabilização do Design Responsivo para atender às exigências da disciplina de
Trabalhos de Conclusão de Curso perante banca examinadora na UniFEOB – Centro
Universitário da Fundação de Ensino Octávio Bastos, composta pelos seguintes membros:
Prof. João Ricardo Gomes dos Reis - Orientador
Prof.
Prof.
Diante disto declaro que o referido aluno foi aprovado com a nota <nota> (<nota por
extenso>), tendo apresentado este relatório e foi aprovado.
São João da Boa Vista, 12 de Novembro de 2012.
Professor Orientador: João Ricardo Gomes dos Reis
DEDICATÓRIA
Dedico este trabalho à minha família, meu pai,
minha mãe e meus irmãos, aos meus amigos e
namorada, pessoas às quais devo grande parte do
que sou e às quais agradeço pelos esforços, não
medidos, em me apoiar.
AGRADECIMENTOS
Agradeço primeiramente a Deus pelo que sou e por me dar condições de
desenvolver este trabalho.
Agradeço aos meus amigos Marcos, Adalberto, Everton, Guilherme e Lucas, sem os
quais esses anos teriam sido muito mais complicados e sem graça.
Obrigado também aos professores que durante esses anos dedicaram horas de seu
tempo para nos atender e passar um pouco de seus conhecimentos.
Finalizo agradecendo o professor e orientador João Ricardo Gomes dos Reis por ter
aceitado me orientar neste trabalho.
”Faça ou não faça. Tentativas não há.”
Mestre Yoda - Star Wars V
RESUMO
A nova era tecnológica de dispositivos móveis tornou o desenvolvimento de
aplicações WEB mais desafiadora e complexa no sentido de atender os diversos formatos
de telas encontrados nos vários modelos de dispositivos lançados no mercado a todo o
momento. Por não haver uma correção nativa desenvolvida pelos fornecedores para
resolver o problema, a técnica de sites responsivos se tornou extremamente necessária
para que os usuários tenham a melhor experiência em navegação independente do
dispositivo utilizado.
A utilização do HTML5 e do CSS3 para a criação de designs responsivos que se
adaptam a cada formato de maneira a redimensionar o conteúdo sem perdê-lo e sem
prejudicar o entendimento do usuário, vem crescendo exponencialmente.
Mesmo sendo o HTML5 uma linguagem ainda em fase de desenvolvimento devido à
falta de suporte total dos navegadores a seus elementos e de usuários que ainda utilizam
programas antigos de acesso à WEB, assim como o CSS3, os desenvolvedores já os
utilizam para desenvolverem aplicações responsivas e atender à demanda crescente dos
usuários que utilizam dispositivos móveis para acessarem a internet.
O uso do JavaScript para inserir interações dinâmicas nas páginas responsivas
passa por mudanças em relação ao uso para páginas fixas.
Este trabalho irá mostrar como é possível a viabilização de aplicações WEB
responsivas desenvolvidas com o uso das novas linguagens HTML5 e CSS3.
Palavras-Chave: html5, css3, javascript, design, responsivo, web.
SUMÁRIO CapÍtulo 1. INTRODUÇÃO................................................................................................... 13
1.1 Objetivo geral ............................................................................................ 15
1.2 Objetivos específicos ................................................................................ 15
CapÍtulo 2. REVISÃO DA LITERATURA .............................................................................. 16
2.1 HTML ........................................................................................................ 16
2.2 HTML 5 ..................................................................................................... 17
2.2.1 Sintaxe ........................................................................................................... 18
2.2.2 Novos elementos ............................................................................................ 19
2.3 CSS .......................................................................................................... 41
2.3.1 Regra CSS ..................................................................................................... 41
2.3.2 Categorias de valores CSS ............................................................................. 43
2.3.3 Tipos de valores CSS ..................................................................................... 49
2.3.4 Vinculando folhas de estilo a documentos ...................................................... 52
2.3.5 Módulos CSS3 ................................................................................................ 55
2.3.6 Esquemas de posicionamento CSS ................................................................ 56
2.3.7 Posicionamento com z-index .......................................................................... 62
2.3.8 Seletores CSS3 .............................................................................................. 64
2.3.9 Fontes ............................................................................................................ 69
2.3.10 Layout multicolunas ........................................................................................ 73
2.3.11 Media Queries ................................................................................................ 80
2.3.12 Template Layout ............................................................................................. 89
2.3.13 Box Layout flexível.......................................................................................... 94
2.4 JavaScript ............................................................................................... 100
2.4.1 Como usar .................................................................................................... 100
2.4.2 Variáveis ....................................................................................................... 101
2.4.3 Operadores Aritméticos ................................................................................ 103
2.4.4 Operadores de Atribuição ............................................................................. 103
2.4.5 Operadores de Comparação ........................................................................ 104
2.4.6 Operadores Lógicos ..................................................................................... 105
2.4.7 Declarações Condicionais ............................................................................ 105
2.4.8 Laços de Repetição ...................................................................................... 106
2.4.9 Eventos HTML DOM em JavaScript ............................................................. 108
2.4.10 Tratamento de Excessões ............................................................................ 110
CapÍtulo 3. METODOLOGIA .............................................................................................. 112
CapÍtulo 4. APLICAÇÕES DE CONCEITOS ...................................................................... 113
4.1 Página fixa .............................................................................................. 113
4.2 Página Responsiva ................................................................................. 115
4.3 Página Responsiva com JavaScript ........................................................ 121
CapÍtulo 5. CONCLUSÕES ................................................................................................ 127
REFERÊNCIAS BIBLIOGRÁFICAS ................................................................................... 128
LISTA DE ILUSTRAÇÕES E FIGURAS
Figura 1 - Modelo de Conteúdo ........................................................................................... 18
Figura 2 - Coordenadas do contexto 2D de canvas ............................................................. 24
Figura 3 - Sintaxe da regra CSS .......................................................................................... 42
Figura 4 - Sobreposição de margens ................................................................................... 57
Figura 5 - Posicionamento relativo ....................................................................................... 58
Figura 6 - Posicionamento float ........................................................................................... 59
Figura 7 - Exemplo CSS de posicionamento absoluto ......................................................... 61
Figura 8 - Exemplo CSS de posicionamento com z-index .................................................... 63
Figura 9 - Árvore do documento .......................................................................................... 65
Figura 10 - Sintaxe de uma regra CSS ................................................................................ 66
Figura 11 - Sintaxe de uma media query ............................................................................. 82
Figura 12 - Exemplo design fixo ......................................................................................... 113
Figura 13 - Exemplo design fixo ......................................................................................... 114
Figura 14 - Exemplo design fixo ......................................................................................... 115
Figura 15 - Exemplo design relativo ................................................................................... 116
Figura 16 - Exemplo design relativo ................................................................................... 117
Figura 17 - Exemplo design relativo ................................................................................... 118
Figura 18 - Exemplo design responsivo ............................................................................. 119
Figura 19 - Exemplo design responsivo ............................................................................. 120
Figura 20 - Exemplo design responsivo ............................................................................. 121
Figura 21 - Caixa de busca em resoluções maiores .......................................................... 123
Figura 22 - Caixa de busca executando onMouseOver ...................................................... 123
Figura 23 - Inserindo dados na busca ................................................................................ 124
Figura 24 - Retorno da busca na notícia principal .............................................................. 124
Figura 25 - Caixa de busca e botão maiores na versão mobile .......................................... 125
Figura 26 - Inserindo dados para busca mobile ................................................................. 125
Figura 27 - Notícia principal alterada conforme a busca .................................................... 126
LISTA DE TABELAS
Tabela 1 - Unidades de medida relativa nas CSS3 .............................................................. 46
Tabela 2 - Unidades de medida absoluta nas CSS3 ............................................................ 46
Tabela 3 - Unidades de medida angulares nas CSS3 .......................................................... 47
Tabela 4 - Unidades de tempo nas CSS3 ............................................................................ 47
Tabela 5 - Unidades de frequência nas CSS3 ..................................................................... 48
Tabela 6 - Seletores CSS3 .................................................................................................. 68
Tabela 7 - Valores da propriedade break-before .................................................................. 79
Tabela 8 - Valores da propriedade break-after ..................................................................... 80
Tabela 9 - Valores da propriedade break-inside ................................................................... 80
Tabela 10 - Operadores para uso em media query .............................................................. 82
Tabela 11 - Efeito dos valores da propriedade flex-direction ................................................ 96
Tabela 12 - Operadores aritméticos JavaScript ................................................................. 103
Tabela 13 - Operadores de atribuição JavaScript .............................................................. 104
Tabela 14 - Operadores de comparação JavaScript .......................................................... 104
Tabela 15 - Operadores lógicos JavaScript ....................................................................... 105
LISTA DE QUADROS
Quadro 1 - Sintaxe de marcação HTML ............................................................................... 19
Quadro 2 - Sintaxe de marcação HTML5 ............................................................................. 19
Quadro 3 - Exemplo de uso do elemento article .................................................................. 20
Quadro 4 - Exemplo de uso do elemento aside ................................................................... 20
Quadro 5 - Exemplo de uso do elemento audio ................................................................... 21
Quadro 6 - Exemplo de uso do elemento audio ................................................................... 21
Quadro 7 - Exemplo de uso do elemento audio ................................................................... 22
Quadro 8 - Exemplo de uso do elemento audio ................................................................... 22
Quadro 9 - Exemplo de uso do elemento audio ................................................................... 23
Quadro 10 - Exemplo de definição de área para canvas ...................................................... 23
Quadro 11 - Referência JavaScript para início do desenho em canvas ............................... 24
Quadro 12 - Desenho de retângulos em canvas .................................................................. 26
Quadro 13 - Apagando retângulos em canvas ..................................................................... 26
Quadro 14 - Manipulando caminhos de canvas ................................................................... 27
Quadro 15 - Utilização do método closePath() ..................................................................... 28
Quadro 16 - Utilização dos atributos lineJoin e lineCap ....................................................... 28
Quadro 17 - Exemplo de uso do elemento menu ................................................................. 29
Quadro 18 - Exemplo de uso do elemento datalist ............................................................... 29
Quadro 19 - Exemplo de uso do elemento summary ........................................................... 30
Quadro 20 - Exemplo de uso do elemento figcaption ........................................................... 31
Quadro 21 - Exemplo de uso do elemento footer ................................................................. 31
Quadro 22 - Exemplo de uso do elemento header ............................................................... 32
Quadro 23 - Exemplo de uso do elemento hgroup ............................................................... 32
Quadro 24 - Exemplo de uso do elemento meter ................................................................. 34
Quadro 25 - Exemplo de uso do elemento nav .................................................................... 34
Quadro 26 - Exemplo de uso do elemento output ................................................................ 35
Quadro 27 - Exemplo de uso do elemento progress ............................................................ 36
Quadro 28 - Exemplo de uso do elemento section ............................................................... 36
Quadro 29 - Exemplo de uso do elemento time ................................................................... 37
Quadro 30 - Exemplo de uso do elemento vídeo ................................................................. 37
Quadro 31 - Exemplo de uso do elemento video ................................................................. 39
Quadro 32 - Exemplo de uso do elemento video ................................................................. 39
Quadro 33 - Exemplo de uso do elemento video ................................................................. 40
Quadro 34 - Exemplo de uso do elemento video ................................................................. 40
Quadro 35 - Exemplo de uso do elemento video ................................................................. 40
Quadro 36 - Exemplo de regra CSS .................................................................................... 42
Quadro 37 - Exemplo de regra CSS .................................................................................... 43
Quadro 38 - Exemplo de regra CSS .................................................................................... 43
Quadro 39 - Regras CSS e seus valores ............................................................................. 44
Quadro 40 - Exemplo de valores palavra-chave .................................................................. 44
Quadro 41 - Exemplo do uso de strings ............................................................................... 48
Quadro 42 - Exemplo do uso de valor funcional ................................................................... 49
Quadro 43 - Exemplo do uso de valores em casos especiais .............................................. 49
Quadro 44 - Regras usando tipos de valores CSS ............................................................... 50
Quadro 45 - Valores iniciais de propriedades CSS .............................................................. 51
Quadro 46 - Exemplo de uso CSS inline .............................................................................. 52
Quadro 47 - Exemplo de uso CSS incorporado ................................................................... 53
Quadro 48 - Exemplo de uso CSS externo .......................................................................... 54
Quadro 49 - Exemplo de uso CSS importado ...................................................................... 54
Quadro 50 - Exemplo de uso CSS importado ...................................................................... 54
Quadro 51 - Regra CSS de posicionamento relativo ............................................................ 58
Quadro 52 - Exemplo CSS de posicionamento absoluto ...................................................... 60
Quadro 53 - Exemplo CSS de posicionamento com z-index ................................................ 63
Quadro 54 - Exemplo de árvore do documento.................................................................... 65
Quadro 55 - Exemplo de uso do seletor universal ................................................................ 69
Quadro 56 - Exemplo de uso do seletor de tipo ................................................................... 69
Quadro 57 - Exemplo CSS da propriedade font-weight ........................................................ 71
Quadro 58 - Exemplo CSS da propriedade font-size............................................................ 71
Quadro 59 - Exemplo CSS da funcionalidade @font-face .................................................... 73
Quadro 60 - Exemplo de uso da propriedade column-count ................................................ 75
Quadro 61 - Exemplo de uso da propriedade column-width ................................................. 76
Quadro 62 - Exemplo de uso da propriedade columns ........................................................ 76
Quadro 63 - Exemplo de uso da propriedade columns ........................................................ 76
Quadro 64 - Exemplo de uso da propriedade column-gap ................................................... 77
Quadro 65 - Exemplo de uso da propriedade column-rule ................................................... 77
Quadro 66 - Exemplo de uso da propriedade column-span ................................................. 78
Quadro 67 - Exemplo de uso da propriedade column-fill ...................................................... 78
Quadro 68 - Exemplo de uso da propriedade break ............................................................. 80
Quadro 69 - Exemplo de como vincular folhas de estilo para tipos de mídia ........................ 81
Quadro 70 - Exemplo de uso da funcionalidade width ......................................................... 84
Quadro 71 - Exemplo de uso da funcionalidade height ........................................................ 85
Quadro 72 - Exemplo de uso da funcionalidade device-width .............................................. 85
Quadro 73 - Exemplo de uso da funcionalidade device-height ............................................. 85
Quadro 74 - Exemplo de uso da funcionalidade orientation ................................................. 86
Quadro 75 - Exemplo de uso da funcionalidade aspect-ratio ............................................... 86
Quadro 76 - Exemplo de uso da funcionalidade device-aspect-ratio .................................... 87
Quadro 77 - Exemplo de uso da funcionalidade color .......................................................... 87
Quadro 78 - Exemplo de uso da funcionalidade color-index ................................................ 88
Quadro 79 - Exemplo de uso da funcionalidade monochrome ............................................. 88
Quadro 80 - Exemplo de uso da funcionalidade resolution .................................................. 89
Quadro 81 - Exemplo de uso da funcionalidade scan .......................................................... 89
Quadro 82 - Exemplo de uso da funcionalidade grid ............................................................ 89
Quadro 83 - Exemplo de uso da propriedade display........................................................... 90
Quadro 84 - Exemplo de uso da propriedade display com espaçamento ............................. 91
Quadro 85 - Exemplo de uso da propriedade display com espaçamento percentual ........... 92
Quadro 86 - Exemplo de uso da propriedade position ......................................................... 92
Quadro 87 - Exemplo de uso do pseudoelemento ::slot() .................................................... 94
Quadro 88 - Exemplo de uso da propriedade display........................................................... 95
Quadro 89 - Exemplo de uso do valor inline-box .................................................................. 95
Quadro 90 - Exemplo de uso dos valores inline e block ....................................................... 96
Quadro 91 - Exemplo de uso dos valores inline-reverse e block-reverse ............................. 97
Quadro 92 - Exemplo de uso da propriedade flex-order ....................................................... 97
Quadro 93 - Exemplo de uso da propriedade flex-pack ....................................................... 98
Quadro 94 - Exemplo de uso de script JavaScript ............................................................. 100
Quadro 95 - Exemplo de uso de script JavaScript ............................................................. 101
Quadro 96 - Exemplo de uso de JavaScript externo .......................................................... 101
Quadro 97 - Exemplo de criação de variáveis JavaScript .................................................. 102
Quadro 98 - Exemplo de variáveis JavaScript ................................................................... 102
Quadro 99 - Exemplo de variáveis JavaScript ................................................................... 102
Quadro 100 - Exemplo de operadores JavaScript .............................................................. 103
Quadro 101 - Exemplo de uso da condição If .................................................................... 105
Quadro 102 - Exemplo de uso da condição If..Else ........................................................... 106
Quadro 103 - Exemplo de uso da condição If..Else If...Else ............................................... 106
Quadro 104 - Exemplo de uso do laço For ......................................................................... 107
Quadro 105 - Exemplo de uso do laço While ..................................................................... 107
Quadro 106 - Exemplo de uso do laço Do...While .............................................................. 108
Quadro 107 - Exemplo de uso de eventos ......................................................................... 108
Quadro 108 - Exemplo de uso de eventos onload e onunload ........................................... 109
Quadro 109 - Exemplo de uso de eventos onmouseover e onmouseout ........................... 109
Quadro 110 - Exemplo de uso do Try...Catch .................................................................... 110
Quadro 111 - Exemplo de uso do Try...Catch com Throw .................................................. 111
Quadro 112 - Media queries para design responsivo ......................................................... 119
Quadro 113 - Utilização de JavaScript em design responsivo ............................................ 122
LISTA DE ABREVIATURAS
AJAX Asynchronous Javascript and XML
API Application Programming Interface
CSS Cascading Style Sheets
DOM Document Object Model
HTML HyperText Markup Language
LCD Liquid Crystal Display
LED Light Emitting Diode
MIME Multipurpose Internet Mail Extension
RSS Really Simple Syndication
URI Uniform Resource Identifier
URL Universal Resource Locator
W3C World Wide Web Consortium
XHTML Extensible HyperText Markup Language
XUL XML User Interface Language
13
CAPÍTULO 1. INTRODUÇÃO
Até o início da década de 90 havia basicamente apenas um modo de acessar a
internet, que era através dos computadores pessoais, conhecidos como desktop. Era
possível acessar a rede também por celulares ou por outros aparelhos ligados à televisão,
mas nenhum destes dispositivos permitia uma navegação com a facilidade existente ao usar
um desktop.
Atualmente o cenário é bem diferente. Dispositivos como smartphones, os tablets e
até mesmo os celulares mais simples dispõem de navegadores altamente eficazes que
possibilitam o acesso à internet. Outros dispositivos diferentes também não demorarão a
aparecer e possibilitarão que os usuários acessem a internet sem restrições. Um exemplo
são as televisões inteligentes que funcionam integradas ao conteúdo disponibilizado online.
Quando os cenários da internet a dispositivos não são restringidos, é possível
conseguir um leque muito maior e mais frutífero. A informação inserida na web pode e é
reutilizada a qualquer momento, sejam por robôs de buscas, leitores de telas para usuários
deficientes visuais, por leitores RSS utilizados pelos celulares, enfim, qualquer meio que o
usuário utilize para consumir uma informação na web é um meio de acesso (EIS, 2011).
No campo do desenvolvimento web, essas novidades envolvendo diferentes tipos de
aparelhos com resoluções variadas traria um grande problema no sentido dos
desenvolvedores precisarem criar uma versão de aplicação para cada tipo de dispositivo
que acesse o conteúdo, permitindo assim, que uma mesma versão da aplicação possa ser
vista por qualquer tipo de usuário. Independente do dispositivo utilizado.
O Web Design Responsivo é uma abordagem que sugere que o design e o
desenvolvimento precisam responder ao comportamento do usuário e do ambiente baseado
na resolução de tela, tamanho e orientação. A técnica consiste em uma mistura de grids e
layouts flexíveis, imagens e o uso inteligente de consultas de mídias CSS. Conforme o
usuário alterna de dispositivos para acessar a web, a aplicação altera automaticamente sua
estrutura para se acomodar à resolução utilizada. Isso elimina a necessidade de
desenvolver um design novo para cada dispositivo que surgir no mercado (KNIGHT, 2011).
14
Até pouco tempo, para se desenvolver uma aplicação web acessível por qualquer
dispositivo os desenvolvedores geralmente detectavam o aparelho que o usuário estava
utilizando. Se fosse um desktop ou um notebook, o acesso era direcionado para um
determinado código CSS que formatava a aplicação para o design mais confortável ao
monitor do aparelho.
Com o surgimento das novas tecnologias como tablets, smartphones e até mesmo
televisões LED e LCD, esta técnica se tornou ultrapassada basicamente porque detectava
os aparelhos de acordo com o tamanho da tela. Hoje, um smartphone possui uma resolução
maior do que a de um monitor antigo e nem por isso sua tela física é de mesma proporção.
Isso ocorre devido a densidade de pixels, ou seja, o número de pixels que o dispositivo pode
conter em uma polegada. Quanto mais pixels em uma polegada, mais nítida se torna a
imagem. Atualmente pequenos dispositivos possuem uma densidade de pixels mais elevada
que grandes monitores. O que importa na verdade é a resolução do aparelho e não o
tamanho de sua tela, e é isso que o Web Design Responsivo veio tratar.
Desta maneira, o desenvolvedor não cria uma aplicação para um determinado
dispositivo, mas sim para aparelhos que tenham uma determinada faixa de resolução.
Os desenvolvedores agora podem criar arquivos CSS diferentes para cada faixa de
resoluções que serão utilizados de acordo com o aparelho utilizado pelo usuário no
momento de seu acesso à aplicação, tornando a navegabilidade mais confortável e intuitiva
(EIS, 2011).
Com o surgimento da linguagem HTML5 e do CSS3, a técnica de Web Design
Responsivo está começando a ser utilizada amplamente pelos desenvolvedores com o
intuito de criarem aplicações webs de acordo com os últimos padrões definidos pelo W3C
além de atenderem os diversos nichos de usuários que hoje possuem um leque enorme de
dispositivos com possibilidades de acesso à internet.
15
1.1 Objetivo geral
Definir os pontos positivos e negativos do uso das novas linguagens HTML5 e CSS3
na criação de designs responsivos para aplicações web.
1.2 Objetivos específicos
Identificar e analisar as tecnologias incorporadas pela metodologia do Web
Design Responsivo;
Desenvolver protótipo de aplicação web nos padrões habituais e utilizando a
metodologia apresentada e definir quais são os prós e os contras de cada uma
delas;
Avaliar o comportamento do layout dos documentos da aplicação web
desenvolvida com a técnica de design responsivo;
Caracterizar e analisar os diferenciais apresentados durante o desenvolvimento
de aplicações web responsivas;
16
CAPÍTULO 2. REVISÃO DA LITERATURA
2.1 HTML
HTML é a abreviação para Hyper Text Markup Language, grafia em inglês que foi
traduzido para Linguagem de Marcação para Hipertexto e que se destina à escrita de
documentos que possam ler lidos por softwares genericamente chamados de agentes de
usuário. Navegadores, leitores de tela e até mesmo robôs de busca são exemplos de agente
de usuário.
Hipertexto é um conceito existente nos meios acadêmicos desde 1940. No entanto,
foi com o advento dos computadores pessoais que o conceito passou das definições
acadêmicas para as aplicações práticas (SILVA, 2008).
A HTML fornece um meio para descrever a estrutura do texto com base em
informações de um documento-texto, denotando algumas ligações, cabeçalhos, parágrafos,
listas, entre outros aspectos e, para completar o texto com formas interativas, imagens
incorporadas e outros objetos.
A linguagem é descrita na forma de tags que são cercadas por colchetes angulares
(< e >). A HTML pode descrever, de alguma forma, a aparência e a semântica de um
documento, além de poder incluir de forma embutida outras linguagens que podem afetar o
comportamento dos navegadores da WEB e outros elementos HTML (ROGÉRIO, 2009).
Os nomes dos elementos HTML foram escolhidos levando em conta a destinação
dos mesmos. Desta forma, um elemento HTML destinado a marcar um cabeçalho recebeu o
nome heading que, em inglês, significa cabeçalho ou título de uma seção do documento; o
elemento destinado a marcar os parágrafos foi denominado paragraph, cujo significado, é
parágrafo, e assim por diante. Este vínculo entre o nome do elemento e sua finalidade na
marcação é um conceito básico que está perfeitamente de acordo com o objetivo primordial
da linguagem, que é a de marcar estruturalmente conteúdos de um documento (SILVA,
2008).
17
2.2 HTML 5
A HTML5 é uma evolução da HTML (atualmente na versão 4.0.1) que ainda está em
desenvolvimento e possuí previsão de homologação para o ano de 2014. Dentre as
alterações feitas na linguagem, podemos citar:
Novas APIs, entre elas uma para desenvolvimento de gráficos
bidimensionais;
Controle embutido de conteúdo multimídia;
Aprimoramento do uso offline;
Melhoria na depuração de erros.
Com a evolução, a linguagem padrão para WEB pode eliminar a necessidade de
plug-ins para aplicações multimídia em navegadores. O HTML5 oferece uma experiência
WEB totalmente diferente para usuários e, embora exista um longo caminho a ser finalizado,
muitos navegadores importantes, como Safari, Opera e Google Chrome, já implementaram
grandes partes da linguagem, incluindo tags de vídeo e suporte à tecnologia canvas (que
possibilita a criação de desenhos bidimensionais) (SILVA, 2008).
A especificação para a HTML5 estabelece um Modelo de Conteúdo que vem a ser a
descrição do tipo de conteúdo que se espera ser inserido em cada elemento. Os conteúdos
de cada um deverão estar de acordo com o que estabelece o modelo de conteúdo para o
mesmo. Cada elemento pertence a uma ou mais categorias que agrupam elementos
segundo seu modelo de conteúdo. A seguir estão listadas as categorias de conteúdos
existentes na HTML 5:
Metadados
Fluxo
Seção
Cabeçalhos
Frase
Incorporado
Interativo
18
Formulário
A Figura 1 exemplifica como as categorias de conteúdos da HTML5 se relacionam
entre si.
Figura 1 - Modelo de Conteúdo
Os elementos de formulários pertencem também a uma categoria específica
denominada Formulário que se desdobra nas seguintes subcategorias:
Listas
Rótulos
Envio
Limpeza
2.2.1 Sintaxe
A especificação para a HTML5 define uma sintaxe que é compatível com as versões
anteriores da HTML. Os documentos usando a sintaxe HTML com o tipo de MIME
(extensões multi função para mensagens de internet) text/HTML são parseados segundo
regras compatíveis com as atuais implementações populares (SILVA, 2011).
19
O Quadro 1 mostra o exemplo da sintaxe para a marcação HTML. O Quadro 2
mostra como a sintaxe de marcação é feita na HTML5:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EM”
http://www.w3.org/TR/html4/loose.dtd>
<html lang=”pt-br”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”>
<title>Título da página</title>
</head>
<body>
</body>
</html>
Quadro 1 - Sintaxe de marcação HTML
<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta charset=”utf-8”>
<title>Título da página</title>
</head>
<body>
</body>
</html>
Quadro 2 - Sintaxe de marcação HTML5
2.2.2 Novos elementos
A HTML5 introduziu novos elementos de marcação com a finalidade de oferecer aos
desenvolvedores melhores opções para estruturar seus documentos. A seguir serão
abordados os novos elementos, suas apresentações e finalidades, categorias, interface a
que pertencem e atributos para eles previstos.
2.2.2.1 article
Destina-se a marcar um conteúdo autossuficiente em uma página, documento ou
aplicação. O conteúdo marcado pela tag é, a princípio, reusável e pode ser distribuído de
forma independente, por exemplo: via RSS.
Elementos article podem ser aninhados e nesses casos o conteúdo aninhado
deve estar relacionado com o conteúdo no qual foi aninhado.
20
<article>
<article>
//Primeito conteúdo
</article>
<article>
//Segundo conteúdo
</article>
</article>
Quadro 3 - Exemplo de uso do elemento article
2.2.2.2 aside
Destinado a marcar um conteúdo separado mas tangencialmente relacionado com o
conteúdo ao seu redor. Em tipografia são os blocos de conteúdos nas barras-laterais. O
elemento aside pode ser usado para obter o efeito tipográfico que ele confere ao conteúdo.
Uma boa indicação de conteúdo para ser marcado com aside é aquele que, embora
relacionado ao conteúdo principal, não prejudicará sua compreensão se for retirado (SILVA,
2011).
<body>
//Marcação HTML para o topo do blog
<article>
//Conteúdo 1
</article>
<article>
//Conteúdo 2
</article>
<aside>
//Conteúdo à parte do conteúdo principal
</aside>
</body>
Quadro 4 - Exemplo de uso do elemento aside
2.2.2.3 audio
Esse elemento destina-se a inserir um som ou um stream de áudio sem a
necessidade de plugins Flash, QuickTime, Windows Media Player, Real Audio ou outros
componentes a serem considerados quando se pretende incorporar som em uma página
web.
Basta apenas declarar o caminho para o arquivo do áudio no atributo src do
elemento e o som será reproduzido com as funcionalidades nativas do navegador.
Navegadores que não suportam o elemento audio renderizam normalmente o conteúdo do
21
mesmo, basta ser definida uma incorporação de som de maneira convencional com o uso
de HTML, por exemplo, com o uso de Flash.
<audio src=”som.mp3”>
<!-- Código HTML para inserção do som para navegadores sem suporte -->
</audio>
Quadro 5 - Exemplo de uso do elemento audio
No exemplo acima, navegadores que suportam HTML5 ignoram o código para
inserção que está entre as tags audio e os que não suportam o executa.
O elemento audio admite como elemento-filho o source, cuja finalidade é substituir
o atributo src e permitir formatos alternativos para o som a ser inserido. O elemento
source destina-se a permitir que se definam arquivos diferentes para incorporar as mídias
audio e video em uma página. O elemento source admite os seguintes atributos: globais,
src, type e media.
O atributo src indica o endereço do arquivo de mídia a incorporar na página. É um
atributo obrigatório cujo valor é um URL não vazio. O atributo type informa ao navegador o
tipo de mídia a ser incorporada de modo que ele possa decidir o que fazer antes de baixar o
arquivo. O valor desse atributo deve ser um tipo de MIME válido.
O atributo type ainda admite o parâmetro codecs que determinados tipos de MIME
definem e deve ser informado para que o navegador saiba como o arquivo foi codificado.
O atributo media destina-se a informar ao navegador o tipo de mídia. Os valores
possíveis para o atributo são os listados nas especificações para Media Queries e o valor
padrão é all.
<audio>
<source src=”som.ogg” type=”audio/ogg; codecs=‟vorbis‟”
media=”screen”>
<source src=”som.mp3” type=”audio/mpeg; codecs=‟mp3‟” media=”screen”>
<!--Código HTML para inserção de som.mp3 com Flash-->
</audio>
Quadro 6 - Exemplo de uso do elemento áudio
22
De forma alternativa, é possível a inserção de marcação HTML no elemento audio
com a finalidade de servir navegadores que não suportam qualquer marcação para inserção
de som.
<audio>
<source src=”som.ogg” type=”audio/ogg”>
<source src=”som.mp3” type=”audio/mpeg”>
<!--Código HTML para inserção de som.mp3 com Flash-->
<p>Seu navegador não suporta o elemento audio da HTML5.
<br>Faça <a href=”som.mp3”>download de som.mp3</a></p>
</audio>
Quadro 7 - Exemplo de uso do elemento audio
Os atributos do elemento audio são: globais, src, preload, autoplay, loop e
controls.
O atributo src destina-se a indicar o caminho para o arquivo de som a ser
incorporado na página.
O atributo preload indica como o autor espera que seja o pré-carregamento do som
na página, visando melhorar a experiência do usuário. Esse atributo admite os valores
none, metadata e auto. O valor none instrui o navegador a não fazer o pré-carregamento
do som. O atributo metadata instrui o navegador a fazer o pré-carregamento somente dos
metadados do som, como dimensões, duração, controles, etc. O valor auto define que o
som será pré-carregado.
Os atributos autoplay e loop destinam-se respectivamente a iniciar o som
automaticamente, tão logo a página seja carregada e a repetir o som indefinidamente
(SILVA, 2011).
<audio autoplay loop>
<source src=”som.ogg” type=”audio/ogg”>
<source src=”som.mp3” type=”audio/mpeg”>
<!--Código HTML para inserção de som.mp3 com Flash-->
<p>Seu navegador não suporta o elemento audio da HTML5.
<br>Faça <a href=”som.mp3”>download de som.mp3</a></p>
</audio>
Quadro 8 - Exemplo de uso do elemento audio
23
A presença do atributo controls faz com que o navegador renderize uma barra de
controle nativa contendo botões do tipo play e pause bem como controle de volume.
<audio controls>
<source src=”som.ogg” type=”audio/ogg”>
<source src=”som.mp3” type=”audio/mpeg”>
<source src=”som.wav” type=”audio/wave”>
<p>Seu navegador não suporta o elemento audio da HTML5.
<br>Faça <a href=”som.mp3”>download de som.mp3</a></p>
</audio>
Quadro 9 - Exemplo de uso do elemento audio
2.2.2.4 canvas
Esse elemento é destinado a delimitar uma área para criação dinâmica de imagens,
como gráficos estáticos, jogos e gráficos dinâmicos e imagens em geral criadas com
linguagem de programação dinâmica. Todo trabalho de criação e animação é feito com
JavaScript.
A marcação para definir a área de criação dinâmica de imagens é muito simples,
como mostrada a seguir.
CSS
canvas {
border: 1px solid #000;
background: #ffc;
}
HTML
<canvas>
<p>Conteúdo alternativo para navegadores que não suportam canvas.</p>
</canvas>
Quadro 10 - Exemplo de definição de área para canvas
Convém citar que, por padrão, as dimensões de canvas quando não forem definidas
serão iguais a 300 x 150px.
Contudo, não há uma limitação para essas dimensões, pois, além dos atributos
globais, o elemento canvas suporta atributos width e height destinados a definir
respectivamente a largura e a altura da área de criação das imagens dinâmicas.
24
Uma vez definida a área de criação, o próximo passo é a criação da imagem
propriamente dita. Todo o trabalho de criação é feito com JavaScript.
A especificação para a HTML5 prevê dois contextos de criação: o contexto
bidimensional e o contexto tridimensional.
O contexto bidimensional destina-se à criação de imagens em duas dimensões, x e
y, segundo um sistema de eixos cartesianos, cuja origem é no canto superior esquerdo da
área de criação, com as coordenadas x crescendo da esquerda para a direita e y de cima
para baixo, conforme ilustrado na Figura 2.
Figura 2 - Coordenadas do contexto 2D de canvas
Para o começo do desenho, é preciso criar uma referência JavaScript para o
elemento canvas no DOM e definir o contexto de desenho (SILVA, 2011).
HTML
<canvas id=”quadro” width=”400” height=”200”>
<p> Conteúdo alternativo para navegadores que não suportam canvas.</p>
</canvas>
JavaScript
var canvas = document.getElementById(„quadro‟);
var ctx = canvas.getContext(„2d‟);
Quadro 11 - Referência JavaScript para início do desenho em canvas
25
A API de canvas prevê métodos e atributos próprios que visam facilitar a criação
gráfica. Além deles, qualquer objeto e seus métodos e propriedades próprios da linguagem
JavaScript podem ser utilizados na criação.
strokeRect(x, y, l, h)
Esse método é destinado a desenhar o contorno de um retângulo. Os parâmetros x e
y definem as coordenadas do canto superior esquerdo do retângulo e os parâmetros l e h
definem, respectivamente, a largura e a altura, em pixel, do retângulo.
strokeStyle
Esse atributo é destinado a definir a cor das linhas do elemento gráfico criado. Os
valores possíveis são as cores válidas em CSS e keywords. Não sendo definida a cor com
uso desse atributo, o padrão é a cor preta #000000.
lineWidth
Esse atributo é destinado a definir a espessura das linhas, em pixel, do elemento
gráfico criado. Os valores possíveis são os números inteiros. Não sendo definida a
espessura com uso desse atributo, o padrão é zero e a linha não será visualizada.
fillRect(x, y, l, h)
Esse método é destinado a desenhar um retângulo em cor sólida. Os parâmetros x e
y definem as coordenadas do canto superior esquerdo do retângulo e os parâmetros l e h
definem, respectivamente, a largura e a altura, em pixel, do retângulo.
fillStyle
Esse atributo é destinado a definir a cor de preenchimento do elemento gráfico
criado. Os valores possíveis são as cores válidas em CSS e keywords.
No Quadro 12 foram desenhados três retângulos usando os métodos e atributos
descritos anteriormente.
26
<script>
var canvas = document.getElementById(„quadro‟);
var ctx = canvas.getContext(„2d‟);
ctx.strokeStyle = „#f00‟;
ctx.lineWidth = 2;
ctx.strokeRect(30, 30, 80, 40);
ctx.strokeStyle = „#00f‟;
ctx.lineWidth = 4;
ctx.strokeRect(130, 100, 140, 90);
ctx.strokeStyle = „#000‟;
ctx.lineWidth = 2;
ctx.fillStyle = „rgba(0, 255, 0, 0.4)‟;
ctx.fillRect(150, 60, 200, 70);
ctx.strokeRect(148, 58, 204, 74);
</script>
Quadro 12 - Desenho de retângulos em canvas
clearRect(x, y, l, h)
Esse método é destinado a apagar uma área retangular de canvas. No Quadro 13 é
mostrado um exemplo de um retângulo menor sendo apagado dentro de um maior.
<script>
var canvas = document.getElementById(„quadro‟);
var ctx = canvas.getContext(„2d‟);
ctx.strokeStyle = „#f00‟;
ctx.lineWidth = 2;
ctx.fillStyle = „rgba(0, 255, 0, 0.4)‟;
ctx.fillRect(150, 60, 200, 70);
ctx.strokeRect(18, 28, 304, 154);
ctx.clearRect(50, 60, 180, 100);
</script>
Quadro 13 - Apagando retângulos em canvas
Os próximos atributos a serem explicados são para construção de caminhos (path) e
sub-caminhos (subpaths) em canvas. Um caminho é constituído de zero ou mais
subcaminhos. Cada subcaminho é constituído por um ou mais pontos conectados por uma
linha reta ou curva. Os subcaminhos podem ser fechados ou abertos. Diz-se que um
subcaminho é fechado quando o ponto inicial está conectado ao ponto final por uma linha
reta (SILVA, 2011).
beginPath()
Esse método é destinado a resetar o path corrente e nativo do contexto canvas
criando condições para se iniciar a construção de um novo path. Todo path ou subpath a ser
construído deverá começar com esse método.
27
moveTo(x, y)
Esse método é destinado a posicionar a pena de desenho nas coordenadas x e y.
lineTo(x, y)
Esse método é destinado a desenhar uma linha reta desde a posição na qual se
encontra a pena até as coordenadas x e y.
stroke()
Esse método é destinado a aplicar os estilos definidos pelos atributos de criação no
caminho construído.
<script>
var ctx = canvas.getContext(„2d‟);
ctx.beginPath();
ctx.strokeStyle = „#f00‟;
ctx.lineWidth = 2;
ctx.moveTo(20, 20);
ctx.lineTo(80, 120);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = „#009‟;
ctx.moveTo(80, 120);
ctx.lineTo(150, 30);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = „#090‟;
ctx.moveTo(150, 30);
ctx.lineTo(350, 180);
ctx.stroke();
</script>
Quadro 14 - Manipulando caminhos de canvas
closePath()
Esse método é destinado a fazer o fechamento de um caminho. Por exemplo: criar
uma linha poligonal ou um arco aberto e declarar closePath() faz com que os pontos
inicial e final da criação sejam unidos por uma linha reta.
<script>
var canvas = document.getElementById(„quadro‟);
var ctx = canvas.getContext(„2d‟);
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.strokeStyle = „#f00‟;
ctx.lineTo(80, 190);
ctx.lineTo(180, 160);
28
ctx.lineTo(220, 20);
ctx.closePath();
ctx.stroke();
</script>
Quadro 15 - Utilização do método closePath()
lineJoin
Esse atributo é destinado a definir a forma como as linhas se unem. Os valores
possíveis são: miter, bevel e round.
lineCap
Esse atributo é destinado a definir a forma de acabamento das extremidades das
linhas. Os valores possíveis são: butt, round e square.
<script>
var canvas = document.getElementById(„quadro‟);
var ctx = canvas.getContext(„2d‟);
ctx.lineJoin = escolha;
ctx.lineCap = escolha;
ctx.lineWidth = 50;
ctx.beginPath();
ctx.moveTo(100, 40);
ctx.strokeStyle = „#f00‟;
ctx.lineTo(100, 130);
ctx.lineTo(350, 130);
ctx.stroke();
</script>
Quadro 16 - Utilização dos atributos lineJoin e lineCap
2.2.2.5 menu
Destina-se a marcar uma lista de comandos. O elemento menu admite os seguintes
atributos: atributos globais, type e label.
O atributo type define o tipo de menu que está sendo criado. Os possíveis valores
para o atributo são: context, toolbar e list.
O atributo label é utilizado para definir o texto a ser exibido para o usuário (SILVA,
2011).
<menu type=”tollbar”>
<li>
<menu label=”Arquivo”>
//Opções do menu Arquivo
29
</menu>
</li>
<li>
<menu label=”Editar”>
//Opções do menu Editar
</menu>
</li>
</menu>
Quadro 17 - Exemplo de uso do elemento menu
2.2.2.6 datalist
Destina-se a fornecer uma lista de sugestões para preenchimento do campo input
(para textos) e permite que o usuário selecione uma das opções de uma lista predefinida
como sugestão pelo desenvolvedor ou então entre no campo um valor diferente daqueles
constantes da lista de opções sugeridas.
Para o elemento input foi criado pela HTML5 um novo atributo. Ele permite
relacionar o campo com a lista de opções sugeridas. Trata-se do atributo list. Define-se
um valor qualquer para o atributo list do campo input e um id com o mesmo valor para
o elemento datalist criando um vínculo entre o campo e a lista de opções sugeridas.
<label for=”fru”>Fruta preferida:</label>
<input type=”text” list=”frutas” id=”fru”>
<datalist id=”frutas”>
<option value=”Abacate”>
<option value=”Banana”>
<option value=”Morango”>
</datalist>
Quadro 18 - Exemplo de uso do elemento datalist
2.2.2.7 details
Destina-se a fornecer informações textuais ou controles de formulário adicionais
sobre determinada página ou sobre um conteúdo específico da página. Por padrão, os
conteúdos fornecidos pelo elemento não são colocados à vista do usuário e o acesso a eles
se dá mediante a uma ação, normalmente por clique em um elemento.
O elemento details admite os seguintes atributos: atributos globais e open.
Quando presente, o atributo open faz com que os conteúdos adicionais sejam colocados à
vista quando o elemento é renderizado.
30
O elemento details poderá ser usado em conjunto com o elemento summary (a
seguir).
2.2.2.8 summary
Elemento criado para uso em conjunto com o elemento details e destina-se a
fornecer um rótulo ou breve sumário das informações fornecidas por details. É um
pequeno primeiro-filho do elemento details e que admite apenas os atributos globais.
As especificações preveem que se esse elemento não for usado como elemento-filho
de details o agente de usuário deverá fornecê-lo nativamente com o conteúdo textual
“Details” (SILVA, 2011).
<details>
<summary>Livros de HTML</summary> //clicando neste element
mostra/oculta o conteúdo adicional
<dl>
<dt>Livro HTML 1</dt>
<dd>Ano: 2007</dd>
<dd>Páginas: 400</dd>
<dt>Livro HTML 2</dt>
<dd>Ano: 2009</dd>
<dd>Páginas: 800</dd>
</dl>
</details>
Quadro 19 - Exemplo de uso do elemento summary
2.2.2.9 figure
Destina-se a servir de container para conteúdos independentes relacionados a um
conteúdo específico no fluxo do documento. Use esse elemento para marcar conteúdos
como imagens, ilustrações, diagramas, fotos, gráficos, vídeos, linhas de código e similares.
Os conteúdos do elemento figure, embora relacionados ao conteúdo principal,
podem ser retirados do fluxo principal e serem posicionados tangencialmente a ele, ou
mesmo movidos para uma página específica.
Este elemento admite somente os atributos globais e poderá ser usado em conjunto
com o elemento figcaption (a seguir).
31
2.2.2.10 figcaption
Destina-se a marcar uma legenda para o conteúdo inserido com o uso do elemento
figure e deve constar da marcação como elemento-filho do elemento figure. Admite apenas
os atributos globais.
<figure>
<img src=”imagem1.png”>
<figcaption>Legenda da imagem exibida acima.</figcaption>
</figure>
Quadro 20 - Exemplo de uso do elemento figcaption
2.2.2.11 footer
Este elemento destina-se a marcar o rodapé de uma seção ou da página como um
todo e deve conter informações sobre o conteúdo da seção ou página, como o seu autor,
links para documentos relacionados, direitos autorais e similares.
Em HTML5 uma página poderá conter vários rodapés, pois é válido que cada seção
da página tenha seu próprio rodapé, bem como a página pode também conter seu rodapé à
maneira como estamos acostumados a marcar em (X)HTML.
O elemento footer em si não cria na marcação uma nova seção tal como criam os
elementos article, aside, nav e section.
<article>
<!-- conteúdo do elemento article-->
<footer>
<!-- informações do rodapé de article -->
</footer>
</article>
Quadro 21 - Exemplo de uso do elemento footer
2.2.2.12 header
Este elemento destina-se a marcar o cabeçalho de uma seção ou da página como
um todo e deve conter informações sobre o conteúdo da seção. Também pode ser usado
para marcar uma tabela de conteúdos para a seção, um formulário de busca ou logotipos
32
importantes para a página.
Uma página poderá conter vários elementos header. O elemento header em si não
cria na marcação uma nova seção tal como criam os elementos article, aside, nav e
section.
<body>
<header>
<h1>Título principal da página</h1>
</header>
//conteúdo da página
</body>
Quadro 22 - Exemplo de uso do elemento header
2.2.2.13 hgroup
Esse elemento destina-se a agrupar os elementos h1-h6, quando existir mais de um
deles como cabeçalho de uma seção ou da página. Uma página poderá conter vários
elementos hgroup.
<hgroup>
<h1>Capítulo 2</h1>
<h2>Novidades na HTML5</h2>
</hgroup>
Quadro 23 - Exemplo de uso do elemento hgroup
2.2.2.14 keygen
Este elemento destina-se a manipular um par de chaves criptografadas, públicas e
privadas para autenticação da comunicação com o servidor por ocasião do envio de
formulários.
Atualmente não existe um consenso sobre como implementar esse elemento e nem
mesmo o reconhecimento por parte dos fabricantes de software sobre sua relevância
(SILVA, 2011).
2.2.2.15 mark
Este elemento destina-se a marcar uma palavra ou trecho de texto que deva ser
33
destacado com o propósito de servir como referência. Por exemplo: em uma citação usamos
esse elemento para marcar determinada palavra que se tornou relevante para o contexto em
que a citação foi inserida.
Não confundir o elemento mark com o elemento strong. O elemento strong
destina-se a marcar um trecho importante ao qual se pretende dar forte ênfase e o elemento
mark um trecho relevante para o contexto no qual está inserido e para o qual se pretende
dar destaque.
Atualmente os navegadores renderizam o trecho de texto marcado com esse
elemento com um fundo na cor amarela.
2.2.2.16 meter
Este elemento destina-se a marcar uma medida escalar compreendida entre
determinados limites conhecidos. Não deve ser usado para marcar uma medida
representativa do andamento de uma tarefa, por exemplo, a porcentagem de arquivo sendo
baixada para o disco em uma operação de download. Também não é indicado para marcar
medida representativa de uma porção da qual não se conhece os limites superiores e
inferiores.
O elemento admite os seguintes atributos: atributos globais, value, min, max, low,
high e optimum.
O value define o valor da medida marcada e é um atributo de uso obrigatório.
O min define o valor mínimo da escala à qual a medida marcada pertence e se for
omitido será considerado igual a 0.
O max define o valor máximo da escala à qual a medida marcada pertence e se for
omitido será considerado igual a 1.
O low define um valor dentro da faixa à qual a medida pertence e abaixo do qual se
considera um valor baixo.
O high define um valor dentro da faixa à qual a medida marcada pertence e acima
do qual se considera um valor alto.
O optimum define um valor a ser considerado ótimo dentro da faixa à qual a medida
34
marcada pertence.
O atributo global title deve ser usado para indicar a unidade de medida do valor
representado pelo elemento.
<meter value=”0.7”></meter> //0,7 em uma faixa de 0 a 1 ou seja 70%
<meter value=”8” min=”2” max=”20”></meter> //8 em uma escala de 2 a 20
<meter value=”9” min=”0” max=”10” low=”4” high=”8” optimum=”10”></meter> //9
em uma escala de 0 a 10 e para qual os valores entre 0 e 4 são considerados baixos,
entre 8 e 10 altos e o valor ótimo é 10
<meter value=”80” min=”0” max=”120” title=”Km/h”>Velocidade de
80Km/h</meter> //com o atributo title
Quadro 24 - Exemplo de uso do elemento meter
2.2.2.17 nav
Este elemento destina-se a marcar uma seleção da página que contenha links para
outras páginas ou para outras partes dentro da própria página, ou seja, uma seção contendo
links para navegação externa ou interna.
Nem todos os grupos de links em uma página precisam ser marcados por este
elemento. Somente os maiores grupos de links devem ser com ele marcados (SILVA, 2011).
<body>
<h1>Título da página</h1>
<nav>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
...mais links internos do site...
</ul>
</nav>
</body>
Quadro 25 - Exemplo de uso do elemento nav
2.2.2.18 output
Este elemento destina-se a servir de container para o resultado de um cálculo.
Considere um formulário no qual o usuário define em um dos seus campos, o
número de itens de determinada mercadoria que deseja comprar e cujo preço unitário é
conhecido no site.
Ao preencher o campo “quantidade”, imediatamente aparece em um campo “valor
35
total” o resultado da multiplicação da quantidade pelo preço unitário do produto. Na HTML
atual não existe um elemento específico para marcar o resultado da multiplicação, e o que
se faz é usar um campo de texto (elemento input type=”text”) para apresentar o valor total.
A HTML5 criou o elemento output para marcar resultados de cálculos, que seria
indicado para o “valor total” do exemplo.
<form name=”formulário” method=”get” action=””>
<p><label>Quantidade: <input type=”text” name=”qde”></label></p>
<p>Valor total: R$<output name=”vtotal”></output></p>
</form>
...Introduzir um script para realizar o cálculo e exibir no output...
Quadro 26 - Exemplo de uso do elemento output
2.2.2.19 progress
Este elemento destina-se a marcar o progresso (andamento) de uma tarefa. A
medida do progresso pode ser feita de duas formas distintas.
Forma indeterminada: quando a medição informa o progresso da tarefa, mas não há
uma forma clara de quantificar o quanto falta para a sua conclusão, por exemplo, em tarefas
que dependem de um resposta do servidor.
Forma determinada: quando a medição é feita com um valor numérico compreendido
entre 0 e um valor máximo, sendo assim possível determinar a porcentagem realizada e
faltante para a conclusão da tarefa.
O elemento admite os seguintes atributos: atributos globais, value, max e form.
O value destina-se a definir o quanto de tarefa já foi realizada.
O max destina-se a definir o quanto é necessário para realizar a tarefa.
O form destina-se a associar de forma única o elemento progress ao formulário ao
qual ele pertence, quando for o caso. O valor deste atributo deve ser igual ao valor do
atributo id do formulário.
36
<section>
<h2>Andamento da tarefa</h2>
<p>Progresso:<progress id=”p” max=”100”><span>0</span>%</progress></p>
...Introduzir um script para realizar o carregamento do progresso...
</section>
Quadro 27 - Exemplo de uso do elemento progress
2.2.2.20 section
Este elemento destina-se a marcar uma seção na página. Entende-se como seção
um grupo de conteúdos tratando de um mesmo tema e tipicamente contendo um cabeçalho.
O elemento section não deve ser considerado como um container genérico.
Quando for necessária a utilização de um elemento container genérico a ser usado para fins
de estilização ou para ser manipulado por script, deve-se usar o elemento div (SILVA,
2011).
<article>
<section>
<h1>Rio Grande do Sul</h1>
<p>Descrição sobre o estado</p>
</section>
<section>
<h1>Santa Catarina</h1>
<p>Descrição sobre o estado</p>
</section>
<section>
<h1>São Paulo</h1>
<p>Descrição sobre o estado</p>
</section>
</article>
Quadro 28 - Exemplo de uso do elemento section
2.2.2.21 time
Este elemento destina-se a marcar tanto um horário na faixa de 0-24h quanto uma
data do calendário gregoriano. A finalidade do time é fornecer uma codificação para data-
hora de modo que máquinas possam ler o código e processar, por exemplo, agendando
eventos em um calendário ou lembrando datas de aniversário.
O elemento admite os seguintes atributos: atributos globais, datetime e pubdate.
O datetime, quando especificado, destina-se a definir o horário e/ou data que está
sendo marcado. Se não for especificado, o horário e/ou data deverá ser inserido como
37
conteúdo do elemento. O valor desse atributo deve ser um alfanumérico representativo do
grupo data-hora em formato válido para a linguagem HTML.
O pubdate é booleano e quando for especificado informa que o horário e/ou data
marcados se referem ao instante em que o conteúdo foi publicado. Uma página poderá
conter somente um elemento do tipo time com o atributo pubdate que se refere ao
instante de publicação da página. Contudo, dentro de uma mesma página, elementos
article diferentes podem conter diferentes elementos time com datas de publicação
diferentes.
<article>
<h1>Tarefas</h1>
<footer>Publicado em: <time pubdate>19-07-2012</time>.</footer>
<p>Trocar a lâmpada da sala.</p>
</article>
<article>
<h1>Tarefas</h1>
<footer>
Publicado em: <time pubdate datetime=”2012-07-19”>Hoje</time>.
</footer>
<p>Trocar a lâmpada da sala.</p>
</article>
Quadro 29 - Exemplo de uso do elemento time
2.2.2.22 video
Este elemento destina-se a incorporar um vídeo ou filme na página web. Basta
declarar o caminho para o arquivo de vídeo no atributo src do elemento. O vídeo é
reproduzido com as funcionalidades nativas do navegador.
Navegadores que não suportam o elemento video renderizam normalmente o
conteúdo do mesmo. Assim, para servir o vídeo para esses navegadores, é preciso definir a
incorporação do vídeo com HTML, por exemplo, com o uso de Flash.
<video src=”video.ogv”>
<!--Código HTML para inserção do vídeo com Flash-->
</video>
Quadro 30 - Exemplo de uso do elemento vídeo
38
Um vídeo é constituído por uma série de informações necessárias para apresentá-lo
em determinada mídia. Informações, como trilhas de áudio, stream de vídeo, metadados,
título, subtítulos, parâmetros de sincronização, etc, estão envolvidos na compressão do
vídeo. Os containers de compressão relevantes para a HTML5 são:
Ogg para a extensão .ogv
MPEG4 para as extensões .mp4 e .m4v
WebM para a extensão .webm
Flash Video para a extensão .flv
Além da compressão, os arquivos de vídeo são também codificados. As diferentes
formas de codificação de vídeo são conhecidas por codecs, abreviatura para as palavras
codificação/decodificação. Os codecs relevantes para a HTML5 são:
H.264 para MPEG
MPEG4 para mp4
Theora para ogv
VP8 para WebM
A tendência atual é deixar por conta do fabricante a implementação do tipo de
compressão e codecs. Isso obriga os desenvolvedores web a servirem marcações para
vários formatos se pretendem criar uma implementação crossbrowser. O elemento video
admite como elemento-filho o elemento source cuja finalidade é substituir o atributo src e
permitir formatos alternativos para o vídeo a ser servido.
O elemento source destina-se a permitir que se definam arquivos diferentes para
incorporar as mídias audio e video em uma página e admite os seguintes atributos:
globais, src, type e media.
O atributo src aponta para o endereço do arquivo de mídia a incorporar na página. É
um atributo obrigatório cujo valor é um URL não vazio.
O atributo type destina-se a informar ao navegador o tipo de mídia a ser
incorporado de modo que ele possa decidir o que fazer antes de baixar o arquivo. O valor
desse atributo deve ser um MIME type válido (SILVA, 2011).
39
O atributo type admite ainda o parâmetro codecs que determinados MIME type
definem e deve ser informado para que o navegador saiba como o arquivo foi codificado.
O atributo media destina-se a informar ao navegador o tipo de mídia. Os valores
possíveis para esse atributo são os listados nas especificações para Media Queries e o
valor padrão é all.
<video>
<source src=”video.ogv” type=”video/ogg; codecs=‟theora, vorbis‟”
media=”screen”>
<source src=”video.mp4” type=”video/mp4; codecs=‟mp4v.20.8,
mp4a.40.2‟” media=”screen”>
<source src=”video.webm” type=”video/webm”>
<!--Código HTML para inserção de video.mp4 com Flash-->
</video>
Quadro 31 - Exemplo de uso do elemento video
Os atributos do elemento video são: globais, src, preload, autoplay, loop,
controls, poster, audio, width e height.
O atributo src destina-se a indicar o caminho para o arquivo de vídeo a ser
incorporado na página.
O atributo preload indica como o autor espera que seja o pré-carregamento do
vídeo na página, visando otimizar a experiência do usuário. Esse atributo admite os valores
none, metadata e auto. O valor none instrui o navegador a não fazer o pré-carregamento
do vídeo. O atributo metadata instrui o navegador a fazer o pré-carregamento somente dos
metadados do vídeo, como dimensões, duração, controles, etc. O valor auto define que o
vídeo será pré-carregado.
Os atributos autoplay e loop destinam-se respectivamente a iniciar o vídeo
automaticamente, tão logo a página seja carregada e a repetir o som indefinidamente.
<video autoplay loop>
<source src=”video.ogv” type=”video/ogg”>
<source src=”video.mp4” type=”video/mp4”>
<!--Código HTML para inserção de vídeo com Flash-->
<p>Seu navegador não suporta o elemento video da HTML5.
<br>Faça <a href=”video.mp4”>download de video.mp4</a></p>
</video>
Quadro 32 - Exemplo de uso do elemento video
40
A presença do atributo controls faz com que o navegador renderize uma barra de
controle nativa contendo botões do tipo play e pause bem como controle de volume.
<video controls>
<source src=”video.ogv” type=”video/ogg”>
<source src=”video.mp4” type=”video/mp4”>
<p>Seu navegador não suporta o elemento video da HTML5.
<br>Faça <a href=”video.mp4”>download de video.mp4</a></p>
</video>
Quadro 33 - Exemplo de uso do elemento video
O atributo poster destina-se a definir uma imagem a ser exibida inicialmente e
enquanto as informações sobre o vídeo não estiverem carregadas ou o usuário não acionar
o início do vídeo. Quando esse atributo não é definido, a renderização inicial apresenta o
primeiro quadro do vídeo. O valor desse atributo deve ser o URL de uma imagem (SILVA,
2011).
<video poster=”capa.jpg” controls>
<source src=”video.ogv” type=”video/ogg”>
<source src=”video.mp4” type=”video/mp4”>
<p>Seu navegador não suporta o elemento video da HTML5.
<br>Faça <a href=”video.mp4”>download de video.mp4</a></p>
</video>
Quadro 34 - Exemplo de uso do elemento video
O atributo audio admite o valor muted que, quando presente, faz com que o som do
vídeo seja por padrão colocado no estado mudo.
<video poster=”capa.jpg” controls audio=”muted”>
<source src=”video.ogv” type=”video/ogg”>
<source src=”video.mp4” type=”video/mp4”>
<p>Seu navegador não suporta o elemento video da HTML5.
<br>Faça <a href=”video.mp4”>download de video.mp4</a></p>
</video>
Quadro 35 - Exemplo de uso do elemento vídeo
41
2.3 CSS
Quando a HTML foi criada, a intenção não era a de formatar informação. As CSS
foram propostas em 1994 como uma linguagem para cuidar de toda a parte visual de
apresentação das informações criadas pela HTML. Em 1995 o projeto foi apresentado ao
W3C, que se interessou pelo projeto e resolveu continuar sua implementação. O resultado
apareceu logo em 1996, quando foi lançada a recomendação oficial pelo W3C do CSS Level
1 (CSS 1). Dois anos depois, no dia 12 de Mario de 1998, foram lançadas as
recomendações das CSS Level 2. As CSS Level 3 (CSS 3), ainda estão em fase de
desenvolvimento mas boa parte de suas implementações já são aceitas em um grande
número de navegadores (EIS, 2006).
CSS é a abreviação para o termo em inglês Cascading Style Sheet, que traduzido
para o português significa folhas de estilo em cascata. A definição mais precisa e simples
para as CSS diz que folha de estilo em cascata é um mecanismo simples para adicionar
estilos aos documentos web.
As CSS são utilizadas para devolver à marcação HTML o propósito inicial da
linguagem. A HTML foi criada para ser uma linguagem exclusivamente de marcação e
estruturação de conteúdos, ou seja, segundo seus idealizadores, não cabe à HTML fornecer
informações ao agente do usuário sobre a apresentação dos elementos. Cores de fontes,
tamanhos de textos, posicionamentos e todo o aspecto visual de um documento não devem
ser funções da HTML e sim das CSS (SILVA, 2012).
2.3.1 Regra CSS
A regra CSS é uma unidade básica da folha de estilo. O termo unidade básica neste
caso significa a menor porção de código capaz de produzir efeito de estilização. Uma regra
CSS é composta de duas partes: o seletor e a declaração. A declaração inclui uma
propriedade e um valor. A sintaxe para se escrever uma regra CSS pode ser vista na Figura
3.
42
Figura 3 - Sintaxe da regra CSS
Componentes de uma regra CSS:
Seletor: é o alvo da regra CSS.
Declaração: determina os parâmetros de estilização. Compreende a
propriedade e o valor.
Propriedade: define qual será a característica do seletor a ser estilizada.
Valor: é a quantificação ou a qualificação da propriedade.
Uma regra CSS ainda pode conter várias declarações que deverão ser separadas
por ponto e vírgula.
p {
color: red;
background-color: Black;
font-size: 12px;
}
Quadro 36 - Exemplo de regra CSS
No código acima identificamos os seguintes componentes da regra CSS:
Seletor: é o elemento p. Seletores para elementos da marcação são
denominados seletores de tipos.
Declarações: são três – color: red; background-color: black;
font-size: 12px;.
43
Propriedades: são três – color, que define a cor dos textos contidos em p,
background-color, que define a cor de fundo do elemento p e font-
size, que define o tamanho da fonte para o elemento p.
Quando o valor de uma propriedade da regra CSS for uma palavra composta,
separada por espaços, deve-se usar sinais de aspas duplas ou, alternativamente, de aspas
simples.
p {
font-family: “Times New Roman”;
}
p {
font-family: „Times New Roman‟;
}
Quadro 37 - Exemplo de regra CSS
Não se usam aspas em palavras compostas separadas por hífen.
p {
font-family: Sans-serif;
}
Quadro 38 - Exemplo de regra CSS
A sintaxe de uma regra CSS não é sensível ao tamanho da fonte. Você pode usar
letras maiúsculas ou minúsculas indiferentemente, múltiplos espaços são tratados como
espaço simples. Usar ou não espaço entre os componentes fica a critério do desenvolvedor
(SILVA, 2012).
2.3.2 Categorias de valores CSS
Para poder aplicar uma regra CSS, o agente de usuário identifica o valor da
propriedade e renderiza o elemento, casado pelo seletor, de acordo com aquele valor.
44
p { font-family: Arial, Sans-serif; } /*estiliza p com fonte na família
especificada (valor)*/
p { width: 400px; } /*estiliza p com largura 400px*/
p { font-size: 120%; } /*estiliza p com tamanho de fonte 1.2 vezes o valor
de referência*/
p { background-color: red; } /*estiliza p com fundo na cor vermelha*/
p { height: 2em; } /*estiliza p com altura 2 vezes o valor de referência*/
Quadro 39 - Regras CSS e seus valores
Alguns valores nos exemplos acima são absolutos e outros relativos, que dependem
de um valor de referência, tais como as medidas CSS em porcentagem. Os valores CSS
podem ser agrupados em oito categorias.
2.3.2.1 Palavra-chave
Um valor CSS é do tipo palavra-chave quando expresso por uma string predefinida
nas especificações. Cores são um exemplo para este tipo de valor.
p {
color: red;
background-color: acqua;
border-color: teal;
}
Quadro 40 - Exemplo de valores palavra-chave
Os valores red, acqua e teal são palavras-chave para cores, previstas nas
especificações para as CSS3.
2.3.2.2 Número
Um valor CSS do tipo número é expresso por um número inteiro ou por um número
real. Na sintaxe, números inteiros são representados por <integer> e os reais por
<number>. Números inteiros são aqueles formados por um ou mais algarismos de 0 a 9, e
números reais são formados por um ou mais algarismos de 0 a 9, seguidos de uma vírgula e
seguidos de um ou mais algarismos de 0 a 9.
Nas CSS, números podem ser precedidos dos sinais “+” e “-“ para indicar o sinal do
número. Quando usados, esses dois caracteres passam a fazer parte do valor CSS.
45
2.3.2.3 Número não negativo
Várias propriedades das CSS que admitem um valor do tipo número fazem restrição
quanto à faixa de números admitidos. Há propriedades, tal como a width, destinada a
definir a largura de um elemento, que não admitem números negativos.
A sintaxe prevista neste caso para as especificações é <non-negative-integer>
para números inteiros não negativos e <non-negative-number> para números reais não
negativos.
2.3.2.4 Número com unidade de medida
Os valores CSS, quando expressos com números seguidos por uma unidade de
medida, são classificados em cinco categorias, conforme descritas a seguir (SILVA, 2012).
Comprimento
O comprimento se refere às medidas horizontal e vertical. A sintaxe prevista nas
especificações para essa categoria é <lenght>. Um valor CSS que usa uma unidade de
medida de comprimento é composto por um número seguido da abreviatura para uma
unidade de medida válida. Por exemplo: 14px, 12em e 18pt. Se o número for zero, a
unidade de medida é opcional.
Medida Relativa
Medida relativa é aquela cujo valor é determinado em função de outro valor para uma
propriedade que lhe serve de referência. Definir medidas relativas em uma folha de estilo
facilita o escalonamento e possibilita servi-la para diferentes tipos de mídias, atendendo as
requisições para o design responsivo.
As unidades de medidas relativas nas CSS3 são mostradas na tabela a seguir.
Unidade Relativa
em à font-size do elemento (ou do elemento-pai)
ex ao valor x-height da fonte do elemento
px ao dispositivo de renderização
gd ao grid definido pelo “layout-grid”, descrito no Módulo Texto da CSS3
rem à font-size do elemento-raiz
vw à largura da viewport
46
vh à altura da viewport
vm à largura ou altura da viewport (a menor das duas)
ch à largura do número 0, renderizado de acordo com font-size. Se não existir 0
na fonte especificada, a largura média dos caracteres.
Tabela 1 - Unidades de medida relativa nas CSS3
Medida absoluta
Uma unidade de medida absoluta é aquela cujo valor é determinado e fixo. Essas
unidades são úteis para uso quando se conhece as dimensões físicas da mídia para a qual
a folha de estilo será usada.
As unidades de medidas absoluta nas CSS3 são mostradas na tabela a seguir.
Unidade Descrição
in polegada; 1 polegada = 2,54cm
cm centímetro
mm milímetro
pt ponto; 1 ponto = 1/72 polegada
pc pica; 1 pica = 12 pontos
Tabela 2 - Unidades de medida absoluta nas CSS3
Porcentagem
Para definir um valor em porcentagem em CSS basta adicionar um número seguido
pelo sinal %. A sintaxe prevista nas especificações para designar essa categoria é
<percentage>. Porcentagem são valores dependentes de outro valor.
As propriedades que admitem valores em porcentagem também definem qual valor
de referência a considerar para cálculo da porcentagem. O valor de referência pode ser o
valor de outra propriedade do mesmo elemento ao qual a porcentagem foi aplicada, ou de
um elemento ancestral ou o valor de um contexto de formatação, como a largura de um
bloco de conteúdo.
Ângulo
Para definir um valor em medida angular nas CSS se deve inserir um número
imediatamente seguido por uma unidade de medida angular. A sintaxe prevista nas
47
especificações para designar essa categoria é <angle>. As unidades de medida angular
em CSS3 estão na tabela a seguir.
Unidade Descrição
deg Graus
grad Grados
rad Radianos
turn Volta
Tabela 3 - Unidades de medida angulares nas CSS3
Valores em medidas angulares são usados, por exemplo, para definir propriedades
destinadas à mídia speech (mídia falada, tal como leitores de tela) ou às transformações
CSS3.
2.3.2.5 Número não negativo com unidade de medida
Valores CSS expressos com números não negativos com unidade de medida são
classificados em duas categorias, conforme descritas a seguir (SILVA, 2012).
Hora
Para definir um valor CSS em formato de hora é preciso inserir um número seguido
imediatamente por uma unidade identificadora de tempo em segundos. A sintaxe prevista
nas especificações para designar essa categoria é <time>. As unidades de medida de
tempo em CSS3 estão na tabela a seguir.
Unidade Descrição
ms Milissegundo
s Segundo
Tabela 4 - Unidades de tempo nas CSS3
Valores em unidades de tempo são usados, por exemplo, para definir propriedades
destinadas à mídia speech (mídia falada, tal como leitores de tela) ou duração de
animações e transições CSS3.
48
Frequência
Para definir um valor CSS em medida de frequência é necessário inserir um número
seguido imediatamente de uma unidade identificadora de frequência em hertz. A sintaxe
prevista nas especificações para designar essa categoria é <frequency>. As unidades de
medida de frequência nas CSS3 estão listadas na tabela a seguir.
Unidade Descrição
Hz Hertz
kHz Quilohertz
Tabela 5 - Unidades de frequência nas CSS3
Valores expressos em medidas de frequência são usados, por exemplo, para definir
propriedades destinadas a mídia speech (mídia falada, tal como leitores de tela).
2.3.2.6 String
Valores em CSS expressos com strings devem ser grafados com aspas simples („)
ou duplas (“). Uma não pode ocorrer dentro de outra, a menos que seja escapada com uma
barra invertida (\).
Uma string não poderá conter quebra de linha, a menos que se use o caracter \A,
que representa uma nova linha em CSS.
É possível quebrar uma string em substrings com o uso do caracter barra invertida
(\), para fins de legibilidade do código.
“Esta é uma „string‟.” /*aspas simples dentro de aspas duplas*/
„Esta é uma “string”.‟ /*aspas duplas dentro de aspas simples*/
“Esta é uma \”string\”.” /*aspas duplas escapadas dentro de aspas duplas*/
„Esta é uma \„string\‟.‟ /*aspas simples escapadas dentro de aspas simples*/
“Esta string está na primeira linha. \A E esta na segunda.
“Esta é uma string longa\
que foi quebrada para\
fins de legibilidade.”
Quadro 41 - Exemplo do uso de strings
49
2.3.2.7 Notação funcional
Os valores CSS podem ser expressos por uma função, e nesses casos são
classificados como valores em notação funcional. Em CSS3, valores funcionais são usados
para definir cores, atributos e URIs.
A sintaxe para escrita de um valor funcional é o nome da função seguido de uma lista
de argumentos entre parênteses.
p { background-color: rgb(255, 0, 0); }
img { margin-top: attr(height, px); }
div { background-image: url(http://site.com.br/imagem.gif); }
Quadro 42 - Exemplo do uso de valor funcional
Nos três exemplos mostrados, os valores das propriedades CSS, em destaque no
código, são do tipo valor funcional e as respectivas funções CSS rgb, attr e url retornam
um valor a ser aplicado nas propriedades definidas para os seletores p, img e div,
respectivamente.
2.3.2.8 Casos especiais
Valores CSS que ficam fora das sete categorias anteriores pertencem a uma
categoria denominada “casos especiais”. Os valores CSS enquadrados nessa categoria são
os valores para definição de famílias de fontes e valores para definição de cores em sintaxe
hexadecimal (SILVA, 2012).
p { background-color: #f00; }
h1 { font-family: Arial, Verdana, Sans-serif; }
Quadro 43 - Exemplo do uso de valores em casos especiais
2.3.3 Tipos de valores CSS
É importante conhecer o conceito de valor CSS para efeito de aplicação da regra
CSS no elemento.
p { font-size: 120%; }
50
O valor 120% para a propriedade font-size da regra CSS do quadro 37 enquadra-
se no grupamento de valores denominado “Número com unidade de medida”. Contudo, para
aplicar valores CSS o navegador precisa, em certos casos, efetuar cálculos para chegar ao
valor a aplicar, como é o caso da porcentagem.
Ao longo do processo de cálculo o navegador passa por etapas, e em cada etapa
chega a um tipo de valor.
p { font-family: Arial, Sans-serif; } /*estiliza p com fonte na família
especificada (valor)*/
p { width: 400px; } /*estiliza p com largura 400px*/
p { font-size: 120%; } /*estiliza p com tamanho de fonte 1.2 vezes o valor de
referência*/
p { background-color: red; } /*estiliza p com fundo na cor vermelha*/
p { height: 2em; } /*estiliza p com altura 2 vezes o valor de referência*/
Quadro 44 - Regras usando tipos de valores CSS
Alguns valores das regras do Quadro 44 são absolutos e outros relativos, tais como
as medidas CSS em porcentagem e em. Para aplicar valores CSS, os mecanismos das CSS
consideram cinco tipos de valores que serão explicados a seguir.
2.3.3.1 Valor inicial
Todas as propriedades CSS possuem por padrão um valor denominado valor inicial.
Esse valor é definido por um mecanismo nativo do agente de usuário. Não há uma
padronização para o valor inicial das propriedades CSS e cada navegador implementa esta
funcionalidade à sua maneira, o que pode causar inconsistência de renderização em
diferentes navegadores.
Todos os navegadores adotam o mesmo valor para muitas das propriedades CSS.
As inconsistências, em sua maioria, estão ligadas à definição de valores iniciais para
margin e padding. No Quadro 45 temos alguns valores iniciais para determinadas
propriedades CSS.
51
border: none;
color: black;
background: transparent;
font-family: serif;
font-size: 16px;
Quadro 45 - Valores iniciais de propriedades CSS
Todas as propriedades CSS admitem a palavra-chave initial para forçar a
adoção do valor inicial da propriedade.
2.3.3.2 Valor especificado
Tão logo um documento seja parseado e a árvore do documento tenha sido
construída, o agente de usuário deverá atribuir a cada propriedade CSS um valor. A
atribuição do valor segue um mecanismo que obedece a três ordens de procedência
(SILVA, 2012).
Se o efeito cascata resulta em um valor, adote esse valor;
Não havendo um valor de cascata e se o valor da propriedade for herdável,
adote o valor herdado;
Não ocorrendo as hipóteses anteriores, adote o valor inicial da propriedade.
O valor resultante da aplicação desse mecanismo é denominado valor especificado.
2.3.3.3 Valor computado
O valor especificado pode ser absoluto ou relativo. Se o valor especificado for
absoluto, então o valor computado é igual a ele e nenhum cálculo é necessário para se
chegar ao valor computado.
Caso o valor especificado seja expresso em medida relativa, é necessário fazer um
cálculo para chegar ao valor computado.
2.3.3.4 Valor usado
É o valor efetivamente usado para renderizar o documento. Valores computados
podem ser processados antes mesmo de o documento ter sido formatado, contudo alguns
valores só podem ser computados com o conhecimento do layout do documento.
Denominamos de valor usado aquele resultante do valor computado depois de
52
resolvidas todas as pendências de layout.
2.3.3.5 Valor atual
A princípio o valor usado é aquele adotado para renderizar o documento. Contudo,
pode ocorrer o caso em que o agente de usuário não seja capaz de renderizar o valor
usado. Nestes casos, o valor atual deverá ser o resultado do arredondamento do valor
usado, pois não há como representar frações de pixel.
2.3.4 Vinculando folhas de estilo a documentos
Após finalizar uma folha de estilo, é preciso informar ao documento onde ele deve
buscá-la. É preciso um método capaz de vincular a folha de estilo ao documento ao qual ela
será aplicada.
As folhas de estilo podem ser escritas no próprio documento HTML ao qual serão
aplicadas ou em arquivos externos independentes.
2.3.4.1 Estilos inline
O método mais simples e direto de aplicar estilos a um elemento da marcação é com
o emprego do atributo style da HTML. Você escreve as regras de estilo diretamente dentro
da tag de abertura do elemento HTML a estilizar.
<p style=”width: 200px; color: White; background: red; font-size: 12px;”>
<!—Parágrafo com aplicação de estilos inline -->
</p>
Quadro 46 - Exemplo de uso CSS inline
Este método dificulta a manutenção do código e retira um dos maiores poderes da
folha de estilo, que é o controle centralizado da apresentação. Utilizando o método inline,
será preciso percorrer todo o código HTML cada vez que uma modificação for necessária.
Em um sistema grande, esse processo se tornará muito oneroso.
2.3.4.2 Estilos incorporados
Outro método de trabalhar com folhas de estilo no próprio documento HTML é com o
uso do elemento style. Você escreve as regras de estilo dentro das tags
53
<style></style>.
<head>
<style type=”text/css” media=”all”>
body {
margin: 0;
padding: 0;
font-size: 80%;
color: black;
background: White;
}
</style>
</head>
Quadro 47 - Exemplo de uso CSS incorporado
A vantagem do método incorporado sobre o inline é que agora localizamos com
maior facilidade a folha de estilo, mas há a desvantagem de colocar a folha de estilos dentro
do próprio documento. Não seria prático vincular uma folha de estilo a vários documentos
utilizando-se deste método Sempre que for preciso alterar a apresentação, será necessário
abrir todos os documentos existentes e modificar a regra CSS em cada um deles.
Um bom uso para este método seria se um documento específico do site utiliza-se
uma folha de estilo diferente dos demais (SILVA, 2012).
2.3.4.3 Estilos externos
Uma folha de estilo externa é aquela que não foi escrita no próprio documento
HTML. Trata-se de um arquivo de texto contendo as regras de estilo e os comentários CSS.
Uma arquivo de folha de estilo deve ser gravado com a extensão .css e pode ser vinculado
a um ou vários documentos HTML de duas maneiras distintas.
Folhas de estilo linkadas
É quando uma folha de estilo externa é vinculada a um documento HTML
empregando-se o elemento link. O elemento deve estar contido na seção head do
documento e tem por finalidade associar outros documentos ao documento no qual ele está
contido.
54
<head>
...
<link rel=”stylesheet” type=”text/css” href=”estilo.css” media=”all”
/>
...
</head>
Quadro 48 - Exemplo de uso CSS externo
O atributo href aponta para o endereço no qual se encontra o arquivo da folha de
estilo.
Folhas de estilo importadas
Nesse método, você vincula uma folha de estilo externa a um documento usando a
diretiva @import dentro do elemento style.
<head>
...
<style type=”text/css”>
@import url(“estilos.css”);
</style>
...
</head>
Quadro 49 - Exemplo de uso CSS importado
É válido importar mais de uma folha de estilo. A declaração de uma folha de estilo
dentro de outra deve ocupar a primeira linha da folha, exceto no caso em que se use uma
declaração de codificação de caracteres da folha de estilo. A diretiva @charset é usada
para declarar a codificação de caracteres de uma folha de estilos e deve ocupar a primeira
linha na folha de estilo.
<head>
...
<style type=”text/css”>
@charset “utf-8”
@import “main.css”
body {
margin: 0;
font: 62.5% Arial, Sans-serif;
}
... mais regras de estilo ...
</style>
...
</head>
Quadro 50 - Exemplo de uso CSS importado
55
A diretiva @import deve vir antes de todas as demais regras de estilo para o
documento. Havendo necessidade de vincular outras folhas de estilo ao documento, elas
deverão ser declaradas após a diretiva.
Vincular folhas de estilo externas permite que se apliquem regras de estilo comuns a
todos os documentos de um site. A vantagem é que o autor controla a apresentação do site
em um arquivo central. A alteração de uma cor ou do tamanho de fonte na folha de estilo
imediatamente se reflete no site inteiro (SILVA, 2012).
2.3.5 Módulos CSS3
O W3C prefere o termo nível em vez de versão, para designar a progressão dos
diferentes documentos que especificam as CSS, alegando ser aquele o termo mais
apropriado. Argumenta informando que cada novo nível é projetado com base no nível
anterior, refinando definições e acrescentando novas funcionalidades às já existentes. O
conjunto de funcionalidades de níveis anteriores é, sempre, um subconjunto das
funcionalidades do nível atual, portanto por ela plenamente suportado. Com isso, um agente
de usuário que suporte as funcionalidades das CSS de nível atual suporta também todas as
funcionalidades das CSS de níveis anteriores.
O modelo de desenvolvimento das especificações para as CSS3 alterou o modelo
adotado pelos níveis anteriores. Enquanto estas foram desenvolvidas em um documento
único, as CSS3 estão sendo desenvolvidas em módulos.
As especificações existentes foram divididas em assuntos e criou-se para cada
assunto uma especificação independente. Por exemplo: as especificações para seletores
CSS3 constituem um módulo, as bordas e fundos outro módulo, as cores outro, e assim por
diante.
Cada módulo CSS3 é desenvolvido de maneira independente e segue um
cronograma próprio.
A vantagem da modularização está no fato de que o desenvolvimento das
funcionalidades de um módulo não mais depende do andamento dos outros módulos, como
aconteceu com o desenvolvimento dos níveis anteriores das CSS. Isso permite que
56
fabricantes comecem a implementar, desde já, funcionalidades previstas em módulos mais
adiantados no seu desenvolvimento. Muitas das funcionalidades das CSS3 já estão sendo
largamente empregadas (SILVA, 2012).
2.3.6 Esquemas de posicionamento CSS
As propriedades CSS position e float determinam como um box será
posicionado no modelo visual de formatação de um documento. As recomendações do W3C
para as CSS preveem a existência de três esquemas de posicionamento: normal, float e
absoluto.
Elementos nível de bloco formam boxes, que será denominado simplesmente de
bloco. Elementos inline formam boxes inline. Assim, para melhor entendimento, considere
há existência de dois tipos de blocos: os que são formatados pelos elementos nível de
bloco, tais como div, h1-h6, p, blockquote, etc; e os inline, tais como strong, b, em,
img, etc.
As especificações para as CSS3 criaram outros esquemas de posicionamento que
visam facilitar a construção de layouts sem as restrições apresentadas pelos esquemas de
posicionamento de outros níveis de CSS.
Os novos esquemas de posicionamento das CSS3 serão explicados a seguir.
2.3.6.1 Esquema normal
Esquema normal ou fluxo normal é o esquema padrão de posicionamento dos
blocos. Segundo as regras do esquema, elementos nível de bloco são colocados em
sequência vertical, dentro do elemento que os contém e de cima para baixo, um após o
outro na ordem em que aparecem no fluxo do documento, isto é, na marcação HTML.
Elementos nível de bloco
A distância vertical entre cada elemento nível de bloco adjacente é determinado pela
propriedade margin. Sem uma definição de regra de estilo, uma margem vertical para o
bloco será tomada a margem inicial padrão, própria de cada elemento que forma o bloco.
Margens verticais entre blocos adjacentes sempre se sobrepõem (collapse), ou seja, em
lugar de somar a margem inferior de um bloco com a margem superior do bloco que lhe
57
segue para obter a margem final, esta será tomada como sendo a maior entre as duas,
conforme mostrado no esquema da Figura 4.
Figura 4 - Sobreposição de margens
Elementos inline
Para elementos inline, a formatação se dá em linha e dentro do bloco que contém o
bloco inline. A largura de um bloco inline é limitada pela propriedade width do seu bloco
container. Excedida aquela largura, o conteúdo do bloco inline passa para a linha seguinte.
<p>Este texto contém <em>quatro</em> elementos <b>inline</b></p>
O código anterior trata-se de um parágrafo p contendo um elemento em e um
elemento b. Podemos identificar quatro blocos inline contidos no parágrafo. Os conteúdos
dos quatro blocos e seus tipos são:
Este texto contém (bloco anônimo)
quatro (bloco inline)
elementos (bloco anônimo)
inline (bloco inline)
O texto no interior do parágrafo será formatado conforme a largura definida para o
58
parágrafo.
Posicionamento relativo
A declaração position: relative sozinha não causa nenhum efeito no
posicionamento do bloco. Quando usada em conjunto com as propriedades top, right,
bottom e left, movimentam o bloco da sua posição inicial de uma distância definida pelos
valores declarados nessas propriedades. Medidas de comprimento CSS são empregadas
para definir as coordenadas do deslocamento (SILVA, 2012).
As propriedades left e right estipulam o quanto o bloco deve ser deslocado para
a esquerda ou direita, respectivamente, e as propriedades top e bottom estipulam o
deslocamento para cima ou para baixo, respectivamente.
Na Figura 5 é mostrado o deslocamento de um bloco para o qual foi declarada a
seguinte regra CSS de posicionamento relativo:
div.dois {
position: relative;
left: 180px;
top: 30px;
}
Quadro 51 - Regra CSS de posicionamento relativo
O bloco deslocado com a declaração position: relative sai da posição padrão,
mas o espaço que ele ocupava naquela posição é preservado.
Figura 5 - Posicionamento relativo
59
2.3.6.2 Esquema float
O esquema float de posicionamento é estipulado pela propriedade CSS float e
seus valores left, right, none e inherit. Outra propriedade usada no esquema é a
clear e seus valores none, left, right, both e inherit.
Segundo as regras desse esquema, o bloco é retirado de sua posição no fluxo do
documento e flutuando para a direita ou para a esquerda. O espaço original ocupado pelo
bloco não será deixado livre, sendo preenchido pelo elemento que lhe segue no fluxo do
documento.
Flutuando elementos nível de bloco
Considerando vários blocos dentro de um mesmo container, o primeiro bloco flutuado
desloca-se lateralmente até tocar as bordas lateral e superior do elemento que o contém. O
segundo desloca-se até tocar a borda do primeiro e assim sucessivamente enquanto houver
espaço horizontal no elemento container. Ao faltar espaço, o próximo bloco ocupará uma
linha abaixo e assim por diante.
Na Figura 6 é mostrada uma ilustração da regra para flutuar blocos. À esquerda, o
diagrama com seis blocos na posição padrão, e à direita, o resultado do declarar float:
left para todos os blocos.
Figura 6 - Posicionamento float
60
Uma aplicação do comportamento de uma sequência de blocos flutuados à esquerda
é na construção de uma barra de navegação.
2.3.6.3 Esquema absoluto
O esquema absoluto de posicionamento é definido pela propriedade CSS position
e seus valores absolute e fixed. Ao contrário do posicionamento com o valor relative,
esse posicionamento retira o elemento posicionado do fluxo do documento, fazendo com
que o elemento que se segue ocupe seu lugar (SILVA, 2012).
Posicionamento absoluto
A declaração position: absolute retira o bloco do seu posicionamento na
marcação e faz com que o bloco seguinte na marcação HTML se desloque para a posição
que ele ocupa. Segue código para exemplificação:
HTML
<div id=”primeira”>
<p class=”um>PARÁGRAFO UM<br/>
...texto...texto...texto</p>
<p class=”dois”>PARÁGRAFO DOIS<br/>
...texto...texto...texto</p>
</div>
<div id=”segunda”>
<p class=”tres”>PARÁGRAFO TRÊS<br/>
...texto...texto...texto</p>
<p class=”quatro”>PARÁGRAFO QUATRO<br/>
...texto...texto...texto</p>
<p class=”cinco”>PARÁGRAFO CINCO<br/>
...texto...texto...texto</p>
</div>
CSS
div {
width: 300px;
border: 2px solid #0000;
padding: 5px 20px;
margin-top: 10px;
}
p {
width: 200px;
border: 2px solid #0000;
}
p.tres {
position: absolute;
}
Quadro 52 - Exemplo CSS de posicionamento absoluto
61
O código HTML cria dois blocos div, containers, o primeiro com dois parágrafos e o
segundo com três parágrafos. No código CSS foram definidas as bordas para os elementos
da marcação além de aplicado o posicionamento absoluto no parágrafo três. O resultado
pode ser visualizado na Figura 7.
Figura 7 - Exemplo CSS de posicionamento absoluto
Note que a simples declaração position: absolute, sem definir as coordenadas
do deslocamento, fez com que o parágrafo três permanecesse no mesmo lugar, liberando o
espaço que ocupava e causando a subida dos parágrafos quatro e cinco que lhe seguem no
fluxo do documento. No contexto, o parágrafo três obscureceu a parte do parágrafo quatro
que ficou atrás dele no eixo z.
Posicionamento estático
Outros valores possíveis para a propriedade CSS position são: static, fixed e
inherit. O valor static é o valor inicial ou padrão de posicionamento. Os blocos
permanecem como no esquema fluxo normal. O uso dessa declaração é feito com a
finalidade de sobrescrever um posicionamento declarado anteriormente. As propriedades de
62
posicionamento top, right, bottom e left não se aplicam para esse posicionamento.
Posicionamento fixo
O posicionamento com a declaração position: fixed pode ser considerado um
caso especial de posicionamento absoluto. A diferença é que nesse tipo de posicionamento
o bloco posicionado permanece fixo em relação a uma referência. O contexto de
posicionamento é sempre a área de renderização na janela do navegador. Em mídia visual,
o bloco fica fixo em relação ao navegador e não se movimenta quando há rolagem da
página. Em mídia impressa, o bloco será impresso em cada uma das folhas.
2.3.7 Posicionamento com z-index
A propriedade z-index rege o empilhamento de blocos segundo o eixo z. O eixo z é
perpendicular à tela do monitor e tudo se passa como em um sistema tridimensional com
coordenadas horizontal, vertical e coordenada z ou de profundidade. A propriedade z-
index determina qual bloco ficará à frente quando dois ou mais blocos ocupam a mesma
posição ou se sobrepõem parcialmente (SILVA, 2012).
Quando um ou mais blocos são retirados do fluxo normal do documento com uso da
propriedade position, pode ocorrer sobreposição de blocos, conforme mostrado no
exemplo de posicionamento absoluto na Figura 6, quando um parágrafo foi colocado sobre
outro. Havendo sobreposição de blocos posicionados, entra em cena a propriedade z-
index, que regula qual a ordem de empilhamento no eixo z, ou seja, que elemento está
mais próximo do usuário e como eles se distribuem em profundidade.
Abaixo temos um exemplo da aplicação do posicionamento utilizando z-index.
HTML
<div class=”um”>DIV UM</div>
<div class=”dois”>DIV DOIS</div>
<div class=”tres”>DIV TRÊS</div>
CSS
div {
border: 2px solid #0000;
position: absolute;
}
div.um {
width: 200px;
63
height: 80px;
background: #dcdfd9;
z-index: 3;
}
div.dois {
width: 110px;
height: 120px;
left: 120px;
top: 20px;
background: #c0f480;
z-index: 2;
}
div.tres {
width: 90px;
height: 60px;
left: 70px;
top: 50px;
background: #fa5a75;
z-index: 1;
}
Quadro 53 - Exemplo CSS de posicionamento com z-index
A Figura 8 exibe o resultado dos códigos HTML e CSS especificados anteriormente.
Figura 8 - Exemplo CSS de posicionamento com z-index
No exemplo foram definidas coordenadas z para cada um dos elementos-filhos,
estabelecendo a coordenada mais alta para o div.um e a mais baixa para o div.tres.
A propriedade z-index controla o posicionamento dos elementos sobrepostos no
sentido da profundidade. Com a declaração dessa propriedade, a ordem padrão de
64
renderização é invertida. É possível estabelecer qualquer ordem de posicionamento para
atender às necessidades do layout.
Os valores possíveis para a propriedade z-index são: auto, integer e inherit.
O valor inicial ou default é auto. O valor integer é um número positivo ou negativo.
Não existe obrigatoriedade quanto à sequência de números a adotar para declarar os
valores inteiros de z-index. A única regra é: quanto maior o valor, mais próximo do usuário
o bloco é posicionado.
2.3.8 Seletores CSS3
Tecnicamente, define-se seletor como sendo um padrão que casa com elementos da
árvore de um documento. Ou, dito de outra forma; trata-se de uma tecnologia destinada a
selecionar nós na árvore de um documento XML ou HTML.
A função que define um seletor pode ser expressa como mostrado a seguir:
padrão * elemento -> booleano
Cuja leitura é: comparando um padrão com um elemento da marcação, o resultado é
falso ou verdadeiro. Se verdadeiro, diz-se que o padrão (seletor) casa com o elemento.
É preciso ressaltar que o casamento não é necessariamente único, ou seja, não é do
tipo um para um, pois um padrão poderá casar não só com um elemento, mas também com
um conjunto de elementos da árvore do documento.
2.3.8.1 Árvore do documento
Árvore do documento é uma estrutura que representa os nós do documento e a
maneira como eles se relacionam, à semelhança de uma árvore genealógica que mostra em
um diagrama o grau de parentesco entre membros de uma família. O conceito de árvore do
documento é mais bem assimilado com o uso de um exemplo (SILVA, 2012).
Considere um documento cuja marcação HTML é mostrada no Quadro 54.
<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta charset=”utf-8” />
<title>Seletores</title>
</head>
65
<body>
<div id=”tudo”>
<header>
<hgroup>
<h1>Cabeçalho 1</h1>
<h2>Cabeçalho 2</h2>
</hgroup>
</header>
<section>
<ul>
<li><a href=””>Link1</a></li>
<li><a href=””>Link2</a></li>
<li><a href=””>Link3</a></li>
</ul>
</section>
<section>
<h3>Cabeçalho 3</h3>
<pre>
...
</pre>
</section>
<footer>
<p><em>Ver</em> <a href=””>Link</a></p>
</footer>
</div>
</body>
</html>
Quadro 54 - Exemplo de árvore do documento
O diagrama representativo da árvore do documento cuja marcação HTML foi
mostrada no Quadro 54 pode ser visualizado na Figura 9.
Figura 9 - Árvore do documento
66
2.3.8.2 Sintaxe para seletor
Regra CSS é a unidade básica de uma folha de estilo. Uma regra CSS é composta
de duas partes: o seletor e a declaração. A declaração compreende uma propriedade e um
valor. A sintaxe para se escrever uma regra CSS é mostrada na Figura 10.
Figura 10 - Sintaxe de uma regra CSS
2.3.8.3 Conhecendo os seletores das CSS3
As especificações do W3C para as CSS vêm introduzindo novos seletores a cada
versão. Assim, a versão inicial, CSS1, lançada em 1996, previu nove seletores; a versão
CSS2, lançada em 1998, introduziu mais onze seletores, perfazendo um total de 20; e a
versão CSS3, que já atingiu o status de Recomendação do W3C, criou mais vinte e duas,
resultando em um total de 42 seletores.
As CSS3 estão mais do que dobrando o número de seletores existentes até a versão
anterior da especificação. Na Tabela 6, estão listados os seletores das CSS3, o casamento
de cada um deles, seu tipo e a versão CSS na qual foram criados (SILVA, 2012).
Seletor Casa com Tipo CSS
* Qualquer elemento Seletor universal 2
E Qualquer elemento de nome E Seletor tipo 1
E[foo] Elemento E com atributo “foo” Seletor de atributo 2
E[foo=”bar”] Elemento E cujo valor do atributo
“foo” é “bar”
Seletor de atributo 2
E[foo~=”bar”] Elemento E cujo valor do atributo Seletor de atributo 2
67
“foo” é exatamente “bar” ou
contém o nome “bar” entre
espaços em branco
E[foo^=”bar”] Elemento E cujo valor do atributo
“foo” começa com a string “bar”
Seletor de atributo 3
E[foo$=”bar”] Elemento E cujo valor do atributo
“foo” termina com a string “bar”
Seletor de atributo 3
E[foo*=”bar”] Elemento E cujo valor do atributo
“foo” é exatamente a substring
“bar”
Seletor de atributo 3
E[foo|=”val”] Elemento E cujo valod do
atributo “foo” é exatamente “bar”
ou começa com “val”
Seletor de atributo 2
E:root Elemento E raiz do documento Pseudoclasse
estrutural
3
E:nth-child(n) Elemento E filho de ordem n do
seu elemento-pai
Pseudoclasse
estrutural
3
E:nth-last-
child(n)
Elemento E filho de ordem n do
seu elemento-pai, contando a
ordem a partir do último filho
Pseudoclasse
estrutural
3
E:nth-of-
type(n)
Irmão do mesmo tipo e de ordem
n do elemento E
Pseudoclasse
estrutural
3
E:nth-last-of-
type(n)
Irmão do mesmo tipo e de ordem
n do elemento E, contando a
ordem a partir do último irmão
Pseudoclasse
estrutural
3
E:first-child Elemento E primeiro-filho do seu
elemento-pai
Pseudoclasse
estrutural
2
E:last-child Elemento E último-filho do seu
elemento-pai
Pseudoclasse
estrutural
3
E:first-of-type Elemento E primeiro irmão do
mesmo tipo de E
Pseudoclasse
estrutural
3
E:last-of-type Elemento E último irmão do
mesmo tipo de E
Pseudoclasse
estrutural
3
E:only-child Elemento E filho único de seu
elemento-pai
Pseudoclasse
estrutural
3
E:only-of-type Elemento E irmão único do
mesmo tipo de E
Pseudoclasse
estrutural
3
E:empty Elemento E sem elementos-filho
(inclusive nós de texto)
Pseudoclasse
estrutural
3
E:link Elemento E marcador de
hyperlink em estado não visitado
Pseudoclasse link 1
E:visited Elemento E marcador de
hyperlink em estado visitado
Pseudoclasse link 1
E:active Elemento E marcador de
hyperlink quando ativado
Pseudoclasse link 1
E:hover Elemento E marcador de
hyperlink com ponteiro sobre ele
Pseudoclasse link 2
E:focus Elemento E sobre determinada
ações do usuário
Pseudoclasse ação
do usuário
2
68
E:target Elemento E alvo de um URI Pseudoclasse alvo 3
E:lang(fr) Elemento E no idioma
especificado (por exemplo “fr”)
Pseudoclasse :lang() 2
E:enabled Elemento E habilitado Pseudoclasse estado
do elemento E
3
E:disabled Elemento E desabilitado Pseudoclasse estado
do elemento E
3
E:checked Elemento E marcado Pseudoclasse estado
do elemento E
3
E::first-line Primeira linha de um elemento E Pseudoelemento
::first-line
1
E::first-letter Primeira letra de um elemento E Pseudoelemento
::first-letter
1
E::before Conteúdo gerado para ser
posicionado antes do elemento E
Pseudoelemento
::before
3
E::after Conteúdo gerado para ser
posicionado depois do elemento
E
Pseudoelemento
::after
3
E.warning Elemento E ao qual foi atribuído
o atributo classe com valor
“warning”
Seletor classe 1
E#myid Elemento E ao qual foi atribuído
o atributo id com valor “myid”
Seletor ID 1
E:not(s) Elemento E não casado por um
seletor simples
Pseudoclasse
negação
3
E F Elemento F descendente do
elemento E
Caractere de
combinação espaço
em branco
1
E > F Elemento filho F do elemento E Caractere de
combinação filho
2
E + F Elemento F imediatamente após
o elemento E (E e F são irmãos)
Caractere de
combinação irmão
adjacente
2
E ~ F Elementos F após o elemento E
(E e F devem ser irmãos)
Caractere de
combinação irmão
geral
3
Tabela 6 - Seletores CSS3
Para exemplificar o uso dos seletores, temos o Seletor Universal e o Seletor de Tipo.
O Seletor Universal é aquele que representa todos os elementos da linguagem na qual o
documento foi escrito. A string para designar o Seletor Universal é o caractere asterisco (*),
conforme sintaxe mostrada no Quadro 55.
69
* {
color: red; /* Todos os textos contidos no documento serão na cor vermelha */
}
Quadro 55 - Exemplo de uso do seletor universal
O Seletor de Tipo é aquele que representa um determinado tipo de elemento da
linguagem na qual o documento foi escrito. Por exemplo: h1 e p são seletores tipos da
linguagem HTML para cabeçalhos de nível um e parágrafos, respectivamente; header e
footer são seletores tipos da linguagem HTML5 para blocos de cabeçalho e de rodapé;
book e catalog são seletores tipos da linguagem XML que use esses elementos na
marcação. A string para designar um seletor tipo é aquela que representa o elemento,
conforme sintaxe mostrada no Quadro 56.
h1 { color: blue; } /* Textos contidos nos elementos h1 serão na cor azul */
footer { color: white; } /* Textos contidos nos elementos footer serão na cor
branca */
Quadro 56 - Exemplo de uso do seletor de tipo
2.3.9 Fontes
Fontes definidas com CSS podem ter duas origens: fontes instaladas no sistema
operacional do usuário e fontes instaladas em um servidor remoto que são baixadas para a
máquina do usuário quanto a página é carregada (SILVA, 2012).
O mecanismo de aplicação de fontes busca informações sobre fontes instaladas no
sistema operacional diretamente na máquina do usuário, mas para fontes armazenadas em
servidor remoto, as informações devem ser fornecidas com uso da declaração CSS @font-
face. Fontes instaladas em servidor remoto são denominadas como web fonts.
O primeiro mecanismo consiste na escolha das chamadas fontes seguras para web.
Cada sistema operacional vem com um pequeno conjunto de fontes pré-instaladas. O
conjunto dessas fontes comuns aos sistemas operacionais é denominado fontes seguras. A
escolha de tais fontes assegura que a maioria dos usuários visualize a tipografia do site tal
como ela foi projetada.
70
Abaixo estão relacionadas as propriedades referentes a fontes nas CSS3.
2.3.9.1 Propriedade font-family
A propriedade font-family se destina a definir uma família de fontes para os
textos do documento. O valor para essa propriedade é uma string ou uma lista de strings
separadas por vírgula. Cada string é o nome da fonte. A seguir é exibida uma regra CSS
típica para declaração de famílias de fonte:
p { font-family: Arial, Verdana, Sans-serif; }
ou
p { font-family: “Times New Roman”, Times, Georgia, serif; }
Nomes de fontes que contenham espaços em branco devem ser escritos entre aspas
duplas (“ “) ou simples („ „).
2.3.9.2 Propriedade font-style
Essa propriedade permite definir fontes em estilo normal, itálico ou oblíquo. A
aplicação dos estilos itálico e oblíquo causa o efeito de inclinar o texto. O estilo normal é o
que predomina nos textos, com as letras na posição vertical, e é também conhecido como
estilo romano. Os valores possíveis para a propriedade são: normal, italic, oblique e
inherit (valor herdado).
Uma regra CSS típica para essa declaração é mostrada a seguir:
p { font-style: italic; }
2.3.9.3 Propriedade font-variant
Essa propriedade se destina a transformar as letras minúsculas de um texto em
maiúsculas. Os valores possíveis para essa propriedade são: normal, small-caps e
inherit (velor herdado).
Uma regra CSS típica para essa declaração é mostrada a seguir:
p.small-caps { font-variant: small-caps; }
2.3.9.4 Propriedade font-weight
Essa propriedade se destina a definir o peso da fonte. Peso de uma fonte é a
71
espessura dos traços que formam um caractere em relação à sua altura. O peso da fonte
define o menor ou maior grau de destaque (negritude) dos caracteres. Uma fonte em negrito
tem sua característica peso maior do que uma fonte normal. Os valores possíveis para essa
propriedade são: os números 100, 200, 300, 400, 500, 600, 700, 800, 900, as palavras-
chave normal, bold, bolder, lighter e inherit (valor herdado).
div { font-weight: 300; }
p.um { font-weight: inherit; }
p.dois { font-weight: lighter; }
p.tres { font-weight: bolder; }
Quadro 57 - Exemplo CSS da propriedade font-weight
2.3.9.5 Propriedade font-size
Essa propriedade se destina a definir o tamanho das fontes. Os valores possíveis
são: um valor absoluto, um valor relativo, uma medida CSS de comprimento, um valor em
porcentagem e inherit (valor herdado).
Os valores possíveis para declarar o tamanho de fonte com um valor absoluto são:
xx-small, x-small, small, medium, large, x-large e xx-large.
Porcentagens e medidas CSS são as outras maneiras de definri o tamanho de
fontes, conforme sintaxe mostrada a seguir:
p { font-size: 80%; }
p { font-size: 12px; }
p { font-size: 1.8em; }
p { font-size: 5mm; }
p { font-size: 14pt; }
Quadro 58 - Exemplo CSS da propriedade font-size
2.3.9.6 Propriedade font-stretch
Essa propriedade se destina a declarar o grau de condensação ou expansão dos
caracteres de uma fonte. Os valores possíveis para essa propriedade são palavras-chave
que determinam quatro fatores de condensação e quatro fatores de expansão em relação ao
caractere normal da fonte. Essas palavras-chave são: normal, ultra-condensed,
72
extra-condensed, condensed, semi-condensed, semi-expanded, expanded,
extra-expanded, ultra-expanded e inherit.
A seguir é exibida uma declaração CSS típica para essa propriedade:
p { font-stretch: extra-condensed; }
2.3.9.7 Propriedade font-size-adjust
Essa propriedade foi criada pela especificação para as CSS3 e se destina a
preservar a legibilidade da fonte quando a primeira família de fontes declarada com uso da
propriedade font-family não está disponível. Os valores possíveis para essa propriedade
são: um número decimal ou as palavras-chave none e inherit (valor herdado).
A seguir é exibida uma declaração CSS típica para essa propriedade:
body { font-size-adjust: 0.47; }
2.3.9.8 Propriedade font
Essa propriedade é uma abreviatura para declarar todas as propriedades de fontes
exibidas anteriormente. É usada para declarar valores para todas as propriedades CSS para
fontes, conforme exemplo de uso exibido a seguir:
div.um { font: italic small-caps bold 12px/150% verdana sans-
serif; }
Não é necessária a declaração de todas as propriedades de fonte ao usar font.
Valores não declarados serão considerados como se fossem o valor inicial da propriedade.
2.3.9.9 @font-face
Essa regra permite usar fontes hospedadas em um servidor remoto. Essa
funcionalidade resolve o problema relacionado à utilização de fontes dependentes de
estarem instaladas no sistema operacional do usuário.
Em resumo, hospeda-se um arquivo de fonte em um servidor remoto e declara-se
em regra CSS o endereço e o nome da fonte hospedada. Ao ser renderizada a página, a
fonte será buscada pelo navegador, não no sistema operacional do usuário, mas no
endereço onde foi hospedada.
73
A sintaxe geral para declarar uma fonte remota e usá-la, na folha de estilo, é
mostrada a seguir:
@font-face {
font-family: LeagueGothicRegular;
src: url(„league_gothic-webfont.ttf‟);
}
p { font-family: LeagueGothicRegular, serif, Verdana; }
Quadro 59 - Exemplo CSS da funcionalidade @font-face
No exemplo anterior, o arquivo da fonte LeagueGothicRegular foi hospedado com
a denominação league_gothic-webfont.ttf no mesmo diretório em que está
hospedada a folha de estilo, e com uso da regra @font-face foi informado, na folha de
estilo, o nome e o endereço de hospedagem da fonte.
2.3.10 Layout multicolunas
A criação de layouts com o uso desse módulo resulta em vantagens, principalmente
em relação à flexibilidade do layout e à acomodação do fluxo de conteúdos pelas colunas,
de modo que eles possam pertencer a colunas diferentes, dependendo da resolução ou das
dimensões do visualizador (SILVA, 2012).
Atualmente o navegador Opera suporta nativamente a maioria das funcionalidades
desse módulo. Os navegadores Firefox, Chrome e Safari suportam com uso dos prefixos -
moz- e -webkit-.
No modelo tradicional dos blocos CSS, os conteúdos em um elemento fluem da
esquerda para a direita e de cima para baixo.
O modelo de blocos CSS multicolunas, definido nas especificações para as CSS3,
criou funcionalidades capazes de fazer com que os conteúdos inseridos em um elemento
fluam por colunas dentro do mesmo.
A propriedade column-count, prevista no módulo, define o número de colunas
pelas quais o conteúdo do elemento deve fluir. Assim, com o uso da propriedade, é possível
alterar o modelo de boxes de um elemento container para multicolunas. A especificação
74
reconhece ainda o termo box coluna para designar uma coluna.
O modelo multicolunas é regido pelas seguintes diretrizes:
as colunas os boxes colunas se distribuem, pelo elemento container, em
linhas;
tal como acontece com as células de uma tabela, os boxes colunas de uma
linha são ordenados em sequência inline dentro do elemento container;
a largura de uma coluna é o comprimento do box coluna na direção inline;
a altura de uma coluna é o comprimento do box coluna na direção do bloco
container;
todos os boxes colunas em uma linha têm a mesma largura e a mesma altura;
os boxes colunas em uma linha são separados por um espaço denominado
column gap;
o espaço column gap, entre boxes colunas, poderá conter um separador
denominado column rule;
todos os espaços column gap e separadores column rule (se existirem) têm a
mesma largura;
não é possível declarar regras CSS para boxes colunas individualmente.
As propriedades CSS para criar e estilizar elementos multicolunas são listados a
seguir:
column-count
column-width
columns
column-gap
column-rule
column-span
column-fill
break-before
break-after
75
break-inside
2.3.10.1 column-count
Essa propriedade é destinada a definir o número de colunas a ser criado em um
elemento. Os valores possíveis para essa propriedade são: auto e inteiro. O valor padrão é
auto e significa que não há divisão em colunas ou que a divisão é definida por outra
propriedade. O valor inteiro é um número inteiro maior que zero, definindo a quantidade de
boxes colunas a serem inseridos no elemento multicolunas (SILVA, 2012).
CSS
div.multi-colunas {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
border: 1px solid #000;
padding: 0 10px;
}
HTML
<div class=”multi-colunas”>
<p>Texto do elemento...</p>
</div>
Quadro 60 - Exemplo de uso da propriedade column-count
No exemplo do Quadro 60, foi definida a criação de quatro colunas para um div
contendo um texto.
2.3.10.2 column-width
Essa propriedade é destinada a definir a largura das colunas a serem criadas. Os
valores possíveis para essa propriedade são: auto ou uma medida CSS. O valor padrão é
auto e significa que não há divisão em colunas ou que a divisão é definida por outra
propriedade. O valor da medida CSS deve ser maior que zero, definindo a largura dos boxes
colunas a serem inseridos no elemento multicolunas.
Ao contrário da propriedade column-count, para a qual o número de colunas é fixo,
essa propriedade faz com que o número de colunas seja dinâmico, ou seja, a quantidade de
colunas necessárias para acomodar o conteúdo depende da resolução.
76
.multi-colunas {
-moz-column-width: 150px;
-webkit-column-width: 150px;
column-width: 150px;
}
Quadro 61 - Exemplo de uso da propriedade column-width
No exemplo do Quadro 61, foi definida que as colunas de um div deverão conter
colunas com 150px de largura. O cálculo para a exibição das colunas com as dimensões
especificadas é feito de modo a sempre acomodar um número inteiro de colunas na largura
disponível.
2.3.10.3 columns
Essa propriedade é uma forma abreviada de se definir column-count e column-
width.
.multi-colunas {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-width: 150px;
-webkit-column-width: 150px;
column-width: 150px;
}
Quadro 62 - Exemplo de uso da propriedade columns
A propriedade columns é usada para escrever de forma abreviada a regra CSS do
Quadro 56 da seguinte maneira:
.multi-colunas {
-moz-columns: 4 150px;
-webkit-columns: 4 150px;
columns: 4 150px;
}
Quadro 63 - Exemplo de uso da propriedade columns
A forma abreviada admite a declaração de dois valores ou de um valor, e, nesse
caso, o valor omitido é considerado como auto.
77
2.3.10.4 column-gap
Essa propriedade é destinada a definir a largura das colunas a serem criadas em um
elemento. Os valores possíveis para essa propriedade são: normal ou uma medida CSS. O
valor padrão é normal e significa que o espaçamento entre colunas será calculado pelo
navegador. O valor recomendado pela especificação para a largura do espaçamento entre
colunas é de 1em. O valor medida CSS deve ser maior do que zero.
.multi-colunas {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 60px;
-webkit-column-gap: 60px;
column-gap: 60px;
}
Quadro 64 - Exemplo de uso da propriedade column-gap
2.3.10.5 column-rule
Essa propriedade é destinada a definir uma barra vertical entre as colunas. A barra
será inserida no meio do espaçamento entre colunas e a propriedade permite que se defina
espessura, estilo e cor da barra, de modo semelhante à definição de bordas CSS. Os
valores possíveis para a propriedade são: uma medida CSS para a espessura, um estilo de
borda, uma cor e transparente (SILVA, 2012).
No exemplo do Quadro 65, foi inserida uma barra vertical pontilhada com 2px de
espessura na cor preta.
.multi-colunas {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-rule: 2px dotted #000;
-webkit-column-rule: 2px dotted #000;
column-rule: 2px dotted #000;
}
Quadro 65 - Exemplo de uso da propriedade column-rule
78
2.3.10.6 column-span
Essa propriedade é destinada a fazer com que um elemento contido no box
multicoluna se estenda por toda a largura do box, como se não houvesse colunas no sentido
horizontal do elemento. Os valores possíveis para essa propriedade são: none e all. O
valor padrão é none e faz com que o elemento permaneça confinado na sua coluna. O valor
all estende o elemento por todas as colunas.
.multi-colunas {
-moz-column-span: all;
-webkit-column-span: all;
column-span: all;
}
Quadro 66 - Exemplo de uso da propriedade column-span
2.3.10.7 column-fill
Essa propriedade é destinada a definir como o conteúdo será distribuído pelas
colunas. Os valores possíveis para essa propriedade são: auto e balance. O valor padrão
é auto e faz com que o conteúdo preencha as colunas sequencialmente. O valor balance
faz com que o agente de usuário tente, se for possível, distribuir o conteúdo igualmente
pelas colunas.
Atualmente essa propriedade não é suportada por nenhum navegador.
.multi-colunas {
column-fill: balance;
}
Quadro 67 - Exemplo de uso da propriedade column-fill
2.3.10.8 break-*
As propriedades break-before, break-after e break-inside se destinam a
definir em que ponto do conteúdo as colunas/páginas devem ou não devem começar e/ou
terminar, ou seja, onde serão inseridas e/ou não poderá haver quebras de colunas/páginas.
O comportamento padrão do navegador é quebras as colunas/páginas de modo a distribuir
79
o conteúdo de forma corrida ou balanceada por elas. Essas propriedades se destinam a
alterar esse comportamento, forçando ou impedindo a quebra de colunas/páginas.
break-before
Essa propriedade é destinada a controlar a quebra de colunas/páginas, tendo como
referência o ponto imediatamente antes do elemento para a qual foi definida. Os valores
possíveis e seus significados estão na Tabela 7.
Valor Descrição
auto Não há controle de quebra. Esse é o valor padrão da propriedade.
always Força a quebra de página antes do elemento.
avoid Evita a quebra de coluna/página antes do elemento.
left Força a quebra de uma ou duas páginas antes do elemento e faz com
que a próxima página seja formatada como página esquerda.
right Força a quebra de uma ou duas páginas antes do elemento e faz com
que a próxima página seja formatada como página direita.
page Força a quebra de página antes do elemento.
column Força a quebra de coluna antes do elemento.
avoid-page Evita a quebra de página antes do elemento.
avoid-column Evita a quebra de coluna antes do elemento.
Tabela 7 - Valores da propriedade break-before
break-after
Essa propriedade é destinada a controlar a quebra de colunas/páginas, tendo como
referência o ponto imediatamente depois do elemento para a qual foi definida. Os valores
possíveis e seus significados estão na Tabela 8 (SILVA, 2012).
Valor Descrição
auto Não há controle de quebra. Esse é o valor padrão da propriedade.
always Força a quebra de página depois do elemento.
avoid Evita a quebra de coluna/página depois do elemento.
left Força a quebra de uma ou duas páginas depois do elemento e faz com
que a próxima página seja formatada como página esquerda.
80
right Força a quebra de uma ou duas páginas depois do elemento e faz com
que a próxima página seja formatada como página direita.
page Força a quebra de página depois do elemento.
column Força a quebra de coluna depois do elemento.
avoid-page Evita a quebra de página depois do elemento.
avoid-
column
Evita a quebra de coluna depois do elemento.
Tabela 8 - Valores da propriedade break-after
break-inside
Essa propriedade é destinada a controlar a quebra de colunas/páginas, tendo como
referência o conteúdo do elemento para a qual foi definida. Os valores possíveis e seus
significados estão na Tabela 9.
Valor Descrição
auto Não há controle de quebra. Esse é o valor padrão da propriedade.
avoid Evita a quebra de coluna/página dentro do conteúdo do elemento.
avoid-page Evita a quebra de página dentro do conteúdo do elemento.
avoid-column Evita a quebra de coluna dentro do conteúdo do elemento.
Tabela 9 - Valores da propriedade break-inside
O Quadro 68 exibe um exemplo de uso da propriedade break.
h4 {
-moz-break-before: column;
-webkit-break-before: column;
break-before: column;
}
p {
break-inside: avoid;
}
Quadro 68 - Exemplo de uso da propriedade break
2.3.11 Media Queries
Essa especificação descreve as propriedades CSS que permitem aos autores criar
81
regras CSS a serem servidas aos agentes de usuário, cujas características e tipo de mídia
satisfaçam às condições estabelecidas pelo autor.
Escrever uma marcação HTML que se adapte de forma consistente e acessível tanto
às diferentes resoluções em desktop como a impressoras, dispositivos aurais e braile ou às
telas dos inúmeros dispositivos móveis é um problema que o W3C vem tentando resolver
desde longa data.
Media query, em tradução livre, significa “consulta ao tipo de mídia”. O objetivo é
servir a folha de estilo específica para determinado tipo de mídia mediante uma consulta ao
tipo de mídia ao qual a folha de estilo será servida.
As formas de se vincular folhas de estilo dependentes de mídia continuam iguais
àquelas preconizadas pelas especificações para CSS2.1. O que alterou foi a sintaxe para
definir a mídia, que agora assumiu o formato de uma consulta. Os exemplos do Quadro 69
são destinados a vincular uma folha de estilo para determinado tipo de mídia (SILVA, 2012).
Importação em folha de estilo (duas opções):
@import url(color.css) screen and (color);
@media screen and (color) {
/* regras de estilo */
}
Link no documento:
<link rel=”stylesheet” type=”text/css” media=”screen and (color)” href=”color.css”>
Quadro 69 - Exemplo de como vincular folhas de estilo para tipos de mídia
As únicas diferenças da sintaxe das CSS3 para a anterior são o valor do atributo
media, que agora se transformou em uma consulta ao tipo de mídia (media query) para
folhas de estilo linkadas, e o acréscimo da media query para as folhas de estilo importadas.
Media query é uma sentença formada por um tipo de mídia e zero ou mais
expressões destinadas a verificar as condições de ocorrência de um determinado tipo de
funcionalidade naquele tipo de mídia.
A media query é uma expressão lógica que retorna os valores true ou false. Se o
tipo de mídia definido em uma media query casa com o tipo de mídia do dispositivo no qual
o agente de usuário está rodando e se todas as expressões definidas na media query são
82
verdadeiras, então a media query retorna true e a folha de estilo especificada deve ser
aplicada ao documento.
A Figura 11 mostra a sintaxe de uma media query e suas partes componentes.
Figura 11 - Sintaxe de uma media query
Os operadores e seus significados, previstos nas especificações, para uso em media
query são:
Operador Descrição
and Operador de concatenação, retorna true se as condições à esquerda e à
direita do operador são ambas verdadeiras.
only Palavra-chave usada para esconder folhas de estilo dos navegadores
antigos que não suportam media query.
not Operador de negação, retorna true se a funcionalidade não existir.
Tabela 10 - Operadores para uso em media query
Em uma sintaxe para media query, é obrigatório definir o tipo de mídia, enquanto o
operador e a expressão são facultativos e, se usados, podem ser declarados em cadeia
(dois ou mais).
@media screen and (min-width: 400px) and (max-width: 700px) {...}
Podemos concatenar múltiplas media queries, bastando separá-las com vírgula.
@media screen and (min-width: 400px), handheld and (color) {...}
83
É preciso atenção com o operador not. Ele tem a precedência mais baixa entre os
demais operadores.
@media not screen and (color) {...}
Funcionalidades de mídia se assemelham às propriedades CSS, ou seja, possuem
um nome e aceitam determinados valores. As diferenças entre funcionalidades de mídia e
propriedades CSS são descritas a seguir:
Propriedade são usadas em declarações CSS que fornecem informações
sobre como apresentar o documento. Funcionalidades de mídia são usadas
em expressões destinadas a descrever requisitos do dispositivo de saída do
documento.
A maioria das funcionalidades de mídia aceita os prefixos min- e max- para
descrever valores “menos ou igual a” e “maiores ou igual a”, respectivamente.
Propriedades CSS requerem a declaração de um valor. Funcionalidades de
mídia podem ser usadas com ou sem declaração de um valor, exceto aquelas
com os prefixos min- e max-, cujo valor deve ser declarado.
As unidades de medida para os valores das funcionalidades de mídia são as
mesmas unidades de medida adotadas para valores das propriedades CSS.
Propriedades CSS podem aceitar valores complexos, tais como aqueles que
exigem cálculos envolvendo outros valores. Funcionalidades de mídia
aceitam somente valores simples, tais como uma palavra-chave, um número,
um número com definição da unidade de medida. A exceção é para valores
das funcionalidades de mídia aspect-ratio e device-aspect-ratio,
cujos valores são números fracionários da forma a/b.
As funcionalidades de mídias previstas nas especificações para as CSS3 e
destinadas a criar expressões para consultas de mídia dos tipos visual, tátil e aural são:
width
height
device-width
84
device-height
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
scan
grid
2.3.11.1 width
Essa funcionalidade é usada para descrever a largura da área de saída do
dispositivo do usuário. Para mídia contínua, é a largura da viewport, incluindo barra de
rolagem, se existente, e para mídia paginada, é a largura do box da página. O valor possível
para essa funcionalidade é uma medida de comprimento CSS não negativa. Aceita os
prefixos min- e max-.
<link rel=”stylesheet” media=”print and (width: 25cm)” href=”http://...” />
@media screen and (min-width: 400px) and (max-width: 700px) {...}
@media handheld and (max-width: 20em), screen and (width: 20em) {...}
Quadro 70 - Exemplo de uso da funcionalidade width
2.3.11.2 height
Essa funcionalidade é usada para descrever a altura da área de saída do dispositivo
do usuário. Para mídia contínua, é a altura da viewport, incluindo barra de rolagem, se
existente, e para mídia paginada, é a altura do box da página. O valor possível para essa
funcionalidade é uma medida de comprimento CSS não negativa. Aceita os prefixos min- e
max-.
85
<link rel=”stylesheet” media=”print and (height: 25cm)” href=”http://...” />
@media screen and (min-height: 600px) and (max-height: 700px) {...}
@media handheld and (max-height: 14em), screen and (height: 20em) {...}
Quadro 71 - Exemplo de uso da funcionalidade height
2.3.11.3 device-width
Essa funcionalidade é usada para descrever a largura da área de renderização do
dispositivo do usuário. Para mídia contínua, é a largura da tela, e para mídia paginada, é a
largura da página. O valor possível para essa funcionalidade é uma medida de comprimento
CSS não negativa. Aceita os prefixos min- e max- (SILVA, 2012).
<link rel=”stylesheet” media=”print and (max-device-width: 25cm)” href=”http://...”
/>
@media screen and (min-device-width: 600px) and (max-device-width: 700px) {...}
@media handheld and (max-device-width: 14em), screen and (device-width: 20em) {...}
Quadro 72 - Exemplo de uso da funcionalidade device-width
A diferença entre width e device-width é que a primeira é dinâmica, e a segunda
é fixa. Se o usuário redimensiona a largura da janela do navegador, ele está alterando
dinamicamente o valor da funcionalidade width do seu dispositivo de usuário, mas, para
qualquer dimensão da janela, a propriedade device-width é sempre a mesma, por tratar-
se de uma característica física do dispositivo.
2.3.11.4 device-height
Essa funcionalidade é usada para descrever a altura da área de renderização do
dispositivo do usuário. Para mídia contínua, é a altura da tela, e para mídia paginada, é a
altura da página. O valor possível para essa funcionalidade é uma medida de comprimento
CSS não negativa. Aceita os prefixos min- e max-.
<link rel=”stylesheet” media=”print and (device-height: 25cm)” href=”http://...” />
@media screen and (min-device-height: 600px) and (max-device-height: 700px) {...}
@media handheld and (max-device-height: 14em), screen and (device-height: 20em)
{...}
Quadro 73 - Exemplo de uso da funcionalidade device-height
86
A diferença entre height e device-height é que a primeira é dinâmica, e a
segunda é fixa. Se o usuário redimensiona a altura da janela do navegador, ele está
alterando dinamicamente o valor da funcionalidade height do seu dispositivo de usuário,
mas, para qualquer dimensão da janela, a propriedade device-height é sempre a
mesma, por tratar-se de uma característica física do dispositivo.
2.3.11.5 orientation
Essa funcionalidade é baseada em um mecanismo de comparação entre a largura e
a altura da área de saída do dispositivo do usuário. Os valores possíveis para essa
funcionalidade são landscape e portrait. O valor landscape casa com mídias quando
a funcionalidade width é maior do que a funcionalidade height; caso contrário, o valor é
portrait.
<link rel=”stylesheet” media=”screen and (orientation: portrait)” href=”http://...”
/>
@media screen and (orientation: landscape) {...}
@media screen and (orientation: portrait) {...}
Quadro 74 - Exemplo de uso da funcionalidade orientation
2.3.11.6 aspect-ratio
Essa funcionalidade se baseia na razão entre a largura e a altura da área de saída
do dispositivo do usuário. Os valores possíveis para essa funcionalidade são frações do tipo
a/b. Aceita os prefixos min- e max-.
<link rel=”stylesheet” media=”screen and (aspect-ratio: 4/3)” href=”http://...” />
@media screen and (aspect-ratio: 16/9) {...}
@media screen and (min-aspect-ratio: 5/2) {...}
Quadro 75 - Exemplo de uso da funcionalidade aspect-ratio
2.3.11.7 device-aspect-ratio
Essa funcionalidade é baseada na razão entre a largura e a altura da área de
renderização do dispositivo do usuário. Os valores possíveis para essa funcionalidade são
87
frações do tipo a/b. Aceita os prefixos min- e max-.
<link rel=”stylesheet” media=”screen and (device-aspect-ratio: 4/3)”
href=”http://...” />
@media screen and (device-aspect-ratio: 16/9) {...}
@media screen and (min-device-aspect-ratio: 5/2) {...}
Quadro 76 - Exemplo de uso da funcionalidade device-aspect-ratio
A diferença entre aspect-ratio e device-aspect-ratio é que a primeira é
dinâmica, e a segunda é fixa. Se o usuário redimensiona a altura da janela do navegador,
ele está alterando dinamicamente o valor da funcionalidade aspect-ratio do seu
dispositivo de usuário, mas, para qualquer dimensão da janela, a propriedade device-
aspect-ratio é sempre a mesma, por tratar-se de uma característica física do dispositivo
(SILVA, 2012).
2.3.11.8 color
Essa funcionalidade é usada para descrever o número de bits por componente de
cor no dispositivo do usuário. Aceita os prefixos min- e max-, e seu valor deve ser um
número inteiro não negativo.
Em sistemas nos quais o número de bits que representa cada componente não é o
mesmo para cada componente, o valor da funcionalidade é o menor número.
Atribuindo-se o valor 0 para a funcionalidade, o alvo da media query são os
dispositivos monocromáticos.
<link rel=”stylesheet” media=”screen and (color)” href=”http://...” /> /* todos os
dispositivos coloridos */
@media screen and (color: 2) {...} /* dispositivos coloridos de 8 bits */
@media screen and (max-color: 4) {...} /* dispositivos coloridos de 12 ou 8 bits */
@media screen and (color: 0) {...} /* dispositivos monocromáticos */
Quadro 77 - Exemplo de uso da funcionalidade color
2.3.11.9 color-index
Essa funcionalidade é usada para descrever o número de entradas na paleta de
cores disponíveis no dispositivo do usuário. Aceita os prefixos min- e max-, e seu valor
88
deve ser um número inteiro não negativo.
Omitindo-se o valor da funcionalidade ou atribuindo-se o valor 1, o alvo da media
query são todos os dispositivos coloridos que usam paleta de cores.
Atribuindo-se o valor 0 para a funcionalidade, o alvo da media query são os
dispositivos que não usam paleta de cores.
<link rel=”stylesheet” media=”screen and (color-index)” href=”http://...” /> /*
todos os dispositivos de paleta de cores */
@media screen and (color-index: 0) {...} /* dispositivos que não usam paleta de
cores */
@media screen and (min-color-index: 4096) {...} /* dispositivos coloridos de até
4096 ou mais entradas */
Quadro 78 - Exemplo de uso da funcionalidade color-index
2.3.11.10 monochrome
Essa funcionalidade é usada para descrever o número de bits por pixel no dispositivo
monocromático do usuário. Aceita os prefixos min- e max-, e seu valor deve ser um
número inteiro não negativo.
Omitindo-se o valor da funcionalidade ou atribuindo-se 1, o alvo da media query são
todos os dispositivos monocromáticos, independentemente do número de bits por pixel.
Atribuindo-se o valor 0 para a funcionalidade, o alvo da media query são os
dispositivos não monocromáticos.
<link rel=”stylesheet” media=”screen and (monochrome)” href=”http://...” /> /*
todos os dispositivos monocromáticos */
@media screen and (monochrome: 2) {...} /* dispositivos monocromáticos de 2 bits
por pixel */
Quadro 79 - Exemplo de uso da funcionalidade monochrome
2.3.11.11 resolution
Essa funcionalidade é usada para descrever a resolução, ou seja, a densidade de
pixels do dispositivo do usuário. Aceita prefixos min- e max-, e seu valor deve ser um
número inteiro não negativo representando a densidade de pixels por unidade de medida.
89
As duas unidades de medida previstas nas especificações para os valores dessa
funcionalidade são: dpi e dpcm.
@media screen and (min-resolution: 300dpi) {...} /* dispositivos com resolução
maior que 300 pontos por polegada */
@media screen and (resolution: 118dpcm) {...} /* dispositivos de 118 pontos por
centímetro */
Quadro 80 - Exemplo de uso da funcionalidade resolution
2.3.11.12 scan
Essa funcionalidade é usada para descrever o processo de escaneamento de
imagens em mídias do tipo TV. Não aceita os prefixos min- e max-, e seu valor deve ser a
palavra-chave progressive ou interlace.
@media tv and (scan: progressive) {...}
@media tv and (scan: interlace) {...}
Quadro 81 - Exemplo de uso da funcionalidade scan
2.3.11.13 grid
Essa funcionalidade é usada para descrever se a saída do dispositivo é em grid ou
bitmap. Não aceita os prefixos min- e max-, e seu valor deve ser 0 ou 1. O valor 1 ou a
omissão de valor define um dispositivo com saída em grid. O valor 0 define saída bitmap.
@media handheld and (grid) and (max-width: 15em) {...}
@media handheld and (grid) and (device-max-height: 7em) {...}
Quadro 82 - Exemplo de uso da funcionalidade grid
2.3.12 Template Layout
Essa especificação faz parte das CSS3 e cria funcionalidades capazes de construer
layouts de alto nível destinados a tarefas complexas, tais como posicionamento e
alinhamento de “widgets” em interfaces gráficas de usuários ou construção de um grid para
layout de uma página ou janela (SILVA, 2012).
90
A estilização de uma página web, um formulário ou uma interface gráfica pode ser
dividida em duas partes: definição do grid e especificação de fonts, cores, margens, etc.
para os elementos da página. Essas duas partes não são completamente independentes,
pois uma vez que o modelo CSS1 de layout e posicionamento estabelece regras de layout
dos elementos-filhos de um container dependents do próprio container, fica implícita a
dependência. Tal dependência pode ser classificada como política de posicionamento
baseado em container.
Esse novo modulo altera a política de layout estabelecida pelas CSS1 e cria uma
política chamada posicionamento baseado em template. Segundo essa política, cada
elemento container é capaz de conter seu próprio grid invisível para alinhamento e
posicionamento.
Existem apenas duas propriedades e um pseudoelemento para construção de
layouts com uso das funcionalidades do modulo Template Layout, conforme listado a seguir:
display
position
::slot()
2.3.12.1 display
Essa propriedade é destinada a descrever o layout com uma regra CSS. Para
descrever o layout, a regra CSS usa as letras e os pontos que o autor escolheu para
designar os boxes do layout.
#tudo {
display: “aaaaa”
“b.c.d”
“eeeee”
}
Quadro 83 - Exemplo de uso da propriedade display
As diretrizes seguidas para escrever a sintaxe da regra CSS do Quadro 83 foram as
seguintes:
91
O seletor da regra CSS é o box container do layout. O layout foi englobado
em um elemento div com id=”tudo”, assim, o seletor é #tudo. O div
poderia não ter sido usado, e nesse caso, o seletor que englobaria o layout e,
em consequência, o seletor para a regra CSS descritiva do layout seria o
elemento body.
A propriedade display foi declarada com o valor igual a um conjunto de
strings formado pelas letras e pelos pontos designativos dos boxes dos
layouts e dispostos em um formato idêntico àquele que têm visualmente no
layout. A começar pela linha que contenha o maior número de letras e pontos.
No layout, a linha dois, b.c.d, que contém cinco caracteres. Esse número de
caracteres deverá estar contido em todas as demais linhas. Nas linhas 1 e 3
(topo e rodapé) não há espaçamentos, assim, as letras a e e se repetem
cinco vezes.
Para definir a largura das colunas e o espaçamento entre elas, a declaração é feita
logo após as strings que definem o layout, e delas separada por pelo menos um espaço em
branco (SILVA, 2012).
#tudo {
display: “aaaaa”
“b.c.d”
“eeeee”
400px 5px 200px;
}
Quadro 84 - Exemplo de uso da propriedade display com espaçamento
A definição da largura das colunas não é obrigatória. Ela pode ser omitida, mas,
nesse caso, todas as colunas terão a mesma largura.
É possível ainda definir larguras elásticas com uso de porcentagem.
92
#tudo {
display: “aaaaa”
“b.c.d”
“eeeee”
53% 3% 5%;
}
Quadro 85 - Exemplo de uso da propriedade display com espaçamento percentual
Com a declaração do código do Quadro 85, o layout que anteriormente possuía uma
largura fixa, agora é um layout totalmente fluido, preenchendo toda a largura da tela,
qualquer que seja a resolução ou o tamanho da janela do usuário.
2.3.12.2 position
Essa propriedade é destinada a definir a posição de cada box no layout, tomando
como referência a letra que o autor atribuiu ao box na regra CSS descritiva do layout.
Essa propriedade admite ainda o valor same, que equivale ao posicionamento
idêntico ao do último box posicionado com uso de uma letra. O exemplo do Quadro 62
esclarece o uso da propriedade com o valor.
HTML
<dl>
<dt>Canvas</dt>
<dd> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean hendrerit consectetur nisi et elementum.</dd>
<dd> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean hendrerit consectetur nisi et elementum.</dd>
<dt>Áudio</dt>
<dd> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean hendrerit consectetur nisi et elementum.</dd>
<dt>Vídeo</dt>
<dd> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean hendrerit consectetur nisi et elementum.</dd>
</dl>
CSS
dl {
display: “a.b.c”
* 250px 5px 250px 5px 250px *;
}
dt:nth-of-type(1) { position: a; }
dt:nth-of-type(2) { position: b; }
dt:nth-of-type(3) { position: c; }
dd { position: same; }
Quadro 86 - Exemplo de uso da propriedade position
93
2.3.12.3 ::slot()
Esse pseudoelemento casa com os boxes criados pela regra CSS que define o
layout, ou seja, cada box designado por uma letra na regra CSS declarativa do layout pode
ser cadaso por esse pseudoelemento.
As únicas propriedades CSS estilizáveis com uso desse pseudoelemento são:
background-*, vertical-align e overflow. O W3C estuda a inclusão, nessa lista,
das propriedades block-flow, direction e box-shadow.
Para a propriedade vertical-align, os valores válidos são: top, middle e
baseline.
Convém notar que o mecanismo CSS3 de definição do layout de um container com
uso das funcionalidades desse módulo implementou alguns conceitos aplicados na
construção de layouts com tabelas. Assim, o layout criado se comporta como uma tabela,
com suas linhas, colunas e células, guardadas algumas diferenças. Essas diferenças dizem
respeito à acomodação de conteúdos nas células, do mecanismo de justaposição de bordas
e da dependência da ordem de apresentação à marcação HTML (SILVA, 2012).
Uma consequência imediata dessa implementação baseada no modelo tabelas é que
a propriedade vertical-align para o pseudoseletor ::slot() funciona com seus três
valores possíveis nesse módulo. O código do exemplo a seguir ilustra esse comportamento:
HTML
<section>
<article>
<h1>Título 1</h1>
<p>Texto</p>
</article>
<article>
<h1>Título 2</h2>
<p>Textp</p>
</article>
<article>
<h1>Título 3</h1>
<p>Texto</p>
</article>
</section>
CSS
section {
display: “.a.b.c.” /200px
* 200px 5px 200px 5px 200px *;
}
94
section article:first-child { position: a; }
section article:nth-child(2) { position: b; }
section article:last-child { position: c; }
section::slot(a) { background: orange; vertical-align: top; }
section::slot(b) { background: yellow; vertical-align: middle; }
section::slot(c) { background: cyan; vertical-align: baseline; }
Quadro 87 - Exemplo de uso do pseudoelemento ::slot()
2.3.13 Box Layout flexível
Esse módulo descreve um Box Model CSS otimizado para desenho de interfaces.
Ele fornece mais um sistema de construção de layout a juntar-se a outros previstos nas
CSS3. Esse novo modelo de box possibilita que boxes-filhos de um container sejam
dispostos na vertical ou na horizontal e que eventuais espaços vagos no container sejam
preenchidos por expansão de um ou mais boxes. Para criar um layout, é possível aninhar
boxes horizontais em boxes verticais e vice-versa. Esse modelo baseia-se no modelo
adotado pela linguagem XUL para desenho de interfaces, adotado pela Mozilla para muitas
de suas aplicações, tal como o navegador Firefox.
O termo flexbox será usado para definir o modelo de layout de boxes flexíveis.
No módulo, são previstas cinco propriedades e uma função, conforme listado a
seguir:
display
flex-direction
flex-order
flex-pack
flex-align
flex()
2.3.13.1 display
Essa propriedade é destinada a definir o contexto para o layout flexbox. Os valores
possíveis são: flexbox e inline-flexbox. O valor inicial de uma propriedade display de
um elemento depende do elemento.
Essa propriedade, quando aplicada a um elemento, o define como um container
95
flexbox, ou seja, todos os elementos descendentes do container se comportam seguindo o
modelo de layout para flexbox. Se é desejado que os elementos em uma página web sigam
o modelo flexbox, é preciso declarar um dos valores mostrados anteriormente para a
propriedade display do elemento body.
body { display: flexbox; }
div { display: flexbox; }
footer { display: inline-flexbox; }
div { display: inline-flexbox; }
span { display: flexbox; }
section { display: inline-flexbox; }
Quadro 88 - Exemplo de uso da propriedade display
Outro valor para essa propriedade é inline-box. Quando declarado o valor flexbox
para a propriedade display de um container, ele se comporta como um elemento nível de
bloco, causando uma quebra de linha antes e depois dele. O valor inline-box para essa
propriedade faz com que o container se comporte como um elemento inline (SILVA, 2012).
section {
#a1{
display: -moz-inline-box; /* para Firefox */
display: -webkit-inline-box; /* para Safari e Chrome */
display: inline-box; /* para suporte nativo */
background: yellow;
}
#a2 { background: cyan; }
}
Quadro 89 - Exemplo de uso do valor inline-box
2.3.13.2 flex-direction
Essa propriedade é destinada a definir a maneira como os elementos-filhos serão
dispostos no elemento flexbox. Os valores possíveis são: lr, rl, tb, bt, inline, inline-
reverse, block e block-reverse. O valor inicial é inline. Essa propriedade aplica-se
a flexboxes e não é herdada.
O efeito de cada um dos valores é descrito na Tabela 11.
96
Efeito Descrição
inline Os boxes são dispostos em linha
block Os boxes são dispostos como boxes nível de bloco
inline-
reverse
Os boxes inline são dispostos na ordem inversa do código
block-reverse Os boxes de nível de bloco são dispostos na ordem inversa do código
lr (left-right) os boxes são dispostos na horizontal, da esquerda para a
direita
rl (right-left) os boxes são dispostos na horizontal, da direita para a
esquerda
tb (top-bottom) os boxes são dispostos na vertical, de cima pra baixo
bt (bottom-top) os boxes são dispostos na vertical, de baixo pra cima
Tabela 11 - Efeito dos valores da propriedade flex-direction
Os valores inline e block dispõem os boxes em linha (um ao lado do outro) ou na
vertical (um embaixo do outro). As regras CSS para esse efeito são mostradas a seguir:
CSS (horizontal)
div {
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
flex-direction: inline;
}
CSS (vertical)
div {
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
flex-direction: block;
}
Quadro 90 - Exemplo de uso dos valores inline e block
Os valores inline-reverse e block-reverse dispõem os boxes em linha (um
ao lado do outro) ou na vertical (um embaixo do outro), invertendo a ordem em que eles
aparecem na marcação. As regras CSS para esse efeito são mostradas a seguir:
CSS (inversão na horizontal)
div {
-moz-box-orient: horizontal;
-moz-box-direction: reverse;
97
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
flex-direction: inline-reverse;
}
CSS (vertical)
div {
-moz-box-orient: vertical;
-moz-box-direction: reverse;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
flex-direction: block-reverse;
}
Quadro 91 - Exemplo de uso dos valores inline-reverse e block-reverse
2.3.13.3 flex-order
Essa propriedade é destinada a definir a ordem segundo a qual serão dispostos os
elementos-filhos do flexbox. O valor para essa propriedade é um número inteiro, indicando a
ordem do box. O valor inicial é 1. Essa propriedade aplica-se a flexboxes e não é herdada.
Conforme analisado anteriormente, o valor reverse para a propriedade flex-
direction inverte a ordem em que os boxes aparecem na marcação HTML. A propriedade
flex-ordem oferece um maior controle sobre aquela ordem, permitindo que o autor
posicione os boxes na ordem que bem entender, independente da ordem em que eles
aparecem na marcação HTML.
CSS (vertical)
#p1 {
background: salmon;
-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;
flex-order: 2;
}
#p2 {
background: bisque;
-moz-box-ordinal-group: 3;
-webkit-box-ordinal-group: 3;
flex-order: 3;
}
#p3 {
background: springgreen;
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
flex-order: 1;
}
Quadro 92 - Exemplo de uso da propriedade flex-order
98
2.3.13.4 flex-pack
Essa propriedade é destinada a controlar o alinhamento horizontal de elementos-
filhos de um flexbox. Os valores possíveis para essa propriedade são: start, end, center
e justify. O valor inicial é start. Essa propriedade aplica-se a flexboxes e não é
herdada (SILVA, 2012).
Conforme analisado anteriormente, o valor reverse para a propriedade flex-
direction inverte a ordem em que os boxes aparecem na marcação HTML. A propriedade
flex-ordem oferece um maior controle sobre aquela ordem, permitindo que o autor
posicione os boxes na ordem que bem entender, independentemente da ordem em que eles
aparecem na marcação HTML.
HTML
<div>
<p id=”p1”>BOX 1 - Textos...</p>
</div>
CSS
body {
font: 14px sans-sefif;
margin: 10px;
}
p {
margin: 0;
width: 200px;
padding: 2px 5px;
}
div {
display: -moz-box;
display: -webkit-box;
border: 1px solid black;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
flex-direction: inline;
-moz-box-pack: center;
-webkit-box-pack: center;
flex-pack: center;
width: 400px;
background: aliceblue;
padding: 10px 15px;
}
Quadro 93 - Exemplo de uso da propriedade flex-pack
99
2.3.13.5 flex-align
Essa propriedade é destinada a controlar o alinhamento vertial de elementos-filhos
de um flexbox. Os valores possíveis para essa propriedade são: auto e baseline. O valor
inicial é auto. Essa propriedade aplica-se a flexboxes e não é herdada.
Os valores para essa propriedade diferem dos valores constantes da versão anterior
das especificações, nos quais as implementações com prefixos proprietários se basearam.
Portanto, essa propriedade não será aprofundada.
A especificação prevê uma função denominada flex(), cuja sintaxe está em estudo
no W3C.
100
2.4 JavaScript
JavaScript é a linguagem de script mais popular no mundo. É a linguagem de
programação para a web, servidores, computadores, laptops, tablets e aparelhos celulares.
Uma linguagem script é uma linguagem de programação mais leve. O JavaScript foi
projetado para adicionar interatividade a páginas HTML. É a programação de código que
pode ser inserido em páginas HTML para ser executados pelo navegador (W3 SCHOOLS,
2012).
document.getElementById("demo").style.color="#ff0000";
JavaScript e Java são duas linguagens completamente diferentes em conceito e
design. Java é uma linguagem muito mais complexa e está na mesma categoria das
linguagens C e C++.
2.4.1 Como usar
Os scripts em HTML devem ser inseridos entre as tags <script> e </script>. Os
scripts podem ser inseridos na seção <body> e na seção <head> de uma página HTML. A
tag <script> e </script> informa onde o código JavaScript começa e termina. As linhas
entre as duas tags são os códigos JavaScript.
<script>
alert("Meu primeiro JavaScript");
</script>
Quadro 94 - Exemplo de uso de script JavaScript
O exemplo acima seria executado no carregamento da página por ser uma instrução
JavaScript direta, que ocorre sem a necessidade de algo acontecer. O exemplo abaixo
mostra uma função JavaScript localizada na tag <head> e que só será executada quando o
usuário clicar no botão específico.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
101
{
document.getElementById("demo").innerHTML="Minha primeira função
JavaScript";
}
</script>
</head>
<body>
<h1>Página Web</h1>
<p id="demo">Parágrafo</p>
<button type="button" onclick="myFunction()">Clique</button>
</body>
</html>
Quadro 95 - Exemplo de uso de script JavaScript
É possível inserir um número ilimitado de scripts em um documento podendo existir
scripts na tag <body> e na tag <head> ao mesmo tempo. A prática mais comum é o uso
dos scripts JavaScript no interior da tag <head>.
Além do JavaScript na própria página HTML em uso, existe a opção de linkar um
script através de arquivos externos. Essa prática facilita a manutenção e desenvolvimento
da página. Os arquivos JavaScript externos possuem a extensão ".js". O exemplo abaixo
mostra como referenciar um arquivo JavaScript externo ao documento HTML.
<!DOCTYPE html>
<html>
<body>
<script src="meuScript.js"></script>
</body>
</html>
Quadro 96 - Exemplo de uso de JavaScript externo
Os arquivos JavaScript externos não necessitam da tag <script> e </script>
para executarem os scripts.
2.4.2 Variáveis
As variáveis JavaScript são espaços para o armazenamento de informações
dinâmicas. Elas podem ser usadas tanto para armazenar valores quanto para armazenar
expressões. Os nomes das variáveis são definidos livremente pelo desenvolvedor
respeitando as seguintes regras de criação:
O nome da variável deve iniciar com uma letra
102
O nome da variável pode iniciar com os caracteres especiais $ e _
O nome da variável é case sensitive, ou seja, y é diferente de Y
var x=5;
var y=6;
var z=x+y;
Quadro 97 - Exemplo de criação de variáveis JavaScript
As variáveis JavaScript suportam ainda outros tipos de dados como, por exemplo,
textos. Ao definir uma variável como texto, é necessário circular o conteúdo definido com
aspas simples ou dupla. Um valor numérico circulado com aspas também será tratado como
texto e não um número pelo script (W3 SCHOOLS, 2012).
var pi=3.14;
var nome="Samuel Mucin";
var resposta='Sim, eu sou!';
Quadro 98 - Exemplo de variáveis JavaScript
Para utilizar uma variável em JavaScript é preciso primeiro declará-la. Após sua
declaração, a variável poderá ser usada no script.
var nomeCarro;
nomeCarro="Volvo";
Quadro 99 - Exemplo de variáveis JavaScript
Existe ainda a opção de, apenas em uma linha, declarar e atribuir um valor a uma
nova variável, conforme mostrado no exemplo a seguir.
var nomeCarro="Volvo";
Caso haja a necessidade de declarar várias variáveis, o programador pode utilizar
apenas um declarador e criar as variáveis necessárias separando cada uma com vírgula.
var nome="Carlos", idade=30, trabalho="carpinteiro";
103
2.4.3 Operadores Aritméticos
Operadores aritméticos são usados para realizar operações entre variáveis e/ou
valores. Na Tabela 12 são exibidos os operadores aritméticos para JavaScript, sua
descrição e exemplo considerando que y vale 5.
Operador Descrição Exemplo Resultado de x Resultado de y
+ Adição x=y+2 7 5
- Subtração x=y-2 3 5
* Multiplicação x=y*2 10 5
/ Divisão x=y/2 2.5 5
% Módulo x=y%2 1 5
++ Incremento x=++y 6 6
x=y++ 5 6
-- Decremento x=--y 4 4
x=y-- 5 4
Tabela 12 - Operadores aritméticos JavaScript
O operador "+" pode ser utilizados em variáveis com textos para unir os mesmos.
txt1="Tenha um";
txt2=" bom dia";
txt3=txt1+txt2;
Resultado impresso:
Tenha um bom dia
Quadro 100 - Exemplo de operadores JavaScript
2.4.4 Operadores de Atribuição
Operadores de atribuição são usados para atribuir valores às variáveis JavaScript.
Na Tabela 13 são exibidos os operadores de atribuição para JavaScript, sua descrição e
exemplo considerando que y vale 5 e x vale 10.
104
Operador Exemplo O mesmo que Resultado
= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0
Tabela 13 - Operadores de atribuição JavaScript
2.4.5 Operadores de Comparação
Operadores de comparação são utilizados para determinar a igualdede ou a
diferença entre valores de variáveis. Na Tabela 14 são exibidos os operadores de
comparação para JavaScript, sua descrição e exemplo considerando que x vale 5 (W3
SCHOOLS, 2012).
Operador Descrição Comparando Retorno
== é igual a x==8 false
=== é exatamente igual a
(valor e tipo)
x===”5” false
!= não é igual a x!=8 true
!== não é igual a (valor e
tipo)
x!==”5” true
> maior que x>8 false
< menor que x<8 true
>= maior ou igual a x>=8 false
<= menor ou igual x<=8 true
Tabela 14 - Operadores de comparação JavaScript
Os operadores de comparação podem ser utilizados em instruções condicionais para
comparar valores e definir qual ação será realizada.
if (idade<18) x="Menor de idade";
105
2.4.6 Operadores Lógicos
Operadores lógicos são usados para determinar a lógica entre dois valores de
variáveis. Na Tabela 15 são exibidos os operadores lógicos para JavaScript, sua descrição e
exemplo considerando que x vale 7 e y vale 2.
Operador Descrição Exemplo
&& e (x < 10 && y > 1) é
verdadeiro
|| ou (x==5 || y==5) é falso
! não !(x==y) é verdadeiro
Tabela 15 - Operadores lógicos JavaScript
2.4.7 Declarações Condicionais
Ao escrever um script, às vezes são necessárias diferentes ações para diferentes
decisões. Para realizar essas decisões, são utilizadas as declarações condicionais. As
declarações condicionais do JavaScript são:
if
if...else
if...else if...else
switch
2.4.7.1 Condição If
Usada para executar alguma instrução se sua condição for verdadeira.
if (condição)
{
código para condição verdadeira
}
Quadro 101 - Exemplo de uso da condição If
106
2.4.7.2 Condição If...Else
Usada para executar alguma instrução se a condição for verdadeira e outra se a
condição for falsa.
if (condição)
{
código para condição verdadeira
}
else
{
código para condição falsa
}
Quadro 102 - Exemplo de uso da condição If..Else
2.4.7.3 Condição If...Else If...Else
Usada para selecionar uma de várias instruções a serem executadas de acordo com
o resultado da condição.
if (condição1)
{
código para condição1 verdadeira
}
else if (condição2)
{
código para condição2 verdadeira
}
else
{
código para condição1 e condição2 falsas
}
Quadro 103 - Exemplo de uso da condição If..Else If...Else
2.4.8 Laços de Repetição
Ao desenvolver um script, às vezes é necessário que determinado bloco de código
se repita por várias vezes até que uma condição seja satisfeita. Ao invés de repetir o mesmo
bloco várias vezes no script, são usados os laços de repetição (W3 SCHOOLS, 2012).
Os laços de repetição existentes no JavaScript são:
for
107
while
do...while
for...in
2.4.8.1 Laço For
Usado quando a quantidade de vezes que o bloco de código será executado é
conhecida.
for
(variavel=valorInicial;variavel<valorFinal;variavel=variavel+incremento)
{
código a ser executado
}
Quadro 104 - Exemplo de uso do laço For
2.4.8.2 Laço While
Usado para executar um bloco de código várias vezes até que alguma condição seja
verdadeira. Só executa o bloco se a condição inicial for verdadeira.
while (variavel<valorFinal)
{
código a ser executado
}
Quadro 105 - Exemplo de uso do laço While
2.4.8.3 Laço Do...While
É uma variação do laço while usado para executar um bloco de códigos até que
uma condição seja verdadeira. Diferente do laço while, o laço do...while executa ao
menos uma vez o bloco de código.
108
do
{
código a ser executado
}
while (variavel<valorFinal);
Quadro 106 - Exemplo de uso do laço Do...While
2.4.9 Eventos HTML DOM em JavaScript
O HTML DOM permite que o JavaScript reaja a determinados eventos HTML. Um
script JavaScript pode ser executado quando determinado evento ocorrer na página como,
por exemplo, o usuário clicar em um elemento HTML específico.
Exemplos de eventos HTML:
Quando o usuário clica o mouse
Quando a página é carregada
Quando uma imagem é carregada
Quando o mouse passa sobre um elemento
Quando um campo de formulário é alterado
Quando um formulário é enviado
Quando o usuário aperta uma tecla
No exemplo abaixo, o conteúdo da tag <h1> é alterado quando o usuário clicar sobre
o mesmo (W3 SCHOOLS, 2012).
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Clique neste texto!</h1>
</body>
</html>
Quadro 107 - Exemplo de uso de eventos
Para atribuir eventos a elementos HTML é preciso usar atributos de eventos. O
atributo displayDate() é um exemplo.
<button onclick="displayDate()">Clique</button>
109
2.4.9.1 Eventos onLoad e onUnload
São usados para determinar alguma ação quando o usuário carregar ou deixar a
página.
<body onload="checkCookies()">
<body onunload="digaAdeus()">
Quadro 108 - Exemplo de uso de eventos onload e onunload
2.4.9.2 Evento onChange
Este evento é usado para oferecer ações em alterações de campos de formulários,
por exemplo. No exemplo abaixo, a função upperCase() será executada quando o usuário
alterar o conteúdo do campo de texto do formulário tornando todas as letras minúsculas em
maiúsculas.
<input type="text" id="fname" onchange="upperCase()">
2.4.9.3 Evento onMouseOver e onMouseOut
São usados para atribuir funções quando o usuário passa e retira o mouse sobre um
elemento. No exemplo abaixo o código faz com que, ao passar o mouse sobre o elemento
<div> seja exibido o texto "Obrigado" e, ao retirar o mouse, seja exibido o texto "Passe o
mouse".
<!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-
color:#D94A38;width:120px;height:20px;padding:40px;">Passe o mouse</div>
<script>
function mOver(obj)
{
obj.innerHTML="Obrigado"
}
function mOut(obj)
{
obj.innerHTML="Passe o mouse"
}
</script>
</body>
</html>
Quadro 109 - Exemplo de uso de eventos onmouseover e onmouseout
110
2.4.10 Tratamento de Excessões
O tratamento de excessões é utilizado para auxiliar os desenvolvedores a
identificarem erros em seus códigos. O JavaScript possuí dois tratamentos de erros, o
try...catch e o throw.
2.4.10.1 Try...Catch
Esse tratamento permite o teste de blocos com erros. Contém o código a ser
executado e o bloco catch, que contém o código a ser executado no caso de erros. Abaixo
está a sintaxe do try...catch.
try
{
//algum código aqui
}
catch(err)
{
//códigos para erros
}
Quadro 110 - Exemplo de uso do Try...Catch
2.4.10.2 Throw
Permite ao desenvolvedor criar uma excessão. Utilizado junto ao try...catch, é
possível controlar os códigos e produzir mensagens de erro mais detalhadas. A sintaxe do
throw é exibida abaixo (W3 SCHOOLS, 2012).
throw exception
O exemplo a seguir determina o valor de uma variável chamada x. Se o valor de x é
maior que 10, menor do que 5, ou não for um número, um erro será informado. O erro é
então capturado pelo argumento de captura e a mensagem de erro apropriada será exibida.
<!DOCTYPE html>
<html>
<body>
<script>
var x=prompt("Insira um número entre 5 e 10:","");
try
{
if(x>10)
111
{
throw "Err1";
}
else if(x<5)
{
throw "Err2";
}
else if(isNaN(x))
{
throw "Err3";
}
}
catch(err)
{
if(err=="Err1")
{
document.write("Erro! O valor é muito alto.");
}
if(err=="Err2")
{
document.write("Erro! O valor é muito baixo.");
}
if(err=="Err3")
{
document.write("Erro! O valor não é um número.");
}
}
</script>
</body>
</html>
Quadro 111 - Exemplo de uso do Try...Catch com Throw
112
CAPÍTULO 3. METODOLOGIA
A metodologia utilizada para o desenvolvimento deste instrumento, coleta de dados e
avaliação dos resultados obtidos baseia-se em pesquisas já realizadas nesta área e estudos
propostos em livros (SILVA, 2008).
Devido à natureza da pesquisa basear-se em materiais novos, considerando que a
técnica do design responsivo ainda está em desenvolvimento, a preocupação metodológica
principal está em analisar a estrutura de páginas utilizando CSS, HTML e JavaScript de
forma convencional e compará-las com páginas semelhantes, porém adaptadas com os
recursos do design responsivo.
Ao final dos estudos serão desenvolvidas páginas no formato utilizado habitualmente
e utilizando o design responsivo.
113
CAPÍTULO 4. APLICAÇÕES DE CONCEITOS
Com base nos estudos realizados no Capítulo 2, foram desenvolvidos dois protótipos
de páginas web, uma nos padrões convencionais e fixos e outra seguindo as especificações
para a elaboração de um design responsivo, que responda de acordo com o dispositivo
usado para acessá-la, através do uso das tecnologias abordadas.
4.1 Página fixa
Para criar este exemplo foram utilizados recursos convencionais de HTML, CSS e
JavaScript com o intuito de criar uma página fixa e comumente encontrada na internet.
A página contém um título no topo, uma barra lateral esquerda, uma direita, o
conteúdo central e o rodapé.
Com a estruturação convencional, a página renderizada em um navegador tomaria
as proporções exemplificadas na Figura 12.
Figura 12 - Exemplo design fixo
O design da página prevê alguns links na barra da esquerda, as últimas notícias
sendo exibidas na barra central e um vídeo na barra da direita. Por ser um design fixo, a
114
unidade de medida utilizada na elaboração das CSS para a página foi o pixel. Sendo assim,
ao redimensionar o navegador para simular dispositivos com resoluções menores, barras de
rolagem são acrescentadas tanto na lateral direita quanto na parte inferior do site, conforme
exemplificado na Figura 13.
Figura 13 - Exemplo design fixo
Ao testar o site em um smartphone, o navegador do aparelho aplica um zoom out no
design para fazer com que todo o conteúdo seja mostrado, sem a criação de barras de
navegação. Contudo, isso obriga o usuário a realizar diversas operações de zoom in no site
e arrastá-lo por diversas direções até encontrar o que procura. A exibição do site com
design fixo em um smartphone é exemplificada na Figura 14.
115
Figura 14 - Exemplo design fixo
4.2 Página Responsiva
Para resolver o problema da página fixa do design de exemplo, é preciso
primeiramente trocar todas as unidades de medidas absolutas por unidades de medidas
relativas. No caso, será utilizada a unidade de porcentagem para os elementos da página e
a unidade em para as fontes.
Para converter as unidades absolutas em unidades relativas com a intenção de criar
um design responsivo, deve utilizar a fórmula Alvo / Contexto = Resultado, onde alvo é o
elemento que será trabalhado com suas medidas atuais e o contexto onde o elemento-alvo
está baseado no elemento-pai.
Considerando que a fonte padrão para o corpo de um documento HTML seja de
16px, a unidade relativa em do cabeçalho <h1> do documento será de 1,6em
(25/16=1,5625).
A mesma fórmula se aplica para as conversões envolvendo elementos com unidade
de medida em porcentagem.
116
Com todas as unidades absolutas de medida do design fixo convertidas em unidades
relativas, o resultado no navegador inicial ficará exatamente o mesmo conforme
exemplificado na Figura 15.
Figura 15 - Exemplo design relativo
O container do vídeo foi tratado através das CSS para exibir o conteúdo dentro do
layout, sem sair do padrão de tamanho da página como estava acontecendo no design fixo.
Todo o resto da página está sendo exibida da mesma forma mas, devido às unidades de
medidas relativas, ao redimensionar o navegador para um tamanho menor, o resultado é
diferente. Já é possível notar que o conteúdo se ajusta ao novo tamanho da tela até
determinado ponto conforme exemplificado na Figura 16.
117
Figura 16 - Exemplo design relativo
Conforme mostrado na figura anterior, a página deixou de gerar a barra de rolagem
inferior, passando a ajustar o conteúdo em seu interior. A barra de rolagem existente agora
é somente a vertical, para que o usuário desça a página para terminar de ver o conteúdo.
A Figura 17 exemplifica o resultado da exibição do novo design em um smartphone.
118
Figura 17 - Exemplo design relativo
A figura anterior mostra que, apesar das unidades relativas terem sido aplicadas,
isso não foi o suficiente para deixar o design 100% responsivo e adaptável a dispositivos
móveis.
A completa criação de um design responsivo necessita do uso das media queries
das CSS3. Foram utilizadas 2 regras de medias queries para a criação do design responsivo
para o exemplo. O site será exibido normalmente em dispositivos com resolução maior do
que 900px. Uma regra age quando o dispositivo possuir largura máxima de 900px. A
segunda regra age quando o dispositivo possuir largura máxima de 640px.
O Quadro 112 exibe as duas regras de media queries utilizadas para proporcionar
responsividade à página de exemplo utilizada. As alterações no layout da página são
inseridas no interior de cada uma das regras no momento do desenvolvimento.
119
@media only screen and (max-width: 900px) {
/*regras para o layout em dispositivos de até 900px de largura*/
}
@media only screen and (max-width: 640px) {
/*regras para o layout em dispositivos de até 640px de largura*/
}
Quadro 112 - Media queries para design responsivo
A Figura 18 exemplifica o design responsivo do exemplo em dispositivos com
resolução maior do que 900px.
Figura 18 - Exemplo design responsivo
A Figura 19 exemplifica o design responsivo do exemplo em dispositivos com
resolução máxima de 900px. Nele, os links são colocados abaixo do cabeçalho, são
exibidas duas notícias na horizontal e o vídeo continua à direita.
120
Figura 19 - Exemplo design responsivo
A Figura 20 exemplifica o design responsivo do exemplo em dispositivos com
resolução máxima de 640px. Nele, as notícias passam para uma por linha e o vídeo é
retirado do site (já que a velocidade da conexão móvel hoje ainda é baixa), sendo que o
rodapé fica logo após as notícias.
121
Figura 20 - Exemplo design responsivo
4.3 Página Responsiva com JavaScript
A utilização de JavaScript em páginas responsivas deve seguir um padrão diferente
do convencional. Os comandos não podem ser inline, ou seja, não se pode executar
comandos diretamente em elementos. A forma correta para funcionar tanto em designs fixos
quanto em responsivos é a chamada de ações fora dos elementos HTML, em arquivos
externos ou ainda no interior da tag <head> do documento. O Quadro 113 exemplifica a
forma incompatível e a compatível de se utilizar JavaScript em um design responsivo.
122
FORMA INCOMPATÍVEL COM DESIGN RESPONSIVO
<body>
<input type=”button” value=”Imprimir” onClick=”javascript:print();”>
</body>
FORMA COMPATÍVEL COM DESIGN RESPONSIVO
<head>
<script>
function imprimir(){
print();
}
</script>
</head>
<body>
<input type=”button” value=”Imprimir” onClick=”imprimir();”>
</body>
Quadro 113 - Utilização de JavaScript em design responsivo
Na página desenvolvida para exemplificar os tópicos estudados anteriormente foi
inserido um botão de busca que interage via JavaScript com o conteúdo. Ao inserir um dado
qualquer na busca, a página é recarregada através de AJAX (Asynchronous Javascript and
XML), que é uma metodologia que utiliza javascript como base para as interações, o
conteúdo da primeira notícia é alterado e o título da mesma recebe o valor digitado no
campo de busca.
Na versão para dispositivos com maior resolução, o campo busca exibe uma caixa
de explicação ao passar o mouse sobre a caixa. O resultado da implementação no layout
para maiores resoluções pode ser visualizado nas Figuras a seguir.
123
Figura 21 - Caixa de busca em resoluções maiores
Figura 22 - Caixa de busca executando onMouseOver
124
Figura 23 - Inserindo dados na busca
Figura 24 - Retorno da busca na notícia principal
Na versão para mobile, o campo de busca deixa de exibir a explicação pois o atributo
onMouseOver não é executado nestes dispositivos. O tamanho da caixa de texto para a
inserção do conteúdo da busca e do botão “buscar” é aumentado, facilitando a utilização
através dos gestos do usuário na tela sensível ao toque. O resultado da implementação no
125
layout responsivo pode ser visualizado nas Figuras a seguir.
Figura 25 - Caixa de busca e botão maiores na versão mobile
Figura 26 - Inserindo dados para busca mobile
126
Figura 27 - Notícia principal alterada conforme a busca
127
CAPÍTULO 5. CONCLUSÕES
O desenvolvimento de designs responsivos para sites requer certo conhecimento do
programador quanto às tecnologias HTML5, CSS3 e JavaScript mas, quando os resultados
são alcançados, as páginas ficam muito mais bem apresentadas ao usuário final
independente do dispositivo que esteja sendo usado para acessar o conteúdo.
O web design responsivo ainda está tomando forma no contexto tecnológico e muita
coisa pode ser alterada, excluída ou acrescentada aos conceitos atualmente praticados. O
fato é que não tem mais como se criar sites com layouts absolutos. Hoje existem diversos
dispositivos com acesso à internet e essa diversificação só irá aumentar daqui para frente. O
uso do design responsivo é a forma correta de assegurar que determinado site será bem
exibido tanto em um computador convencional, quanto em um pequeno smartphone ou
ainda em uma enorme televisão com acesso à internet.
Desta forma podemos concluir que o uso do design responsivo tende a ser cada vez
mais constante e natural, oferecendo aos usuários uma experiência mais uniforme durante o
acesso aos conteúdos, independente do dispositivo que estejam utilizando.
128
REFERÊNCIAS BIBLIOGRÁFICAS
EIS, Diego. Introdução ao Responsive Web Design. Disponível em: <
http://tableless.com.br/introducao-ao-responsive-web-design/> Acessado em 18/03/2012.
EIS, Diego. Uma breve história do CSS. Disponível em: <http://tableless.com.br/uma-
breve-historia-do-css/> Acessado em 27/05/2012.
KNIGHT, Kayla Mae. The Responsive Web Design: What It Is and How To Use It.
Disponível em: <http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-
web-design/> Acessado em 18/03/2012.
ROGÉRIO, Pedro. A história do HTML. Disponível em: <http://www.cssnolanche.com.br/a-
historia-do-html/> Acessado em 29/04/2012.
SILVA, Maurício Samy. HTML 5 – A linguagem de marcação que revolucionou a WEB.
São Paulo: Novatec Editora, 2011.
SILVA, Maurício Samy. Construindo sites com CSS e (X)HTML: sites controlados por
folhas de estilo em cascata. São Paulo: Novatec Editora, 2008.
SILVA, Maurício Samy. CSS3 – Desenvolva aplicações web profissionais com uso dos
proderosos recursos de estilização das CSS3. São Paulo: Novatec Editora, 2012.
W3 SCHOOLS, LEARN JavaScript. Disponível em:
<http://www.w3schools.com/js/default.asp> Acessado em 20/09/2012.
129
APÊNDICE
130
Arquivo indexFixo.html (HTML)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Crio um link para a página de estilos da página -->
<link rel="stylesheet" type="text/css" href="styleFixo.css">
<title>Página fixa</title>
</head>
<body>
<!-- Crio uma div para acomodar todo o site -->
<div class="content">
<!-- Crio um elemento header para receber o cabeçalho da página -->
<header class="header">
<h1>Título da Página Fixa</h1>
</header>
<!-- Crio um elemento aside para acomodar a barra lateral esquerda -->
<aside class="left_sidebar">
<!-- Crio um elemento article para receber os três links da página -->
<article class="options">
<p><a href="#">Na mídia</a></p>
<p><a href="#">Onde estamos</a></p>
<p><a href="#">Imprensa</a></p>
</article>
</aside>
<!-- Crio uma div para acomodar todo o conteúdo do centro da página -->
<div class="middle_sidebar">
<!-- Crio um elemento article para cada notícia inserida no centro da
página -->
<article class="last_news">
<h2>Título Notícia</h2>
131
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
vehicula interdum porttitor. Fusce viverra posuere nisi, et vulputate lacus
hendrerit a. Morbi ac urna non lectus hendrerit tincidunt. Cras in nisi in ligula
egestas aliquam. Curabitur ac ante sit amet nibh tristique elementum.</p>
</article>
<article class="last_news">
<h2>Título Notícia</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
vehicula interdum porttitor. Fusce viverra posuere nisi, et vulputate lacus
hendrerit a. Morbi ac urna non lectus hendrerit tincidunt. Cras in nisi in ligula
egestas aliquam. Curabitur ac ante sit amet nibh tristique elementum.</p>
</article>
<article class="last_news">
<h2>Título Notícia</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
vehicula interdum porttitor. Fusce viverra posuere nisi, et vulputate lacus
hendrerit a. Morbi ac urna non lectus hendrerit tincidunt. Cras in nisi in ligula
egestas aliquam. Curabitur ac ante sit amet nibh tristique elementum.</p>
</article>
<article class="last_news">
<h2>Título Notícia</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
vehicula interdum porttitor. Fusce viverra posuere nisi, et vulputate lacus
hendrerit a. Morbi ac urna non lectus hendrerit tincidunt. Cras in nisi in ligula
egestas aliquam. Curabitur ac ante sit amet nibh tristique elementum.</p>
</article>
</div>
<!-- Crio um elemento aside para acomodar a barra lateral direita com o vídeo
-->
<aside class="right_sidebar">
<iframe width="560" height="315"
src="http://www.youtube.com/embed/NeXMxuNNlE8" frameborder="0"
allowfullscreen></iframe>
</aside>
132
<!-- Crio um elemento footer para acomodar o conteúdo do rodapé da página -->
<footer class="footer">
<p>Rodapé da Página</p>
</footer>
</div>
</body>
</html>
Arquivo styleFixo.css (CSS - Folha de Estilos)
@charset "utf-8";
/* CSS Document */
/* Defino a fonte dos textos em 16px */
body {
font-size: 16px;
}
/* Defino a fonte dos elementos <h2> em 19px */
h2 {
font-size: 19px;
}
/* O bloco geral da página recebe largura de 960px e centralizado */
.content {
width: 960px;
margin: 0 auto;
}
/* O elemento da classe header terá uma fonte de 25px */
.header {
font-size: 25px;
}
/* A barra lateral esquerda ficará acomodada à esquerda e terá 100px de
largura */
.left_sidebar {
float: left;
133
width: 100px;
}
/* A classe options dentro de left_sidebar exibirá o conteúdo com
fonte de 16px */
.options {
font-size: 16px;
}
/* A barra central será jogada em sua esquerda ao lado da barra da esquerda e
terá largura de 500px */
.middle_sidebar {
float: left;
width: 500px;
}
/* A classe lart_news dentro de middle_sidebar exibirá as notícias uma
ao lado da outra quebrando pela esquerda com largura de 230px e margem de 10px
entre cada uma*/
.last_news {
float:left;
width: 230px;
margin-left: 10px;
}
/* A barra da direita será jogada em sua esquerda ao lado da barra central e
terá uma largura de 300px */
.right_sidebar {
float: left;
width: 300px;
}
/* O rodapé não ficará ao lado de nenhum bloco, terá cor de fundo cinza e o
texto alinhado em seu centro */
.footer {
clear: both;
134
float: none;
text-align: center;
background-color:#999;
}
Arquivo indexResponsivo.html (HTML)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Crio um link para a página de estilos da página -->
<link rel="stylesheet" type="text/css" href="styleResponsivo.css">
<title>Página responsiva</title>
<!-- Crio uma meta tag viewport para iniciar o site na largura do dispositivo usado
pelo usuário -->
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<!-- Crio uma div para acomodar todo o site -->
<div class="content">
<!-- Crio um elemento header para receber o cabeçalho da página -->
<header class="header">
<h1>Título da Página Fixa</h1>
</header>
<!-- Crio um elemento aside para acomodar a barra lateral esquerda -->
<aside class="left_sidebar">
<!-- Crio um elemento article para receber os três links da página -->
<article class="options">
<p><a href="#">Na mídia</a></p>
<p><a href="#">Onde estamos</a></p>
<p><a href="#">Imprensa</a></p>
</article>
</aside>
135
<!-- Crio uma div para acomodar todo o conteúdo do centro da página -->
<div class="middle_sidebar">
<!-- Crio um elemento article para cada notícia inserida no centro da
página -->
<article class="last_news">
<h2>Título Notícia</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
vehicula interdum porttitor. Fusce viverra posuere nisi, et vulputate lacus
hendrerit a. Morbi ac urna non lectus hendrerit tincidunt. Cras in nisi in ligula
egestas aliquam. Curabitur ac ante sit amet nibh tristique elementum.</p>
</article>
<article class="last_news">
<h2>Título Notícia</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
vehicula interdum porttitor. Fusce viverra posuere nisi, et vulputate lacus
hendrerit a. Morbi ac urna non lectus hendrerit tincidunt. Cras in nisi in ligula
egestas aliquam. Curabitur ac ante sit amet nibh tristique elementum.</p>
</article>
<article class="last_news">
<h2>Título Notícia</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
vehicula interdum porttitor. Fusce viverra posuere nisi, et vulputate lacus
hendrerit a. Morbi ac urna non lectus hendrerit tincidunt. Cras in nisi in ligula
egestas aliquam. Curabitur ac ante sit amet nibh tristique elementum.</p>
</article>
<article class="last_news">
<h2>Título Notícia</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
vehicula interdum porttitor. Fusce viverra posuere nisi, et vulputate lacus
hendrerit a. Morbi ac urna non lectus hendrerit tincidunt. Cras in nisi in ligula
egestas aliquam. Curabitur ac ante sit amet nibh tristique elementum.</p>
</article>
</div>
<!-- Crio um elemento aside para acomodar a barra lateral direita com o vídeo
136
-->
<aside class="right_sidebar">
<iframe width="560" height="315"
src="http://www.youtube.com/embed/NeXMxuNNlE8" frameborder="0"
allowfullscreen></iframe>
</aside>
<!-- Crio um elemento footer para acomodar o conteúdo do rodapé da página -->
<footer class="footer">
<p>Rodapé da Página</p>
</footer>
</div>
</body>
</html>
Arquivo styleResponsivo.css (CSS - Folha de Estilos)
@charset "utf-8";
/* CSS Document */
/* Defino a fonte dos textos em 1em (16 / 16) */
body {
font-size: 1em;
}
/* Defino a fonte dos elementos <h2> em 1.2em (19 / 16) */
h2 {
font-size: 1.2em;
}
/* Defino o elemento <iframe> que comporta o vídeo para ser exibido em 100% dentro
do espaço da barra da direita em que se encontra */
iframe {
width: 100%;
height:auto;
}
137
/* O bloco geral da página recebe largura de 72% que é aproximadamente equivalente
a 960px em uma resolução de 1366px */
.content {
width: 72%;
margin: 0 auto;
}
/* O elemento da classe header terá uma fonte de 1.5 em (25 / 16) */
.header {
font-size: 1.5em;
}
/* A barra lateral esquerda ficará acomodada à esquerda e terá 10% de largura
(100 / 960) */
.left_sidebar {
float: left;
width: 10%;
text-align:center;
}
/* A classe options dentro de left_sidebar exibirá o conteúdo com
fonte de 1em (16 / 16) */
.options {
font-size: 1em;
}
/* A barra central será jogada em sua esquerda ao lado da barra da esquerda e
terá largura de 52% (500 / 960) */
.middle_sidebar {
float: left;
width: 52%;
}
/* A classe lart_news dentro de middle_sidebar exibirá as notícias uma
ao lado da outra quebrando pela esquerda com largura de 46% (230 / 500) e margem de
4% (10 / 230) entre cada uma*/
.last_news {
138
float:left;
width: 46%;
margin-left: 4%;
}
/* A barra da direita será jogada em sua esquerda ao lado da barra central e
terá uma largura de 31% (300 / 960) */
.right_sidebar {
float: left;
width: 31%;
}
/* O rodapé não ficará ao lado de nenhum bloco, terá cor de fundo cinza, o
texto alinhado em seu centro e ocupará 100% da largura da página*/
.footer {
clear: both;
float: none;
text-align: center;
background-color:#999;
width: 100%;
}
/* Para dispositivos com largura máxima de 900px */
@media only screen and (max-width: 900px) {
/* A barra da esquerda sobe, ocupa 100% da largura com texto
centralizado e fica entre o título da página e as ultimas notícias */
.left_sidebar {
float: none;
width: 100%;
text-align:center;
}
}
/* Para dispositivos com largura máxima de 640px */
@media only screen and (max-width: 640px) {
139
/* A barra da esquerda sobe, ocupa 100% da largura com texto
centralizado e fica entre o título da página e as ultimas notícias */
.left_sidebar {
float: none;
width: 100%;
text-align:center;
}
/* A barra central recebe largura de 100% */
.middle_sidebar {
float: none;
width: 100%;
}
/* As notícias são exibidas uma por vez na horizontal e ocupam 100% da
largura do bloco */
.last_news {
float:none;
width: 100%;
}
/* A barra da direita com o vídeo não é mais exibida */
.right_sidebar {
display: none;
}
/* O tamanho da fonte do título do site é reduzida */
.header {
font-size: 1.1em;
}
}
Arquivo indexResponsivoJavaScript.html (HTML)
<!DOCTYPE HTML>
<html>
<head>
140
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Crio um link para a página de estilos da página -->
<link rel="stylesheet" type="text/css" href="styleResponsivoJavaScript.css">
<!-- Crio um link para a página externa de funções JavaScript -->
<script type="text/javascript" src="javaScriptResponsivo.js"></script>
<title>Página responsiva</title>
<!-- Crio uma meta tag viewport para iniciar o site na largura do dispositivo usado
pelo usuário -->
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<!-- Crio uma div para acomodar todo o site -->
<div class="content">
<!-- Crio um elemento header para receber o cabeçalho da página -->
<header class="header">
<h1>Título da Página Responsiva</h1>
</header>
<!-- Crio um elemento aside para receber o campo de busca da página -->
<aside class="search">
<input type="text" name="busca" id="conteudoBusca"
onMouseOver="exibeExplicacao();" onMouseOut="escondeExplicacao();">
<input type="button" name="buscar" value="BUSCAR" id="botaoBusca"
onClick="buscar();">
<p id="explicacao"> </p>
</aside>
<!-- Crio um elemento aside para acomodar a barra lateral esquerda -->
<aside class="left_sidebar">
<!-- Crio um elemento article para receber os três links da página -->
<article class="options">
<p><a href="#">Na mídia</a></p>
<p><a href="#">Onde estamos</a></p>
<p><a href="#">Imprensa</a></p>
141
</article>
</aside>
<!-- Crio uma div para acomodar todo o conteúdo do centro da página -->
<div class="middle_sidebar">
<!-- Crio um elemento article para cada notícia inserida no centro da
página -->
<article class="last_news" id="noticiaPrincipal">
<h2>Título Notícia</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
vehicula interdum porttitor. Fusce viverra posuere nisi, et vulputate lacus
hendrerit a. Morbi ac urna non lectus hendrerit tincidunt. Cras in nisi in ligula
egestas aliquam. Curabitur ac ante sit amet nibh tristique elementum.</p>
</article>
<article class="last_news">
<h2>Título Notícia</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
vehicula interdum porttitor. Fusce viverra posuere nisi, et vulputate lacus
hendrerit a. Morbi ac urna non lectus hendrerit tincidunt. Cras in nisi in ligula
egestas aliquam. Curabitur ac ante sit amet nibh tristique elementum.</p>
</article>
<article class="last_news">
<h2>Título Notícia</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
vehicula interdum porttitor. Fusce viverra posuere nisi, et vulputate lacus
hendrerit a. Morbi ac urna non lectus hendrerit tincidunt. Cras in nisi in ligula
egestas aliquam. Curabitur ac ante sit amet nibh tristique elementum.</p>
</article>
<article class="last_news">
<h2>Título Notícia</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
vehicula interdum porttitor. Fusce viverra posuere nisi, et vulputate lacus
hendrerit a. Morbi ac urna non lectus hendrerit tincidunt. Cras in nisi in ligula
egestas aliquam. Curabitur ac ante sit amet nibh tristique elementum.</p>
</article>
</div>
142
<!-- Crio um elemento aside para acomodar a barra lateral direita com o vídeo
-->
<aside class="right_sidebar">
<iframe width="560" height="315"
src="http://www.youtube.com/embed/NeXMxuNNlE8" frameborder="0"
allowfullscreen></iframe>
</aside>
<!-- Crio um elemento footer para acomodar o conteúdo do rodapé da página -->
<footer class="footer">
<p>Rodapé da Página</p>
</footer>
</div>
</body>
</html>
Arquivo styleResponsivoJavaScript.css (CSS - Folha de Estilos)
@charset "utf-8";
/* CSS Document */
/* Defino a fonte dos textos em 1em (16 / 16) */
body {
font-size: 1em;
}
/* Defino a fonte dos elementos <h2> em 1.2em (19 / 16) */
h2 {
font-size: 1.2em;
}
/* Defino o elemento <iframe> que comporta o vídeo para ser exibido em 100% dentro
do espaço da barra da direita em que se encontra */
iframe {
width: 100%;
height:auto;
143
}
/* O bloco geral da página recebe largura de 72% que é aproximadamente equivalente
a 960px em uma resolução de 1366px */
.content {
width: 72%;
margin: 0 auto;
}
/* O elemento da classe header terá uma fonte de 1.5 em (25 / 16) */
.header {
font-size: 1.5em;
}
/* O elemento da classe search terá largura de 52% */
.search {
width: 52%;
}
/* A barra lateral esquerda ficará acomodada à esquerda e terá 10% de largura
(100 / 960) */
.left_sidebar {
float: left;
width: 10%;
text-align:center;
}
/* A classe options dentro de left_sidebar exibirá o conteúdo com
fonte de 1em (16 / 16) */
.options {
font-size: 1em;
}
/* A barra central será jogada em sua esquerda ao lado da barra da esquerda e
terá largura de 52% (500 / 960) */
.middle_sidebar {
float: left;
144
width: 52%;
}
/* A classe lart_news dentro de middle_sidebar exibirá as notícias uma
ao lado da outra quebrando pela esquerda com largura de 46% (230 / 500) e margem de
4% (10 / 230) entre cada uma*/
.last_news {
float:left;
width: 46%;
margin-left: 4%;
}
/* A barra da direita será jogada em sua esquerda ao lado da barra central e
terá uma largura de 31% (300 / 960) */
.right_sidebar {
float: left;
width: 31%;
}
/* O rodapé não ficará ao lado de nenhum bloco, terá cor de fundo cinza, o
texto alinhado em seu centro e ocupará 100% da largura da página*/
.footer {
clear: both;
float: none;
text-align: center;
background-color:#999;
width: 100%;
}
/* Para dispositivos com largura máxima de 900px */
@media only screen and (max-width: 900px) {
/* A barra da esquerda sobe, ocupa 100% da largura com texto
centralizado e fica entre o título da página e as ultimas notícias */
.left_sidebar {
float: none;
width: 100%;
145
text-align:center;
}
}
/* Para dispositivos com largura máxima de 640px */
@media only screen and (max-width: 640px) {
/* A barra da esquerda sobe, ocupa 100% da largura com texto
centralizado e fica entre o título da página e as ultimas notícias */
.left_sidebar {
float: none;
width: 100%;
text-align:center;
}
/* A barra central recebe largura de 100% */
.middle_sidebar {
float: none;
width: 100%;
}
/* As notícias são exibidas uma por vez na horizontal e ocupam 100% da
largura do bloco */
.last_news {
float:none;
width: 100%;
}
/* A barra da direita com o vídeo não é mais exibida */
.right_sidebar {
display: none;
}
/* O tamanho da fonte do título do site é reduzida */
.header {
font-size: 1.1em;
146
}
/* O espaço para a explicação do campo buscar não é mais exibido */
#explicacao {
display: none;
}
/* O elemento da classe search terá largura de 52% */
.search {
width: 52%;
}
/* O elemento input dentro da classe search possuirá altura de 30px */
.search input {
height: 30px;
}
}
Arquivo javaScriptResponsivo.js (JavaScript com funções)
// JavaScript Document
// SCRIPT PARA CHAMADAS AJAX
//Função de criação do objeto XMLHTTP para uso do AJAX
try{
xmlhttp = new XMLHttpRequest();
}catch(ee){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(E){
xmlhttp = false;
}
}
}
147
//Função para listar a nova primeira notícia ao executar a busca
function buscar(){
conteudo = document.getElementById('conteudoBusca').value;
xmlhttp.open("GET", "retornoConteudoResponsivo.php?conteudo="+conteudo,true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4){
if (xmlhttp.status == 200){
//Resposta da Requisição
var aResposta = (xmlhttp.responseText);
document.getElementById('noticiaPrincipal').innerHTML =
aResposta;
}else{
//Erro na resposta da requisição
alert("Sua requisição não retornou um resultado
válido.\nErro: "+xmlhttp.status)
}
}
}
xmlhttp.send(null);
}
//Função para exibir o texto de explicação ao passar o mouse sobre a caixa de busca
function exibeExplicacao(){
document.getElementById('explicacao').innerHTML = "Insira uma palavra para a
busca";
}
//Função para esconder o texto de explicação aoretirar o mouse da caixa de busca
function escondeExplicacao(){
document.getElementById('explicacao').innerHTML = " ";
}
148
Arquivo retornoConteudoResponsivo.php (PHP com retorno do
novo texto da notícia)
<?php
$conteudo = $_GET["conteudo"];
echo "
<h2>".$conteudo."</h2>
<p>Novo texto para a notícia buscada através da caixa de busca no início da
página. Novo texto para a notícia buscada através da caixa de busca no início da
página. Novo texto para a notícia buscada através da caixa de busca no início da
página.</p>
"
?>