Desenvolvimento Web Parte I

beta

desenvolvimento web

Zarathon Maia
Igor Pimentel
I WTISC - 03 a 05/09

beta
Processo para desenvolvimento de site
beta Dicas de Criação
beta Desenvolvendo nosso site


A) Sites de experiência
São sites que tem como premissa gerar uma experiência forte e única ao usuário.
Esses sites são criativos, dinâmicos e interativos. Geralmente são construídos com
ferramentas de animação e interação.

- O que não interessa
- Retorno do usuário ao site
- Ferramenta de buscas
- Otimização e peso das páginas (tempo de carregamento)
- Tempo de veiculação (são sites temporais, como campanhas publicitárias)

A experiência tem que ser plena e a divulgação ocorre normalmente de forma viral.


A) Sites de experiência


B) Portais de conteúdo
Um portal é um site na internet que funciona como centro aglomerador e distribuidor
de conteúdo para uma série de outros sites e subsites dentro, e também fora, do
domínio ou subdomínio da empresa gestora do portal. (Wikipédia)

- O que é premissa nesses projetos:
- Usabilidade, acessibilidade, perfomance da máquina, entre outros.

- O que não é bem vindo:
- Animações, vídeos e imagens de layout.


B) Portais de conteúdo


C) Presença de empresa na web
São os sites institucionais. Toda empresa deve ter sua presença no meio virtual assim
como no físico. Esses sites tem fins marketeiros e a criação é secundária.

- O que interessa:
- Posicionamento nas ferramentas de buscas
- Retorno do usuário
- Usabilidade, facilidade de encontrar a informação
- Interface amigável
- Lembrança da marca
- Transmitir os princípios e valores da empresa

Há casos que empresas trabalham sua imagem como os sites de experiência. À cada
campanha o site é remodelado.


C) Presença de empresa na web


D) Aplicações
Aplicação Web é o termo utilizado para designar, de forma geral, sistemas de
informática projetados para utilização através de um navegador, na internet ou em
redes privadas ( Intranet ). Trata-se de um conjunto de programas que é executado em
um servidor de HTTP (Web Host). O desenvolvimento da tecnologia web está
relacionado, entre outros fatores, à necessidade de simplificar a atualização e
manutenção mantendo o código-fonte em um mesmo local, de onde ele é acessado
pelos diferentes usuários.

Podemos definir uma aplicação Web como uma aplicação de software que utiliza a
Web, através de um browser como ambiente de execução.


D) Aplicações


Fluxo de Criação
A. Sites de experiências:
Comercial>gerente de serviço>planejamento criativo + diretor de
arte + redação>produção>codificação>programação = entrega

B. Portais de conteúdo:
Produto>SEO+acessibilidade>design de interface>design
gráfico>testes de
usabilidade>codificação>programação>homologação = entrega

C. Presença de empresa na web:
Comercial>analista de interface>gerente de projeto>design de
interface>design gráfico>redação>codificação>programação =
entrega

D. Aplicações:
Produto>design de interface>design gráfico>testes de
usabilidade>analista de sistemas>programação = entrega


Etapas de aprovação do projeto
1º - SiteMap
Elaborado pelo produto, analista de negócio ou gerente de projeto.
Sitemap é uma representação hierárquica da estrutura de um site,
composta por páginas web.


2º - Wireframe
É elaborado pelo designer de interface (arquiteto de informação).
Wireframe seria um esqueleto do site, que deve ser feito antes de
iniciar a montagem do layout com cores e imagens.


3º - Layout
É elaborado pelo design gráfico.


4º - Codificação e produção
É entregue pelo "HMTLer" (webstandards), "flasher", 3d designer e
outros.

5º - Programação
É entregue pelo programador já com todas interações e pronto para
publicação. Esse processo pode ser bem complexo, envolvendo
analista de sistemas e diversas tecnologias.

Dicas de criação

A. Acompanhar o desenvolivmento da web.
B. Utilizar os padrões sempre que não houver um motivo
muito forte para fugir deles.
C. Clean é a palavra do momento, ver o G1.com e o
Google.
D. Fazer estudo de cores, refinar os acabamentos.
E. Deixar áreas de respiro na página.
F. Estudar o público e os concorrentes.
G. Traçar etapas do projeto e deixar que o usuário avalie.
H. Reconhecer que você não sabe tudo, procure
profissionais qualificados nas demais especialidades.
I. Busque referências, sempre.
J. Domine mais de um software.
K. Vá em eventos.

1º - Definição do SiteMap

index

o produto contato

2º - Definindo o Wireframe

TOPO

MENU

CONTEUDO

RODAPE

3º - Montando o layout

*Vamos configurar o nosso Gimp para ajudar no posicionamento
dos nossos objetos. Clique no menu View e escolha a opção Snap
to Grid.


*Crie uma nova imagem com 900px de largura por 950px de
altura.


*Agora vamos criar um novo Layer de 900px de largura por
300px de altura, chame-o de "Cabeçalho", com o preenchimento
em preto (#000000).


*Abra o arquivo "Madeira_bg.jpg" que se encontra na pasta
Material.


*Copie a imagem "Madeira_bg.jpg" para o nosso layout.


*Crie um novo layer com o nome de Efeito_Linhas, do mesmo
tamanho que o cabeçalho.


*Utilize o "Balde de Tinta para preencher o layer "Efeito_Linhas"
com o padrão "Warning".


*Clique com o botão direito em cima do nosso Layer
"Efeito_Linhas" e escolha a opção "Tools > Color Tools >
Colorize..".


*Na janela que se abrirá, baixe o "Saturation" para 0.


*Mude o "Mode" do layer de Normal para Overlay e opacidade
para 50.


*Crie um novo Layer de 900px de largura por 1500px de altura,
chame-o de "Efeito_Acqua_Cabeçalho", com o preenchimento
em branco (#FFFFFF) e mude a opacidade dele pra 30.


*Abra o arquivo "Palitex.psd" que se encontra na pasta Material
e copie para o nosso layout.


*Mude o Mode da camada para Value.


*Abra o arquivo "Palitex_palito1.psd" que se encontra na pasta
Material e copie para o nosso layout.


*Redimensione a imagem para ajustar ao cabeçalho não
passado.


*Adicione alguns efeitos ao seu gosto.


Tente deixar o seu layout mais ou menos assim.

Desenvolvimento Web Parte I

Mais conteúdo relacionado

Mais procurados

Semelhante a Desenvolvimento Web Parte I

Mais de igorpimentel

Desenvolvimento Web Parte I