Apostila Desenvolvimento de Páginas Web 1 (1)

Prévia do material em texto

Desenvolvimento de Páginas Web 1 
 
Fabricio Piccinin de Souza 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Curso Técnico em Informática para a Internet 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Barbacena – MG 
2016 
 
Sumário 
 
 
Apresentação da disciplina 
 
Aula 1 – Visão geral do desenvolvimento de páginas web 
 
1.1 Desenvolvimento web 
1.2 Front-end e back-end 
1.3 Desenvolvimento front-end em 3 camadas 
1.4 Renderização e entidades de padronização 
1.5 Versões da linguagem HTML 
1.6 Criando sua primeira página web 
 
Aula 2 – Linguagem de marcação HTML5 
 
2.1 Declaração de uma página HTML5 
2.2 Tags 
2.3 Cabeçalho 
2.4 Tags estruturais semânticas 
2.5 Tags básicas 
2.6 Imagens 
2.7 Links 
 
Aula 3 – Listas e tabelas 
 
3.1 Listas não-ordenadas 
3.2 Listas ordenadas 
3.3 Combinação de listas 
3.4 Tabelas 
 
Aula 4 – Formulários 
 
4.1 Estrutura básica 
4.2 Principais campos 
4.3 Labels 
 
Aula 5 – Folhas de estilo em cascata (CSS) 
 
5.1 Modos de uso 
5.2 Sintaxe básica 
5.3 Principais atributos/valores 
5.4 Seletores básicos 
5.5 Pseudo-elementos 
5.6 CSS reset 
5.7 Box model 
 
 
 
Aula 6 – Floats, frameworks e grids 
 
6.1 Posicionamento via float 
6.2 Frameworks CSS 
6.3 Grid 
 
Aula 7 – Conceitos de Acessibilidade e SEO 
 
7.1 Acessibilidade na web 
7.2 Otimização para mecanismos de buscas 
 
Aula 8 - Design para web 
 
8.1 O que é design? 
8.2 Web design 
8.3 Planejamento e organização de informações 
8.4 Layout e aparência 
8.5 Anatomia de um site 
 
Referências 
 
 
Apresentação da disciplina 
 
 
Prezado aluno, 
 
 Nessa disciplina iniciaremos o estudo do desenvolvimento de páginas web, aprendendo como 
funcionam e como são desenvolvidos os sites e sistemas web que acessamos diariamente na Internet, 
tanto em computadores como em dispositivos móveis. A disciplina será bem prática e dinâmica, uma 
vez que você poderá testar e visualizar no seu navegador de internet cada exemplo do conteúdo que 
iremos estudar. 
 
 Na aula 1, faremos uma visão geral do desenvolvimento de páginas web, conhecendo como o 
mesmo é estruturado, quais tecnologias iremos estudar ao longo do curso, e criando nossa primeira 
página web. 
 
 Colocaremos a mão na massa a partir da aula 2, conhecendo os fundamentos da linguagem de 
marcação HTML5, e aprendendo a inserir conteúdos, imagens e links em nossa página, de modo que a 
mesma possa referenciar outras páginas, formando a estrutura que chamamos de Web (teia) da 
Internet. 
 
 Dando continuidade ao desenvolvimento de páginas em HTML5, na aula 3 aprenderemos a 
inserir listas de itens – que podem ser não-ordenadas ou ordenadas – e tabelas de dados, com as quais 
podemos representar, por exemplo, preços de produtos ou resultados de um jogo. 
 
 Na aula 4 estudaremos os formulários e seus campos, que são a forma pela qual o usuário do 
site pode interagir com o mesmo, realizando buscas, informando seu e-mail e senha, ou cadastrando 
itens como informações de um produto. 
 
 Começaremos o estudo da camada de apresentação visual dos sites na aula 5, estudando a 
sintaxe das folhas de estilo em cascata (CSS), e aprendendo a selecionar elementos do HTML e aplicar 
estilos visuais como cores, bordas, margens e sombras. 
 
 Na aula 6 aprofundaremos o estudo das folhas de estilo, estudando técnicas de posicionamento 
dos elementos e conhecendo o framework Bootstrap – uma biblioteca CSS desenvolvida pela equipe 
do Twitter para o desenvolvimento ágil e padronizado de páginas web. 
 
 Finalizando a disciplina, na aula 7 estudaremos alguns conceitos sobre acessibilidade e 
otimização, de modo a tornar nossos sites mais acessíveis para portadores de necessidades especiais e 
também melhor posicionados no ranking de resultados de busca do Google e de outros mecanismos de 
pesquisa. 
 
 Como motivação para seus estudos, lembre-se que presenciamos uma tendência crescente da 
migração de aplicativos para sites e sistemas web acessíveis de qualquer navegador. Dessa forma, o 
mercado de trabalho está cada vez mais interessado em profissionais qualificados no desenvolvimento 
de sites de qualidade e baseados em padrões e boas práticas de desenvolvimento. 
 
 Bons estudos! 
 
 Rafael José de Alencar Almeida. 
 
Aula 1 – Visão geral do desenvolvimento de páginas web 
 
 
1.1 Desenvolvimento web 
 
 A World Wide Web, também chamada de Web ou rede mundial de computadores, é uma rede 
de comunicação que interliga computadores e recursos dos mesmos (páginas, imagens, vídeos, etc.) 
por meio da infraestrutura da Internet. 
 
 
 O principal componente do desenvolvimento web são as páginas web ou páginas de hipertexto, 
que são os documentos textuais que armazenam a informação dos sites, e possuem hiperlinks (mais 
comumente chamados apenas de links) para outros documentos ou recursos multimídia. 
 
 Nessa disciplina aprenderemos a sintaxe e a semântica da criação de páginas web, 
representando seu conteúdo por meio de marcações padronizadas de uma linguagem chamada HTML 
(HyperText Markup Language – Linguagem de Marcação de Hipertexto), e definindo seu estilo visual 
com folhas de estilo. 
 
 
1.2 Front-end e back-end 
 
 O desenvolvimento de sistemas web complexos, que realizam o envio de informações definidas 
pelo usuário e acessam banco de dados, é dividido em duas camadas, que denominamos front-end 
(lado cliente) e back-end (lado servidor). 
 
 Os componentes e as ações do front-end são executados no navegador de internet do usuário, 
enquanto as ações do back-end ocorrem no servidor onde o sistema web está hospedado. A 
comunicação entre esses dois lados se dá por meio de um protocolo chamado HTTP (Hypertext 
Transfer Protocol – Protocolo de Transferência de Hipertexto), que estudaremos nas próximas 
disciplinas do curso. 
 
 O foco da presente disciplina (e da próxima) será o desenvolvimento front-end, onde 
aprenderemos como criar uma página web sem comunicação com o servidor, sendo inteiramente 
executada no navegador de internet do seu computador. 
 
 
 
1.3 Desenvolvimento front-end em 3 camadas 
 
 O desenvolvimento front-end é estruturado em três camadas, onde cada uma é responsável por 
um aspecto da página web a ser desenvolvida: 
 
• Informação: define o conteúdo da página web, focando nos dados, e não em sua formatação 
visual. Utilizamos a linguagem de marcação HTML para essa tarefa; 
 
• Apresentação: define os estilos visuais da página (cores, posicionamento, bordas, margens, 
etc), formatando os dados marcados em HTML de modo a apresentarem um visual mais agradável. 
Essa definição é realizada por meio das folhas de estilo em CSS; 
 
• Comportamento: define as ações dinâmicas da página, como a troca da cor de fundo da 
página quando o usuário clicar em determinado botão. Para essa tarefa é utilizada a linguagem de 
programação JavaScript. 
 
 
 
 
1.4 Renderização e entidades de padronização 
 
 O processo de transformação dos códigos HTML, CSS e JavaScript na página visualizada é 
chamado renderização, sendo realizado pelo navegador de internet do usuário (Chrome, Firefox, 
Internet Explorer, etc.). 
 
 Em teoria, todos os navegadores deveriam renderizar uma mesma página da mesma forma, 
mas, no início da Web, as empresas de navegadores tentavam impor seus próprios padrões (período 
conhecido como a Guerra dos Navegadores), o que levou a uma onda generalizada de sites 
incompatíveis.Ao longo dos anos, surgiram entidades para buscar uma padronização no desenvolvimento 
web, sedo a principal a W3C (World Wide Web Consortium), um consórcio internacional que visa 
desenvolver padrões para a criação e a interpretação de conteúdos para Web. Dessa forma, atualmente 
há menos incompatibilidades entre os navegadores modernos. 
 
 
1.5 Versões da linguagem HTML 
 
 Quando a liguagem HTML se encontrava em sua versão 4, a W3C propôs a XHTML 
(eXtensible Hypertext Markup Language – Linguagem de Marcação de Hipertexto Extensível), que 
possui uma sintaxe mais rígida e padronizada, de modo a forçar o desenvolvimento de sites mais 
compatíveis. 
 
 A XHTML foi um grande avanço no aspecto da sintaxe das páginas web, uma vez que exige 
um maior rigor na codificação e possibilita uma validação automatizada por meio de ferramentas de 
análise. Entretanto, não adicionou muito à semântica das páginas, que é importante para que 
algoritmos como leitores de telas para deficientes visuais e buscadores possam compreender melhor 
sua estrutura e significado. 
 
 
XHTML: foco na sintaxe, mas não na semântica 
 
 
 
 Enquanto a W3C elaborava a segunda versão da XHTML, um grupo de empresas de software 
