Caderno de INFO (Web Design 2015.2)

Web Design
Ronnie Edson de Souza Santos
Curso Tcnico em Informtica

Educao a Distncia
2015
EXPEDIENTE
Professor Autor
Ronie Edson de Souza Santos
Design Instrucional
Deyvid Souza Nascimento
Maria de Ftima Duarte Angeiras
Renata Marques de Otero
Terezinha Mnica Sincio Beltro
Reviso de Lngua Portuguesa
Letcia Garcia
Diagramao
Izabela Cavalcanti
Coordenao
Joo Ferreira
Coordenao Executiva
George Bento Catunda
Coordenao Geral
Paulo Fernando de Vasconcelos Dutra
Contedo produzido para os Cursos Tcnicos da Secretaria Executiva de Educao Profissional

de Pernambuco, em convnio com o Ministrio da Educao (Rede e-Tec Brasil).
Agosto, 2015
S237w
Santos, Ronnie Edson de Souza.
Web Design: Curso Tcnico em Informtica: Educao a
distncia / Ronnie Edson de Souza Santos. Recife: Secretaria
Executiva de Educao Profissional de Pernambuco, 2015.
159 p.: il.
Inclui referncias bibliogrficas.
1. Educao a distncia. 2. Home page (Computao). 3.
Sites da Web - Projetos. 4. Internet (Redes de computao). I.
Santos, Ronnie Edson de Souza. II. Ttulo. III. Secretaria
Executiva de Educao Profissional de Pernambuco. IV.
Ministrio da Educao. V. Rede e-Tec Brasil.
CDU 004.738.5
Sumrio
Introduo ...................................................................................................................................... 10
1.Competncia 01 | Elaborar um Escopo de Projeto para Programao Visual para Web ................ 13
1.1 O Surgimento da internet ............................................................................................................ 13
1.1.2 World wide web ....................................................................................................................... 15
1.1.3 Padres web ............................................................................................................................. 16
1.1.4 Design ...................................................................................................................................... 17
1.1.5 Front-End e Back-End ............................................................................................................... 18
1.2 Elaborar um escopo de projeto para programao visual para web ............................................. 20
1.2.1 Objetivos .................................................................................................................................. 22
1.2.2 Questionrio............................................................................................................................. 24
1.2.3 Anlise ...................................................................................................................................... 26
1.2.4 Pblico alvo .............................................................................................................................. 26
1.2.5 Personas ................................................................................................................................... 28
1.2.6 Pesquisa de campo ................................................................................................................... 29
2.Competncia 02 | Planejar um Website ....................................................................................... 32

2.1 Card sorting ................................................................................................................................. 34
2.1.1 Anlise de dados ....................................................................................................................... 36
2.2 Sistema de navegao ................................................................................................................. 37
2.2.1 Logotipo ................................................................................................................................... 38
2.2.2 Barra de navegao .................................................................................................................. 39
2.2.3 Menu Drop-Down ..................................................................................................................... 40
2.2.4. Bread crumb ............................................................................................................................ 40
2.2.5 Contedo cruzado .................................................................................................................... 41
2.2.6 Erro 404 .................................................................................................................................... 41
2.2.7. Passos...................................................................................................................................... 42
2.2.8 Paginao ................................................................................................................................. 43

2.2.9 Abas ......................................................................................................................................... 44
2.2.10 Camadas ................................................................................................................................. 44
2.2.11. Nuvem de Tags ...................................................................................................................... 45
2.3 Sistema de busca ......................................................................................................................... 45
3.Competncia 03 | Conhecer os Modelos de Representao e Organizao de Website ............... 47

3.1 Mapa do site................................................................................................................................ 47
3.2 Fluxo de navegao ..................................................................................................................... 50
3.2.1 Pginas, arquivos e conjuntos ................................................................................................... 51
3.2.2. Conectores e setas ................................................................................................................... 52
3.2.3. Conjunto corrente ................................................................................................................... 54
3.2.4 Separaes ............................................................................................................................... 54
3.2.5 reas e reas iterativas ............................................................................................................. 55
3.2.6 Sistemas programados.............................................................................................................. 56
3.2.7 Exemplo de diagrama ............................................................................................................... 56
4.Competncia 04 | Elaborar Layouts para Web Sites ..................................................................... 58

4.1 Wireframe ................................................................................................................................... 59
4.1.1 Gestalt para websites ............................................................................................................... 62
4.1.1.1 O Princpio da Gestalt ............................................................................................................ 62
4.1.1.2 Aplicando a Gestalt ................................................................................................................ 65
4.2 Layout ......................................................................................................................................... 67
4.2.1 Fontes complicadas .................................................................................................................. 69
4.2.2 Escolhas simples ....................................................................................................................... 70
4.2.3 Pouco texto .............................................................................................................................. 70
4.2.4 Poucas fontes ........................................................................................................................... 70
4.2.5 Escala Tipogrfica Modular ....................................................................................................... 71
4.2.6 Nunca justifique o texto ............................................................................................................ 72

4.2.7 Utilize menos ornamentao .................................................................................................... 72
4.2.8 Defina a cor .............................................................................................................................. 73
4.2.9 Enxergue o invisvel .................................................................................................................. 74
4.2.10 Consideraes ........................................................................................................................ 74
4.3 Prototipao ................................................................................................................................ 75
5.Competncia 05 | Conhecer os Padres Definidos pela W3C para Representao e Criao de

Websites ......................................................................................................................................... 77
5.1 A estrutura da internet ................................................................................................................ 77
5.2 URL.............................................................................................................................................. 79
5.3 URL absoluta e relativa ................................................................................................................ 81
5.4 Registrando um DNS .................................................................................................................... 82
5.5 IDEs ............................................................................................................................................. 83
5.6 W3C e os padres Web ................................................................................................................ 85
5.7 HTML ........................................................................................................................................... 86
5.8 CSS .............................................................................................................................................. 89
6.Competncia 06 | Formatar um Website Usando os mais Modernos Padres de Marcao de

Hipertexto ....................................................................................................................................... 92
6.1 TAGs ............................................................................................................................................ 93
6.1.1 Atributos .................................................................................................................................. 94
6.2 Doctype ....................................................................................................................................... 94
6.3 Estrutura bsica do documento HTML ......................................................................................... 95
6.4 Visualizando as Pginas ............................................................................................................... 98
6.5 Nomenclatura dos arquivos HTML ............................................................................................... 99
6.6 Layout HTML ............................................................................................................................... 99
6.7 Atributos Id e Class .................................................................................................................... 101
6.8 Novas Tags HTML 5 .................................................................................................................... 102

6.9 Iframe........................................................................................................................................ 103
6.10 Tags Textuais ........................................................................................................................... 104
6.11 Meta Tags ................................................................................................................................ 105
6.12 Lista ordenadas e no ordenadas ............................................................................................. 106
6.13 Tabelas .................................................................................................................................... 107
6.14 Imagens ................................................................................................................................... 108
6.15 Formulrio ............................................................................................................................... 109
6.16 Links ........................................................................................................................................ 110
6.17 Finalizando .............................................................................................................................. 112
7.Competncia 07 | Planejar a Identidade Visual de Web Sites Usando Folhas de Estilo ............... 113
7.1 Regras CSS ................................................................................................................................. 114
7.2 Seletores ................................................................................................................................... 115
7.3 Cores ......................................................................................................................................... 117
7.4 Background ............................................................................................................................... 118
7.5 Text ........................................................................................................................................... 119
7.6 Font ........................................................................................................................................... 120
7.7 Links .......................................................................................................................................... 121
7.8 List............................................................................................................................................. 122
7.9 Border ....................................................................................................................................... 123
7.10 Modelo de caixa ...................................................................................................................... 125
7.11 Width e Height ........................................................................................................................ 126
7.12 Position ................................................................................................................................... 127
7.13 Magin e Padding ...................................................................................................................... 129
7.14 Display..................................................................................................................................... 132
7.15 Novas tags HTML 5 .................................................................................................................. 133
8.Competncia 08 | Construir um Website.................................................................................... 137

8.1 Inserindo Javascript em uma pgina .......................................................................................... 137
8.2 Manipulando elementos HTML .................................................................................................. 138
8.3 Funes ..................................................................................................................................... 139
8.4 Eventos ..................................................................................................................................... 140
8.5 JQuery ....................................................................................................................................... 141
8.5.1 Instalao da Biblioteca JQuery............................................................................................... 142
8.5.2 Selecionando Elementos ......................................................................................................... 143
8.5.3 Adicionando Efeitos ................................................................................................................ 144
8.5.4 Utilizando Eventos .................................................................................................................. 146
8.6 Bootstrap .................................................................................................................................. 151
Concluso ...................................................................................................................................... 157

Referncias ................................................................................................................................... 158
Minicurrculo do Professor ............................................................................................................ 159
Introduo
Caro (a) aluno (a), esta a disciplina de Web Design, atravs da qual vamos conhecer, entender
e discutir o trabalho do design, alm de aprender todo o processo de concepo, elaborao e
construo de um website. Muitas pessoas acreditam que design uma denominao para
desenho, ou seja, que o trabalho do designer est unicamente relacionado com a esttica,
formas, cores, texturas e disposies de elementos em uma pgina. Nesta disciplina, voc vai
descobrir que o trabalho do designer, em especfico do web design, vai muito alm de saber
desenhar ou saber utilizar as ferramentas para a construo de sites.
Pode-se definir Design como a concepo de um produto no que se refere sua forma fsica e
funcionalidade, ou seja ao ato de PROJETAR. Assim, esta disciplina possui um nmero maior de
competncias, pois o processo a ser tratado no estar ligado apenas ao processo de
construo, mas principalmente ao processo de planejamento e elaborao. Por isso, dividimos
o caderno de estudo em duas partes, para ficar mais tranquilo para voc trabalhar todo o
contedo desta disciplina.
As trs primeiras competncias so responsveis pelas informaes relativas ao planejamento

do futuro website que dever estar completamente construdo ao final da disciplina.
Comearemos a primeira competncia entendendo um pouco sobre a internet e o mundo do
desenvolvimento de websites, iniciando pela profisso de web designer, e finalizaremos com a
elaborao um de Projeto para programao visual para web. Assim, vamos mergulhar no
domnio do problema e compreender as necessidades do cliente, do usurio e dos demais
envolvidos no projeto. Isso assegura que o designer compreenda completamente o website que
ser desenvolvido.
Uma vez que conhecermos bem o assunto, iremos, na segunda competncia, planejar um
website.
Utilizaremos tcnicas profissionais e conheceremos os principais sistemas de
navegao. Para finalizar, na terceira competncia conheceremos os Modelos de
10
Representao e Organizao de websites e entenderemos a complexidade do projeto atravs

de tcnicas de mapeamento visual, o que ajuda a saber quantas pginas nosso site ter e a que
se destinam cada uma delas.
Ao fim de trs semanas, iniciaremos a segunda parte desta disciplina. Este segunda parte
conter o material necessrio para a produo esttica e a codificao necessria para tornar
real o website que iremos planejar na primeira etapa. Dando continuidade s competncias
anteriores, iniciaremos a quarta competncia com a elaborao de layouts para websites, que
mostra um pouquinho de metodologias profissionais para a criao esttica da identidade
visual do site, ou seja, formas, cores, entre outros elementos que formam a aparncia do
website.
Posteriormente, na quinta competncia, vamos conhecer os padres definidos pela W3C para
representao e criao de websites e as tecnologias que usaremos para produzir o site. Da em
diante, teremos uma competncia para cada tecnologia. Assim, a sexta competncia ser para
o HTML, responsvel por formatar um Website usando os mais modernos padres de marcao
de Hipertexto. Na stima, focaremos no CSS, usado para planejar a identidade visual de
websites usando folhas de estilo. E na ltima competncia, teremos uma aula introdutria
sobre programao com Java Script para usarmos efeitos interessantes em nossa pgina.
Tenha ateno para no se confundir, certo? Esta disciplina possui duas partes de estudos e a
leitura de todo o caderno extremamente necessria para se entender todo conhecimento
proposto. Mas no se limite apenas ao contedo do caderno. Dedique-se, busque mais
conhecimento para ser um profissional melhor e colher as recompensas que viro atravs do
seu esforo.
Ao fazer esse curso, voc estar se tornando um produtor de contedos para a internet e no
apenas um simples consumidor da web. Esta disciplina foi construda de modo a lhe dar
conhecimento para idealizar um site, organiz-lo e desenvolve-lo. uma jornada que lhe exigir
dedicao no s na leitura deste caderno, mas tambm em fazer pesquisas para
11
complementar seu aprendizado. Deste modo, traremos at voc, caro (a) estudante, as
ferramentas iniciais para voc progredir por si mesmo. Voc encontrar muita informao na
web, em texto e tambm em vdeo.
Aproveite bastante, pois esta informao gratuita e est l, lhe esperando. E no esquea,
que os tutores da disciplina estaro sempre disponveis para ajudar a sanar qualquer dvida
sobre todo o contedo. No deixe tambm de realizar os exerccios propostos, so eles que te
ajudam na compreenso da disciplina. Alm disso, aproveite e, quando possvel, refaa todos
os exemplos mostrados no caderno. Lembre-se, seu aprendizado depende de sua dedicao
nas competncias desta disciplina.
Contamos com voc!
Bons estudos.
12
Competncia 01
1.Competncia 01 | Elaborar um Escopo de Projeto para Programao

Visual para Web
A nossa disciplina comea de maneira a entender o domnio do problema que iremos abordar,
ou seja, quem tem o problema a ser resolvido com a construo de um website, o que a pessoa
acha que seja o problema, o que os usurios que iro utilizar o site acham e ainda o que acham
os funcionrios da empresa que ir utilizar o site nas suas atividades dirias. Devemos buscar a
informao de todos que iro ter algum tipo de contato com o que ser construdo, para
obtermos a soluo que ser transformada em website.
Antes disso, vamos conhecer um pouco do universo do web designer. Vamos iniciar esta
disciplina falando sobre a internet, o surgimento dessa rede, e algumas questes curiosas sobre
esse universo no qual iremos trabalhar.
1.1 O Surgimento da internet
A internet vem se tornando uma ferramenta cada vez mais indispensvel e importante para o
desenvolvimento e o crescimento da sociedade. Foi a internet que forneceu um suporte
necessrio para que mudanas importantes acontecessem no mundo. Essa tecnologia
considerada uma revoluo de vrias formas, e seu impacto bem mais profundo do que
percebemos.
A internet sinnimo de eficincia e praticidade na vida moderna, e desde o seu surgimento foi
se tornando cada vez mais essencial no dia a dia das pessoas, e em diversos contextos: nas
escolas, nas universidades, nas empresas, nos negcios, em casa, na rua e em todos os lugares,
permitindo que as pessoas tenham aceso a coisas que antes seria praticamente impossvel, pela
distncia, pelo custo ou pela falta de suporte.
Os mais novos podem at se perguntar: como era possvel viver sem internet? um novo
13
Competncia 01
mundo. Um mundo de bits, a menor unidade de informao do computador, que circula de

computador para computador na chamada rede mundial de computadores. Para entrarmos
nesse mundo, vamos precisar conhecer um pouquinho de sua histria. Vamos l!
Figura 1 - A internet conectando o mundo

Fonte: http://situado.net/a-importancia-da-internet-para-a-atualidade/
A rede mundial de computadores, ou Internet, surgiu na dcada de 1960, durante o perodo da

histria conhecida como Guerra Fria. A internet foi criada com objetivos militares, para ser
usada como uma das formas das foras armadas norte-americanas manterem as comunicaes
e o contato em caso de ataques inimigos que destrussem os meios convencionais de
telecomunicaes, como rdio e telefone.
Descubra mais sobre a internet. Acesse

http://pt.wikipedia.org/wiki/Hist%C3%B3ria_da_Internet
A internet um sistema de comunicao entre computadores ao redor do planeta. Ela d o

suporte para a troca de dados entre os computadores que esto conectados a ela. E entenda
que hoje temos computadores em casa, nos carros e constantemente conosco, atravs de
smartphones.
Aps o seu surgimento, nas dcadas de 1970 e 1980, alm de ser utilizada para fins militares, a
Internet tambm foi um importante meio de comunicao acadmico. Estudantes e
14
Competncia 01
professores universitrios, principalmente dos EUA, trocavam ideias, mensagens e descobertas

pelas linhas da rede mundial.
Entretanto, foi somente a partir do ano de 1990 que a Internet comeou a alcanar a populao
mundial de maneira geral. A partir desta dcada, o engenheiro ingls Tim Bernes-Lee
desenvolveu a World Wide Web, possibilitando a utilizao de uma interface grfica e a criao
de sites mais dinmicos e visualmente interessantes. A partir deste momento, a Internet
cresceu em ritmo acelerado. Muitos dizem que foi a maior criao tecnolgica, depois da
televiso na dcada de 1950.
1.1.2 World wide web

A World Wide Web ou teia mundial, tambm conhecida por web ou www e no a mesma
coisa de internet. A web foi criada em 1990, por um engenheiro do CERN chamado Tim
Berners-Lee. Ele trabalhava em um lugar que possua uma rede de computadores ligados
internet com vrios cientistas trocando documentos diferentes entre si. O problema que
esses cientistas usavam sistemas operacionais diferentes e, na maioria das vezes, um
documento de uma mquina no abria corretamente em outra mquina. Ou seja, no existia
uma forma comum, padronizada, para acessar os diferentes documentos na internet.
Para resolver esse problema, Tim Berners-Lee comeou a desenvolver um projeto no qual
qualquer tipo de arquivo poderia ser utilizado por diferentes pessoas, que tinham um ponto
comum como base, a internet. Neste caso, podemos definir World Wide Web, o famoso WWW,
como um sistema de documentos dispostos na Internet que permitem o acesso s informaes
apresentadas no formato de hipertexto. Para ter acesso a tais informaes pode-se usar um
programa de computador chamado navegador.
Assista excelente palestra de Tim no TED. A palestra est em ingls, mas possui legendas
em portugus. Vale muito a pena.www.ted.com/talks/tim_berners_lee_on_the_next_web
15
Competncia 01
Ento, conclumos que internet e web no so as mesmas coisas. A web um formato de

documento HTML, com uma forma de endereamento URL, e uma forma de entrega desse
documento, atravs de protocolos. Ex.: HTTP, HTTPS, entre outros. A internet por onde isso
tudo utilizado.
Figura 2 - Mapa da World Wide Web desenhada atravs de dados do Facebook

Fonte: https://termid.wordpress.com/2010/12/14/new-world-wide-web-map-based-onfacebook/
1.1.3 Padres web
No tpico anterior, percebemos que o maior problema existente no incio da utilizao da

internet eram os diversos documentos de formatos diferentes vindos de computadores
diferentes. O surgimento da web padronizou a forma como tudo isso pode ser acessado.
Entretanto, a medida que a web popularizou no mundo, as pessoas comearam a modific-la
para adapt-la s diferentes necessidades.
Descubra mais sobre a web.Acesse http://pt.wikipedia.org/wiki/WWW;./
Todas essas modificaes poderiam se tornar uma baguna, se no fosse uma instituio que
cuida da uniformidade na web, garantindo, assim, que o documento que foi produzido na
China, por exemplo, possa ser exibido da mesma forma em qualquer parte do mundo. O W3C
16
Competncia 01
(World Wide Web Consortium) a principal organizao de padronizao da web. Ela no

uma empresa, um consrcio internacional com quase 400 membros, que agrega empresas,
rgos governamentais e organizaes independentes com o objetivo de estabelecer padres
para a criao e a interpretao de contedos para a Web. Hoje, a W3C cuida da reformulao
do HTML em um projeto divulgado como HTML 5.
Figura 3 Site da W3C.

Fonte: www.w3c.br/Home/WebHome
Neste sentido, podemos concluir que os Padres Web so recomendaes do W3C (World
Wide Web Consortium), as quais so destinadas a orientar os designers e os desenvolvedores
de websites para o uso de boas prticas que tornam a web acessvel para todos.
1.1.4 Design
A maioria das pessoas entende de maneira errada a profisso de designer. O termo Design
no se traduz como desenho, e sim como projeto. A palavra para desenho draw. O designer
projeta no s a parte visual, mas, principalmente, a organizao e sua estrutura para a melhor
experincia dos usurios com o sistema. No caso, o web designer especialista no
planejamento e na produo de sites web.
O trabalho maior do web designer est antes de escrever o cdigo do site ou de desenhar a
17
Competncia 01
identidade visual do site, que so tarefas do final do processo. Fazer um site sem planejar antes
como construir uma casa sem uma planta, sem planejar o encanamento, esgoto, parte
eltrica, etc. D para perceber que, sem esse planejamento, o resultado final do site criado
pode ser bastante frustrante.
Neste caso, para essa disciplina, precisamos ter pacincia e desenvolver todo o planejamento
da parte inicial bem elaborada. Assim, aumentaremos as chances do site desenvolvido ser um
grande sucesso!
Veja uma animao divertida que explica o papel do design grfico.

www.youtube.com/watch?v=EjMYdfdny3M
1.1.5 Front-End e Back-End
A internet possui dois lados: o incio e a chegada. Quando abrimos um navegador, aquele
programa que visualiza pginas de internet, e solicitamos ver uma pgina, como a do Google,
por exemplo, fazemos um pedido para outro computador, que guarda a pgina e nos envia. A
pgina que estamos visualizando na nossa tela, a chamada camada Front-End, enquanto isso,
o computador remoto que vai nos enviar os dados da pgina que queremos ver quando
digitamos um endereo web o que chamamos de Back-End.
Em resumo:
FRONT-END a interface de interao com o usurio.
BACK- END o sistema responsvel pela regra de negcios, webservices e APIs de uma
aplicao.
Os computadores na internet que so especializados em servir as pginas que queremos ler so
18
Competncia 01
chamados de servidores. Na verdade, o servidor um programa que funciona no computador,

mas vamos simplificar.
Na web podemos encontrar, ou construir, dois tipos de pginas:
Pginas Estticas: So aquelas que se apresentam sem movimento e sem muitas
funcionalidades, alm dos links de direcionamento. So pginas geralmente com contedo de

leitura. Essas pginas so construdas com a linguagem HTML, que no permite grandes
manobras para criar efeitos nem mais funcionalidades, alm dos links.
Pginas Dinmicas: As pginas que tm efeitos especiais e nas quais podemos interagir.
Uma pgina dinmica quando se inclui qualquer efeito especial ou funcionalidade e, para isso,
necessrio utilizar outras linguagens de programao, parte do simples HTML.
Um exemplo de pgina web esttica a primeira pgina web criada no mundo h mais de 18
anos. Veja abaixo:
Figura 4 Primeira Pgina Web do Mundo.

Fonte: www.tecnoartenews.com/noticias/visite-a-primeira-pagina-web-do-mundo-criada-ha-mais-de-20anos/
Hoje em dia a maioria das pginas web so dinmicas, pois no possuem esta caracterstica de
19
Competncia 01
somente leitura. Nessas pginas voc capaz de interagir, enviar e receber dados e modificar
a pgina com esses dados. A exemplo disso, temos a pgina de login de redes sociais como o
Facebook ou a pgina de um carrinho de compras de uma loja de compras online.
A diferena que nas pginas estticas fazemos uma vez seu contedo e ele ser copiado toda
vez que for requisitado. Nas pginas dinmicas o contedo vai ser determinado por um
software que produz a pgina a cada requisio. O carrinho de compra em um site de vendas
online uma pgina em que o contedo dela modifica, dependendo de nossa interao no site
de comrcio online. So chamadas de pginas dinmicas.
Figura 5 Exemplo de pgina dinmica, um carrinho de compras.

