Transcript
Page 1: o uso de html5 e css3 na viabilização do design responsivo

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

Page 2: o uso de html5 e css3 na viabilização do design responsivo

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

Page 3: o uso de html5 e css3 na viabilização do design responsivo

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

Page 4: o uso de html5 e css3 na viabilização do design responsivo

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

Page 5: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 6: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 7: o uso de html5 e css3 na viabilização do design responsivo

”Faça ou não faça. Tentativas não há.”

Mestre Yoda - Star Wars V

Page 8: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 9: o uso de html5 e css3 na viabilização do design responsivo

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

Page 10: o uso de html5 e css3 na viabilização do design responsivo

4.3 Página Responsiva com JavaScript ........................................................ 121

CapÍtulo 5. CONCLUSÕES ................................................................................................ 127

REFERÊNCIAS BIBLIOGRÁFICAS ................................................................................... 128

Page 11: o uso de html5 e css3 na viabilização do design responsivo

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

Page 12: o uso de html5 e css3 na viabilização do design responsivo

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

Page 13: o uso de html5 e css3 na viabilização do design responsivo

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

Page 14: o uso de html5 e css3 na viabilização do design responsivo

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

Page 15: o uso de html5 e css3 na viabilização do design responsivo

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

Page 16: o uso de html5 e css3 na viabilização do design responsivo

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

Page 17: o uso de html5 e css3 na viabilização do design responsivo

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

Page 18: o uso de html5 e css3 na viabilização do design responsivo

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).

Page 19: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 20: o uso de html5 e css3 na viabilização do design responsivo

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;

Page 21: o uso de html5 e css3 na viabilização do design responsivo

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).

Page 22: o uso de html5 e css3 na viabilização do design responsivo

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

Page 23: o uso de html5 e css3 na viabilização do design responsivo

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).

Page 24: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 25: o uso de html5 e css3 na viabilização do design responsivo

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

Page 26: o uso de html5 e css3 na viabilização do design responsivo

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

Page 27: o uso de html5 e css3 na viabilização do design responsivo

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

Page 28: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 29: o uso de html5 e css3 na viabilização do design responsivo

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

Page 30: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 31: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 32: o uso de html5 e css3 na viabilização do design responsivo

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);

Page 33: o uso de html5 e css3 na viabilização do design responsivo

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

Page 34: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 35: o uso de html5 e css3 na viabilização do design responsivo

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).

Page 36: o uso de html5 e css3 na viabilização do design responsivo

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

Page 37: o uso de html5 e css3 na viabilização do design responsivo

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

Page 38: o uso de html5 e css3 na viabilização do design responsivo

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

Page 39: o uso de html5 e css3 na viabilização do design responsivo

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

Page 40: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 41: o uso de html5 e css3 na viabilização do design responsivo

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

Page 42: o uso de html5 e css3 na viabilização do design responsivo

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

Page 43: o uso de html5 e css3 na viabilização do design responsivo

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).

Page 44: o uso de html5 e css3 na viabilização do design responsivo

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

Page 45: o uso de html5 e css3 na viabilização do design responsivo

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

Page 46: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 47: o uso de html5 e css3 na viabilização do design responsivo

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;.

Page 48: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 49: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 50: o uso de html5 e css3 na viabilização do design responsivo

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

Page 51: o uso de html5 e css3 na viabilização do design responsivo

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

Page 52: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 53: o uso de html5 e css3 na viabilização do design responsivo

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

Page 54: o uso de html5 e css3 na viabilização do design responsivo

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%; }

Page 55: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 56: o uso de html5 e css3 na viabilização do design responsivo

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

Page 57: o uso de html5 e css3 na viabilização do design responsivo

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

Page 58: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 59: o uso de html5 e css3 na viabilização do design responsivo

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

Page 60: o uso de html5 e css3 na viabilização do design responsivo

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

Page 61: o uso de html5 e css3 na viabilização do design responsivo

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

Page 62: o uso de html5 e css3 na viabilização do design responsivo

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

Page 63: o uso de html5 e css3 na viabilização do design responsivo

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

Page 64: o uso de html5 e css3 na viabilização do design responsivo

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

Page 65: o uso de html5 e css3 na viabilização do design responsivo

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

Page 66: o uso de html5 e css3 na viabilização do design responsivo

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

Page 67: o uso de html5 e css3 na viabilização do design responsivo

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;

Page 68: o uso de html5 e css3 na viabilização do design responsivo

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

Page 69: o uso de html5 e css3 na viabilização do design responsivo

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>

Page 70: o uso de html5 e css3 na viabilização do design responsivo

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

Page 71: o uso de html5 e css3 na viabilização do design responsivo

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

Page 72: o uso de html5 e css3 na viabilização do design responsivo

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

Page 73: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 74: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 75: o uso de html5 e css3 na viabilização do design responsivo

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

Page 76: o uso de html5 e css3 na viabilização do design responsivo

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,