se uniu e formou o WHATWG (Web Hypertext Application Technology Working Group), que iniciou a 
elaboração de uma nova versão para a linguagem HTML com foco na semântica, a HTML5. 
 
 
 
 
 Percebendo a relevância da HTML5, a W3C apoiou a iniciativa de especificação da linguagem, 
que além de avanços semânticos, oferece uma série de inovações em relação à HTML4, como 
bibliotecas para multimídia e acesso a dispositivos como GPS e câmera, tornando as páginas web cada 
vez mais poderosas e funcionais, e abrindo caminho para a Web como principal plataforma de 
desenvolvimento de software. 
 
 
1.6 Criando sua primeira página web 
 
 Agora que conhecemos a teoria básica sobre desenvolvimento de páginas web, vamos partir 
para a parte prática e criar nossa primeira página! 
 
 Uma página HTML é apenas um arquivo texto, com a extensão .html. Dessa forma, abra um 
editor de textos como o bloco de notas do Windows ou Gedit do Linux, digite o conteúdo abaixo, e 
salve com o nome index.html (não se preocupe se não entender o código, nas próximas aulas o 
estudaremos em detalhes). 
 
 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8"> 
 <title>Aula 1</title> 
 </head> 
 <body> 
 <h1>Aula 1</h1> 
 <p>Minha primeira página web!</p> 
 </body> 
</html> 
 
 
 Abra o arquivo no navegador de internet e repare a exibição do título da aba da página e do 
conteúdo da mesma. Experimente alterar os textos do arquivo HTML e atualizar a visualização da 
página no navegador. 
 
Resultado 
 
Dica: Mantida a extensão .html, o nome do arquivo poderia ser qualquer outro, como pagina.html ou 
aula1.html. Utilizamos no exemplo o nome index (índice) pois por convenção esse é o nome padrão da 
página inicial de um site. 
 
Atenção: a linguagem HTML é uma linguagem de marcação da camada de informação, sendo incorreto 
falar que a mesma é uma de linguagem de programação! 
 
 
 
Aula 2 – Linguagem de marcação HTML5 
 
 
2.1 Declaração de uma página HTML5 
 
 Como vimos na aula anterior, uma página HTML é um arquivo com a extensão .html, sendo 
o arquivo index.html, por convenção, a página inicial do site. 
 
 Na primeira linha do arquivo, definimos a versão da linguagem de marcação HTML que 
estamos utilizando. Essa declaração é chamada doctype, e varia de acordo com a versão da linguagem 
HTML utilizada: 
 
• HTML 4.01: 
 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
 
 
• XHTML 1.0: 
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
 
• HTML5: 
 
 <!DOCTYPE html> 
 
 
 Como você deve ter percebido, na HTML5 ficou muito mais fácil de lembrar e digitar o 
doctype, sendo importante observar que não devemos nos esquecer de sempre incluir essa declaração 
na página, para sua correta exibição nos navegadores de internet. 
 
 
2.2 Tags 
 
 Logo após a declaração do doctype, as informações da página HTML serão definidas por meio 
de tags (etiquetas), que são a forma como marcamos os conteúdos das páginas. 
 
 Uma tag é definida por uma palavra reservada (como title, head ou img), escrita entre os 
sinais de menor e maior, como <title>, <head> e <img>. 
 
 Algumas tags podem ser utilizadas em pares, envolvendo o conteúdo a ser marcado (lembre 
que HTML é uma linguagem de marcação), como no exemplo de uso da tag <p>, que define um 
parágrafo na página: 
 
 <p>Este é um parágrafo</p> 
 
 
 Repare que a tag final, que finaliza ou fecha a marcação, deve ser indicada com uma barra logo 
 
após o sinal de menor. 
 
 Outras tags são usadas individualmente, não possuindo um fechamento, como na tag para 
definição de uma imagem: 
 
 <img> 
 
 Existe um tipo especial de tag, chamada tag de comentário, cujo conteúdo não será exibido no 
navegador, servindo apenas para o desenvolvedor escrever comentários e observações no código: 
 
 <!-- Este é um comentário, e não aparecerá no navegador --> 
 
 Tags podem possuir atributos, que são uma forma de se adicionar informações adicionais às 
mesmas. Um atributo deve vir após o nome da tag, separado por espaço, seguindo a sintaxe abaixo: 
 
 <tag atributo="valor"> 
 
 Em caso de tags utilizadas em pares, o atributo deverá ser definido na tag de abertura (primeira 
tag do par): 
 
 <tag atributo="valor"></tag> 
 
 Uma tag pode possuir mais de um atributo: 
 
 <tag atributo1="valor1" atributo2="valor2" atributo3="valor3"></tag> 
 
 Vamos ver um exemplo prático? Na tag que define uma imagem <img>, podemos usar o 
atributo src para definir o arquivo da imagem, e o atributo title para definir o texto que será 
exibido quando o usuário parar o cursor do mouse sobre a mesma: 
 
 <img src="if.jpg" title="Campus Barbacena"> 
 
Resultado 
 
 As principais tags que compõem a estrutura de uma página HTML são as tags <html>, 
<head> e <body>. A tag html deve envolver todas as demais tags, sendo aberta na linha abaixo da 
declaração do doctype. Dentro dela, devem ser definidas as tags head (cabeçalho, que irá conter 
 
informações extras sobre a página, como título e o ícone da aba) e body (corpo, onde ficarão as tags 
marcando o conteúdo da página). 
 
 Dessa forma, todas as nossas páginas terão a seguinte estrutura básica: 
 
<!DOCTYPE html> 
<html> 
 <head> 
 
 </head> 
 <body> 
 
 </body> 
</html> 
 
 
2.3 Cabeçalho 
 
 Dentro do cabeçalho da página (bloco definido entre as tags <head> e </head>), podemos 
adicionar informações sobre a página que não estão relacionadas ao seu conteúdo em si. Seguem 
abaixo as principais: 
 
• Definição da codificação de caracteres UTF-8 a ser utilizada, para evitar erros em caracteres 
especiais como acentuação: 
 
 <meta charset="utf-8"> 
 
 
• Título da página, que será exibido na aba do navegador: 
 
 <title>Título da página</title> 
 
 
• Definição da área da tela, de modo a melhor se adaptar a navegadores de dispositivos móveis: 
 
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
 
• Ícone da página: 
 
 <link rel="shortcut icon" href="imagem_do_icone.ico" /> 
 
 
 
 
Dica: você pode criar seus próprios ícones no site www.favicon.cc 
 
 
 
 
 
2.4 Tags estruturais semânticas 
 
 Dentro do corpo da página (bloco definido entreas 
tags <body> e </body>), serão utilizadas as tags para 
marcar o conteúdo do site. Uma boa prática é dividir os 
blocos de conteúdo utilizando as tags semânticas 
introduzidas na linguagem HTML5: 
 
• <header> para o cabeçalho do site (não confundir 
com a tag <head>); 
 
• <footer> para o rodapé do site; 
 
• <nav> para o menu de navegação do site; 
 
• <article> para conteúdos principais, como 
artigos e postagens; 
 
• <section> para seções do site. 
 
• <aside> para conteúdos relacionados mais não principais 
 
 
 
Atenção: as tags semânticas definem apenas o significado dos blocos, não controlando o posicionamento 
visual dos mesmos na página, que deverá ser realizado via CSS. 
 
 
 
2.5 Tags básicas 
 
 Neste tópico conheceremos as tags mais utilizadas em páginas web: 
 
• Parágrafo de texto: 
 
 <p>Primeiro parágrafo</p> 
 <p>Segundo parágrafo</p> 
 
Resultado 
 
 
• Quebra de linha 
 
 <p>Rua Monsenhor José Augusto, nº 204<br> 
 Bairro São José<br> 
 Barbacena - MG</p> 
 
Resultado 
 
 
• Cabeçalhos, utilizados para títulos e subtítulos. Vão de <h1> a <h6>: 
 
 <h1>Título do site</h1> 
 
 <h2>Tópico 1</h2> 
 <h3>Item 1.1</h3> 
 
 
 
Resultado 
 
 
<h1>Cabeçalho H1</h1> 
<h2>Cabeçalho H2</h2> 
<h3>Cabeçalho H3</h3> 
<h4>Cabeçalho H4</h4> 
<h5>Cabeçalho H5</h5> 
<h6>Cabeçalho H6</h6> 
 
Resultado 
 
 
• Seção, utilizada para envolver seções logicamente relacionadas na página, não sendo tão 
semântica quanto as tags semânticas do HTML5: 
 
 <div> 
 <p>Primeiro parágrafo</p> 
 <p>Segundo parágrafo relacionado</p> 
 </div> 
 
• Span, utilizado para envolver um trecho de texto, sem forçar quebra de linha. Muito útil para 
aplicar estilos via CSS: 
 
 <p>Texto do parágrafo <span>principal</span></p> 
 
 
 
• Quebra temática, traça uma linha separadora: 
 
 <div> 
 Conteúdo 1 
 </div> 
 <hr /> 
 <div> 
 Conteúdo 2 
 </div> 
 
Resultado 
 
 
 
• Tag <strong>, utilizada para dar destaque semântico forte a um texto, geralmente sendo 
renderizado como negrito: 
 
 <p><strong>Atenção: </strong>e-mail incorreto</p> 
 