Fonte: http://dicadeouro.com/conteudos/arquivos_posts/carrinho_002.gif
Esta disciplina focada na criao de pginas de contedo esttico, e a isso classificamos como
desenvolvimento front-end. Quando temos que desenvolver uma aplicao que ir construir as
pginas de forma dinmica, temos ento o desenvolvimento back-end. Este tipo de
desenvolvimento mais difcil e para faz-lo muito recomendvel que voc conhea bem o
desenvolvimento front-end primeiro.
1.2 Elaborar um escopo de projeto para programao visual para web
Como mencionamos, diferentemente do que muita gente pensa, o trabalho do web design
20
Competncia 01
maior antes dele colocar a mo na massa e produzir o site. O planejamento essencial para um
produto de sucesso e, para se planejar bem, voc deve conhecer bem a situao. Dificilmente
voc vai dominar toda a informao sobre a empresa e o contexto de seu cliente to bem
quanto ele. necessrio utilizar algumas tcnicas consagradas na rea para conseguir entender
da melhor forma possvel e resolver no menor tempo. Isto significa que voc deve utilizar uma
metodologia para alcanar os objetivos.
Clement Mok um designer grfico canadense, fundador do Studio Archetype, ex-diretor de

criao da Apple. Ele foi o desenvolvedor da metodologia DADI para projetos de websites. DADI
o acrnimo para Definio, Arquitetura, Design e Implantao.
Na etapa de Definio, o web design mergulha no universo do problema que ser solucionado
pelo site. Ele deve investigar o mximo de aspectos ligados ao domnio do problema e coletar o
mximo de informaes relevantes que o ajudem a desenvolver o site que ser a soluo do
problema do cliente.
A etapa de Arquitetura uma fase complementar Definio. Nessa fase, o web design
procura organizar todos os dados coletados e tambm distribuir por completo o contedo do
site, para que o usurio no receba toda a informao de uma vez, e ainda hierarquiz-la, para
que o usurio receba primeiro uma informao e da, se desejar aprofundar-se mais, ter essa
opo.
Na etapa de Design o profissional deixa a informao mais atrativa e confortvel de ser

visualizada. quando planejamos quais cores so melhores para o pblico alvo definido na fase
de Definio, alm das fontes, formas, imagens, vdeos, etc. Ainda no codificamos nada,
apenas teremos alguma coisa para mostrar ao cliente, como uma imagem do site.
Na ltima etapa, a Implantao, o web design ter o produto pronto. Mas o trabalho no acaba
por a. A soluo criada deve ser testada para se averiguar que realmente ela resolve o
problema que levou o cliente a desejar um site.
21
Competncia 01
Nesta competncia, abordaremos a etapa de Definio e iremos evoluindo pelas etapas

posteriores a partir daqui. O que voc, como profissional, deve fazer um documento que
possua as informaes adquiridas atravs de entrevistas e questionrios, alm de uma pesquisa
na frente do computador. Mas vamos com calma, fazendo uma coisa de cada vez. Alertamos
para que voc tenha zelo ao produzir o documento. Faa algo bem profissional, com uma
qualidade que mostre a seriedade com que voc est trabalhando.
1.2.1 Objetivos
Pode parecer bvia esta parte. Basta perguntar ao cliente, voc pode imaginar, mas nem
sempre o cliente sabe os verdadeiros motivos que o levaram a procurar um web design. Muitas
vezes, ele s deseja fazer parte da moda que ter uma pgina na web. Neste ponto, o nico
usurio relevante do site ele prprio, e se ele quer dessa forma, que assim seja.
Mas se o cliente desejar algo mais relacionado ao seu negcio, a voc ter mais trabalho. O
melhor jeito de conseguir essas valiosas informaes atravs de entrevista e muita ateno
nas respostas. Converse bem com seu cliente ou seu representante. Mas o que perguntar?
Realmente, um bom questionamento.
No existe uma receita fixa. Depende muito da experincia do profissional e do tipo do cliente.
No h uma quantidade certa nem quais so as melhores perguntas a serem feitas. De nada
adianta se voc no entender a resposta, por exemplo. Consiga o mximo de informaes que
voc julgar que ir ajudar na produo do site que voc ir desenvolver. Pea os textos e
imagens, caso no seja voc quem tambm ir produzir. Descubra se o cliente quem dar a
palavra final ou vai passar para um representante. Anote tudo e deixe bem definido para depois
ele no pedir algo que no foi acordado antes. Com o tempo, voc vai ganhando experincia e
vai descobrindo o que precisa perguntar.
Abaixo, temos algumas sugestes para a fase de definio dos objetivos.
22
Competncia 01
1.
Por que deseja um site?
2.
Quais sites que lhe chamaram mais ateno?
3.
Qual o pblico alvo de seu negcio?
4.
O que lhe chama mais ateno nos sites que lhe agradam?
5.
O que voc gostaria que o site tivesse?
6.
O contedo (texto de apresentao, imagens e fotos do local, etc.) j est pronto?
Com essas poucas perguntas, voc j vai ter uma ideia do que ele quer, quanto tempo vai durar
a produo e quem ser seu usurio, se ele ou os clientes dele.
Outro ponto a multiplicidade de objetivos. Na verdade, o site possui um objetivo geral, mas
pode ter vrios especficos. Os objetivos especficos so metas menores que somadas alcanam
o objetivo geral. Vejamos um exemplo.
Nosso cliente um empresrio de um msico que est lanando seu primeiro lbum. O
empresrio respondeu as perguntas acima da seguinte forma.
1.
Quero que o site seja um local para que os fs de meu cantor possam conhecer um
pouco mais sobre ele, seu trabalho e sua agenda. Quero alimentar a simpatia que os fs nutrem
por ele.
2.
Os sites dos Luan Santana, Gustavo Lima e Daniel tm o mesmo estilo de msica do meu
artista.
3.
Na maioria so garotas de mais ou menos 18 anos.
4.
Uma bela foto do artista e, geralmente, tem um vdeo clipe dele.
5.
No sei muito bem, mas poderia ter alm de fotos, uma biografia e a agenda do cantor.
6.
No. Enviaremos assim que tivermos. Mas voc pode comear a fazer logo.
Analisando as respostas percebemos que o cliente sabe bem o que quer: promover o cantor. Os
exemplos de site que ele deu mostram que, mesmo que o artista no seja bem conhecido, ele
deseja a grandiosidade que outros j conseguiram. Isso seria para atrair seu pblico-alvo que,
23
Competncia 01
segundo o empresrio, so adolescentes e jovens entre 13 e 23 anos.
Nesse caso, como teremos um pblico menor de idade, devemos ter cuidado com o contedo e
a forma como mostrado. Tambm teremos que planejar o site para receber um contedo de
vdeo em alguma parte. No entanto, o empresrio no transmite muita segurana na entrega
do contedo do site. Devemos, ento, ter uma alternativa na manga para caso o vdeo nunca
chegue. Outro detalhe que chama ateno a agenda do cantor. Como no estamos fazendo
um sistema de gerenciamento de contedo, back-end ou site dinmico, devemos imaginar em
fazer um contrato com ele para atualizar mensalmente ou quinzenalmente o site.
Agora a sua vez. Procure algum conhecido que tenha um negcio e que voc acredite que
gostaria de ter um site esttico. Esta pessoa no pode ser voc, nem voc deve inventar.
Procure uma pessoa real para fazer a entrevista. Diga-lhe que ela est lhe ajudando em uma
atividade de seu curso. Voc no precisa fazer o servio realmente. Ele s vai estar lhe
ajudando, mas deixe isso bem claro. Voc pode utilizar as perguntas usadas acima e
acrescentar outras que achar pertinente.
1.2.2 Questionrio
Diversas vezes, o cliente no sabe responder as perguntas da entrevista. Os motivos podem ser
vrios. Ele pode no ser um dos usurios do futuro site, nem ter intimidade com a internet.
Nesse caso, as informaes podem vir de pessoas que seriam os empregados ou clientes do
negcio. Fazer uma entrevista com cada um seria demorado e, para o seu cliente, tempo
dinheiro.
Resolvemos essa situao com um questionrio. Pense bem nas perguntas e, se possvel,
coloque alternativas, mas deixe um espao para uma resposta que no esteja entre as
alternativas. No faa muitas perguntas e no as complique. Seja claro e simples. Ao final, voc
pode oferecer um brinde barato pela ajuda que as pessoas deram. Faa o questionrio e pea a
algum para ler e dar uma opinio. Ao final reproduza uma quantidade e distribua. Recolha
dando o brinde para quem respondeu. Depois, analise as respostas e mantenha o foco, voc
24
Competncia 01
est procurando os objetivos do site. As perguntas possuem as mesmas regras da entrevista.

Na verdade, o questionrio pode ser uma opo quando o cliente no sabe responder. Temos
um exemplo ligado rea de sade. Veja o questionrio:
1.
Voc acessa a internet?
2.
Quantas vezes por semana?
3.
Se a empresa tivesse um site, qual a primeira coisa que voc procuraria?
4.
Procuraria por mais alguma coisa?
5.
Se voc tivesse que entrar em contato, utilizaria o e-mail ou o formulrio de contato do
site?
Agora, vamos supor que a maioria das respostas dos usurios foi:
1.
Sim.
2.
De 3 a 5 vezes na semana.
3.
A listagem de mdicos credenciados e o telefone para marcar consultas.
4.
O endereo dos locais onde posso autorizar o atendimento, de preferncia que tivesse
um mapa explicativo. Tambm se eles oferecem outros servios que eu possa ter direito pelo
meu plano.
5.
O e-mail, mas se estivesse no site usaria o formulrio de contato.
Observamos que os clientes desse negcio acessam a internet com regularidade, ento
conhecem bem o meio. Notamos ainda que existe uma demanda para consultar uma
determinada informao que pode aparecer a qualquer momento na vida do cliente e mais de
uma vez. O cliente tambm gostaria de ter informaes especficas sobre o servio que
comprou. O site pode oferecer um formulrio, que exige programao back-end, mas podemos
apenas oferecer um endereo de e-mail para contato.
Vamos ver se voc conseguiu entender tudo. Faa o seu questionrio, com as perguntas que
voc achar pertinente e distribua os papis para algumas pessoas. Voc pode at enviar por
e-mail. O mais ideal que elas sejam as clientes do negcio do amigo que lhe ajudou antes.
Depois de receb-los preenchidos, compare os objetivos que o cliente deu na entrevista
com as respostas do questionrio.
25
Competncia 01
1.2.3 Anlise
Junte todas as informaes que conseguiu adquirir, seja pelo cliente, funcionrios e/ou clientes
de seu cliente. Leia com calma e tente entender as relaes entre elas. Compare. Ser que o
cliente entende mesmo os clientes dele?
Desse material extraia o objetivo geral e os especficos. Faa um pargrafo simples e escreva
um documento bem estruturado com ttulos e subttulos. Seja zeloso em seu trabalho. Um bom
profissional sempre organizado com suas responsabilidades. Neste exemplo, o tamanho da
fonte foi aumentado para facilitar a leitura, mas no h necessidade do texto ser to grande.
Figura 6 Pgina de capa e pgina um do projeto de exemplo. O seu no precisa ser igual. Este apenas um
exemplo de cuidado com o projeto.
Fonte: Prprio autor.
1.2.4 Pblico alvo
O pblico alvo rene as caractersticas comuns dos clientes. Normalmente, quando

perguntamos: quem so seus clientes? A resposta todo mundo, ou algo parecido. Isto
26
Competncia 01
significa que ele no sabe quem seu cliente, ou ele deseja que realmente todo mundo seja
seu cliente. Mas no .
O pblico alvo define as caractersticas comuns maioria dos clientes. Tudo bem que seu
cliente pode vender para qualquer um, mas como a maioria das pessoas? Alta, baixa, gorda,
magra, homem, mulher, no vive sem internet, ou no gosta de tecnologia? Uma vez que voc
conhece as caractersticas comuns pode fazer um site que agrade mais a maioria das pessoas e
dessa forma aumentar a possibilidade de sucesso.
Lembre-se de que se voc atirar para todo lado pode no atingir ningum, e vai precisar de
muitas balas, o que caro. Mas se voc escolher um alvo, neste caso o mais fcil, aumenta as
chances de acertar em cheio. A forma de descobrir o pblico-alvo de seu cliente pode vir por
ele mesmo, durante a entrevista, ou conversando com os funcionrios que convivem com os
clientes, ou observando o fluxo no negcio. Talvez at voc j conhea por experincia prpria.
O mais importante que tenha a certeza dele.
Caso voc erre em determinar as caractersticas principais pode levar por gua abaixo todo o
projeto, e fazer algo que nem de longe as pessoas gostem. Vamos analisar os clientes de
chupetas. Isto mesmo. As chupetas possuem um usurio que o beb, mas outro cliente, o pai
ou a me. Para complicar podemos ter algum que indica, como uma tia ou a av. Alm disso,
se o pai compra, ele vai procurar algo mais prtico, se for a me ir dedicar um tempo maior
para observar as vantagens extras, independente do preo. Viu como pode complicar?
Vejamos um exemplo:
No caso de nosso empresrio do cantor sertanejo, ele conhece bem quem o pblico-alvo e
nos diz isso na entrevista: garotas com mais ou mesmo 18 anos. Entendemos que este pblico
busca novidade e altamente conectado. J na pesquisa com os clientes de uma empresa,
podemos deduzir que so pessoas que passam dos 50 anos por precisar, medida que
envelhecem, de mdicos e exames. Outra caracterstica que podemos perceber a de que
27
Competncia 01
provavelmente a pessoa que necessite do servio deve se encontrar fragilizada pelo problema
que est passando. claro que estamos adivinhando, o que poderia ser ruim em caso de erro.
Quanto mais voc pesquisa, mais diminui o risco.
Sua vez! Quais so as caractersticas comuns do pblico-alvo do negcio que voc est
analisando? Defina as caractersticas mais marcantes e as que voc pode deduzir sobre elas.
No se esquea de buscar algum com estas caractersticas para comprovar se voc deduziu
certo. Lembre-se do perigo que deduzir errado.
Acrescente ao seu projeto com o ttulo PBLICO-ALVO.
1.2.5 Personas
Apesar de voc fazer todo esse trabalho para conhecer o pblico-alvo de seu site, podemos
chegar a situaes que as caractersticas so to abrangentes que difcil imaginar uma pessoa
alta e magra ao mesmo tempo, que ama e odeia a internet, que jovem e velha, tudo ao
mesmo tempo.
Quando ocorre algo assim, por conta da abrangncia, temos que enxergar melhor os
esteretipos, at caso voc tenha uma equipe que faa essa pesquisa e voc no tenha o
contato com as pessoas reais que geraram os dados. Assim, selecione as caractersticas mais
prximas e invente uma personagem com uma histria fictcia que passe a ideia do pblicoalvo. Voc pode colocar uma foto fictcia para ilustrar, ou utilizar um desenho para dar um
pouco mais de intimidade com aquele esteretipo.
Vamos ver um exemplo? Baseado nos dados que o empresrio nos passou e em dedues
pessoais temos a persona abaixo. Lembre-se de que uma histria inventada com as
caractersticas observadas e deduzidas.
28
Competncia 01
Maria tem 16 anos estudante e no larga do celular com

internet. Ela e as amigas adoram msica e principalmente os
cantores tal e tal. Tambm fazem parte de um f clube
organizado em uma rede social virtual que compartilha
Fonte da imagem: www.reeima
ges.com/photo/1270130
informaes sobre um determinado cantor.
Agora, proponho um desafio. No sei o pblico-alvo que voc descobriu, mas faa no
mnimo duas personas bem distintas, ou seja, com caractersticas bem diferentes. Siga o
exemplo e escreva um pargrafo para cada uma com quatro linhas no mnimo. Escreva o
ttulo PERSONAS logo abaixo no documento.
1.2.6 Pesquisa de campo

Os concorrentes so uma importante fonte de conhecimento, mas no a nica. Provavelmente
eles j fizeram todo o trabalho duro e apresentam os resultados no produto. Mas copiar nunca
o bastante. Afinal, seu site no pode ser apenas mais um. Ele deve atrair pelo diferencial. Ou
seja, o que seu site tem que os outros no tm?
Visite os sites dos concorrentes de seu cliente. Descubra o que eles tm de igual e diferente.
Procure pensar em como o site que voc produzir ir se destacar quando estiver lado a lado
com os outros.
Para isso, utilizamos uma tabela com caractersticas dos sites e marcamos nossas impresses
sobre eles. Sensibilidade o fator mais importante aqui. Voc tem que perceber os fatores
positivos e negativos, fazendo um julgamento imparcial.
A tabela abaixo o do diferencial semntico. Para preench-lo voc deve visitar um site do
concorrente e, aps us-lo por algum tempo, responder a tabela com um X para cada
intensidade de impresso. Exemplo: ao utilizar o site, senti que o entendimento dele foi um
29
Competncia 01
tanto ruim e sua visibilidade era muito clara.

O entendimento do site foi...
Muito
Um tanto
Nenhum
Um tanto
Muito
Boa
Clara
Ruim
Escura
As imagens que foram exibidas pareciam...
Muito
Um tanto
Nenhum
Um tanto
Granuladas
Realistas
Inacreditveis
Distorcidas
Muito
Ntidas
Irreais
Crveis
Precisas
Voc sentiu que o ambiente era...
Muito
Pequeno
Vazio
Claro
Permanente
Monocromtico
Um tanto
Nenhum Um tanto
Muito
Grande
Cheio
Escuro
Temporrio
Colorido
Faa esta tabela com alguns sites concorrentes. Capture a tela inicial do site que voc verificou
e anexe acima da tabela preenchida. Ao final, verifique as impresses para a maioria dos sites e
cada caracterstica.
Sabendo por exemplo que a maioria dos sites dos concorrentes transmite sensaes, como
grande, cheio e escuro; podemos ou seguir a tendncia por ser uma caracterstica que agrada
ao pblico-alvo, ou inovar fazendo o contrrio. Passando uma ideia de pequeno, vazio e claro.
Use o bom senso.
30
Competncia 01
Visite o site de ao menos trs concorrentes. Capture a tela com a pgina inicial com
printscreen e cole em seu documento, abaixo do ttulo CONCORRENTES. Preencha a tabela
para cada um deles. Depois, escreva um resumo mencionando cada caracterstica
observada no site dos concorrentes.
Com isso, possuiremos uma boa quantidade de informao sobre o domnio do problema e
podemos buscar uma soluo para ele. Lembre-se de que nesta etapa de Definio, quanto
mais informao melhor. Na prxima competncia, veremos a segunda etapa de nosso
projeto, a fase Arquitetural.
31
Competncia 02
2.Competncia 02 | Planejar um Website

Anteriormente, vimos que a fase Arquitetural do DADI complementa a fase anterior, a
Definio. Antes de darmos continuidade a nossa disciplina, lembre-se de que no basta ler ou
assistir s vdeo-aulas. Nosso aprendizado mais eficiente quando fazemos exerccios para
praticar. Aproveite as oportunidades que aparecerem e d o seu melhor. Vamos l!
A fase Arquitetural do processo de web design tem o objetivo de organizar os dados coletados,
selecionar os de maior importncia e distribuir o contedo entregue pelo cliente nas vrias
pginas que vo compor o site. Imagine como seria pouco agradvel visitar um site onde o
contedo est todo misturado e em pginas gigantes que cansam s de olhar. No queremos
que os usurios de nosso site fujam. Por isso, dedicamos um bom tempo nesta parte.
No incio desta nova fase voc vai precisar do contedo do site, que certamente construiu na
fase anterior, durante o planejamento. Assim, voc poder projetar um site eficiente para o
contedo obtido. A fase Arquitetural permite, ento, que o web design utilize todos os dados
coletados, analise todo o contedo que o cliente entregou e comece a separar todo o contedo
em grupos que vo compor as diversas pginas do site.
Neste processo, voc deve agrupar cada pedao de informao formando grupos que tm mais
afinidade. No se preocupe com os assuntos diferentes coletados, eles vo aparecendo
medida que voc for agrupando. Se um grupo estiver com muito contedo, subdivida. A ideia
fugir da entropia, da confuso.
Existe um conceito que diz que todo sistema que no submetido a uma fora que a
organiza, tende a ser uma desordem, ou seja, uma entropia.
Vejamos um exemplo do processo de criao de grupos, baseado na histria do empresrio

sertanejo e o seu site, que vimos na competncia anterior. Nosso empresrio tem pressa em
32
Competncia 02
ver algo pronto e no entende que no podemos fazer um layout sem saber qual o contedo
que ter. Com muita conversa e jeitinho, ele aceita e solicita para sua assistente passar toda a
informao pblica do artista para voc. Descobrimos que o site possui pouco contedo, mas
existem muitas fotos e a agenda de shows. Agrupe todo o contedo em agregados menores.
Neste caso, temos informaes pessoais sobre o artista, sua discografia, muitas fotos e uma
agenda relativamente grande, sem esquecer de que ainda teremos que colocar um vdeo e um
meio de contato. Veja abaixo.
Biografia
Fotos Show
Agenda
Discografia
Fotos Backstage
Locais de Show
Fotos Artista
Promoo
Contato
Videoclipe
Twitter
Facebook
Instagram
Concurso
Recados dos Fs
Fotos dos Fs
Cartas dos Fs
Contratar Show
Usando essas informaes obtidas, podemos, por exemplo, criar os seguintes grupos.
SOBRE O ARTISTA
FOTOGRAFIA
INFORMAES
Biografia
Fotos Show
Agenda
Discografia
Fotos Backstage
Locais de Show
Videoclipe
Fotos Artista
Contato
Instagram
Fotos dos Fs
Recados dos Fs
Facebook
Concurso
Twitter
Contratar Show
Cartas dos Fs
33
Competncia 02
Ok! Agora vamos exercitar usando as informaes que voc coletou na Competncia
anterior. Para melhorar o entendimento sobre classificao de dados coletados e grupos,
junte todo o material que voc pesquisou e procure algum contedo do negcio que voc
escolheu anteriormente. Se seu amigo puder lhe fornecer o contedo, melhor. Mas, caso
contrrio, procure algum contedo similar pelos sites na internet. Junte uma boa
quantidade de informao sobre o assunto. Pode ser em vrios sites. Quando terminar,
comece a agrupar a informao. Fragmente o mximo possvel. Depois, verifique em cada
grupo a palavra-chave que sintetiza aquelas informaes.
2.1 Card sorting

Existem vrias metodologias para classificao de informao. Uma das mais conhecidas o
Card Sorting. Utilizaremos essa tcnica para classificar as palavras-chaves. Seria o mesmo que
reunir grupos. Voc pode se perguntar: mas no j fizemos isso? Pois . Fizemos do nosso
ponto de vista, mas precisamos criar algo do ponto de vista do empresrio que nos contratou.
Assim, o que achamos melhor para ns pode no ser para nossos usurios. Nosso pblico-alvo
pode no ter tanta intimidade com a palavra e-mail e simplesmente ignorar uma parte vital
de nosso projeto. Para eles, algo como Mande-nos uma mensagem seria muito mais
compreensvel. Alm disso, podemos descobrir pelo card sorting que o que achamos
conveniente separar seja um empecilho para o usurio.
O card sorting pode ser aberto ou fechado. Card sorting aberto quando a nossa amostra tem
que achar o tema de relacionamento dos cartes. Amostra um grupo de pessoas que
representa nosso pblico-alvo, e por isso deve pertencer a esse pblico. O nmero de pessoas
da amostra varia: quanto mais, melhor. O card sorting fechado quando j temos uma boa
ideia dos temas e apresentamos a amostra. Nesse caso, ela classifica de acordo com nossos
critrios. E qual usar?
Quando no entendemos o domnio do problema, ou no temos certeza, podemos buscar os
temas atravs da amostra utilizando card sorting aberto. Isso nos dar uma pista de como o
pblico-alvo entende aquele contedo. Mas se conhecemos bem o domnio, at somos parte
34
Competncia 02
desse pblico-alvo, podemos nos arriscar em definir os temas. O card sorting pode confirmar
ou negar o que imaginamos. E como se faz isso?
Vamos utilizar o card sorting fechado por ser mais simples para os usurios. Comeamos
fazendo cartes, e em cada um deles escrevemos uma palavra da nossa lista e os temas. Afinal,
as pessoas podem associar um tema a outro. Tambm devemos ter folhas de papel, cada folha
escrita com o nome de um tema. Procuramos, ento, as pessoas que faro parte de nossa
amostra e preferencialmente, que tero algum tipo de contato com o site que est sendo
construdo. Em separado, a cada uma entregamos os cartes e pedimos para colocar em um
tema que ache adequado. Diga-lhe que pode sugerir novos temas ou criticar a existncia de
uma palavra ou tema. Qualquer coisa que a amostra diga pode ser importante para o sucesso
do site. Registre o resultado de cada pessoa. Assim voc ter a impresso de diversas pessoas
sobre como cada item pode ser agrupado e categorizado dentro do site.
A figura abaixo mostra como ficaria o resultado final de um card sorting feito por uma pessoa.
Em azul ns temos as categorias ou grupos e em amarelo os itens dentro de cada um.
Figura 7 - Exemplo de Card Sorting

