Desenvolvimento Web Parte I
-
Upload
igorpimentel -
Category
Documents
-
view
1.443 -
download
1
Transcript of Desenvolvimento Web Parte I
![Page 1: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/1.jpg)
desenvolvimento webdesenvolvimento webdesenvolvimento webbeta
Z a r a t h o n M a i aI g o r P i m e n t e lI W T I S C - 0 3 a 0 5 / 0 9
![Page 2: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/2.jpg)
About us!Sobre nós!
![Page 3: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/3.jpg)
Processo para desenvolvimento de site
Dicas de Criação
Desenvolvendo nosso site
beta
beta
beta
![Page 4: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/4.jpg)
Processo para desenvolvimento de site
Dicas de Criação
Desenvolvendo nosso site
beta
beta
beta
![Page 5: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/5.jpg)
Processo para desenvolvimento de site
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
![Page 6: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/6.jpg)
Processo para desenvolvimento de site
A) Sites de experiência
![Page 7: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/7.jpg)
Processo para desenvolvimento de site
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
![Page 8: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/8.jpg)
Processo para desenvolvimento de site
B) Portais de conteúdo
![Page 9: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/9.jpg)
Processo para desenvolvimento de site
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
![Page 10: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/10.jpg)
Processo para desenvolvimento de site
C) Presença de empresa na web
![Page 11: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/11.jpg)
Processo para desenvolvimento de site
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
![Page 12: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/12.jpg)
Processo para desenvolvimento de site
D) Aplicações
![Page 13: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/13.jpg)
Processo para desenvolvimento de site
A.
B.
C.
D.
Comercial>gerente de serviço>planejamento criativo + diretor de arte + redação>produção>codificação>programação = entrega
Produto>SEO+acessibilidade>design de interface>design gráfico>testes de usabilidade>codificação>programação>homologação = entrega
Comercial>analista de interface>gerente de projeto>design de interface>design gráfico>redação>codificação>programação = entrega
Produto>design de interface>design gráfico>testes de usabilidade>analista de sistemas>programação = entrega
Sites de experiências:
Portais de conteúdo:
Presença de empresa na web:
Aplicações:
Fluxo Criaçãode
![Page 14: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/14.jpg)
Processo para desenvolvimento de site
Etapas de aprovação do projeto1º - 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.
![Page 15: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/15.jpg)
Processo para desenvolvimento de site
Etapas de aprovação do projeto2º - 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.
![Page 16: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/16.jpg)
Processo para desenvolvimento de site
Etapas de aprovação do projeto3º - Layout
É elaborado pelo design gráfico.
![Page 17: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/17.jpg)
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.
![Page 18: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/18.jpg)
Processo para desenvolvimento de site
Desenvolvendo nosso site
Dicas de Criação
beta
beta
beta
![Page 19: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/19.jpg)
Dicas de criação
A.B.
C.
D.E.F.G.H.
I.J.K.
Acompanhar o desenvolivmento da web.Utilizar os padrões sempre que não houver um motivo
muito forte para fugir deles.Clean é a palavra do momento, ver o G1.com e o
Google.Fazer estudo de cores, refinar os acabamentos.Deixar áreas de respiro na página.Estudar o público e os concorrentes.
Traçar etapas do projeto e deixar que o usuário avalie.Reconhecer que você não sabe tudo, procure
profissionais qualificados nas demais especialidades. Busque referências, sempre. Domine mais de um software. Vá em eventos.
![Page 20: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/20.jpg)
Processo para desenvolvimento de site
Dicas de Criação
Desenvolvendo nosso site
beta
beta
beta
![Page 21: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/21.jpg)
1º - Definição do SiteMap
index
o produto contato
![Page 22: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/22.jpg)
2º - Definindo o Wireframe
TOPO
MENU
CONTEUDO
RODAPE
![Page 23: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/23.jpg)
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.
![Page 24: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/24.jpg)
3º - Montando o layout
*Crie uma nova imagem com 900px de largura por 950px de altura.
![Page 25: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/25.jpg)
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).
![Page 26: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/26.jpg)
3º - Montando o layout
*Abra o arquivo "Madeira_bg.jpg" que se encontra na pasta Material.
![Page 27: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/27.jpg)
3º - Montando o layout
*Copie a imagem "Madeira_bg.jpg" para o nosso layout.
![Page 28: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/28.jpg)
3º - Montando o layout
*Crie um novo layer com o nome de Efeito_Linhas, do mesmo tamanho que o cabeçalho.
![Page 29: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/29.jpg)
3º - Montando o layout
*Utilize o "Balde de Tinta para preencher o layer "Efeito_Linhas" com o padrão "Warning".
![Page 30: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/30.jpg)
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..".
![Page 31: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/31.jpg)
3º - Montando o layout
*Na janela que se abrirá, baixe o "Saturation" para 0.
![Page 32: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/32.jpg)
3º - Montando o layout
*Mude o "Mode" do layer de Normal para Overlay e opacidade para 50.
![Page 33: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/33.jpg)
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.
![Page 34: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/34.jpg)
3º - Montando o layout
*Abra o arquivo "Palitex.psd" que se encontra na pasta Material e copie para o nosso layout.
![Page 35: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/35.jpg)
3º - Montando o layout
*Mude o Mode da camada para Value.
![Page 36: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/36.jpg)
3º - Montando o layout
*Abra o arquivo "Palitex_palito1.psd" que se encontra na pasta Material e copie para o nosso layout.
![Page 37: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/37.jpg)
3º - Montando o layout
*Redimensione a imagem para ajustar ao cabeçalho não passado.
![Page 38: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/38.jpg)
3º - Montando o layout
*Adicione alguns efeitos ao seu gosto.
![Page 39: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/39.jpg)
3º - Montando o layout
Tente deixar o seu layout mais ou menos assim.
![Page 40: Desenvolvimento Web Parte I](https://reader033.fdocumentos.com/reader033/viewer/2022060201/559acb561a28ab34628b46b8/html5/thumbnails/40.jpg)
Fim da 1ª Parte!!!