UNIVERSIDADE GUARULHOS

PROJETO EM WEB DESIGN

SITE CAZUZA – FAÇO PARTE DESSE SHOW

TATIANA FERREIRA DE ANDRADE

GUARULHOS
2006

1
 TATIANA FERREIRA DE ANDRADE

SITE CAZUZA – FAÇO PARTE DESSE SHOW

Monografia para Trabalho de Graduação Integrado

apresentada ao Curso Projeto em Web Design, da
Universidade Guarulhos, como parte dos Requisitos
para a obtenção do título de Web Designer.
Orientador de Projeto:
Prof. Bruno Costa Corrêa.

GUARULHOS
2006

2
 Dedico aos meu pais, pelo apoio;
Aos meus amigos de curso pela ajuda;
E aos professores pela confiança depositada.

3
AGRADECIMENTOS

Agradeço aos meus pais e tia Rita, que tornaram este sonho possível.
Aos amigos de curso, pelas sugestões e referências.
Aos professores Paula Cristiani e Bruno Correa, pelas orientações, sugestões e referências.
Ao professor Manoel Lorena, pela ajuda, orientação, sugestões, referências e confiança.
E aos demais que, de alguma forma, contribuíram na elaboração desta monografia.

4
 Sumário

1 – Introdução.................................................................................................................................7
2 – A Internet..................................................................................................................................8
2. 1 - História da Internet...........................................................................................................8
2. 2 - Tipos de conexão à Internet...........................................................................................10
2. 3 – Navegadores....................................................................................................................10
2.4 - Browsers............................................................................................................................11
2. 5 - Usabilidade.......................................................................................................................11
2. 6 – Acessibilidade..................................................................................................................12
2.7 – Ciberespaço......................................................................................................................12
2.8 - Cibercultura......................................................................................................................12
2. 9 - Tipos de imagens mais usados na web...........................................................................13
2. 10 - FTP.................................................................................................................................13
2. 11 – Tipografia......................................................................................................................13
2. 12 - Descrição das Tecnologias............................................................................................14
2. 13 - Cores e seus significados psicológicos..........................................................................15
3 – Projeto – Site Cazuza – Faço parte desse show...................................................................17
3. 1 - Objetivo............................................................................................................................17
3. 2 - Conteúdo e Estrutura Visual..........................................................................................17
3. 3 - Análise dos concorrentes................................................................................................17
3. 4 – Tipografia do site............................................................................................................20
3. 5 - O uso das cores................................................................................................................20
3. 6 - O layout............................................................................................................................21
3. 7 - Linguagens e tecnologias................................................................................................21
3. 9 - Mapa do Site....................................................................................................................22
3. 10 – Links..............................................................................................................................23
3. 11 – Orçamento.....................................................................................................................27
4 – Conclusão................................................................................................................................32

5
5 – Fluxograma.............................................................................................................................33
6 – Manual do Site........................................................................................................................34
6 - Bibliografia..............................................................................................................................59

6
1 – Introdução

Cazuza viveu uma vida "Exagerada". Alertou para todos sobre o perigo da Aids, zombava
de sua beleza, sem força e sem voz ele sabia que a morte era inevitável, mas mesmo assim usava
sua Rebeldia e sua criatividade contra ela. Cazuza era um "Anjo Rebelde", cuspia na hipocrisia e
xingava a burguesia com suas letras e composições explícitas. Cazuza, porém, também tinha
aquele lado romântico e sensível que sua vida, louca vida lhe forneceu. Mesmo preferindo ser
reconhecido como um letrista, o Brasil tem que reconhecer que ele foi um dos maiores cantores
brasileiros dos anos 80, com sua morte Cazuza provou a todos que os poetas morrem cedo, mas
as poesias não morrem jamais.
Cazuza se torna cada vez mais universal pelo que fez. E existem formas para divulgarmos
o que ele vivia e propunha.
A Web, como um meio de comunicação universal, cresce a taxas nunca vistas. Seu
dinamismo , sua evolução, seu baixo custo e sua simplicidade cada vez maior são vantagens
indiscutíveis na divulgação de informações, querem elas tenham o caráter de entretenimento,
formação cultural e/ou jornalística.

7
2 – A Internet

2. 1 - História da Internet