Resultado 
 
 
• Tag <em>, utilizada para dar ênfase semântica a um texto, geralmente sendo renderizada como 
itálico: 
 
 <p>Vem aqui, <em>agora!</em></p> 
 
Resultado 
 
 
Atenção: as antigas tags <b> e <i> do HTML 4, utilizadas para negrito e itálico, não devem ser mais 
utilizadas, uma vez que a definição desses estilos visuais é tarefa das folhas de etilo CSS. 
 
 
 
 
 
 
2.6 Imagens 
 
 Imagens são inseridas por meio da tag <img>. Principais atributos: 
 
• src: link ou caminho da imagem no computador; 
• title: texto que será exibido quando o cursor for colocado sobre a imagem; 
• alt: texto alternativo, que será exibido caso a imagem não carregue, e que irá auxiliar a 
leitura da página por softwares assistivos. Esse texto deverá ser uma descrição da imagem. 
 
 Exemplo: 
 
 <img src="foto.png" alt="Igreja em Tiradentes" title="Muito bonita"> 
 
 
 
2.7 Links 
 
 Links possibilitam a interligação de recursos na Web, como páginas HTML, imagens, PDFs e 
outros documentos para download. Estrutura básica de um link: 
 
 <a href="endereço_do_recurso" target="modo_de_abertura">elemento</a> 
 
 O valor do atributo target pode ser _self (valor padrão de um link, que abre o mesmo na 
página atual) ou _blank (que abre o link em uma nova aba). Exemplos: 
 
• Abre o site do Google, na aba atual: 
 
 <a href="http://www.google.com" target="_self"> 
 Ir para o Google 
 </a> 
 
 ou 
 
 <a href="http://www.google.com">Ir para o Google</a> 
 
 
• Link para abrir o site do Facebook, em outra aba: 
 
 <a href="http://www.fb.com" target="_blank">Facebook</a> 
 
 
• Link para abrir a página teste.html na aba atual: 
 
<a href="teste.html">Página de teste</a> 
 
 
 Atenção: em links para endereços de e-mail, deve-se utilizar o prefixo mailto: no endereço 
(evite essa prática, para não expor seu endereço de e-mail a spammers): 
 
 <a href="mailto:email@gmail.com">Contato</a> 
 
 
 
 Para transformar uma imagem em link, basta colocar a mesma entre as tags <a> e </a>: 
 
 <a href="http://www.google.com" target="_blank"> 
 <img src="google.png" alt="Logotipo do Google"> 
 </a> 
 
 
 
 
 
Aula 3 – Listas e tabelas 
 
 
 Listas são uma forma simples e prática para exibição de itens. A tag de abertura da lista definirá 
se a mesma será ordenada ou não-ordenada. Em ambos os casos, cada item é definido pela tag <li> 
(list item – item da lista). 
 
 
3.1 Listas não-ordenadas 
 
 Definidas pela tag <ul> (unordered list – lista não-ordenada), os marcadores de seus itens 
utilizam símbolos, como círculos e quadrados, não havendo uma noção de ordem entre os itens: 
 
<h2>Front-end</h2> 
<ul> 
 <li>HTML</li> 
 <li>CSS</li> 
 <li>JavaScript</li> 
</ul> 
 
Resultado 
 
 
3.2 Listas ordenadas 
 
 Definidas pela tag <ol> (ordered list – lista ordenada), os marcadores de seus itens utilizam 
números, enfatizando a ordem entre os itens: 
 
<h2>Sites mais visitados no mundo</h2> 
<ol> 
 <li>Google</li> 
 <li>Facebook</li> 
 <li>Youtube</li> 
 <li>Baidu</li> 
 <li>Yahoo</li> 
</ol> 
 
 
 
Resultado 
 
 
3.3 Combinação de listas 
 
 Listas podem ser combinadas de modo a se criar sub-tópicos, inclusive envolvendo listas 
ordenadas e não-ordenadas em conjunto: 
 
<h2>Sites mais visitados</h2> 
<ul> 
 <li>Mundo 
 <ol> 
 <li>Google</li> 
 <li>Facebook</li> 
 <li>Youtube</li> 
 </ol> 
 </li> 
 <li>Brasil 
 <ol> 
 <li>UOL</li> 
 <li>Globo</li> 
 <li>Terra</li> 
 </ol> 
 </li> 
</ul> 
 
 
Resultado 
 
3.4 Tabelas 
 
 Definidas pela tag <table>, tabelas devem ser utilizadas para exibição de dados tabulares, 
 
como uma tabela de pontos ou uma tabela de preços. Linhas são definidas por meio da tag <tr>, e 
colunas por meio da tag <td>. 
 
 Vamos definir uma tabela básica de preços de produtos: 
 
<table> 
 <tr> 
 <td>Água mineral</td> 
 <td>R$1,50</td> 
 </tr> 
 <tr> 
 <td>Chocolate</td> 
 <td>R$3,50</td> 
 </tr> 
</table> 
 
 
Resultado 
 
 
 Para melhorar a visualização da tabela, adicione o trecho de CSS a seguir, dentro da tag head 
(não se preocupe, estudaremos CSS mais a frente): 
 
<style> 
 table, tr, td{ 
 border: solid 1px; 
 } 
</style> 
 
 
Resultado 
 
 
 
 
Agora vamos definir o cabeçalho com o título das colunas, por meio das tags <thead> e <th>: 
 
<table> 
 <thead> 
 <tr> 
 <th>Produto</th> 
 <th>Preço</th> 
 </tr> 
 </thead> 
 <tr> 
 <td>Água mineral</td> 
 <td>R$1,50</td> 
 </tr> 
 <tr> 
 <td>Chocolate</td> 
 <td>R$3,50</td> 
 </tr> 
</table> 
 
 
Resultado 
 
 
 Podemos adicionar também um título para a tabela, por meio da tag <caption>: 
 
<table> 
 <caption>Tabela de preços</caption> 
 
 <thead> 
 <tr> 
 <th>Produto</th> 
 <th>Preço</th> 
 </tr> 
 </thead> 
 
 <tr> 
 <td>Água mineral</td> 
 <td>R$1,50</td> 
 </tr><tr> 
 <td>Chocolate</td> 
 <td>R$3,50</td> 
 </tr> 
</table> 
 
 
 
Resultado 
 
 Finalizando, para tornar nossa tabela mais completa e semântica, vamos utilizar as tags 
<tbody> para definir o corpo principal da tabela, e <tfoot> para o rodapé: 
 
<table> 
 <caption>Tabela de preços</caption> 
 
 <thead> 
 <tr> 
 <th>Produto</th> 
 <th>Preço</th> 
 </tr> 
 </thead> 
 
 <tfoot> 
 <tr> 
 <th>Promoção enquanto durar o estoque</th> 
 </tr> 
 </tfoot> 
 
 <tbody> 
 <tr> 
 <td>Água mineral</td> 
 <td>R$1,50</td> 
 </tr> 
 <tr> 
 <td>Chocolate</td> 
 <td>R$3,50</td> 
 </tr> 
 </tbody> 
</table> 
 
 
Resultado 
 
 
 
Atenção: No início da Web, tabelas eram utilizadas para se definir o layout de um site, por exemplo, uma 
tabela de duas colunas ocupando todo o conteúdo da página. Essa é uma péssima prática, uma vez que no 
modelo de desenvolvimento front-end em três camadas, o posicionamento do layout deve ser definido via 
CSS. Dessa forma, utilize tabelas apenas para representar dados tabulares. 
 
 
Aula 4 – Formulários 
 
 
 Definidos pela tag <form>, formulários permitem que o usuário informe dados para a página, 
que normalmente são enviados para processamento no back-end, como em um formulário de busca ou 
em um formulário de cadastro de produtos. 
 
 
4.1 Estrutura básica 
 
 <form action="processa_dados.php" method="GET"> 
 
 <input type="submit" value="Enviar"> 
 
 </form> 
 
 
 O valor do atributo action define a página que irá receber e processar os dados no back-end. 
No exemplo acima, os dados preenchidos pelo usuário no formulário seriam enviados para a página 
processa_dados.php, que realizaria algum tipo de processamento dos dados, no back-end. 
 
 Já o valor do atributo method define o método de envio dos dados do fomulário, que pode ser 
GET ou POST: 
 
• GET: os dados são enviados na própria URL, sendo recomendável para formulários de busca, 
onde não há problema de os dados serem exibidos ou manipulados com facilidade; 
 
• POST: os dados são enviado no cabeçalho da requisição web, sendo mais difíceis de serem 
visualizados e manipulados. Esse método é recomendável para formulários de login, onde serão 
transmitidos dados sigilosos do usuário. Para uma maior segurança, o ideal é combinar esse método 
com criptografia na conexão. 
 
 A tag input, com atributo type="submit" gera um botão para envio do formulário. 
Veremos a seguir que a mesma tag input pode ser utilizada para criar outros tipos de campos no 
formulário, dependendo do valor de seu atributo type. 
 
 
4.2 Principais campos 
 
 Um formulário é composto por um ou mais campos, que são as interfaces por meio das quais o 
usuário entrará com informações, podendo ser textuais, numéricas, booleanas (verdadeiro ou falso), 
etc. Para cada tipo de informação a ser solicitada ao usuário, há um ou mais campos que se adequam 
melhor à entrada de dados. 
 
 Por exemplo, para informar um endereço, o ideal é um campo de texto de múltiplas linhas, ao 