Fonte: https://m2.behance.net/rendition/pm/20367713/disp/5e32958693b9049ca0e896afc20
4aaa2.JPG.
35
Competncia 02
Agora sua vez! Faa os cartes baseados em sua lista de itens coletados para o seu site e
os papeis com os temas ou grupos que voc imagina criar. Procure dez ou mais pessoas.
Pea-lhes para classificar e dar sugestes de como cada item pode ser agrupado. Anote e
registre a classificao dos usurios.
2.1.1 Anlise de dados
Finalizado o nosso Card Sorting, vamos terminar esta parte verificando como a amostra
percebe o contedo. Contabilize a quantidade de cada palavra em cada tema. As que tiverem
maior quantidade sero as subpginas de nosso site. Os temas sero as pginas principais que
do acesso ao grupo de informao.
Vamos usar nosso exemplo e ilustrar um pouco mais a situao. Imagine que a nossa amostra
de fs de msica sertaneja no foi difcil de encontrar. Poderamos fazer com muitas pessoas e
diminuir o risco de erro ou confuso, mas nos limitamos ao tempo que tivemos para isso.
Conseguimos alguns brindes de divulgao com o empresrio e distribumos para quem
participou do card sorting. As pessoas classificaram a informao que j tnhamos coletado e
ainda dividiram alguns itens formando mais informao para o site. O resultado est
apresentado na tabela abaixo.
ARTISTA
FOTOGRAFIA
FS
MDIA
SOCIAL
Biografia
Fotos Show
Recados dos Fs
Discografia
Instagram
Contato
Fotos Backstage
Cartas dos Fs
Videoclipes
Facebook
Agenda
Fotos Artista
Concurso
Contratar Show
Fotos dos Fs
Twitter
Youtube
Tabela 1 Resultado da anlise do card sorting.

A anlise mostra que uma pgina sobre o cantor seria a pgina inicial. Durante o card sorting
algumas pessoas perceberam a falta de um canal no YouTube e sugeriram o acrscimo. Outra
36
Competncia 02
ideia foi relativa ao contedo dos fs. Eles procuraram um tema F que no havamos
percebido antes e, por isso, os rtulos sobre ele no aparecem.
Agora, hora de experimentar a metodologia. Faa a anlise em cima do card sorting que
voc fez anteriormente. Escreva uma descrio com todas as observaes relevantes que a
amostra forneceu. Tanto do que voc percebeu na classificao que fizeram, quanto nas
ideias sugeridas de novos temas, cartes e crticas.
2.2 Sistema de navegao
At aqui percebemos que um site pode conter um grande nmero de contedo para ser
organizado e apresentado aos seus usurios. Voc pode ter notado que muitas vezes, mesmo
com o uso de tcnicas eficientes de organizao de contedos, a distribuio de elementos
pode no ser eficiente o suficiente para que todas as pessoas possam entender a organizao
do site. por isso que precisamos de Sistemas de Navegao.
Existe uma coleo de elementos de navegao que j so conhecidos dos usurios da web.
Podemos utiliz-los em nosso site para tornar a navegao mais eficiente. Como eles existem
em diversos sites, o usurio s tem que aprend-los uma vez e se concentrar na informao e
no na navegao. Dentre os elementos conhecidos esto:
Marca;
Barra de navegao;
Menu drop-down;
Bread crumb;
Contedo cruzado;
Erro 404;
Passos;
Paginao;
Abas;
37
Competncia 02
Camadas;
Nuvens de tags.
Mas no vamos apenas copiar algo que j existe. Voc deve usar o bom senso para saber o que
usar e quando usar. Com a experincia, a tarefa ficar cada vez mais fcil. Abaixo, temos uma
lista de princpios que podem lhe ajudar a construir o seu site:
Apreensvel: fcil de aprender;
Consistente: no apresentar erros ou falhas;
Reagente: responder apropriadamente aos comandos do usurio;
Propositivo: indicar alternativas claras de navegao;
Econmico: chegar ao que quer com menos cliques;
Claro: ser de fcil entendimento;
Adequado: o usurio deve sentir que aquele site foi feito para ele.
Agora, vamos ver detalhes sobre cada um dos elementos de navegao que conhecemos neste
captulo.
2.2.1 Logotipo
Voc tambm pode encontrar como marca e logomarca. O uso mais comum do logotipo
como uma imagem no canto superior esquerdo. Ajuda a identificar o site e serve de link para
retornar primeira pgina do site. Chamamos esta pgina de Home.
38
Competncia 02
Figura 8 Observe o retngulo vermelho no canto superior esquerdo destacando a marca do Walmart.
Fonte: www.walmart.com.br/
2.2.2 Barra de navegao

A barra de navegao pode ser global ou local. Na barra global temos os temas mais
abrangentes, mais superiores na hierarquia. A partir dele temos a barra local que classifica os
subtemas daquele tema. As duas barras normalmente funcionam em conjunto quando temos
uma subclassificao.
Figura 9 O retngulo vermelho horizontal a barra de navegao global. Ao entrar na sesso

Eletrnicos vemos no lado esquerdo a barra de navegao local.
Fonte: www.walmart.com.br/departamento/eletronicos/317
39
Competncia 02
2.2.3 Menu Drop-Down
Ao posicionarmos o ponteiro do mouse em cima de uma sesso, apresentado um menu perto

do ponteiro com opes contextualizadas.
Figura 10 Neste caso, vemos que alm de um menu, a caixa oferece um produto de maior aceitao.
2.2.4. Bread crumb

A traduo literal migalhas de po, mas no significa que vamos comer em cima do teclado.
Este termo foi utilizado porque na histria de Joo e Maria, coletada pelos irmos Grimm, uma
trilha de migalhas de po foi deixada para que eles pudessem achar o caminho de volta. A ideia
mostrar ao usurio onde ele est e quais caminhos seguiu atravs de links.
Figura 11 Observe que o bread crumb comea com um cone de uma casa, que leva a home, temos
ento a sesso Eletrnicos e estamos na sesso TV 3D.
Fonte: www.walmart.com.br/categoria/eletronicos/tv-3d/?fq=C:317/1722/&PS=20
40
Competncia 02
2.2.5 Contedo cruzado
Quando o usurio est em uma pgina, uma srie de links oferecida como opes para
continuar a leitura. Normalmente, um sistema programado verifica o comportamento do
usurio para realizar uma sugesto. Mas nada impede da sugesto ser feita com links estticos.
Figura 12 Observe que estamos vendo um produto e na mesma pgina, logo abaixo, so sugeridos os links
para outros produtos relacionados.
Fonte: www.walmart.com.br/produto/Eletronicos/TV-3D-LG/LG/380832-TV-LED-32LA613B---Preta---LG
2.2.6 Erro 404
Quando um servidor no encontra a pgina solicitada pelo usurio gerado um erro de cdigo
404. Os servidores permitem configurar uma pgina para dar essa informao ao usurio.
Tratando a pgina com a identidade visual do site mostramos seriedade ao servio.
41
Competncia 02
Figura 13 Esta pgina de Erro 404 transmite a mensagem de uma forma mais simptica.
Fonte: www.walmart.com.br/produto/Eletronicos/TV-3D-LG/LG/380832
A pgina com o erro deve ser nomeada de uma forma aceita pelo servidor. Normalmente a
pgina a 404.html. Faa esta pgina e a deixe na raiz de seu site. Caso ela no exista, a
pgina padro do servidor para este erro mostrada.
2.2.7. Passos
Quando a informao que o usurio quer deve ser obtida seguindo uma sequncia de pginas,
devemos informar a ele quais so os passos, em que passo est e quanto falta para conseguir
finalizar. Isto o que acontece quando vamos encerrar uma compra em um site de comrcio
eletrnico.
42
Competncia 02
Figura 14 Para finalizarmos uma compra necessrio primeiro nos identificarmos, informarmos o endereo
de entrega e a forma de pagamento.
Fonte: www2.walmart.com.br/checkout/content/#chooseAddress
2.2.8 Paginao
Quando a informao solicitada pelo usurio muito grande, podemos dividir em pginas e
oferecer controles para avanar, retroceder e selecionar uma determinada pgina.
Figura 15 O retngulo de contorno preto destaca os controles de paginao.

Fonte: http://busca.americanas.com.br/busca.php?q=tablet
43
Competncia 02
2.2.9 Abas
As abas oferecem um acesso rpido a uma sesso, alm de informar quais existem e onde o
usurio est. uma soluo de navegao bem elegante quando no temos muitas sesses.
Figura 16 Na exibio do produto as abas so exibidas para mostrar detalhes informacionais sobre ele.
Fonte: www.walmart.com.br/produto/Tablets/Tablets-KIDS/Oregon/403042-Tablet-Meep-Oregon
2.2.10 Camadas
Em alguns momentos uma determinada informao necessria, ou se destaca perante as
outras. Quando queremos sobrepor uma informao s outras, podemos utilizar a navegao
em camadas. Dessa forma, temos duas camadas uma em cima da outra. Na camada superior a
informao mais visvel que na camada inferior. Observe o efeito na Figura 17.
Figura 17 Neste exemplo, para prosseguir com o processo de compra exigida a identificao do usurio.
Fonte: www2.walmart.com.br/checkout/content/#chooseAddress
44
Competncia 02
2.2.11. Nuvem de Tags

Normalmente utilizado em blogs que categorizam o contedo atravs de palavras-chaves, a
nuvem de tags exibe um conjunto de palavras mais acessadas, variando seu tamanho pela
quantidade de acesso. Para sua produo necessrio que ela seja programada.
Figura 18 Nuvem de tags. Cada palavra um link para uma pesquisa sobre aquela palavra no blog.
Fonte: http://markun.com.br/memoriacoletiva/wp-content/uploads/2011/02/tags2702.png
2.3 Sistema de busca
A busca uma alternativa ao sistema de navegao que vimos anteriormente. O usurio digita
uma palavra-chave, feita uma busca em um banco de dados e retornado os links relacionados
a ela. Este tipo de sistema deve ser programado e no est no escopo deste curso. Mas existem
empresas que oferecem o servio, tanto gratuito quanto pago. Cada empresa tem sua forma de
instalao do sistema em seu site e no seria possvel descrev-las aqui. A escolha de um
servio tambm no conveniente pela velocidade com que servios nascem e morrem na
45
Competncia 02
internet. Mas se for to importante para seu cliente, faa uma pesquisa e estude na pgina do
desenvolvedor o modo como deve ser instalado o servio.
Figura 19 Campo para busca no site. O resultado uma listagem de links relacionados.
Com isto finalizamos esta competncia. Estude as formas de navegao e decida

adequadamente qual delas utilizar. No necessrio usar todas e, quanto menos contedo,
menos necessrias elas sero. Lembre-se de que em design menos mais. Mas no deixe seu
site carente de formas de navegao.
46
Competncia 03
3.Competncia 03 | Conhecer os Modelos de Representao e

Organizao de Website
Nesta terceira competncia, vamos definir a estrutura do site utilizando conceitos de
arquitetura. Mas no a arquitetura de construes e sim a arquitetura da informao.
Arquitetura da informao a cincia que estuda a disposio dos elementos na pgina, a

estrutura de navegao e o contedo delas. Existem vrios livros com tcnicas e metodologias
sobre o assunto. Mas como nosso tempo para esta competncia limitado, iremos focar em
duas das mais importantes: Mapa do site e Fluxo de Navegao.
3.1 Mapa do site
O mapa do site ajuda a reconhecer a estrutura geral do site webs e aplicaes. Quanto mais
contedo tem um site, mais complicado navegar por ele pode ser. Por isso, o mapa do site
ajuda o usurio na identificao de toda estrutura do site e das conexes entre as pginas.
Podemos utilizar o mapa do site para explicar equipe que ir desenvolver o site como est
organizada a sua estrutura, alm disso, tambm podemos mostrar o esquema para o cliente,
para que ele possa compreender a complexidade do projeto. Ainda podemos usar o mapa do
site no prprio site para ajudar o usurio na busca da localizao de um determinado contedo.
O mapa do site uma maneira visual e simples de exibir as partes de um website como um
todo, fornecendo um panorama completo de navegao e, em alguns casos, mostrando todas
as conexes de cada pgina.
Quer aprender mais e ser um profissional melhor? Acesse o link abaixo para ler mais sobre
Arquitetura de Informao.
http://pt.wikipedia.org/wiki/Arquitetura_de_informa%C3%A7%C3%A3o
47
Competncia 03
Veja abaixo um exemplo de mapa de site, mostrado dois tipos de visualizao: hierrquico e em
tpicos.
Figura 20 Mapa do site de um estdio de design no formato hierrquico.

48
Competncia 03
Figura 21 Mesmo mapa do site da Figura 21, em formato tpicos.

Observe pelos exemplos que atravs de uma representao grfica entendemos rapidamente a
estrutura do site. Os elementos ou as pginas podem ser dispostos de maneira hierrquica ou
ainda mostrados em uma estrutura de tpicos.
Existem alguns aplicativos online gratuitos que voc pode utilizar para fazer seu mapa de
site. O Write Maps um deles. Acesse o link abaixo para experiment-lo. As imagens
ilustrativas desta sesso foram produzidas nele.
http://writemaps.com/
Vejamos um exemplo prtico de criao do mapa do site baseado na tabela resultante de nossa
anlise no card sorting. No nosso cenrio, fizemos um mapa do site e apresentamos para nosso
cliente empresrio. Assim, ele reconheceu as novas ideias e at se surpreendeu, pois achava
que era mais simples, e ajudou no reconhecimento do valor.
49
Competncia 03
Figura 22 Exemplo de mapa do site.

Que tal exercitarmos o contedo com mais um exemplo? Use as informaes coletadas no
seu card sorting e crie um mapa do site, mostrando como a sua pgina inicial se liga s
pginas secundrias e como estas se ligam s demais pginas.
Uma vez que sabemos a quantidade de pginas e como elas esto dispostas temos que
entender o fluxo de navegao.
3.2 Fluxo de navegao
Tambm conhecido como Fluxo de Tarefa uma tcnica que identifica caminhos ou processos
que o usurio far enquanto avana na utilizao do website ou sistema.
50
Competncia 03
Figura 23 Exemplo de Fluxo de Tarefa

Fonte: http://iainstitute.org/pt/translations/garrett_visvocab-fig07.gif
Em 2000, Jesse James Garrett, iniciou o desenvolvimento de uma biblioteca de vocbulos

visuais. Seu objetivo era ter uma formalizao de diagramao para fluxos de navegao.
Esta biblioteca de vocbulos visuais simplesmente um conjunto de smbolos que compem

um diagrama, baseado em um modelo conceitual para prover:
Caminhos para o usurio do website;
A movimentao do usurio ao longo desses caminhos atravs de aes;
Aes que geram resultados na navegao.
Agora, vamos ver cada um destes smbolos para gerarmos nossos diagramas.
3.2.1 Pginas, arquivos e conjuntos
A pgina a unidade bsica de experincia do usurio na Web. No diagrama representada

como um retngulo simples. Ela corresponde ao que o usurio recebe em seu navegador e
pode ser feita das seguintes maneiras:
Atravs de vrios arquivos HTML (como no caso de uma pgina que contm um iframe -
veremos em outra competncia o que so iframes).
Ou quando temos um sistema programado (tomando como exemplo o PHP, vrios
51
Competncia 03
arquivos PHP podem produzir apenas uma pgina). Ento, este retngulo seria a representao
da pgina que o usurio v.
Mas, s vezes, o usurio pode solicitar o download de um arquivo que ser visto fora do
navegador. Os anexos de e-mail so um bom exemplo desse tipo de documento. Chamamos
esse tipo de documento de 'Arquivo' e para represent-los utilizado o cone de documento
com uma orelha dobrada.
Para representar um grupo de pginas com a mesma funcionalidade, utilizamos o smbolo de

pilha de pginas. Da mesma forma com vrios arquivos.
Para distinguir as pginas e os arquivos no diagrama, utilizamos rtulos com uma identificao
para cada um. Apenas escreva o nome do identificador no meio.
Observe os exemplos na Figura 24 e um exemplo com rtulos na Figura 23.
Figura 24 Da esquerda para direita: pgina, arquivo, conjunto de pginas e conjunto de

arquivos.
3.2.2. Conectores e setas
Os hiperlinks que levam de uma pgina a outra so simbolizados no diagrama por linhas que
conectam os elementos. A forma hierrquica mais organizada e pode demonstrar que o
usurio pode ir da pgina de cima para as opes abaixo.
52
Competncia 03
Figura 25 Da esquerda para a direita: a forma hierrquica, tambm chamada de rvore; e a forma
aleatria.
Quando temos uma relao direcionada, como no exemplo da competncia anterior, no item
3.3.7 PASSOS, onde o usurio segue em uma direo, utilizamos uma seta para demonstrar
isso.
Quando o direcionamento forado, ou seja, obrigatrio seguir em um sentido apenas,

utiliza-se uma barra cortando a seta no ponto sem retorno.
Se o conector termina em outro conector, colocamos a seta no meio inicial do conector.

Observe o exemplo na Figura 26.
Figura 26 esquerda, acima: conector com seta indicando o provvel caminho do usurio.
esquerda, abaixo: caminho com impossibilidade de retorno. direita: conector com seta que termina
em outro conector.
Podemos tambm rotular os conectores para tornar mais clara a relao. No entanto, deve-se
utilizar de forma moderada.
53
Competncia 03
Figura 27 Exemplos de rtulos em conectores.

3.2.3. Conjunto corrente
Voc j clicou em um link em que apareceu no s a pgina, mas tambm um pop-up, ou at

mesmo outra pgina? Acredito que para a maioria dos usurios da web isso aconteceu. Quando
temos a situao descrita, a representao se d atravs de um semicrculo em cima do
conector. Veja o exemplo na Figura 28.
Figura 28 - Diagrama que mostra uma pgina com instrues sendo

abertas e um arquivo sendo baixado. Tudo isso aconteceu com apenas um
clique em um link na pgina acima.
3.2.4 Separaes
s vezes, o diagrama pode ficar gigante e no caber no papel. Podemos interromper um

diagrama por falta de espao e seguir em outra folha atravs de pontos de continuao. Os
54
Competncia 03
pontos so representados por colchetes com um rtulo que identifica a continuidade. Temos
um exemplo simples na Figura 29.
Figura 29 esquerda, temos um diagrama com um ponto de continuao indicando a sequncia na

pgina D, em outro diagrama. direita, temos a continuao do diagrama e outro ponto de continuao
indicando a volta.
3.2.5 reas e reas iterativas
Para representar um grupo de pginas que possui um ou mais atributos comuns, como um
determinado tratamento esttico ou o aparecimento de uma mensagem, contornamos as
pginas com um retngulo de cantos arredondados e um rtulo.
Figura 30 Exemplo de uma rea com uma janela pop-up em comum.

Voc pode ter um catlogo de produtos em que cada produto tem vrias pginas associadas a
ele. Voc pode desenhar uma estrutura para cada produto, mas por que perder tempo? Em vez
disso, use o elemento de rea iterativa, que um conjunto de retngulos de bordas
arredondadas.
55
Competncia 03
Figura 31- Um exemplo de uso de rea iterativa para representar uma estrutura que se repete
num catlogo de produtos.
3.2.6 Sistemas programados
Este curso se limita ao projeto de pginas estticas, como vimos na introduo. No entanto, o
web design pode participar de um projeto onde programadores desenvolvem um sistema que
gera as pginas para o usurio. Nesse caso, conhecer conceitos de programao, como
estruturas condicionais, torna-se necessrio. Como no faz parte do escopo desta disciplina,
no abordamos os vocbulos referentes ao assunto.
Voc pode ampliar seus conhecimentos, lendo o artigo original em portugus e descobrindo
os vocbulos para sistemas web neste link:
http://iainstitute.org/pt/translations/000332.html
3.2.7 Exemplo de diagrama
Dando continuidade a nossa sequncia de exemplos, abaixo temos o diagrama feito para o site
de nosso cantor. Talvez voc tenha at percebido que no colocamos um vocbulo referente ao
arquivo de vdeo do cantor, que o nosso empresrio quer tanto mostrar. Isto acontece porque
no vamos dispor o arquivo para download por conta dos diretos autorais. Planejamos mostrlo na pgina inicial e, por isso, tanto a pgina principal quanto o vdeo esto representados
como o contedo recebido no vocbulo principal.
56
Competncia 03
Figura 32 Diagrama de nosso site de exemplo.

Existem diversas ferramentas que podem ser utilizadas para gerar um diagrama como o que
est acima. Uma boa ferramenta online e gratuita, a qual foi utilizada para gerar este
exemplo, pode ser acessada em www.gliffy.com
Agora com voc. D continuidade ao que voc j fez anteriormente, crie o mapa do seu
site e os fluxos de navegao. Caso no tenha feito as atividades anteriores, ter que
realiz-las antes que possa continuar. Lembre-se de que fazendo os exerccios que se
aprende de verdade.
57
Competncia 04
4.Competncia 04 | Elaborar Layouts para Web Sites

Voc se lembra da metodologia DADI? Essa metodologia dividida em algumas fases, como
vimos na primeira parte da disciplina. Vamos recordar?
Na fase de Definio entendemos o domnio do problema. Mergulhamos no universo ao qual

pertence o site que estamos construindo. quando entendemos o usurio do nosso site, o que
ele gosta ou no, como ele se comunica e quais comportamentos que tem. Tambm
entendemos nosso cliente, seus objetivos e desejos com relao ao site e os concorrentes, o
que todos tm e o que os diferenciam.
Na fase de Arquitetura pensamos na estrutura do site atravs de design participativo, onde o

usurio participa da criao. Podemos utilizar nesta etapa o card sorting. Tambm aprendemos
os tipos de estrutura de navegao mais populares. Fizemos nosso mapa do site e nosso
diagrama de fluxo de navegao, para ajudar a equipe de criao, nosso cliente e at ns
mesmos a entender a complexidade do site.
Agora, passamos para a fase de Design e vamos nos preocupar em como construir todo o
contedo do site da forma mais atrativa para o usurio. Iremos ver um pouco sobre
conhecimento esttico aqui. Mas este contedo extenso demais para ser abordado nestas
simples pginas, ento necessrio que voc sempre pesquise na web, buscando por sites que
acrescentem conhecimento nesta rea. Com o tempo, voc vai adquirir experincia e
desenvolver sensibilidade suficiente para criar mais e copiar menos solues estticas que
funcionem.
Voc pode at estar pensando que finalmente ir para a parte divertida, a de fazer o site. Mas a
coisa no funciona bem assim. Tambm existe uma metodologia utilizada pelos profissionais
para melhorar o processo de criao. Passaremos pela produo dos wireframes, layouts e
prottipo das pginas, antes de fazer o site. Vamos entender esses novos termos?
58
Competncia 04
Na metodologia DADI, a parte do projeto esttico, a criao da aparncia do site,

