CADERNO Material de EAD - Informática - WEB DESIGN - COMPLETO

•

ESTÁCIO

Daniel Nascimento

29/12/2021

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Aspectos Antropológicos

981 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

Técnico em Informática
Web Design

Governador: Eduardo Henrique Accioly Campos
Vice-Governador: João Soares Lyra Neto
Secretário de Educação: José Ricardo Wanderley Dantas de Oliveira
Secretário Executivo de Educação Profissional: Paulo Dutra
Gerente Geral da Educação Profissional: Luciane Pulça
Gestor de Educação a Distância: George Bento Catunda
Coordenador do Curso: João Ferreira da Silva Júnior
Professor Pesquisador: Carlos José Pereira da Silva
Equipe Central de Educação a Distância:
Andréia Guerra | Carlos Cunha | Éber Gomes | Gustavo Tavares | Maria de Lourdes Cordeiro Marques | Marcos
Clemente | Morgana Leão| Mauro de Pinho Vieira| Reginaldo Filho.

Técnico em Informática
Web Design

INDICAÇÃO DE ÍCONES

Os ícones são elementos gráficos utilizados para ampliar as formas de
linguagem e facilitar a organização e a leitura hipertextual.

Atenção: indica pontos de maior relevância no
texto.

Saiba mais: oferece novas informações que
enriquecem o assunto ou “curiosidades” e notícias
recentes relacionadas ao tema estudado.

Glossário: indica a definição de um termo, palavra
ou expressão utilizada no texto.

Mídias Integradas: sempre que se desejar que os
estudantes desenvolvam atividades empregando
diferentes mídias: vídeos, filmes, jornais, ambiente
AVA e outras.

Atividades de aprendizagem: apresenta atividades
em diferentes níveis de aprendizagem para que o
estudante possa realizá-las e conferir o seu domínio
do tema estudado.

Técnico em Informática
Web Design

COMPETÊNCIAS

 Elaborar um escopo de projeto para programação visual de Web.
 Planejar um website.
 Conhecer os modelos de representação e organização de websites.
 Elaborar layouts para website.
 Conhecer os padrões definidos pela W3C para representação e criação
de websites.
 Formatar um website usando os mais modernos padrões de marcação de
hipertexto.
 Planejar a identidade visual de web sites usando folhas de estilo.
 Construir um website.

Técnico em Informática
Web Design

CONTEXTUALIZAÇÃO DAS COMPETÊNCIAS DA
DISCIPLINA WEB DESIGN NO CURSO DE INFORMÁTICA

Olá pessoal, sou Carlos José, professor que tive a imensa satisfação e o
privilegio de preparar o conteúdo dessa disciplina especialmente para vocês. O
universo da Web Design que é um assunto que eu gosto muito e fui privilegiado
em poder acompanhar a sua evolução assim que a Internet chegou ao Brasil
em 1995 quando era iniciante como profissional nesta área. Comecei a
ministrar aulas de Web Design em 2000 na Unibratec, de lá para cá muita coisa
mudou e mudou para melhor.
A minha missão com esta disciplina é compartilhar o meu conhecimento e
experiência com você, capacitá-lo a construir websites com tudo que tem
direito e mais um pouquinho. Para isso faz-se necessário que você aprenda a
elabora um escopo de projeto, planejar como será o website, conhecer os
modelos de representação e organização, elabora layouts e conhecer os
padrões web.
De posse dos conhecimentos acima citados, você estará pronto para aprender
sobre as linguagens de marcação (HTML), as linguagens de formatação através
das folhas de estilos (CSS) e por fim somando todas as competências e
habilidades adquiridas, construir um website.
São muitos assuntos, atividades, exercícios e muita leitura, mas conto com a
sua disposição e fome de aprender para completar cada semana de estudo
com o máximo empenho e disposição, pois só assim você será um excelente
web design, conto com você.
É isso!
Carlos José
Técnico em Informática
Web Design

SUMÁRIO

1. INTRODUÇÃO ----------------------------------------------------------------------------------------- 10
2. ELABORAR UM ESCOPO DE PROJETO PARA PROGRAMAÇÃO VISUAL DE WEB --- 12
2.1. DEFINIÇÃO DOS OBJETIVOS ------------------------------------------------------------------- 12
2.2. QUESTIONÁRIO------------------------------------------------------------------------------------ 14
2.3. ANALISANDO AS RESPOSTAS ----------------------------------------------------------------- 14
2.4. PÚBLICO ALVO ------------------------------------------------------------------------------------- 15
2.5. PERSONAS E CENÁRIOS ------------------------------------------------------------------------- 17
2.6. ANÁLISE COMPETITIVA ------------------------------------------------------------------------- 18
2.7. ENTENDENDO O CONTEÚDO ------------------------------------------------------------------ 20
2.7.1. CONTEÚDO ESTÁTICO ------------------------------------------------------------------------ 20
2.7.2. CONTEÚDO DINÂMICO ---------------------------------------------------------------------- 21
2.7.3. FUNCIONAL/TRANSACIONAL -------------------------------------------------------------- 23
2.8. ENTENDENDO A TECNOLOGIA ---------------------------------------------------------------- 24
2.8.1. PLATAFORMAS --------------------------------------------------------------------------------- 24
2.8.2. BACK-END --------------------------------------------------------------------------------------- 25
2.8.3. FRONT-END ------------------------------------------------------------------------------------- 26
3. PLANEJAR UM WEBSITE ---------------------------------------------------------------------------- 28
3.1. CARD SORTING ------------------------------------------------------------------------------------ 29
3.1.1. O PROCESSO ------------------------------------------------------------------------------------ 31
3.1.2. CONSOLIDAÇÃO DOS DADOS -------------------------------------------------------------- 32
3.1.3. INVENTÁRIO DE CONTEÚDO --------------------------------------------------------------- 33
3.2. SISTEMA DE NAVEGAÇÃO ---------------------------------------------------------------------- 35
Técnico em Informática
Web Design

3.2.1. SISTEMA DE NAVEGAÇÃO EMBUTIDO -------------------------------------------------- 36
3.3. SISTEMA DE BUSCA ------------------------------------------------------------------------------ 45
4. CONHECER OS MODELOS DE REPRESENTAÇÃO E ORGANIZAÇÃO DE WEBSITE --- 48
4.1. SISTEMA DE NAVEGAÇÃO REMOTO -------------------------------------------------------- 48
4.1.1. MAPA DO SITE---------------------------------------------------------------------------------- 48
4.1.2. ÍNDICE REMISSIVO ---------------------------------------------------------------------------- 50
4.2. FLUXO DE NAVEGAÇÃO ------------------------------------------------------------------------- 51
4.2.1. REPRESENTAÇÃO DOS ELEMENTOS SIMPLES ----------------------------------------- 52
4.2.2. REPRESENTAÇÃO DOS ELEMENTOS CONDICIONAIS -------------------------------- 57
5. ELABORAR LAYOUTS PARA WEBSITE----------------------------------------------------------- 62
5.1. PROJETAR UMA LÓGICA VISUAL ------------------------------------------------------------- 62
5.1.1. LEIS DA GESTALT ------------------------------------------------------------------------------- 64
5.2. CRIAR TEMPLATES -------------------------------------------------------------------------------- 68
5.3. PROTOTIPAÇÃO ----------------------------------------------------------------------------------- 70
5.4. CONSTRUINDO WIREFRAME ------------------------------------------------------------------ 71
6. CONHECER OS PADRÕES DEFINIDOS PELA W3C PARA REPRESENTAÇÃO E
CRIAÇÃO DE WEBSITES------------------------------------------------------------------------------------ 74
6.1. FUNDAMENTOS WEB ----------------------------------------------------------------------------74
6.2. HISTÓRIA DA HTML ------------------------------------------------------------------------------ 81
6.3. REQUISITOS SINTÁTICOS DA XHTML -------------------------------------------------------- 83
6.4. A DECLARAÇÃO DOCTYPE ---------------------------------------------------------------------- 85
7. FORMATAR UM WEBSITE USANDO OS MAIS MODERNOS PADRÕES DE
MARCAÇÃO DE HIPERTEXTO ---------------------------------------------------------------------------- 90
7.1. INTRODUÇÃO A LINGUAGEM DE MARCAÇÃO ------------------------------------------- 91
Técnico em Informática
Web Design

7.2. MARCAÇÃO DE TEXTO -------------------------------------------------------------------------- 94
7.3. MARCAÇÃO DE LISTAS ------------------------------------------------------------------------ 101
7.4. MARCAÇÃO DE LINKS ------------------------------------------------------------------------- 102
7.5. MARCAÇÃO DE IMAGENS -------------------------------------------------------------------- 107
7.6. MARCAÇÃO DE TABELAS --------------------------------------------------------------------- 109
7.7. FORMULÁRIOS ---------------------------------------------------------------------------------- 112
8. PLANEJAR A IDENTIDADE VISUAL DE WEB SITES USANDO FOLHAS DE ESTILO -- 116
8.1. FUNDAMENTOS CSS --------------------------------------------------------------------------- 116
8.2. BOX MODEL -------------------------------------------------------------------------------------- 124
8.2.1. PROPRIEDADES CSS PARA BOX MODEL ---------------------------------------------- 127
8.3. POSICIONAMENTO CSS ----------------------------------------------------------------------- 133
8.4. SELETORES, HERANÇA E EFEITO CASCATA ---------------------------------------------- 140
8.4.1. ÁRVORE DO DOCUMENTO HTML ------------------------------------------------------- 140
8.4.2. SELETORES ------------------------------------------------------------------------------------- 141
8.4.3. HERANÇA CSS --------------------------------------------------------------------------------- 155
8.4.4. EFEITO CASCATA ----------------------------------------------------------------------------- 156
8.4.5. DIRETIVA !IMPORTANT -------------------------------------------------------------------- 157
8.5. FONTE E TEXTO ---------------------------------------------------------------------------------- 157
8.5.1. PROPRIEDADE FONT ------------------------------------------------------------------------ 158
8.5.2. PROPRIEDADE TEXT ------------------------------------------------------------------------ 165
8.6. CORES E BACKGROUND ----------------------------------------------------------------------- 167
8.6.1. PROPRIEDADE COLOR ---------------------------------------------------------------------- 167
8.6.2. PROPRIEDADE BACKGROUND ----------------------------------------------------------- 170
8.7. BORDAS E SOMBRAS -------------------------------------------------------------------------- 177
Técnico em Informática
Web Design