contrário do campo de apenas uma linha para o usuário informar seu e-mail. Marcadores mutuamente 
exclusivos (aqueles redondos, onde a marcação de um desmarca a dos outros) são úteis para o usuário 
informar seu sexo, mas para situações onde há muitas opções (como escolha da cidade), uma caixa de 
seleção que exibe uma lista quando clicada é o ideal. 
 Vamos conhecer os principais campos que um formulário pode possuir. Repare que as tags de 
 
cada campo devem possuir um valor diferente no atributo name, que será a chave de acesso para os 
valores preenchidos na hora dos mesmos serem processados. 
 
• Texto: 
 
 Nome: <input type="text" name="nome"> 
 
Resultado 
 
 
 Utilize o atributo placeholder para adicionar um texto de ajuda ao campo, que 
desaparecerá quando o usuário começar a digitar: 
 
 <input type="text" name="nome" placeholder="Nome completo"> 
 
Resultado 
 
 
• Senha (oculta o texto digitado): 
 
 Senha: <input type="password" name="senha"> 
 
Resultado 
 
 
• Área de texto (múltiplas linhas): 
 
 Endereço: <br> 
 <textarea name="endereco"></textarea> 
 
Resultado 
 
 
 
 
 
• Seleção de item (pode ser marcado e desmarcado): 
 
 <input type="checkbox" name="ativo"> Manter login ativo 
 
Resultado 
 
 
• Itens mutuamente exclusivos (o usuário pode escolher um único item). Repare que todos os 
itens devem possuir o mesmo valor no atributo name: 
 
 <input type="radio" name="sexo" value="F" > Feminino 
 <input type="radio" name="sexo" value="M" > Masculino 
 
Resultado 
 
 
• Lista para seleção de um único item: 
 
<select name="campus"> 
 <option value="RT">Reitoria</option> 
 <option value="BQ">Barbacena</option> 
 <option value="RP">Rio Pomba</option> 
</select> 
 
Resultado 
 
 
• Lista para seleção de vários itens (usando as teclas Ctrl ou Shift): 
 
<select name="turno" multiple="multiple"> 
 <option value="M">Manhã</option> 
 <option value="T">Tarde</option> 
 <option value="N">Noite</option> 
</select> 
 
Resultado 
 
 
 
 
 A linguagem HTML5 introduziu novos valores para o atributo type da tag <input>, que 
possibilitam um maior controle pelos navegadores de como os campos serão exibidos (caso seja um 
navegador antigo, o campo é mostrado como um input do tipo text): 
 
 
• color • email • range • time 
• date • month • search • url 
• datetime • number • tel • week 
 
 
 Exemplos: 
 
• Campo de cor: 
 
 <input type="color" name="cor"> 
 
Resultado 
 
• C
ampo 
de 
faixa 
de 
valor
es (no 
exem
plo, 
de 0 a 
10); 
 
 
<inp
ut 
type
="ra
nge" 
name
="va
lor" 
min="0" max="10"> 
 
Resultado 
 
 Por meio do atributo value, é possível especificar um valor inicial para um campo: 
 
 <input type="range" name="valor" min="0" max="10" value="10"> 
 
 
Resultado 
 
 
4.3 Labels 
 
 Definidos pela tag <label>, os labels ou rótulos são os textos que vêm associados a cada 
campo do formulário, como os textos “Nome: " antes do campo de texto e “Manter conectado" após 
um item de seleção. 
 
 A vantagem de seu uso é permitir que o usuário clique no label para acessar ou ativar o campo 
correspondente, melhorando a experiência de uso da página web, principalmente em telas pequenas de 
dispositivos móveis. 
 
 Há duas formas de se associar um label a um campo do formulário: 
 
• Identificando o atributo id do campo (o valor dos atributos for e id deverão ser iguais): 
 
 <label for="nome">Nome: </label> 
 <input type="text" id="nome" name="nome"> 
 
 
• Envolvendo o texto descritivo e o campo: 
 
<label> 
 Nome: <input type="text" name="nome"> 
</label> 
 
 
 
 
 
Aula 5 – Folhas de estilo em cascata (CSS) 
 
 
 Folhas de estilo em cascata (Cascading Style Sheets) possibilitam a definição da apresentação 
visual de um site, possuindo uma sintaxe simples e poderosa para manipulação de cores, 
espaçamentos, posicionamento e outros componentes visuais. 
 
 
5.1 Modos de uso 
 
 Há três formas de se integrar CSS em uma página web: 
 
1. Diretamente na tag a ser manipulada, dentro do valor do atributo style (não recomendado, 
pois será difícil manter e editar o código): 
 
<p style="">Texto</p>2. Na própria página, dentro do cabeçalho da mesma (o CSS fica restrito apenas a página, não 
podendo ser compartilhado entre vários arquivos HTML): 
 
<head> 
 <style type="text/css"> 
 
 </style> 
</head> 
 
 
3. Em arquivo externo referenciado (método ideal, pois quando se altera o CSS, todas as páginas 
que o utilizam receberão a alteração): 
 
<head> 
 <link rel="stylesheet" href="estilo.css" /> 
</head> 
 
 
 Assim como uma página HTML, uma folha de estilo em CSS é um arquivo texto, e deve 
possuir a extensão .css. 
 
 
5.2 Sintaxe básica 
 
 A sintaxe CSS consiste em um ou mais elementos da página que serão selecionados para 
manipulação, e um conjunto de propriedades que serão alteradas para determinados valores: 
 
seletor{ 
 propriedade1: valor1; 
 propriedade2: valor2; 
} 
 Como exemplo, se desejarmos alterar a cor de fundo da página para azul, selecionaremos a tag 
<body>, e aplicaremos o valor blue para a propriedade background-color (repare que, assim 
 
como no HTML, é possível inserir comentários nas folhas de estilo): 
 
/* Comentário: altera a cor do corpo da página para azul */ 
body{ 
 background-color: blue; 
} 
 
 
5.3 Principais atributos/valores 
 
• Cor do texto: atributo color, podendo receber como valor o nome da cor, seu código em 
hexadecimal ou em rgb: 
 
p{ 
 color: green; 
} 
 
p{ 
 color: #00ff00; /* Cor em hexadecimal */ 
} 
 
p{ 
 color: rgb(0,255,0); /* Cor em RGB */ 
} 
 
• Cor do fundo: atributo backgound-color, podendo receber como valor o nome da cor, seu 
código em hexadecimal ou em rgb: 
 
p{ 
 background-color: black; 
 color: white; 
} 
 
• Negrito, itálico e sublinhado 
 
p{ 
 /* Negrito */ 
 font-weight: bold; 
 
 /*Itálico */ 
 font-style: italic; 
 
 /* Sublinhado */ 
 text-decoration: underline; 
} 
 
 
 
• Alinhamento do texto: atributo text-align, pode receber os valores left (esquerda), 
right (direita), center (centro) e justify (justificado): 
 
 
p{ 
 text-align: right; 
} 
 
• Caixa alta (todas as letras em maiúsculas) e caixa baixa (todas as letras em minúsculas): 
 
p{ 
 /* Caixa alta */ 
 text-transform: uppercase; 
} 
 
p{ 
 /* Caixa baixa */ 
 text-transform: lowercase; 
} 
 
• Tamanho do texto e fonte: 
 
p{ 
 font-size: 35px; 
 font-family: verdana; 
} 
 
 
• Tamanho horizontal e vertical do elemento: atributos width e height, podem ser definidos 
em valores absolutos como pixels (px) ou relativos como porcentagem (%). 
 
p{ 
 width: 200px; 
 height: 50%; 
 background-color: green; 
} 
 
• Sombra do texto, definida pelo atributo text-shadow, recebe os valores: deslocamento 
horizotal, deslocamento vertical e cor. 
 
p{ 
 text-shadow: 1px 1px red; 
} 
 
p{ 
 text-shadow: 5px 5px blue; 
} 
 
p{ 
 text-shadow: -3px -px green; 
} 
• Sombra do bloco, definida pelo atributo box-shadow, recebe os valores: deslocamento 
horizontal, deslocamento vertical, embaçamento (blur) e cor. 
 
p{ 
 
 box-shadow: 1px 1px 5px gray; 
} 
 
 
• Borda: atributo border, recebe como valores o tipo da borda, a espessura da linha e a cor da 
mesma: 
 
p{ 
 /* Borda de linha com 1px de espessura e cor preta */ 
 border: solid 1px #000; 
} 
 
p{ 
 /* Borda tracejada com 5px de espessura e cor azul */ 
 border: dashed 5px blue; 
} 
 
p{ 
 /* Borda pontilhada com 10px de espessura e cor rosa */ 
 border: dotted 10px pink; 
} 
 
 
 É possível controlar as bordas separadamente, via -top, -right, -bottom e -left: 
 
p{ 
 border-left: solid 1px #000; 
 border-bottom: dashed 1px red; 
} 
 
 
• Raio da borda: atributo border-radius, define a curvatura nas extremidades da borda: 
 
p{ 
 border: solid 1px #000; 
 border-radius: 10px; 
} 
 
 
img{ 
 border-radius: 50%; 
} 
 
 
 
 
5.4 Seletores básicos 
 