Durante a Guerra Fria (décadas de 60/70 e meados da década de 80) um dos maiores
medos dos nortes americanos era o de perder as informações hospedadas em servidores
localizados dentro de “quartéis-generais” estratégicos. Se um ponto fosse bombardeado as
informações importantes e essenciais não seriam perdidas.
Dessa forma, o Departamento de Defesa pensou em um sistema que interligasse vários
pontos, de modo que não se centralizasse o comando. Com uma rede onde não há um computador
central, caso a Casa Branca fosse atingida, as informações “iriam” para o Pentágono. E se o
mesmo acontecesse no Pentágono, as informações já estariam a salvo em outro lugar qualquer.
Essa Rede era considerada à prova de bombardeio, pois o “sistema não caía” caso um dos pontos
desaparecesse. Denominou-se tal Rede, que surgiu em 1969, de ARPAnet (Advanced Research
Projects Agency). Na verdade essa rede interligava, originalmente vários centros de pesquisas.
No início da década de 80 com o visível enfraquecimento da URSS, uma nova utilidade
para a ARPAnet foi desenvolvida: Interligar laboratórios e universidades nos EUA e mais tarde,
em outros países. Foi exatamente nessa época que surgiu o nome Internet.
Apesar disso, apenas no final dos anos 80 a Internet passou a ser vista como um eficiente
veículo de comunicação mundial. Cientistas e acadêmicos passaram a utilizá-la de forma muito
mais intensa. Só que a Net só existia no formato de texto, como nos antigos arquivos Gopher. Isto
a limitava a um gueto de cientistas.
Foi então que no final da década de 80, Tim Berners-Lee teve a idéia de desenvolver
com sua equipe do CERN (European Organization for Nuclear Research, de Genebra), um
sistema de hipertexto que deveria funcionar em redes de computadores. Nesse momento, ele
pensava apenas nos cientistas que precisavam compartilhar suas pesquisas uns com os outros.
Em 1991, esses pesquisadores tiveram a idéia de criar a World Wide Web. No início a
maior parte das informações ainda era no formato de texto, com poucos desenhos. Em 1992,
Marc Andressen, do NCSA (National Center for Supercomputer Activity), criou o primeiro
navegador para Internet: o Mosaic, para sistema X Windows. Em seguida apareceram versões do

8
Mosaic para Macintosh e Microsoft Windows. O Mosaic era capaz de interpretar gráficos e
realizar navegações através de links, como podemos ver atualmente na Web.
Também em 92, All Gore, que era senador na época, impulsionado pelas eleições
presidenciais, passou a falar sobre a Information Highway, ou Superestrada da Informação. Nesse
momento todo mundo começou a prestar mais atenção na Internet e na Web. Logo surgiu um
grande interesse comercial pela Rede e foi aí então que aconteceu sua grande expansão.
Em nossos dias a Internet passou a ter tamanha importância, que recentemente a China
anunciou que está desenvolvendo uma Internet particular, alegando que os atuais padrões da
Rede Mundial de Computadores não atendem as expectativas das indústrias chinesas. Ainda não
se sabe se a Internet chinesa será aberta para estrangeiros, mas já se sabe que os sistemas de
segurança serão tão rigorosos quanto a segurança de qualquer unidade militar americana ou russa
no auge da Guerra Fria.
Os padrões de HTML (Hyper Text Markup Language) que é a linguagem com a qual se
programa as páginas atuais da Internet são definidos pelo W3C (World Wide Web Consortium),
um consórcio liderado por Tim Berners-Lee, do qual fazem parte empresas como a Microsoft, a
Apple, a Sun e a Netscape. Atualmente a Internet é um conjunto de mais de 40 mil redes e
respeitando a concepção original não existe um ponto central, isto é, um centro de comando da
Internet. Hoje a Internet é considerada por muitos teóricos da comunicação, um fenômeno tão ou
mais importante para a humanidade quanto a Revolução Industrial.
O fantástico conceito de Aldeia Global, de Mc Luhan também pode ser utilizado para este
novo meio: A Internet tornou o mundo menor.
Segundo as últimas pesquisas de e-commerce, o sucesso comercial da rede demonstra que
em algumas empresas já têm uma venda representativa através de seus websites.

TEMPO QUE NOVAS TECNOLOGIAS LEVARAM PARA ATINGIR 50 MILHÔES DE

USUÁRIOS NO MUNDO

• Rádio - 38 anos
• Computador - 16 anos
• Televisão - 13 anos
• TV a cabo - 10 anos
• Internet - 4 anos
9
 Em 2003 já éramos mais de 600 milhões de usuários. No Brasil 14% da população acessa
a rede. Projetos de inclusão social estão mudando gradativamente este cenário.

O que você pode fazer na internet:

- Navegar na web
- Visitar empresas, governos, escolas, instituições, etc
- Ler notícias
- Fazer pesquisa e ler
- Obter Softwares e fazer compras
- Trocar mensagens, participar de debates e bater papo
- Jogar, assistir a vídeos, passar o tempo e muitas outras coisas