8.8. LAYOUT MULTICOLUNAS --------------------------------------------------------------------- 179
8.9. LAYOUT RESPONSIVO ------------------------------------------------------------------------- 183
8.10. TRANSIÇÕES -------------------------------------------------------------------------------------- 184
9. CONSTRUIR UM WEBSITE ----------------------------------------------------------------------- 190
9.1. INTRODUÇÃO AO JQUERY ------------------------------------------------------------------- 190
9.2. INSTALANDO O JQUERY ---------------------------------------------------------------------- 191
9.3. JQUERY NA PRATICA --------------------------------------------------------------------------- 193
9.3.1. SELETORES JQUERY ------------------------------------------------------------------------- 195
9.3.2. MANIPULAÇÃO DO DOM ----------------------------------------------------------------- 204
9.3.3. EVENTOS --------------------------------------------------------------------------------------- 211
9.4. FRAMEWORK ------------------------------------------------------------------------------------ 212
REFERÊNCIAS ----------------------------------------------------------------------------------------------- 215
CURRÍCULO DO PROFESSOR-PESQUISADOR ------------------------------------------------------ 218

Técnico em Informática
Web Design

1. INTRODUÇÃO
Antes de falar sobre qualquer assunto, quero deixar você por dentro de como surgiu à
interconexão dos computadores que chamamos de Internet.

Capitalismo e socialismo, conflitos de ordem política, econômica, social e militar entre
Estados Unidos e União Soviética originaram a chamada corrida espacial tecnológica,
passada no período da guerra fria, que deu origem a diversos segmentos tecnológicos
utilizados por todos nós nos dias de hoje.

Por volta da década 1950, o presidente norte americano Dwight Eisenhower anuncia a
intenção de seu país em lançar um satélite artificial em volta da orbita da terra. No entanto,
a Rússia saiu na frente lançando o Sputnik que fazia transmissões de rádio.

No auge da guerra fria, em uma disputa chegar em segundo lugar onde só existiam dois
competidores, foi de mais para os Estados Unidos. Deu início à corrida espacial com a criação
da ARPA (Advanced Research Projects Agency) com o objetivo de criar mecanismos de
defesa avançados tecnologicamente aos quais existiam na época. Na criação desses
mecanismos de defesa, alguns cientistas concentraram seus esforços na transmissão de
dados eletrônicos.

O cientista John Licklider propõe a criação da rede galáctica, uma visão futurista para a
interligação de milhares de computadores inspirado como as galáxias se organizam no
cosmo, John Licklider foi transferido para ARPA com a finalidade de desenvolver a rede
galáctica que tinha duas premissas:
 Cada computador deveria ter uma porta de entrada permanentemente aberta para
outros computadores, permitindo o acesso a dados comuns a todos e não aos dados
particulares de cada um.
 As modificações particulares em cada computador não poderiam afetar os outros
computadores ligados à rede.

Técnico em Informática
Web Design

Essas premissas deram início à tecnologia de troca de pacotes que foi fundamental para o
nascimento da rede de computadores. Isso mesmo, os princípios definidos pelo cientista
John Licklider nos proporcionaram a Internet que temos hoje, um grande e complexo
emaranhado de computadores interligados e trocando informações.

Com isso apresento para você que esta fazendo este curso e principalmente a disciplina Web
Design o ambiente onde os websites são publicados: a Internet. Você vai aprender a projetar
e desenvolver websites que serão armazenados em computadores e estes interligados a
outros e a outros e assim por diante. Agora que você tem uma ideia do ambiente de
trabalho, vamos aprender as técnicas para projetar, criação e desenvolvimento de websites
para Internet.

Técnico em Informática
Web Design

2. ELABORAR UM ESCOPO DE PROJETO PARA
PROGRAMAÇÃO VISUAL DE WEB

Quando se pensa em projetar um website a nossa primeira atitude é ir para o computador
abrir um programa gráfico ou um editor HTML e começar a produzir todo o visual. É muito
tentador, mais quero que você entenda que não é assim que funcionar! A palavra design
significa projeto, muitos se enganam achando que é desenho, na língua inglesa desenho é
draw.

Você pode estar se perguntando: o que ele quer dizer com isso? Essa sua indagação é muito
pertinente, pois ter um entendimento claro e precoce do que você vai projetar economiza
tempo e dinheiro em longo prazo. Por isso, iremos aprender as técnicas da arquitetura de
informaçãopara poder projetar um website com o seguinte foco:

 Definição dos objetivos
 Público alvo
 Personas e cenários
 Análise competitiva
 Entendendo o conteúdo
 Entendendo a tecnologia
2.1. Definição dos objetivos

Você pode achar óbvio demais definir objetivos, pense um pouco...quantos websites são
construídos sem estrutura, sem planejamento e por fim sem objetivo. As empresas quando
decidem fazer um website, querem ganhar mais dinheiro, serem conhecidas, mostrar seus
produtos e/ou serviços.

Ter um website porquê todo mundo tem, não é um bom objetivo, pois se eu não sei o que
quero alcançar como chegarei lá? Se você foi convidado para projetar um website pense
Técnico em Informática
Web Design

nisso: por que esta empresa esta iniciando este projeto só agora? Precisamos encontrar os
motivos, causas, ou seja, os objetivos.

Segue abaixo uma lista de objetivos gerais:
 Ganhar novos clientes/membros;
 Aumentar a fidelização dos clientes/membros;
 Solidificar a marca;

Além dos objetivos comuns, pensar em objetivos específicos:
 A missão da empresa;
 Propósito da empresa;
 Objetivos de curto e longo prazo;
 O público alvo da empresa;

Os objetivos gerais e específicos formam o escopo do projeto, no dicionário Houaiss da
língua portuguesa, escopo significa ponto em que se mira; alvo; intenção; objetivo. Tudo isso
faz parte do escopo de nosso projeto.

Figura 1 – Fluxo de trabalho para definição do escopo do projeto

Fonte: O Autor (2012).

Técnico em Informática
Web Design

Vamos aprender a primeira técnica para realizar o levantamento dos objetivos:
questionário! Isso mesmo, realizar todo e qualquer tipo de pergunta que nos ajude a
entender o que o cliente quer com o projeto do website.
2.2. Questionário

Com quem eu devo realizar o questionário? Essa é uma excelente pergunta!
Dependendo do porte da empresa, você deve falar até com o dono/proprietário, em outros
casos com o chefe/diretor do departamento de marketing .

O que devo perguntar? Outra excelente pergunta!
Se algumas perguntas básicas:
 Qual é o propósito da empresa em criar um website?
 Quais os objetivos da empresa a curto e a longo prazo com o website?
 Qual é o público alvo do website?
 Por que as pessoas irão visitar o website?

Pense em outras perguntas, alias, faça todas as perguntas necessárias e não fique com
dúvidas quanto à resposta, não tenha vergonha de dizer que não entendeu, pois a sua
dúvida ou falta de clareza vai impactar no projeto.
2.3. Analisando as respostas

Nessa etapa vamos passar um pente fino, ou seja, realizar um filtro nas respostas, pois se
você realizou o questionário com mais de uma pessoa, observe se as respostas são iguais e
descarte as que não forem iguais, faça uma mistura delas.

Separe a(s) resposta(s) referente ao público alvo, pois será o nosso próximo tópico.
Realizado o filtro das respostas, de forma objetiva pegue cada resposta e transforme em
Técnico em Informática
Web Design

pequenos parágrafos de no máximo 3 (três) linhas por ordem de prioridade, dessa forma
você terá os objetivos do website .

Para finalizar esta etapa, mostre esse conjunto de respostas que se tornaram o objetivo do
seu projeto para o cliente aprovar, assim você terá certeza da clareza dos objetivos
levantados.

Figura 2 – Estabelecendo os objetivos

Fonte: O Autor (2012).
2.4. Público alvo

De posse dos objetivos, o mais importante agora é determinar o público alvo. O público alvo
na verdade serão os usuários do website é para eles que vamos projetar. É por isso que
precisamos conhecê-los! Como assim? Vou entrevistar quantas mil pessoas? Calma não
precisa entrar em pânico.

O público alvo geralmente é definido por:
 Faixa etária;
 Por classe social;
 Poder de compra;
 Por gênero;
Técnico em Informática
Web Design

 Nível educacional;
 Conhecimento tecnológico;

Dentro de cada definição podemos considerar:
 Cada usuário tem necessidades diferentes;