• Tag: para selecionar uma tag, basta digitar o seu nome como seletor. É possível aplicar o 
mesmo estilo a vários elementos, separando-os por vírgulas: 
 
h1 { 
 
 color: red; 
} 
 
h1, h2, h3, h4, h5, h6 { 
 font-size: 12px; 
} 
 
 
• Classe: o estilo é aplicado a todas as tags que possuam o atributo class com o valor do 
seletor. Várias tags podem compartilhar uma mesma classe. Utiliza-se um ponto antes do nome da 
classe no seletor: 
 
<p class=”sombra”>Texto com sombra</p> 
 
.sombra{ 
 text-shadow: 1px 1px #333; 
} 
 
• Identificador: o estilo é aplicado a todas as tags que possuam o atributo id com o valor do 
seletor. Cada tag deve possuir um identificador único. Utiliza-se o símbolo # antes do nome da classe 
no seletor. 
 
<p id=”destaque”>Texto com sombra</p> 
 
#destaque{ 
 color: red; 
 text-decoration: underline; 
} 
 
 
5.5 Pseudo-elementos 
 
 Permitem adicionar efeitos a um seletor, ou a parte de um seletor. Sintaxe: 
 
seletor:pseudo-elemento{ 
 propriedade: valor; 
} 
 
• Aumentando apenas a primeira letra do texto de um parágrafo: 
 
p:first-letter{ 
 font-size: 50px; 
} 
 
• Manipulando os estados de um link: 
 
/* Link no estado inicial */ 
a:link{ 
 text-transform: uppercase; 
} 
 
 
/* Mouse sobre o link */ 
a:hover{ 
 background-color: #0000ff; 
 color: #fff; 
} 
 
/* Clique no link */ 
a:active{ 
 font-size: 300px; 
} 
 
 
5.6 CSS reset 
 
 Alguns valores padrão de CSS dos navegadores costumam variar, o que causa uma diferença de 
visual de um mesmo site em navegadores diferentes. Por exemplo, a margem padrão do body pode ser 
10px no Internet Explorer e 8px no Firefox. 
 
 O objetivo do CSS reset é limpar os estilos padrão de todas as tags, de modo que a renderização 
do site não varie em cada navegador. Para isso, no começo do arquivo CSS, devemos selecionar todos 
os elementos (com o seletor universal *), e zerar seu posicionamento: 
 
*{ 
 padding: 0; 
 margin: 0; 
} 
 
 O CSS reset acima é o mais popular por ser simples e pequeno, mas há quem prefira resetar até 
dezenas de propriedades. 
 
 
5.7 Box model 
 
 O box model ou modelo de caixa define como o espaçamento entre os elementos será 
controlado, por meio dos atributos margin e padding. Conforme a figura a seguir, repare que a 
partir da borda do elemento (mesmo que o mesmo não a possua a mesma visível), os valores definidos 
para margin definirão o espaçamento externo à borda, e os valores de padding controlarão o 
espaçamento interno do elemento: 
 
 
 
 
 
 Como exemplo, vamos manipular dois parágrafos de ids #p1 e #p2, alterando seus valores de 
margin e padding: 
 
 #p1{ 
 border: solid 1px; 
 margin-left: 30px; 
} 
 
#p2{ 
 border: dashed 1px; 
 padding-left: 30px; 
} 
 
Resultado 
 
 
#p1{ 
 border: solid 1px; 
 margin-bottom: 50px; 
} 
 
#p2{ 
 border: dashed 1px; 
 padding-bottom: 50px; 
} 
 
 
 
 
Resultado 
 
 É possível controlar as margens e o padding dos quatro lados em uma única definição, 
seguindo a ordem topo, direita, inferior e esquerda (sentido horário a partir do topo): 
 
p{ 
 /* 
 20px de margin-top 
 15px de margin-right 
 10px de margin-bottom 
 5px de margin-left 
 */ 
 margin: 20px 15px 10px 5px; 
} 
 
 Caso sejam passadosapenas dois valores, estarão associados, respectivamente, à parte superior 
e inferior, e à esquerda e direita: 
 
p{ 
 /* 
 20px de margin-top 
 20px de margin-bottom 
 5px de margin-left 
 5px de margin-right 
 */ 
 margin: 20px 5px; 
} 
 
 No caso de um único valor, o mesmo definirá os quatro lados: 
 
p{ 
 /* 
 20px de padding-top 
 20px de padding-bottom 
 20px de padding-left 
 20px de padding-right 
 */ 
 padding: 20px; 
} 
 
Aula 6 – Floats, grids e frameworks 
 
 
6.1 Posicionamento via float 
 
 A propriedade float permite controlar o posicionamento dos elementos na página, flutuando à 
esquerda (left) ou à direita (right). 
 
 A partir do HTML abaixo, vamos analisar o uso do float: 
 
<section class="container"> 
 <div class="bloco1"> 
 Bloco 1 
 </div> 
 <div class="bloco2"> 
 Bloco 2 
 </div> 
</section> 
 
 
• CSS inicial, sem float: 
 
.container{ 
 background-color: green; 
 color: white; 
} 
 
.bloco1{ 
 background-color: red; 
} 
 
.bloco2{ 
 background-color: blue; 
} 
 
Resultado 
 
 
• float: left no bloco 1: 
 
Resultado 
 
 
• float: left nos dois blocos: 
 
 
Resultado 
 
 
• float: right no bloco 1: 
 
Resultado 
 
 
• float: left no bloco 1 e float: left no bloco 2: 
 
Resultado 
 
 
• float: right no bloco 1 e float: left no bloco 2: 
 
Resultado 
 
 
• float: right nos dois blocos: 
 
Resultado 
 
 
 
 
 Caso o próximo elemento adicionado tenha seu posicionamento prejudicado, pode ser 
necessário utilizar a propriedade clear nos elementos seguintes, com os valores: left, right ou 
both (ambos). 
 
 
 
 Exemplo de HTML, adicionando um terceiro bloco: 
 
<section class="container"> 
 <div class="bloco1"> 
 Bloco 1 
 </div> 
 <div class="bloco2"> 
 Bloco 2 
 </div> 
 <div class="bloco3"> 
 Bloco 3 
 </div> 
</section> 
 
 
• Uso do clear: 
 
.bloco3{ 
 background-color: black; 
} 
 
 
Resultado 
 
 
 
.bloco3{ 
 background-color: black; 
 clear: both; 
} 
 
Resultado 
 
 
 
 
Dica: Para layouts mais complexos (múltiplas colunas e blocos), é recomendado utilizar grids, que veremos 
ainda nessa aula. 
 
 
 
 
 
6.2 Frameworks CSS 
 
 Frameworks CSS são bibliotecas de código que fornecem estilos pré-implementados para 
facilitar e agilizar o desenvolvimento de layouts. Dessa forma, basta baixar o CSS do framework, 
referenciá-lo no arquivo HTML e utilizar as classes predefinidas. 
 
 Há vários frameworks CSS gratuitos e de código-fonte aberto na Internet, sendo um dos mais 
famosos o Bootstrap, que foi criado pela equipe de desenvolvimento do Twitter. Vamos seguir os 
passos abaixo para codificar alguns exemplos utilizando suas facilidades: 
 
• No site do projeto <http://getbootstrap.com>, você pode fazer o download do framework, ou, 
como no exemplo abaixo, copiar o link para referenciar o CSS do Bootstrap diretamente na sua página 
HTML (lembrando que o link deve ficar dentro do cabeçalho da sua página): 
 
 <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.
min.css"> 
 
• Pronto! No seu HTML, basta utilizar as classes predefinidas do Bootstrap: 
 
 
<button type="button" class="btn btn-default">Botão padrão</button> 
<button type="button" class="btn btn-success">Ok</button> 
<button type="button" class="btn btn-danger">Excluir tudo</button> 
 
Resultado 
 
 
<p class="bg-success"> 
 <strong>Mensagem:</strong> dados cadastrados com sucesso! 
</p> 
 
Resultado 
 
 
<sp
an 
cla
ss="glyphicon glyphicon-education"></span> 
<span class="glyphicon glyphicon-heart-empty"></span> 
<span class="glyphicon glyphicon-star"></span> 
 
Resultado 
 
 
<div class="btn-group" role="group"> 
 <button type="button" class="btn btn-default">Opção 1</button> 
 <button type="button" class="btn btn-default">Opção 2</button> 
</div> 
 
Resultado 
 
 
<button class="btn btn-primary" type="button"> 
 Mensagens <span class="badge">4</span> 
</button> 
 
Resultado 
 
 
<div class="progress"> 
 <div class="progress-bar" role="progressbar" style="width: 60%;"> 
 60% 
 </div> 
</div> 
 
Resultado 
 
 
<div class="input-group"> 
 <span class="input-group-addon">@</span> 
 <input class="form-control" placeholder="E-mail" name="email"> 
</div> 
 
Resultado 
 
 
 
 
<ul class="nav nav-tabs"> 
 <li role="presentation" class="active"> 
 <a href="#">Início</a> 
 </li> 
 <li role="presentation"><a href="#">Sobre</a></li> 
 <li role="presentation"><a href="#">Contato</a></li> 
</ul> 
 
Resultado 
 
 
6.3 Grid 
 
 Sistemas de grids oferecem uma forma simples e versátil para controlar o posicionamento de 