2. 2 - Tipos de conexão à Internet

Acesso discado - É o acesso à Internet via linha telefônica

Acesso dedicado - É um serviço de acesso à Internet com linha e modem privativos, dirigido
principalmente ao usuário corporativo.
Conexão ADSL - Trata-se de uma tecnologia que permite a transferência digital de dados em alta
velocidade por meio de linhas telefônicas comuns.
Conexão ISDN - Uma conexão ISDN é uma conexão à Internet, estabelecida com uma placa de
modem ISDN, através de uma linha telefônica especial instalada pela companhia telefônica.
Conexão Wireless – O sistema de acesso Wireless, Internet sem fio - via rádio.

2. 3 – Navegadores

São programas responsáveis por interpretar o conteúdo de um web site, disponibilizando

assim a interface com a qual o usuário final irá interagir. O navegador está para o web design
assim como o papel está para o jornal. A grande variedade de navegadores e discrepância entre os
recursos fez seus próprios criadores caminhar em direção a um padrão comum. Atualmente é
indispensável criar sites seguindo os padrões da W3C.
10
 No desenvolvimento do site, ele deverá ser testado em mais de um navegador (Internet
Explorer, Firefox e outros), pois o layout do site pode apresentar diferenças em determinados
navegadores, e o usuário que navega não entenderá o que está acontecendo.

2.4 - Browsers

Browser é um programa que permite visualizar e utilizar uma base de dados, distribuída
ou não por vários computadores permite navegar no World-Wide-Web.

2. 5 - Usabilidade

A usabilidade mede a eficácia, eficiência e satisfação com que um usuário pode realizar
um conjunto específico de tarefas em um ambiente particular e um dos seus objetivos, entre
outros, é avaliar se as tarefas simples e básicas são simples de serem desempenhadas pelos
usuários.

Um sistema é considerado:

 Eficaz - quando permite que os usuários atinjam seus objetivos.

 Eficiente - quando os recursos utilizados na realização de uma tarefa (tempo, esforço
mental e dinheiro) são empregados corretamente.
 Satisfatório - quando o usuário considera a interação com sistema agradável e não algo
penoso.

A boa usabilidade tem importância ímpar no sucesso e qualidade de um sistema.

Segundo Frederick Van Amstel, professor da Graduação em Web Design do Centro

Tecnológico Opet (PR) e da Graduação em Design da Unisul (SC), “Usabilidade é sinônimo de
facilidade de uso. Se um produto é fácil de usar, o usuário tem maior produtividade: aprende mais
rápido a usar, memoriza as operações e comete menos erros”.

11
2. 6 – Acessibilidade

Acessibilidade significa não apenas permitir que pessoas com deficiências participem de
atividades que incluem o uso de produtos, serviços e informação, mas a inclusão e extensão do
uso destes por todas as parcelas presentes em uma determinada população, com mínimas
restrições possíveis.

Em informática, programas que provêm acessibilidade são ferramentas ou conjuntos de

ferramentas que permitem que portadores de deficiências (as mais variadas) utilizem os recursos
que o computador oferece.

Essas ferramentas podem constituir leitores de tela para deficientes visuais, teclados
virtuais para portadores de deficiência motora ou com dificuldades de coordenação motora, e
sintetizadores de voz para pessoas com problemas de fala.

2.7 – Ciberespaço

Por ciberespaço designa-se habitualmente o conjunto das redes de computadores

interligadas e de toda a atividade aí existente. É uma espécie de planeta virtual, onde as pessoas
(sociedade da informação) se relacionam virtualmente, por meios eletrônicos. Termo inventado
por William Gibson no seu romance Neuromancer.

2.8 - Cibercultura

A cibercultura é um termo utilizado na definição dos agenciamentos sociais das

comunidades no espaço eletrônico virtual. Estas comunidades estão ampliando e popularizando a
utilização da Internet e outras tecnologias de comunicação, possibilitando assim maior
aproximação entre as pessoas de todo o mundo. Este termo se relaciona diretamente com a
dinâmica Política, Antropo-social, Econômica e Filosófica dos indivíduos conectados em rede,
bem como a tentativa de englobar os desdobramentos que este comportamento requisita.

12
2. 9 - Tipos de imagens mais usados na web

Gif – Graphic Interchange Format. Formato para arquivos de imagens, muito utilizado na Internet
para exibir elementos gráficos de cores indexadas na World Wide Web, é um formato
compactado, desenvolvido para minimizar o tempo de transferência de arquivos.