Pensando assim, ou seja, na definição de cada público alvo e considerando a necessidade de
cada um deles, o nosso projeto terá sucesso, por isso que essa etapa é muito importante.

Vamos analisar o seguinte exemplo:
Um website para uma escola infantil de 0 a 7 anos. Vamos à pergunta chave: qual é o
público alvo? Isso mesmo! Pais que tenham crianças nessa faixa etária!

Vamos analisar outro exemplo:
Um website para venda de carros. Qual o público alvo? Esse é mais complexo!
Classificando os públicos:
 Compradores – pessoas interessadas e necessitadas por um carro
 Vendedores – os próprios vendedores da loja
 Negociantes – outras empresas que compram e vendem carros
Neste exemplo, definimos por gênero.

Agora analise a lista que consta o público alvo realizado na etapa dos objetivos com base no
que aprendemos. Classifique o público alvo por ordem de importância.

O foco nunca pode ser na tecnologia ou nas maquinas, mais sempre nos
usuários e suas necessidades, comportamentos e experiências de
navegação.
Juliano Alvarenga traz um excelente artigo: Muito achismo e pouca
certeza na análise de projetos - http://migre.me/bMvfC
http://migre.me/bMvfC
Técnico em Informática
Web Design

2.5. Personas e cenários

Você deve estar se perguntando: O que é personas? E o que isso tem haver com construção
de websites?
Pois bem, personas são descrições de personagens que representam perfis de usuários que
refletem padrões de necessidades e comportamentos. Para melhorar o entendimento do
público alvo, utilizaremos personas.

Criando as personas:
 Identificar os atributos mais importantes que estabeleça uma diferença entre os
usuários.

Para realizar uma descrição dos usuários utilizando o website, vamos associar as
personagens aos seus respectivos cenários. O cenário não passa de uma narrativa, uma
estória vivenciada pela personagem (persona) no website.

Criando cenários:
 Precisamos dar vida ao usuário.
 Dê um nome.
 Dê uma das tarefas obtidas na etapa objetivos/metas da lista de público alvo para ser
realizado por ele no website.

Por exemplo:

José Pedro, 27 anos programador júnior.

José Pedro recebeu uma proposta na empresa que trabalha para participar de uma
capacitação e poder subir de cargo na empresa. Essa capacitação será à noite, mas nesse
horário José Pedro está estudando na faculdade.
Técnico em Informática
Web Design

José Pedro decidiu trancar a faculdade para poder realizar essa capacitação e poder mudar
de cargo. Ele decide entrar no website da faculdade para ter informações por quanto tempo
ele pode trancar o curso.
No website existem muitos links, mais ele decide clicar no link matriculas, neste encontra
outro link para maiores informações.
Na página maiores informações, existe um link para órgão especifico que trata de
trancamentos, na página de trancamento o José Pedro fica sabendo que pode trancar o
curso por 6 (seis) meses.
Dessa forma José Pedro encontrou a informação que queria e mais o órgão da faculdade que
ele pode procurar para realizar o trancamento.

Pronto! Temos o personagem e o cenário e uma ideia de navegação pelo website. Para cada
grupo de usuários, escreva um cenário – seja criativo, use a sua imaginação.

2.6. Análise competitiva

Depois de ter conhecimento do público alvo você terá que conhecer a concorrência ou
competidores do seu cliente no projeto do website.
Para começar precisamos realizar um levantamento junto ao cliente sobre os seus
concorrentes/competidores, precisamos saber o que eles estão fazendo em seus websites.

Crie personas com necessidades especiais de acessibilidade, por exemplo:
baixa visão, problemas de coordenaçãomotora, daltonismo, deficientes
visuais, deficientes auditivos. O público alvo de um website
governamental é povo brasileiro sem distinção.
Personas e cenários para antecipar o futuro - http://migre.me/bMPhl por
Frederick van Amstel.
Acessibilidade – Portal Brasil, http://migre.me/bNAJA
Portal de Acessibilidade, http://migre.me/bNAO1

http://migre.me/bMPhl
http://migre.me/bNAJA
http://migre.me/bNAO1
Técnico em Informática
Web Design

Você pode se perguntar, por onde começar? Pelas características! Quais características? Ora
com os objetivos do website como base para analisar os outros! Outra coisa pense nas
funcionalidades do website da concorrência que sejam interessante para o seu projeto.

Faça uma tabela contendo as características que você deseja analisar juntamente com os
critérios de analise. Vejamos alguns critérios que você pode utilizar no projeto:Segue abaixo
um exemplo:

Tabela 1 – Características para análise dos concorrentes
Características Gerais Site 1 Site 2 Site 3 Site 4
Design do site (1-10) 10 8 7 5
Layout (1-10) 10 10 10 10
Navegação (1-10) 9 2 5 7
Permite publicidade (1-10) 0 0 0 0
Estilo (1-10) 10 10 10 10
URL amigáveis (sim/não) Sim Não Não Não

Personalização Site 1 Site 2 Site 3 Site 4
Página inicial personalizável (sim/não) Não Sim Sim Sim
Newsletter por email (sim/não) Sim Sim Sim Sim
RSS (sim/não) Não Não Não Sim
Enquetes antigas (sim/não) Não Não Sim Não

Tecnologia Site 1 Site 2 Site 3 Site 4
Javascript (sim/não) Sim Sim Sim Sim
jQuery (sim/não) Sim Sim Sim Sim
AJAX (sim/não) Sim Sim Sim Sim
JAVA (sim/não) Não Não Não Não
Banco de dados (sim/não) Sim Não Sim Não
PHP (sim/não) Sim Não Sim Não
Fonte: JOHN SHIPLE (2012)

Técnico em Informática
Web Design

As características acima são apenas alguns exemplos do que podemos analisar sobre a
concorrência. Não fique limitado nas características acima, cada projeto tem características
diferentes a serem analisadas. Colocamos site1, site2 etc para não ocupar tanto espaço na
tabela, faça uma legenda indicando cada um dos sites analisados.

Dependendo do projeto, é interessante escrever para cada site analisado os prós e contras
bem como a inclusão das capturas de telas.
2.7. Entendendo o conteúdo

Recapitulando, já definimos os objetivos/metas, o público alvo, personas e cenários e
analisamos a concorrência/competidores nos resta entender o conteúdo do website.
Quando me refiro a conteúdo, não estou me referindo a texto a ser digitado, muito pelo
contrario, me refiro especificamente a três tipos de conteúdo: estático, dinâmico e
funcional/transacional para cada um destes três segue uma explicação.
2.7.1. Conteúdo estático

Consideramos como conteúdo estático todo o texto que foi criado com uma finalidade bem
especifica de sempre informar a qualquer visitante do website sobre:
 Políticas de privacidade.
 Termos de uso.
 Copyright (direitos reservados).
 Regras de participação de um sorteio.
 Editais de um concurso e etc.

Falando de forma técnica, este conteúdo foi criado com bastante antecedência para servir
de informação para os usuários. Vejamos alguns exemplos:

Técnico em Informática
Web Design

Figura 3: Website Americanas.Com – Conteúdo Estático.

Fonte: AMERICANAS (2012).

Geralmente a política de privacidade, termos de uso, copyright são colocado no rodapé do
website, na figura 3 mostramos a política de privacidade.

Figura 4: Website saraiva.com – mais exemplos de conteúdo estático.

Fonte: SARAIVA (2012).

2.7.2. Conteúdo dinâmico

Este tipo de conteúdo é exatamente o oposto ao anterior, pois este conteúdo será criado de
acordo com a navegação do usuário no website, por exemplo:
Técnico em Informática
Web Design

 Catálogo de produtos.

Imagine uma loja de produtos de informática com mil produtos! Se esse conteúdo fosse
estático, seria necessário um documento HTML para cada produto – isso é totalmente
inviável.
Observe as figuras:

Figura 5 – Busca de produtos em um website de produtos de informática

Fonte: NAGEM (2012).

Figura 6 – Busca de produtos em um website de produtos de informática

Fonte: NAGEM (2012).

Técnico em Informática
Web Design

Observe que nas duas figuras foi utilizado o formulário de busca com critérios de busca
diferente para cada um. Observe no quadro em destaque que o documento que exibe o
retorno da busca é o mesmo: busca.php
É isso que chamamos de conteúdo dinâmico, não tinha como criar um documento HTML
para cada busca realizada pelo usuário. Neste caso é mais aconselhável criar um documento
único capaz de exibir conteúdos variados.
2.7.3. Funcional/Transacional

É considerado conteúdo funcional/transacional todo e qualquer formulário utilizado no
website, por exemplo:
 Formulário de login.
o Funcionalidade: permitir que usuários cadastrados tenham acesso a
conteúdos exclusivos.
o Transação: verificar se o nome de usuário e senha digitados conferem com os
cadastrados no website.

Figura 7 – Exemplos de conteúdo funcional/transacional

Fonte: GLOBO; WORDPRESS (2012).

De posse dessas informações, você pode criar o que chamamos de inventário de conteúdo,
ou seja, pegue cada parte de conteúdo (estático, dinâmico e funcional/transacional) e defina
Técnico em Informática
Web Design

cada uma no projeto do website com base na analise competitiva, dessa forma você terá a
estrutura do website.
2.8. Entendendo a tecnologia

Assim como um engenheiro civil precisa entender os tipos de materiais e suas propriedades
para utilizar em uma construção, você precisar ter um entendimento da tecnologia por traz
do desenvolvimento de um website.