categorizada com Design, mas vimos durante nossa jornada que o ato de design vai bem
alm da aparncia.
O wireframe uma ilustrao que define a estrutura de cada pgina: onde ficar cada
pedao do contedo e elementos de navegao.
O layout est focado nos elementos visuais, a aparncia propriamente dita. O layout
permite que criemos uma ou mais imagens das pginas, como um quadro esttico, para
submeter aprovao do "gosto" do cliente. Definimos todos os elementos visuais e
tipogrficos que caracterizam a identidade visual e que sero colocadas no site: imagens,
ilustraes, grafismos, cores, formas, etc.
O prottipo normalmente utilizado em sites dinmicos, onde existe um sistema por
trs. Neste caso, a parte do designer web pode ser feita com relativa independncia antes de
ser anexada ao sistema. O prottipo tem a inteno de ser o mais prximo possvel do
resultado final, simulando uma funo ou outra, para sentir o resultado e descobrir brechas que
passaram despercebidas quando se planejava a soluo.
Ento, vamos comear o trabalho?
4.1 Wireframe
Na competncia anterior fizemos o esqueleto hierrquico do site inteiro. Nesta sesso vamos
fazer o esqueleto da pgina. Vamos utilizar uma tcnica chamada Wireframe. Na Wikipedia
temos a definio de que o wireframe de site web um guia visual bsico usado em design de
interface para sugerir a estrutura de um website e relacionamentos entre suas pginas. Um
wireframe web uma ilustrao semelhante do layout de elementos fundamentais na
interface. Normalmente, wireframes so concludos antes que qualquer trabalho artstico seja
desenvolvido.
59
Competncia 04
Saiba mais sobre wireframe em http://pt.wikipedia.org/wiki/Website_wireframe
A Figura 33 mostra um exemplo de wireframe web.
Figura 33 Exemplo de wireframe. Observe as reas de contedo e onde ficam os elementos de

navegao.
Fonte: http://f2.washington.edu/sm/sites/default/files/wire-frame.png
O wireframe pode ser feito utilizando lpis e papel ou algum programa grfico. Existem vrios
programas online destinados a esta finalidade, pagos e gratuitos. Alguns deles permitem
inclusive caractersticas interativas aos wireframes. Como voc far vai depender do estilo do
web designer. Observe na Figura 34 e 35 mais exemplos.
60
Competncia 04
Figura 34 Wireframe a mo.

Fonte: http://images.sixrevisions.com/2010/10/28-36_sketchedwireframe.jpg
Figura 35 Wireframe utilizando uma aplicao.

Fonte: http://images.sixrevisions.com/2010/10/28-37_polishedwireframe.png
Existem diversos softwares, muitos online e gratuitos, para o desenho do wireframe com uma
ou mais funcionalidade. Alguns at simulam o desenho a mo. Para os exemplos deste
caderno, foi utilizado o Creately em https://creately.com
61
Competncia 04
Apesar dos exemplos apresentarem uma pgina, vamos construir a quantidade de pginas que
forem necessrias para expor todo o contedo do site que estamos desenvolvendo. Quando o
wireframe para determinado contedo mudar, teremos que fazer outro, mesmo que possua
uma alterao pequena. s vezes, um site pode ser um hotsite, um site muito pequeno. Neste
caso podemos ter apenas um wireframe para todo contedo apresentado. Mas no se engane.
Pode parecer menos trabalhoso, mas no .
Com a experincia, o processo de wireframe ficar mais fcil e intuitivo. Mas quando se
iniciante, a tendncia reutilizar exemplos que funcionam e deixar para ser original mais tarde.
Visitar sites semelhantes e analisar sua estrutura a melhor maneira para acelerar esse
processo. Mas bom ter em mente o que procurar quando se visita outros sites. Para ajudar na
anlise dos sites que voc pesquisar, vamos abordar um pouco de gestalt.
4.1.1 Gestalt para websites
A maioria das pessoas v e entende as formas da mesma maneira. Os Princpios da Gestalt

analisam esse fenmeno. Gestalt tambm conhecida como psicologia da forma. Assim,
fundamental que o web design considere esses princpios na produo do website. A gestalt a
lgica cientfica por trs de tudo que orienta os designers a chegar a um grande projeto.
Para saber mais sobre gestalt leia em http://pt.wikipedia.org/wiki/Gestalt
4.1.1.1 O Princpio da Gestalt
Gestalt uma palavra alem que significa "a essncia ou forma de uma entidade configurada".
Esta definio pode ser a regra mais importante do design.
Se eu lhe pedisse para comear a fazer um site, provavelmente, voc comearia com um
62
Competncia 04
detalhe ou outro, como curvas, bordas, sombras, fontes, etc. No que esteja errado, mas se o
cliente no gostar, todo seu esforo foi jogado no lixo. Para levar vantagem na avaliao voc
precisa entender como o crebro processa a informao visual.
Quando os olhos percebem algo pela primeira vez, ele tenta entender a forma geral e depois se
preocupa com os detalhes. Vamos tentar entender essa ideia. Observe a Figura 36. Qual a
primeira coisa que voc percebe? Seria um senhor e uma senhora de frente um para o outro,
ou outra coisa?
Figura 36 O crebro tenta compreender o todo, percebendo a forma de um

ho-mem e uma mulher, posteriormente nota os detalhes e percebe dois
homens
de sombreiros, um deles tocando violo.
Fonte: https://cdn.tutsplus.com/webdesign/uploads/legacy/069_Gestalt/ges
talt _1.jpg
Os detalhes da pintura mostram outra imagem. Dois homens de sombreiro, um deles com um
vaso e outro com um violo, tocando em uma fonte com uma mulher escutando em frente a
uma casa.
Agora, vamos mostrar como os detalhes tm bem menos importncia que o todo. Observe as
duas imagens da Figura 37.
63
Competncia 04
Figura 37 Outra imagem onde o todo uma representao e as partes formam outra.
Fonte: https://cdn.tutsplus.com/webdesign/uploads/legacy/069_Gestalt/gestalt_2.jpg
primeira vista, as duas imagens podem parecer idnticas, no entanto, existem cinco
diferenas entre elas. As diferenas so to sutis que quase no tm impacto sobre o todo.
1.
O pssaro preto no canto superior esquerdo est olhando na direo contrria.
2.
O sombreiro do homem da esquerda diferente.
3.
A bengala do homem est invertida e um pouco mais escura.
4.
Os tijolos da calada na parte inferior so maiores na imagem da direita.
5.
A mulher est olhando na outra direo.
Isto acontece porque muito mais rpido perceber o todo do que entender todos os detalhes
para se extrair um significado. Agora, veja o monte de manchas em um papel branco da Figura
38. Consegue perceber algo?
64
Competncia 04
Figura 38 Imagem em preto e branco de manchas. O crebro busca

compreen-der e entende como um dlmata farejando uma calada.
Fonte: https://cdn.tutsplus.com/webdesign/uploads/legacy/069_Gestalt /gest
alt_4.jpg
Acredito que, se voc ficar analisando a imagem como um todo e no os detalhes, ir perceber
um dlmata farejando uma calada sombra de uma rvore. O todo mais forte que as partes,
ao menos inicialmente. a primeira impresso.
Com um website funciona da mesma forma. O projeto nunca identificado inicialmente pelas
suas partes, como o cabealho, a navegao, contedo, botes. O projeto visto como um
todo.
4.1.1.2 Aplicando a Gestalt
Treine sua viso para reconhecer a silhueta do website. Para lhe ajudar temos na Figura 39
alguns sites e suas respectivas silhuetas. A silhueta do site a primeira identificao que o
crebro far como forma do site. Alteraes tentando mudar qualquer coisa que no seja a
forma principal resultaro, mais ou menos, no mesmo design. O sentimento do cliente a este
respeito foi de que nada, ou quase nada foi feito. Agora treine seu reconhecimento da gestalt
estrutural.
65
Competncia 04
Figura 39 Silhueta de diversos sites.

Fonte: http://webdesign.tutsplus.com/articles/the-gestalt-principle-design-theory-for-web-designers-webdesign-1756
claro que nada impede voc de utilizar o mais seguro atualmente, que a forma quadrada, no
canto inferior direito da Figura 40. Mas modificando a silhueta do seu site, voc pode conseguir
um site criativo e singular. Comece com um recipiente onde os detalhes sero adicionados.
Uma casca estrutural que retrata seu projeto de forma global. Quando voc fizer isto e o cliente
estiver satisfeito com a estrutura, utilize o wireframe e trabalhe nos detalhes.
Agora que recebemos todo esse conhecimento, vamos utilizar o exemplo que j estamos
trabalhando h algum tempo, o do nosso cliente empresrio sertanejo, e fazer o wireframe do
site do cantor. Para isso, investigamos as silhuetas dos sites que ele nos deu de referncia e
inovamos fazendo algo bem diferente. Aproveitando o requisito de exibir um vdeo de
divulgao do cantor, colocaremos o vdeo como fundo da pgina e o texto acima dele no lado
direito. Ficar bem diferente dos concorrentes. Tenho certeza de que nosso cliente ir adorar.
A Figura 40 contm o wireframe para este tipo de site.
66
Competncia 04
Agora a sua vez. Faa os wireframes das pginas que possuem contedo diferente, como
texto, vdeo, imagens, informaes tabulares. Lembre-se de que, se o seu site possui apenas
um wireframe, voc s poder utilizar aquela diagramao. Caso precise de outras, significa
que voc errou na sua anlise de quantos wireframes seriam necessrios. Pense bem.
Figura 40 Wireframe do projeto de exemplo. Na pgina inicial ser exibido um vdeo com fundo da
pgina e nas outras pginas o vdeo ser substitudo por uma imagem grandiosa do cantor.
4.2 Layout
O layout uma representao visual da pgina. Ele contm os elementos estticos, formas,
cores, fontes, grafismos, entre outros que correspondem aparncia do site, mais ainda sem se
apresentar como um site funcional com hiperlinks e animaes. O layout normalmente feito
por cima da estrutura de wireframe.
Mas, antes de colocarmos a mo na massa, ou melhor, no lpis, e sair desenhando, vamos

compreender um pouco sobre aparncia e como as pessoas apreciam ou no a esttica de algo.
Esttica tem seu significado, mas no nosso contexto, quer dizer como a pgina percebida pelo
usurio.
67
Competncia 04
Esttica [...] estuda o julgamento e a percepo do que considerado belo, a produo das
emoes pelos fenmenos estticos [...]
Saiba mais em http://pt.wikipedia.org/wiki/Est%C3%A9tica
medida que o designer vai ganhando experincia, e adquirindo mais conhecimento, vai
aumentando sua compreenso nesta rea e ampliando sua biblioteca visual. Esta experincia
vai facilitando o trabalho de criao com o tempo. Ento, no comeo normal copiarmos uma
coisa ou outra que julgamos bonito, mas no podemos viver sempre atrs das criaes de
outros. Temos obrigao de sempre melhorar e sermos originais.
Vamos, ento, comear pelo bsico? Um site deve ter uma identidade visual. Isto quer dizer
que o conjunto de pginas do site deve conter uma srie de elementos que o caracterizem
como pertencentes a um contexto. Assim, o usurio sabe que ainda est naquele site e no em
outro ou, ento, que saiu do site e est em outro contexto. Uma identidade visual deve ser
uniforme. Ela muda o mnimo possvel para se adaptar ao contedo que estiliza.
Identidade visual o conjunto de elementos formais que representa visualmente, e de forma

sistematizada, um nome, ideia, produto, empresa, instituio ou servio.
Saiba mais em http://pt.wikipedia.org/wiki/Identidade_visual
68
Competncia 04
Figura 41 O site CSS Zen Garden como um museu. Ele expe vrias identidades visuais com
qualidade profissional para a mesma pgina. Seria como se a pgina trocasse de roupa se adequando
ao tema escolhido pelo autor.
Fonte: www.csszengarden.com/
Onde tem criatividade no existe receita. Assim, no temos uma frmula que resume o que
funciona ou no esteticamente em um site. No entanto, a experincia foi mostrando que
algumas coisas funcionam e outras no. No so regras, a originalidade de seu trabalho pode
estar justamente em se contrapor s dicas mostradas a seguir. Mas, para dar certo, voc tem
realmente que saber o que est fazendo. Ento, ao menos no incio da carreira profissional, no
custa seguir os conselhos que vamos citar a seguir.
4.2.1 Fontes complicadas
No utilize fontes que os usurios tero dificuldade para ler. Existe uma grande quantidade de
fontes diferentes e ornamentadas disposio. Caso voc utilize uma dessas fontes que
prejudique a leitura do contedo, estar sabotando o projeto do site. Como iniciante, no
arrisque. Principalmente agora em que as pginas web podem ser lidas em celulares que
possuem uma tela menor. Concentre-se em aprender quais fontes so melhores ou piores de
serem lidas. Simplicidade pode ser um elemento importante neste ponto.
69
Competncia 04
Figura 42 Na imagem estamos utilizando a fonte Old English Text MT toda em maiscula para mostrar a
dificuldade de leitura em fontes ornamentais.
4.2.2 Escolhas simples

Como o mercado oferece vrias fontes complicadas, utilize fontes simples. Encontre algumas
fontes que so fceis de serem lidas e aprenda a reconhecer quais funcionam melhor em telas
pequenas e que humor a fonte transmite. Algumas fontes so mais srias, outras mais
simpticas. A Arial uma excelente fonte para web. Experimente outras comparando com ela.
4.2.3 Pouco texto
Grande parte das pessoas tem horror a ler uma grande quantidade de texto. Principalmente
quando no precisam. E agora com a utilizao de dispositivos mveis como tablets e celulares
para acessar a web, isto se tornou uma preocupao.
4.2.4 Poucas fontes
Costumamos seguir uma regra bsica em design: Menos mais. Isto quer dizer que quanto
menos colocarmos, melhor fica. Um bom conselho utilizar apenas uma fonte.
Voc pode at fazer um grande projeto grfico com mais de um tipo de letra, mas, se voc est
comeando a aprender sobre design, no se iluda. Voc vai absorver muito mais se voc se
esforar para encontrar a fonte adequada para transmitir a mensagem do site e utilizar outros
aspectos como tamanho, alinhamento e at espaos em branco para enriquecer a aparncia.
70
Competncia 04
Figura 43 A utilizao de vrias fontes descaracteriza e complica o reconhecimento.

4.2.5 Escala Tipogrfica Modular
Com a produo se utilizando de ferramentas digitais, o designer ganhou um grande poder de

fazer um design ruim. Eu explico. Para a maioria das pessoas, todo esse poder s complica as
coisas. Oferece opes demais e a pessoa fica perdida em qual escolher, aumentando as
chances de fazer uma bobagem. Isto acontece com o tamanho das fontes. Para no errar, siga
uma escala harmnica. Como assim? Em uma identidade visual, utilize as fontes seguindo esta
escala de pixels: 5, 7, 9, 12, 16, 21, 28, 37, 50, 67 e 83. Esta escala possui uma razo de ser e vai
ajudar a harmonizar as relaes de tamanho entre os blocos de texto de sua pgina.
Caso tenha interesse em saber como esta srie foi produzida, acesse o link
http://webdesign.tutsplus.com/articles/how-to-establish-a-modular-typographic-scale-webdesign-14927 O texto est em ingls.
Figura 44 Escala tipogrfica modular.

Fonte: http://webdesign.tutsplus.com/articles/how-to-establish-a-modular-typographic-scale-webdesign-14927
71
Competncia 04
4.2.6 Nunca justifique o texto
Quando voc justifica um texto em ambos os lados, direito e esquerdo, o espao disponvel
entre as palavras estendido. A imprensa padronizou esta formatao para caracterizar os
blocos. S que, antigamente, o texto era pensado e projetado para ficar justificado e palavras
eram substitudas para alcanar este efeito. No entanto, para a web, a justificao causa
lacunas desagradveis que interrompem o fluxo de leitura. A aparncia da pgina existe para
melhorar a leitura do contedo disponibilizado.
Figura 45 O texto justificado interrompe o fluxo de leitura com lacunas desagradveis.

Fonte: https://s3.amazonaws.com/cms-assets.tutsplus.com/uploads/users/30/po
sts /194 44 image/ 9-win s-rivers.png
4.2.7 Utilize menos ornamentao
Lembra da nossa regra bsica menos mais? Ento, os elementos estticos da pgina esto
ali para tornar o contedo mais interessante. Todos os elementos competem por ateno em
uma pgina, mas o principal o contedo. Evite utilizar excesso de ornamentao. Basta ter um
bom motivo para colocar algo. Se voc no encontra esse motivo, talvez ele no seja
necessrio.
72
Competncia 04
Figura 46 Muitos detalhes podem atrapalhar ao invs de ajudar.

Fonte: Padro Science de Fabricio Marques, http://thepatternlibrary.com/
4.2.8 Defina a cor
Voc j percebeu que as marcas mais poderosas lembram uma cor? Por exemplo, o Twitter
(azul), o Youtube (vermelho), o Microsoft Excel (Verde). Uma cor domina estas marcas,
facilitando o reconhecimento. Escolha uma cor que retrate bem o seu projeto e deixe bem
marcante. Voc pode utilizar vrios tons e matizes dessa cor em conjunto.
Figura 47 O azul da marca do Twitter a cor dominante de suas pginas.

Fonte: https://twitter.com/
73
Competncia 04
4.2.9 Enxergue o invisvel
Todas as dicas anteriores tm a inteno de ajud-lo a simplificar suas decises para que voc
possa enxergar as coisas "invisveis" no design. Ou seja, as partes vazias de nosso layout so to
importantes quanto as que contm elementos. Assim, o vazio direciona a viso para os pontos
com elementos, simplificando o entendimento do contedo.
Afinal, somos avarentos cognitivos e nos distramos facilmente por coisas brilhantes, como
fontes e cores. Com isso, ignoramos os elementos realmente importantes, que fazem um
design limpo e coeso: o dimensionamento dos elementos, o relacionamento entre eles e a
quantidade de espaos em branco. Voc no faz ideia do quo poderoso um espao em
branco.
Para entender melhor a utilizao do espao em branco, leia este artigo

http://designechimarrao.com.br/a-importancia-da-area-de-respiro/
Estas regras foram originalmente escritas por David Kadavy e usadas como base para este
texto. Voc pode encontrar o original em ingls no link
http://webdesign.tutsplus.com/articles/9-quick-wins-for-halfway-decent-design--cms-19444
4.2.10 Consideraes
claro que todos os itens anteriores so dicas para ajudar o design iniciante. Quando voc
ganhar experincia poder ir experimentando com mais segurana, indo de encontro ao
conhecimento que foi exposto. Mas, por enquanto, seguir as dicas a melhor maneira de
aumentar suas chances de sucesso.
Vejamos um exemplo:
74
Competncia 04
Nosso cliente empresrio est muito ansioso para ver o site. Mas no podemos colocar o carro
na frente dos bois. Mostraremos para ele o layout para uma anlise. Se ele estiver incerto,
podemos montar um prottipo que vai ter alguns links funcionais e ele poder sentir melhor
nossa proposta. Caso ele aceite, podemos seguir adiante e fazer o site propriamente dito. A
Figura 48 mostra nossa proposta.
Figura 48 Layout do site. Compare com o wireframe do exemplo anterior e verifique a correspondncia entre elementos de navegao e contedo com a imagem.
4.3 Prototipao
Durante a carreira de um web designer nem todos os trabalhos sero simples. Pode acontecer
de uma empresa de desenvolvimento web contratar os servios de um web designer para que
ele d uma interface adequada a um sistema que est sendo desenvolvido por programadores.
Estes sistemas podem ter diversas telas e caractersticas inovadoras onde interfaces comuns e
consagradas no funcionam. Mas como saber? Como descobrir que aquilo que funcionou to
bem at agora, no serve para o sistema? Para isso, temos a prototipao.
A tcnica simula o sistema antes de ele funcionar. Colocamos em papel as estruturas de

navegao e utilizamos uma pequena amostra para testar a aplicao. O teste consiste em
75
Competncia 04
colocar o wireframe em papel na frente da pessoa e solicitar que ela faa determinada tarefa
como se fosse um sistema de verdade. Voc no deve ajudar, mas deve anotar qualquer
dificuldade que a pessoa tenha. O teste repete-se com vrias pessoas. Quantas puderem ou
forem necessrias. Se o problema se repetir em mais de uma, aquele wireframe deve ser
modificado. Uma dica, antes de iniciar o teste, informe pessoa que o que voc est testando
o sistema e no ela, para que ela no se constranja por no conseguir realizar a tarefa.
O YouTube possui diversas demonstraes de experincias de prototipao. Voc pode

encontrar facilmente, procurando vdeos com as palavras-chaves prototype paper.
Assista a uma demonstrao de prototipao de um sistema e de um jogo nos links abaixo.

www.youtube.com/watch?v=4WbxisFDYk4 www.youtube.com/watch?v=k-nfWQLmlMk
O prottipo no necessrio quando temos sistemas pequenos e comuns, mas se voc ficou na
dvida de que sua ideia original, bem inovadora, ser entendida pelas pessoas, vale a pena
realizar a prototipao para evitar decepes futuras. Sair bem mais barato do que ter que
refazer tudo depois de pronto.
Este o final da nossa competncia 4, na prxima competncia iremos conhecer os padres

web. Os padres so tecnologias que transformaro em realidade suas ideias. Daqui em diante
seu empenho ser mais cobrado do que nunca. Por isto, leia, releia se no entendeu, faa todos
os exerccios propostos, procure novas informaes na web, e tire suas dvidas no frum.
Chegou a hora de voc mostrar seu talento. Em cada competncia passada mostramos, de
pouquinho em pouquinho, um rico conhecimento sobre a metodologia do web design. Tudo
isto culminou aqui. Se voc no fez os exerccios anteriores, ainda tempo de fazer. Com eles
prontos, voc pode criar a soluo para aquele seu amigo que lhe ajudou na primeira
competncia. Faa o layout para submeter ao gosto do cliente. Utilize o wireframe do exerccio
anterior como base para construo da aparncia. Faa um layout que engaje as pessoas a
querer acess-lo.
76
Competncia 05
5.Competncia 05 | Conhecer os Padres Definidos pela W3C para

Representao e Criao de Websites
Na competncia anterior finalizamos a fase de Design da metodologia DADI. Devemos ter,
agora, a aparncia de todos os elementos de nosso site. J mostramos para o cliente como ia
ficar, refinamos o layout e, se necessrio, fizemos um prottipo. recomendado sempre testar
as coisas antes de colocar no mercado, no ? Agora, vamos transformar nosso produto em um
site real. Entramos na fase mais ligada construo agora.
Para iniciarmos, existe uma srie de siglas que so referentes s tecnologias que vamos usar e
que devemos conhecer, entre elas, W3C, HTML, CSS, JavaScript, DNS, DOCTYPE, entre outras.
Mas no se assuste. Iremos com calma e voc vai terminar conhecendo melhor todas essas
tecnologias.
No incio de nossa disciplina, l pela competncia 1, introduzimos voc um pouco no universo

do profissional web designer. Nesta competncia, iremos terminar este servio. Ento, vamos
l!
5.1 A estrutura da internet
Vimos na primeira competncia uma breve histria da internet. Agora, precisamos saber, por
alto, como ela funciona. Precisamos entender como que escrevemos um endereo de um site
e como posteriormente a pgina correta aparece em nosso navegador. O que ser que
acontece no meio disso tudo?
Sabemos que a internet uma rede de redes, e que cada rede que forma a internet pode
possuir computadores, celulares, impressoras, ou at outras redes, como em uma lan house.
um emaranhado de conexes que se assemelham a rodovias que ligam cidades e levam
produtos e servios de um lugar a outro.
77
Competncia 05
Para mais informaes sobre a internet, acesse http://pt.wikipedia.org/wiki/Internet
Figura 49 Mapa parcial da Internet em 15 de janeiro de 2005, baseado em dados da opte.org.

Fonte: www.opte.org/maps/
A estrutura da internet classificada como cliente/servidor. assim chamada porque