Jpeg - (Joint Photographic Experts Group) Um formato de arquivo de elementos gráficos usado
para exibir elementos gráficos coloridos de alta resolução na WWW. Os elementos gráficos Jpeg
aplicam um esquema de compactação especificado pelo usuário, que pode reduzir significamente
arquivos de tamanho grande, geralmente associado a elementos gráficos coloridos de fotos
realísticas.

2. 10 - FTP

File transfer Protocol. Designa o principal protocolo de transferência de arquivos usado na

Internet, ou então um programa que usa esse protocolo.

2. 11 – Tipografia

A tipografia é a arte e o processo de criação na composição um texto, fisicamente ou

digitalmente. Na grande maioria dos casos, uma composição tipográfica deve ser especialmente
legível e visualmente envolvente, sem desconsiderar o contexto em que é lido e os objetivos da
sua publicação.

No uso da tipografia o interesse visual é realizado através da escolha adequada de fontes

tipográficas, composição (ou layout) de texto, a sensibilidade para o tom do texto e a relação
entre texto e os elementos gráficos na página.
Todos esses fatores são combinados para que o layout final tenha uma “atmosfera” ou
“ressonância” apropriada ao conteúdo abordado.

13
2. 12 - Descrição das Tecnologias

Obs: Essas são as tecnologias aplicadas ao projeto Site Cazuza – Faço parte desse
show.

Dreamweaver - é uma ferramenta de desenvolvimento para a web criada pela Macromedia

(agora Adobe Systems), que está atualmente na versão 8.

Flash - é um programa gráfico vetorial utilizado para se criar animações interativas. Os arquivos
executáveis gerados pelo Flash, chamados de "SWF" (Shockwave Flash File), podem ser
visualizados em uma página web usando um navegador web.

Fireworks - é um editor de imagens desenvolvido pela Macromedia. Suas ferramentas permitem

também criar imagens para a web.

Photoshop - é um editor de imagens raster (com algumas capacidades de edição vetorial).

CSS (Cascading Style Sheets) - são estilos para páginas web e envolvem um conceito inovador:
possibilitam a mudança da aparência simultânea de todas as páginas relacionadas com o mesmo
estilo.

ASP - (de Active Server Pages) - é uma estrutura de programação em Script que se utiliza de
VBScript, JScript, PerlScript ou Python processadas pelo lado servidor para geração de conteúdo
dinâmico na Web. Através dessa tecnologia também é possível executar consultas a Banco de
Dados, através da biblioteca de componentes aclives.

JavaScript - é uma linguagem de programação, para atender, principalmente, as seguintes

necessidades:

 validação de formulários no lado cliente (programa navegador);

 interação com a página. Assim, foi feita como uma linguagem de script. Javascript tem
sintaxe semelhante à do Java, mas é totalmente diferente no conceito e no uso.

14
Banco de dados - Um arquivo contendo registros de informações que são organizados e
apresentados para servir a uma finalidade específica, como facilitar a pesquisa, classificação e
recombinação dos dados. Os bancos de dados podem ser publicados na World Wide Web para
permitir que os visitantes do site consultem informações nos registros ou adicionem novas
informações ao banco de dados.

Java - é uma linguagem de programação orientada a objeto desenvolvida na década de 90 pelo

programador James Gosling, na empresa Sun Microsystems. Diferentemente das linguagens
convencionais, que são compiladas para código nativo, a linguagem Java é compilada para um
"bytecode" que é executado por uma máquina virtual.

2. 13 - Cores e seus significados psicológicos

As cores influenciam psicologicamente os seres humanos de várias maneiras, e são mais

ligadas à emoção do que propriamente à forma. Se várias figuras coloridas forem mostradas a um
grupo de pessoas, essas pessoas se lembrarão mais facilmente das cores do que das formas dessas
figuras.

Essas e outras percepções entre forma e cor foram estudadas por inúmeros profissionais e
artistas no início do século XX, entre os artistas destacam-se dois: Wassily Kandinsky e Johannes
Item que propuseram e documentaram estudos importantes para a compreensão da forma e da cor
como modos de aprendizagem e entendimento. Na área da psicologia, a Gestalt se preocupou em
entender a natureza da percepção visual e cognitiva do ser humano.

15
 Quando escolhemos uma cor para elaborarmos nossos trabalhos, sejam trabalhos de
design, ilustração, anúncios ou qualquer outro tipo de trabalho visual, devemos ter em mente que
estamos lidando com um elemento de estímulo imediato, e que essa cor escolhida provocará
diversas reações em seus observadores, reações essas que podem ser positivas ou negativas,
dependendo da sua utilização.