Nessa fase inicial do projeto temos três níveis de tecnologia:
 Plataformas
 Back-end
 Front-end

Para que você possa entender o que cada tecnologia representa, vejamos cada uma de
forma detalhada.
2.8.1. Plataformas

Com a evolução tecnológica dos equipamentos, o conteúdo do website pode ser distribuído
e visualizado em diferentes tipos de dispositivos, por exemplo:
 Smartphone
 Tablet
 Desktop
 Smart tv

Você precisa entender as limitações de cada dispositivo para poder projetar levando em
consideração os seguintes aspectos:
 Tamanho do display
Técnico em Informática
Web Design

o A lista anterior foi iniciada listando exatamente do menor para o maior.
Especificamente para os smartphone e tablet, podemos visual na horizontal e
vertical – medidas diferentes para cada visualização.
 Interação
o Por clique e por gestos. Um recurso bastante utilizado nos desktop é o
rollover, nos dispositivos móveis não existe rollover!
 Taxa de conexão
o Baixar um conteúdo que foi projeto exclusivamente para um desktop direto
em um smartphone nem pensar! É necessário solucionar este problema,
projetando o conteúdo para todos.

Você pode estar se perguntando ou pensando: Como se faz isso? Este tópico é informativo,
mais você vai aprender como fazer isso mais a frente, por enquanto estamos no inicio
definindo o escopo do projeto para que na fase de desenvolvimento não sejamos pegos de
surpresa e tenhamos que mudar todo o projeto.
2.8.2. Back-end

É a tecnologia utilizada nos conteúdos dinâmicos, como foi explicado na seção 2.5.2. Essa
tecnologia é utilizada no lado do servidor, isso mesmo um servidor de arquivos dentro de
uma estrutura de rede de computadores.

Essa tecnologia abrange as seguintes questões:
 Banco de dados
 Áreas protegidas por senhas
 Firewalls
 Personalização de perfis de usuários
 Sistemas de gerenciamento de conteúdo (CMS)
 Linguagem de programação
o PHP, ASP, ASP.NET, C#, JSP, Rubi on Rails e etc
Técnicoem Informática
Web Design

2.8.3. Front-end

É a tecnologia utilizada para criação do design das interfaces. Essa tecnologia é utilizada no
lado do cliente diretamente no browser (navegador) é o que você vai aprender nessa
disciplina.

Essa tecnologia abrange as questões de trabalhar em camadas:
 Camada de Informação
o O conteúdo textual do documento web com as marcações HTML.
o O HTML é a base sobre a qual as outras camadas serão assentadas.
 Camada de Apresentação
o Controlar a aparência visual, formatando com CSS todo o conteúdo textual
que contém as marcações HTML que deverá aparecer no navegador.
 Camada de Comportamento
o Inclui os scripts jQuery de programação que tornam a experiência do usuário
interativa.

HTML é uma sigla em inglês para Hyper Text Markup Language, em português
significa linguagem de marcação de hipertexto.
Hipertexto tem como principal característica interligar outros documentos na
web.
CSS é uma sigla em inglês para Cascading Style Sheet, em português significa
folhas de estilos em cascata. É considerado estilo ou estilizar uma marcação em
um documento HTML alterando as fontes, cores, posicionamento e etc.
A revista Wide Edição 81 Novembro/Dezembro 2010 trouxe em destaque a matéria:
Tecnologia – Especialistas falam da importância do front-end engineer

Segue abaixo algumas frases dessa matéria:
Grandes empresas, como Yahoo!, Google, Twitter, Microsoft e Adobe, investem pesado em front-
end. Rafael Mumme – desenvolvedor front-end sênior na HUGE de Nova Iorque.

A falta de um profissional especializado nessa área pode representar risco ao projeto.
Eduardo Lundgren – engenheiro de software na Liferay Inc.

O domínio de especialidades de front-end pela equipe é essencial para o sucesso de um produto na
web. Guilherme Chapiewski – Sr. Engineering Manager no Yahoo! Inc.

Leia também: O Front-end auxiliando o Marketing Digital por Deivid Marque -
http://migre.me/c16oo
http://migre.me/c16oo
Técnico em Informática
Web Design

Finalizada a etapa de elaboração do escopo do projeto o que aprendemos:
 A palavra design significa projeto
 Precisamos definir os objetivo/metas para website
 Precisamos conhecer o público alvo – a audiência do website
 Criar personagens e cenários para conhecer melhor o público alvo e a forma de
navegação no website
 Conhecer e analisar a concorrência/competidores do cliente
 Entender e onde aplicar as formas de conteúdo
 E por fim entender a tecnologia tanto na apresentação do conteúdo quanto no
desenvolvimento do mesmo no projeto do website

Técnico em Informática
Web Design

3. PLANEJAR UM WEBSITE

Vencida a fase de elaboração do escopo do projeto, vamos avançar no assunto aprendendo
a planejar um website.

Nessa fase você vai aprender a colocar ordem em meio a uma desordem. Como assim? Você
vai aprender a classificar o conteúdo para website. Como farei isso? Boa pergunta!
Rotulando, agrupando e categorizando.

Rotular é julgar, ou seja, ter um preconceito – uma opinião formada sobre alguma coisa, por
exemplo, observe o grupo de palavras abaixo e tente rotular cada palavra levando em
consideração que algumas palavras possam receber o mesmo rótulo.

Caso existam palavras que você não sabe o significado, não tem problema, separe estas
palavras e mais a frente veremos o que fazer com elas.
Agrupar é juntar em grupos ou reunir em grupos. Agora escreva as palavras acima em uma
folha agrupando-as pelo rótulo que você determinou anteriormente, separe a parte as
palavras que você não conhece ou não sabe o significado. Não fique tentado ver o resultado
que está logo abaixo, pois você precisa aprender fazendo e não olhando apenas.

Aprendiz
Aluno
Colega
Acadêmico
Universitário Discípulo
Educando
Pupilo
Estagiário Estudante
Tutelado
Técnico em Informática
Web Design

Categorizar é classificar ou separar por categoria. Agora que você separou as palavras em
grupos a partir do pré-julgamento que é o rótulo, você deve escrever uma palavra acima dos
grupos a fim de classificar as palavras que estão em cada grupo. Mais uma vez peço para não
olhar o resultado que está logo abaixo.

Finalizamos o processo de ordem em meio a uma desordem em apenas três passos –
Rotulando, Agrupando e Categorizando. Com essa introdução vamos aprender as técnicas
para poder planejar um website com o seguinte foco:

 Card Sorting
 Sistema de navegação
 Sistema de busca
3.1. Card sorting

Traduzindo o termo acima – classificação de cartões, que vai nos ajudar a realizar uma
avaliação com o público alvo que definimos na seção 2.2 a fim de criar a navegação do
Aprendiz
Estagiário
Acadêmico
Universitário
Educando
Aluno
Colega
Estudante
Discípulo
Pupilo
Tutelado
Aprendiz
Estagiário
Acadêmico
Universitário
Educando
Aluno
Colega
Estudante
Discípulo
Pupilo
Tutelado
Trabalho Formal Coloquial Fábula Direito
Técnico em Informática
Web Design

website. Essa técnica é utilizada para descobrir como o usuário classifica uma determinada
informação em sua mente.

Como farei isso? Você vai criar um conjunto de cartões que contém todas as palavras a
serem utilizados no website já com as categorias e entregar para os participantes dessa
avaliação, eles irão colocar ordem em meio à desordem utilizando o processo que você
acabou de aprender – Rotular, Agrupar e Classificar.

Você pode estar se questionando: por que é necessário fazer isso? Esse é um ótimo
questionamento! Respondendo ao questionamento: o website não será projetado para você
utilizar e sim para o público alvo (usuários), ou seja, pessoas que tenham ou não
conhecimento sobre navegação web.

Existem duas formas de aplicar o Card Sorting
 Card Sorting Aberto
o Nos cartões não constam as categorias previamente definidas e os
participantes é que definem as categorias.
 Card Sorting Fechado
o Nos cartões constam as categorias previamente definidas por você.

Qual das duas formas será utilizada? Pela complexidade do Card Sorting Aberto que gera
inúmeras variáveis na criação das categorias por parte dos participantes, vamos utilizar
sempre o Card Sorting Fechado, dessa forma, você terá um controle melhor quando for
consolidar os dados.

Técnico em Informática
Web Design

Figura 8 – exemplos de Card Sorting

Fonte: LOCALWEB (2012)

3.1.1. O processo

Entregue ao usuário uma série de cartões com as palavras e as categorias tudo junto e
misturado. Só pra reforçar vamos utilizar o Card Sorting Fechado.

Informe para o usuário apenas o necessário, que ele deve agrupar os cartões um abaixo do
outro de forma que todos os cartões tenham uma relação entre eles e o primeiro cartão
classifica (define) o grupo de cartões abaixo, com isso será realizado o processo que você
aprendeu – Rotulagem, Agrupamento e Classificação.

Fique apenas observando, caso ele não saiba o significado de alguma palavra que está no
cartão, peça para deixar a parte. Agora sim vou explicar o por quê. Achou que eu tinha
esquecido? Às vezes por nosso nível de conhecimento e vocabulário colocamos palavras que
fazem parte do nosso dia-a-dia, mas não faz parte do repertório da maioria das pessoas.