Page 77: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 78: o uso de html5 e css3 na viabilização do design responsivo

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

Page 79: o uso de html5 e css3 na viabilização do design responsivo

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

Page 80: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 81: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 82: o uso de html5 e css3 na viabilização do design responsivo

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

Page 83: o uso de html5 e css3 na viabilização do design responsivo

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

Page 84: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 85: o uso de html5 e css3 na viabilização do design responsivo

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

Page 86: o uso de html5 e css3 na viabilização do design responsivo

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

Page 87: o uso de html5 e css3 na viabilização do design responsivo

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) {...}

Page 88: o uso de html5 e css3 na viabilização do design responsivo

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

Page 89: o uso de html5 e css3 na viabilização do design responsivo

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-.

Page 90: o uso de html5 e css3 na viabilização do design responsivo

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

Page 91: o uso de html5 e css3 na viabilização do design responsivo

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

Page 92: o uso de html5 e css3 na viabilização do design responsivo

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

Page 93: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 94: o uso de html5 e css3 na viabilização do design responsivo

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).

Page 95: o uso de html5 e css3 na viabilização do design responsivo

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:

Page 96: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 97: o uso de html5 e css3 na viabilização do design responsivo

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

Page 98: o uso de html5 e css3 na viabilização do design responsivo

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 *;

}

Page 99: o uso de html5 e css3 na viabilização do design responsivo

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

Page 100: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 101: o uso de html5 e css3 na viabilização do design responsivo

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;

Page 102: o uso de html5 e css3 na viabilização do design responsivo

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

Page 103: o uso de html5 e css3 na viabilização do design responsivo

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

Page 104: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 105: o uso de html5 e css3 na viabilização do design responsivo

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()

Page 106: o uso de html5 e css3 na viabilização do design responsivo

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

Page 107: o uso de html5 e css3 na viabilização do design responsivo

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";

Page 108: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 109: o uso de html5 e css3 na viabilização do design responsivo

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";

Page 110: o uso de html5 e css3 na viabilização do design responsivo

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

Page 111: o uso de html5 e css3 na viabilização do design responsivo

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

Page 112: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 113: o uso de html5 e css3 na viabilização do design responsivo

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>

Page 114: o uso de html5 e css3 na viabilização do design responsivo

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

Page 115: o uso de html5 e css3 na viabilização do design responsivo

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)

Page 116: o uso de html5 e css3 na viabilização do design responsivo

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

Page 117: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 118: o uso de html5 e css3 na viabilização do 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

Page 119: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 120: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 121: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 122: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 123: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 124: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 125: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 126: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 127: o uso de html5 e css3 na viabilização do 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.

Page 128: o uso de html5 e css3 na viabilização do design responsivo

123

Figura 21 - Caixa de busca em resoluções maiores

Figura 22 - Caixa de busca executando onMouseOver

Page 129: o uso de html5 e css3 na viabilização do design responsivo

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

Page 130: o uso de html5 e css3 na viabilização do design responsivo

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

Page 131: o uso de html5 e css3 na viabilização do design responsivo

126

Figura 27 - Notícia principal alterada conforme a busca

Page 132: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 133: o uso de html5 e css3 na viabilização do design responsivo

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.

Page 134: o uso de html5 e css3 na viabilização do design responsivo

129

APÊNDICE

Page 135: o uso de html5 e css3 na viabilização do design responsivo

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>

Page 136: o uso de html5 e css3 na viabilização do design responsivo

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>

Page 137: o uso de html5 e css3 na viabilização do design responsivo

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;

Page 138: o uso de html5 e css3 na viabilização do design responsivo

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;

Page 139: o uso de html5 e css3 na viabilização do design responsivo

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>

Page 140: o uso de html5 e css3 na viabilização do design responsivo

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

Page 141: o uso de html5 e css3 na viabilização do design responsivo

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;

}

Page 142: o uso de html5 e css3 na viabilização do design responsivo

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 {

Page 143: o uso de html5 e css3 na viabilização do design responsivo

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) {

Page 144: o uso de html5 e css3 na viabilização do design responsivo

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>

Page 145: o uso de html5 e css3 na viabilização do design responsivo

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">&nbsp;</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>

Page 146: o uso de html5 e css3 na viabilização do design responsivo

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>

Page 147: o uso de html5 e css3 na viabilização do design responsivo

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;

Page 148: o uso de html5 e css3 na viabilização do design responsivo

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;

Page 149: o uso de html5 e css3 na viabilização do design responsivo

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%;

Page 150: o uso de html5 e css3 na viabilização do design responsivo

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;

Page 151: o uso de html5 e css3 na viabilização do design responsivo

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;

}

}

}

Page 152: o uso de html5 e css3 na viabilização do design responsivo

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 = "&nbsp;";

}

Page 153: o uso de html5 e css3 na viabilização do design responsivo

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>

"

?>