Empresas como a Coca-Cola, que utiliza o vermelho na maior parte de seus produtos,
remetendo ao calor, mas este calor sendo "quebrado" pelo frescor que representam as bolhas
d'àgua desenhadas nas latas. Também o caso do Mc'Donalds, com as cores amarelas e vermelhas.
O amarelo forte é uma cor intensa, expansiva e por isso é usado para gerar ansiedade, o
vermelho, uma cor intensa e visualmente agressiva faz com que junto ao amarelo, criem um
contraste muito estimulante e uma das formas de o ser humano se “acalmar” frente à esse
estímulo é buscar um prazer para se satisfazer, como o ato de se alimentar é uma das bases
primitivas de sobrevivência do ser humano é natural que ele consuma, até de modo exagerado,
aquilo que está ao seu alcance. .

16
3 – Projeto – Site Cazuza – Faço parte desse show

3. 1 - Objetivo

O objetivo do site é se tornar o ponto de referência para os fãs do cantor.

Com uma navegação mais fácil, solucionando os problemas de navegação, tornando o site
mais dinâmico e interativo para o público alvo, no caso os fãs.
Usando como frase de impacto “Cazuza – Faço parte desse Show”.

3. 2 - Conteúdo e Estrutura Visual

O conteúdo do site é bastante completo, trazendo a vida inteira do cantor, desde sua
infância, descoberta da doença ao seu falecimento.
Contanto sua carreira no Barão Vermelho, assim como sua carreira solo.
Traz textos escritos pelo cantor, fotos e vídeos. Informações sobre o Projeto Cazuza, e
novidades relacionadas ao cantor.
Traz também um espaço voltado para os fãs, onde os próprios poderão participar do site,
enviando histórias, fotos, depoimentos, podendo também baixar papéis de parede, enviar
postcards e fazer donwloads de wallpapers para celular e ringtones.
A estrutura visual é simples e objetiva, fazendo assim com que o visitante saiba onde está,
e tenha facilidade de encontrar aquilo que precisa.

3. 3 - Análise dos concorrentes

Procurei analisar o site do próprio cantor e encontrar os pontos positivos e negativos.

www.cazuza.com.br

17
Pontos positivos:

- O site possui bastante conteúdo de texto e imagem. Possui sistema de busca, e é de fácil
navegação.

- Na home page, o top pode ser visualizado por qualquer computador, pois nele existem a versão
em Flash, e a versão em HTML, e os vídeos tem em alta e baixa resolução, podendo assim o
usuário escolher aquele que se enquadra melhor com a sua conexão.

Pontos Negativos:

- O layout do site Cazuza é muito comprido, e dificulta logo de princípio a navegação, já que
para visualizar os links é preciso utilizar a barra de rolagem. (ver figura 1, página 18)

- O layout foge dos padrões de estética, usa as cores, amarelo e azul, duas cores que
esteticamente não combinam muito para a web, mas é justificado pelo tema do site ser a música
“Brasil” que foi tema de uma famosa novela da Rede Globo de Televisão.

- Mas de qualquer forma, o Cazuza e suas letras são muito além que apenas a música tema da
novela, ou seja, o layout está muito ultrapassado.

- No site existem muitos erros de Português e muitos links quebrados.

- O fundo das janelas pop ups são bem menores que o tamanho das janelas, sobrando assim um
espaço muito grande e sem nem uma utilidade no final da janela, e nos formulários, os campos
estão desalinhados, tornando assim o site desarmônico.

18
Figura 1

19
3. 4 – Tipografia do site

No site a fonte escolhida foi Verdana, caixa baixa, mesclando os tamanhos 12 e 11 (Size 1
e 2). A fonte Verdana foi escolhida por ser bastante legível e sem serifa e por estar dentro dos
padrões da Web.

Nos títulos a fonte escolhida foi manuscrita Staccato 222 BT. Essa fonte foi escolhida
porque Cazuza adorava rabiscar em toda parte, seus versos e observações cáusticas ou líricas. Ele
procurava deixar registrado tudo aquilo que via, sentia, amava e odiava. São rascunhos livres e
frescos de um ser humano contraditório e coerente, sensível e sofredor, terno e provocador...
Rascunhos de uma alma viva e luminosa. Rápido como seu tempo que era vivido intensamente.

3. 5 - O uso das cores

Como o tema do site é Cazuza – Faço parte desse Show, quero utilizar cores e formas que
lembrem um show, portanto no layout utilizarei o Lilás contrastando com tons claros, com
luminosidade próxima e outros tons mais escuros. O lilás por ser uma cor profunda, chama o
infinito, ou seja, passa a idéia de que o Cazuza é eterno para os fãs, de que o show continua.
Utilizarei também o verde amarelado (mais quente) que sugere uma força ativa, jovem e
dinâmica.
Pretendo com a utilização dessas cores passar aos visitantes energia, força, juventude,
quando acessarem o site.