aplicaes, que so clientes, solicitam algo a aplicaes servidoras. Tanto uma como outra
funcionam em computadores, que esto em locais diferentes, mas conectados pela internet.
Para que eles possam se comunicar precisam de duas informaes: um endereo nico e uma
forma de comunicao. Assim, cada mquina possui um IP, Internet Protocol, como um CEP; e o
TCP, Transmission Control Protocolo, as regras de como os dados circulam na rede.
Assista no vdeo uma explicao sobre a estrutura da internet

www.youtube.com/watch?v=HNQD0qJ0TC4
78
Competncia 05
Dessa forma, vrios servios podem utilizar a internet para funcionar. O e-mail um deles. O email a troca de mensagens de forma assncrona. Isto quer dizer que a pessoa que recebe um
e-mail no precisa estar de prontido, esperando em frente ao computador, para receber a
mensagem, como acontece no telefone, que sncrono. O servio de e-mail tem aplicaes
clientes e aplicaes servidoras que gerenciam a troca de mensagens.
5.2 URL
Vimos tambm, na competncia 1, que a WWW no igual internet. A WWW utiliza a

internet como meio de trfego para servios que servem s pginas dos sites. Assim, ns
solicitamos uma pgina atravs de um endereo, acionamos um protocolo de comunicao
com o aplicativo que fornece a pgina e nosso navegador l o documento recebido e monta
seus elementos para que possamos ver. Observe na Figura 50 o passo a passo.
Figura 50 - Ilustrao que mostra os passos simplificados da solicitao de uma pgina web para
uma aplicao.
Fonte: prprio autor.
As pginas ficam hospedadas em um servidor web. O mais popular o Apache. Devemos
79
Competncia 05
contratar um servidor web para que possamos disponibilizar nosso site para o mundo. Alm
disso, precisamos de um endereo nico para ele. Este endereo chama-se URL, Uniform
Resource Locators.
Voc percebeu que apesar do IP ser um nmero, no digitamos nmeros no navegador para
solicitar uma pgina a um servidor web, e sim nomes. Bem mais fcil, n? Esse nome a URL,
um endereo para um determinado servio.
Figura 51 Navegador exibindo a pgina de busca da Google. A URL est na barra de navegao.
Observe na Figura 51 a URL do servio de busca do Google para o Brasil. O endereo que est l
o https://www.google.com.br e composto de vrias partes. Estas partes podem ser vistas
como o nome de pases, estados, cidades, bairros e ruas que o servio dos Correios utiliza para
entregar cartas e pacotes.
Vamos conhecer melhor estas partes?
https:// o protocolo para trfego de pginas web de forma segura. Quando no
precisa de segurana utilizado o http:// ;
www. o nome do host relacionado com o site. Existe uma discusso sobre a futura
80
Competncia 05
remoo desta parte. Voc pode encontrar alguns URLs que no possuem esta parte;
google. o nome do domnio. Domnio um conjunto de recursos relacionados;
com. a classificao do propsito do servio. Podemos ter edu. para servios de
educao, org. para organizaes no governamentais, entre muitos outros;
br/ refere-se localizao do servio. No caso br. Brasil e quando no possui
localizao refere-se aos Estados Unidos.
Estas partes so separadas por ponto e ao final temos uma barra. Aps a barra temos o
recurso. O recurso algum arquivo do site, podendo ser uma pgina html, imagem, arquivo de
vdeo, entre muitos outros, ou uma pasta onde est localizado o recurso.
muito importante que voc entenda muito bem estas partes. Observe alguns endereos web
e identifique as partes. Voc ter que escrever muitos desses endereos nas pginas que far.
5.3 URL absoluta e relativa
Ao escrevemos as pginas HTML utilizamos as URLs nos hiperlinks. Mas no precisamos

escrever a URL completa do recurso, que chamamos de absoluta. Podemos utilizar o pontoponto no incio da URL para copiar o que falta do endereo atual. Chamamos este endereo de
relativo.
Vamos ver alguns exemplos:
www.meusite.com.br/index.html
Endereo absoluto do recurso index.html que uma pgina HTML.
www.meusite.com.br/fotos/foto001.jpg
81
Competncia 05
Endereo absoluto do recurso foto001.jpg que est na pasta fotos.
O endereo relativo sempre relativo a outro recurso, geralmente uma pgina HTML. Vamos
adotar, neste nosso site de exemplo, que o ponto de partida a index.html do endereo acima.
O endereo relativo do recurso foto001.jpg ser:
../fotos/foto001.jpg
No caso os dois pontos consecutivos substituem http://www.meusite.com.br como um

coringa.
Este conhecimento de extrema importncia. Voc deve entend-lo perfeitamente para

prosseguir nas prximas competncias, porque atravs dessas URL que ligamos uma pgina a
outra com os hiperlinks. Se colocar o endereo errado, a pgina no ser encontrada e o
usurio receber uma mensagem de erro.
5.4 Registrando um DNS
O DNS significa Domain Name System. Cada site possui o seu domnio na internet como o
Google e o Facebook. Para um site ser publicado na internet precisa ser registrado. Cada pas
responsvel por este servio. Voc pode registrar seu domnio em http://registro.br/, como no
exemplo da Figura 52. Nele voc pode pesquisar se o domnio est disponvel e alugar este
domnio por um determinado tempo. O valor depende do tempo, sendo que tempos maiores
de um ano possuem desconto.
82
Competncia 05
Figura 52 Servio de registro de DNS no Brasil.

5.5 IDEs
Agora que voc j conhece um pouco sobre a web, vamos colocar a mo na massa. Voc pode
estar se perguntando, que programa podemos utilizar para construir pginas web?
Voc pode fazer um site web completo utilizando apenas o Bloco de Notas, Notepad, do
Windows, ou qualquer editor de texto, como no exemplo da Figura 53. No utilize o Word.
Neste caso melhor utilizar o Bloco de Notas por ser um editor mais simples.
Um arquivo HTML um texto que o navegador interpreta e monta para voc visualizar. Como
uma receita, so as instrues para preparar um bolo, por exemplo.
83
Competncia 05
Figura 53 Pgina HTML escrita no Bloco de Notas do Windows e sua exibio no navegador.
Escrever todas as pginas no Bloco de Notas funciona, mas outras aplicaes so especializadas
para este servio. Chamamos de IDE (Integrated Development Environment), um ambiente
integrado para desenvolvimento. Temos vrias IDEs gratuitas e pagas disponveis para
donwload. Veja uma lista com algumas gratuitas.
www.sublimetext.com/
Sublime Text 2 uma das mais conhecidas e populares do Mercado;
http://aptana.com/
Aptana uma IDE baseada em um ambiente de programao completo, que possui mais
recursos e consequentemente mais complicada.
Existem muitas outras, mas o mais importante saber que elas funcionam como um editor de
texto. Voc pode escolher aquele que mais lhe agrada. S atente que, no caso no Bloco de
Notas, voc deve salvar o seu arquivo com a extenso .html, para o navegador saber do que se
trata.
At aqui falamos muito sobre arquivos HTML. Mas voc sabe o que so estes arquivos? Antes
de explicarmos como eles so escritos, vamos exp-los de modo abrangente. Nas prximas
competncias eles sero abordados de forma mais especfica.
84
Competncia 05
5.6 W3C e os padres Web
A web s cresceu ao ponto que vemos hoje por conta dos padres e do fato de que eles so
abertos, ou seja, no possuem uma empresa como dona. No entanto, um corpo sem cabea
no sabe para onde ir. Isto quer dizer que alguma organizao precisa cuidar dos padres para
que eles possam cumprir seu propsito e evoluir cada vez mais.
Quem define e cuida dos padres web uma organizao chamada W3C, WWW Consortium.
Quem mantm esta organizao so grandes empresas que tm interesse que a web cresa e
evolua, como a IMB, Microsoft, Google, entre outras. Assim, a W3C define as regras dos
padres, e as empresas que desejam os seguem. O que isto quer dizer?
Vamos ver no caso do padro HTML. A W3C estuda e define como o HTML funciona para
construir documentos HTML. Ento, distribui um documento, como um PDF, contendo as
regras do padro. As empresas que desejam construir um navegador web utilizam o
documento para compor um navegador que sabe ler documentos HTML. Assim, todo
navegador web ir mostrar o HTML da mesma forma, pois todos seguem o mesmo padro.
Figura 54 Site da W3C em sua verso em portugus.

Fonte: www.w3c.br/
O HTML 5 um conjunto de novos padres compostos pelas verses mais atuais do HTML, CSS
85
Competncia 05
e JavaScript. Foi utilizado o nome HTML 5 para este conjunto por ser mais popular e facilitar a
publicidade. Existem muitos outros padres relacionados web, mas vamos focar nesta trade.
Ainda nesta competncia gostaria que voc tivesse um primeiro contato com as tecnologias.
Nada muito complicado. Apenas o incio de qualquer site. Assim, poderemos iniciar o
aprendizado de cada um dos padres j com um conhecimento prvio. Ser um exemplo bem
simples.
5.7 HTML
O HTML um acrnimo para Hipertext Makup Language, que significa linguagem de marcao
para hipertexto. Hipertexto nada mais que do que um texto fragmentado em pginas
conectadas por hiperlinks, e pode ser lido de forma no linear. Ou seja, voc comea a ler em
um lugar e se quiser pode parar de ler e seguir para outra pgina, fazendo seu prprio fluxo de
leitura.
O HTML serve para estruturar, hierarquizar e agora, com o HTML 5, contextualizar o contedo
daquela pgina. Neste caso, voc ter um contedo que ser exibido na pgina. Formataremos
uma estrutura com uma cabea e um corpo, depois vamos hierarquiz-la marcando os nveis
externos dos internos e, depois, poderemos contextualiz-lo para, por exemplo, o navegador
saber que aquele pedao de texto um menu e no um ttulo.
Observe que no falei nada sobre cores, imagens ilustrativas, brilhos e truques. Isso se deve
porque estilizar no o trabalho do HTML. Estilos um trabalho que pertence a outro
padro, o CSS. Mas, vamos com calma. Iremos fazer nossa primeira pgina, a pgina inicial.
Aquela que vemos pela primeira vez quando entramos em um domnio.
Esta primeira pgina comumente chamada index.html, mas pode ser default.html, ou at
possuir outra extenso, index.htm e default.htm. Mas o comum, e a que vamos utilizar aqui,
index.html. Tenha cuidado com a extenso. Se voc utilizar o Bloco de Notas do Windows, ele
ir salvar com a extenso .txt, mesmo que voc coloque .html. Ento, verifique se no seu
86
Competncia 05
arquivo no est escrito index.html.txt. Se tiver, voc ter que renomear para index.html. Para
evitar que isto acontea, ao renomear como index.html selecione a opo Todos os arquivos
no Tipo de Documento.
Comece criando uma pasta com o nome de seu projeto em um lugar fcil, pode ser na rea de
trabalho. Depois abra seu editor de texto escolhido e salve o arquivo dentro desta pasta com o
nome index.html. Quando colocamos uma URL no navegador e no colocamos o nome da
pgina, o servidor nos envia a index.html. bem prtico.
Observe na Figura 55 a pasta e o arquivo no Bloco de Notas.
Figura 55 Pasta do projeto cantor e pgina index.html na pasta. Observe que ainda
no escrevemos nada no documento.
Agora, copie o cdigo da Figura 56 no arquivo index.html. Explicaremos mais tarde cada uma
delas. Tenha cuidado de copiar exatamente igual. Caso erre alguma letra, a apresentao pode
no aparecer do mesmo jeito. Salve o arquivo.
87
Competncia 05
Figura 56 Cdigo inicial do arquivo index.html.

Vamos ver o resultado. Arraste o arquivo index.html para seu navegador. Isto ir abrir esta
pgina nele. Observe a Figura 57, se houver algo diferente pode ser algum problema de
digitao. Na maioria das vezes, quando estamos aprendendo, os erros so de digitao. Ento,
quando algo no sair como planejado, procure o erro letra por letra.
Figura 57 Apresentao no navegador do arquivo html de exemplo.

Observe que o documento foi apresentado com uma estilizao. A fonte de ttulo est em
negrito e em um tamanho maior, com alinhamento esquerda. O fundo da pgina branco e o
texto do pargrafo menor. O ttulo do texto tambm apresenta uma distncia do comeo da
pgina at a linha, e uma distncia esquerda e abaixo. Todas as caractersticas estticas foram
88
Competncia 05
definidas pelo navegador. Quando ele no encontra um estilo configurado para a pgina, ele
utiliza esse padro.
Para mudarmos o estilo, podemos fazer no prprio HTML, mas isto no seria profissional.
Vamos utilizar outro padro criado especialmente para este objetivo, o CSS.
5.8 CSS
CSS o acrnimo de Cascading Style Sheets, que em uma traduo livre seria folhas de estilo
em cascata. O motivo de ser em cascata porque uma folha se sobrepe a outra apenas nos
pontos que utilizamos, e sempre podemos acrescentar mais folhas por cima.
Vamos demonstrar isso. Faa um arquivo, estilo.css. Mais uma vez, tenha cuidado com a
extenso. Salve esse arquivo na pasta de nosso projeto. Observe a Figura 58 do meu exemplo.
Figura 58 O arquivo estilo.css na pasta do projeto.

Vamos configura a cor, o tamanho, a forma, a posio dos elementos do arquivo HTML. Copie o
texto da Figura 59 exatamente igual. Se algo sair errado, procure por erros de digitao. O CSS
89
Competncia 05
bem mais rigoroso do que HTML com relao a erros. Fique atento tambm s letras
maisculas e minsculas no CSS.
Figura 59 Contedo dos arquivos estilo.css e index.html.

Observe que tambm alteramos o arquivo index.html. Colocamos trs linhas que esto
destacadas em azul na Figura 60. Elas servem para amarrar aquela pgina quele estilo.
Assim, vrias pginas podem receber o mesmo estilo. Se mudarmos ele, todas recebem as
mudanas.
Compare o resultado com a imagem da Figura 57. Explicaremos como isso aconteceu em outra
competncia.
Figura 60 Pgina estilizada pelo CSS.

90
Competncia 05
Por enquanto o que vimos hoje suficiente. Se voc ainda no est seguro no que
aprendemos, faa este mesmo exemplo mais uma vez, para sentir o processo de
desenvolvimento. No iremos demonstrar o JavaScript, por enquanto, mas ele ir funcionar
bem parecido com o CSS. Por ele ser uma linguagem de programao, vai exigir uma ateno
maior. At a prxima competncia!
Lembre-se de que seres humanos aprendem repetindo. Ento, para exercitar, comece com
o site de seu amigo. Aquele que nos ajudou desde a primeira competncia. Faa a primeira
pgina e o primeiro estilo para a pgina dele. Utilize os exemplos desta competncia, mas
descubra como modificar o texto do ttulo e o texto do pargrafo.
91
Competncia 06
6.Competncia 06 | Formatar um Website Usando os mais Modernos

Padres de Marcao de Hipertexto
Agora que j sabemos o que so os padres, de onde vieram e at j experimentamos o
gostinho de fazer o primeiro site, vamos mergulhar para valer no primeiro padro, o HTML.
Iremos utilizar a verso mais atual do HTML na construo do site que trabalhamos at aqui,
competncia por competncia. Se por acaso voc pulou uma, ter que voltar e ler atentamente
para entend-la e depois continuar. Isso necessrio porque todo o caminho que percorremos
at aqui depende do anterior.
HTML 5 o conjunto de tecnologias: HTML, CSS e JavaScript em suas verses mais recentes. A
utilizao do termo HTML 5 no significa que tudo est apenas em um padro. Trata-se de um
truque publicitrio para melhorar sua adoo.
HTML 5 o conjunto de tecnologias: HTML, CSS e JavaScript em suas verses mais recentes.
A utilizao do termo HTML 5 no significa que tudo est apenas em um padro. Trata-se de
um truque publicitrio para melhorar sua adoo.
Nos prximos passos irei explicar como construir as pginas atravs de marcaes. Cada
marcao pode parecer simples, mas seu entendimento depende que voc exercite. Ento,
copie o exemplo, faa os exerccios que propusermos e experimente outras formas. A internet
est abarrotada de tutoriais e vdeos que podem lhe ajudar a ter o domnio do padro. Muita
gente at desenvolveu truques interessantes com os padres. Ento, tenha dedicao e
curiosidade que o resultado ser muito bom.
Vamos comear explicando que o HTML no deve ser utilizado para estilizar uma pgina. Por
estilizar quero dizer colocar cores, imagens, definir fontes e posies, ou seja, dar uma
aparncia agradvel ao contedo. Ela uma linguagem responsvel por estruturar, hierarquizar
92
Competncia 06
e, agora em sua nova verso, contextualizar a informao da pgina.
Estruturar significa que o documento ter um comeo, um meio e um fim. Hierarquizar quer
dizer que teremos um contedo organizado, como se fossem caixas dentro de caixas, dentro de
outras caixas e assim por diante... E por contextualizar temos que uma informao um ttulo e
no um pargrafo, nem um endereo. Assim, nosso documento ficar bem construdo para ser
utilizado pelo mundo.
6.1 TAGs
Conseguimos estas qualidades (estruturao, hierarquizao e contextualizao) atravs de

marcaes. Uma marcao tambm conhecida por tag. As tags marcam o incio e o fim de
um contedo. Veja o exemplo da Figura 61. Nela mostrada a estrutura da tag <p>. Esta tag
define um pargrafo. Observe que ela comea com uma tag de incio <p> e uma tag de
fechamento </p>. Todas as tags de fechamento possuem uma barra comum frente do nome
da tag. Porm, nem toda tag tem tag de incio e tag de fim, Por exemplo: <br />, <img />, entre
outras.
Figura 61 Estrutura da tag.

Vimos uma tag que possui um incio e um fim, classificadas como tags de bloco. Mas tambm
existem tags que no precisam de um fim. Elas podem marcar um local do documento. Por
exemplo, a tag <img />. Ela marca o local onde ser exibida uma imagem. Classificamos estas
tags como tags de linha. Tags em linha comeam e terminam em cada linha, colocando a barra
ao final da tag.
93
Competncia 06
Tenha muito cuidado com a escrita das tags. Um erro de digitao pode comprometer
completamente a estrutura. Ento, preste ateno nos smbolos < , > e na barra /. Muita
gente, quando est aprendendo, troca ou esquece. Quando algo der errado, verifique
caractere por caractere, at achar o erro.
6.1.1 Atributos
As tags precisam de outras informaes para ser complementadas, como por exemplo, a URL
com o endereo de onde est a imagem que deve ser apresentada. Temos, ento, os atributos
da tag. Os atributos possuem uma palavra-chave, o smbolo de igual e seu valor entre aspas
duplas. Observe na Figura 62, o atributo src que possui a URL de onde est a imagem. A tag
<img> tem outros atributos, que veremos mais adiante. Cada novo atributo colocado logo a
seguir, sejam quantos forem. Observe tambm na Figura 62 que a tag <img> em linha, ela
comea e termina na mesma tag, no possuindo uma tag de fechamento.
Figura 62 Tag <img> com dois atributos, src que diz o endereo da imagem no servidor, e o alt
com um texto, que exibido se a imagem no puder ser mostrada.
Assim, um documento HTML nada mais que um texto misturado com as tags.
6.2 Doctype
Como dissemos anteriormente, estamos aprendendo a ltima verso do padro HTML,

chamada de HTML 5, mas existiram outras verses que eram diferentes em alguns aspectos. Na
internet existem todas estas verses. Para no ficar confuso enquanto l o documento, temos
uma declarao que diz exatamente isso.
94
Competncia 06
Figura 63 Tabela com as verses do HTML e o ano de lanamento.

Fonte: www.w3schools.com/html/html_intro.asp
O DOCTYPE uma declarao que informa aplicao que l o documento HTML qual seu tipo
para, assim, poder ser lido corretamente. A declarao deve ser escrita em uma das trs formas
da Figura 64, e deve ser exatamente a primeira linha do documento.
Figura 64 Trs opes de declarao. A mais comum a primeira. No

deve haver de forma alguma qualquer outra linha acima desta.
DOCTYPE no uma marcao nem faz parte do HTML. Ela uma declarao de que tipo e
verso de documento ele .
6.3 Estrutura bsica do documento HTML
Todo documento HTML se divide em duas partes. A primeira parte informa alguma coisa sobre
o documento, como o seu ttulo. A segunda parte o contedo do documento. Existem tags
especficas para cada uma destas partes, mas caso voc erre e coloque tags erradas nos lugares
errados o navegador, quando ler, vai ignorar. Mas no faa isso. Alguns softwares podem ler
pginas para deficientes visuais e, em alguns casos, os erros podem impedir a leitura correta.
95
Competncia 06
Figura 65 Site da W3C que verifica seus arquivos HTML em busca de erros. Voc pode utiliz-lo
para conferir seu trabalho antes de publicar.
Fonte: http://validator.w3.org/#validate_by_upload
A estrutura bsica de um documento HTML comea pela tag <HTML>. Ela ir englobar duas
tags: a <head> (cabealho) e a <body> (corpo).
A tag <head> guarda tags que dizem alguma coisa sobre o documento, como a tag
<title> que d um ttulo para o documento.
A tag <body> engloba o contedo e as tags que estruturam este contedo. Isto fica
melhor de ser entendido na Figura 66.
Figura 66 Estrutura bsica de um documento HTML.

96
Competncia 06
Para entender melhor esta histria de hierarquizao e caixas dentro de caixas e dentro de
caixas, voc tem que enxergar o documento de acordo com a Figura 67. Observe que a tag
<title> pertence tag <head>, que pertence tag <html>. J as tags <h1> e <p> pertencem
tag <body>, que pertence tag <html>.
Figura 67 A hierarquia de uma pgina HTML se assemelha a caixas dentro de

caixas.
Voc deve prestar bastante ateno a esta hierarquia para no errar misturando as tags. A
Figura 68 mostra uma forma errada de tags. Quando algo de estranho acontecer na pgina
pode ser um erro nesta hierarquia.
Figura 68 - Forma errada. As tags de abertura e fechamento se misturam.

Toda pgina deve ter as tags <html>, <head> e <body> da forma como foram mostradas.
Tags HTML no diferenciam marcaes em maisculas ou minsculas, ou seja, <P> significa o

mesmo que <p>. Ns utilizamos tags minsculas porque o World Wide Web Consortium (W3C)
recomenda minsculas em HTML 4, e exige etiquetas minsculas em XHTML.
97
Competncia 06
6.4 Visualizando as Pginas
O propsito de um navegador (como o Google Chrome, Internet Explorer, Firefox, Safari) ler
documentos HTML e exibi-los como pginas da web. O navegador no exibe as tags HTML, mas
usa as tags para determinar como o contedo da pgina HTML deve ser apresentado para o
usurio.
Para testar as pginas que voc construir, basta arrastar o arquivo em um navegador aberto, ou
digitar, na barra de endereo, o endereo do arquivo. Como se fosse uma URL. Veja na Figura
69 a nossa pgina de exemplo sendo exibida.
Figura 69 Exibio da pgina de exemplo da Figura 36.

Observe que a aba da janela, destacada em vermelho na Figura 69, mostra o texto escrito
dentro da tag <title>, Ttulo da pgina. J no espao de exibio da pgina, est nosso ttulo e
pargrafo. Mas observe que eles esto formatados. Mesmo que no tenhamos definido um
estilo, os navegadores possuem um estilo CSS padro que d margens, define cores (letras
pretas em fundo branco), fontes, tamanhos, etc. Como o navegador se preocupa com a
apresentao, ento, caso o desenvolvedor no tenha se preocupado em definir um estilo, ele
usa o estilo padro presente em todos os navegadores.
A construo da aparncia de uma pgina seguindo o HTML e o CSS chama-se renderizao da

pgina.
98
Competncia 06
Documentos HTML ignoram o pulo de linha e quando h mais de um espaamento na

