beta

desenvolvimento web

           Zarathon Maia
           Igor Pimentel
           I WTISC - 03 a 05/09
About us!
        Sobre nós!
beta
       Processo para desenvolvimento de site
beta   Dicas de Criação
beta   Desenvolvendo nosso site
beta
       Processo para desenvolvimento de site
beta   Dicas de Criação
beta   Desenvolvendo nosso site
Processo para desenvolvimento de site

 A) Sites de experiência
    São sites que tem como premissa gerar uma experiência ...
Processo para desenvolvimento de site

 A) Sites de experiência
Processo para desenvolvimento de site

 B) Portais de conteúdo
    Um portal é um site na internet que funciona como centr...
Processo para desenvolvimento de site

 B) Portais de conteúdo
Processo para desenvolvimento de site

 C) Presença de empresa na web
    São os sites institucionais. Toda empresa deve t...
Processo para desenvolvimento de site

 C) Presença de empresa na web
Processo para desenvolvimento de site

 D) Aplicações
    Aplicação Web é o termo utilizado para designar, de forma geral,...
Processo para desenvolvimento de site

 D) Aplicações
Processo para desenvolvimento de site

 Fluxo de Criação
    A. Sites de experiências:
    Comercial>gerente de serviço>pl...
Processo para desenvolvimento de site

 Etapas de aprovação do projeto
          1º - SiteMap
              Elaborado pelo...
Processo para desenvolvimento de site

 Etapas de aprovação do projeto
          2º - Wireframe
              É elaborado ...
Processo para desenvolvimento de site

 Etapas de aprovação do projeto
          3º - Layout
              É elaborado pel...
Processo para desenvolvimento de site

 Etapas de aprovação do projeto
          4º - Codificação e produção
             ...
beta
       Processo para desenvolvimento de site
beta   Dicas de Criação
beta   Desenvolvendo nosso site
Dicas de criação

 A. Acompanhar o desenvolivmento da web.
 B. Utilizar os padrões sempre que não houver um motivo
 muito ...
beta
       Processo para desenvolvimento de site
beta   Dicas de Criação
beta   Desenvolvendo nosso site
1º - Definição do SiteMap




                            index




         o produto                  contato
2º - Definindo o Wireframe


                             TOPO


                             MENU




                   ...
3º - Montando o layout

*Vamos configurar o nosso Gimp para ajudar no posicionamento
dos nossos objetos. Clique no menu Vi...
3º - Montando o layout

*Crie uma nova imagem com 900px de largura por 950px de
altura.
3º - Montando o layout

*Agora vamos criar um novo Layer de 900px de largura por
300px de altura, chame-o de "Cabeçalho", ...
3º - Montando o layout

*Abra o arquivo "Madeira_bg.jpg" que se encontra na pasta
Material.
3º - Montando o layout

*Copie a imagem "Madeira_bg.jpg" para o nosso layout.
3º - Montando o layout

*Crie um novo layer com o nome de Efeito_Linhas, do mesmo
tamanho que o cabeçalho.
3º - Montando o layout

*Utilize o "Balde de Tinta para preencher o layer "Efeito_Linhas"
com o padrão "Warning".
3º - Montando o layout

*Clique com o botão direito em cima do nosso Layer
"Efeito_Linhas" e escolha a opção "Tools > Colo...
3º - Montando o layout

*Na janela que se abrirá, baixe o "Saturation" para 0.
3º - Montando o layout

*Mude o "Mode" do layer de Normal para Overlay e opacidade
para 50.
3º - Montando o layout

*Crie um novo Layer de 900px de largura por 1500px de altura,
chame-o de "Efeito_Acqua_Cabeçalho",...
3º - Montando o layout

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

*Mude o Mode da camada para Value.
3º - Montando o layout

*Abra o arquivo "Palitex_palito1.psd" que se encontra na pasta
Material e copie para o nosso layou...
3º - Montando o layout

*Redimensione a imagem para ajustar ao cabeçalho não
passado.
3º - Montando o layout