Estou usando as estruturas de contrastes propostas por Johannes Itten quando, no início do
século XX, ele foi convidado por Walter Gropius a assumir uma cadeira na Escola de Artes e
Ofícios denominada BAUHAUS. Essa escola foi fundamental na sistematização dos cursos de
arte no mundo todo e mantém até hoje influência profunda no modo de ensino. Nos seus estudos,
Itten determinou um conjunto básico de 7 contrastes e estarei utilizando o que ele chamava de
contraste claro/escuro entre variações de uma mesma cor. O que é muito interessante é que esse

20
estudo de quase 100 anos, se revela atual e pode ser usado com ótimos resultados até em uma
mídia típica da nossa nova era. (ver Figura 2, abaixo)

Figura 2

3. 6 - O layout

O layout é bastante dinâmico, sempre procurando fazer com que o visitante interaja com o
site, tem bastante imagens de fácil entendimento sobre os temas, a animação será única e assim
não será cansativo ao visitante.

3. 7 - Linguagens e tecnologias

Para desenvolver o site utilizarei as seguintes linguagens e tecnologias:

Fireworks para desenvolver o layout das páginas.

Photoshop para o tratamento das fotos e imagens, entre outros.

Dreamweaver para o desenvolvimento das páginas, utilizando também o css, para uma melhor
aparência, o asp para validação de formulários e mural de recados, e o javascript para alguns
detalhes, tais como mensagem na barra de status, e trava nos formulários entre outros.

21
Flash para algumas animações, para que o site não fique completamente estático.

Java para a animação no top, pois além de carregar rápido, não precisa carregar em todas as
páginas.

Banco de dados para o armazenamento dos dados do mural de recados, e para as novidades,
podendo utilizar assim o sistema de busca.

3. 8 - A Navegabilidade

A navegabilidade do site é fácil e simples, os links estão visíveis no menu fixo localizado
á esquerda do site. Os links que estão dentro das páginas, abrem janelas pop up, o que facilita a
navegação, já que o visitante não precisa mudar de página para ler o complemento, ou
informação extra.

3. 9 - Mapa do Site

Home:

1 – Cazuza

1. 1 – Vida
1. 2 – Barão Vermelho
1. 3 – Carreira Solo
1. 4 – O Adeus

2 – Novidades

3 – Discografia

22
4 – Galeria de Fotos

5 – Faça parte desse show

5. 1 – Wallpapers
5. 2 – PostCards
5. 3 – Fatos e Fotos
5. 4 – Wallpapers para celular
5. 5 - RingTones

6 – Livros

7 – Filmes

8 - Links

9 – Cazuza por Artistas

10 – Projeto Cazuza

11 – Mural de Recados

12 – Contato

3. 10 – Links
Neste item temos a descrição geral dos tópicos do site. No item Manual do site, o
detalhamento dos tópicos será descrito item a item.

1 – Cazuza

23
 Espaço reservado para o conteúdo relativo ao cantor. Contém 4 sublinks, Vida, Barão
Vermelho, Carreira solo e O Adeus.

1 . 1 – Vida
Trajetória do cantor de sua infância até a fase adulta, onde descobriu o que realmente
queria ser.

1. 2 – Barão Vermelho
Trajetória do cantor na Banda Barão Vermelho

1. 3 – Carreira Solo
Trajetória do cantor em sua carreira solo

1. 4 – O Adeus
Descobrimento do vírus HIV, até seus últimos dias.

2 – Novidades
Área reservada para novidades e acontecimentos referentes ao cantor. Com sistema de
busca, para facilitar a navegação.

3 – Discografia
Discografia do cantor, com descrição dos álbuns, letras das músicas, ficha técnica no
álbum e áudio.

4 – Galeria de Fotos
Galeria de fotos do cantor, com fotos pessoais, fotos de família, shows entre outras

5 – Faço parte desse Show

Espaço reservado aos fãs, com wallpapers, postcards, entre outras coisas.

5.1 – Wallpapers

24
 Wallpapers para download

5.2 – PostCards
PostCards para serem enviados via e-mail.

5. 3 – Fatos e Fotos
Área reservada especialmente para os fãs, local onde poderão contar fatos, mandar suas
fotos, contar alguma história relacionada ao cantor, compartilhar com outras pessoas fotos
e fatos marcantes em suas vidas.

5. 4 – Wallpapers para celular

Wallpapers para celular disponíveis para download.

5. 5 – Ringtones
Ringtones disponíveis para download.

6 – Livros
Livros sobre / relacionados ao cantor.

7 – Filmes
Filmes sobre / relacionados ao cantor.

