Caderno de INFO (Web Design 2015.2)
160
Web Design Ronnie Edson de Souza Santos Curso Técnico em Informática Educação a Distância 2015
-
Upload
kraus-jatoba -
Category
Documents
-
view
66 -
download
42
description
caderno
Transcript of Caderno de INFO (Web Design 2015.2)
Web Design
Ronnie Edson de Souza Santos
Curso Técnico em Informática Educação a Distância
2015
EXPEDIENTE
Professor Autor Ronie Edson de Souza Santos
Design Instrucional
Deyvid Souza Nascimento Maria de Fátima Duarte Angeiras
Renata Marques de Otero Terezinha Mônica Sinício Beltrão
Revisão de Língua Portuguesa
Letícia Garcia
Diagramação Izabela Cavalcanti
Coordenação João Ferreira
Coordenação Executiva George Bento Catunda
Coordenação Geral
Paulo Fernando de Vasconcelos Dutra
Conteúdo produzido para os Cursos Técnicos da Secretaria Executiva de Educação Profissional de Pernambuco, em convênio com o Ministério da Educação (Rede e-Tec Brasil).
Agosto, 2015
S237w Santos, Ronnie Edson de Souza.
Web Design: Curso Técnico em Informática: Educação a distância / Ronnie Edson de Souza Santos. – Recife: Secretaria Executiva de Educação Profissional de Pernambuco, 2015.
159 p.: il. Inclui referências bibliográficas.
1. Educação a distância. 2. Home page (Computação). 3.
Sites da Web - Projetos. 4. Internet (Redes de computação). I. Santos, Ronnie Edson de Souza. II. Título. III. Secretaria Executiva de Educação Profissional de Pernambuco. IV. Ministério da Educação. V. Rede e-Tec Brasil.
CDU – 004.738.5
5
Sumário
Introdução ...................................................................................................................................... 10
1.Competência 01 | Elaborar um Escopo de Projeto para Programação Visual para Web ................ 13
1.1 O Surgimento da internet ............................................................................................................ 13
1.1.2 World wide web ....................................................................................................................... 15
1.1.3 Padrões web ............................................................................................................................. 16
1.1.4 Design ...................................................................................................................................... 17
1.1.5 Front-End e Back-End ............................................................................................................... 18
1.2 Elaborar um escopo de projeto para programação visual para web ............................................. 20
1.2.1 Objetivos .................................................................................................................................. 22
1.2.2 Questionário ............................................................................................................................. 24
1.2.3 Análise ...................................................................................................................................... 26
1.2.4 Público alvo .............................................................................................................................. 26
1.2.5 Personas ................................................................................................................................... 28
1.2.6 Pesquisa de campo ................................................................................................................... 29
2.Competência 02 | Planejar um Website ....................................................................................... 32
2.1 Card sorting ................................................................................................................................. 34
2.1.1 Análise de dados ....................................................................................................................... 36
2.2 Sistema de navegação ................................................................................................................. 37
2.2.1 Logotipo ................................................................................................................................... 38
2.2.2 Barra de navegação .................................................................................................................. 39
2.2.3 Menu Drop-Down ..................................................................................................................... 40
2.2.4. Bread crumb ............................................................................................................................ 40
2.2.5 Conteúdo cruzado .................................................................................................................... 41
2.2.6 Erro 404 .................................................................................................................................... 41
2.2.7. Passos ...................................................................................................................................... 42
6
2.2.8 Paginação ................................................................................................................................. 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.Competência 03 | Conhecer os Modelos de Representação e Organização de Website ............... 47
3.1 Mapa do site................................................................................................................................ 47
3.2 Fluxo de navegação ..................................................................................................................... 50
3.2.1 Páginas, arquivos e conjuntos ................................................................................................... 51
3.2.2. Conectores e setas ................................................................................................................... 52
3.2.3. Conjunto corrente ................................................................................................................... 54
3.2.4 Separações ............................................................................................................................... 54
3.2.5 Áreas e áreas iterativas ............................................................................................................. 55
3.2.6 Sistemas programados .............................................................................................................. 56
3.2.7 Exemplo de diagrama ............................................................................................................... 56
4.Competência 04 | Elaborar Layouts para Web Sites ..................................................................... 58
4.1 Wireframe ................................................................................................................................... 59
4.1.1 Gestalt para websites ............................................................................................................... 62
4.1.1.1 O Princípio 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 Tipográfica Modular ....................................................................................................... 71
7
4.2.6 Nunca justifique o texto ............................................................................................................ 72
4.2.7 Utilize menos ornamentação .................................................................................................... 72
4.2.8 Defina a cor .............................................................................................................................. 73
4.2.9 Enxergue o invisível .................................................................................................................. 74
4.2.10 Considerações ........................................................................................................................ 74
4.3 Prototipação ................................................................................................................................ 75
5.Competência 05 | Conhecer os Padrões Definidos pela W3C para Representação e Criação 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 padrões Web ................................................................................................................ 85
5.7 HTML ........................................................................................................................................... 86
5.8 CSS .............................................................................................................................................. 89
6.Competência 06 | Formatar um Website Usando os mais Modernos Padrões de Marcação de
Hipertexto ....................................................................................................................................... 92
6.1 TAGs ............................................................................................................................................ 93
6.1.1 Atributos .................................................................................................................................. 94
6.2 Doctype ....................................................................................................................................... 94
6.3 Estrutura básica do documento HTML ......................................................................................... 95
6.4 Visualizando as Páginas ............................................................................................................... 98
6.5 Nomenclatura dos arquivos HTML ............................................................................................... 99
6.6 Layout HTML ............................................................................................................................... 99
6.7 Atributos Id e Class .................................................................................................................... 101
8
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 não ordenadas ............................................................................................. 106
6.13 Tabelas .................................................................................................................................... 107
6.14 Imagens ................................................................................................................................... 108
6.15 Formulário ............................................................................................................................... 109
6.16 Links ........................................................................................................................................ 110
6.17 Finalizando .............................................................................................................................. 112
7.Competência 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
9
8.Competência 08 | Construir um Website.................................................................................... 137
8.1 Inserindo Javascript em uma página .......................................................................................... 137
8.2 Manipulando elementos HTML .................................................................................................. 138
8.3 Funções ..................................................................................................................................... 139
8.4 Eventos ..................................................................................................................................... 140
8.5 JQuery ....................................................................................................................................... 141
8.5.1 Instalação 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
Conclusão ...................................................................................................................................... 157
Referências ................................................................................................................................... 158
Minicurrículo do Professor ............................................................................................................ 159
10
Introdução
Caro (a) aluno (a), esta é a disciplina de Web Design, através da qual vamos conhecer, entender
e discutir o trabalho do design, além de aprender todo o processo de concepção, elaboração e
construção de um website. Muitas pessoas acreditam que design é uma denominação para
desenho, ou seja, que o trabalho do designer está unicamente relacionado com a estética,
formas, cores, texturas e disposições de elementos em uma página. Nesta disciplina, você vai
descobrir que o trabalho do designer, em específico do web design, vai muito além de saber
desenhar ou saber utilizar as ferramentas para a construção de sites.
Pode-se definir “Design” como a concepção de um produto no que se refere à sua forma física e
funcionalidade, ou seja ao ato de PROJETAR. Assim, esta disciplina possui um número maior de
competências, pois o processo a ser tratado não estará ligado apenas ao processo de
construção, mas principalmente ao processo de planejamento e elaboração. Por isso, dividimos
o caderno de estudo em duas partes, para ficar mais tranquilo para você trabalhar todo o
conteúdo desta disciplina.
As três primeiras competências são responsáveis pelas informações relativas ao planejamento
do futuro website que deverá estar completamente construído ao final da disciplina.
Começaremos a primeira competência entendendo um pouco sobre a internet e o mundo do
desenvolvimento de websites, iniciando pela profissão de web designer, e finalizaremos com a
elaboração um de Projeto para programação visual para web. Assim, vamos mergulhar no
domínio do problema e compreender as necessidades do cliente, do usuário 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 competência, planejar um
website. Utilizaremos técnicas profissionais e conheceremos os principais sistemas de
navegação. Para finalizar, na terceira competência conheceremos os Modelos de
11
Representação e Organização de websites e entenderemos a complexidade do projeto através
de técnicas de mapeamento visual, o que ajuda a saber quantas páginas nosso site terá e a que
se destinam cada uma delas.
Ao fim de três semanas, iniciaremos a segunda parte desta disciplina. Este segunda parte
conterá o material necessário para a produção estética e a codificação necessária para tornar
real o website que iremos planejar na primeira etapa. Dando continuidade às competências
anteriores, iniciaremos a quarta competência com a elaboração de layouts para websites, que
mostra um pouquinho de metodologias profissionais para a criação estética da identidade
visual do site, ou seja, formas, cores, entre outros elementos que formam a aparência do
website.
Posteriormente, na quinta competência, vamos conhecer os padrões definidos pela W3C para
representação e criação de websites e as tecnologias que usaremos para produzir o site. Daí em
diante, teremos uma competência para cada tecnologia. Assim, a sexta competência será para
o HTML, responsável por formatar um Website usando os mais modernos padrões de marcação
de Hipertexto. Na sétima, focaremos no CSS, usado para planejar a identidade visual de
websites usando folhas de estilo. E na última competência, teremos uma aula introdutória
sobre programação com Java Script para usarmos efeitos interessantes em nossa página.
Tenha atenção para não se confundir, certo? Esta disciplina possui duas partes de estudos e a
leitura de todo o caderno é extremamente necessária para se entender todo conhecimento
proposto. Mas não se limite apenas ao conteúdo do caderno. Dedique-se, busque mais
conhecimento para ser um profissional melhor e colher as recompensas que virão através do
seu esforço.
Ao fazer esse curso, você estará se tornando um produtor de conteúdos para a internet e não
apenas um simples consumidor da web. Esta disciplina foi construída de modo a lhe dar
conhecimento para idealizar um site, organizá-lo e desenvolve-lo. É uma jornada que lhe exigirá
dedicação não só na leitura deste caderno, mas também em fazer pesquisas para
12
complementar seu aprendizado. Deste modo, traremos até você, caro (a) estudante, as
ferramentas iniciais para você progredir por si mesmo. Você encontrará muita informação na
web, em texto e também em vídeo.
Aproveite bastante, pois esta informação é gratuita e está lá, lhe esperando. E não esqueça,
que os tutores da disciplina estarão sempre disponíveis para ajudar a sanar qualquer dúvida
sobre todo o conteúdo. Não deixe também de realizar os exercícios propostos, são eles que te
ajudam na compreensão da disciplina. Além disso, aproveite e, quando possível, refaça todos
os exemplos mostrados no caderno. Lembre-se, seu aprendizado depende de sua dedicação
nas competências desta disciplina.
Contamos com você!
Bons estudos.
13
1.Competência 01 | Elaborar um Escopo de Projeto para Programação
Visual para Web
A nossa disciplina começa de maneira a entender o domínio do problema que iremos abordar,
ou seja, quem tem o problema a ser resolvido com a construção de um website, o que a pessoa
acha que seja o problema, o que os usuários que irão utilizar o site acham e ainda o que acham
os funcionários da empresa que irá utilizar o site nas suas atividades diárias. Devemos buscar a
informação de todos que irão ter algum tipo de contato com o que será construído, para
obtermos a solução 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 questões curiosas sobre
esse universo no qual iremos trabalhar.
1.1 O Surgimento da internet
A internet vem se tornando uma ferramenta cada vez mais indispensável e importante para o
desenvolvimento e o crescimento da sociedade. Foi a internet que forneceu um suporte
necessário para que mudanças importantes acontecessem no mundo. Essa tecnologia é
considerada uma revolução de várias formas, e seu impacto é bem mais profundo do que
percebemos.
A internet é sinônimo de eficiência 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 negócios, em casa, na rua e em todos os lugares,
permitindo que as pessoas tenham aceso a coisas que antes seria praticamente impossível, pela
distância, pelo custo ou pela falta de suporte.
Os mais novos podem até se perguntar: como era possível viver sem internet? É um novo
Competência 01
14
mundo. Um mundo de bits, a menor unidade de informação 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 história. 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 década de 1960, durante o período da
história conhecida como Guerra Fria. A internet foi criada com objetivos militares, para ser
usada como uma das formas das forças armadas norte-americanas manterem as comunicações
e o contato em caso de ataques inimigos que destruíssem os meios convencionais de
telecomunicações, como rádio e telefone.
Descubra mais sobre a internet. Acesse http://pt.wikipedia.org/wiki/Hist%C3%B3ria_da_Internet
A internet é um sistema de comunicação entre computadores ao redor do planeta. Ela dá o
suporte para a troca de dados entre os computadores que estão conectados a ela. E entenda
que hoje temos computadores em casa, nos carros e constantemente conosco, através de
smartphones.
Após o seu surgimento, nas décadas de 1970 e 1980, além de ser utilizada para fins militares, a
Internet também foi um importante meio de comunicação acadêmico. Estudantes e
Competência 01
15
professores universitários, 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 começou a alcançar a população
mundial de maneira geral. A partir desta década, o engenheiro inglês Tim Bernes-Lee
desenvolveu a World Wide Web, possibilitando a utilização de uma interface gráfica e a criação
de sites mais dinâmicos e visualmente interessantes. A partir deste momento, a Internet
cresceu em ritmo acelerado. Muitos dizem que foi a maior criação tecnológica, depois da
televisão na década de 1950.
1.1.2 World wide web
A World Wide Web ou teia mundial, também é conhecida por web ou “www” e não é 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 possuía uma rede de computadores ligados à
internet com vários cientistas trocando documentos diferentes entre si. O problema é que
esses cientistas usavam sistemas operacionais diferentes e, na maioria das vezes, um
documento de uma máquina não abria corretamente em outra máquina. Ou seja, não existia
uma forma comum, padronizada, para acessar os diferentes documentos na internet.
Para resolver esse problema, Tim Berners-Lee começou 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 informações
apresentadas no formato de hipertexto. Para ter acesso a tais informações pode-se usar um
programa de computador chamado navegador.
Assista à excelente palestra de Tim no TED. A palestra está em inglês, mas possui legendas em português. Vale muito a pena.www.ted.com/talks/tim_berners_lee_on_the_next_web
Competência 01
16
Então, concluímos que internet e web não são as mesmas coisas. A web é um formato de
documento HTML, com uma forma de endereçamento URL, e uma forma de entrega desse
documento, através de protocolos. Ex.: HTTP, HTTPS, entre outros. A internet é por onde isso
tudo é utilizado.
Figura 2 - Mapa da World Wide Web desenhada através de dados do Facebook Fonte: https://termid.wordpress.com/2010/12/14/new-world-wide-web-map-based-on-facebook/
1.1.3 Padrões web
No tópico anterior, percebemos que o maior problema existente no início da utilização 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 começaram a modificá-la
para adaptá-la às diferentes necessidades.
Descubra mais sobre a web.Acesse http://pt.wikipedia.org/wiki/WWW;./
Todas essas modificações poderiam se tornar uma bagunça, se não fosse uma instituição 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
Competência 01
17
(World Wide Web Consortium) é a principal organização de padronização da web. Ela não é
uma empresa, é um consórcio internacional com quase 400 membros, que agrega empresas,
órgãos governamentais e organizações independentes com o objetivo de estabelecer padrões
para a criação e a interpretação de conteúdos para a Web. Hoje, a W3C cuida da reformulação
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 Padrões Web são recomendações do W3C (World
Wide Web Consortium), as quais são destinadas a orientar os designers e os desenvolvedores
de websites para o uso de boas práticas que tornam a web acessível para todos.
1.1.4 Design
A maioria das pessoas entende de maneira errada a profissão de designer. O termo “Design”
não se traduz como desenho, e sim como projeto. A palavra para desenho é draw. O designer
projeta não só a parte visual, mas, principalmente, a organização e sua estrutura para a melhor
experiência dos usuários com o sistema. No caso, o web designer é especialista no
planejamento e na produção de sites web.
O trabalho maior do web designer está antes de escrever o código do site ou de desenhar a
Competência 01
18
identidade visual do site, que são tarefas do final do processo. Fazer um site sem planejar antes
é como construir uma casa sem uma planta, sem planejar o encanamento, esgoto, parte
elétrica, 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 paciência e desenvolver todo o planejamento
da parte inicial bem elaborada. Assim, aumentaremos as chances do site desenvolvido ser um
grande sucesso!
Veja uma animação divertida que explica o papel do design gráfico. www.youtube.com/watch?v=EjMYdfdny3M
1.1.5 Front-End e Back-End
A internet possui dois lados: o início e a chegada. Quando abrimos um navegador, aquele
programa que visualiza páginas de internet, e solicitamos ver uma página, como a do Google,
por exemplo, fazemos um pedido para outro computador, que guarda a página e nos envia. A
página que estamos visualizando na nossa tela, é a chamada camada Front-End, enquanto isso,
o computador remoto que vai nos enviar os dados da página que queremos ver quando
digitamos um endereço web é o que chamamos de Back-End.
Em resumo:
FRONT-END – É a interface de interação com o usuário.
BACK- END – É o sistema responsável pela regra de negócios, webservices e APIs de uma
aplicação.
Os computadores na internet que são especializados em servir as páginas que queremos ler são
Competência 01
19
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 páginas:
Páginas Estáticas: São aquelas que se apresentam sem movimento e sem muitas
funcionalidades, além dos links de direcionamento. São páginas geralmente com conteúdo de
leitura. Essas páginas são construídas com a linguagem HTML, que não permite grandes
manobras para criar efeitos nem mais funcionalidades, além dos links.
Páginas Dinâmicas: As páginas que têm efeitos especiais e nas quais podemos interagir.
Uma página é dinâmica quando se inclui qualquer efeito especial ou funcionalidade e, para isso,
é necessário utilizar outras linguagens de programação, à parte do simples HTML.
Um exemplo de página web estática é a primeira página web criada no mundo há mais de 18
anos. Veja abaixo:
Figura 4 – Primeira Página Web do Mundo. Fonte: www.tecnoartenews.com/noticias/visite-a-primeira-pagina-web-do-mundo-criada-ha-mais-de-20-anos/
Hoje em dia a maioria das páginas web são dinâmicas, pois não possuem esta característica de
Competência 01
20
“somente leitura”. Nessas páginas você é capaz de interagir, enviar e receber dados e modificar
a página com esses dados. A exemplo disso, temos a página de login de redes sociais como o
Facebook ou a página de um carrinho de compras de uma loja de compras online.
A diferença é que nas páginas estáticas fazemos uma vez seu conteúdo e ele será copiado toda
vez que for requisitado. Nas páginas dinâmicas o conteúdo vai ser determinado por um
software que produz a página a cada requisição. O carrinho de compra em um site de vendas
online é uma página em que o conteúdo dela modifica, dependendo de nossa interação no site
de comércio online. São chamadas de páginas dinâmicas.
Figura 5 – Exemplo de página dinâmica, um carrinho de compras. Fonte: http://dicadeouro.com/conteudos/arquivos_posts/carrinho_002.gif
Esta disciplina é focada na criação de páginas de conteúdo estático, e a isso classificamos como
desenvolvimento front-end. Quando temos que desenvolver uma aplicação que irá construir as
páginas de forma dinâmica, temos então o desenvolvimento back-end. Este tipo de
desenvolvimento é mais difícil e para fazê-lo é muito recomendável que você conheça bem o
desenvolvimento front-end primeiro.
1.2 Elaborar um escopo de projeto para programação visual para web
Como mencionamos, diferentemente do que muita gente pensa, o trabalho do web design é
Competência 01
21
maior antes dele colocar a mão na massa e produzir o site. O planejamento é essencial para um
produto de sucesso e, para se planejar bem, você deve conhecer bem a situação. Dificilmente
você vai dominar toda a informação sobre a empresa e o contexto de seu cliente tão bem
quanto ele. É necessário utilizar algumas técnicas consagradas na área para conseguir entender
da melhor forma possível e resolver no menor tempo. Isto significa que você deve utilizar uma
metodologia para alcançar os objetivos.
Clement Mok é um designer gráfico canadense, fundador do Studio Archetype, ex-diretor de
criação da Apple. Ele foi o desenvolvedor da metodologia DADI para projetos de websites. DADI
é o acrônimo para Definição, Arquitetura, Design e Implantação.
Na etapa de Definição, o web design mergulha no universo do problema que será solucionado
pelo site. Ele deve investigar o máximo de aspectos ligados ao domínio do problema e coletar o
máximo de informações relevantes que o ajudem a desenvolver o site que será a solução do
problema do cliente.
A etapa de Arquitetura é uma fase complementar à Definição. Nessa fase, o web design
procura organizar todos os dados coletados e também distribuir por completo o conteúdo do
site, para que o usuário não receba toda a informação de uma vez, e ainda hierarquizá-la, para
que o usuário receba primeiro uma informação e daí, se desejar aprofundar-se mais, terá essa
opção.
Na etapa de Design o profissional deixa a informação mais atrativa e confortável de ser
visualizada. É quando planejamos quais cores são melhores para o público alvo definido na fase
de Definição, além das fontes, formas, imagens, vídeos, etc. Ainda não codificamos nada,
apenas teremos alguma coisa para mostrar ao cliente, como uma imagem do site.
Na última etapa, a Implantação, o web design terá o produto pronto. Mas o trabalho não acaba
por aí. A solução criada deve ser testada para se averiguar que realmente ela resolve o
problema que levou o cliente a desejar um site.
Competência 01
22
Nesta competência, abordaremos a etapa de Definição e iremos evoluindo pelas etapas
posteriores a partir daqui. O que você, como profissional, deve fazer é um documento que
possua as informações adquiridas através de entrevistas e questionários, além 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. Faça 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 página na web. Neste ponto, o único
usuário relevante do site é ele próprio, e se ele quer dessa forma, que assim seja.
Mas se o cliente desejar algo mais relacionado ao seu negócio, aí você terá mais trabalho. O
melhor jeito de conseguir essas valiosas informações é através de entrevista e muita atenção
nas respostas. Converse bem com seu cliente ou seu representante. Mas o que perguntar?
Realmente, é um bom questionamento.
Não existe uma receita fixa. Depende muito da experiência do profissional e do tipo do cliente.
Não há uma quantidade certa nem quais são as melhores perguntas a serem feitas. De nada
adianta se você não entender a resposta, por exemplo. Consiga o máximo de informações que
você julgar que irá ajudar na produção do site que você irá desenvolver. Peça os textos e
imagens, caso não seja você quem também 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 não pedir algo que não foi acordado antes. Com o tempo, você vai ganhando experiência e
vai descobrindo o que precisa perguntar.
Abaixo, temos algumas sugestões para a fase de definição dos objetivos.
Competência 01
23
1. Por que deseja um site?
2. Quais sites que lhe chamaram mais atenção?
3. Qual o público alvo de seu negócio?
4. O que lhe chama mais atenção nos sites que lhe agradam?
5. O que você gostaria que o site tivesse?
6. O conteúdo (texto de apresentação, 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 produção e quem será seu usuário, se ele ou os clientes dele.
Outro ponto é a multiplicidade de objetivos. Na verdade, o site possui um objetivo geral, mas
pode ter vários específicos. Os objetivos específicos são metas menores que somadas alcançam
o objetivo geral. Vejamos um exemplo.
Nosso cliente é um empresário de um músico que está lançando seu primeiro álbum. O
empresário respondeu as perguntas acima da seguinte forma.
1. Quero que o site seja um local para que os fãs de meu cantor possam conhecer um
pouco mais sobre ele, seu trabalho e sua agenda. Quero alimentar a simpatia que os fãs nutrem
por ele.
2. Os sites dos Luan Santana, Gustavo Lima e Daniel têm o mesmo estilo de música do meu
artista.
3. Na maioria são garotas de mais ou menos 18 anos.
4. Uma bela foto do artista e, geralmente, tem um vídeo clipe dele.
5. Não sei muito bem, mas poderia ter além de fotos, uma biografia e a agenda do cantor.
6. Não. Enviaremos assim que tivermos. Mas você pode começar 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 não seja bem conhecido, ele
deseja a grandiosidade que outros já conseguiram. Isso seria para atrair seu público-alvo que,
Competência 01
24
segundo o empresário, são adolescentes e jovens entre 13 e 23 anos.
Nesse caso, como teremos um público menor de idade, devemos ter cuidado com o conteúdo e
a forma como é mostrado. Também teremos que planejar o site para receber um conteúdo de
vídeo em alguma parte. No entanto, o empresário não transmite muita segurança na entrega
do conteúdo do site. Devemos, então, ter uma alternativa na manga para caso o vídeo nunca
chegue. Outro detalhe que chama atenção é a agenda do cantor. Como não estamos fazendo
um sistema de gerenciamento de conteúdo, back-end ou site dinâmico, 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 negócio e que você acredite que gostaria de ter um site estático. Esta pessoa não 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ê não precisa fazer o serviço 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 Questionário
Diversas vezes, o cliente não sabe responder as perguntas da entrevista. Os motivos podem ser
vários. Ele pode não ser um dos usuários do futuro site, nem ter intimidade com a internet.
Nesse caso, as informações podem vir de pessoas que seriam os empregados ou clientes do
negócio. Fazer uma entrevista com cada um seria demorado e, para o seu cliente, tempo é
dinheiro.
Resolvemos essa situação com um questionário. Pense bem nas perguntas e, se possível,
coloque alternativas, mas deixe um espaço para uma resposta que não esteja entre as
alternativas. Não faça muitas perguntas e não as complique. Seja claro e simples. Ao final, você
pode oferecer um brinde barato pela ajuda que as pessoas deram. Faça o questionário e peça a
alguém para ler e dar uma opinião. Ao final reproduza uma quantidade e distribua. Recolha
dando o brinde para quem respondeu. Depois, analise as respostas e mantenha o foco, você
Competência 01
25
está procurando os objetivos do site. As perguntas possuem as mesmas regras da entrevista.
Na verdade, o questionário pode ser uma opção quando o cliente não sabe responder. Temos
um exemplo ligado à área de saúde. Veja o questionário:
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 formulário de contato do
site?
Agora, vamos supor que a maioria das respostas dos usuários foi:
1. Sim.
2. De 3 a 5 vezes na semana.
3. A listagem de médicos credenciados e o telefone para marcar consultas.
4. O endereço dos locais onde posso autorizar o atendimento, de preferência que tivesse
um mapa explicativo. Também se eles oferecem outros serviços que eu possa ter direito pelo
meu plano.
5. O e-mail, mas se estivesse no site usaria o formulário de contato.
Observamos que os clientes desse negócio acessam a internet com regularidade, então
conhecem bem o meio. Notamos ainda que existe uma demanda para consultar uma
determinada informação que pode aparecer a qualquer momento na vida do cliente e mais de
uma vez. O cliente também gostaria de ter informações específicas sobre o serviço que
comprou. O site pode oferecer um formulário, que exige programação back-end, mas podemos
apenas oferecer um endereço de e-mail para contato.
Vamos ver se você conseguiu entender tudo. Faça o seu questionário, com as perguntas que você achar pertinente e distribua os papéis para algumas pessoas. Você pode até enviar por e-mail. O mais ideal é que elas sejam as clientes do negócio do amigo que lhe ajudou antes.
Depois de recebê-los preenchidos, compare os objetivos que o cliente deu na entrevista com as respostas do questionário.
Competência 01
26
1.2.3 Análise
Junte todas as informações que conseguiu adquirir, seja pelo cliente, funcionários e/ou clientes
de seu cliente. Leia com calma e tente entender as relações entre elas. Compare. Será que o
cliente entende mesmo os clientes dele?
Desse material extraia o objetivo geral e os específicos. Faça um parágrafo simples e escreva
um documento bem estruturado com títulos e subtítulos. 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 não há necessidade do texto ser tão grande.
Figura 6 – Página de capa e página um do projeto de exemplo. O seu não precisa ser igual. Este é apenas um exemplo de cuidado com o projeto. Fonte: Próprio autor.
1.2.4 Público alvo
O público alvo reúne as características comuns dos clientes. Normalmente, quando
perguntamos: quem são seus clientes? A resposta é “todo mundo”, ou algo parecido. Isto
Competência 01
27
significa que ele não sabe quem é seu cliente, ou ele deseja que realmente todo mundo seja
seu cliente. Mas não é.
O público alvo define as características 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, não vive sem internet, ou não gosta de tecnologia? Uma vez que você
conhece as características 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 não atingir ninguém, e vai “precisar de
muitas balas”, o que é caro. Mas se você escolher um alvo, neste caso o mais fácil, aumenta as
chances de acertar em cheio. A forma de descobrir o público-alvo de seu cliente pode vir por
ele mesmo, durante a entrevista, ou conversando com os funcionários que convivem com os
clientes, ou observando o fluxo no negócio. Talvez até você já conheça por experiência própria.
O mais importante é que tenha a certeza dele.
Caso você erre em determinar as características 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 usuário que é o bebê, mas outro cliente, o pai
ou a mãe. Para complicar podemos ter alguém que indica, como uma tia ou a avó. Além disso,
se o pai compra, ele vai procurar algo mais prático, se for a mãe irá dedicar um tempo maior
para observar as vantagens extras, independente do preço. Viu como pode complicar?
Vejamos um exemplo:
No caso de nosso empresário do cantor sertanejo, ele conhece bem quem é o público-alvo e
nos diz isso na entrevista: garotas com mais ou mesmo 18 anos. Entendemos que este público
busca novidade e é altamente conectado. Já na pesquisa com os clientes de uma empresa,
podemos deduzir que são pessoas que passam dos 50 anos por precisar, à medida que
envelhecem, de médicos e exames. Outra característica que podemos perceber é a de que
Competência 01
28
provavelmente a pessoa que necessite do serviço 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 são as características comuns do público-alvo do negócio que você está analisando? Defina as características mais marcantes e as que você pode deduzir sobre elas. Não se esqueça de buscar alguém com estas características para comprovar se você deduziu
certo. Lembre-se do perigo que é deduzir errado. Acrescente ao seu projeto com o título PÚBLICO-ALVO.
1.2.5 Personas
Apesar de você fazer todo esse trabalho para conhecer o público-alvo de seu site, podemos
chegar a situações que as características são tão abrangentes que é difícil 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 abrangência, temos que enxergar melhor os
estereótipos, até caso você tenha uma equipe que faça essa pesquisa e você não tenha o
contato com as pessoas reais que geraram os dados. Assim, selecione as características mais
próximas e invente uma personagem com uma história fictícia que passe a ideia do público-
alvo. Você pode colocar uma foto fictícia para ilustrar, ou utilizar um desenho para dar um
pouco mais de intimidade com aquele estereótipo.
Vamos ver um exemplo? Baseado nos dados que o empresário nos passou e em deduções
pessoais temos a persona abaixo. Lembre-se de que é uma história inventada com as
características observadas e deduzidas.
Competência 01
29
Fonte da imagem: www.reeima ges.com/photo/1270130
Maria tem 16 anos é estudante e não larga do celular com
internet. Ela e as amigas adoram música e principalmente os
cantores tal e tal. Também fazem parte de um fã clube
organizado em uma rede social virtual que compartilha
informações sobre um determinado cantor.
Agora, proponho um desafio. Não sei o público-alvo que você descobriu, mas faça no mínimo duas personas bem distintas, ou seja, com características bem diferentes. Siga o exemplo e escreva um parágrafo para cada uma com quatro linhas no mínimo. Escreva o
título PERSONAS logo abaixo no documento.
1.2.6 Pesquisa de campo
Os concorrentes são uma importante fonte de conhecimento, mas não a única. Provavelmente
eles já fizeram todo o trabalho duro e apresentam os resultados no produto. Mas copiar nunca
é o bastante. Afinal, seu site não pode ser apenas mais um. Ele deve atrair pelo diferencial. Ou
seja, o que seu site tem que os outros não têm?
Visite os sites dos concorrentes de seu cliente. Descubra o que eles têm 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 características dos sites e marcamos nossas impressões
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 semântico. Para preenchê-lo você deve visitar um site do
concorrente e, após usá-lo por algum tempo, responder a tabela com um “X” para cada
intensidade de impressão. Exemplo: ao utilizar o site, senti que o entendimento dele foi “um
Competência 01
30
tanto ruim” e sua visibilidade era “muito clara”.
O entendimento do site foi...
Muito Um tanto Nenhum Um tanto Muito
Boa Ruim
Clara Escura
As imagens que foram exibidas pareciam...
Muito Um tanto Nenhum Um tanto Muito
Granuladas Nítidas
Realistas Irreais
Inacreditáveis Críveis
Distorcidas Precisas
Você sentiu que o ambiente era...
Muito Um tanto Nenhum Um tanto Muito
Pequeno Grande
Vazio Cheio
Claro Escuro
Permanente Temporário
Monocromático Colorido
Faça 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 impressões para a maioria dos sites e
cada característica.
Sabendo por exemplo que a maioria dos sites dos concorrentes transmite sensações, como
grande, cheio e escuro; podemos ou seguir a tendência por ser uma característica que agrada
ao público-alvo, ou inovar fazendo o contrário. Passando uma ideia de pequeno, vazio e claro.
Use o bom senso.
Competência 01
31
Visite o site de ao menos três concorrentes. Capture a tela com a página inicial com printscreen e cole em seu documento, abaixo do título CONCORRENTES. Preencha a tabela
para cada um deles. Depois, escreva um resumo mencionando cada característica observada no site dos concorrentes.
Com isso, possuiremos uma boa quantidade de informação sobre o domínio do problema e podemos buscar uma solução para ele. Lembre-se de que nesta etapa de Definição, quanto
mais informação melhor. Na próxima competência, veremos a segunda etapa de nosso projeto, a fase Arquitetural.
Competência 01
32
2.Competência 02 | Planejar um Website
Anteriormente, vimos que a fase Arquitetural do DADI complementa a fase anterior, a
Definição. Antes de darmos continuidade a nossa disciplina, lembre-se de que não basta ler ou
assistir às vídeo-aulas. Nosso aprendizado é mais eficiente quando fazemos exercícios 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 importância e distribuir o conteúdo entregue pelo cliente nas várias
páginas que vão compor o site. Imagine como seria pouco agradável visitar um site onde o
conteúdo está todo misturado e em páginas gigantes que cansam só de olhar. Não queremos
que os usuários de nosso site fujam. Por isso, dedicamos um bom tempo nesta parte.
No início desta nova fase você vai precisar do conteúdo do site, que certamente construiu na
fase anterior, durante o planejamento. Assim, você poderá projetar um site eficiente para o
conteúdo obtido. A fase Arquitetural permite, então, que o web design utilize todos os dados
coletados, analise todo o conteúdo que o cliente entregou e comece a separar todo o conteúdo
em grupos que vão compor as diversas páginas do site.
Neste processo, você deve agrupar cada pedaço de informação formando grupos que têm mais
afinidade. Não se preocupe com os assuntos diferentes coletados, eles vão aparecendo à
medida que você for agrupando. Se um grupo estiver com muito conteúdo, subdivida. A ideia é
fugir da entropia, da confusão.
Existe um conceito que diz que todo sistema que não é submetido a uma força que a organiza, tende a ser uma desordem, ou seja, uma entropia.
Vejamos um exemplo do processo de criação de grupos, baseado na história do empresário
sertanejo e o seu site, que vimos na competência anterior. Nosso empresário tem pressa em
Competência 02
33
ver algo pronto e não entende que não podemos fazer um layout sem saber qual o conteúdo
que terá. Com muita conversa e jeitinho, ele aceita e solicita para sua assistente passar toda a
informação pública do artista para você. Descobrimos que o site possui pouco conteúdo, mas
existem muitas fotos e a agenda de shows. Agrupe todo o conteúdo em agregados menores.
Neste caso, temos informações pessoais sobre o artista, sua discografia, muitas fotos e uma
agenda relativamente grande, sem esquecer de que ainda teremos que colocar um vídeo e um
meio de contato. Veja abaixo.
Biografia Fotos Show Agenda
Discografia Fotos Backstage Locais de Show
Fotos Artista Promoção Contato
Videoclipe Twitter Facebook
Instagram Concurso Recados dos Fãs
Fotos dos Fãs Cartas dos Fãs Contratar Show
Usando essas informações obtidas, podemos, por exemplo, criar os seguintes grupos.
SOBRE O ARTISTA FOTOGRAFIA INFORMAÇÕES
Biografia Fotos Show Agenda
Discografia Fotos Backstage Locais de Show
Videoclipe Fotos Artista Contato
Instagram Fotos dos Fãs Recados dos Fãs
Facebook Concurso
Twitter Contratar Show
Cartas dos Fãs
Competência 02
34
Ok! Agora vamos exercitar usando as informações que você coletou na Competência anterior. Para melhorar o entendimento sobre classificação de dados coletados e grupos, junte todo o material que você pesquisou e procure algum conteúdo do negócio que você escolheu anteriormente. Se seu amigo puder lhe fornecer o conteúdo, melhor. Mas, caso
contrário, procure algum conteúdo similar pelos sites na internet. Junte uma boa quantidade de informação sobre o assunto. Pode ser em vários sites. Quando terminar,
comece a agrupar a informação. Fragmente o máximo possível. Depois, verifique em cada grupo a palavra-chave que sintetiza aquelas informações.
2.1 Card sorting
Existem várias metodologias para classificação de informação. Uma das mais conhecidas é o
Card Sorting. Utilizaremos essa técnica para classificar as palavras-chaves. Seria o mesmo que
reunir grupos. Você pode se perguntar: mas não já fizemos isso? Pois é. Fizemos do nosso
ponto de vista, mas precisamos criar algo do ponto de vista do empresário que nos contratou.
Assim, o que achamos melhor para nós pode não ser para nossos usuários. Nosso público-alvo
pode não 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
compreensível. Além disso, podemos descobrir pelo card sorting que o que achamos
conveniente separar seja um empecilho para o usuário.
O card sorting pode ser aberto ou fechado. Card sorting aberto é quando a nossa amostra tem
que achar o tema de relacionamento dos cartões. Amostra é um grupo de pessoas que
representa nosso público-alvo, e por isso deve pertencer a esse público. O número 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
critérios. E qual usar?
Quando não entendemos o domínio do problema, ou não temos certeza, podemos buscar os
temas através da amostra utilizando card sorting aberto. Isso nos dará uma pista de como o
público-alvo entende aquele conteúdo. Mas se conhecemos bem o domínio, até somos parte
Competência 02
35
desse público-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 usuários. Começamos
fazendo cartões, e em cada um deles escrevemos uma palavra da nossa lista e os temas. Afinal,
as pessoas podem associar um tema a outro. Também devemos ter folhas de papel, cada folha
escrita com o nome de um tema. Procuramos, então, as pessoas que farão parte de nossa
amostra e preferencialmente, que terão algum tipo de contato com o site que está sendo
construído. Em separado, a cada uma entregamos os cartões e pedimos para colocar em um
tema que ache adequado. Diga-lhe que pode sugerir novos temas ou criticar a existência 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 impressão 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 nós 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.
Competência 02
36
Agora é sua vez! Faça os cartões 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. Peça-lhes para classificar e dar sugestões de como cada item pode ser agrupado. Anote e
registre a classificação dos usuários.
2.1.1 Análise de dados
Finalizado o nosso Card Sorting, vamos terminar esta parte verificando como a amostra
percebe o conteúdo. Contabilize a quantidade de cada palavra em cada tema. As que tiverem
maior quantidade serão as subpáginas de nosso site. Os temas serão as páginas principais que
dão acesso ao grupo de informação.
Vamos usar nosso exemplo e ilustrar um pouco mais a situação. Imagine que a nossa amostra
de fãs de música sertaneja não foi difícil de encontrar. Poderíamos fazer com muitas pessoas e
diminuir o risco de erro ou confusão, mas nos limitamos ao tempo que tivemos para isso.
Conseguimos alguns brindes de divulgação com o empresário e distribuímos para quem
participou do card sorting. As pessoas classificaram a informação que já tínhamos coletado e
ainda dividiram alguns itens formando mais informação para o site. O resultado está
apresentado na tabela abaixo.
ARTISTA FOTOGRAFIA FÃS MÍDIA SOCIAL
Biografia Fotos Show Recados dos Fãs Discografia Instagram
Contato Fotos Backstage Cartas dos Fãs Videoclipes Facebook
Agenda Fotos Artista Concurso Twitter
Contratar Show Fotos dos Fãs Youtube
Tabela 1 – Resultado da análise do card sorting. Fonte: Próprio autor.
A análise mostra que uma página sobre o cantor seria a página inicial. Durante o card sorting
algumas pessoas perceberam a falta de um canal no YouTube e sugeriram o acréscimo. Outra
Competência 02
37
ideia foi relativa ao conteúdo dos fãs. Eles procuraram um tema Fã que não havíamos
percebido antes e, por isso, os rótulos sobre ele não aparecem.
Agora, é hora de experimentar a metodologia. Faça a análise em cima do card sorting que você fez anteriormente. Escreva uma descrição com todas as observações relevantes que a
amostra forneceu. Tanto do que você percebeu na classificação que fizeram, quanto nas ideias sugeridas de novos temas, cartões e críticas.
2.2 Sistema de navegação
Até aqui percebemos que um site pode conter um grande número de conteúdo para ser
organizado e apresentado aos seus usuários. Você pode ter notado que muitas vezes, mesmo
com o uso de técnicas eficientes de organização de conteúdos, a distribuição de elementos
pode não ser eficiente o suficiente para que todas as pessoas possam entender a organização
do site. É por isso que precisamos de Sistemas de Navegação.
Existe uma coleção de elementos de navegação que já são conhecidos dos usuários da web.
Podemos utilizá-los em nosso site para tornar a navegação mais eficiente. Como eles existem
em diversos sites, o usuário só tem que aprendê-los uma vez e se concentrar na informação e
não na navegação. Dentre os elementos conhecidos estão:
Marca;
Barra de navegação;
Menu drop-down;
Bread crumb;
Conteúdo cruzado;
Erro 404;
Passos;
Paginação;
Abas;
Competência 02
38
Camadas;
Nuvens de tags.
Mas não vamos apenas copiar algo que já existe. Você deve usar o bom senso para saber o que
usar e quando usar. Com a experiência, a tarefa ficará cada vez mais fácil. Abaixo, temos uma
lista de princípios que podem lhe ajudar a construir o seu site:
Apreensível: fácil de aprender;
Consistente: não apresentar erros ou falhas;
Reagente: responder apropriadamente aos comandos do usuário;
Propositivo: indicar alternativas claras de navegação;
Econômico: chegar ao que quer com menos cliques;
Claro: ser de fácil entendimento;
Adequado: o usuário deve sentir que aquele site foi feito para ele.
Agora, vamos ver detalhes sobre cada um dos elementos de navegação que conhecemos neste
capítulo.
2.2.1 Logotipo
Você também 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 página do site. Chamamos esta página de “Home”.
Competência 02
39
Figura 8 – Observe o retângulo vermelho no canto superior esquerdo destacando a marca do Walmart. Fonte: www.walmart.com.br/
2.2.2 Barra de navegação
A barra de navegação 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 subclassificação.
Figura 9 – O retângulo vermelho horizontal é a barra de navegação global. Ao entrar na sessão ‘Eletrônicos’ vemos no lado esquerdo a barra de navegação local. Fonte: www.walmart.com.br/departamento/eletronicos/317
Competência 02
40
2.2.3 Menu Drop-Down
Ao posicionarmos o ponteiro do mouse em cima de uma sessão, é apresentado um menu perto
do ponteiro com opções contextualizadas.
Figura 10 – Neste caso, vemos que além de um menu, a caixa oferece um produto de maior aceitação. Fonte: www.walmart.com.br/
2.2.4. Bread crumb
A tradução literal é ‘migalhas de pão’, mas não significa que vamos comer em cima do teclado.
Este termo foi utilizado porque na história de João e Maria, coletada pelos irmãos Grimm, uma
trilha de migalhas de pão foi deixada para que eles pudessem achar o caminho de volta. A ideia
é mostrar ao usuário onde ele está e quais caminhos seguiu através de links.
Figura 11 – Observe que o bread crumb começa com um ícone de uma casa, que leva a home, temos então a sessão ‘Eletrônicos’ e estamos na sessão “TV 3D”. Fonte: www.walmart.com.br/categoria/eletronicos/tv-3d/?fq=C:317/1722/&PS=20
Competência 02
41
2.2.5 Conteúdo cruzado
Quando o usuário está em uma página, uma série de links é oferecida como opções para
continuar a leitura. Normalmente, um sistema programado verifica o comportamento do
usuário para realizar uma sugestão. Mas nada impede da sugestão ser feita com links estáticos.
Figura 12 – Observe que estamos vendo um produto e na mesma página, logo abaixo, são 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 não encontra a página solicitada pelo usuário é gerado um erro de código
404. Os servidores permitem configurar uma página para dar essa informação ao usuário.
Tratando a página com a identidade visual do site mostramos seriedade ao serviço.
Competência 02
42
Figura 13 – Esta página de Erro 404 transmite a mensagem de uma forma mais simpática. Fonte: www.walmart.com.br/produto/Eletronicos/TV-3D-LG/LG/380832
A página com o erro deve ser nomeada de uma forma aceita pelo servidor. Normalmente a página é a 404.html. Faça esta página e a deixe na raiz de seu site. Caso ela não exista, a
página padrão do servidor para este erro é mostrada.
2.2.7. Passos
Quando a informação que o usuário quer deve ser obtida seguindo uma sequência de páginas,
devemos informar a ele quais são 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 comércio
eletrônico.
Competência 02
43
Figura 14 – Para finalizarmos uma compra é necessário primeiro nos identificarmos, informarmos o endereço de entrega e a forma de pagamento. Fonte: www2.walmart.com.br/checkout/content/#chooseAddress
2.2.8 Paginação
Quando a informação solicitada pelo usuário é muito grande, podemos dividir em páginas e
oferecer controles para avançar, retroceder e selecionar uma determinada página.
Figura 15 – O retângulo de contorno preto destaca os controles de paginação. Fonte: http://busca.americanas.com.br/busca.php?q=tablet
Competência 02
44
2.2.9 Abas
As abas oferecem um acesso rápido a uma sessão, além de informar quais existem e onde o
usuário está. É uma solução de navegação bem elegante quando não temos muitas sessões.
Figura 16 – Na exibição do produto as abas são 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 informação é necessária, ou se destaca perante as
outras. Quando queremos sobrepor uma informação às outras, podemos utilizar a navegação
em camadas. Dessa forma, temos duas camadas uma em cima da outra. Na camada superior a
informação é mais visível que na camada inferior. Observe o efeito na Figura 17.
Figura 17 – Neste exemplo, para prosseguir com o processo de compra é exigida a identificação do usuário. Fonte: www2.walmart.com.br/checkout/content/#chooseAddress
Competência 02
45
2.2.11. Nuvem de Tags
Normalmente utilizado em blogs que categorizam o conteúdo através de palavras-chaves, a
nuvem de tags exibe um conjunto de palavras mais acessadas, variando seu tamanho pela
quantidade de acesso. Para sua produção é necessário 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 navegação que vimos anteriormente. O usuário 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 não está no escopo deste curso. Mas existem
empresas que oferecem o serviço, tanto gratuito quanto pago. Cada empresa tem sua forma de
instalação do sistema em seu site e não seria possível descrevê-las aqui. A escolha de um
serviço também não é conveniente pela velocidade com que serviços nascem e morrem na
Competência 02
46
internet. Mas se for tão importante para seu cliente, faça uma pesquisa e estude na página do
desenvolvedor o modo como deve ser instalado o serviço.
Figura 19 – Campo para busca no site. O resultado é uma listagem de links relacionados. Fonte: www.walmart.com.br/
Com isto finalizamos esta competência. Estude as formas de navegação e decida
adequadamente qual delas utilizará. Não é necessário usar todas e, quanto menos conteúdo,
menos necessárias elas serão. Lembre-se de que em design menos é mais. Mas não deixe seu
site carente de formas de navegação.
Competência 02
47
3.Competência 03 | Conhecer os Modelos de Representação e
Organização de Website
Nesta terceira competência, vamos definir a estrutura do site utilizando conceitos de
arquitetura. Mas não é a arquitetura de construções e sim a arquitetura da informação.
Arquitetura da informação é a ciência que estuda a disposição dos elementos na página, a
estrutura de navegação e o conteúdo delas. Existem vários livros com técnicas e metodologias
sobre o assunto. Mas como nosso tempo para esta competência é limitado, iremos focar em
duas das mais importantes: Mapa do site e Fluxo de Navegação.
3.1 Mapa do site
O mapa do site ajuda a reconhecer a estrutura geral do site webs e aplicações. Quanto mais
conteúdo tem um site, mais complicado navegar por ele pode ser. Por isso, o mapa do site
ajuda o usuário na identificação de toda estrutura do site e das conexões entre as páginas.
Podemos utilizar o mapa do site para explicar à equipe que irá desenvolver o site como está
organizada a sua estrutura, além disso, também podemos mostrar o esquema para o cliente,
para que ele possa compreender a complexidade do projeto. Ainda podemos usar o mapa do
site no próprio site para ajudar o usuário na busca da localização de um determinado conteúdo.
O mapa do site é uma maneira visual e simples de exibir as partes de um website como um
todo, fornecendo um panorama completo de navegação e, em alguns casos, mostrando todas
as conexões de cada página.
Quer aprender mais e ser um profissional melhor? Acesse o link abaixo para ler mais sobre Arquitetura de Informação.
http://pt.wikipedia.org/wiki/Arquitetura_de_informa%C3%A7%C3%A3o
Competência 03
48
Veja abaixo um exemplo de mapa de site, mostrado dois tipos de visualização: hierárquico e em
tópicos.
Figura 20 – Mapa do site de um estúdio de design no formato hierárquico. Fonte: Próprio autor.
Competência 03
49
Figura 21 – Mesmo mapa do site da Figura 21, em formato tópicos. Fonte: Próprio autor.
Observe pelos exemplos que através de uma representação gráfica entendemos rapidamente a
estrutura do site. Os elementos ou as páginas podem ser dispostos de maneira hierárquica ou
ainda mostrados em uma estrutura de tópicos.
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 sessão foram produzidas nele. http://writemaps.com/
Vejamos um exemplo prático de criação do mapa do site baseado na tabela resultante de nossa
análise no card sorting. No nosso cenário, fizemos um mapa do site e apresentamos para nosso
cliente empresário. Assim, ele reconheceu as novas ideias e até se surpreendeu, pois achava
que era mais simples, e ajudou no reconhecimento do valor.
Competência 03
50
Figura 22 – Exemplo de mapa do site. Fonte: Próprio autor.
Que tal exercitarmos o conteúdo com mais um exemplo? Use as informações coletadas no seu card sorting e crie um mapa do site, mostrando como a sua página inicial se liga às
páginas secundárias e como estas se ligam às demais páginas.
Uma vez que sabemos a quantidade de páginas e como elas estão dispostas temos que
entender o fluxo de navegação.
3.2 Fluxo de navegação
Também conhecido como Fluxo de Tarefa é uma técnica que identifica caminhos ou processos
que o usuário fará enquanto avança na utilização do website ou sistema.
Competência 03
51
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 vocábulos
visuais. Seu objetivo era ter uma formalização de diagramação para fluxos de navegação.
Esta biblioteca de vocábulos visuais é simplesmente um conjunto de símbolos que compõem
um diagrama, baseado em um modelo conceitual para prover:
Caminhos para o usuário do website;
A movimentação do usuário ao longo desses caminhos através de ações;
Ações que geram resultados na navegação.
Agora, vamos ver cada um destes símbolos para gerarmos nossos diagramas.
3.2.1 Páginas, arquivos e conjuntos
A página é a unidade básica de experiência do usuário na Web. No diagrama é representada
como um retângulo simples. Ela corresponde ao que o usuário recebe em seu navegador e
pode ser feita das seguintes maneiras:
Através de vários arquivos HTML (como no caso de uma página que contém um iframe -
veremos em outra competência o que são iframes).
Ou quando temos um sistema programado (tomando como exemplo o PHP, vários
Competência 03
52
arquivos PHP podem produzir apenas uma página). Então, este retângulo seria a representação
da página que o usuário vê.
Mas, às vezes, o usuário pode solicitar o download de um arquivo que será visto fora do
navegador. Os anexos de e-mail são 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 páginas com a mesma funcionalidade, utilizamos o símbolo de
pilha de páginas. Da mesma forma com vários arquivos.
Para distinguir as páginas e os arquivos no diagrama, utilizamos rótulos com uma identificação
para cada um. Apenas escreva o nome do identificador no meio.
Observe os exemplos na Figura 24 e um exemplo com rótulos na Figura 23.
Figura 24– Da esquerda para direita: página, arquivo, conjunto de páginas e conjunto de arquivos. Fonte: http://iainstitute.org/pt/translations/garrett_visvocab-fig01.gif
3.2.2. Conectores e setas
Os hiperlinks que levam de uma página a outra são simbolizados no diagrama por linhas que
conectam os elementos. A forma hierárquica é mais organizada e pode demonstrar que o
usuário pode ir da página de cima para as opções abaixo.
Competência 03
53
Figura 25 – Da esquerda para a direita: a forma hierárquica, também chamada de árvore; e a forma aleatória. Fonte: http://iainstitute.org/pt/translations/garrett_visvocab-fig02.gif
Quando temos uma relação direcionada, como no exemplo da competência anterior, no item
3.3.7 PASSOS, onde o usuário segue em uma direção, utilizamos uma seta para demonstrar
isso.
Quando o direcionamento é forçado, ou seja, é obrigatório 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 provável caminho do usuário. À esquerda, abaixo: caminho com impossibilidade de retorno. À direita: conector com seta que termina em outro conector. Fonte: http://iainstitute.org/pt/translations/garrett_visvocab-fig03.gif
Podemos também rotular os conectores para tornar mais clara a relação. No entanto, deve-se
utilizar de forma moderada.
Competência 03
54
Figura 27 – Exemplos de rótulos em conectores. Fonte: http://iainstitute.org/pt/translations/garrett_visvocab-fig04.gif
3.2.3. Conjunto corrente
Você já clicou em um link em que apareceu não só a página, mas também um pop-up, ou até
mesmo outra página? Acredito que para a maioria dos usuários da web isso aconteceu. Quando
temos a situação descrita, a representação se dá através de um semicírculo em cima do
conector. Veja o exemplo na Figura 28.
Figura 28 - Diagrama que mostra uma página com instruções sendo abertas e um arquivo sendo baixado. Tudo isso aconteceu com apenas um clique em um link na página acima. Fonte: http://iainstitute.org/pt/translations/garrett_visvocab-fig05.gif
3.2.4 Separações
Às vezes, o diagrama pode ficar gigante e não caber no papel. Podemos interromper um
diagrama por falta de espaço e seguir em outra folha através de pontos de continuação. Os
Competência 03
55
pontos são representados por colchetes com um rótulo que identifica a continuidade. Temos
um exemplo simples na Figura 29.
Figura 29 – À esquerda, temos um diagrama com um ponto de continuação indicando a sequência na página D, em outro diagrama. À direita, temos a continuação do diagrama e outro ponto de continuação indicando a volta. Fonte: http://iainstitute.org/pt/translations/garrett_visvocab-fig06.gif
3.2.5 Áreas e áreas iterativas
Para representar um grupo de páginas que possui um ou mais atributos comuns, como um
determinado tratamento estético ou o aparecimento de uma mensagem, contornamos as
páginas com um retângulo de cantos arredondados e um rótulo.
Figura 30 – Exemplo de uma área com uma janela pop-up em comum. Fonte: http://iainstitute.org/pt/translations/garrett_visvocab-fig07.gif
Você pode ter um catálogo de produtos em que cada produto tem várias páginas 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 retângulos de bordas
arredondadas.
Competência 03
56
Figura 31- Um exemplo de uso de área iterativa para representar uma estrutura que se repete num catálogo de produtos. Fonte: http://iainstitute.org/pt/translations/garrett_visvocab-fig08.gif
3.2.6 Sistemas programados
Este curso se limita ao projeto de páginas estáticas, como vimos na introdução. No entanto, o
web design pode participar de um projeto onde programadores desenvolvem um sistema que
gera as páginas para o usuário. Nesse caso, conhecer conceitos de programação, como
estruturas condicionais, torna-se necessário. Como não faz parte do escopo desta disciplina,
não abordamos os vocábulos referentes ao assunto.
Você pode ampliar seus conhecimentos, lendo o artigo original em português e descobrindo os vocábulos para sistemas web neste link:
http://iainstitute.org/pt/translations/000332.html
3.2.7 Exemplo de diagrama
Dando continuidade a nossa sequência de exemplos, abaixo temos o diagrama feito para o site
de nosso cantor. Talvez você tenha até percebido que não colocamos um vocábulo referente ao
arquivo de vídeo do cantor, que o nosso empresário quer tanto mostrar. Isto acontece porque
não vamos dispor o arquivo para download por conta dos diretos autorais. Planejamos mostrá-
lo na página inicial e, por isso, tanto a página principal quanto o vídeo estão representados
como o conteúdo recebido no vocábulo ‘principal’.
Competência 03
57
Figura 32 – Diagrama de nosso site de exemplo. Fonte: Próprio autor.
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 navegação. Caso não tenha feito as atividades anteriores, terá que
realizá-las antes que possa continuar. Lembre-se de que fazendo os exercícios é que se aprende de verdade.
Competência 03
58
4.Competência 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 Definição entendemos o domínio do problema. Mergulhamos no universo ao qual
pertence o site que estamos construindo. É quando entendemos o usuário do nosso site, o que
ele gosta ou não, como ele se comunica e quais comportamentos que tem. Também
entendemos nosso cliente, seus objetivos e desejos com relação ao site e os concorrentes, o
que todos têm e o que os diferenciam.
Na fase de Arquitetura pensamos na estrutura do site através de design participativo, onde o
usuário participa da criação. Podemos utilizar nesta etapa o card sorting. Também aprendemos
os tipos de estrutura de navegação mais populares. Fizemos nosso mapa do site e nosso
diagrama de fluxo de navegação, para ajudar a equipe de criação, nosso cliente e até nós
mesmos a entender a complexidade do site.
Agora, passamos para a fase de Design e vamos nos preocupar em como construir todo o
conteúdo do site da forma mais atrativa para o usuário. Iremos ver um pouco sobre
conhecimento estético aqui. Mas este conteúdo é extenso demais para ser abordado nestas
simples páginas, então é necessário que você sempre pesquise na web, buscando por sites que
acrescentem conhecimento nesta área. Com o tempo, você vai adquirir experiência e
desenvolver sensibilidade suficiente para criar mais e copiar menos soluções estéticas que
funcionem.
Você pode até estar pensando que finalmente irá para a parte divertida, a de fazer o site. Mas a
coisa não funciona bem assim. Também existe uma metodologia utilizada pelos profissionais
para melhorar o processo de criação. Passaremos pela produção dos wireframes, layouts e
protótipo das páginas, antes de fazer o site. Vamos entender esses novos termos?
Competência 04
59
Na metodologia DADI, a parte do projeto estético, a criação da aparência do site, é categorizada com Design, mas vimos durante nossa jornada que o ato de design vai bem
além da aparência.
O wireframe é uma ilustração que define a estrutura de cada página: onde ficará cada
pedaço do conteúdo e elementos de navegação.
O layout está focado nos elementos visuais, a aparência propriamente dita. O layout
permite que criemos uma ou mais imagens das páginas, como um quadro estático, para
submeter à aprovação do "gosto" do cliente. Definimos todos os elementos visuais e
tipográficos que caracterizam a identidade visual e que serão colocadas no site: imagens,
ilustrações, grafismos, cores, formas, etc.
O protótipo normalmente é utilizado em sites dinâmicos, onde existe um sistema por
trás. Neste caso, a parte do designer web pode ser feita com relativa independência antes de
ser anexada ao sistema. O protótipo tem a intenção de ser o mais próximo possível do
resultado final, simulando uma função ou outra, para sentir o resultado e descobrir brechas que
passaram despercebidas quando se planejava a solução.
Então, vamos começar o trabalho?
4.1 Wireframe
Na competência anterior fizemos o esqueleto hierárquico do site inteiro. Nesta sessão vamos
fazer o esqueleto da página. Vamos utilizar uma técnica chamada Wireframe. Na Wikipedia
temos a definição de que o wireframe de site web é um guia visual básico usado em design de
interface para sugerir a estrutura de um website e relacionamentos entre suas páginas. Um
wireframe web é uma ilustração semelhante à do layout de elementos fundamentais na
interface. Normalmente, wireframes são concluídos antes que qualquer trabalho artístico seja
desenvolvido.
Competência 04
60
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 conteúdo e onde ficam os elementos de navegação. Fonte: http://f2.washington.edu/sm/sites/default/files/wire-frame.png
O wireframe pode ser feito utilizando lápis e papel ou algum programa gráfico. Existem vários
programas online destinados a esta finalidade, pagos e gratuitos. Alguns deles permitem
inclusive características interativas aos wireframes. Como você fará vai depender do estilo do
web designer. Observe na Figura 34 e 35 mais exemplos.
Competência 04
61
Figura 34 – Wireframe a mão. Fonte: http://images.sixrevisions.com/2010/10/28-36_sketchedwireframe.jpg
Figura 35 – Wireframe utilizando uma aplicação. 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 mão. Para os exemplos deste
caderno, foi utilizado o Creately em https://creately.com
Competência 04
62
Apesar dos exemplos apresentarem uma página, vamos construir a quantidade de páginas que
forem necessárias para expor todo o conteúdo do site que estamos desenvolvendo. Quando o
wireframe para determinado conteúdo mudar, teremos que fazer outro, mesmo que possua
uma alteração pequena. Às vezes, um site pode ser um hotsite, um site muito pequeno. Neste
caso podemos ter apenas um wireframe para todo conteúdo apresentado. Mas não se engane.
Pode parecer menos trabalhoso, mas não é.
Com a experiência, o processo de wireframe ficará mais fácil e intuitivo. Mas quando se é
iniciante, a tendência é 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
análise 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 Princípios da Gestalt
analisam esse fenômeno. Gestalt também é conhecida como psicologia da forma. Assim, é
fundamental que o web design considere esses princípios na produção do website. A gestalt é a
lógica científica por trás 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 Princípio da Gestalt
Gestalt é uma palavra alemã que significa "a essência ou forma de uma entidade configurada".
Esta definição pode ser a regra mais importante do design.
Se eu lhe pedisse para começar a fazer um site, provavelmente, você começaria com um
Competência 04
63
detalhe ou outro, como curvas, bordas, sombras, fontes, etc. Não que esteja errado, mas se o
cliente não gostar, todo seu esforço foi jogado no lixo. Para levar vantagem na avaliação você
precisa entender como o cérebro processa a informação 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 cérebro 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 violão. 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 violão, tocando em uma fonte com uma mulher escutando em frente a
uma casa.
Agora, vamos mostrar como os detalhes têm bem menos importância que o todo. Observe as
duas imagens da Figura 37.
Competência 04
64
Figura 37 – Outra imagem onde o todo é uma representação 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 idênticas, no entanto, existem cinco
diferenças entre elas. As diferenças são tão sutis que quase não têm impacto sobre o todo.
1. O pássaro preto no canto superior esquerdo está olhando na direção contrária.
2. O sombreiro do homem da esquerda é diferente.
3. A bengala do homem está invertida e é um pouco mais escura.
4. Os tijolos da calçada na parte inferior são maiores na imagem da direita.
5. A mulher está olhando na outra direção.
Isto acontece porque é muito mais rápido 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?
Competência 04
65
Figura 38 – Imagem em preto e branco de manchas. O cérebro busca compreen-der e entende como um dálmata farejando uma calçada. 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 não os detalhes, irá perceber
um dálmata farejando uma calçada à sombra de uma árvore. O todo é mais forte que as partes,
ao menos inicialmente. É a primeira impressão.
Com um website funciona da mesma forma. O projeto nunca é identificado inicialmente pelas
suas partes, como o cabeçalho, a navegação, conteúdo, botões. O projeto é visto como um
todo.
4.1.1.2 Aplicando a Gestalt
Treine sua visão 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 identificação que o
cérebro fará como forma do site. Alterações tentando mudar qualquer coisa que não seja a
forma principal resultarão, 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.
Competência 04
66
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 serão 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 empresário sertanejo, e fazer o wireframe do
site do cantor. Para isso, investigamos as silhuetas dos sites que ele nos deu de referência e
inovamos fazendo algo bem diferente. Aproveitando o requisito de exibir um vídeo de
divulgação do cantor, colocaremos o vídeo como fundo da página e o texto acima dele no lado
direito. Ficará bem diferente dos concorrentes. Tenho certeza de que nosso cliente irá adorar.
A Figura 40 contém o wireframe para este tipo de site.
Competência 04
67
Agora é a sua vez. Faça os wireframes das páginas que possuem conteúdo diferente, como texto, vídeo, imagens, informações tabulares. Lembre-se de que, se o seu site possui apenas um wireframe, você só poderá utilizar aquela diagramação. Caso precise de outras, significa
que você errou na sua análise de quantos wireframes seriam necessários. Pense bem.
Figura 40 – Wireframe do projeto de exemplo. Na página inicial será exibido um vídeo com fundo da página e nas outras páginas o vídeo será substituído por uma imagem grandiosa do cantor. Fonte: Próprio autor.
4.2 Layout
O layout é uma representação visual da página. Ele contém os elementos estéticos, formas,
cores, fontes, grafismos, entre outros que correspondem à aparência do site, mais ainda sem se
apresentar como um site funcional com hiperlinks e animações. O layout normalmente é feito
por cima da estrutura de wireframe.
Mas, antes de colocarmos a mão na massa, ou melhor, no lápis, e sair desenhando, vamos
compreender um pouco sobre aparência e como as pessoas apreciam ou não a estética de algo.
Estética tem seu significado, mas no nosso contexto, quer dizer como a página é percebida pelo
usuário.
Competência 04
68
Estética [...] estuda o julgamento e a percepção do que é considerado belo, a produção das emoções pelos fenômenos estéticos [...]
Saiba mais em http://pt.wikipedia.org/wiki/Est%C3%A9tica
À medida que o designer vai ganhando experiência, e adquirindo mais conhecimento, vai
aumentando sua compreensão nesta área e ampliando sua biblioteca visual. Esta experiência
vai facilitando o trabalho de criação com o tempo. Então, no começo é normal copiarmos uma
coisa ou outra que julgamos bonito, mas não podemos viver sempre atrás das criações de
outros. Temos obrigação de sempre melhorar e sermos originais.
Vamos, então, começar pelo básico? Um site deve ter uma identidade visual. Isto quer dizer
que o conjunto de páginas do site deve conter uma série de elementos que o caracterizem
como pertencentes a um contexto. Assim, o usuário sabe que ainda está naquele site e não em
outro ou, então, que saiu do site e está em outro contexto. Uma identidade visual deve ser
uniforme. Ela muda o mínimo possível para se adaptar ao conteúdo que estiliza.
Identidade visual é o conjunto de elementos formais que representa visualmente, e de forma sistematizada, um nome, ideia, produto, empresa, instituição ou serviço.
Saiba mais em http://pt.wikipedia.org/wiki/Identidade_visual
Competência 04
69
Figura 41 – O site CSS Zen Garden é como um museu. Ele expõe várias identidades visuais com qualidade profissional para a mesma página. Seria como se a página trocasse de roupa se adequando ao tema escolhido pelo autor. Fonte: www.csszengarden.com/
Onde tem criatividade não existe receita. Assim, não temos uma fórmula que resume o que
funciona ou não esteticamente em um site. No entanto, a experiência foi mostrando que
algumas coisas funcionam e outras não. Não são 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. Então, ao menos no início da carreira profissional, não
custa seguir os conselhos que vamos citar a seguir.
4.2.1 Fontes complicadas
Não utilize fontes que os usuários terão dificuldade para ler. Existe uma grande quantidade de
fontes diferentes e ornamentadas à disposição. Caso você utilize uma dessas fontes que
prejudique a leitura do conteúdo, estará sabotando o projeto do site. Como iniciante, não
arrisque. Principalmente agora em que as páginas web podem ser lidas em celulares que
possuem uma tela menor. Concentre-se em aprender quais fontes são melhores ou piores de
serem lidas. Simplicidade pode ser um elemento importante neste ponto.
Competência 04
70
Figura 42– Na imagem estamos utilizando a fonte Old English Text MT toda em maiúscula para mostrar a dificuldade de leitura em fontes ornamentais. Fonte: Próprio autor.
4.2.2 Escolhas simples
Como o mercado oferece várias fontes complicadas, utilize fontes simples. Encontre algumas
fontes que são fáceis de serem lidas e aprenda a reconhecer quais funcionam melhor em telas
pequenas e que “humor” a fonte transmite. Algumas fontes são mais sérias, outras mais
simpáticas. 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 não precisam. E agora com a utilização de dispositivos móveis como tablets e celulares
para acessar a web, isto se tornou uma preocupação.
4.2.4 Poucas fontes
Costumamos seguir uma regra básica 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 gráfico com mais de um tipo de letra, mas, se você está
começando a aprender sobre design, não se iluda. Você vai absorver muito mais se você se
esforçar para encontrar a fonte adequada para transmitir a mensagem do site e utilizar outros
aspectos como tamanho, alinhamento e até espaços em branco para enriquecer a aparência.
Competência 04
71
Figura 43 – A utilização de várias fontes descaracteriza e complica o reconhecimento. Fonte: Próprio autor.
4.2.5 Escala Tipográfica Modular
Com a produção 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 opções demais e a pessoa fica perdida em qual escolher, aumentando as
chances de fazer uma bobagem. Isto acontece com o tamanho das fontes. Para não errar, siga
uma escala harmônica. 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 razão de ser e vai
ajudar a harmonizar as relações de tamanho entre os blocos de texto de sua página.
Caso tenha interesse em saber como esta série foi produzida, acesse o link http://webdesign.tutsplus.com/articles/how-to-establish-a-modular-typographic-scale--
webdesign-14927 O texto está em inglês.
Figura 44 – Escala tipográfica modular. Fonte: http://webdesign.tutsplus.com/articles/how-to-establish-a-modular-typographic-scale--webdesign-14927
Competência 04
72
4.2.6 Nunca justifique o texto
Quando você justifica um texto em ambos os lados, direito e esquerdo, o espaço disponível
entre as palavras é estendido. A imprensa padronizou esta formatação para caracterizar os
blocos. Só que, antigamente, o texto era pensado e projetado para ficar justificado e palavras
eram substituídas para alcançar este efeito. No entanto, para a web, a justificação causa
lacunas desagradáveis que interrompem o fluxo de leitura. A aparência da página existe para
melhorar a leitura do conteúdo disponibilizado.
Figura 45 – O texto justificado interrompe o fluxo de leitura com lacunas desagra-dáveis. 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 ornamentação
Lembra da nossa regra básica “menos é mais”? Então, os elementos estéticos da página estão
ali para tornar o conteúdo mais interessante. Todos os elementos competem por atenção em
uma página, mas o principal é o conteúdo. Evite utilizar excesso de ornamentação. Basta ter um
bom motivo para colocar algo. Se você não encontra esse motivo, talvez ele não seja
necessário.
Competência 04
73
Figura 46 – Muitos detalhes podem atrapalhar ao invés de ajudar. Fonte: Padrão 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 vários tons e matizes dessa cor em conjunto.
Figura 47 – O azul da marca do Twitter é a cor dominante de suas páginas. Fonte: https://twitter.com/
Competência 04
74
4.2.9 Enxergue o invisível
Todas as dicas anteriores têm a intenção de ajudá-lo a simplificar suas decisões para que você
possa enxergar as coisas "invisíveis" no design. Ou seja, as partes vazias de nosso layout são tão
importantes quanto as que contêm elementos. Assim, o vazio direciona a visão para os pontos
com elementos, simplificando o entendimento do conteúdo.
Afinal, somos avarentos cognitivos e nos distraímos 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 espaços em branco. Você não faz ideia do quão poderoso é um espaço em
branco.
Para entender melhor a utilização do espaço 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 inglês no link
http://webdesign.tutsplus.com/articles/9-quick-wins-for-halfway-decent-design--cms-19444
4.2.10 Considerações
É claro que todos os itens anteriores são dicas para ajudar o design iniciante. Quando você
ganhar experiência poderá ir experimentando com mais segurança, 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:
Competência 04
75
Nosso cliente empresário está muito ansioso para ver o site. Mas não podemos colocar o carro
na frente dos bois. Mostraremos para ele o layout para uma análise. Se ele estiver incerto,
podemos montar um protótipo 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 correspon-dência entre elementos de navegação e conteúdo com a imagem. Fonte: Próprio autor.
4.3 Prototipação
Durante a carreira de um web designer nem todos os trabalhos serão simples. Pode acontecer
de uma empresa de desenvolvimento web contratar os serviços 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 características inovadoras onde interfaces comuns e
consagradas não funcionam. Mas como saber? Como descobrir que aquilo que funcionou tão
bem até agora, não serve para o sistema? Para isso, temos a prototipação.
A técnica simula o sistema antes de ele funcionar. Colocamos em papel as estruturas de
navegação e utilizamos uma pequena amostra para testar a aplicação. O teste consiste em
Competência 04
76
colocar o wireframe em papel na frente da pessoa e solicitar que ela faça determinada tarefa
como se fosse um sistema de verdade. Você não deve ajudar, mas deve anotar qualquer
dificuldade que a pessoa tenha. O teste repete-se com várias pessoas. Quantas puderem ou
forem necessárias. 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 não ela, para que ela não se constranja por não conseguir realizar a tarefa.
O YouTube possui diversas demonstrações de experiências de prototipação. Você pode
encontrar facilmente, procurando vídeos com as palavras-chaves ‘prototype paper’.
Assista a uma demonstração de prototipação de um sistema e de um jogo nos links abaixo. www.youtube.com/watch?v=4WbxisFDYk4 www.youtube.com/watch?v=k-nfWQLmlMk
O protótipo não é necessário quando temos sistemas pequenos e comuns, mas se você ficou na
dúvida de que sua ideia original, bem inovadora, será entendida pelas pessoas, vale a pena
realizar a prototipação para evitar decepções futuras. Sairá bem mais barato do que ter que
refazer tudo depois de pronto.
Este é o final da nossa competência 4, na próxima competência iremos conhecer os padrões
web. Os padrões são tecnologias que transformarão em realidade suas ideias. Daqui em diante
seu empenho será mais cobrado do que nunca. Por isto, leia, releia se não entendeu, faça todos
os exercícios propostos, procure novas informações na web, e tire suas dúvidas no fórum.
Chegou a hora de você mostrar seu talento. Em cada competência passada mostramos, de pouquinho em pouquinho, um rico conhecimento sobre a metodologia do web design. Tudo
isto culminou aqui. Se você não fez os exercícios anteriores, ainda é tempo de fazer. Com eles prontos, você pode criar a solução para aquele seu amigo que lhe ajudou na primeira
competência. Faça o layout para submeter ao gosto do cliente. Utilize o wireframe do exercício anterior como base para construção da aparência. Faça um layout que engaje as pessoas a
querer acessá-lo.
Competência 04
77
5.Competência 05 | Conhecer os Padrões Definidos pela W3C para
Representação e Criação de Websites
Na competência anterior finalizamos a fase de Design da metodologia DADI. Devemos ter,
agora, a aparência de todos os elementos de nosso site. Já mostramos para o cliente como ia
ficar, refinamos o layout e, se necessário, fizemos um protótipo. É recomendado sempre testar
as coisas antes de colocar no mercado, não é? Agora, vamos transformar nosso produto em um
site real. Entramos na fase mais ligada à construção agora.
Para iniciarmos, existe uma série de siglas que são referentes às tecnologias que vamos usar e
que devemos conhecer, entre elas, W3C, HTML, CSS, JavaScript, DNS, DOCTYPE, entre outras.
Mas não se assuste. Iremos com calma e você vai terminar conhecendo melhor todas essas
tecnologias.
No início de nossa disciplina, lá pela competência 1, introduzimos você um pouco no universo
do profissional web designer. Nesta competência, iremos terminar este serviço. Então, vamos
lá!
5.1 A estrutura da internet
Vimos na primeira competência uma breve história da internet. Agora, precisamos saber, por
alto, como ela funciona. Precisamos entender como é que escrevemos um endereço de um site
e como posteriormente a página 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 conexões que se assemelham a rodovias que ligam cidades e levam
produtos e serviços de um lugar a outro.
Competência 05
78
Para mais informações 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
aplicações, que são clientes, solicitam algo a aplicações servidoras. Tanto uma como outra
funcionam em computadores, que estão em locais diferentes, mas conectados pela internet.
Para que eles possam se comunicar precisam de duas informações: um endereço único e uma
forma de comunicação. Assim, cada máquina 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 vídeo uma explicação sobre a estrutura da internet www.youtube.com/watch?v=HNQD0qJ0TC4
Competência 05
79
Dessa forma, vários serviços podem utilizar a internet para funcionar. O e-mail é um deles. O e-
mail é a troca de mensagens de forma assíncrona. Isto quer dizer que a pessoa que recebe um
e-mail não precisa estar de prontidão, esperando em frente ao computador, para receber a
mensagem, como acontece no telefone, que é síncrono. O serviço de e-mail tem aplicações
clientes e aplicações servidoras que gerenciam a troca de mensagens.
5.2 URL
Vimos também, na competência 1, que a WWW não é igual à internet. A WWW utiliza a
internet como meio de tráfego para serviços que servem às páginas dos sites. Assim, nós
solicitamos uma página através de um endereço, acionamos um protocolo de comunicação
com o aplicativo que fornece a página 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 - Ilustração que mostra os passos simplificados da solicitação de uma página web para uma aplicação. Fonte: próprio autor.
As páginas ficam hospedadas em um servidor web. O mais popular é o Apache. Devemos
Competência 05
80
contratar um servidor web para que possamos disponibilizar nosso site para o mundo. Além
disso, precisamos de um endereço único para ele. Este endereço chama-se URL, Uniform
Resource Locators.
Você percebeu que apesar do IP ser um número, não digitamos números no navegador para
solicitar uma página a um servidor web, e sim nomes. Bem mais fácil, né? Esse nome é a URL,
um endereço para um determinado serviço.
Figura 51 – Navegador exibindo a página de busca da Google. A URL está na barra de navegação. Fonte: Próprio autor.
Observe na Figura 51 a URL do serviço de busca do Google para o Brasil. O endereço que está lá
é o https://www.google.com.br e é composto de várias partes. Estas partes podem ser vistas
como o nome de países, estados, cidades, bairros e ruas que o serviço dos Correios utiliza para
entregar cartas e pacotes.
Vamos conhecer melhor estas partes?
https:// é o protocolo para tráfego de páginas web de forma segura. Quando não
precisa de segurança é utilizado o http:// ;
www. é o nome do host relacionado com o site. Existe uma discussão sobre a futura
Competência 05
81
remoção desta parte. Você pode encontrar alguns URLs que não possuem esta parte;
google. é o nome do domínio. Domínio é um conjunto de recursos relacionados;
com. é a classificação do propósito do serviço. Podemos ter edu. para serviços de
educação, org. para organizações não governamentais, entre muitos outros;
br/ refere-se à localização do serviço. No caso br. é Brasil e quando não possui
localização refere-se aos Estados Unidos.
Estas partes são separadas por ponto e ao final temos uma barra. Após a barra temos o
recurso. O recurso é algum arquivo do site, podendo ser uma página html, imagem, arquivo de
vídeo, entre muitos outros, ou uma pasta onde está localizado o recurso.
É muito importante que você entenda muito bem estas partes. Observe alguns endereços web
e identifique as partes. Você terá que escrever muitos desses endereços nas páginas que fará.
5.3 URL absoluta e relativa
Ao escrevemos as páginas HTML utilizamos as URLs nos hiperlinks. Mas não precisamos
escrever a URL completa do recurso, que chamamos de absoluta. Podemos utilizar o ponto-
ponto no início da URL para copiar o que falta do endereço atual. Chamamos este endereço de
relativo.
Vamos ver alguns exemplos:
www.meusite.com.br/index.html
Endereço absoluto do recurso index.html que é uma página HTML.
www.meusite.com.br/fotos/foto001.jpg
Competência 05
82
Endereço absoluto do recurso foto001.jpg que está na pasta fotos.
O endereço relativo sempre é relativo a outro recurso, geralmente uma página HTML. Vamos
adotar, neste nosso site de exemplo, que o ponto de partida é a index.html do endereço acima.
O endereço 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 importância. Você deve entendê-lo perfeitamente para
prosseguir nas próximas competências, porque é através dessas URL que ligamos uma página a
outra com os hiperlinks. Se colocar o endereço errado, a página não será encontrada e o
usuário receberá uma mensagem de erro.
5.4 Registrando um DNS
O DNS significa Domain Name System. Cada site possui o seu domínio na internet como o
Google e o Facebook. Para um site ser publicado na internet precisa ser registrado. Cada país é
responsável por este serviço. Você pode registrar seu domínio em http://registro.br/, como no
exemplo da Figura 52. Nele você pode pesquisar se o domínio está disponível e alugar este
domínio por um determinado tempo. O valor depende do tempo, sendo que tempos maiores
de um ano possuem desconto.
Competência 05
83
Figura 52 – Serviço de registro de DNS no Brasil. Fonte: Próprio autor.
5.5 IDEs
Agora que você já conhece um pouco sobre a web, vamos colocar a mão na massa. Você pode
estar se perguntando, que programa podemos utilizar para construir páginas 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. Não 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, são as instruções para preparar um bolo, por exemplo.
Competência 05
84
Figura 53 – Página HTML escrita no Bloco de Notas do Windows e sua exibição no navegador. Fonte: Próprio autor.
Escrever todas as páginas no Bloco de Notas funciona, mas outras aplicações são especializadas
para este serviço. Chamamos de IDE (Integrated Development Environment), um ambiente
integrado para desenvolvimento. Temos várias IDEs gratuitas e pagas disponíveis 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 programação 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 extensão .html, para o navegador saber do que se
trata.
Até aqui falamos muito sobre arquivos HTML. Mas você sabe o que são estes arquivos? Antes
de explicarmos como eles são escritos, vamos expô-los de modo abrangente. Nas próximas
competências eles serão abordados de forma mais específica.
Competência 05
85
5.6 W3C e os padrões Web
A web só cresceu ao ponto que vemos hoje por conta dos padrões e do fato de que eles são
abertos, ou seja, não possuem uma empresa como dona. No entanto, um corpo sem cabeça
não sabe para onde ir. Isto quer dizer que alguma organização precisa cuidar dos padrões para
que eles possam cumprir seu propósito e evoluir cada vez mais.
Quem define e cuida dos padrões web é uma organização chamada W3C, WWW Consortium.
Quem mantém esta organização são grandes empresas que têm interesse que a web cresça e
evolua, como a IMB, Microsoft, Google, entre outras. Assim, a W3C define as regras dos
padrões, e as empresas que desejam os seguem. O que isto quer dizer?
Vamos ver no caso do padrão HTML. A W3C estuda e define como o HTML funciona para
construir documentos HTML. Então, distribui um documento, como um PDF, contendo as
regras do padrão. 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 padrão.
Figura 54 – Site da W3C em sua versão em português. Fonte: www.w3c.br/
O HTML 5 é um conjunto de novos padrões compostos pelas versões mais atuais do HTML, CSS
Competência 05
86
e JavaScript. Foi utilizado o nome HTML 5 para este conjunto por ser mais popular e facilitar a
publicidade. Existem muitos outros padrões relacionados à web, mas vamos focar nesta tríade.
Ainda nesta competência gostaria que você tivesse um primeiro contato com as tecnologias.
Nada muito complicado. Apenas o início de qualquer site. Assim, poderemos iniciar o
aprendizado de cada um dos padrões já com um conhecimento prévio. Será um exemplo bem
simples.
5.7 HTML
O HTML é um acrônimo para Hipertext Makup Language, que significa linguagem de marcação
para hipertexto. Hipertexto nada mais é que do que um texto fragmentado em páginas
conectadas por hiperlinks, e pode ser lido de forma não linear. Ou seja, você começa a ler em
um lugar e se quiser pode parar de ler e seguir para outra página, fazendo seu próprio fluxo de
leitura.
O HTML serve para estruturar, hierarquizar e agora, com o HTML 5, contextualizar o conteúdo
daquela página. Neste caso, você terá um conteúdo que será exibido na página. Formataremos
uma estrutura com uma cabeça e um corpo, depois vamos hierarquizá-la marcando os níveis
externos dos internos e, depois, poderemos contextualizá-lo para, por exemplo, o navegador
saber que aquele pedaço de texto é um menu e não um título.
Observe que não falei nada sobre cores, imagens ilustrativas, brilhos e truques. Isso se deve
porque “estilizar” não é o trabalho do HTML. Estilos é um trabalho que pertence a outro
padrão, o CSS. Mas, vamos com calma. Iremos fazer nossa primeira página, a página inicial.
Aquela que vemos pela primeira vez quando entramos em um domínio.
Esta primeira página comumente é chamada index.html, mas pode ser default.html, ou até
possuir outra extensão, index.htm e default.htm. Mas o comum, e a que vamos utilizar aqui, é
index.html. Tenha cuidado com a extensão. Se você utilizar o Bloco de Notas do Windows, ele
irá salvar com a extensão .txt, mesmo que você coloque .html. Então, verifique se no seu
Competência 05
87
arquivo não está escrito index.html.txt. Se tiver, você terá que renomear para index.html. Para
evitar que isto aconteça, ao renomear como index.html selecione a opção Todos os arquivos
no Tipo de Documento.
Comece criando uma pasta com o nome de seu projeto em um lugar fácil, 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 não colocamos o nome da
página, o servidor nos envia a index.html. É bem prático.
Observe na Figura 55 a pasta e o arquivo no Bloco de Notas.
Figura 55 – Pasta do projeto ‘cantor’ e página index.html na pasta. Observe que ainda não escrevemos nada no documento. Fonte: Próprio autor.
Agora, copie o código da Figura 56 no arquivo index.html. Explicaremos mais tarde cada uma
delas. Tenha cuidado de copiar exatamente igual. Caso erre alguma letra, a apresentação pode
não aparecer do mesmo jeito. Salve o arquivo.
Competência 05
88
Figura 56 – Código inicial do arquivo index.html. Fonte: Próprio autor.
Vamos ver o resultado. Arraste o arquivo index.html para seu navegador. Isto irá abrir esta
página nele. Observe a Figura 57, se houver algo diferente pode ser algum problema de
digitação. Na maioria das vezes, quando estamos aprendendo, os erros são de digitação. Então,
quando algo não sair como planejado, procure o erro letra por letra.
Figura 57 – Apresentação no navegador do arquivo html de exemplo. Fonte: Próprio autor.
Observe que o documento foi apresentado com uma estilização. A fonte de título está em
negrito e em um tamanho maior, com alinhamento à esquerda. O fundo da página é branco e o
texto do parágrafo é menor. O título do texto também apresenta uma distância do começo da
página até a linha, e uma distância à esquerda e abaixo. Todas as características estéticas foram
Competência 05
89
definidas pelo navegador. Quando ele não encontra um “estilo” configurado para a página, ele
utiliza esse padrão.
Para mudarmos o estilo, podemos fazer no próprio HTML, mas isto não seria profissional.
Vamos utilizar outro padrão criado especialmente para este objetivo, o CSS.
5.8 CSS
CSS é o acrônimo de Cascading Style Sheets, que em uma tradução livre seria folhas de estilo
em cascata. O motivo de ser em cascata é porque uma folha se sobrepõe a outra apenas nos
pontos que utilizamos, e sempre podemos acrescentar mais folhas por cima.
Vamos demonstrar isso. Faça um arquivo, estilo.css. Mais uma vez, tenha cuidado com a
extensão. 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. Fonte: Próprio autor.
Vamos configura a cor, o tamanho, a forma, a posição dos elementos do arquivo HTML. Copie o
texto da Figura 59 exatamente igual. Se algo sair errado, procure por erros de digitação. O CSS é
Competência 05
90
bem mais rigoroso do que HTML com relação a erros. Fique atento também às letras
maiúsculas e minúsculas no CSS.
Figura 59 – Conteúdo dos arquivos estilo.css e index.html. Fonte: Próprio autor.
Observe que também alteramos o arquivo index.html. Colocamos três linhas que estão
destacadas em azul na Figura 60. Elas servem para “amarrar” aquela página àquele estilo.
Assim, várias páginas podem receber o mesmo estilo. Se mudarmos ele, todas recebem as
mudanças.
Compare o resultado com a imagem da Figura 57. Explicaremos como isso aconteceu em outra
competência.
Figura 60 – Página estilizada pelo CSS. Fonte: Próprio autor.
Competência 05
91
Por enquanto o que vimos hoje é suficiente. Se você ainda não está seguro no que
aprendemos, faça este mesmo exemplo mais uma vez, para sentir o processo de
desenvolvimento. Não iremos demonstrar o JavaScript, por enquanto, mas ele irá funcionar
bem parecido com o CSS. Por ele ser uma linguagem de programação, vai exigir uma atenção
maior. Até a próxima competência!
Lembre-se de que seres humanos aprendem repetindo. Então, para exercitar, comece com o site de seu amigo. Aquele que nos ajudou desde a primeira competência. Faça a primeira página e o primeiro estilo para a página dele. Utilize os exemplos desta competência, mas
descubra como modificar o texto do título e o texto do parágrafo.
Competência 05
92
6.Competência 06 | Formatar um Website Usando os mais Modernos
Padrões de Marcação de Hipertexto
Agora que já sabemos o que são os padrões, de onde vieram e até já experimentamos o
gostinho de fazer o primeiro site, vamos mergulhar para valer no primeiro padrão, o HTML.
Iremos utilizar a versão mais atual do HTML na construção do site que trabalhamos até aqui,
competência por competência. Se por acaso você pulou uma, terá que voltar e ler atentamente
para entendê-la e depois continuar. Isso é necessário porque todo o caminho que percorremos
até aqui depende do anterior.
HTML 5 é o conjunto de tecnologias: HTML, CSS e JavaScript em suas versões mais recentes. A
utilização do termo HTML 5 não significa que tudo está apenas em um padrão. Trata-se de um
truque publicitário para melhorar sua adoção.
HTML 5 é o conjunto de tecnologias: HTML, CSS e JavaScript em suas versões mais recentes. A utilização do termo HTML 5 não significa que tudo está apenas em um padrão. Trata-se de
um truque publicitário para melhorar sua adoção.
Nos próximos passos irei explicar como construir as páginas através de marcações. Cada
marcação pode parecer simples, mas seu entendimento depende que você exercite. Então,
copie o exemplo, faça os exercícios que propusermos e experimente outras formas. A internet
está abarrotada de tutoriais e vídeos que podem lhe ajudar a ter o domínio do padrão. Muita
gente até desenvolveu truques interessantes com os padrões. Então, tenha dedicação e
curiosidade que o resultado será muito bom.
Vamos começar explicando que o HTML não deve ser utilizado para estilizar uma página. Por
estilizar quero dizer colocar cores, imagens, definir fontes e posições, ou seja, dar uma
aparência agradável ao conteúdo. Ela é uma linguagem responsável por estruturar, hierarquizar
Competência 06
93
e, agora em sua nova versão, contextualizar a informação da página.
Estruturar significa que o documento terá um começo, um meio e um fim. Hierarquizar quer
dizer que teremos um conteúdo organizado, como se fossem caixas dentro de caixas, dentro de
outras caixas e assim por diante... E por contextualizar temos que uma informação é um título e
não um parágrafo, nem um endereço. Assim, nosso documento ficará bem construído para ser
utilizado pelo mundo.
6.1 TAGs
Conseguimos estas qualidades (estruturação, hierarquização e contextualização) através de
marcações. Uma marcação também é conhecida por “tag”. As tags marcam o início e o fim de
um conteúdo. Veja o exemplo da Figura 61. Nela é mostrada a estrutura da tag <p>. Esta tag
define um parágrafo. Observe que ela começa com uma tag de início <p> e uma tag de
fechamento </p>. Todas as tags de fechamento possuem uma barra comum à frente do nome
da tag. Porém, nem toda tag tem tag de início e tag de fim, Por exemplo: <br />, <img />, entre
outras.
Figura 61 – Estrutura da tag. Fonte: Próprio autor.
Vimos uma tag que possui um início e um fim, classificadas como tags de bloco. Mas também
existem tags que não 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 começam e terminam em cada linha, colocando a barra
ao final da tag.
Competência 06
94
Tenha muito cuidado com a escrita das tags. Um erro de digitação pode comprometer completamente a estrutura. Então, preste atenção nos símbolos < , > 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 informações para ser complementadas, como por exemplo, a URL
com o endereço de onde está a imagem que deve ser apresentada. Temos, então, os atributos
da tag. Os atributos possuem uma palavra-chave, o símbolo 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 também na Figura 62 que a tag <img> é em linha, ela
começa e termina na mesma tag, não possuindo uma tag de fechamento.
Figura 62 – Tag <img> com dois atributos, src que diz o endereço da imagem no servidor, e o alt com um texto, que é exibido se a imagem não puder ser mostrada. Fonte: Próprio autor.
Assim, um documento HTML nada mais é que um texto misturado com as tags.
6.2 Doctype
Como dissemos anteriormente, estamos aprendendo a última versão do padrão HTML,
chamada de HTML 5, mas existiram outras versões que eram diferentes em alguns aspectos. Na
internet existem todas estas versões. Para não ficar confuso enquanto lê o documento, temos
uma declaração que diz exatamente isso.
Competência 06
95
Figura 63 – Tabela com as versões do HTML e o ano de lançamento. Fonte: www.w3schools.com/html/html_intro.asp
O DOCTYPE é uma declaração que informa à aplicação que lê o documento HTML qual seu tipo
para, assim, poder ser lido corretamente. A declaração deve ser escrita em uma das três formas
da Figura 64, e deve ser exatamente a primeira linha do documento.
Figura 64 – Três opções de declaração. A mais comum é a primeira. Não deve haver de forma alguma qualquer outra linha acima desta. Fonte: Próprio autor.
DOCTYPE não é uma marcação nem faz parte do HTML. Ela é uma declaração de que tipo e versão de documento ele é.
6.3 Estrutura básica do documento HTML
Todo documento HTML se divide em duas partes. A primeira parte informa alguma coisa sobre
o documento, como o seu título. A segunda parte é o conteúdo do documento. Existem tags
específicas para cada uma destas partes, mas caso você erre e coloque tags erradas nos lugares
errados o navegador, quando ler, vai ignorar. Mas não faça isso. Alguns softwares podem ler
páginas para deficientes visuais e, em alguns casos, os erros podem impedir a leitura correta.
Competência 06
96
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 básica de um documento HTML começa pela tag <HTML>. Ela irá englobar duas
tags: a <head> (cabeçalho) e a <body> (corpo).
A tag <head> guarda tags que dizem alguma coisa sobre o documento, como a tag
<title> que dá um título para o documento.
A tag <body> engloba o conteúdo e as tags que estruturam este conteúdo. Isto fica
melhor de ser entendido na Figura 66.
Figura 66 – Estrutura básica de um documento HTML. Fonte: Próprio autor.
Competência 06
97
Para entender melhor esta história de hierarquização 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 página HTML se assemelha a caixas dentro de caixas. Fonte: Próprio autor.
Você deve prestar bastante atenção a esta hierarquia para não errar misturando as tags. A
Figura 68 mostra uma forma errada de tags. Quando algo de estranho acontecer na página
pode ser um erro nesta hierarquia.
Figura 68 - Forma errada. As tags de abertura e fechamento se misturam. Fonte: Próprio autor.
Toda página deve ter as tags <html>, <head> e <body> da forma como foram mostradas.
Tags HTML não diferenciam marcações em maiúsculas ou minúsculas, ou seja, <P> significa o mesmo que <p>. Nós utilizamos tags minúsculas porque o World Wide Web Consortium (W3C)
recomenda minúsculas em HTML 4, e exige etiquetas minúsculas em XHTML.
Competência 06
98
6.4 Visualizando as Páginas
O propósito de um navegador (como o Google Chrome, Internet Explorer, Firefox, Safari) é ler
documentos HTML e exibi-los como páginas da web. O navegador não exibe as tags HTML, mas
usa as tags para determinar como o conteúdo da página HTML deve ser apresentado para o
usuário.
Para testar as páginas que você construir, basta arrastar o arquivo em um navegador aberto, ou
digitar, na barra de endereço, o endereço do arquivo. Como se fosse uma URL. Veja na Figura
69 a nossa página de exemplo sendo exibida.
Figura 69 – Exibição da página de exemplo da Figura 36. Fonte: Próprio autor.
Observe que a aba da janela, destacada em vermelho na Figura 69, mostra o texto escrito
dentro da tag <title>, “Título da página”. Já no espaço de exibição da página, está nosso título e
parágrafo. Mas observe que eles estão formatados. Mesmo que não tenhamos definido um
estilo, os navegadores possuem um estilo CSS padrão que dá margens, define cores (letras
pretas em fundo branco), fontes, tamanhos, etc. Como o navegador se preocupa com a
apresentação, então, caso o desenvolvedor não tenha se preocupado em definir um estilo, ele
usa o estilo padrão presente em todos os navegadores.
A construção da aparência de uma página seguindo o HTML e o CSS chama-se renderização da
página.
Competência 06
99
Documentos HTML ignoram o pulo de linha e quando há mais de um espaçamento na renderização. utilizamos tags e códigos para isto.
6.5 Nomenclatura dos arquivos HTML
Os arquivos HTML são armazenados nos servidores aguardando que alguém os solicite. O
servidor é uma aplicação, como seu navegador, e possui algumas regras para os nomes dos
arquivos que estão hospedados nele.
NUNCA utilize caracteres especiais como letras acentuadas e símbolos (!, @, #, $, %, ¨,
&, *, (, ), entre outros.). Mesmo que eles possam ser visualizados em seu navegador, o servidor
pode não aceitar. Então, apenas utilize nomes simples;
NUNCA utilize espaço para nomes compostos. As URLs não podem ter espaçamento em
seus nomes. Coloque tudo junto se utilizar nomes compostos;
Não aconselhamos a utilização de letras maiúsculas. Alguns servidores mais antigos não
as aceitam. Utilize apenas letras minúsculas e/ou números para se garantir.
6.6 Layout HTML
O layout HTML pode ser produzido através de tags <div>. Elas isolam áreas e podem ser
configuradas pelo CSS para terem a aparência que você quiser. Lembra-se do início da
competência 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 conteúdo em uma coluna que sempre fica à direita,
“encaixotamos” o título e o menu e embaixo deixamos uma área para as mídias sociais e mais
Competência 06
100
alguma informação.
Figura 70 – Planejamento do layout HTML baseado no wireframe de exemplo. Fonte: Próprio autor.
Vamos agora estruturar todo o conteúdo do site com as tags no documento HTML.
Nossa primeira página é a index.html. A Figura 71 mostra o código básico de qualquer página
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 exercício fizer,
melhor vai entender. Comece sempre pelos mais simples, depois você pode buscar layouts mais
complexos.
Competência 06
101
Figura 71 – Construção da estrutura através de tags <div>. Fonte: Próprio autor.
6.7 Atributos Id e Class
Na Figura 70 as tags <div> estão com um atributo, chamado id. Este atributo identifica aquela
tag com um nome único. Não devemos utilizar, no mesmo documento HTML, o mesmo id em
tags diferentes. Lembre-se de que o id é como um número 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 minúsculas e sem acentos ou caracteres especiais. Não utilize nomes compostos.
Tanto o id quanto o class não servem para nosso HTML. Mas vão servir muito para a estilização
com CSS, por isso faz sentido entendermos isso agora, por causa de nosso próximo tópico.
Competência 06
102
6.8 Novas Tags HTML 5
O HTML 5 foi lançado para atender vários objetivos. Entre eles está a semântica das
informações do documento. Por exemplo, boa parte dos sites da internet tem uma informação
chamada endereço. Utilizando id e class podemos identificar e classificar, mas como cada um
pode colocar o identificador que quiser para elas, ficamos na mesma situação. Assim, o HTML 5
provê novas tags para dar significado à informação de forma padronizada.
A Figura 71 mostra uma tabela com as tags mais usuais e sua finalidade.
TAG DESCRIÇÃO
<header> É o início de alguma sessão. Pode ser do próprio documento onde fica a marca do site.
<footer> É a finalização daquela sessão. Em uma página de produto em uma loja virtual, o footer pode englobar dicas de produtos que outras pessoas compraram junto daquele produto.
<nav> Engloba tags referentes a algum sistema de navegação. Como aqueles que vimos em uma competência anterior.
<section> Define uma sessão do documento.
<article> É mais compreensível com a comparação de um blog que possui vários artigos. Esta tag 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 contextualizações mais utilizadas. Fonte: Próprio autor.
O HTML 5 prevê muitas outras tags e como um web design profissional é sua obrigação 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. Então,
vamos atualizar nosso documento com as novas tags. A Figura 72 mostra como ela ficou.
Competência 06
103
Figura 72 – Página formatada com as novas tags HTML 5. Fonte: Próprio autor.
Se você renderizar o documento em um navegador, não irá ver nada, porque não há conteúdo.
Apenas definimos a estrutura e a área de cada informação.
Observe que uma div continua no documento, mas vamos modificá-la no próximo tópico.
6.9 Iframe
A tag <iframe> cria uma área em nosso documento onde podemos renderizar outra página e
depois ficar trocando o conteúdo. Você não precisa utilizar <iframe> em seu site. Estou
mostrando esta técnica porque ela se encaixa perfeitamente no projeto de exemplo, onde um
vídeo irá ficar passando no fundo da página principal, enquanto o usuário pode navegar por
outras páginas sendo exibidas no <iframe>. Então, 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 página web, que é a primeira página
exibida no iframe. Note que troquei a <div> pelo <iframe>.
Competência 06
104
Figura 73 – Utilização da tag <iframe>. Fonte: Próprio autor.
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 exercício. Esta página contem informações
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 espaçamento entre as palavras. Para pularmos
linhas devemos marcar cada linha com a tag <p> que significa um parágrafo. Caso queiramos
apenas quebrar a linha, ou seja, seguir com o texto na próxima linha, podemos interromper o
fluxo utilizando a tag <br />. Procure no exemplo da Figura 74 estas tags.
Os títulos são marcados com as tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6>. A numeração
mostra os níveis de título, subtítulo e assim por diante. Em nosso exemplo, como vamos utilizar
o <h1> para o título principal do site, utilizaremos o seguinte, <h2>, para as sessões do site.
Competência 06
105
Utilizamos ainda a tag <span> nos títulos. Esta tag não faz nada além de marcar. Podemos
utilizar ela para um truque de CSS.
Figura 74 – Documento HTML da página cantor.html. Fonte: Próprio autor.
Agora podemos visualizar a página index.html que irá mostrar o conteúdo de cantor.html. A
Figura 75 mostra o resultado.
Figura 75 – Exibição da página index.html mostrando no <iframe> o conteúdo da página cantor . html. Fonte: Próprio autor.
6.11 Meta Tags
Pode acontecer de você, em seu conteúdo, utilizar caracteres acentuados e quando for ver a
Competência 06
106
página eles se mostrarem com caracteres estranhos. Para resolver isso temos que modificar a
codificação dos caracteres de nossa página. Mas, não se preocupe, é muito fácil.
Dentro da tag <head> colocamos informações sobre a página, como a codificação de caracteres
a ser utilizada. Então, vamos utilizar uma tag chamada <meta> para definir isto. A tag <meta>
pode ser utilizada para muitas informações. Veja na Figura 74 que as utilizamos para definir um
nome de autor e uma descrição, além de definir a configuração de caracteres. O autor e a
descrição servem para motores de busca, assim como o Google, que permitem adquirir
informações de quem construiu a página e a finalidade dela. Bem útil.
Copie as tags <meta> e coloque em todas as páginas do site.
6.12 Lista ordenadas e não ordenadas
Vamos agora criar outra página chamada discografia.html. Nela teremos uma listagem dos
álbuns musicais lançados pelo cantor. Para estruturarmos uma lista, utilizamos uma tag para
agrupar os itens, que podem ser <ol> para listas ordenadas e <ul> para listas não ordenadas.
A diferença é que as listas ordenadas são numeradas e as listas não ordenadas possuem um
símbolo, normalmente um ponto. Tanto a forma de numeração quanto o símbolo utilizados
podem ser estilizados através de CSS.
Independente da lista que você escolha, os itens são marcados pela tag <il>.
A Figura 76 mostra o HTML da página discografia.html e o resultado no navegador. Como as
páginas são independentes, resolvi mostrar no navegador apenas a página discografia.html.
Competência 06
107
Figura 76 – Código HTML de listas ordenadas e não ordenadas e exibição no navegador da página discografia.html. Fonte: Próprio autor.
6.13 Tabelas
Antigamente se utilizavam tabelas para juntar as imagens que estilizavam o site. Isto era um
problema sério, porque o conteúdo, a estrutura e o estilismo ficavam misturados. O CSS
resolveu isto e a utilização de tabelas se resumiu à finalidade de descrever dados tabulares.
Em nosso exemplo, na página agenda.html, temos uma tabela que apresenta de forma
organizada os dias, meses e locais de show do cantor. A estrutura de uma tabela começa com
uma tag <tabela> que engloba toda a tabela. Depois temos que criar as linhas com a tag <tr>
que irão englobar as tags <td>, que são as células. Ainda podemos fazer com que as células
superiores da tabela sejam o cabeçalho das colunas com a tag <th>. Veja o exemplo na Figura
77.
Competência 06
108
Figura 77 – Marcação para formatação de dados tabulares. Fonte: Próprio autor.
6.14 Imagens
Imagens inseridas no HTML servem para ilustrar o assunto de que se está falando. Não devem
ser utilizadas para estilizar, para isso temos o CSS. No caso de nosso exemplo, o assunto são
fotos dos shows do cantor, então, as fotos podem ser utilizadas no conteúdo do site.
Não podemos inserir uma foto no código 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 página que contenha imagem
em um pendrive, por exemplo, devemos nos lembrar de levar todas as imagens juntas.
Marcamos o local onde as imagens serão 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 edição fotográfica
Competência 06
109
como o Gimp.
Figura 78 – Código HTML da página fotos.html e renderização no navegador. Fonte: Próprio autor.
6.15 Formulário
Um formulário é uma forma de comunicação com o usuário. Ele fornece campos para coletar
informação. Estas informações vão para o servidor para serem processadas. Mas ele não é
responsável por este trabalho, o servidor apenas serve páginas, já o formulário passa os dados
para alguma outra aplicação. Normalmente um serviço de hospedagem também oferece uma
aplicação que possa processar os dados, no caso, enviar um e-mail com os dados do formulário.
Existem várias aplicações que fazem isso e todas de formas diferentes. Você precisa se informar
com seu serviço de hospedagem para saber como proceder.
Independente do serviço que você utilizará, todos vão ter um formulário HTML para coletar do
usuário e enviar a informação. O formulário é construído iniciando com a tag <form> que
precisa de dois atributos. O atributo action aponta para a URL onde os dados vão ser
processados, e o atributo method especifica a forma de envio, normalmente utilizamos o
método post.
Competência 06
110
Figura 79 – Código do formulário HTML e exibição no navegador. Fonte: Próprio autor.
6.16 Links
Já temos todas as páginas de nosso site de exemplo. O conteúdo foi distribuído nas páginas e
temos a página principal, index.html. Através dela é que vamos ter acesso a todas as outras
páginas.
Como este layout utiliza o <iframe> não temos necessidade de ter navegação nas outras
páginas, mas provavelmente seu layout deve ser diferente e neste caso você terá que ter um
sistema de navegação em cada página. Lembre-se disso.
Voltamos para a index.html e vamos construir um sistema de navegação para os usuários
poderem ter acesso ao restante do conteúdo. Para isso, vamos utilizar a tag <a>, e vamos
colocar na tag <nav> que é destinada a englobar tags de navegação. Entre os atributos da tag
<a> temos o href que deve ter uma URL como valor, apontando para a página que o link leva; e
o atributo target, que diz onde será exibida a página. Os valores mais utilizados para target
estão abaixo:
Competência 06
111
blank : abre o documento apontado em uma nova janela ou aba;
self: abre o documento apontado na própria janela ou aba. Esta opção é a padrão, se
não colocarmos o atributo target;
framename: podemos colocar o valor de um atributo name de um <iframe>, para que o
documento seja exibido naquela área.
Não queremos substituir a página index.html porque ela está exibindo o vídeo do cantor. Então,
vamos colocar o nome do iframe como valor do target. Assim, quando alguém clicar no link, a
página 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 espaço,
quando nomear algo em HTML. Por isso, “pagina” ficou sem acento.
Figura 80 – Tags que formam o sistema de navegação do site em index.html. Fonte: Próprio autor.
Podemos também colocar os hiperlinks em meio ao texto. Na Figura 80 existe um tag <a> que
marca uma palavra do texto como demonstração. Não existe um limite para a quantidade de
palavras marcadas. Você pode marcar um texto completo se precisar.
Competência 06
112
6.17 Finalizando
O site em HTML está quase pronto. Para finalizar colocamos um título com <h1> em <header> e
em <footer> colocamos mais alguns links para mídias sociais, só que ao invés de colocarmos
texto como hiperlink, colocamos no lugar imagens com a tag <img>. Também em <footer>
acrescentamos mais uma tag <address> sobre direitos autorais. Tudo isso você pode encontrar
no código da Figura 80 e visualizar na Figura 81.
Figura 81– Exibição do site em HTML. Fonte: Próprio autor.
Agora, só falta estilizar, ou seja, tornar a aparência mais agradável para o usuário se sentir
estimulado a ler nosso conteúdo. Mas isso é assunto para a nossa próxima competência!
Como exercício você pode fazer o passo a passo e repetir a construção 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 exercícios desde a primeira competência. Caso você tenha pulado algum exercício, perceba que cada competência
depende das anteriores. Então, você terá que fazer o que deixou para prosseguir. Lembre-se de que a maioria dos erros, quando estamos aprendendo, é de digitação. Então, verifique
letra por letra com bastante atenção para saber o que fez de errado.
Competência 06
113
7.Competência 07 | Planejar a Identidade Visual de Web Sites Usando
Folhas de Estilo
Na competência 5 definimos como será a aparência do site de exemplo. Você pode visualizar a
sugestão de solução para o problema do empresário do cantor sertanejo na competência
anterior deste caderno.
Agora que estruturamos todo o conteúdo do site em páginas HTML e temos até um sistema de
navegação funcional, vamos estilizá-lo utilizando outro padrão da W3C, o CSS.
Alertamos, mais uma vez, que esta competência é a continuação das anteriores. Caso você
tenha pulado competências anteriores dificilmente compreenderá esta. Você deve, então,
voltar e ler o conteúdo, fazer o exercício proposto para poder seguir adiante.
CSS é um acrônimo para Cascading Style Sheets, traduzindo significa Folhas de Estilo em
Cascata. Este padrão serve para descrever como os elementos HTML são exibidos.
No começo da WWW o HTML também era responsável pela aparência do documento. Com o
crescimento, os estilos das páginas ficaram mais complexos e se misturaram à estrutura e ao
conteúdo, o que fazia com que os documentos HTML ficassem gigantes e confusos. Mas não
era só este problema que existia. Se você tivesse um site com 200 páginas precisava copiar o
estilo, ou parte dele, em todas as páginas. Se uma alteração tivesse que ser feita, deveria ser
feita em cada uma das páginas.
Com o CSS temos um arquivo com a extensão .css onde ficam as configurações dos elementos.
Como o estilo está fora do arquivo HTML, podemos utilizar o mesmo CSS para todas as páginas.
Se alterarmos o CSS, todas as páginas seguirão as modificações. Isso poupa muito tempo e
trabalho.
Competência 07
114
Outra vantagem do CSS é que podemos ter várias folhas aplicadas no mesmo arquivo HTML. A
primeira é sempre a do navegador. Aquele estilo padrão que vimos durante a construção do
site de exemplo, quando aplicamos uma folha em uma página. As configurações desta folha se
sobrepõem a do navegador. Os elementos que não foram definidos na folha continuam com a
configuração da folha do navegador. Se houver mais uma configuração, ela se sobrepõe à
primeira e à folha do navegador. E assim por diante. Por isso que é nomeada “em Cascata”.
Vamos começar então. No documento index.html vamos “linkar”, ou seja, criar uma ligação
entre esta página e um arquivo CSS que criaremos posteriormente. Para isso, no <head> vamos
acrescentar uma tag chamada <link>. Ela possui alguns atributos padrão, então você pode
copiar, e o atributo href que contém a identificação com a localização do arquivo CSS. Observe
na Figura 82.
Figura 82 – Tag <link> relacionando uma folha de estilo à página index.html. Fonte: Próprio autor.
Crie também 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, não iremos observar, por agora, qualquer modificação na
renderização da página 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
Competência 07
115
regras. Assim, o estilo é definido por um seletor e um bloco feito de chaves { }, com as regras
que definem a aparência 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 estilização no arquivo CSS. Em azul, está a explica-ção dos elementos. Fonte: Próprio autor.
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 são todas as tags <p> daquela
página. Note que relacionamos apenas uma página ao CSS, então apenas ela será alterada.
Ainda podemos utilizar o atributo id como seletor. A vantagem do atributo id é que seu valor
deve ser único naquela página onde se encontra. Para utilizarmos um id como seletor
colocamos um símbolo de tralha (#) na frente do valor do identificador, Figura 84.
Figura 84 – Utilização do atributo id como seletor. Fonte: Próprio autor.
Competência 07
116
Quando temos vários elementos com a mesma estilização, 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 – Utilização do atributo class como seletor. Fonte: Próprio autor.
Quando vários seletores possuem as mesmas regras, não precisamos repetir as regras.
Separamos os diversos seletores com vírgula, 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. Fonte: Próprio autor.
Por último, podemos especificar um elemento. Para isso, fazemos uma lista sem separação. No
exemplo da Figura 87, todas as tags <p> englobadas pelo elemento com o id igual a centro são
modificadas.
Competência 07
117
Figura 87 – Especificação de elementos. Fonte: Próprio autor.
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 alterações e depois ler o segundo,
também aplicando as alterações.
Normalmente quando uma regra não apresenta modificações é porque o nome do seletor está
errado.
7.3 Cores
Alguns valores de atributos são definições de cores. Em CSS as cores podem ser descritas de
várias formas. As mais usadas são através de código hexadecimal e palavras-chaves referentes
a uma cor. A Figura 88 mostra as duas definições de cores, referentes ao vermelho. O código
hexadecimal começa sempre por tralha (#).
Figura 88 – Representação de cores em CSS. Fonte: Próprio autor.
Competência 07
118
Você pode ter acesso às palavras-chaves neste link: www.w3schools.com/cssref/css_colorsfull.asp
7.4 Background
Através da propriedade background podemos modificar o fundo do elemento. Na Figura 89
temos as propriedades relativas ao background.
PROPRIEDADE DESCRIÇÃO
background-color Define a cor de fundo do elemento.
background-image Define uma imagem para o elemento.
background-repeat Define a repetição da imagem.
background-attachment
Define o comportamento da imagem quando rolamos a página no navegador.
background-position
Define a posição da imagem no fundo do elemento.
background Esta propriedade reúne os efeitos anteriores, desde que na ordem em que foram apresentados nesta tabela, de cima para baixo. Pode ter ausências.
Figura 89 – Tabela com as propriedades relativas ao background. Fonte: Próprio autor.
O código hexadecimal possui uma gama de cores bem maior que as palavras-chaves. Este link lhe dá acesso a uma página que pode lhe fornecer o código hexadecimal através 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 não irá se repetir, o “attachment” será fixo se o usuário rolar a
página, e a posição da imagem será centralizada em relação ao elemento. Observe o código e o
resultado na Figura 90.
Competência 07
119
Figura 90 – CSS do background de <body> e seu resultado no navegador. Fonte: Próprio autor.
7.5 Text
As propriedades referentes ao texto mais usadas estão listadas na Figura 91. Algumas
propriedades são herdadas pelos seus elementos filhos. Caso isto aconteça e você não queira,
terá que redefinir os elementos que mudaram.
PROPRIEDADE DESCRIÇÃO
color Define a cor do texto no elemento.
text-align Define o alinhamento do texto no elemento.
text-decoration Serve para definir e remover a decoração do texto, como o sublinhado.
text-transform Modifica o texto para maiúsculas, minúsculas, capitulares, etc.
text-indent Define o recuo do texto no início do parágrafo. Figura 91 – Propriedades referentes à decoração de texto. Fonte: Próprio autor.
Observe em nosso exemplo a última linha. Ela está na tag <address>. Vamos deixar toda em
maiúscula e centralizada. Veja o código e o resultado no navegador na Figura 92.
Competência 07
120
Figura 92 – Código da mudança das propriedades do texto e seu resultado. Fonte: Próprio autor.
7.6 Font
O navegador utiliza as fontes instaladas no computador para exibir o texto. Caso você defina
uma fonte que não exista naquele computador, o navegador tentará substituí-la. Quando a
fonte que você utilizar não for popular, melhor utilizar uma imagem no lugar. Você pode utilizar
um termo genérico como sefif, sans-serif e monospace. Neste caso você não diz a fonte e sim o
seu tipo. E o navegador tenta encontrar a melhor fonte daquele tipo no computador do
usuário. Podemos modificar as propriedades da fonte do texto através da propriedade font,
Figura 93.
PROPRIEDADE DESCRIÇÃO
font-family Define a família de fontes para aquele elemento. Podemos colocar várias opções separadas por vírgulas. Se houver nomes compostos na fonte, utilizamos aspas duplas. Exemplo: “Times New Roman”
font-style Define o estilo como normal, itálico ou oblíquo.
font-size Define o tamanho da fonte do texto daquele elemento. O tamanho pode ser definido de várias formas. A mais utilizada é px (pixel) ou pt (pontos).
font-weigth Define a largura da fonte. Seria o nível de negrito.
font Configura todas as propriedades acima em uma declaração. Pode haver ausências, mas a ordem acima deve ser respeitada.
Figura 93 – Efeitos relativos à propriedade font para textos. Fonte: Próprio autor.
Competência 07
121
Vamos configura a font de vários 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. Também
modificamos os links <a> para serem brancos e retiramos a decoração (sublinhado).
Figura 94 – Exemplo de utilização das propriedades de font. Fonte: Próprio autor.
7.7 Links
Quando no exemplo eu tirei a decoração (sublinhado) dos links, o usuário perdeu o indicativo
de que ali se encontra um hiperlink, que no caso é o sublinhado. Vamos fazer com que, quando
o usuário esteja com o ponteiro por cima do link, apareça o sublinhado.
Para isso vamos modificar um dos quatro estados do link. Abaixo estão todos eles.
link: link normal, não 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 não são propriedades, é outra
forma de seletor para a tag <a>. Para utilizarmos, colocamos o seletor “a” seguido de dois
Competência 07
122
pontos e o estado que desejamos modificar. Veja no exemplo da Figura 95.
Figura 95 – Utilização de estados da tag <a> com CSS. Fonte: Próprio autor.
Note no destaque em vermelho a modificação do estado hover de <a> para exibir a decoração
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 DESCRIÇÃO
List-style-image Define uma imagem para o marcador.
List-style-position Define se o marcador fica dentro ou fora do fluxo.
List-style-type Define o tipo do marcador. Tipos: circle, square, upper-roman, lower-alpha, entre outros.
List Configura todas as propriedades acima em uma declaração. Pode haver ausências, mas a ordem acima deve ser respeitada.
Figura 96 – Propriedades relacionadas à formatação de listas. Fonte: Próprio autor.
Temos uma lista em nosso site e queremos modificar de círculo para quadrados. No entanto,
perceba que anteriormente as páginas exibidas no iframe não podem ser vistas porque seu
Competência 07
123
texto pertence a outro HTML e não 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
página, com exceção da index.html, vamos relacionar a este novo CSS. Assim, a index.html fica
relacionada ao estilo.css e o restante das páginas ao estilopagina.css.
Caso não lembre como relacionar uma página a um CSS, releia o tópico 8.
O código do novo CSS e o resultado da estilização da list está abaixo. Aproveitamos e definimos
as configurações para <p> e o título em <h2>. Compare com as configurações no outro estilo
para entender melhor.
Figura 97 – Arquivo estilopaginas.css, com as configurações da lista não ordenada <ul> estão des-tacadas em vermelho. Trocamos de “disc” para “square”, que é visível no navegador ao lado. Fonte: Próprio autor.
7.9 Border
Configurações de borda podem ser utilizadas em várias tags, vamos demonstrar no <iframe> e
nas bordas. Para isso, vamos editar o arquivo estilo.css que define o estilo para index.html, a
página que contém o <iframe>; e em estilopagina.css que define o estilo para as outras
Competência 07
124
páginas, incluindo agenda.html, que contém a tabela.
A Figura 98 traz uma tabela com as propriedades referentes à border. Alertamos que a
propriedade de estilo é obrigatória para visualização.
PROPRIEDADE DESCRIÇÃO
border-botton Define todas as propriedades da borda inferior do elemento em uma única declaração.
border-botton-color Define a propriedade de cor da borda inferior.
border-botton-style Define a borda inferior com o estilo: solid, dotted, double ou dashed.
border-botton-width Define a largura da borda inferior.
border-left Define todas as propriedades da borda esquerda do elemento em uma única declaração.
border-left-color Define a propriedade de cor da borda esquerda.
border-left-style Define a borda esquerda com o estilo: solid, dotted, double ou dashed.
border-left-width Define a largura da borda esquerda.
border-right Define todas as propriedades da borda direita do elemento em uma única declaração.
border-right-color Define a propriedade de cor da borda direita.
border-right-style Define a borda direita com o estilo: solid, dotted, double ou dashed.
border-right-width Define a largura da borda direita.
border-top Define todas as propriedades da borda superior do elemento em uma única declaração.
border-top-color Define a propriedade de cor da borda superior.
border-top-style Define a borda superior com o estilo: solid, dotted, double ou dashed.
border-top-width Define a largura da borda superior.
border-color Define a propriedade de cor de todas as bordas.
border-style Define a propriedade do estilo de todas as bordas.
border-width Define a propriedade de largura de todas as bordas.
Border Define todas as propriedades da borda do elemento em uma única declaração.
Figura 98– Propriedades de border. Fonte: Próprio autor.
A Figura 99 mostra as configurações de <table> em estilopagina.css. Colocamos uma borda de 2
pixels de largura, na cor cinza e com traço sólido. Ainda definimos a cor de background de <td>
para o mesmo tom de cinza do traço. Não alteramos o cabeçalho <th>.
Note que a borda do <iframe> desapareceu. Para isso, definimos border: 0px em estilo.css, que
Competência 07
125
governa a aparência de index.html.
Figura 99 – Configuração de <table> com uma borda de 2 pixels de largura, na cor cinza e o traço sólido. Ainda definimos a cor de background de <td>. Fonte: Próprio autor.
7.10 Modelo de caixa
Se você está prestando atenção no curso, deve ter percebido uma propriedade na Figura 99 em
<table> chamada width que não explicamos. Essa propriedade define a largura do elemento.
Mas para entender como determinamos a largura do elemento precisamos compreender
melhor como é construído o elemento.
Todo elemento HTML pode ser comparado com caixas, daí o nome Modelo de Caixa. O modelo
de caixa basicamente é um retângulo que envolve o elemento, seja ele qual elemento for. Ele é
composto de alguns elementos, veja a Figura 100, que são:
Margin: Uma área transparente ao redor da borda;
Border: Uma borda que circula o preenchimento do conteúdo;
Padding: Uma área transparente que envolve o conteúdo;
Competência 07
126
Content: O conteúdo 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
disponível para o conteúdo. Então, você deve somar os pixels de margem, da borda, do
espaçamento interno, multiplicado por dois, ao tamanho do conteúdo. Isto porque temos dois
lados horizontalmente ou dois lados verticalmente.
Por exemplo: Se o conteúdo tem 100 pixels de largura, a margem de 20 pixels, a borda de 5
pixels e o espaçamento 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 relação aos elementos que estão 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 espaço disponível.
Ainda temos min-width e min-height que definem respectivamente a largura e a altura mínima.
Se você verificar nossa imagem de referência, a layout, veremos que o conteúdo do site é
Competência 07
127
exibido em uma coluna pequena que ocupa toda a altura, 100%. Na Figura 101 você pode ver o
código de definição 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 – Definição das propriedades de largura e altura da tag <section>. Fonte: Próprio autor.
No entanto, a altura mínima não foi respeitada. Saberemos o porquê no próximo tópico.
7.12 Position
As propriedades de posicionamento CSS permitem que você posicione um elemento. Elas
também podem colocar um elemento atrás do outro e especificar o que deve acontecer
quando o conteúdo de um elemento é muito grande.
Os elementos podem ser posicionados usando as propriedades top, botton, left e right. No
entanto, essas propriedades não funcionarão a menos que a propriedade position seja definida
em primeiro lugar. Os elementos também funcionam de forma diferente, dependendo do
método de posicionamento.
Competência 07
128
Existem quatro métodos de posicionamento diferentes:
Static: É a padrão. Posiciona-se pelo fluxo normal da página.
Fixed: Será posicionado em relação à janela do navegador.
Relative: Será posicionado em relação à posição normal.
Absolute: Será posicionado em relação ao primeiro elemento estático que encontrar. Se
não houver, será em relação a <html>.
Podemos colocar elementos sobrepostos utilizando a propriedade z-index e especificando uma
posição. 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 definição da propriedade position de fixed para <section> ativa a propriedade min-height. Fonte: Próprio autor.
O site de exemplo começa a ganhar forma, mas queremos posicioná-lo à direita. Para isso,
utilizamos a propriedade right em 0px. Posicionando <section> colado com a borda direita da
Competência 07
129
janela.
7.13 Magin e Padding
Nosso exemplo ficou junto da borda direita da janela, mas não toca a parte de cima nem a de
baixo. Isto acontece por conta da configuração padrão de <html> que possui uma margem e um
espaçamento internos, definidos.
Como explicamos no tópico 8.10, todos os elementos seguem o modelo box e possuem uma
margem e um espaçamento. Podemos defini-los utilizando as propriedades na tabela da Figura
103.
PROPRIEDADE DESCRIÇÃO
margin-top Configura a margem superior.
margin-right Configura a margem à direita.
margin-botton Configura a margem inferior.
margin-left Configura a margem à esquerda.
margin Define todas as propriedades da margem do elemento em uma única declaração. A ordem deve ser a seguida acima, no sentido horário.
padding-top Configura o espaçamento interno superior.
padding-right Configura o espaçamento interno à direita.
padding-botton Configura o espaçamento interno inferior.
padding-left Configura o espaçamento interno à esquerda.
padding Define todas as propriedades de espaçamento interno do elemento em uma única declaração. A ordem deve ser a seguida acima, no sentido horário.
Figura 103 – Tabela com as propriedades de margem e espaçamento internos. Fonte: Próprio autor.
Em todas estas propriedades podemos definir valores em pixels e em porcentagem. A
propriedade margin ainda tem um valor chamado auto, que pega o espaçamento 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 espaçamento de <body>. Estas propriedades
Competência 07
130
são herdadas pelos elementos que estão dentro, todos para 0 pixel. Em <section> vamos definir
o espaçamento interno do lado esquerdo como 10 pixels. Veja o código e o resultado na Figura
104.
Figura 104 – Configuração da margem e espaçamento interno dos elementos. Fonte: Próprio autor.
Parece que ele está funcionando bem, mas se esticarmos a janela o <footer> não fica
encostado no fundo da página. Observe na Figura 105 o navegador do lado esquerdo com o
problema. Vamos definir a configuração de <footer> como no código da Figura 105. As
configurações nós 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.
Competência 07
131
Figura 105 – Configuração do elemento <footer> para ficar a 0 pixel da borda inferior da janela. Aproveitamos e definimos um tamanho e centralizamos os elementos. Fonte: Próprio autor.
O <iframe> precisa ser configurado para esticar também. Será que você já consegue descobrir
quais propriedades precisa configurar e quais valores? Tente depois configurar a resposta na
Figura 106.
Figura 106 – Configurações de <iframe> para esticar o elemento. Fonte: Próprio autor.
Competência 07
132
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 explicação:
None: retira o elemento da página. Ele existe, mas não é renderizado.
Block: define o elemento como bloco.
Inline: define o elemento em linha.
Os elementos em bloco como <h1> não permitem elementos ao seu lado. O próximo elemento
após um elemento bloco será renderizado abaixo. Os elementos inline, como <a>, posicionam o
próximo elemento à direita, se houver espaço. Como palavras em um texto.
Em nosso index.html colocamos o texto do título de <h1> englobado em uma tag <span> que
serve apenas para marcar. Fizemos isso para esse truque.
Dissemos que imagens para “embelezar” não 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 título, 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 vários <span> em outros
lugares de nosso documento HTML iremos especificar apenas as tags <span> dentro de <h1>.
O código e o resultado podem ser vistos na Figura 107.
Competência 07
133
Figura 107 – Configuração de imagens por CSS. Fonte: Próprio autor.
7.15 Novas tags HTML 5
Você pode estar se perguntando, o fundo é estático, e o vídeo? Esperamos por este momento,
onde você já possui um conhecimento maior, para explicar como colocar e configurar a exibição
por CSS.
O HTML 5 recebeu várias outras tags. Entre elas, as que tratam de mídias como áudio e vídeo. A
tag <video> coloca um tocador de vídeo na página HTML.
A seguir, temos suas opções mais utilizadas:
preload: só inicia o vídeo depois de baixá-lo completamente;
autoplay: se estiver com o valor false, só toca se o usuário iniciar;
controls: faz o navegador exibir controles. Quais controles e sua aparência são definidos
pelos navegadores, mas podem ser definidos por CSS e JavaScript.
Competência 07
134
O elemento <video> engloba outras tags muito importantes. A tag <source> define onde está o
vídeo e seu tipo. Possui como atributos:
src: define a URL de onde está o vídeo a ser exibido.
type: define o tipo da mídia.
Caso não seja exibido o vídeo, podemos colocar um texto ou imagens que expliquem o motivo
dentro da tag <video>.
Observe o exemplo na Figura 108.
Figura 108 – Exibição do tocador de vídeo na página através da tag <video> na página index.html. Fonte: Próprio autor.
Note que esta é uma tag HTML e deve ser colocada no arquivo index.html e não no CSS.
O vídeo está sendo exibido, mas não está ocupando toda a tela. Vamos voltar para o arquivo
estilo.css e definir o estilo de exibição do vídeo. Veja na Figura 109 a configuração que
utilizamos e na Figura 110 o site em tela cheia. Utilizamos um id só para você ver a utilização de
um seletor id.
Competência 07
135
Figura 109 – Configuração do estilo de exibição do vídeo em estilo.css. Fonte: Próprio autor.
Figura 110 – Site com o estilo configurado exibindo o vídeo como background. Fonte: Próprio autor.
Para dar um efeito de transparência em <section>, em estilo.css no seletor section vamos
acrescentar a regra opacity: 0.9; . A propriedade opacity deixa o elemento translúcido. Seus
valores vão 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 configuração
Competência 07
136
facilmente. Na última competência, iremos conhecer um pouco sobre Javascript. Até lá!
Como sempre digo, é através da repetição que aprendemos. Quanto mais fizer, mais fácil será. Faça o layout da competência anterior com os conhecimentos adquiridos. Caso o site que você imaginou tenha alguma parte muito complicada, a internet é cheia de tutoriais e
truques que irão lhe ajudar a realizar sua arte. O importante é você tentar.
Competência 07
137
8.Competência 08 | Construir um Website
Chegamos à última competência. Nela vamos aprender um pouco sobre programação. Apenas
o necessário para podermos utilizar bibliotecas avançadas de comportamento como o JQuery.
Caso você aprecie e queira se especializar, recomendamos que faça um curso de programação
para desenvolver o pensamento lógico.
JavaScript é uma das mais populares linguagens de programação do mundo. Ela é utilizada em
navegadores para definir comportamentos em uma página web.
Mas o que o JavaScript é capaz de fazer em uma página?
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 página
Podemos inserir código JavaScript no meio do documento HTML, mas isto iria misturar e
complicar o entendimento, então vamos mostrar para você como relacionar um arquivo
JavaScript com um documento HTML, parecido com o que fizemos com o CSS. Assim, além de
organizar cada padrão em um arquivo diferente, podemos reutilizar o mesmo código em várias
páginas.
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
Competência 08
138
não misturar com arquivos CSS e HTML.
Figura 111 – Relacionando um arquivo JavaScript em um documento HTML. Fonte: Próprio autor.
Com isto, todo código que escrevermos no arquivo .js será processado na página, e podemos
reutilizar o mesmo código em várias páginas. Caso seja necessário mudar algo, não ficaremos
“catando” em vários lugares, iremos direto ao arquivo e modificaremos em apenas um lugar.
Muito mais prático.
8.2 Manipulando elementos HTML
O JavaScript é uma linguagem de programação com tudo que uma linguagem de programação
tem direito, mas que trabalha junto com o HTML.
Podemos modificar o conteúdo 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").
Competência 08
139
Uma vez com o elemento, podemos chamar atributos e métodos que modificam este
componente. No exemplo abaixo, pegamos o elemento que possui o id igual a “titulo” e
inserimos a frase “Conteúdo inserido por JavaScript” nele.
document.getElementById("titulo").innerHTML = "Conteúdo inserido por JavaScript ";
Um arquivo JavaScript é composto por linhas de comando que modificam os elementos no
documento HTML. Cada uma das linhas é chamada declaração e sempre termina com ponto e
vírgula.
8.3 Funções
As alterações do modo como vimos anteriormente são realizadas quando o script é lido, mas
podemos querer guardar um código para ser executado posteriormente ou mais vezes. Sendo
assim, utilizamos funções.
Uma função é declarada com a palavra-chave function e um nome para identificar, seguido de
parênteses. Podemos ter várias funções, desde que tenham identificações diferentes. O código
relacionado com a função deve ficar entre chaves. Veja o código abaixo, ele cria uma função
com o nome “minhaPrimeiraFuncao” com o código anterior. Assim, o código só será executado
se a função for chamada.
function minhaPrimeiraFuncao( ) {
document.getElementById("titulo").innerHTML = "Conteúdo inserido por JavaScript";
}
Funções podem receber parâmetros. Parâmetros são dados necessários para que as
declarações da função sejam completadas. No exemplo abaixo, a função recebe dois números
como parâmetros, eles serão somados e mostrados.
Competência 08
140
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 são “coisas” que acontecem ao HTML. O navegador monitora a página quando algo
acontece com ela, como o clique em um elemento, o navegador por reagir. Essa reação é
definida pelo JavaScript.
Através 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 função. 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 maiúsculas e minúsculas devem ser respeitadas porque o JavaScript é sensível a mudanças, assim Script, script e scripT são diferentes.
Competência 08
141
Lembre-se de que temos tags HTML colocadas em arquivos HTML e o código JavaScript fica em
arquivos JavaScript.
Dessa forma, podemos configurar um comportamento para acontecer em resposta a um
evento. Existem vários eventos. Você pode encontrar os mais utilizados na tabela da Figura 112.
EVENTO DESCRIÇÃO
onchange O evento acontece quando o elemento HTML é mudado.
onclick O evento acontece quando o elemento HTML é clicado.
onmouseover O usuário move o mouse sobre o elemento HTML.
onmouseout O usuário move o mouse para fora do elemento HTML.
onkeydown O usuário pressiona uma tecla.
onload O navegador termina de ler a página. Figura 112 – Tabela contendo os eventos e suas descrições. Fonte: Próprio autor.
Antigamente existia uma grande divergência entre como o Internet Explorer interpretava o
JavaScript e o restante dos navegadores. Era um problema porque tínhamos um determinado
código para um navegador e outro código para os outros navegadores. Hoje em dia,
principalmente com o HTML 5 temos um acerto entre os navegadores que seguem o padrão da
W3C, mas isto só é válido para os navegadores mais atuais.
8.5 JQuery
JQuery é uma biblioteca escrita em JavaScript que deixa a criação de comportamentos
JavaScript bem mais fácil. Ela tem a proposta de “escrever menos, fazendo mais”.
A jQuery foi criada por programadores experientes para fazer vários procedimentos com
poucos comandos. E você não precisa se preocupar em qual navegador está sendo lida sua
página, a jQuery já trata isso para você.
Além disso, outros programadores aproveitaram as facilidades da jQuery e escreveram plug-ins.
Competência 08
142
Plug-ins são pequenas aplicações que complementam o jQuery com funcionalidades extras. A
web está cheia de plug-ins para a jQuery. Uma rápida procura e você achará aquela
funcionalidade que irá destacar seu site.
Mas como podemos utilizar esta poderosa ferramenta em nosso site?
8.5.1 Instalação da Biblioteca JQuery
Uma das formas de instalação 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 – Página onde podemos baixar a biblioteca JQuery. Fonte: http://jquery.com/download/
Até o momento da escrita deste caderno, a versão mais atual é a 1.11.1, que é disponibilizada
de duas formas, comprimida e não comprimida. A versão comprimida é menor porque possui
apenas um espaço entre os comandos, dessa forma é mais rápida de ser lida pelo navegador. A
versão não comprimida é melhor de ler, caso você tenha curiosidade de saber como ela foi
construída. Você pode baixar qualquer uma das duas. Clique com o botão direito no link e
escolha “Salvar link como...” ou qualquer opção semelhante para salvar o arquivo em seu
Competência 08
143
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 código JavaScript que usa a
jQuery, chamado meuscript.js. Perceba que tanto um quanto o outro estão em uma pasta que
escolhi colocar o nome “scripts”, para ficar organizado.
Figura 114 – Página index.html do projeto de exemplo com a instalação do jQuery e o arquivo .js que utiliza a biblioteca. Fonte: Próprio autor.
8.5.2 Selecionando Elementos
Um dos objetivos do jQuery é a simplificação. Assim, a forma de selecionar um elemento, seja
pela tag, id ou class é através 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
Competência 08
144
ou class. Definitivamente, bem mais prático.
A biblioteca ainda disponibiliza palavras-chaves que guardam elementos comuns. Por exemplo,
quando queremos nos referir a todo o conteúdo podemos utilizar document e quando
queremos nos referir ao próprio elemento que estamos usando utilizamos this. Nestes casos,
não 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 páginas. Ainda podemos combiná-los ou personalizá-los.
Os efeitos normalmente modificam um ou mais atributos estéticos. Veja a tabela da Figura 115
para conhecer alguns deles. A aplicação do efeito é realizada através de ponto seguido do
nome do efeito, logo depois da seleção do elemento.
EFEITO DESCRIÇÃO
animate() Executa uma animação personalizada no elemento selecionado.
fadeOut() Faz desaparecer um elemento selecionado gradualmente.
fadeIn() Exibe um elemento selecionado gradualmente.
fadeToggle() Alterna entre os efeitos de fade in e out no elemento selecionado.
hide() Esconde o elemento selecionado.
show() Exibe o elemento selecionado.
slideDown() Desliza para baixo, mostrando o elemento selecionado.
slideUP() Desliza para cima, escondendo o elemento selecionado.
slideToggle() Alterna entre esconder e mostrar o elemento selecionado, deslizando. Figura 115 – Tabela com alguns efeitos disponibilizados na biblioteca jQuery. Fonte: Próprio autor.
Agora que sabemos como selecionar um elemento e como utilizar efeitos, vamos ver um
exemplo simples. A tag <section> engloba todo conteúdo de nosso site. Vamos selecionar este
elemento e fazê-lo quase desaparecer em uma animação de dois segundos, assim ele não irá
Competência 08
145
atrapalhar a exibição do vídeo que passa no fundo da página. 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 transparência que vai
de 1 até 0, sendo 1 totalmente visível e 0 totalmente transparente. Para este exemplo, quando
a página 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 código 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 página
quando aparece e à direita a página 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. Fonte: Próprio autor.
Dependendo do navegador o código JavaScript pode ter sido lido e executado antes dos
elementos da página 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
Competência 08
146
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 aconselhável.
8.5.4 Utilizando Eventos
O efeito ficou interessante, mas agora não podemos ver o conteúdo do site. Ficaria melhor se
quando o usuário colocasse o mouse em cima do conteúdo 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 também facilita a manipulação de eventos. Com ela não precisamos modificar o HTML
para tornar os elementos clicáveis ou sensíveis às ações dos usuários.
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
função para ser executada quando o evento ocorrer. Veremos um exemplo mais a frente, por
enquanto observe com atenção a Figura 117 que contém uma tabela com os eventos do
jQuery.
EVENTOS DE MOUSE
EVENTOS DE TECLADO
EVENTOS DE FORMULÁRIO
EVENTOS SOBRE O DOCUMENTO E JANELA
click keypress submit load
dblclick keydown change ready
mouseenter keyup focus scroll
mouseleave blur unload Figura 117 – Tabela com os eventos disponibilizados pelo jQuery classificados por tipo. Fonte: Próprio autor.
Vamos primeiro corrigir o problema da ordem de leitura mencionado no final da sessão 8.5.3.
Queremos que nossos efeitos só ocorram quando todo documento for lido. Na sessão 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 função após o carregamento
Competência 08
147
da página é o ready. A Figura 118 mostra como fica o código. Gaste um pouco de tempo lendo
esta parte para entender bem, depois faça testes com outros efeitos para ver o que acontece.
Figura 118 – Código que configura uma função para ser executada depois que todo documento HTML tiver sido lido pelo navegador. Fonte: Próprio autor.
A utilização de $(document).ready( ) é uma boa prática. Então, sempre utilize esta técnica.
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 usuário colocar o
ponteiro do mouse em cima do conteúdo do site e retirar. Para isso, vamos olhar novamente na
Tabela da Figura 117 em busca dos eventos correspondentes.
Os eventos são mouseenter e mouseleave. Podemos colocá-los na mesma função 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, também, que
acrescentamos uma função para cada evento. Como temos três eventos, temos uma function
para cada.
A Figura 118 mostra o código. Atente que modificamos alguns detalhes. O primeiro foi a
diminuição de 5000 para 1000 milisegundo, assim o usuário irá esperar menos para aparecer e
desaparecer o conteúdo. O segundo foi que utilizamos a palavra chave this que diz a jQuery
que o elemento que irá desaparecer ou reaparecer é o próprio elemento do evento, ou seja, o
<section>. Poderíamos repetir o nome do elemento, mas utilizamos o this para exemplificar sua
utilização. O último detalhe é que para desaparecer configuramos a opacidade do elemento
Competência 08
148
para 0.1 e para reaparecer para 0.9.
Figura 118 – Código que carrega dois eventos na tag <section>: um quando o ponteiro está acima do elemento, outro quando o ponteiro deixa o elemento. Fonte: Próprio autor.
Em uma imagem estática não 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 não conseguir ver logo na primeira vez o efeito. Quando estamos aprendendo
deixamos passar muitos detalhes que ocasionam erros e o navegador simplesmente ignora
qualquer código errado. Então, tenha calma, verifique letra por letra de tudo o que digitar. Por
vezes, esquecemos uma vírgula, ou ponto e vírgula, por outras, trocamos uma chave por um
parêntese. Verifique tudo, bem atentamente.
Como esta parte é a mais complicada de todo o curso, vamos mostrar mais um exemplo. Que
tal se, quando o usuário clicar em uma foto do álbum, aumentássemos 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 conteúdo desta página é mostrado
dentro da tag <iframe>? Se não, é melhor você dar uma revisada na competência 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
Competência 08
149
acrescentar o tributo class com o valor “foto” para todas as tags <img>. Assim, classificamos
aquelas tags que contêm fotos como sendo do mesmo tipo. Dessa forma se houvesse outras
tags <img> elas não seriam afetadas. A Figura 119 mostra o código da página fotos.html.
Figura 119 – Código HTML da página fotos.html com o acréscimo das tags <script> na tag <head> e o atributo class=“foto” nas tags <img>. Fonte: Próprio autor.
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 programação
necessária para o efeito completo. Utilizando este código, quando clicamos em uma foto na
página 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 animação a
deixe com o tamanho de 135 pixels.
Competência 08
150
Figura 120– Código JavaScript do arquivo meuscript.js com o efeito de ampliação de imagem pelo clique do usuário. Fonte: Próprio autor.
A Figura 121 mostra a primeira foto clicada. Para voltar ao normal, basta clicar novamente.
Figura 121 – Navegador exibido o site com a página de fotos.html, a primeira imagem foi clicada e o jQuery aumentou seu tamanho para 270 pixels. Fonte: Próprio autor.
Competência 08
151
Dessa forma, utilizando a biblioteca jQuery através de seleção de elementos, configuração de
eventos e definição de efeitos, podemos fazer diversos comportamentos de forma mais fácil e
rápida em JavaScript.
8.6 Bootstrap
Para finalizar esta competência, vamos conhecer um framework chamado Bootstrap. Um
framework é uma ferramenta que ajuda no desenvolvimento rápido de uma camada da
aplicação. No caso do Bootstrap, é a cama de front-end.
O Bootstrap foi desenvolvido na empresa Twitter por Mark Otto e Jacob Thornton utilizando os
padrões abertos da W3C. Eles queriam padronizar os diversos componentes tanto em
comportamento como estilo nas aplicações da empresa. O projeto foi disponibilizado como
código aberto e pode ser copiado e utilizado até em projetos comerciais.
No Bootstrap já temos vários comportamentos bem definidos através da jQuery, então,
também precisamos da jQuery para o Bootstrap funcionar. Ele também 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 página do Bootstrap traduzida pela Globo.com, que utiliza muito em seus sites.
O endereço está abaixo, e a Figura 122 mostra o site em português do Brasil.
http://globocom.github.io/bootstrap/
Competência 08
152
Figura 122– Site do Bootstrap da Globo.com onde você pode baixar gratuitamente o framework. Fonte: http://globocom.github.io/bootstrap/
Após baixarmos o framework temos a árvore de arquivos da Figura 123. Ela contém três pastas:
a pasta css tem os arquivos de estilo compactado e descompactado, como na jQuery; a pasta
img contém os ícones utilizados pelo framework; e a pasta js contém os arquivos JavaScript que
utilizam a jQuery. Observe que a biblioteca jQuery não está entre eles. Devemos fazer o
donwload e colocar. O melhor lugar é na pasta js. Assim, faça o download da jQuery, se não a
tiver, e coloque na pasta js.
Figura 123 – Árvore de arquivo do framework Bootstrap. Fonte: Próprio autor.
Competência 08
153
Agora crie um arquivo HTML com a estrutura básica que mostramos na competência anterior.
Relacione esta página com a biblioteca jQuery, depois com o CSS e o JavaScript do BootStrap. O
código para isto está na Figura 124.
Figura 124 – Arquivo index.html com a inclusão do CSS e arquivos JavaScript do Bootstrap e da biblioteca jQuery. Fonte: Próprio autor.
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 documentação do
Bootstrap está em português e pode ser consultada no link abaixo. Nele você pode ver como o
componente funciona, sua aparência e o código para acrescentá-lo em sua página. Uma vez
que relacionamos corretamente o arquivo HTML com os arquivos necessários do framework,
podemos copiar e colar em nossa página qualquer componente. Tenha curiosidade e
experimente. A Figura 125 possui uma captura de tela da página explicativa dos componentes.
http://globocom.github.io/bootstrap/components.html
Competência 08
154
Figura 125 – Página dos componentes do Bootstrap da Globo.com toda em português do Brasil, com explicação dos componentes, exemplos e código. Fonte: http://globocom.github.io/bootstrap/components.html
Vamos utilizar alguns destes componentes. Por exemplo, um formulário de login. A Figura 126
mostra o código HTML do formulário de login, com <imput> para digitar o e-mail e a senha, um
elemento checkbox e um botão para enviar os dados. Seguindo os códigos de exemplo da
página explicativa dos componentes, incluímos os atributos class com os valores apropriados.
São estes valores de class que adicionam o poder do frameword.
Competência 08
155
Figura 126 – Código do formulário, com os atributos class com os valores que adicionam o poder do bootstrap. Fonte: Próprio autor.
Na Figura 127 temos a exibição da página no navegador. Observe como a página já aparece
estilizada corretamente.
Figura 127 – Resultado no navegador já formatado pelo Bootstrap. Fonte: Próprio autor.
Competência 08
156
Nesta competência mostramos rapidamente um exemplo de como utilizar o Bootstrap para
acelerar a construção de um site. Mas para utilizá-lo adequadamente você deve conhecer bem
o framework, então, leia, pesquise e enriqueça os seus conhecimentos. Você será um
profissional melhor quanto maior for o tempo investido em aprendizado.
Competência 08
157
Conclusão
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 é necessário mais
pesquisa e investimento, afinal esta área de criação para web é gigantesca.
O autor do livro Fora de Série – Outliers, Malcoln Gladwell, cita uma pesquisa sobre pessoas
que são consideradas profissionais em suas áreas. Na pesquisa ele explica que para chegar a um
nível profissional são necessárias 10.000 horas dedicadas de forma apaixonada naquilo que se
faz.
Gostando do que faz, você presta mais atenção e entende bem melhor do que pessoas que
estudam por obrigação. Dessa forma é fácil chegar às 10.000 horas. Pois é. Sei que são muitas
horas estudando, testando código, buscando e pesquisando sobre os assuntos vistos, mas se
você se apaixonar pelo tema, não será um martírio, será sim, bem divertido.
Espero que você tenha gostado, tanto quanto eu, de fazer este curso.
Boa sorte ao entrar nesta maravilhosa área da profissão de web designer.
158
Referências
GLADWELL, Malcolm. Fora de série: outliers. Rio de Janeiro: Sextante, 2008.
KALBACH, James. Design de Navegação Web: Otimizando a experiência do usuário. 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 marcação que revolucionou a WEB. São Paulo:
Novatec Editora, 2011.
SILVA, Mauricio Samy. CSS3: desenvolva aplicações web profissionais com o uso dos poderosos
recursos de estilização das CSS3. São Paulo: Novatec Editora, 2012.
SILVA, Mauricio Samy. Construindo sites com CSS e (X)HTML: sites controlados por folhas de
estilo em cascata. São Paulo: Novatec Editora, 2008.
SILVA, Mauricio Samy. Criando sites com HTML: sites de alta qualidade com HTML e CSS. São
Paulo: Novatec Editora, 2008.
SILVA, Mauricio Samy. JQuery: a biblioteca do programador Javascript. 2.ed. São Paulo:
Novatec Editora, 2010.
ZEMEL, Tácio. Web design responsivo: páginas adaptáveis para todos os dispositivos. São
Paulo: Casa do Código, 2012.
159
Minicurrículo do Professor
Ronnie E. S. Santos é aluno de Doutorado no programa de pós-graduação em Ciência da
Computação do Centro de Informática, Universidade Federal de Pernambuco (CIn - UFPE).
Possui título de Mestre em Ciência da Computação, com ênfase em Engenharia de Software,
pela mesma instituição e de Bacharel em Sistemas de Informação pela Universidade Federal
Rural de Pernambuco (2012). Tem experiência com pesquisas na área de Engenharia de
Software e Informática na Educação. Profissionalmente, tem experiência em docência, sendo
professor de disciplinas da área de Engenharia de Software, Teoria da Computação e
Linguagens Formais e Autômatos. Na indústria de software atuou como Engenheiro de Testes
do projeto CIn/Motorola e como Analista de Requisitos de Software do projeto GenNet
(UFRPE/AACD).