renderizao. utilizamos tags e cdigos para isto.
6.5 Nomenclatura dos arquivos HTML
Os arquivos HTML so armazenados nos servidores aguardando que algum os solicite. O

servidor uma aplicao, como seu navegador, e possui algumas regras para os nomes dos
arquivos que esto hospedados nele.
NUNCA utilize caracteres especiais como letras acentuadas e smbolos (!, @, #, $, %, ,
&, *, (, ), entre outros.). Mesmo que eles possam ser visualizados em seu navegador, o servidor
pode no aceitar. Ento, apenas utilize nomes simples;
NUNCA utilize espao para nomes compostos. As URLs no podem ter espaamento em
seus nomes. Coloque tudo junto se utilizar nomes compostos;
No aconselhamos a utilizao de letras maisculas. Alguns servidores mais antigos no
as aceitam. Utilize apenas letras minsculas e/ou nmeros para se garantir.
6.6 Layout HTML
O layout HTML pode ser produzido atravs de tags <div>. Elas isolam reas e podem ser
configuradas pelo CSS para terem a aparncia que voc quiser. Lembra-se do incio da
competncia 5, neste mesmo caderno, onde aprendemos sobre wireframes? D uma olhadinha
para relembrar.
O wireframe ir nos ajudar a organizar o layout HTML. A Figura 70 mostra o wireframe de

exemplo do site do cantor sertanejo e aproveitamos para encaixotar todos os grupos em tags
<div>. Observe que colocamos todo o contedo em uma coluna que sempre fica direita,
encaixotamos o ttulo e o menu e embaixo deixamos uma rea para as mdias sociais e mais
99
Competncia 06
alguma informao.
Figura 70 Planejamento do layout HTML baseado no wireframe de exemplo.

Vamos agora estruturar todo o contedo do site com as tags no documento HTML.
Nossa primeira pgina a index.html. A Figura 71 mostra o cdigo bsico de qualquer pgina
HTML, com todas as <div> que estruturam nosso exemplo de acordo com o wireframe. Observe
e tente entender. Cada <div> corresponde a uma rea do wireframe. Quando voc for construir
o seu projeto, estude a silhueta dele e estruture o documento. Quanto mais exerccio fizer,
melhor vai entender. Comece sempre pelos mais simples, depois voc pode buscar layouts mais
complexos.
100
Competncia 06
Figura 71 Construo da estrutura atravs de tags <div>.

6.7 Atributos Id e Class
Na Figura 70 as tags <div> esto com um atributo, chamado id. Este atributo identifica aquela
tag com um nome nico. No devemos utilizar, no mesmo documento HTML, o mesmo id em
tags diferentes. Lembre-se de que o id como um nmero de identidade, s deve haver um no
mesmo documento.
Outra forma de identificar utilizando o atributo class. No entanto, este atributo identifica um
grupo de tags. O class classifica aquele grupo com uma identidade. Assim, o class faz mais
sentido quando temos mais de uma tag com aquele identificador.
Coloque sempre nomes simples em minsculas e sem acentos ou caracteres especiais. No

utilize nomes compostos.
Tanto o id quanto o class no servem para nosso HTML. Mas vo servir muito para a estilizao
com CSS, por isso faz sentido entendermos isso agora, por causa de nosso prximo tpico.
101
Competncia 06
6.8 Novas Tags HTML 5
O HTML 5 foi lanado para atender vrios objetivos. Entre eles est a semntica das
informaes do documento. Por exemplo, boa parte dos sites da internet tem uma informao
chamada endereo. Utilizando id e class podemos identificar e classificar, mas como cada um
pode colocar o identificador que quiser para elas, ficamos na mesma situao. Assim, o HTML 5
prov novas tags para dar significado informao de forma padronizada.
A Figura 71 mostra uma tabela com as tags mais usuais e sua finalidade.
TAG
<header>
DESCRIO
o incio de alguma sesso. Pode ser do prprio documento onde fica a marca do site.
a finalizao daquela sesso. Em uma pgina de produto em uma loja virtual, o footer
<footer>
pode englobar dicas de produtos que outras pessoas compraram junto daquele
produto.
Engloba tags referentes a algum sistema de navegao. Como aqueles que vimos em
<nav>
uma competncia anterior.
<section>
Define uma sesso do documento.
mais compreensvel com a comparao de um blog que possui vrios artigos. Esta tag
<article>
informa qual parte do documento um artigo. Este artigo ainda pode ter um <header>
e um <footer> referente ao artigo.
Figura 71 Tabela com as tags HTML 5 para contextualizaes mais utilizadas.
O HTML 5 prev muitas outras tags e como um web design profissional sua obrigao
conhecer todas elas. Acesse o link abaixo para aprender mais.
https://developer.mozilla.org/pt-BR/docs/HTML/HTML5/HTML5_element_list
Podemos utilizar <div> sem problema, mas era assim que se fazia antes do HTML 5. Ento,
vamos atualizar nosso documento com as novas tags. A Figura 72 mostra como ela ficou.
102
Competncia 06
Figura 72 Pgina formatada com as novas tags HTML 5.

Se voc renderizar o documento em um navegador, no ir ver nada, porque no h contedo.

Apenas definimos a estrutura e a rea de cada informao.
Observe que uma div continua no documento, mas vamos modific-la no prximo tpico.
6.9 Iframe
A tag <iframe> cria uma rea em nosso documento onde podemos renderizar outra pgina e
depois ficar trocando o contedo. Voc no precisa utilizar <iframe> em seu site. Estou
mostrando esta tcnica porque ela se encaixa perfeitamente no projeto de exemplo, onde um
vdeo ir ficar passando no fundo da pgina principal, enquanto o usurio pode navegar por
outras pginas sendo exibidas no <iframe>. Ento, vamos construi-lo.
A Figura 73 mostra o <iframe>. Ele possui um atributo name, para podermos apont-lo
posteriormente, e um src com uma url relativa para outra pgina web, que a primeira pgina
exibida no iframe. Note que troquei a <div> pelo <iframe>.
103
Competncia 06
Figura 73 Utilizao da tag <iframe>.

6.10 Tags Textuais
Vamos criar outro documento HTML da mesma forma como fizemos antes. melhor voc
digitar tudo de novo para decorar. Ser um bom exerccio. Esta pgina contem informaes
sobre o cantor e vamos nome-la de cantor.html. Ela possui muito texto e ser um bom
exemplo de como estruturamos um texto.
O HTML ignora pulos de linhas e mais de um espaamento entre as palavras. Para pularmos
linhas devemos marcar cada linha com a tag <p> que significa um pargrafo. Caso queiramos
apenas quebrar a linha, ou seja, seguir com o texto na prxima linha, podemos interromper o
fluxo utilizando a tag <br />. Procure no exemplo da Figura 74 estas tags.
Os ttulos so marcados com as tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6>. A numerao
mostra os nveis de ttulo, subttulo e assim por diante. Em nosso exemplo, como vamos utilizar
o <h1> para o ttulo principal do site, utilizaremos o seguinte, <h2>, para as sesses do site.
104
Competncia 06
Utilizamos ainda a tag <span> nos ttulos. Esta tag no faz nada alm de marcar. Podemos
utilizar ela para um truque de CSS.
Figura 74 Documento HTML da pgina cantor.html.

Agora podemos visualizar a pgina index.html que ir mostrar o contedo de cantor.html. A

Figura 75 mostra o resultado.
Figura 75 Exibio da pgina index.html mostrando no <iframe> o contedo da pgina cantor .

html.
6.11 Meta Tags
Pode acontecer de voc, em seu contedo, utilizar caracteres acentuados e quando for ver a
105
Competncia 06
pgina eles se mostrarem com caracteres estranhos. Para resolver isso temos que modificar a
codificao dos caracteres de nossa pgina. Mas, no se preocupe, muito fcil.
Dentro da tag <head> colocamos informaes sobre a pgina, como a codificao de caracteres
a ser utilizada. Ento, vamos utilizar uma tag chamada <meta> para definir isto. A tag <meta>
pode ser utilizada para muitas informaes. Veja na Figura 74 que as utilizamos para definir um
nome de autor e uma descrio, alm de definir a configurao de caracteres. O autor e a
descrio servem para motores de busca, assim como o Google, que permitem adquirir
informaes de quem construiu a pgina e a finalidade dela. Bem til.
Copie as tags <meta> e coloque em todas as pginas do site.
6.12 Lista ordenadas e no ordenadas
Vamos agora criar outra pgina chamada discografia.html. Nela teremos uma listagem dos
lbuns musicais lanados pelo cantor. Para estruturarmos uma lista, utilizamos uma tag para
agrupar os itens, que podem ser <ol> para listas ordenadas e <ul> para listas no ordenadas.
A diferena que as listas ordenadas so numeradas e as listas no ordenadas possuem um

smbolo, normalmente um ponto. Tanto a forma de numerao quanto o smbolo utilizados
podem ser estilizados atravs de CSS.
Independente da lista que voc escolha, os itens so marcados pela tag <il>.
A Figura 76 mostra o HTML da pgina discografia.html e o resultado no navegador. Como as

pginas so independentes, resolvi mostrar no navegador apenas a pgina discografia.html.
106
Competncia 06
Figura 76 Cdigo HTML de listas ordenadas e no ordenadas e exibio no navegador da pgina

discografia.html.
6.13 Tabelas
Antigamente se utilizavam tabelas para juntar as imagens que estilizavam o site. Isto era um
problema srio, porque o contedo, a estrutura e o estilismo ficavam misturados. O CSS
resolveu isto e a utilizao de tabelas se resumiu finalidade de descrever dados tabulares.
Em nosso exemplo, na pgina agenda.html, temos uma tabela que apresenta de forma
organizada os dias, meses e locais de show do cantor. A estrutura de uma tabela comea com
uma tag <tabela> que engloba toda a tabela. Depois temos que criar as linhas com a tag <tr>
que iro englobar as tags <td>, que so as clulas. Ainda podemos fazer com que as clulas
superiores da tabela sejam o cabealho das colunas com a tag <th>. Veja o exemplo na Figura
77.
107
Competncia 06
Figura 77 Marcao para formatao de dados tabulares.

6.14 Imagens
Imagens inseridas no HTML servem para ilustrar o assunto de que se est falando. No devem
ser utilizadas para estilizar, para isso temos o CSS. No caso de nosso exemplo, o assunto so
fotos dos shows do cantor, ento, as fotos podem ser utilizadas no contedo do site.
No podemos inserir uma foto no cdigo HTML porque o documento apenas de texto, mas
podemos marcar um local onde ser exibida uma imagem quando o documento for
renderizado no navegador. Por conta disso, quando levamos uma pgina que contenha imagem
em um pendrive, por exemplo, devemos nos lembrar de levar todas as imagens juntas.
Marcamos o local onde as imagens sero inseridas utilizando a tag <img>, Figura 78. Entre os
atributos dela temos o src que indica a URL da imagem. No exemplo, na pasta do site, criamos
uma pasta imagens para guardar todas as imagens e dentro dela outra pasta chamada lbum,
para separar de outras imagens. As imagens foram preparadas antecipadamente para serem
apresentadas no tamanho correto. Para isto foi utilizado um programa de edio fotogrfica
108
Competncia 06
como o Gimp.
Figura 78 Cdigo HTML da pgina fotos.html e renderizao no navegador.

6.15 Formulrio
Um formulrio uma forma de comunicao com o usurio. Ele fornece campos para coletar
informao. Estas informaes vo para o servidor para serem processadas. Mas ele no
responsvel por este trabalho, o servidor apenas serve pginas, j o formulrio passa os dados
para alguma outra aplicao. Normalmente um servio de hospedagem tambm oferece uma
aplicao que possa processar os dados, no caso, enviar um e-mail com os dados do formulrio.
Existem vrias aplicaes que fazem isso e todas de formas diferentes. Voc precisa se informar
com seu servio de hospedagem para saber como proceder.
Independente do servio que voc utilizar, todos vo ter um formulrio HTML para coletar do
usurio e enviar a informao. O formulrio construdo iniciando com a tag <form> que
precisa de dois atributos. O atributo action aponta para a URL onde os dados vo ser
processados, e o atributo method especifica a forma de envio, normalmente utilizamos o
mtodo post.
109
Competncia 06
Figura 79 Cdigo do formulrio HTML e exibio no navegador.

6.16 Links
J temos todas as pginas de nosso site de exemplo. O contedo foi distribudo nas pginas e
temos a pgina principal, index.html. Atravs dela que vamos ter acesso a todas as outras
pginas.
Como este layout utiliza o <iframe> no temos necessidade de ter navegao nas outras
pginas, mas provavelmente seu layout deve ser diferente e neste caso voc ter que ter um
sistema de navegao em cada pgina. Lembre-se disso.
Voltamos para a index.html e vamos construir um sistema de navegao para os usurios

poderem ter acesso ao restante do contedo. Para isso, vamos utilizar a tag <a>, e vamos
colocar na tag <nav> que destinada a englobar tags de navegao. Entre os atributos da tag
<a> temos o href que deve ter uma URL como valor, apontando para a pgina que o link leva; e
o atributo target, que diz onde ser exibida a pgina. Os valores mais utilizados para target
esto abaixo:
110
Competncia 06
blank : abre o documento apontado em uma nova janela ou aba;
self: abre o documento apontado na prpria janela ou aba. Esta opo a padro, se
no colocarmos o atributo target;
framename: podemos colocar o valor de um atributo name de um <iframe>, para que o
documento seja exibido naquela rea.
No queremos substituir a pgina index.html porque ela est exibindo o vdeo do cantor. Ento,
vamos colocar o nome do iframe como valor do target. Assim, quando algum clicar no link, a
pgina da URL de src ser exibida no <iframe>. Observe na Figura 80 destacadas em vermelho
as tags <a> do menu que engloba o texto do link. O nome do <iframe> pagina. Lembre-se
de sempre evitar acentos e caracteres especiais, assim como palavras separadas por espao,
quando nomear algo em HTML. Por isso, pagina ficou sem acento.
Figura 80 Tags que formam o sistema de navegao do site em index.html.

Podemos tambm colocar os hiperlinks em meio ao texto. Na Figura 80 existe um tag <a> que
marca uma palavra do texto como demonstrao. No existe um limite para a quantidade de
palavras marcadas. Voc pode marcar um texto completo se precisar.
111
Competncia 06
6.17 Finalizando
O site em HTML est quase pronto. Para finalizar colocamos um ttulo com <h1> em <header> e
em <footer> colocamos mais alguns links para mdias sociais, s que ao invs de colocarmos
texto como hiperlink, colocamos no lugar imagens com a tag <img>. Tambm em <footer>
acrescentamos mais uma tag <address> sobre direitos autorais. Tudo isso voc pode encontrar
no cdigo da Figura 80 e visualizar na Figura 81.
Figura 81 Exibio do site em HTML.

Agora, s falta estilizar, ou seja, tornar a aparncia mais agradvel para o usurio se sentir
estimulado a ler nosso contedo. Mas isso assunto para a nossa prxima competncia!
Como exerccio voc pode fazer o passo a passo e repetir a construo do site apresentado.
Depois, voc pode mudar para testar como se comportam os elementos. Quando estiver
seguro, pode fazer o site que estamos trabalhando nos exerccios desde a primeira
competncia. Caso voc tenha pulado algum exerccio, perceba que cada competncia
depende das anteriores. Ento, voc ter que fazer o que deixou para prosseguir. Lembre-se
de que a maioria dos erros, quando estamos aprendendo, de digitao. Ento, verifique
letra por letra com bastante ateno para saber o que fez de errado.
112
Competncia 07
7.Competncia 07 | Planejar a Identidade Visual de Web Sites Usando

Folhas de Estilo
Na competncia 5 definimos como ser a aparncia do site de exemplo. Voc pode visualizar a
sugesto de soluo para o problema do empresrio do cantor sertanejo na competncia
anterior deste caderno.
Agora que estruturamos todo o contedo do site em pginas HTML e temos at um sistema de
navegao funcional, vamos estiliz-lo utilizando outro padro da W3C, o CSS.
Alertamos, mais uma vez, que esta competncia a continuao das anteriores. Caso voc
tenha pulado competncias anteriores dificilmente compreender esta. Voc deve, ento,
voltar e ler o contedo, fazer o exerccio proposto para poder seguir adiante.
CSS um acrnimo para Cascading Style Sheets, traduzindo significa Folhas de Estilo em
Cascata. Este padro serve para descrever como os elementos HTML so exibidos.
No comeo da WWW o HTML tambm era responsvel pela aparncia do documento. Com o
crescimento, os estilos das pginas ficaram mais complexos e se misturaram estrutura e ao
contedo, o que fazia com que os documentos HTML ficassem gigantes e confusos. Mas no
era s este problema que existia. Se voc tivesse um site com 200 pginas precisava copiar o
estilo, ou parte dele, em todas as pginas. Se uma alterao tivesse que ser feita, deveria ser
feita em cada uma das pginas.
Com o CSS temos um arquivo com a extenso .css onde ficam as configuraes dos elementos.
Como o estilo est fora do arquivo HTML, podemos utilizar o mesmo CSS para todas as pginas.
Se alterarmos o CSS, todas as pginas seguiro as modificaes. Isso poupa muito tempo e
trabalho.
113
Competncia 07
Outra vantagem do CSS que podemos ter vrias folhas aplicadas no mesmo arquivo HTML. A
primeira sempre a do navegador. Aquele estilo padro que vimos durante a construo do
site de exemplo, quando aplicamos uma folha em uma pgina. As configuraes desta folha se
sobrepem a do navegador. Os elementos que no foram definidos na folha continuam com a
configurao da folha do navegador. Se houver mais uma configurao, ela se sobrepe
primeira e folha do navegador. E assim por diante. Por isso que nomeada em Cascata.
Vamos comear ento. No documento index.html vamos linkar, ou seja, criar uma ligao
entre esta pgina e um arquivo CSS que criaremos posteriormente. Para isso, no <head> vamos
acrescentar uma tag chamada <link>. Ela possui alguns atributos padro, ento voc pode
copiar, e o atributo href que contm a identificao com a localizao do arquivo CSS. Observe
na Figura 82.
Figura 82 Tag <link> relacionando uma folha de estilo pgina index.html.

Crie tambm um arquivo de texto na pasta do projeto com o nome estilo.css. O mesmo nome
referenciado na tag <link>. Voc pode utilizar o Bloco de Notas do Windows, ou seu editor
HTML preferido.
7.1 Regras CSS