8 – Links
Links de sites, blogs, fotologs e comunidades, referentes ao cantor.

9 – Cazuza por artistas

Depoimentos de famosos sobre o Cazuza

10 – Projeto Cazuza
Espaço para divulgação e apresentação do Projeto Cazuza.

25
11 – Mural de Recados
Mural de recados para quem quiser deixar seu recado sobre o cantor, site e outras coisas
referentes

12 – Contato
Formulário de contato, para enviar dúvidas, sugestões, reclamações e etc.

26
3. 11 – Orçamento

Proposta e orçamento para desenvolvimento de Web Site

A presente proposta tem como objetivo apresentar as minhas qualificações profissionais e

definir alguns elementos do Projeto de desenvolvimento de Web Site.

Apresentação

Tatiana Ferreira de Andrade, profissional de Web Design, atuante na área.

Desenvolvo projetos na área de comunicação visual, dentre eles, projetos de criação de Web
Sites.
Com experiência de 2 anos neste mercado, desenvolvo projetos, todos fundamentados por
sólidas estratégias de design, marketing e internet.
Procuro investir na qualidade e acredito que renovar não se limita só ao estético, mas a
uma interação efetiva com o compartilhar. Com isso, ofereço aos clientes cada vez mais e
melhores informações, estratégias, conceitos e tecnologia de ponta, a fim de garantir bons
resultados com seus projetos.

Apresentação da proposta

Esta proposta foi estudada e fundamentada para sugerir o desenvolvimento de um novo

site, mudando toda a interface, layout e estrutura existente (mantendo as seções existentes).
Também sugiro implementar novas seções, com o objetivo de fidelizar o cliente.

Apresentação do Projeto

27
 A navegação será desenvolvida com o objetivo de simplificar ao máximo o caminho ao
usuário, assim ele poderá navegar de um ponto a outro do site de forma rápida, sem passar por
páginas desnecessárias.

Os elementos a serem criados, serão tratados de forma a diminuir ao máximo o “peso” em

termos de bytes, ou seja, proporcionar uma rápida abertura do site, agilizando o acesso do
usuário.

- Layout
O layout será dinâmico, procurando fazer com que o visitante interaja com o site.
Na sessão da Sociedade Viva Cazuza, os tons do layout, assim como parte de sua estrutura, será
diferente, já que a seção aborda um assunto específico relacionado á saúde. Nessa seção o layout,
será, claro, simples e direto.

- Tecnologias
O site poderá ser desenvolvido em linguagem html, asp, JavaScript, Java e css.
Os aplicativos usados para o desenvolvimento são, Fireworks, Dreaweaver e Flash.

- Estrutura
Home:

1 – Cazuza

1. 1 – Vida
1. 2 – Barão Vermelho
1. 3 – Carreira Solo
1. 4 – O Adeus

2 – Novidades

3 – Discografia

28
4 – Galeria de Fotos

5 – Faça parte desse show

5. 1 – Wallpapers
5. 2 – PostCards
5. 3 – Fatos e Fotos
5. 4 – Wallpapers para celular
5. 5 - RingTones

6 – Livros

7 – Filmes

8 - Links

9 – Cazuza por Artistas

10 – Projeto Cazuza

11 – Mural de Recados

12 – Contato

Metodologia de trabalho, Prazos e Investimentos

- Metodologia de trabalho

29
 Após a aprovação do projeto será desenvolvida a primeira proposta de layout, com prazo
de 4 (três) dias úteis.
Obs: Caso o layout apresentado não seja aprovado serão necessários + 2 (dois) dias úteis
para novo desenvolvimento.

Após a aprovação do layout serão necessários 40 (quarenta) dias úteis para o

desenvolvimento total do projeto.

- Investimentos

Para a realização dos serviços serão cobrados as importâncias abaixo, tendo como
referência o Valor/Hora (R$ 30,00):

Valor/Hora R$ 30,00 Valor hora multiplicado pela quantidade de horas de

trabalho.

Horas Mensuradas 320 horas Quantidade de horas necessárias para os serviços

Valor Total = R$ 9.600,00 Valor total do desenvolvimento

- Forma de Pagamento
Poderá ser realizado em até 3 parcelas mensais, sendo:

40% no 5º dia após a aprovação da proposta; (assinatura do contrato)

30% trinta dias após o pagamento da primeira parcela;

30% trinta dias após o pagamento da segunda parcela.

O pagamento também poderá ser à vista, com 5% de desconto, sendo realizado no 5º dia
após a aprovação da proposta e assinatura do contrato.

30
 A Nota fiscal será emitida no valor total do projeto mediante a primeira parcela quitada