Card-sorting é uma técnica de um projeto centrado no usuário e tem
como objetivo principal descobrir como as pessoas organizam as
informações dentro de um site. Leia o artigo completo do Rogério
Pereira Card Sorting na prática em http://migre.me/c7wU7

http://migre.me/c7wU7
Técnico em Informática
Web Design

Por exemplo, a palavra docente define o profissionalque leciona, mas professor define
melhor o profissional que da aula, percebeu a diferença? Pergunte o porquê de ter separado
o cartão identifique e faça as anotações necessárias. Se o mesmo cartão for separado várias
vezes, é um indicador que: a palavra deve ser trocada por um sinônimo ou não deva fazer
parte no website.

Desenvolvimento
Recursos:
 Mesa
 Cartolina branca ou colorida

Tempo e quantidade:
 Deve durar de 20 a 40 minutos por pessoa
 O mínimo são 15 pessoas

Dados:
 Tire foto da classificação de cada participante
 Escreva as observações de cada participante
3.1.2. Consolidação dos dados

Nesta etapa você vai reunir todas as fotos e observações realizadas no Card Sorting com os
participantes em uma única classificação que chamamos de consolidar, que significa – firmar
ou fortalecer. Como farei isso? Vamos às etapas!

Etapa 1:
Comece analisando a primeira coluna de todas as fotos em busca de repetições na
classificação, se as repetições passar dos 50% será aceito como a classificação final. Repita
essa análise com todas as outras colunas.

Técnico em Informática
Web Design

Etapa 2:
Monte a classificação final e tire uma foto, esta foto fará parte no documento do nosso
projeto com as devidas observações caso seja necessário.

Figura 9 – Classificação final da Escola Criativa

Fonte: O Autor (2012)
3.1.3. Inventário de conteúdo

Quando você terminar de consolidar os dados, precisamos colocar estas informações em
uma tabela chamada Inventário de conteúdo. Você pode utilizar uma Planilha eletrônica
para que os dados fiquem mais organizados, nessa tabela constará o resultado final da
classificação por ordem de níveis do 0 (zero) que sempre será a Home até o nível mais baixo
a partir da Home.

Técnico em Informática
Web Design

Figura 10 – Inventário de conteúdo da Escola Criativa

Fonte: O Autor (2012)

No exemplo mostrado temos 7 (sete) níveis e em cada nível colocamos os seus sub-níveis.
Observe que no inventário de conteúdo descriminamos o máximo possível inclusive os três
tipos de conteúdo que você já aprendeu – Estático, Dinâmico e Funcional/Transacional.

Agora que temos uma visão macro do website com a classificação das informações em nosso
inventário de conteúdo, podemos considerar que as categorias identificam todo um
conteúdo relacionado a essa categoria. Por exemplo, a categoria Quem somos está
relacionada a todo o conteúdo que os visitantes desse website podem conhecer e ter a
respeito da escola.

Existem softwares para realizar o Card-sorting, seguem abaixo
alguns:
 CardZort – http:// http://www.cardzort.com/cardzort/
 CardsWord - http://sourceforge.net/projects/cardsword/
 WebSort - http://uxpunk.com/websort/

http://www.cardzort.com/cardzort/
http://sourceforge.net/projects/cardsword/
http://uxpunk.com/websort/
Técnico em Informática
Web Design

3.2. Sistema de navegação

A navegação web tem um papel importante com o usuário, pois provê acesso a informação
de forma melhor para encontrar a informação desejada. Espera-se que a navegação web
seja transparente, tão fácil aponto de não interferir. Um bom exemplo disso é o arbitro de
futebol, quando ele não interfere no jogo não é notado, mas basta uma decisão errada,
passa ser percebido e desce sobre ele a culpa do resultado final do jogo. Você vai aprender a
não atrapalhar o usuário e sim facilitar a vida dele com as técnicas de navegação web.

Vamos a algumas definições:
No dicionário Houaiss navegar é: percorrer, viajar por, consultar sequencialmente diversos
hipertextos. Na enciclopédia aberta Wikipédia navegação é: ciência, arte, pratica ou
tecnologia, de planejar e executar uma viagem de um ponto de partida até o ponto de
destino. E a navegação web? É do mesmo jeito!

Pois bem, sua função é indicar ao usuário onde ele está e mostrar o caminho para que ele
possa chegar ao destino. Estabelecer pontos de referências e uma sinalização que possa
orientar o usuário. Para facilitar a sua vida, seguem alguns princípios básicos de navegação
web em forma de recomendação:

 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: evitar o excesso de cliques
 Claro: o usuário não pode se sentir perdido
 Adequado: ao perfil do usuário

Junto com essas recomendações somamos aos elementos do sistema de navegação que
estão divididos em duas categorias:
Técnico em Informática
Web Design

 Sistema de navegação embutido
 Sistema de navegação remoto

3.2.1. Sistema de navegação embutido

Este sistema é formado pelos elementos de navegação que se apresentam junto ao
conteúdo do website com a função específica de melhorar e flexibilizar a navegação do
usuário.

 Logotipo
 Barra de navegação global
 Barra de navegação local
 Menu drop-down
 Megamenu
 Trilha de migalha de pão (Bread crumb)
 Conteúdo cruzado (Cross content)
 Erro 404
 Navegação por passos
 Navegação por paginação
 Navegação de abas
 Navegação em camadas
 Nuvens de tags
Para que você possa ter um entendimento melhor, vamos mostrar cada um dos elementos
embutidos.

O sistema de navegação remoto será estudado na próxima competência.
Técnico em Informática
Web Design

Logotipo
Além de identificar o website, serve como um retorno rápido ao início de tudo através de
um clique.

Figura 11 – Logotipo das lojas online Saraiva, Submarino e Americanas

Fonte: SARAIVA; SUBMARINO; AMERICANAS (2012)

Barra de navegação global
Esse modelo de organização traz os links de forma categorizados.

Figura 12 – Barra de navegação global da loja online Americanas

Fonte: AMERICANAS (2012)

Técnico em Informática
Web Design

Barra de navegação local
Esse modelo de organização é utilizado comumente em conjunto com a navegação global,
pois a partir de uma categoria macro podemos ter acesso às informações das subcategorias
e navegar por elas.

Figura 13 – Barra de navegação local da loja online americanas

Fonte: AMERICANAS (2012)

Menu drop-down
É um modelo de seleção mais básico para listar de forma rápida as subcategorias de uma
categoria específica.

Figura 14 – Menu drop-down da loja online submarino

Fonte: SUBMARINO (2012)
Técnico em Informática
Web Design

Megamenu
É uma variação do menu drop-down na tentativa de expor todas as categorias com suas
subcategoria agrupadas em um único local.

Figura 15 – Aplicação do megamenu nas lojas online rei e americanas

Fonte: REI (2012)

Fonte: AMERICANAS (2012)

Trilha de migalha de pão (Bread crumb)
Técnico em Informática
Web Design

Esse modelo serve para informar ao usuário duas coisas básicas na navegação: onde ele está
e de onde ele veio. A migalha de pão é apresentada na forma de link possibilitando o usuário
realizar uma navegação hierárquica.

Figura 16 – Aplicação do brean crumb na loja online submarino

Fonte: SUBMARINO (2012)
Conteúdo cruzado (Cross contente)
É apresentado ao usuário uma serie de links relacionados com as buscas realizada no
website, bem como as compras realizadas por um determinado usuário cadastrado no
website.

Figura 17 – Loja online submarino, realizado uma busca com a palavra-chave HTML

Fonte: SUBMARINO (2012)
Figura 18 – Conteúdo cruzado em relação à busca anterior com a palavra-chave HTML
Técnico em Informática
Web Design

Fonte: SUBMARINO (2012)

O conteúdo cruzado (Cross content) é exibido na mesma página com a busca, apenas dividi
as imagenspara uma melhor visualização.

Erro 404
Esse modelo de navegação é muito importante por informar ao usuário que o documento ou
informação que o usuário quer visualizar não foi encontrado no servidor. Junto com a
mensagem de erro, faz-se necessário servir o usuário com alternativas de navegação para
que ele possa sair dessa situação.
Figura 19 – Loja online do Submarino exibindo a página de erro 404

Fonte: SUBMARINO (2012)

Técnico em Informática
Web Design

Figura 20 – 404.html padrão do servidor

Fonte: O Autor (2012)

Navegação por passos
Esse modelo permite ao usuário mover-se sequencialmente por um determinado conteúdo.
Por exemplo, um conteúdo funcional/transacional como um cadastro em uma loja online.

Figura 21 – Loja online da Livraria Saraiva, formulário de cadastro para novos clientes.

Fonte: SARAIVA (2012)
A mensagem de erro 404 é um documento HTML (404.html) que deve
ser criado por você e colocada no servidor onde estiver hospedado o
website. Caso esse documento não exista, será retornado para o usuário
o documento 404.html padrão do servidor.
Técnico em Informática
Web Design

Navegação por paginação
Esse modelo é normalmente utilizado em um retorno de uma busca listando os resultados
ou em um catálogo de produtos e está sempre relacionado a um conteúdo dinâmico.

Figura 22 – Navegação por paginação loja online do Walmart

Fonte: WALMART (2012)

Navegação de abas
Esse modelo é utilizado para organizar melhor conteúdos longos ou organizar um conteúdo
pequeno de forma categorizada semelhante a barra de navegação global com uma diferença
importante – o conteúdo não é carregado novamente, ou seja, todo conteúdo é carregado
de uma única vez e distribuído nas aba.