blocos e elementos na página, preservando a semântica e acessibilidade (em oposição ao uso de 
tabelas), baseando-se no conceito de uma grade imaginária de N colunas, que adaptam-se ao tamanho 
da tela. 
 
 Nos exemplos abaixo utilizaremos o sistema de grid do framework Bootstrap (baseado em 12 
colunas), então certifique-se que o CSS do mesmo está referenciado em sua página HTML. 
 
 Para facilitar a visualização dos blocos, vamos adicionar ao nosso CSS uma borda em todos os 
elementos div que estiverem dentro do grid: 
 
.row div{ 
 border: solid 1px #333; 
} 
 
 
 Para criar uma linha do grid utilizando o Bootstrap, basta definir um div com a classe row: 
 
<div class="row"> 
 
</div> 
 
 
 Dentro desse bloco, cada coluna do layout deverá ser um div com a classe col-md-n, onde a 
soma de todos os valores de n deve totalizar 12 (o número de colunas que podem ser utilizadas no 
grid). Veja como são simples os exemplos: 
 
 
 
 
<div class="row"> 
 <div class="col-md-8">Bloco com 8/12 da página</div> 
 <div class="col-md-4">Bloco com 4/12 da página</div> 
</div> 
 
Resultado 
 
 
<div class="row"> 
 <div class="col-md-4">4/12</div> 
 <div class="col-md-4">4/12</div> 
 <div class="col-md-4">4/12</div> 
</div> 
 
Resultado 
 
 
<div class="row"> 
 <div class="col-md-8">8/12</div> 
 <div class="col-md-3">3/12</div> 
 <div class="col-md-1">1/12</div> 
</div> 
 
Resultado 
 
 
Aula 7 – Conceitos de Acessibilidade e SEO 
 
 
7.1 Acessibilidade 
 
 Sites acessíveis são aqueles que podem ser utilizados por todas as pessoas, independente de 
possuírem necessidades especiais permanentes (como baixa visão ou limitações de mobilidade) ou 
temporárias (braço quebrado). Dessa forma, devem ser projetados de modo a facilitar a interação com 
o usuário, não limitando sua navegação e a compreensão dos conteúdos do site. 
 
 Vamos conhecer algumas dicas para tornar seu site mais acessível: 
 
• Sempre utilize o atributo alt para legendar suas imagens, de modo que um usuário que faça 
uso de software leitor de tela possa compreender a informação da mesma: 
 
 <img src=”ti.png” alt=”Foto da equipe de TI do site em seu 
ambiente de trabalho”> 
 
• Utilize textos que façam sentido em seus links, não utilizando textos vagos como “clique aqui” 
ou “acessar”. 
 
• Utilize as tags semânticas na definição de tabelas (estudadas na aula 3), de modo a facilitar a 
softwares leitores de tela uma leituramais compreensível dos dados. 
 
• Atenção na escolha das cores do site e no contraste entre a cor de fundo e a cor do texto. 
Usuários com daltonismo podem ter dificuldades para leitura e compreensão dos conteúdos. Além 
disso, não conte apenas com cores para transmitir significados. 
 
No site Coblis você pode simular como pessoas com daltonismo enxergam determinada imagem: 
http://www.color-blindness.com/coblis-color-blindness-simulator/ 
 
 
 
• Faça uso moderado de JavaScript e conteúdos dinâmicos, de modo que o site não dependa de 
JavaScript para funcionar (muitos leitores de tela não possuem suporte a JavaScript). 
 
• Utilize validadores automáticos de acessibilidade como o Hera para checar a conformidade do 
seu site com os padrões de acessibilidade web: http://www.sidar.org/hera/ 
 
 
 
 
 
 
 
 
 
 Para aprender mais sobre acessibilidade, faça a leitura da cartilha “Acessibilidade na Web”, 
elaborada pela W3C Brasil: 
 
http://www.w3c.br/pub/Materiais/PublicacoesW3C/cartilha-w3cbr-acessibilidade-web-fasciculo-I.pdf 
 
 
 
 
7.2 Otimização para mecanismos de buscas 
 
 A otimização para mecanismos de buscas ou SEO (Search Engine Optimization) consiste na 
melhora da forma como o seu site é visto pelos buscadores (Google, Yahoo, Bing, etc.), buscando 
posicioná-lo entre os primeiros resultados das buscas – o que impacta diretamente na quantidade de 
visitantes do site. 
 
 Para que um site fique bem posicionado nos resultados das buscas, além de estar relacionado ao 
termo de busca e possuir conteúdo relvante, a estrutura e a semântica do seu código-fonte devem estar 
completas e “legíveis” para os algoritmos (crawlers) dos buscadores que periodicamente analisam o 
conteúdo dos sites indexados. 
 
 A seguir vamos conhecer algumas das boas práticas que devem ser seguidas para tornar seu site 
mais otimizado para os mecanismos de busca: 
 
• O título da página (tag title) deverá ser relacionado ao assunto da mesma. 
 
 
• No cabeçalho do site (head), adicionar uma descrição e palavras-chave relevantes: 
 
 
 <!-- Descrição curta e objetiva, que irá aparecer 
 na descrição da página nas buscas --> 
 <meta name="description" content="Descrição do site"> 
 
 <!-- Palavras-chave que indicam o conteúdo do site. 
 Não abusar na quantidade! --> 
 <meta name="keywords" content="web, sites, html, css"> 
 
 
• Também no cabeçalho da página, controlar quais páginas serão indexadas pelos buscadores, de 
modo a evitar que páginas restritas como área de login do administrador fiquem disponíveis nos 
resultados das buscas: 
 
 <!-- A página não aparecerá nas buscas (noindex), 
 e nem os links que ela segue (nofollow) --> 
 <meta name="robots" content="noindex,nofollow"> 
 
 <!-- A página aparecerá nas buscas (index), 
 mas os links que ela segue não (nofollow) --> 
 <meta name="robots" content="index,nofollow"> 
 
 
• Também é possível utilizar um arquivo robots.txt descrevendo quais sites serão indexados 
ou não. No exemplo a seguir, o conteúdo desse arquivo define que a página login.html não deverá 
ser indexada por nenhum buscador: 
 
User-agent: * 
Disallow: /login.html 
 
 
• No corpo do site, utilizar corretamente as tags semânticas do HTML5 (header, footer, 
section, etc.), de modo que o buscador possa compreender como sua página se estrutura, e onde se 
encontra o conteúdo principal. 
 
• Os links devem ser descritivos: 
 
Errado: 
 
 Para mais informações sobre nossa equipe de desenvolvimento, clique aqui. 
 
Correto: 
 
 Conheça mais sobre nossa equipe de desenvolvimento. 
 
 
• Possuir links de outros sites apontando para o seu site (backlinks), o que indica para os 
buscadores que seu site possui relevância. 
 
• Ter um tempo de carregamento da página pequeno, uma vez que muitos usuários desistem de 
acessar o site quando o mesmo demora para carregar. Além disso, acessos provenientes de dispositivos 
 
móveis (que só tendem a aumentar) muitas vezes utilizam redes móveis lentas, o que pode 
comprometer o carregamento do site. 
 
 
Dica: você pode analisar a performance do seu site por meio da ferramenta online PageSpeed Insights do 
Google: https://developers.google.com/speed/pagespeed/insights/ 
 
 
 
 
 
 
 
 
• Atualmente, muitas visitas aos sites são provenientes de links compartilhados em redes sociais, 
como no Facebook. Quando um usuário posta um link, o Facebook analisa seu código HTML e exibe 
 
informações da página, como título, descrição e imagem relevante. 
 
 
 
 Além de manter a página semântica, podemos otimizar essa análise adicionando tags especiais 
no cabeçalho da página, seguindo o protocolo Open Graph <http://ogp.me> utilizado pelo Facebook: 
 
 
 <html prefix="og: http://ogp.me/ns#"> 
 <head> 
 
 <meta property="og:title" content="Título da página"> 
 
 <meta property="og:description" content="Descição da página"> 
 
 <meta property="og:type" content="website" /> 
 
 <meta property="og:image" content="imagem_relevante_1.jpg"> 
 
 <meta property="og:image" content="imagem_relevante_2.jpg"> 
 
 ... 
 
 
 
 O Facebok oferece uma ferramenta para verificação do uso do Open Graph em seu site, em 
https://developers.facebook.com/tools/debug/: 
 
 
 
 
 
 
 
 
Aula 8 – Design para web 
 
8.1 O que é design? 
 
 O termo design, como utilizado na língua portuguesa, é um estrangeirismo apropriado do 
substantivo inglês “design” (significando propósito, objetivo, intenção) e do verbo inglês “design” 
(significando projetar/esquematizar) (NIELSEN; LORANGER, 2007). O design é uma importante 
ferramenta de agregação de valor. Podemos aplicar suas técnicas em diferentes áreas como a 
construção civil, o automobilismo, as mídias impressas, as embalagens, os produtos, etc. 
 
 
Como área, o design é multidisciplinar e trata, em outras palavras, de escolher a melhor forma 
de apresentar uma ideia. Dependendo da mídia ou do alvo em que se deseja trabalhar, certas técnicas 
de design serão mais apropriadas do que outras. A diagramação de um cartaz convidando a população 
para uma festa, certamente, será diferente de uma chamada na televisão ou mesmo de um site de 
divulgação. As mídias oferecem possibilidades diferentes que o profissional deve estar apto para 
explorar. 
 
 
8.2 Web design 
 