Como o arquivo estilo.css est vazio, no iremos observar, por agora, qualquer modificao na
renderizao da pgina index.html. Antes disso, vamos entender como funciona a sintaxe CSS.
Para definir um estilo para algum elemento HTML precisamos dizer qual esse elemento e suas
114
Competncia 07
regras. Assim, o estilo definido por um seletor e um bloco feito de chaves { }, com as regras
que definem a aparncia daquele elemento. Uma regra composta por uma propriedade e um
valor. Observe a Figura 83 que mostra a estrutura de um estilo, temos como seletor o elemento
<body> e duas regras.
Figura 83 O que est em preto a estilizao no arquivo CSS. Em azul, est a explicao dos elementos.
7.2 Seletores
O exemplo da Figura 83 mostra como seletor uma tag HTML. O seletor serve para achar o
elemento HTML que ser modificado. No caso do nosso exemplo so todas as tags <p> daquela
pgina. Note que relacionamos apenas uma pgina ao CSS, ento apenas ela ser alterada.
Ainda podemos utilizar o atributo id como seletor. A vantagem do atributo id que seu valor
deve ser nico naquela pgina onde se encontra. Para utilizarmos um id como seletor
colocamos um smbolo de tralha (#) na frente do valor do identificador, Figura 84.
Figura 84 Utilizao do atributo id como seletor.

115
Competncia 07
Quando temos vrios elementos com a mesma estilizao, podemos utilizar o atributo class
para formar um grupo. O atributo class pode repetir o mesmo valor agrupando elementos
HTML. A forma de selecionar um class colocar um ponto a frente do valor do class, Figura 85.
Figura 85 Utilizao do atributo class como seletor.

Quando vrios seletores possuem as mesmas regras, no precisamos repetir as regras.

Separamos os diversos seletores com vrgula, Figura 86.
Figura 86 Neste exemplo a tag <p>, o elemento com id igual a centro e o elemento
com class igual a nomedaclass recebem as mesmas regras.
Por ltimo, podemos especificar um elemento. Para isso, fazemos uma lista sem separao. No
exemplo da Figura 87, todas as tags <p> englobadas pelo elemento com o id igual a centro so
modificadas.
116
Competncia 07
Figura 87 Especificao de elementos.

No CSS voc pode colocar quantas regras precisar e at, se for o caso, dividir as regras entre
dois seletores iguais. O navegador vai ler o primeiro, fazer as alteraes e depois ler o segundo,
tambm aplicando as alteraes.
Normalmente quando uma regra no apresenta modificaes porque o nome do seletor est
errado.
7.3 Cores
Alguns valores de atributos so definies de cores. Em CSS as cores podem ser descritas de
vrias formas. As mais usadas so atravs de cdigo hexadecimal e palavras-chaves referentes
a uma cor. A Figura 88 mostra as duas definies de cores, referentes ao vermelho. O cdigo
hexadecimal comea sempre por tralha (#).
Figura 88 Representao de cores em CSS.

117
Competncia 07
Voc pode ter acesso s palavras-chaves neste link:

www.w3schools.com/cssref/css_colorsfull.asp
7.4 Background
Atravs da propriedade background podemos modificar o fundo do elemento. Na Figura 89

temos as propriedades relativas ao background.
PROPRIEDADE
background-color
background-image
background-repeat
backgroundattachment
backgroundposition
DESCRIO
Define a cor de fundo do elemento.
Define uma imagem para o elemento.
Define a repetio da imagem.
Define o comportamento da imagem quando rolamos a pgina
no navegador.
Define a posio da imagem no fundo do elemento.
Esta propriedade rene os efeitos anteriores, desde que na
ordem em que foram apresentados nesta tabela, de cima para
baixo. Pode ter ausncias.
background
Figura 89 Tabela com as propriedades relativas ao background.

O cdigo hexadecimal possui uma gama de cores bem maior que as palavras-chaves. Este link
lhe d acesso a uma pgina que pode lhe fornecer o cdigo hexadecimal atravs de um
seletor de cores: www.w3schools.com/tags/ref_colorpicker.asp?colorhex=000000
No site de exemplo vamos colocar o fundo preto, com uma imagem grande o bastante para
cobrir todo o fundo. A imagem no ir se repetir, o attachment ser fixo se o usurio rolar a
pgina, e a posio da imagem ser centralizada em relao ao elemento. Observe o cdigo e o
resultado na Figura 90.
118
Competncia 07
Figura 90 CSS do background de <body> e seu resultado no navegador.

7.5 Text
As propriedades referentes ao texto mais usadas esto listadas na Figura 91. Algumas
propriedades so herdadas pelos seus elementos filhos. Caso isto acontea e voc no queira,
ter que redefinir os elementos que mudaram.
PROPRIEDADE
color
text-align
text-decoration
text-transform
text-indent
DESCRIO
Define a cor do texto no elemento.
Define o alinhamento do texto no elemento.
Serve para definir e remover a decorao do texto,
como o sublinhado.
Modifica o texto para maisculas, minsculas,
capitulares, etc.
Define o recuo do texto no incio do pargrafo.
Figura 91 Propriedades referentes decorao de texto.

Observe em nosso exemplo a ltima linha. Ela est na tag <address>. Vamos deixar toda em
maiscula e centralizada. Veja o cdigo e o resultado no navegador na Figura 92.
119
Competncia 07
Figura 92 Cdigo da mudana das propriedades do texto e seu resultado.

7.6 Font
O navegador utiliza as fontes instaladas no computador para exibir o texto. Caso voc defina
uma fonte que no exista naquele computador, o navegador tentar substitu-la. Quando a
fonte que voc utilizar no for popular, melhor utilizar uma imagem no lugar. Voc pode utilizar
um termo genrico como sefif, sans-serif e monospace. Neste caso voc no diz a fonte e sim o
seu tipo. E o navegador tenta encontrar a melhor fonte daquele tipo no computador do
usurio. Podemos modificar as propriedades da fonte do texto atravs da propriedade font,
Figura 93.
PROPRIEDADE
font-family
font-style
font-size
font-weigth
font
DESCRIO
Define a famlia de fontes para aquele elemento. Podemos colocar
vrias opes separadas por vrgulas. Se houver nomes compostos na
fonte, utilizamos aspas duplas. Exemplo: Times New Roman
Define o estilo como normal, itlico ou oblquo.
Define o tamanho da fonte do texto daquele elemento. O tamanho
pode ser definido de vrias formas. A mais utilizada px (pixel) ou pt
(pontos).
Define a largura da fonte. Seria o nvel de negrito.
Configura todas as propriedades acima em uma declarao. Pode
haver ausncias, mas a ordem acima deve ser respeitada.
Figura 93 Efeitos relativos propriedade font para textos.

120
Competncia 07
Vamos configura a font de vrios de nossos elementos. Note na Figura 94 que colocamos todo
o texto de <body> com a cor branca e todos os seus elementos internos herdaram esta
propriedade. Para poder se notar, retiramos temporariamente a imagem de fundo. Tambm
modificamos os links <a> para serem brancos e retiramos a decorao (sublinhado).
Figura 94 Exemplo de utilizao das propriedades de font.

7.7 Links
Quando no exemplo eu tirei a decorao (sublinhado) dos links, o usurio perdeu o indicativo
de que ali se encontra um hiperlink, que no caso o sublinhado. Vamos fazer com que, quando
o usurio esteja com o ponteiro por cima do link, aparea o sublinhado.
Para isso vamos modificar um dos quatro estados do link. Abaixo esto todos eles.
link: link normal, no visitado.
visited: link j visitado.
hover: estado quando o ponteiro do mouse est sobre ele.
active: estado no momento em que clicado.
Estes estados do elemento <a> s existem para ele. Os estados no so propriedades, outra
forma de seletor para a tag <a>. Para utilizarmos, colocamos o seletor a seguido de dois
121
Competncia 07
pontos e o estado que desejamos modificar. Veja no exemplo da Figura 95.
Figura 95 Utilizao de estados da tag <a> com CSS.

Note no destaque em vermelho a modificao do estado hover de <a> para exibir a decorao
sublinhada (underline). No navegador observe que DISCOGRAFIA possui um sublinhado
porque o ponteiro est repousado em cima dele.
7.8 List
A propriedade list estiliza as listas HTML. A Figura 96 mostra as propriedades referentes list.
PROPRIEDADE
List-style-image
List-style-position
List-style-type
List
DESCRIO
Define uma imagem para o marcador.
Define se o marcador fica dentro ou fora do fluxo.
Define o tipo do marcador. Tipos: circle, square, upper-roman, loweralpha, entre outros.
Configura todas as propriedades acima em uma declarao. Pode haver
ausncias, mas a ordem acima deve ser respeitada.
Figura 96 Propriedades relacionadas formatao de listas.

Temos uma lista em nosso site e queremos modificar de crculo para quadrados. No entanto,
perceba que anteriormente as pginas exibidas no iframe no podem ser vistas porque seu
122
Competncia 07
texto pertence a outro HTML e no herda o CSS do index.html. Como queremos demonstrar da
melhor forma, vamos criar um novo estilo chamado estilopaginas.css e no <head> de cada
pgina, com exceo da index.html, vamos relacionar a este novo CSS. Assim, a index.html fica
relacionada ao estilo.css e o restante das pginas ao estilopagina.css.
Caso no lembre como relacionar uma pgina a um CSS, releia o tpico 8.
O cdigo do novo CSS e o resultado da estilizao da list est abaixo. Aproveitamos e definimos
as configuraes para <p> e o ttulo em <h2>. Compare com as configuraes no outro estilo
para entender melhor.
Figura 97 Arquivo estilopaginas.css, com as configuraes da lista no ordenada <ul> esto

des-tacadas em vermelho. Trocamos de disc para square, que visvel no navegador ao
lado.
7.9 Border
Configuraes de borda podem ser utilizadas em vrias tags, vamos demonstrar no <iframe> e
nas bordas. Para isso, vamos editar o arquivo estilo.css que define o estilo para index.html, a
pgina que contm o <iframe>; e em estilopagina.css que define o estilo para as outras
123
Competncia 07
pginas, incluindo agenda.html, que contm a tabela.
A Figura 98 traz uma tabela com as propriedades referentes border. Alertamos que a
propriedade de estilo obrigatria para visualizao.
PROPRIEDADE
border-botton
border-botton-color
border-botton-style
border-botton-width
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-top
border-top-color
border-top-style
border-top-width
border-color
border-style
border-width
Border
DESCRIO
Define todas as propriedades da borda inferior do elemento em uma
nica declarao.
Define a propriedade de cor da borda inferior.
Define a borda inferior com o estilo: solid, dotted, double ou dashed.
Define a largura da borda inferior.
Define todas as propriedades da borda esquerda do elemento em uma
nica declarao.
Define a propriedade de cor da borda esquerda.
Define a borda esquerda com o estilo: solid, dotted, double ou dashed.
Define a largura da borda esquerda.
Define todas as propriedades da borda direita do elemento em uma nica
declarao.
Define a propriedade de cor da borda direita.
Define a borda direita com o estilo: solid, dotted, double ou dashed.
Define a largura da borda direita.
Define todas as propriedades da borda superior do elemento em uma
nica declarao.
Define a propriedade de cor da borda superior.
Define a borda superior com o estilo: solid, dotted, double ou dashed.
Define a largura da borda superior.
Define a propriedade de cor de todas as bordas.
Define a propriedade do estilo de todas as bordas.
Define a propriedade de largura de todas as bordas.
Define todas as propriedades da borda do elemento em uma nica
declarao.
Figura 98 Propriedades de border.

A Figura 99 mostra as configuraes de <table> em estilopagina.css. Colocamos uma borda de 2

pixels de largura, na cor cinza e com trao slido. Ainda definimos a cor de background de <td>
para o mesmo tom de cinza do trao. No alteramos o cabealho <th>.
Note que a borda do <iframe> desapareceu. Para isso, definimos border: 0px em estilo.css, que
124
Competncia 07
governa a aparncia de index.html.
Figura 99 Configurao de <table> com uma borda de 2 pixels de largura, na cor cinza e o trao
slido. Ainda definimos a cor de background de <td>.
7.10 Modelo de caixa
Se voc est prestando ateno no curso, deve ter percebido uma propriedade na Figura 99 em
<table> chamada width que no explicamos. Essa propriedade define a largura do elemento.
Mas para entender como determinamos a largura do elemento precisamos compreender
melhor como construdo o elemento.
Todo elemento HTML pode ser comparado com caixas, da o nome Modelo de Caixa. O modelo
de caixa basicamente um retngulo que envolve o elemento, seja ele qual elemento for. Ele
composto de alguns elementos, veja a Figura 100, que so:
Margin: Uma rea transparente ao redor da borda;
Border: Uma borda que circula o preenchimento do contedo;
Padding: Uma rea transparente que envolve o contedo;
125
Competncia 07
Content: O contedo da caixa, onde o texto ou a imagem aparece.
Figura 100 Modelo de Caixa.

Fonte: www.w3schools.com/css/box-model.gif
Quando voc define a altura ou a largura de um elemento, voc est definindo a rea
disponvel para o contedo. Ento, voc deve somar os pixels de margem, da borda, do
espaamento interno, multiplicado por dois, ao tamanho do contedo. Isto porque temos dois
lados horizontalmente ou dois lados verticalmente.
Por exemplo: Se o contedo tem 100 pixels de largura, a margem de 20 pixels, a borda de 5
pixels e o espaamento interno de 10 pixels. Temos (20 + 5 + 10) * 2 + 100 = 170. Width deve
ser 170px.
7.11 Width e Height

A propriedade width define a largura, e a height define a altura. Elas podem receber valores em
pixel ou em porcentagem. A porcentagem em relao aos elementos que esto dentro.
No caso de nosso exemplo: um width de 100% deixar o elemento com a largura total de onde
ele estiver. Como a <table> est dentro do <body>, ele ir ocupar todo o espao disponvel.
Ainda temos min-width e min-height que definem respectivamente a largura e a altura mnima.
Se voc verificar nossa imagem de referncia, a layout, veremos que o contedo do site
126
Competncia 07
exibido em uma coluna pequena que ocupa toda a altura, 100%. Na Figura 101 voc pode ver o
cdigo de definio de altura e largura do resultado exibido no navegador. Voltamos com a
imagem de background em <body> para voc ver melhor o efeito.
Figura 101 Definio das propriedades de largura e altura da tag <section>.

No entanto, a altura mnima no foi respeitada. Saberemos o porqu no prximo tpico.
7.12 Position
As propriedades de posicionamento CSS permitem que voc posicione um elemento. Elas
tambm podem colocar um elemento atrs do outro e especificar o que deve acontecer
quando o contedo de um elemento muito grande.
Os elementos podem ser posicionados usando as propriedades top, botton, left e right. No
entanto, essas propriedades no funcionaro a menos que a propriedade position seja definida
em primeiro lugar. Os elementos tambm funcionam de forma diferente, dependendo do
mtodo de posicionamento.
127
Competncia 07
Existem quatro mtodos de posicionamento diferentes:
Static: a padro. Posiciona-se pelo fluxo normal da pgina.
Fixed: Ser posicionado em relao janela do navegador.
Relative: Ser posicionado em relao posio normal.
Absolute: Ser posicionado em relao ao primeiro elemento esttico que encontrar. Se
no houver, ser em relao a <html>.

Podemos colocar elementos sobrepostos utilizando a propriedade z-index e especificando uma
posio. Normalmente, quando queremos definir que o elemento fique abaixo de todos,
colocamos o valor -1000.
Compare a Figura 101 com a 102 e veja como a <section> agora chega at embaixo. Colocamos
Figura 102 A definio da propriedade position de fixed para <section> ativa a propriedade
min-height.
O site de exemplo comea a ganhar forma, mas queremos posicion-lo direita. Para isso,
utilizamos a propriedade right em 0px. Posicionando <section> colado com a borda direita da
128
Competncia 07
janela.
7.13 Magin e Padding
Nosso exemplo ficou junto da borda direita da janela, mas no toca a parte de cima nem a de
baixo. Isto acontece por conta da configurao padro de <html> que possui uma margem e um
espaamento internos, definidos.
Como explicamos no tpico 8.10, todos os elementos seguem o modelo box e possuem uma
margem e um espaamento. Podemos defini-los utilizando as propriedades na tabela da Figura
103.
PROPRIEDADE
margin-top
margin-right
margin-botton
margin-left
margin
padding-top
padding-right
padding-botton
padding-left
padding
DESCRIO
Configura a margem superior.
Configura a margem direita.
Configura a margem inferior.
Configura a margem esquerda.
Define todas as propriedades da margem do elemento em uma
nica declarao. A ordem deve ser a seguida acima, no sentido
horrio.
Configura o espaamento interno superior.
Configura o espaamento interno direita.
Configura o espaamento interno inferior.
Configura o espaamento interno esquerda.
Define todas as propriedades de espaamento interno do elemento
em uma nica declarao. A ordem deve ser a seguida acima, no
sentido horrio.
Figura 103 Tabela com as propriedades de margem e espaamento internos.

Em todas estas propriedades podemos definir valores em pixels e em porcentagem. A

propriedade margin ainda tem um valor chamado auto, que pega o espaamento restante e
coloca metade em cada lado. Em layouts simples podemos utiliz-la para centralizar elementos.
Em nosso exemplo vamos definir a margem e o espaamento de <body>. Estas propriedades
129
Competncia 07
so herdadas pelos elementos que esto dentro, todos para 0 pixel. Em <section> vamos definir
o espaamento interno do lado esquerdo como 10 pixels. Veja o cdigo e o resultado na Figura
104.
Figura 104 Configurao da margem e espaamento interno dos elementos.

Parece que ele est funcionando bem, mas se esticarmos a janela o <footer> no fica
encostado no fundo da pgina. Observe na Figura 105 o navegador do lado esquerdo com o
problema. Vamos definir a configurao de <footer> como no cdigo da Figura 105. As
configuraes ns j explicamos anteriormente. Escreva e teste uma a uma as propriedades
para ver o efeito de cada. O navegador da direita na Figura 105 mostra o efeito resultante.
130
Competncia 07
Figura 105 Configurao do elemento <footer> para ficar a 0 pixel da borda inferior da janela.
Aproveitamos e definimos um tamanho e centralizamos os elementos.
O <iframe> precisa ser configurado para esticar tambm. Ser que voc j consegue descobrir
quais propriedades precisa configurar e quais valores? Tente depois configurar a resposta na
Figura 106.
Figura 106 Configuraes de <iframe> para esticar o elemento.

131
Competncia 07
7.14 Display
Para finalizarmos, vamos ensinar um truque. Mas para isso temos que aprender sobre a
propriedade display. Ela define como o elemento ser exibido, e se ser exibido. Abaixo temos
os valores e explicao:
None: retira o elemento da pgina. Ele existe, mas no renderizado.
Block: define o elemento como bloco.
Inline: define o elemento em linha.
Os elementos em bloco como <h1> no permitem elementos ao seu lado. O prximo elemento
aps um elemento bloco ser renderizado abaixo. Os elementos inline, como <a>, posicionam o
prximo elemento direita, se houver espao. Como palavras em um texto.
Em nosso index.html colocamos o texto do ttulo de <h1> englobado em uma tag <span> que
serve apenas para marcar. Fizemos isso para esse truque.
Dissemos que imagens para embelezar no deveriam ser inseridas com a tag <img> e sim por
CSS. Mas como fazemos isso?
Temos uma imagem com a marca do cantor do tamanho j correto. Vamos configura a tag <h1>
que possui o ttulo, para o tamanho da imagem, e definir o background para exibir a imagem
com a marca. O problema que o texto ainda fica sendo exibido. Para fazer desaparec-lo
vamos configurar a tag <span> com display none. Como podemos ter vrios <span> em outros
lugares de nosso documento HTML iremos especificar apenas as tags <span> dentro de <h1>.
O cdigo e o resultado podem ser vistos na Figura 107.
132
Competncia 07
Figura 107 Configurao de imagens por CSS.

7.15 Novas tags HTML 5
Voc pode estar se perguntando, o fundo esttico, e o vdeo? Esperamos por este momento,
onde voc j possui um conhecimento maior, para explicar como colocar e configurar a exibio
por CSS.
O HTML 5 recebeu vrias outras tags. Entre elas, as que tratam de mdias como udio e vdeo. A
tag <video> coloca um tocador de vdeo na pgina HTML.
A seguir, temos suas opes mais utilizadas:
preload: s inicia o vdeo depois de baix-lo completamente;
autoplay: se estiver com o valor false, s toca se o usurio iniciar;
controls: faz o navegador exibir controles. Quais controles e sua aparncia so definidos
pelos navegadores, mas podem ser definidos por CSS e JavaScript.
133
Competncia 07
O elemento <video> engloba outras tags muito importantes. A tag <source> define onde est o
vdeo e seu tipo. Possui como atributos:
src: define a URL de onde est o vdeo a ser exibido.
type: define o tipo da mdia.
Caso no seja exibido o vdeo, podemos colocar um texto ou imagens que expliquem o motivo
dentro da tag <video>.
Observe o exemplo na Figura 108.
Figura 108 Exibio do tocador de vdeo na pgina atravs da tag <video> na pgina
index.html.
Note que esta uma tag HTML e deve ser colocada no arquivo index.html e no no CSS.
O vdeo est sendo exibido, mas no est ocupando toda a tela. Vamos voltar para o arquivo
estilo.css e definir o estilo de exibio do vdeo. Veja na Figura 109 a configurao que
utilizamos e na Figura 110 o site em tela cheia. Utilizamos um id s para voc ver a utilizao de
um seletor id.
134
Competncia 07
Figura 109 Configurao do estilo de exibio do vdeo em estilo.css.

Figura 110 Site com o estilo configurado exibindo o vdeo como background.
Para dar um efeito de transparncia em <section>, em estilo.css no seletor section vamos

acrescentar a regra opacity: 0.9; . A propriedade opacity deixa o elemento translcido. Seus
valores vo de 0.0, completamente transparente, at 1.0, completamente opaco.
Paramos por aqui. Depois de ler e fazer o exemplo, voc j deve poder fazer a configurao
135
Competncia 07
facilmente. Na ltima competncia, iremos conhecer um pouco sobre Javascript. At l!
Como sempre digo, atravs da repetio que aprendemos. Quanto mais fizer, mais fcil
ser. Faa o layout da competncia anterior com os conhecimentos adquiridos. Caso o site
que voc imaginou tenha alguma parte muito complicada, a internet cheia de tutoriais e
truques que iro lhe ajudar a realizar sua arte. O importante voc tentar.
136
Competncia 08
8.Competncia 08 | Construir um Website

Chegamos ltima competncia. Nela vamos aprender um pouco sobre programao. Apenas
o necessrio para podermos utilizar bibliotecas avanadas de comportamento como o JQuery.
Caso voc aprecie e queira se especializar, recomendamos que faa um curso de programao
para desenvolver o pensamento lgico.
JavaScript uma das mais populares linguagens de programao do mundo. Ela utilizada em
navegadores para definir comportamentos em uma pgina web.
Mas o que o JavaScript capaz de fazer em uma pgina?
Mudar elementos HTML;
Apagar elementos HTML;
Criar elementos HTML;
Modificar atributos dos elementos;
Mudar o estilo CSS dos elementos.
8.1 Inserindo Javascript em uma pgina
Podemos inserir cdigo JavaScript no meio do documento HTML, mas isto iria misturar e
complicar o entendimento, ento vamos mostrar para voc como relacionar um arquivo
JavaScript com um documento HTML, parecido com o que fizemos com o CSS. Assim, alm de
organizar cada padro em um arquivo diferente, podemos reutilizar o mesmo cdigo em vrias
pginas.
Crie um arquivo de texto, como fizemos no HTML e no CSS. Salve com o nome meuestilo.js.
Agora, vamos relacionar este arquivo JavaScript com o documento HTML. Utilizaremos a tag
<script> dentro da tag <head>. Ela possui um atributo src com a URL do arquivo JavaScript.
Observe a Figura 111 com um exemplo. Nele o arquivo meuestilo.js est na pasta scripts para
137
Competncia 08
no misturar com arquivos CSS e HTML.
Figura 111 Relacionando um arquivo JavaScript em um documento HTML.

Com isto, todo cdigo que escrevermos no arquivo .js ser processado na pgina, e podemos
reutilizar o mesmo cdigo em vrias pginas. Caso seja necessrio mudar algo, no ficaremos
catando em vrios lugares, iremos direto ao arquivo e modificaremos em apenas um lugar.
Muito mais prtico.
8.2 Manipulando elementos HTML
O JavaScript uma linguagem de programao com tudo que uma linguagem de programao
tem direito, mas que trabalha junto com o HTML.
Podemos modificar o contedo de qualquer elemento HTML. Para isso, temos que pegar o
elemento, o que podemos fazer chamando pela tag, pelo atributo id ou pelo atributo name.
Normalmente, utilizamos o atributo id por ser nico. Utilizaremos os seguintes comandos para
obter os elementos:
document.getElementById("identificadordoelemento");
document.getElementsByName("nomedoelemento");
document.getElementsByTagName("tag").
138
Competncia 08
Uma vez com o elemento, podemos chamar atributos e mtodos que modificam este
componente. No exemplo abaixo, pegamos o elemento que possui o id igual a titulo e
inserimos a frase Contedo inserido por JavaScript nele.
document.getElementById("titulo").innerHTML = "Contedo inserido por JavaScript ";
Um arquivo JavaScript composto por linhas de comando que modificam os elementos no

documento HTML. Cada uma das linhas chamada declarao e sempre termina com ponto e
vrgula.
8.3 Funes
As alteraes do modo como vimos anteriormente so realizadas quando o script lido, mas
podemos querer guardar um cdigo para ser executado posteriormente ou mais vezes. Sendo
assim, utilizamos funes.
Uma funo declarada com a palavra-chave function e um nome para identificar, seguido de
parnteses. Podemos ter vrias funes, desde que tenham identificaes diferentes. O cdigo
relacionado com a funo deve ficar entre chaves. Veja o cdigo abaixo, ele cria uma funo
com o nome minhaPrimeiraFuncao com o cdigo anterior. Assim, o cdigo s ser executado
se a funo for chamada.
function minhaPrimeiraFuncao( ) {
document.getElementById("titulo").innerHTML = "Contedo inserido por JavaScript";
}
Funes podem receber parmetros. Parmetros so dados necessrios para que as

declaraes da funo sejam completadas. No exemplo abaixo, a funo recebe dois nmeros
como parmetros, eles sero somados e mostrados.
139
Competncia 08
function minhaPrimeiraFuncao(n1, n2 ) {
document.getElementById("titulo").innerHTML = "Resultado: " + (n1 + n2);
}
Nunca utilize caracteres especiais quando estiver programando, como cedilha, acentos, etc.
Voc pode utilizar texto entre aspas duplas ou simples.
8.4 Eventos
Evento so coisas que acontecem ao HTML. O navegador monitora a pgina quando algo
acontece com ela, como o clique em um elemento, o navegador por reagir. Essa reao
definida pelo JavaScript.
Atravs do JavaScript podemos definir que, quando um elemento <button> seja clicado, ele
mostre a data e a hora. Conseguimos isso acrescentando no HTML o atributo onclick e
colocando como seu valor o nome de uma funo. Observe o exemplo abaixo que utiliza a tag
<button>.
<h1 id="titulo"></h1>
<button onclick="minhaPrimeiraFuncao">Qual a hora?</button>
function minhaPrimeiraFuncao(n1, n2 ) {
getElementById('titulo').innerHTML=Date();
}
As letras maisculas e minsculas devem ser respeitadas porque o JavaScript sensvel a

mudanas, assim Script, script e scripT so diferentes.
140
Competncia 08
Lembre-se de que temos tags HTML colocadas em arquivos HTML e o cdigo JavaScript fica em
arquivos JavaScript.
Dessa forma, podemos configurar um comportamento para acontecer em resposta a um

evento. Existem vrios eventos. Voc pode encontrar os mais utilizados na tabela da Figura 112.
EVENTO
onchange
onclick
onmouseover
onmouseout
onkeydown
onload
DESCRIO
O evento acontece quando o elemento HTML mudado.
O evento acontece quando o elemento HTML clicado.
O usurio move o mouse sobre o elemento HTML.
O usurio move o mouse para fora do elemento HTML.
O usurio pressiona uma tecla.
O navegador termina de ler a pgina.
Figura 112 Tabela contendo os eventos e suas descries.

Antigamente existia uma grande divergncia entre como o Internet Explorer interpretava o
JavaScript e o restante dos navegadores. Era um problema porque tnhamos um determinado
cdigo para um navegador e outro cdigo para os outros navegadores. Hoje em dia,
principalmente com o HTML 5 temos um acerto entre os navegadores que seguem o padro da
W3C, mas isto s vlido para os navegadores mais atuais.
8.5 JQuery
JQuery uma biblioteca escrita em JavaScript que deixa a criao de comportamentos

JavaScript bem mais fcil. Ela tem a proposta de escrever menos, fazendo mais.
A jQuery foi criada por programadores experientes para fazer vrios procedimentos com
poucos comandos. E voc no precisa se preocupar em qual navegador est sendo lida sua
pgina, a jQuery j trata isso para voc.
Alm disso, outros programadores aproveitaram as facilidades da jQuery e escreveram plug-ins.
141
Competncia 08
Plug-ins so pequenas aplicaes que complementam o jQuery com funcionalidades extras. A

web est cheia de plug-ins para a jQuery. Uma rpida procura e voc achar aquela
funcionalidade que ir destacar seu site.
Mas como podemos utilizar esta poderosa ferramenta em nosso site?
8.5.1 Instalao da Biblioteca JQuery
Uma das formas de instalao da jQuery baixando a biblioteca. Ela muito pequena e
composta de um arquivo. Voc pode baix-la no site http://jquery.com/download/ exibido na
Figura 113.
Figura 113 Pgina onde podemos baixar a biblioteca JQuery.

Fonte: http://jquery.com/download/
At o momento da escrita deste caderno, a verso mais atual a 1.11.1, que disponibilizada
de duas formas, comprimida e no comprimida. A verso comprimida menor porque possui
apenas um espao entre os comandos, dessa forma mais rpida de ser lida pelo navegador. A
verso no comprimida melhor de ler, caso voc tenha curiosidade de saber como ela foi
construda. Voc pode baixar qualquer uma das duas. Clique com o boto direito no link e
escolha Salvar link como... ou qualquer opo semelhante para salvar o arquivo em seu
142
Competncia 08
computador.
Coloque este arquivo na pasta de seu projeto. Abra o arquivo HTML que voc deseja que
possua comportamentos jQuery. Acrescente na tag <head> a linha <script> destacada na Figura
114. A URL vai depender de onde voc colocou o arquivo da jQuery. No caso do exemplo, o
arquivo est na pasta scripts. Note que temos dois arquivos JavaScript. O primeiro a
biblioteca jQuery, o segundo o arquivo onde iremos escrever o cdigo JavaScript que usa a
jQuery, chamado meuscript.js. Perceba que tanto um quanto o outro esto em uma pasta que
escolhi colocar o nome scripts, para ficar organizado.
Figura 114 Pgina index.html do projeto de exemplo com a instalao do jQuery e o arquivo .js que utiliza a
biblioteca.
8.5.2 Selecionando Elementos

Um dos objetivos do jQuery a simplificao. Assim, a forma de selecionar um elemento, seja
pela tag, id ou class atravs de $(seletor/id/class). Observe os exemplos abaixo:
Selecionando a tag <body>: $(body)
Selecionando o id marca: $(#marca)
Selecionando a class foto: $(.foto)
Observe que utilizamos a tralha (#) para dizer que um valor de id e um ponto (.) para um valor
de class, como no CSS. Temos agora apenas uma forma para selecionar elementos seja tag, id
143
Competncia 08
ou class. Definitivamente, bem mais prtico.

A biblioteca ainda disponibiliza palavras-chaves que guardam elementos comuns. Por exemplo,
quando queremos nos referir a todo o contedo podemos utilizar document e quando
queremos nos referir ao prprio elemento que estamos usando utilizamos this. Nestes casos,
no utilizamos aspas.
Uma vez que temos um elemento selecionado, podemos fazer o que quiser com ele, como
modific-lo, adicionar efeitos e eventos.
8.5.3 Adicionando Efeitos

Na biblioteca j temos diversos efeitos programados que podemos utilizar para adicionar mais
dinamismo s nossas pginas. Ainda podemos combin-los ou personaliz-los.
Os efeitos normalmente modificam um ou mais atributos estticos. Veja a tabela da Figura 115
para conhecer alguns deles. A aplicao do efeito realizada atravs de ponto seguido do
nome do efeito, logo depois da seleo do elemento.
EFEITO
animate()
fadeOut()
fadeIn()
fadeToggle()
hide()
show()
slideDown()
slideUP()
slideToggle()
DESCRIO
Executa uma animao personalizada no elemento selecionado.
Faz desaparecer um elemento selecionado gradualmente.
Exibe um elemento selecionado gradualmente.
Alterna entre os efeitos de fade in e out no elemento selecionado.
Esconde o elemento selecionado.
Exibe o elemento selecionado.
Desliza para baixo, mostrando o elemento selecionado.
Desliza para cima, escondendo o elemento selecionado.
Alterna entre esconder e mostrar o elemento selecionado, deslizando.
Figura 115 Tabela com alguns efeitos disponibilizados na biblioteca jQuery.

Agora que sabemos como selecionar um elemento e como utilizar efeitos, vamos ver um
exemplo simples. A tag <section> engloba todo contedo de nosso site. Vamos selecionar este
elemento e faz-lo quase desaparecer em uma animao de dois segundos, assim ele no ir
144
Competncia 08
atrapalhar a exibio do vdeo que passa no fundo da pgina. O efeito que utilizamos foi o
fadeTo( ), que possui dois argumentos, o primeiro define o tempo em milissegundos, assim
1000 um segundo e 2000 dois segundos, o outro argumento o grau de transparncia que vai
de 1 at 0, sendo 1 totalmente visvel e 0 totalmente transparente. Para este exemplo, quando
a pgina exibida a tag <section>, tudo nela ir gradualmente desaparecer em cinco segundos
at ficar com 10% de visibilidade, que corresponde a 0.1. Para isso utilizamos o cdigo abaixo
no arquivo meuscript.js.
$("section").fadeTo(5000, 0.1);
O resultado final do efeito pode ser visto no navegador na Figura 116, esquerda est a pgina
quando aparece e direita a pgina depois de cinco segundos.
Figura 116 O resultado no navegador do uso do jQuery para fazer desaparecer a tag <section>. No
lado esquerdo sem o efeito, no outro com o efeito.
Dependendo do navegador o cdigo JavaScript pode ter sido lido e executado antes dos
elementos da pgina aparecerem na tela. Dessa forma nada mostrado. Para resolver isto
teremos que utilizar um evento. Outra forma de garantir que todos os elementos HTML sejam
145
Competncia 08
lidos antes do JavaScript colocar as duas tags <script> antes da tag </body> que fecha o
documento, mas a forma como iremos mostrar a mais aconselhvel.
8.5.4 Utilizando Eventos
O efeito ficou interessante, mas agora no podemos ver o contedo do site. Ficaria melhor se
quando o usurio colocasse o mouse em cima do contedo ele ficasse menos transparente e
quando retirasse o mouse de cima voltasse a ficar transparente. Para isso, teremos que utilizar
eventos da jQuery.
A jQuery tambm facilita a manipulao de eventos. Com ela no precisamos modificar o HTML
para tornar os elementos clicveis ou sensveis s aes dos usurios.
A forma de utilizar um evento igual ao de um efeito. Utilizamos o ponto seguido do nome do

evento, isto depois de selecionarmos o elemento. Apenas nos eventos que criamos uma
funo para ser executada quando o evento ocorrer. Veremos um exemplo mais a frente, por
enquanto observe com ateno a Figura 117 que contm uma tabela com os eventos do
jQuery.
EVENTOS DE
MOUSE
click
dblclick
mouseenter
mouseleave
EVENTOS DE
TECLADO
keypress
keydown
keyup
EVENTOS DE
FORMULRIO
submit
change
focus
blur
EVENTOS SOBRE O
DOCUMENTO E JANELA
load
ready
scroll
unload
Figura 117 Tabela com os eventos disponibilizados pelo jQuery classificados por tipo.
Vamos primeiro corrigir o problema da ordem de leitura mencionado no final da sesso 8.5.3.
Queremos que nossos efeitos s ocorram quando todo documento for lido. Na sesso 8.5.2
aprendemos que para selecionarmos todo o documento podemos utilizar a palavra chave
document. E na tabela da Figura 117 o evento que executa uma funo aps o carregamento
146
Competncia 08
da pgina o ready. A Figura 118 mostra como fica o cdigo. Gaste um pouco de tempo lendo
esta parte para entender bem, depois faa testes com outros efeitos para ver o que acontece.
Figura 118 Cdigo que configura uma funo para ser executada depois que todo documento
HTML tiver sido lido pelo navegador.
A utilizao de $(document).ready( ) uma boa prtica. Ento, sempre utilize esta tcnica.
Devemos ter a certeza de que todo HTML foi carregado no navegador antes de executarmos o
JavaScript.
Agora, vamos fazer o efeito de desaparecimento e reaparecimento quando o usurio colocar o

ponteiro do mouse em cima do contedo do site e retirar. Para isso, vamos olhar novamente na
Tabela da Figura 117 em busca dos eventos correspondentes.
Os eventos so mouseenter e mouseleave. Podemos coloc-los na mesma funo do evento

ready. Observe que primeiro selecionamos o elemento <section> e adicionamos a ele o
primeiro, depois selecionamos novamente e adicionamos o outro evento. Note, tambm, que
acrescentamos uma funo para cada evento. Como temos trs eventos, temos uma function
para cada.
A Figura 118 mostra o cdigo. Atente que modificamos alguns detalhes. O primeiro foi a
diminuio de 5000 para 1000 milisegundo, assim o usurio ir esperar menos para aparecer e
desaparecer o contedo. O segundo foi que utilizamos a palavra chave this que diz a jQuery
que o elemento que ir desaparecer ou reaparecer o prprio elemento do evento, ou seja, o
<section>. Poderamos repetir o nome do elemento, mas utilizamos o this para exemplificar sua
utilizao. O ltimo detalhe que para desaparecer configuramos a opacidade do elemento
147
Competncia 08
para 0.1 e para reaparecer para 0.9.
Figura 118 Cdigo que carrega dois eventos na tag <section>: um quando o ponteiro
est acima do elemento, outro quando o ponteiro deixa o elemento.
Em uma imagem esttica no podemos mostrar o efeito, mas se voc foi um bom aluno e
repetiu todos os exemplos at aqui poder ver com tranquilidade em seu navegador.
normal no conseguir ver logo na primeira vez o efeito. Quando estamos aprendendo
deixamos passar muitos detalhes que ocasionam erros e o navegador simplesmente ignora
qualquer cdigo errado. Ento, tenha calma, verifique letra por letra de tudo o que digitar. Por
vezes, esquecemos uma vrgula, ou ponto e vrgula, por outras, trocamos uma chave por um
parntese. Verifique tudo, bem atentamente.
Como esta parte a mais complicada de todo o curso, vamos mostrar mais um exemplo. Que
tal se, quando o usurio clicar em uma foto do lbum, aumentssemos ela?
Para isso temos que inserir a biblioteca jQuery no arquivo HTML que define as imagens, o
arquivo chama-se fotos.html. Voc se lembra de que o contedo desta pgina mostrado
dentro da tag <iframe>? Se no, melhor voc dar uma revisada na competncia sobre HTML.
Vamos modificar um pouco este HTML. Primeiro vamos inserir a tag <script> tanto para a
biblioteca jQuery como para nosso arquivo JavaScript, o meuscript.js. Depois, vamos
148
Competncia 08
acrescentar o tributo class com o valor foto para todas as tags <img>. Assim, classificamos
aquelas tags que contm fotos como sendo do mesmo tipo. Dessa forma se houvesse outras
tags <img> elas no seriam afetadas. A Figura 119 mostra o cdigo da pgina fotos.html.
Figura 119 Cdigo HTML da pgina fotos.html com o acrscimo das tags <script> na tag
<head> e o atributo class=foto nas tags <img>.
Agora vamos para o arquivo meuscript.js e adicionar um evento para os elementos que
possuam a class com valor foto. Na Figura 120 explicamos linha a linha a programao
necessria para o efeito completo. Utilizando este cdigo, quando clicamos em uma foto na
pgina fotos.html ela ir crescer at 270 pixels se seu tamanho for menor. Caso cliquemos
novamente na foto, como seu tamanho maior que 200 pixels, solicitamos que a animao a
deixe com o tamanho de 135 pixels.
149
Competncia 08
Figura 120 Cdigo JavaScript do arquivo meuscript.js com o efeito de ampliao de imagem
pelo clique do usurio.
A Figura 121 mostra a primeira foto clicada. Para voltar ao normal, basta clicar novamente.
Figura 121 Navegador exibido o site com a pgina de fotos.html, a primeira imagem foi
clicada e o jQuery aumentou seu tamanho para 270 pixels.
150
Competncia 08
Dessa forma, utilizando a biblioteca jQuery atravs de seleo de elementos, configurao de

eventos e definio de efeitos, podemos fazer diversos comportamentos de forma mais fcil e
rpida em JavaScript.
8.6 Bootstrap
Para finalizar esta competncia, vamos conhecer um framework chamado Bootstrap. Um

framework uma ferramenta que ajuda no desenvolvimento rpido de uma camada da
aplicao. No caso do Bootstrap, a cama de front-end.
O Bootstrap foi desenvolvido na empresa Twitter por Mark Otto e Jacob Thornton utilizando os
padres abertos da W3C. Eles queriam padronizar os diversos componentes tanto em
comportamento como estilo nas aplicaes da empresa. O projeto foi disponibilizado como
cdigo aberto e pode ser copiado e utilizado at em projetos comerciais.
No Bootstrap j temos vrios comportamentos bem definidos atravs da jQuery, ento,

tambm precisamos da jQuery para o Bootstrap funcionar. Ele tambm tem um estilo
predefinido de bom gosto, mas que voc pode modificar apenas acrescentando seu estilo CSS
depois de todos os arquivos.
Vamos fazer um exemplo do zero, mas caso voc queira aprender mais sobre este framework
pode acessar a pgina do Bootstrap traduzida pela Globo.com, que utiliza muito em seus sites.
O endereo est abaixo, e a Figura 122 mostra o site em portugus do Brasil.
http://globocom.github.io/bootstrap/
151
Competncia 08
Figura 122 Site do Bootstrap da Globo.com onde voc pode baixar gratuitamente o framework.
Fonte: http://globocom.github.io/bootstrap/
Aps baixarmos o framework temos a rvore de arquivos da Figura 123. Ela contm trs pastas:
a pasta css tem os arquivos de estilo compactado e descompactado, como na jQuery; a pasta
img contm os cones utilizados pelo framework; e a pasta js contm os arquivos JavaScript que
utilizam a jQuery. Observe que a biblioteca jQuery no est entre eles. Devemos fazer o
donwload e colocar. O melhor lugar na pasta js. Assim, faa o download da jQuery, se no a
tiver, e coloque na pasta js.
Figura 123 rvore de arquivo do framework Bootstrap.

152
Competncia 08
Agora crie um arquivo HTML com a estrutura bsica que mostramos na competncia anterior.
Relacione esta pgina com a biblioteca jQuery, depois com o CSS e o JavaScript do BootStrap. O
cdigo para isto est na Figura 124.
Figura 124 Arquivo index.html com a incluso do CSS e arquivos JavaScript do Bootstrap e da biblioteca
jQuery.
O Bootstrap j possui diversos componentes com CSS e JavaScript prontos. Para utiliz-los
apenas devemos saber suas estruturas HTML e nomes de classes. Toda a documentao do
Bootstrap est em portugus e pode ser consultada no link abaixo. Nele voc pode ver como o
componente funciona, sua aparncia e o cdigo para acrescent-lo em sua pgina. Uma vez
que relacionamos corretamente o arquivo HTML com os arquivos necessrios do framework,
podemos copiar e colar em nossa pgina qualquer componente. Tenha curiosidade e
experimente. A Figura 125 possui uma captura de tela da pgina explicativa dos componentes.
http://globocom.github.io/bootstrap/components.html
153
Competncia 08
Figura 125 Pgina dos componentes do Bootstrap da Globo.com toda em portugus do Brasil, com
explicao dos componentes, exemplos e cdigo.
Fonte: http://globocom.github.io/bootstrap/components.html
Vamos utilizar alguns destes componentes. Por exemplo, um formulrio de login. A Figura 126
mostra o cdigo HTML do formulrio de login, com <imput> para digitar o e-mail e a senha, um
elemento checkbox e um boto para enviar os dados. Seguindo os cdigos de exemplo da
pgina explicativa dos componentes, inclumos os atributos class com os valores apropriados.
So estes valores de class que adicionam o poder do frameword.
154
Competncia 08
Figura 126 Cdigo do formulrio, com os atributos class com os valores que adicionam o poder do
bootstrap.
Na Figura 127 temos a exibio da pgina no navegador. Observe como a pgina j aparece
estilizada corretamente.
Figura 127 Resultado no navegador j formatado pelo Bootstrap.

155
Competncia 08
Nesta competncia mostramos rapidamente um exemplo de como utilizar o Bootstrap para

acelerar a construo de um site. Mas para utiliz-lo adequadamente voc deve conhecer bem
o framework, ento, leia, pesquise e enriquea os seus conhecimentos. Voc ser um
profissional melhor quanto maior for o tempo investido em aprendizado.
156
Concluso
Chegamos ao final de nosso caderno de estudos. Foi um excelente investimento de tempo que
voc fez ao se dedicar a este curso, mas para se tornar um profissional necessrio mais
pesquisa e investimento, afinal esta rea de criao para web gigantesca.
O autor do livro Fora de Srie Outliers, Malcoln Gladwell, cita uma pesquisa sobre pessoas
que so consideradas profissionais em suas reas. Na pesquisa ele explica que para chegar a um
nvel profissional so necessrias 10.000 horas dedicadas de forma apaixonada naquilo que se
faz.
Gostando do que faz, voc presta mais ateno e entende bem melhor do que pessoas que
estudam por obrigao. Dessa forma fcil chegar s 10.000 horas. Pois . Sei que so muitas
horas estudando, testando cdigo, buscando e pesquisando sobre os assuntos vistos, mas se
voc se apaixonar pelo tema, no ser um martrio, ser sim, bem divertido.
Espero que voc tenha gostado, tanto quanto eu, de fazer este curso.
Boa sorte ao entrar nesta maravilhosa rea da profisso de web designer.
157
Referncias
GLADWELL, Malcolm. Fora de srie: outliers. Rio de Janeiro: Sextante, 2008.
KALBACH, James. Design de Navegao Web: Otimizando a experincia do usurio. Porto

Alegre: Bookman, 2009.
ROBBINS, Jeninifer Niederst. Aprendendo Web Design: guia para iniciantes. 3.ed. Porto
Alegre: Bookman, 2010.
SILVA, Mauricio Samy. HTML 5: a linguagem de marcao que revolucionou a WEB. So Paulo:
Novatec Editora, 2011.
SILVA, Mauricio Samy. CSS3: desenvolva aplicaes web profissionais com o uso dos poderosos
recursos de estilizao das CSS3. So Paulo: Novatec Editora, 2012.
SILVA, Mauricio Samy. Construindo sites com CSS e (X)HTML: sites controlados por folhas de
estilo em cascata. So Paulo: Novatec Editora, 2008.
SILVA, Mauricio Samy. Criando sites com HTML: sites de alta qualidade com HTML e CSS. So
Paulo: Novatec Editora, 2008.
SILVA, Mauricio Samy. JQuery: a biblioteca do programador Javascript. 2.ed. So Paulo:

Novatec Editora, 2010.
ZEMEL, Tcio. Web design responsivo: pginas adaptveis para todos os dispositivos. So
Paulo: Casa do Cdigo, 2012.
158
Minicurrculo do Professor
Ronnie E. S. Santos aluno de Doutorado no programa de ps-graduao em Cincia da

Computao do Centro de Informtica, Universidade Federal de Pernambuco (CIn - UFPE).
Possui ttulo de Mestre em Cincia da Computao, com nfase em Engenharia de Software,
pela mesma instituio e de Bacharel em Sistemas de Informao pela Universidade Federal
Rural de Pernambuco (2012). Tem experincia com pesquisas na rea de Engenharia de
Software e Informtica na Educao. Profissionalmente, tem experincia em docncia, sendo
professor de disciplinas da rea de Engenharia de Software, Teoria da Computao e
Linguagens Formais e Autmatos. Na indstria de software atuou como Engenheiro de Testes
do projeto CIn/Motorola e como Analista de Requisitos de Software do projeto GenNet
(UFRPE/AACD).
159

Caderno de INFO (Web Design 2015.2)

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Caderno de INFO (Web Design 2015.2)

Încărcat de

Drepturi de autor:

Formate disponibile

Web Design

Ronnie Edson de Souza Santos

Curso Tcnico em Informtica

Contedo produzido para os Cursos Tcnicos da Secretaria Executiva de Educao Profissional

2.Competncia 02 | Planejar um Website ....................................................................................... 32

2.2.8 Paginao ................................................................................................................................. 43

3.Competncia 03 | Conhecer os Modelos de Representao e Organizao de Website ............... 47

4.Competncia 04 | Elaborar Layouts para Web Sites ..................................................................... 58

4.2.6 Nunca justifique o texto ............................................................................................................ 72

5.Competncia 05 | Conhecer os Padres Definidos pela W3C para Representao e Criao de

6.Competncia 06 | Formatar um Website Usando os mais Modernos Padres de Marcao de

6.8 Novas Tags HTML 5 .................................................................................................................... 102

8.Competncia 08 | Construir um Website.................................................................................... 137

Concluso ...................................................................................................................................... 157

As trs primeiras competncias so responsveis pelas informaes relativas ao planejamento

Utilizaremos tcnicas profissionais e conheceremos os principais sistemas de

navegao. Para finalizar, na terceira competncia conheceremos os Modelos de

Representao e Organizao de websites e entenderemos a complexidade do projeto atravs

Contamos com voc!

1.Competncia 01 | Elaborar um Escopo de Projeto para Programao

1.1 O Surgimento da internet

mundo. Um mundo de bits, a menor unidade de informao do computador, que circula de

Figura 1 - A internet conectando o mundo

A rede mundial de computadores, ou Internet, surgiu na dcada de 1960, durante o perodo da

Descubra mais sobre a internet. Acesse

A internet um sistema de comunicao entre computadores ao redor do planeta. Ela d o

professores universitrios, principalmente dos EUA, trocavam ideias, mensagens e descobertas

1.1.2 World wide web

Ento, conclumos que internet e web no so as mesmas coisas. A web um formato de

Figura 2 - Mapa da World Wide Web desenhada atravs de dados do Facebook

1.1.3 Padres web

No tpico anterior, percebemos que o maior problema existente no incio da utilizao da

Descubra mais sobre a web.Acesse http://pt.wikipedia.org/wiki/WWW;./

(World Wide Web Consortium) a principal organizao de padronizao da web. Ela no

Figura 3 Site da W3C.

Veja uma animao divertida que explica o papel do design grfico.

1.1.5 Front-End e Back-End

FRONT-END a interface de interao com o usurio.

Os computadores na internet que so especializados em servir as pginas que queremos ler so

chamados de servidores. Na verdade, o servidor um programa que funciona no computador,

Na web podemos encontrar, ou construir, dois tipos de pginas:

Pginas Estticas: So aquelas que se apresentam sem movimento e sem muitas

funcionalidades, alm dos links de direcionamento. So pginas geralmente com contedo de

Figura 4 Primeira Pgina Web do Mundo.

Figura 5 Exemplo de pgina dinmica, um carrinho de compras.

1.2 Elaborar um escopo de projeto para programao visual para web

Clement Mok um designer grfico canadense, fundador do Studio Archetype, ex-diretor de

Na etapa de Design o profissional deixa a informao mais atrativa e confortvel de ser

Nesta competncia, abordaremos a etapa de Definio e iremos evoluindo pelas etapas

Abaixo, temos algumas sugestes para a fase de definio dos objetivos.

Por que deseja um site?

Quais sites que lhe chamaram mais ateno?

Qual o pblico alvo de seu negcio?

O que voc gostaria que o site tivesse?

O contedo (texto de apresentao, imagens e fotos do local, etc.) j est pronto?

Na maioria so garotas de mais ou menos 18 anos.

Uma bela foto do artista e, geralmente, tem um vdeo clipe dele.

segundo o empresrio, so adolescentes e jovens entre 13 e 23 anos.

est procurando os objetivos do site. As perguntas possuem as mesmas regras da entrevista.

Voc acessa a internet?

Quantas vezes por semana?

Se a empresa tivesse um site, qual a primeira coisa que voc procuraria?

Procuraria por mais alguma coisa?

Se voc tivesse que entrar em contato, utilizaria o e-mail ou o formulrio de contato do