(condição em 3 vezes) ou mediante a pagamento total do projeto (condição a vista).

Considerações Finais

Esta proposta é válida até 30 dias após a entrega.

Tatiana Ferreira de Andrade

Tel.: 55 11 6457-4322
Cel.: 55 11 9827-0076
E-mail: tatyletsgo@gmail.com

Guarulhos, 11 de dezembro de 2006.

31
4 – Conclusão

32
5 – Fluxograma

33
6 – Manual do Site

Index

34
1 – Top fixo com animação em Java
2 – Menu fixo á esquerda
3 – Newsletter
4 – Destaque para as principais sessões do site
5 – Rodapé fixo

35
 Link Cazuza

1 – Resumo dos sublinks da sessão

36
Sublink Vida da sessão Cazuza

37
1 – Texto sobre o tema, com fotos
2 – Link para as outras partes da sessão
3 – Link para a próxima sessão

38
Novidades

39
1 – Busca por notícias
2 – Título da notícia, data e fonte, com link para a notícia
3 – Total de notícias, e link para próxima página de notícias

40
Discografia

41
1 – Relação de álbuns do cantor, com link para a página de detalhes do álbum
2 – Relação das músicas do álbum, com link para janela pop up com a letra e o áudio da música

42
 Galeria de Fotos

1 – Miniaturas das fotos

2 – Total de páginas das miniaturas, e link para a próxima página
3 – Foto ampliada com legenda

43
Faça parte

44
1 – Wallpapers para download nas duas resoluções mais usadas, 800x600 e 1024x768
2 – Postcards para serem enviados via e-mail
3 – Fatos e fotos, postados pelos usuários do site, o sistema não é automático, cada post e foto
passa por uma análise antes da publicação
4 – Wallpapers para celular, proposta de parceria com as operadoras de celulares
5 – Ringtones para celular, proposta de parceria com as operadoras de celulares

45
 Wallpapers para celular

1 – Operadoras disponíveis – Após escolher a operadora, a marca e o modelo do aparelho, o

usuário digita o seu número de telefone, e um torpedo SMS é enviado para seu celular para a
confirmação do Wallpaper

46
 Livros

1 – Texto de autoria do cantor

2 – Miniatura dos livros com link para o detalhamento de cada um

47
Livros

48
1 – Descrição do livro, com a foto ampliada
2 – Link para a compra do livro, parceria com site de vendas
3 – Miniaturas de outros livros, com link para o detalhamento

49
 Filmes

1 – Texto de autoria do cantor

2 – Miniatura dos filmes com link para o detalhamento de cada um

50
 Links

1 – Links referentes ao cantor

51
 Cazuza por artistas

1 – Miniatura da foto dos artistas com link para o depoimento sobre o Cazuza
2 – Depoimento do artista sobre o Cazuza

52
Projeto Cazuza

53
54
1 – Descrição do projeto com fotos
2 – Relação dos produtos e preços
3 – Dados da conta para depósito

55
Mural de Recados

56
1 – Cinco últimos recados postados
2 – Link para postar novo recado e opção de Próximo

57
 Contato

1 – Formulário para contato com o administrador do site, para críticas, sugestões e dúvidas

58
6 - Bibliografia

- Referências sobre a História da Internet, retiradas do site < www.abranet.org.br >

http://www.abranet.org.br/historiadainternet/ocomeco.htm

- Referências sobre web design, retiradas do site < www.webmundi.com >

http://www.webmundi.com/internet/int_af.htm

- Referências sobre web design, retiradas do site < www.wikipedia.org >

http://pt.wikipedia.org/wiki/Webdesign

- Referências sobre tipografia, retiradas do site < www.inf.ufg.br >

http://www.inf.ufg.br/~tiberio/interacao.htm

- Referências sobre estudo das cores, retiradas do site < www.crieseuwebsite.com >
http://www.crieseuwebsite.com/artigos/artigo.php?categoria=design&id=5
Livros:
Psicodinâmica das cores – Modesto Tarina
Da cor a cor inexistente – Israel pedrosa
Ponto e linha sobre o plano – Wassily Kandinsky

- Referências sobre usabilidade, retiradas do site < www.usabilidoido.com.br >

http://www.usabilidoido.com.br/cat_apresentacao.html

- Referências para conteúdo, retiradas dos sites:

< www.cazuza.com.br > http://www.cazuza.com.br
< www.vivacazuza.org.br > http://www.vivacazuza.org.br
< www.mtv.com.br > http://mtv.terra.com.br/apresenta/cazuza/
< www.cazuzanet.kit.net > http://www.cazuzanet.kit.net/
< www.flogao.com.br > http://www.flogao.com.br/cazuza

59