O advento da web abriu espaço para uma nova forma de planejamento de transmissão de 
ideias/objetivos em materiais publicados em ambientes on-line: web design. Tais técnicas consistem da 
estruturação adequada de informações, utilizando recursos apropriados para veiculação em páginas 
web, de maneira que o usuário possa alcançar seu objetivo de forma direta e agradável. 
 
O design para web não é como o design de impressão. A web é um meio único que, por sua 
natureza, força os profissionais a desistir do controlar coisas que eles, tradicionalmente, eram 
responsáveis por controlar (NIEDERST, 2002). Elementos, como cores, fontes e disposição, podem ser 
determinados pelo usuário (ou por seu software navegador) e não há garantias de que todos irão 
visualizar uma página da mesma forma como foi projetada e desenvolvida. 
 
Projetar para o desconhecido consiste na principal atividade de um profissional que trabalha 
com web design. Como profissional, é importante que você tenha um bom entendimento sobre o 
ambiente web e consiga planejar-se para o desconhecido. Em seu livro “Aprenda web design”, 
Niederst (2002) nos alerta sobre alguns itens, que podem ser desconhecidos, para os quais devemos 
estar preparados.• Navegadores desconhecidos – atualmente, existe uma grande variedade de softwares, 
denominados de browsers ou navegadores, cujo in- tuito é de nos fornecer acesso à web. Além disso, 
um mesmo navegador pode ter inúmeras versões. Evite instruções ou recursos que, sabidamente, são 
específicos de um ou de outro browser. Procure sempre utilizar linguagens ou notações padronizadas 
pela W3C – esta é uma garantia de que seu site irá se comportar da mesma maneira independente do 
software utilizado para exibí-lo. 
 
• Plataformas desconhecidas – assim como temos uma vasta gama de navegadores, o 
mesmo também ocorre com as plataformas de hardware e de software que são utilizadas. Não temos 
como saber se os usuários de nossas páginas utilizam plataformas MS Windows, Linux ou MAC OS 
(ou ainda outra). Evite, dessa forma, recursos muito específicos que possam não estar disponíveis em 
plataformas concorrentes. É frustrante quando encontramos um site com o conteúdo que buscávamos e 
recebemos a informação de que o conteúdo é incompatível com nossa plataforma ou, então, que, para 
 
utilizar a página, é necessária a instalação de softwares adicionais. Normalmente, nessa situação, o 
usuário desiste da página. 
 
• Preferências de usuários desconhecidas – em um ambiente web, não conhecemos 
nosso usuário, não sabemos que tipos de recursos ele tem disponíveis ou habilitados para uso. Dessa 
forma, é importante prever que, por exemplo, um usuário possa ter desabilitado as permissões sobre 
gravação de cookies. Nesse caso, recursos muito específicos e que dependem de preferências pessoais 
dos usuários devem ser utilizados de forma opcional. 
 
• Tamanho de janela desconhecido – não sabemos se a tela de nosso usuário é grande 
ou pequena, certo? Com a popularização acelerada de dispositivos móveis, essa variável torna-se ainda 
mais crucial. Este é um dos aspectos mais incômodos do design web, mas não podemos perdê-lo de 
vista. Procure desenvolver a página de forma que esta ocupe todo o espaço disponível e, quando isso 
não for possível, avise seu usuário (“para melhor visualizar essa página recomendamos a seguinte 
resolução...”). 
 
 
• Velocidade de conexão desconhecida – uma página excessivamente pesada pode 
impedir que muitos de seus usuários a visitem ou, então, não suportem a demora em carregá-la e 
desistam. Nesse sentido, os maiores vilões são os elementos gráficos. Utilize, adequadamente, for- 
matos de imagem de acordo com a quantidade de cores e mantenha-os com o menor tamanho possível. 
 
 
8.3 Planejamento e organização de informações 
 
Design e projeto são termos intimamente ligados. Isto evidencia a necessidade de nos 
planejarmos antes de qualquer ação. Antes de começar a criar um site, é preciso planejar sua estrutura 
(página principal e páginas adjacentes), definindo de forma clara e coerente a sequência das 
informações que se deseja apresentar (MANZANO; TOLEDO, 2008). 
 
Independente do tamanho ou do objetivo do que se pretende publicar ou desenvolver para web, 
faz-se necessário, inicialmente, desenvolver a ideia e a motivação em torno do que se quer apresentar. 
Não é necessário se apegar a ferramentas ou a tecnologias para criar um esboço. O mais importante é 
organizar objetivos e criar estratégias para alcançá-los. Uma forma interessante de alcançar tais 
estratégias é se questionar acerca do que se pretende fazer. Nessa etapa, são comuns questionamentos 
como: o que você espera realizar ou o que pretende oferecer com o site? A que público o site se 
destina? Quem será o responsável pela geração do conteúdo original e com que frequência tais 
informações serão atualizadas? Que tipo de aparência ou sensação você espera para o site? Observe 
que a lista de questionamentos pode ser ampliada, mas o mais importante é compreender exatamente 
onde se deseja chegar e de que forma (isto é o planejamento). 
 
Uma vez que os objetivos estão claros, o passo seguinte é criar e organizar o conteúdo. 
Certamente, ao longo de sua trajetória profissional, você irá ouvir expressões como: “A pior parte é 
definir o conteúdo!” ou “Dê-me o conteúdo e deixe o resto comigo!”. De fato, o conteúdo é a parte 
mais importante de uma página web. É ele o fator determinante em relação à quão atrativo ou não será 
o material a ser publicado. Aparência agradável e bem acabada ajuda, mas um site bonito e sem 
conteúdo não faz com que o visitante retorne a ele. 
 
A definição do conteúdo a ser apresentado é determinada por dois fatores muito importantes e 
diretamente relacionados: a criação (concepção) e o design das informações (LEMAY, 2002). Em 
relação à criação, é importante deixar claro quem será o responsável por tal concepção. É comum 
encontrarmos boas ideias, mas, quando vamos “olhar mais de perto”, elas são vazias, não têm 
 
conteúdo. Isto vale também para quando você estiver desenvolvendo um site para algum cliente. É 
importante que ele lhe ofereça, explicitamente, o conteúdo que deseja apresentar de forma on-line e 
que se estabeleça uma política de atualização de tal conteúdo. 
 
Estruturar informações para um material on-line também será uma atividade desafiadora. Esse 
processo, conhecido como design de informações, consiste em organizar e planejar a melhor maneira 
de apresentar o conteúdo produzido. Aqui, cabe lembrar que cada material tem suas especificidades, ou 
seja, a forma de abordar um conteúdo em um cartaz ou em um manual não é a mesma que em uma 
página para internet ou em um programa de televisão. 
 
É comum que o demandante de uma página web lhe entregue um folder impresso com as 
informações que ele deseja colocar em seu site. Da mesma forma, na medida em que você solicita 
maiores informações, para extrair mais conteúdo, recebe um manual com 100 páginas. Observe que o 
trabalho nessa etapa é tentar organizar as informações de forma que seu conteúdo seja adaptado para a 
web e se torne atrativo em tal plataforma. 
 
Quando tratamos de design de informações, temos que levar em conta também o público-alvo 
que irá visitar nossas páginas. Em geral, o público usuário da internet tem pressa e está à procura de 
informações instantâneas. Da mesma forma, na medida em que encontra o que procura, este mesmo 
público pode sentir a necessidade de se aprofundar. Precisamos tirar proveito dessas situações e dos 
recursos que temos em um ambiente on-line, adequando nossos conteúdos. 
 
Materiais excessivamente extensos em ambientes on-line geram alguns inconvenientes, como o 
tempo que levam para ser carregados e formatados ou, ainda, por cansar o usuário que, conforme já 
mencionamos, está à procura de informação instantânea. Por outro lado, conteúdos muito reduzidos 
não conseguem transmitir a informação de forma imediata e a necessidade de ficar “clicando”, 
interminavelmente, para chegar até a informação desejada também cansa e irrita os visitantes. Para 
evitar ambas as situações, precisamos fazer uso do que de melhor a web nos oferece: ligações, 
vínculos ou links que nos interligam com conteúdos novos ou anteriores, permitindo a livre navegação 
por parte do usuário. 
 
O resultado do design de informações é, em geral, um diagrama que revela a organização das 
interligações entre as páginas. Há diferentes formas de organização, cada uma adequada a uma 
determinada situação. As principais técnicas são: organização sequencial (rígida ou flexível) e 
organização em árvore (MANZANO; TOLEDO, 2008). 
 
A apresentação de textos longos, comumente, utiliza a técnica de organização sequencial. A 
figura abaixo ilustra duas estruturas de sites empregando a organização sequencial. Na primeira parte 
da figura, observamos uma organização sequencial rígida, na qual as páginas possuem, basicamente, 
doiselos: o próximo conteúdo e o conteúdo anterior. Esse tipo de abordagem é útil quando a 
navegação obedece a um luxo de informações bem definido (etapa1, etapa2, etapaN), como um 
formulário de pesquisa ou um processo de compra. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Ainda podemos observar uma forma mais flexível de organização sequencial. Nesse caso, 
ligações (links) são empregadas para acrescentar informações complementares (em alguns casos 
elementos gráficos: figuras, diagramas, fotos, etc.). Tal técnica é, normalmente, utilizada na 
estruturação de textos longos ou de conteúdos específicos que são desenvolvidos em torno de um 
assunto principal. 
 