Figura 23 – Website para criação de mapa de site – Write Maps

Fonte: WRITEMAPS (2012)
Técnico em Informática
Web Design

Navegação em camadas
Esse modelo é bastante utilizado para apresentar um determinado conteúdo em uma
camada acima do conteúdo que está sendo visualizado.

Figura 24 – Website 978.gs, através da categoria downloads clicando no item 300 grid
system

Fonte: 978 (2012)

Figura 25 – O conteúdo do item 300 grid system é aberto sobre o conteúdo da categoria
downloads em uma camada

Fonte: 978 (2012)
Nuvens de tags
Esse mecanismo é bastante utilizado em conjunto com um conteúdo dinâmico e geralmente
aplicado em blog`s e portais de notícias onde as tags (palavras relevantes) variam de
Técnico em Informática
Web Design

tamanho conforme a quantidade de conteúdo relacionada a tag, por exemplo, HTML5, CSS3,
nesse caso existem mais conteúdos relevantes para HTML5 do que CSS3.

Figura 26 – Nuvem de tags no blog carlosjose.net

Fonte: CARLOSJOSE (2012)

A maioria dos exemplos utilizados foram lojas online por utilizarem a maioria do sistema de
navegação embutido.
3.3. Sistema de busca

O sistema de busca é considerado uma alternativa ao sistema de navegação. A busca é uma
consulta por uma palavra-chave, a navegação permite que os usuários naveguem pelo
resultado da busca dessa palavra-chave. Você deve estar se perguntando: então devo
integrar a busca com a navegação? Isso mesmo! Deve ser tão transparente aos usuários que
eles nem percebam essa integração.
O que devo saber ou fazer pra chegar nesse resultado? Excelente pergunta! Segue algumas
recomendações que vão lhe ajudar a fazer essa integração:
 Explique sempre ao usuário de onde os resultados vieram
 Informe sempre na forma de mensagem o que o usuário acabou de fazer
 Repita o formulário de busca e a palavra-chave utilizada no resultado da busca
 Informe quantos itens foram encontrados
 Utilize a navegação por paginação
Técnico em Informática
Web Design

Figura 27 – Busca realizada na loja online do Walmart – palavra-chave: tablet

Fonte: WALMART (2012)

E quando não encontramos o que buscamos? O que fazer? Mais importante que um
resultado de uma busca é não ter resultado em uma busca daquilo que queremos encontrar.
Segue algumas recomendações para integrar a busca sem resultados:
 Informe sempre de forma clara e objetiva que não foi encontrado o termo
pesquisado
 Peça ao usuário para revisar a palavra-chave caso tenha escrito errado
 Repita o formulário de busca e a palavra-chave utilizada no resultado da busca

Figura 28 – Busca realizada na Revista Científica Tecnologus – palavra-chave: informática

Fonte: TECNOLOGUS (2012)
Finalizada a etapa de planejar um website o que aprendemos:
Técnico em Informática
Web Design

 A colocar ordem em meio da uma desordem – Rotulando, Agrupando e
Categorizando
 Rotular, agrupar e categorizar faz parte da técnica Card Sorting que analisa a forma
como o usuário classifica determinados dados.
 Que existem duas formas de aplicar o Card Sorting – aberto e fechado.
 Que devemos aplicar o Card Sorting com no mínimo 15 participantes que se
enquadrem no público-alvo do website
 Que devemos consolidar os dados realizados no Card Sorting
 A consolidar os dados do Card Sorting para preencher o inventário de conteúdo
 Que o sistema de navegação possui elementos embutidos ao design do website para
melhorar e flexibilizar a navegação do usuário
 Que o sistema de busca é considerado uma alternativa ao sistema de sistema de
navegação e que deve ser integrado ao website

Técnico em Informática
Web Design

4. CONHECER OS MODELOS DE REPRESENTAÇÃO E ORGANIZAÇÃO
DE WEBSITE

Vencida a fase de planejar um website, vamos avançar em Conhecer os modelos de
representação e organização de website.

Na competência anterior aprendemos que o sistema de navegação possui duas categorias:
Sistema de navegação embutido e sistema de navegação remoto que deixei para explicar
sua funcionalidade agora por fazer parte desta competência.
4.1. Sistema de navegação remoto

Consideramos como sistema de navegação remoto os elementos que estão fora da
hierarquia principal do website que tem a função de fornecer caminhos complementares
para que os usuários possam encontrar o conteúdo desejado. Este sistema é constituído de
dois elementos:

 Mapa do site
 Índice remissivo

Em conjunto com o sistema de navegação remoto (mapa do site), vamos aprender o fluxo de
navegação que é a representação do mapa do site em alto nível de complexidade. Fique
tranquilo e aproveite essa nova fase para aprimorar mais o seu conhecimento em web
design.
4.1.1. Mapa do site

O mapa do site fornece uma visão geral da estrutura navegacional do website, possibilitando
assim ao usuário pular diretamente para qualquer parte do website. Em muitos casos o
mapa do site tem a sua própria página de forma simples e apreensível. Um website com uma
grande quantidade de conteúdo e tipos variados de público-alvo o mapa do site vem a ser
uma ajuda importante.

Elementos do mapa do site
Como não existe uma regra ou definição específica para a exibição do mapa do site, faz-se
necessário possuir elementos que sejam comuns a todos os mapas. Elementos básicos para
o mapa do site:
 Nós – as páginas do website.
 Conexões – os relacionamentos existentes entre os nós.
Técnico em Informática
Web Design

 Rótulos – um título que seja correspondente ao nó.
 Esquema de numeração – serve como um identificador único a cada nó.

Figura 29 – Inventário de conteúdo ajuda a projetar o mapa do site

Fonte: O Autor (2012)

Figura 30 – Mapa do site feito a partir do inventário de conteúdo com esquema de
numeração

Fonte: O Autor (2012)

Mapas de alto nível
Neste caso não o mapa não ficou restritos em mostrar apenas as categorias principais, mas
fornece o usuário a possibilidade de exploraras subcategorias e os detalhes específicos de
cada categoria.

Técnico em Informática
Web Design

Figura 31 – Mapa do site do banco Bradesco

Fonte: BRADESCO (2012)
4.1.2. Índice remissivo

Outro elemento do sistema de navegação remoto é o índice remissivo. Pode ser
apresentado de varias formas, por exemplo:
 Menu drop-down
 Lista

O índice remissivo é uma lista com os rótulos do inventário de conteúdo em ordem
alfabética por ordem de importância. Para usuários que já tenham uma ideia do conteúdo
que procuram, essa é uma ótima opção.

Figura 32 – Índice remissivo do banco Bradesco

Fonte: BRADESCO (2012)

Técnico em Informática
Web Design

4.2. Fluxo de navegação

Avançando mais no assunto, você vai aprender agora a criar diagramas que representem o
fluxo de navegação em um website. O fluxo de navegação vem logo em seguida ao mapa do
site, na verdade vamos utilizar o mapa do site como ponto de partida para o fluxo de
navegação.

O Jesse James Garrett é co-fundador e chief creative officer da Adaptive Path, empresa
especializada em design de interação, arquitetura de informação, entre outras áreas. No ano
2000 Jesse deu inicio a criação de uma biblioteca de vocábulos visuais com finalidade de
padronizar o fluxo de navegação em forma de diagrama. A versão mais atual desse vocábulo
data de 06 de março de 2002.

O vocábulo visual criado por Jesse é um conjunto de símbolos baseados em um modelo
conceitual da arquitetura de informação e design de interação para prover:

 Caminhos para o usuário no website
 A movimentação do usuário ao longo desses caminhos através de ações
 Ações que geram resultados na navegação

Você pode utilizar qualquer programa gráfico para fazer o mapa do site.
Existe uma ferramenta online para criação, edição e distribuição do mapa
do site – WriteMaps: http://writemaps.com/
Segundo a Wikipédia, a enciclopédia livre, o termo Arquitetura de
Informação é a arte de expressar um modelo ou conceito de informação
utilizado em atividades que exigem detalhes explícitos de sistemas
complexos.
Design de interação é uma área do design especializada no projeto de
artefatos interativos, como websites, PDAs, jogos eletrônicos e softwares.
A documentação completa desses vocábulos está no artigo: A visual
vocabulary for describing info architecture and interaction design.
http://writemaps.com/
http://www.jjg.net/ia/visvocab/
http://www.jjg.net/ia/visvocab/
Técnico em Informática
Web Design

4.2.1. Representação dos elementos simples

Os elementos a seguir representam um fluxo de navegação estática onde cada caminho leva
sempre ao mesmo resultado.

Elementos simples: páginas, arquivos, pilha de páginas e pilha de arquivos
O retângulo é a representação básica de um ou mais documentos HTML que normalmente
chamamos de página ou pilha de páginas. As páginas podem ter um arquivo ou vários
arquivos vinculados que são entregues aos usuários para ser utilizado fora do fluxo de
navegação do website, por exemplo, manuais em PDF, arquivos de áudio, arquivos zipados e
etc.
Quando tiver mais de um arquivo que recebe as mesmas funcionalidades de navegação, por
exemplo, um catálogo de wallpaper deve ser representado como uma pilha de arquivos.

Figura 33 – Elementos simples: páginas, arquivos, pilha de páginas e pilha de arquivos.

Fonte: O Autor (2012)

Tanto nas páginas quanto nos arquivos faz-se necessário a identificação dos mesmos através
de rótulos.

Criando relações: conectores e setas
Para representar as relações dos elementos, utilizamos conectores e setas.
Técnico em Informática
Web Design

Figura 34 – Representação de relações simples

Fonte: O Autor (2012)

Nessas relações é importante identificar o sentido ou a direção que o usuário pode tomar na
navegação a fim de realizar uma determinada tarefa.

Figura 35 – Representação das relações com conectores e setas

Fonte: O Autor (2012)

a) Seta indica movimento downstream (ou caminho de ida),
b) Crossbar indica que o movimento upstream não é permitido (ou caminho de volta) e
c) Múltiplas pontas de setas indicam a direção do fluxo.

Técnico em Informática
Web Design

Para um entendimento mais claro sem ambiguidade das relações entre as páginas, faz-se
necessário a aplicação de notas de rodapé ou apêndices com uma descrição explicativa
dessa relação.

Figura 36 – Representação das relações com notas de rodapé

Fonte: O Autor (2012)

Tudo de uma vez: conjuntos concorrentes
A característica principal de um conjunto concorrente (condição de disputa) é a utilização de
um semicírculo onde a ação do usuário gera múltiplos resultados simultâneos. Por exemplo,
a realização de um download de um arquivo.

Figura 37 – Representação das relações com conjunto concorrentes que tem como elemento
base o semicírculo

Fonte: O Autor (2012)
Técnico em Informática
Web Design

Separando: pontos de continuidade
Existem diagramas de fluxo de navegação que são bem simples e cabem em uma página A4,
mas em outros casos os diagramas podem ser complexos e não cabem em apenas uma
página A4. Para esse segundo caso, aplicamos os pontos de continuidade, ou seja,
separamos o diagrama em seções de fácil entendimento. Utilizamos o princípio de dividir
para conquistar.

Figura 38 – Representação das relações com pontos de continuidade

Fonte: O Autor (2012)

Elementos comuns: áreas e áreas interativas
Um retângulo com os cantos arredondados representa uma área para agrupar páginas
comuns com o mesmo tratamento gráfico. Quando este elemento foi criado usavam-se
janelas pop-up, mas com a evolução dos padrões web passamos a utilizar janelas em
camada.

Um ponto de continuidade pode ter mais de uma origem ou destino de
acordo com a necessidade.
Técnico em Informática
Web Design

Figura 39 – Representação das relações com uma navegação pop-up ou em camada
simbolizado pelo retângulo com os cantos arredondados

Fonte: O Autor (2012)

As áreas interativas seguem o mesmo principio da área, com uma pequena diferença
importante representar uma estrutura onde varias páginas estão associadas a uma única
página como um catalogo de produtos ou um portfólio.

Figura 40 – Representação das relações com áreas interativas simbolizado por vários
retângulos com os cantos arredondados.

Fonte: O Autor (2012)

Elementos reutilizáveis: área de referência e fluxo de referência
Os elementos reutilizáveis são uma “mão na roda”, pois em um fluxo de navegação é
comum uma sequência de passos como login de usuário e download de arquivos
aparecerem várias vezes ao longo do diagrama.
Técnico em Informática
Web Design

O fluxo de referência serve como um marcador em um determinado ponto no diagrama para
representar o elemento que se repete. Dessa forma fazemos um único diagrama de login em
uma área de fluxo e o representamos com um fluxo de referência.

Figura 41 – Representação das relações com elementos reutilizáveis simbolizado pelo
retângulo com os cantos cortados

Fonte: O Autor (2012)

4.2.2. Representação dos elementos condicionais

Os próximos elementos requerem uma lógica condicional para representar um fluxo de
navegação dinâmica, onde mediante uma escolha é determinado um caminho com base em
uma avaliação ou condição.

Elementos condicionais: pontos de decisão
O ponto de decisão é representado por um losango onde uma ação do usuário pode gerar
apenas um entre vários caminhos a ser seguido. Podemos citar alguns exemplos, tentar
submeter um formulário sem preencher os campos e receber uma mensagem de erro,
realizar um login e entrar com dados incorretos e receber uma mensagem de erro.Área de fluxo e fluxo de referência possui a mesma forma – um
retângulo com os cantos cortados. A área de fluxo requer dois tipos de
pontos de continuidade específicos: ponto de entrada e ponto de saída.
Técnico em Informática
Web Design

Figura 42 – Representação das relações com pontos de decisão que tem como elemento
base um losango.

Fonte: O Autor (2012)

Criando relações condicionais: conectores e setas
Representado por uma linha tracejada tem como finalidade indicar as relações que o usuário
pode seguir se a condição for verdadeira segue por um caminho se for falsa segue por outro
caminho como está representado no ponto de decisão.

Figura 43 – Representação das conexões com conectores e setas condicionais

Fonte: O Autor (2012)
a) Seta indica movimento downstream (ou caminho de ida),
b) Crossbar indica que o movimento upstream não é permitido (ou caminho de volta) e
c) Múltiplas pontas de setas indicam a direção do fluxo.

Múltipla escolha: ramos condicionais
Técnico em Informática
Web Design

Um ramo condicional é a representação de vários caminhos ao mesmo tempo (chamado de
mutuamente exclusivo), mas que são exclusivos mediante escolha do sistema e apresentado
ao usuário. Por exemplo, um website de comércio eletrônico existe vários usuários, cada
usuário mediante login é direcionado para um dos ramos/caminhos do sistema.

Figura 44 – Representação das relações condicionais com caminhos mutuamente exclusivos
que tem como elemento base um triangulo.

Fonte: O Autor (2012)

Escolha um ou mais: seletores condicionais
Funciona de forma semelhante à múltipla escolha com uma diferença crucial, são
apresentados caminhos não exclusivos ao usuário. Por exemplo, uma pesquisa realizada no
Google sempre traz como resultado: web, imagens, mapas, shopping, vídeos, notícias e
mais.

Figura 45 – Representação das relações condicionais em uma busca com múltiplos caminhos
que tem como elemento base um trapézio

Fonte: O Autor (2012)
Técnico em Informática
Web Design

Uma decisão, muitos caminhos: grupos
Para representar estruturas condicionais com base em certas decisões, associamos os
caminhos e agrupamos a outras estruturas. Funciona de forma semelhante ao ramo
condicional só que é apresentado mais de um caminho ao usuário.

Figura 46 – Representação das relações condicionais agrupadas com outras relações que tem
como elemento base um círculo

Fonte: O Autor (2012)

Aplicando algumas restrições: áreas condicionais
A área condicional é uma boa representação de um fluxo de navegação para áreas restritas
que necessitam de acesso exclusivo via login para ter acesso a um conjunto de páginas com
informações sigilosas. Por exemplo, acessar a conta em um banco, acessar uma loja online,
acessar um sistema corporativo, acessar uma intranet e etc.

Figura 47 – Representação das relações condicionais com uma conexão segura tem como
elemento base um retângulo com os cantos arredondados com a linha tracejada

Fonte: O Autor (2012)
Técnico em Informática
Web Design

Finalizada a etapa com os modelos de representação e organização de um website o que
aprendemos:
 Que o sistema de navegação remoto é formado pelo mapa do site e pelo índice
remissivo.
 O mapa do site é formado por: nós que são as páginas, pelas conexões entre os nós,
os rótulos que correspondem aos nós e por fim possuem um esquema de
numeração.
 O inventario de conteúdo é a base para construir o mapa do site.
 Que existe um vocabulário especifico para representar o fluxo de navegação de um
website.
 O fluxo de navegação está dividido em representações simples e representações
condicionais.

Técnico em Informática
Web Design

5. ELABORAR LAYOUTS PARA WEBSITE

Vencida a fase de conhecer os modelos de representação e organização de website, vamos
avançar na elaboração de layouts para website.

Você deve está ansioso para começar a escrever o HTML, mas precisamos ainda agregar
mais conhecimento para poder começar a codificar um website.

Com o conhecimento adquirido com o fluxo de navegação (seção 4.2), podemos ter uma
visão macro de todo o website. O layout tem um papel fundamental nessa fase em que o
usuário vai reagir ao design aplicado, faz-se necessário poder representar de forma gráfica
as páginas e suas variações com o sistema de navegação (seção 3.2.1 sistema de navegação
embutido), texto, imagens, vídeos e etc.

No processo de criar um leiaute, existem três áreas principais:
 Determinar os caminhos de navegação
 Projetar uma lógica visual
 Criar templates de páginas

Desses três processos vamos aprender os dois últimos, pois o primeiro você já aprendeu
com a competência anterior.
5.1. Projetar uma lógica visual

Na seção 3.2 – Sistema de navegação, foram apresentadas algumas recomendações que
devem ser seguidas na navegação web que agora devem ser aplicado na criação do layout da
página do website, que deve ser apreensível, ou seja, fácil de aprender e isto deve acontecer
antes mesmo do usuário ler qualquer texto. Por falta de conhecimento de todo esse assunto
que estou lhe apresentando até agora, muitos websites não seguem uma lógica visual, e em
Segundo Houaiss dicionário da língua portuguesa, a palavra layout (leia-se
leiaute) significa esboço ou projeto gráfico.
Técnico em Informática
Web Design

alguns casos não tem nenhuma lógica. E mistura-se quantidade de informação a uma baixa
qualidade visual. Faço questão que você pare agora a leitura desse material e navegue nos
links abaixo:
 http://migre.me/cmuj6
 http://migre.me/cmuqh
 http://migre.me/cmurV

Não coloquei as imagens de propósito, talvez você nunca tivesse imaginado que poderia
existir websites com tão baixa qualidade e sem nenhuma lógica visual na vida! Vou colocar
colírio nos seus olhos, pois agora segue uma nova lista, porem onde a quantidade de
informação associada a uma lógica visual faz toda a diferença. Mais uma vez, pare de ler este
material e navegue, explore os links abaixo:
 http://migre.me/cmve4
 http://migre.me/cmvBz
 http://migre.me/dtGGJ

Não existem regras que definam ou que formem padrões para se projetar um layout de
navegação de um website. Mas nada impede que peguemos emprestadas as leis da
psicologia das formas a Gestalt, para ajudar no processo de criação do layout.

Figura 48 – Um exemplo de efeito Gestalt

Fonte: O Autor (2012)
a) observamos quatro círculos cortados como foram desenhados, mas em b) realmente é o
que vemos, ou seja, não conseguimos apenas observar os círculos de forma individual, mas
http://migre.me/cmuj6
http://migre.me/cmuqh
http://migre.me/cmurV
http://migre.me/cmve4
http://migre.me/cmvBz
http://migre.me/dtGGJ
Técnico em Informática
Web Design

um quinto elemento – o quadrado central. Vamos observar algumas leis da Gestalt para
criação de layout.
5.1.1. Leis da Gestalt

Proximidade
Elementos próximos tendem a ser vistos constituindo uma unidade dentro de um todo.

Figura 49 – Proximidade

Fonte: O Autor (2012)
Os grupos são formados pelos objetos que estão próximos, assim temos dois grupos.

Fechamento
É importante para formação de unidades dando a sensação de fechamento visual da forma
pela ordem estrutural.

Figura 50 – Fechamento

Fonte: O Autor (2012)
Técnico em Informática
Web Design

Nesse exemplo o nosso olho adiciona novos elementos que faltam para completar a forma,
por exemplo, um retângulo.

Continuidade
É a sensação visual que as partes se sucedem através da organização sem quebras ou
interrupções na trajetória visual. Um padrão que aparece e se estende mesmo após a sua
parada.

Figura 51 – Continuidade,os retângulos diagonais parecem continuar após sua parada.

Fonte: O Autor (2012)

Na figura 51 a sensação é que os retângulos mais finos na diagonal continuam a se repetir
para cima mesmo após a sua parada.
Similaridade
É a tendência de associar elementos pelas propriedades similares.
Figura 52 – Similaridade

Fonte: O Autor (2012)
Técnico em Informática
Web Design

Misturando as partes
Você pode e deve misturar ou combinar as leis da Gestalt para criar um layout. Por exemplo,
ao alinhar elementos similares próximos uns dos outros a fim de dar um fechamento e ao
mesmo tempo uma continuidade, dessa forma geramos um padrão totalmente reconhecido
pelo usuário.

Figura 53 – Combinando as leis da Gestalt para criar layout

Fonte: O Autor (2012)

Balanceamento
Na criação de um layout você deve levar em consideração o balanço de todos os elementos
dispostos na página. Como faço isso? Boa pergunta! Fazendo um balanceamento
assimétrico, separando uma parte do layout para as informações mais importantes, por
exemplo:
 Layout de navegação – focar nas opções de navegação (75% navegação e 25%
conteúdo).
 Layout de conteúdo – focar no conteúdo (75% conteúdo e 25% navegação).
 Layout com funcionalidades – focar nas funcionalidades (50% funcionalidade, 30%
conteúdo e 20% navegação).
Para uma maior compreensão do que acabamos de explanar, é interessante
ler o artigo - Gestalt aplicado ao web design, escrito por Canha.
Veja também os artigos: Teoria da Gestalt e Gestalt aplicada no design de
interfaces: exemplos práticos.

http://design.blog.br/web-design/gestalt-aplicado-ao-web-design
http://www.linguagemvisual.com.br/gestalt.php
http://www.revistawide.com.br/index.php/gestalt-interfaces-exemplos/
http://www.revistawide.com.br/index.php/gestalt-interfaces-exemplos/
Técnico em Informática
Web Design

É claro que podemos criar um layout que contemple navegação, conteúdo e
funcionalidades. As porcentagens podem e devem variar mediante a sua decisão na criação
do layout, como disse antes não existe uma regra definida, mas existe o bom censo.

Figura 54 – Layout com foco na navegação (navegue para entender melhor)

Fonte: AMERICANAS (2012)

Figura 55 – Layout com foco no conteúdo (navegue para entender melhor)

Fonte: CARLOSJOSE (2012)

http://www.americanas.com.br/
http://carlosjose.net/
Técnico em Informática
Web Design

Figura 56 – Layout com foco nas funcionalidades (navegue para entender melhor)

Fonte: CREPES TRIUNFO (2012)
5.2. Criar templates

Essa é uma definição geral e genérica que já nos traz uma clareza do seu significado.
Trazendo para a construção de websites, o template é uma evolução do layout, um
aprimoramento. Analise junto comigo o seguinte cenário:

Precisamos construir um layout com foco no conteúdo, pois se trata de um portal de noticias
que agrupe esportes, entretenimento, noticias e etc. Imagine ter que desenhar um layout
para muitas páginas definindo o posicionamento do conteúdo juntamente com o sistema de
navegação (seção 3.2.1 sistema de navegação embutido).

É exatamente para resolver esse tipo de problema que definimos as regras dos templates.
Nesse exemplo vamos ter uma coleção de páginas com a predefinição da apresentação do
conteúdo e do sistema de navegação. Mas ainda terá uma variação grande de templates?
Segundo a Wikipédia, a enciclopédia livre template (ou "modelo de
documento") é um documento sem conteúdo, apenas com a apresentação
visual (somente cabeçalhos, por exemplo) e instruções sobre onde e qual
tipo de conteúdo deve entrar a cada parcela da apresentação — por
exemplo, conteúdos que podem aparecer no início e conteúdos que só
podem aparecer no final.

http://www.crepestriunfo.com.br/
Técnico em Informática
Web Design

Sim! Para resolver esse problema criaremos módulos que se encaixem nos templates, ou
seja, definimos um template central e para as partes que vão variar criamos módulos que se
encaixem perfeitamente nesse template, assim estaremos modularizando o layout.

Regras de navegação
No processo de definição do layout a partir dos templates e suas variações através dos
módulos, precisamos levar em conta três itens:
 Mostrar os módulos de navegação – definir todas as possíveis variações que podem
aparecer em uma página com indicações de quais módulos são de uso obrigatório e
quais não são.
 Posição dos mecanismos de navegação – normalmente estes módulos possuem um
posicionamento fixo, caso um determinado módulo que se relaciona com o módulo
de navegação não seja utilizado em um determinado momento, faz-se necessário um
novo ajuste no módulo de navegação.
 Limites – levar em conta os limites da parte superior e inferior do template. Por
exemplo, limitamos a quantidade de 10 post’s em um blog e aplicamos o sistema de
navegação – paginação.

Figura 57 – Templates simples mostrando as regras de navegação.

Fonte: O Autor (2012)

Técnico em Informática
Web Design

Em cada template você pode ver a disposição dos módulos com a indicação de obrigatório e
opcional, a regra de desvio caso um módulo não esteja presente e por fim a indicação de
limites na apresentação dos produtos.

5.3. Prototipação

A prototipação em web design tem ajudado muito no desenvolvimento dos layouts e dos
templates. Mas especificamente a prototipação em papel, por ser um processo evolutivo,
você pode desenha/rascunhar o layout das telas até chegar numa ideia final. Com a ideia
definida você pode passar a criar os templates com seus respectivos módulos.

Figura 58 – Prototipação do website NovoStudio

Fonte: O Autor (2012)
O exemplo da figura 57 mostra dois templates de empresas diferentes que
possuem módulos semelhantes, mas quero chamar a sua atenção para as
variações que cada um em particular terá à medida que os usuários
naveguem pelo website, e você precisa fazer cada uma dessas variações
conforme o fluxo de navegação do website.

Aplique as leis da Gestalt no template e em suas variações ao longo da
navegação não se esqueça de balancear a disposição dos módulos.

Segundo a Wikipédia, a enciclopédia livre Prototipação é uma abordagem
baseada numa visão evolutiva no desenvolvimento de sistemas, com intuito
de avaliar algumas de suas características antes que o sistema venha
realmente a ser construído, de forma definitiva.

Técnico em Informática
Web Design

Figura 59 – Template final do website NovoStudio

Fonte: O Autor (2012)

5.4. Construindo wireframe

Ao longo dessa competência, fiz questão de utilizar a Wikipédia para dar as definições ao pé
da letra para que você possa entender bem o que você esta estudando e aprendendo. Pois
estamos chegando à reta final dos assuntos que antecedem o desenvolvimento do website
utilizando as tecnologias (HTML, CSS e jQuery) de desenvolvimento de interfaces web.

Não abordei a prototipação antes, pois queria que você pudesse ter uma
visão bem linear do processo de elaboração de layouts, pois antes de
pensar no layout e no template, você deve fazer a prototipação em papel
da navegação das telas, conteúdo e funcionalidades.
Separei um artigo escrito pelo meu aluno Edson Luiz que é colunista no
Choco la design falando da importância da prototipação em papel -
Prototipação em papel, porque fazer?
Segundo a Wikipédia, a enciclopédia livre Wireframe é 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.