*Adicione alguns efeitos ao seu gosto.
3º - Montando o layout

Tente deixar o seu layout mais ou menos assim.
Fim da 1ª Parte!!!
Próximos SlideShares
Carregando em…5
×

Desenvolvimento Web Parte I

1.827 visualizações

Publicada em

0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.827
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
50
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Desenvolvimento Web Parte I

  1. 1. beta desenvolvimento web Zarathon Maia Igor Pimentel I WTISC - 03 a 05/09
  2. 2. About us! Sobre nós!
  3. 3. beta Processo para desenvolvimento de site beta Dicas de Criação beta Desenvolvendo nosso site
  4. 4. beta Processo para desenvolvimento de site beta Dicas de Criação beta Desenvolvendo nosso site
  5. 5. Processo para desenvolvimento de 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.
  6. 6. Processo para desenvolvimento de site A) Sites de experiência
  7. 7. Processo para desenvolvimento de site 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.
  8. 8. Processo para desenvolvimento de site B) Portais de conteúdo
  9. 9. Processo para desenvolvimento de site 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.
  10. 10. Processo para desenvolvimento de site C) Presença de empresa na web
  11. 11. Processo para desenvolvimento de site 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.
  12. 12. Processo para desenvolvimento de site D) Aplicações
  13. 13. Processo para desenvolvimento de site 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
  14. 14. Processo para desenvolvimento de site 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.
  15. 15. Processo para desenvolvimento de site Etapas de aprovação do projeto 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.
  16. 16. Processo para desenvolvimento de site Etapas de aprovação do projeto 3º - Layout É elaborado pelo design gráfico.
  17. 17. Processo para desenvolvimento de site Etapas de aprovação do projeto 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.
  18. 18. beta Processo para desenvolvimento de site beta Dicas de Criação beta Desenvolvendo nosso site
  19. 19. 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.
  20. 20. beta Processo para desenvolvimento de site beta Dicas de Criação beta Desenvolvendo nosso site
  21. 21. 1º - Definição do SiteMap index o produto contato
  22. 22. 2º - Definindo o Wireframe TOPO MENU CONTEUDO RODAPE
  23. 23. 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.
  24. 24. 3º - Montando o layout *Crie uma nova imagem com 900px de largura por 950px de altura.
  25. 25. 3º - Montando o layout *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).
  26. 26. 3º - Montando o layout *Abra o arquivo "Madeira_bg.jpg" que se encontra na pasta Material.
  27. 27. 3º - Montando o layout *Copie a imagem "Madeira_bg.jpg" para o nosso layout.
  28. 28. 3º - Montando o layout *Crie um novo layer com o nome de Efeito_Linhas, do mesmo tamanho que o cabeçalho.
  29. 29. 3º - Montando o layout *Utilize o "Balde de Tinta para preencher o layer "Efeito_Linhas" com o padrão "Warning".
  30. 30. 3º - Montando o layout *Clique com o botão direito em cima do nosso Layer "Efeito_Linhas" e escolha a opção "Tools > Color Tools > Colorize..".
  31. 31. 3º - Montando o layout *Na janela que se abrirá, baixe o "Saturation" para 0.
  32. 32. 3º - Montando o layout *Mude o "Mode" do layer de Normal para Overlay e opacidade para 50.
  33. 33. 3º - Montando o layout *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.
  34. 34. 3º - Montando o layout *Abra o arquivo "Palitex.psd" que se encontra na pasta Material e copie para o nosso layout.
  35. 35. 3º - Montando o layout *Mude o Mode da camada para Value.
  36. 36. 3º - Montando o layout *Abra o arquivo "Palitex_palito1.psd" que se encontra na pasta Material e copie para o nosso layout.
  37. 37. 3º - Montando o layout *Redimensione a imagem para ajustar ao cabeçalho não passado.
  38. 38. 3º - Montando o layout *Adicione alguns efeitos ao seu gosto.
  39. 39. 3º - Montando o layout Tente deixar o seu layout mais ou menos assim.
  40. 40. Fim da 1ª Parte!!!

×