Quando um site aborda diferentes assuntos ou se utiliza de tópicos individuais, aconselha-se o 
emprego da organização em árvore, conforme pode ser visualizado na figura abaixo. Nesse caso, a 
característica mais marcante é a utilização de uma página raiz (homepage), contendo um índice ou 
menu com os temas de cada assunto abordado. A partir de então, os temas são relacionados às suas 
respectivas páginas por meio de ligações de hipertexto e cada página do site se relaciona com outras 
subpáginas. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
A web é um espaço bastante democrático e as técnicas discutidas para estru- turação do 
conteúdo não são, necessariamente, utilizadas de forma rígida e inlexível. Pelo contrário, o que se 
observa na prática são estruturas mistas, ou seja, organização dos vínculos entre as páginas de forma 
lógica dando ao usuário a liberdade de navegar e de se aprofundar de acordo com sua necessidade, 
permitindo, inclusive, começar do princípio a qualquer momento. 
 
 
8.4 Layout e aparência 
 
 
Layout (ou leiaute) é a forma pela qual os itens estão dispostos/diagramados, em outras 
palavras, refere-se ao design gráfico e a aparência visual. Durante o desenvolvimento de páginas para 
internet o projeto de layout é uma atividade crítica e é importante que esteja definido de forma 
consistente e prioritária, pois a partir dele o restante do trabalho será colocado em prática. 
 
 
Na etapa de especificação do layout, devem ser definidos os itens que irão compor a identidade 
visual do site, como o esquema de cores, a tipografia, o estilo das imagens (fotos ou ilustrações, por 
exemplo) e a ergonomia. A matéria-prima para essa atividade é, normalmente, uma relação de 
elementos gráficos e alguns manuscritos que indicam o que deve ser utilizado. No entanto, você irá 
perceber que também não são raras as situações onde o profissional necessita “captar” essas 
informações e fazer a proposição de algo novo (NIEDERST, 2002). 
 
Em geral, a definição de um layout segue alguns princípios básicos (CARRION, 2006): 
hierarquia das informações, foco/ênfase, equilíbrio, relacionamento dos elementos e 
unidade/integração. A hierarquia das informações determina qual a disposição da informação, 
baseando-se em sua importância em relação aos demais elementos visuais. De acordo com esse 
princípio, precisamos definir a informação mais importante para posicioná-la em um lugar estratégico, 
porque o usuário interage de imediato com aquilo que ele vê primeiro. 
 
O princípio do foco/ênfase nos auxilia na disposição dos elementos mais prioritários, utilizando 
os espaços mais nobres do layout. Determinar o foco envolve identificar a ideia central, ou o ponto 
focal do material a ser publicado. Aspectos culturais, assim como decisões do projeto de uma página 
na web, influenciam diretamente esse princípio. Em geral, informações mais importantes devem estar 
localizadas no canto superior esquerdo, sendo o início ou a base da tela os melhores locais para 
mostrar informações sobre orientações que devem estar sempre visíveis. 
 
O equilíbrio dos elementos e das informações de um site afeta, diretamente, a forma como o 
layout é compreendido. Mistura de assuntos sem conexão lógica ou mistura de elementos gráficos 
(sem deixar claro onde um começa e outro termina) são os principais problemas que podem afetar o 
equilíbrio. Um típico exemplo de falta de equilíbrio em um layout é a mistura de conteúdo com 
anúncios. Isso passa para o usuário uma sensação de estar sendo enga- nado ou persuadido. A falta de 
estrutura e de equilíbrio torna uma página na web mais difícil de ser entendida pelo usuário. 
 
De forma complementar, o princípio de relacionamento entre os elementos prega que estes 
precisam estar agrupados, categorizados, conduzindo a um luxo de navegação lógico. A utilização de 
elementos visuais pode ajudar a comunicar uma relação/conexão específica de uma página com o site 
do qual ela faz parte. Da mesma forma, a utilização de esquemas de cores pode potencializar a relação 
entre diferentes elementos do layout. 
 
Por fim e não menos importante, um layout deve se traduzir em uma unidade integrada de 
elementos. Esse princípio evidencia-se, especialmente, quando, em um grande projeto, há necessidade 
 
de manter subpáginas visualmente unificadas com o projeto de layout principal. Isso facilita a 
navegação uma vez que oferece um ambiente consistente, integrado e previsível. 
 
Além desses princípios que norteiam a organização de um layout, precisamos observar algumas 
propriedades ou qualidades que potencializam a experiência positiva com o site, especialmente a 
usabilidade e a navegabilidade. Também, não podemos nos distanciar da legibilidade, pois de nada 
adianta ser bonito se não pode ser compreendido. E, por fim, destacamos a relevância da 
acessibilidade, permitindo um acesso universal e democrático às informações. 
 
8.5 Anatomia de um site 
 
Em função dos princípios discutidos até então, estudiosos da área de web design têm 
experimentado diferentes formas de organização de layouts. Certamente, enquanto usuário da internet, 
você já deve ter tido boas e más experiências. Contudo, observamos que há uma espécie de padrão ou 
de roteiro com bastante aceitação e altamente difundido entre grandes e peque- nos sites. Tal modelo é 
composto por alguns elementos de conteúdo que podem ser visualizados na figura abaixo, na forma de 
um esquema numerado. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1. Logotipo – o logotipo ou logomarca do site, normalmente, ocupa o espaço mais nobre, 
onde, comumente, a visualização ocorre primeiro (canto superior esquerdo). 
 
2. Banner padrão, área de busca, anúncios externos – este é, também, um espaço nobre 
que, frequentemente, é explorado com um banner. Nessa área, recomenda-se a utilização de uma 
ferramenta de busca ou de um mapa do site (para simpliicar e agilizar a localização de informações). 
 
3. Menu administrativo – o menu administrativo é uma opção importante, no entanto 
deve ser discreto. É nele que colocamos informações sobre a empresa, identiicação (login) ou cadastro 
de usuários, contato, ajuda, etc. 
 
4. Menu de navegação – categorização das informações disponibilizadas pelo site. É 
comumente encontrado de forma horizontal, como o menu 
 
 
 
 
 
 
 
administrativo. É importante que as categorias ou opções do menu sejam curtas e claras, 
indicando ao usuário, rapidamente, a opção que ele deve escolher (excessivas opções também não são 
recomendadas). 
 
5. Área de destaque – nesse espaço, recomenda-se enfocar algo de maior importância 
dentro do contexto do site. Um site de comércio eletrônico poderia divulgar uma promoção; um site de 
notícias poderia noticiar o fato mais marcante do dia; um site pessoal poderia remeter para a ativi- 
dade mais recente ou última postagem. 
 
6. Conteúdo – área de conteúdoé o lugar onde são exibidas as informa- ções na medida 
em que navegamos pelo site. 
 
7. Anúncios – a barra lateral, da direita, pode ser utilizada para divulgação de atividades 
ains ao site, como anúncios ou links para outras páginas. 
 
8. Rodapé – o rodapé é, normalmente, utilizado para informações sobre o portal. Não é, 
necessariamente, usada por visitantes comuns, mas sim por aqueles com algum interesse especíico 
(como anunciar, trabalhe co- nosco, política de privacidade, termos de uso, etc.). 
 
Referências 
 
 
 
 
COLBLINDOR. Coblis — Color Blindness Simulator. Disponível em: <http://www.color-
blindness.com/coblis-color-blindness-simulator/>. Acesso em 17 jan. 2016. 
 
FACEBOOK DEVELOPERS. Open Graph Object Debugger. Disponível em: 
<https://developers.facebook.com/tools/debug/>. Acesso em 17 jan. 2016. 
 
FUNDACIÓN SIDAR. Validador Hera. Disponível em: <http://www.sidar.org/hera/>. Acesso 
em 17 jan. 2016. 
 
GOOGLE DEVELOPERS. PageSpeed Insights. Disponível em: 
<https://developers.google.com/speed/pagespeed/insights/>. Acesso em 17 jan. 2016. 
 
OGP. The Open Graph protocol. Disponível em: <http://ogp.me/>. Acesso em 17 jan. 2016. 
 
SILVA, Maurício Samy. Maujor: o dinossauro das CSS. Disponível em: 
<http://www.maujor.com/>. Acesso em 17 jan. 2016. 
 
TABLELESS. Desenvolvimento inteligente com padrões web e design. Disponível em: 
<http://tableless.com.br/>. Acesso em 17 jan. 2016. 
 
W3C. CSS – Curso W3C Escritório Brasil. Disponível em: 
<http://www.w3c.br/pub/Cursos/CursoCSS3/css-web.pdf>. Acesso em 17 jan. 2016. 
 
W3C. HTML5 – Curso W3C Escritório Brasil. Disponível em: 
<http://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf>. Acesso em 17 jan. 2016. 
 
W3C. World Wide Web Consortium Escritório Brasil. Disponível em: <http://www.w3c.br/>. 
Acesso em 17 jan. 2016. 
 
W3SCHOOLS. Online Web Tutorials. Disponível em: <http://www.w3schools.com/>. Acesso 
em 17 jan. 2016. 
 
XORON GMBH. Favicon.ico generator. Disponível em: <http://www.favicon.cc/>. Acesso em 
17 jan. 2016.