O documento descreve a história da internet e da web, desde sua criação na década de 1960 como uma rede fechada chamada ARPANET até seu desenvolvimento atual. Também discute como projetar sites web, incluindo mapeamento de sites, hospedagem, tecnologias e análise de tráfego.

1. PROJETO
DE WEB

2. HISTÓRIA

3. www.mauriciomallet.com
PROJETO DE WEB
• A internet nasceu como uma rede fechada, nos anos 60, com o nome de
ARPANET. Criada em laboratórios militares dos Estados Unidos, servia para
trocar informações entre computadores do governo.
• Em 1989 a proposta ganhou a característica que conhecemos hoje com o
surgimento do www (Word Wide Web). Desenvolvido pelo físico inglês Tim
Berners-Lee, nos laboratórios da Organização Européia para a Pesquisa
Nuclear (Cern), o www estabeleceu uma linguagem padrão para a circulação
de dados na rede, permitindo que qualquer computador, de qualquer parte
do planeta, tivesse livre acesso ao mundo virtual.
HISTÓRIA

4. www.mauriciomallet.com
PROJETO DE WEB
ARPANET LOGICAL MAP

5. www.mauriciomallet.com
PROJETO DE WEB
• Os primeiros embriões de rede surgiram em 1988.
• Em 1989, o Ministério da Ciência e Tecnologia lança um projeto pioneiro, a
Rede Nacional de Ensino e Pesquisa (RNP).
• O primeiro backbone - espinha dorsal, infra-estrutura que conecta todos os
pontos de uma rede - brasileiro foi inaugurado em 1991 (comunidade
acadêmica).
• Em 1995, o governo abre o backbone e fornece conectividade a provedores
de acesso comerciais.
A INTERNET NO BRASIL E A RNP

6. www.mauriciomallet.com
PROJETO DE WEB
• A partir de 2005, a comunicação entre os point of presence (PoPs) da rede
começou a ser ampliada com o uso de tecnologia óptica, o que elevou a
capacidade de operação a 11 Gbps.
• O comércio eletrônico no Brasil movimentou 13,60 bilhões de dólares em
2010 (FGV).
• Em 2011 eram 60 milhões de computadores em uso, sendo que 80,7% com
acesso à internet (Ministério da Ciência e Tecnologia).
A INTERNET NO BRASIL E A RNP

7. COMO FUNCIONA

8. www.mauriciomallet.com
PROJETO DE WEB
• WWW é a sigla para World Wide Web (rede de alcance mundial).
• O www é um sistema em hipermídia: reunião de várias mídias interligadas
por sistemas eletrônicos de comunicação e executadas na Internet.
O QUE SIGNIFICA?

9. www.mauriciomallet.com
PROJETO DE WEB
• A WEB funciona através de três parâmetros:
1. URL: especifica o endereço único que cada página vai receber (como ela
será encontrada pelos usuários);
2. HTTP: protocolo de comunicação que permite a transferência de
informação entre redes;
3. HTML: método de codificar a informação da internet (exibição diversas).
PARÂMETROS

10. PARA QUE SERVE

11. www.mauriciomallet.com
PROJETO DE WEB
• A relação MERCADO x INTERNET é o canal visto como um meio estratégico
para construção de marcas, relacionamento e desenvolvimento de negócios.
O QUE É?

12. www.mauriciomallet.com
PROJETO DE WEB
• Para planejar a presença de uma empresa (pessoa) na Internet, o primeiro
ponto a ser definido é o objetivo do serviço que será prestado:
1. SITE INSTITUCIONAL;
2. COMÉRCIO ELETRÔNICO;
3. PUBLICIDADE;
4. RELACIONAMENTO/COMUNIDADE.
PLANEJAR

13. www.mauriciomallet.com
PROJETO DE WEB
• Importante conhecer as ações que seus concorrentes já desenvolvem.
• Anotar o que vai de encontro ao seu negócio.
• O que pode ser feito para agregar mais valor ou diferencial ao seu serviço.
CONCORRENTES

14. www.mauriciomallet.com
PROJETO DE WEB
• Tudo isso deve ser consolidado em um documento que irá compor o
briefing (Instruções).
• Com os objetivos e necessidades traçados (detalhados) é necessário definir
a estrutura do site (principais páginas e módulos do site - MAPA DO SITE).
BRIEFING

15. MAPA DO SITE

16. www.mauriciomallet.com
PROJETO DE WEB
MAPA DO SITE
QUEM SOMOS
CATÁLOGO DE
PRODUTOS
TRABALHE
CONOSCO
FALE CONOSCO
NOSSA MISSÃO NOSSOS VALORES
HOME

17. www.mauriciomallet.com
PROJETO DE WEB
OBJETIVO
• Visualizar o site e facilitar a comunicação com o desenvolvedor.
• Planejar a estrutura do site: inserir todos os módulos necessários para uso
futuro (a internet permite uma evolução gradativa do site).
• Definição de quais páginas e módulos terão atualização de conteúdo e com
qual freqüência. Em alguns casos é mais interessante que sejam realizadas
através de um módulo administrativo.

18. DOMÍNIO

19. www.mauriciomallet.com
PROJETO DE WEB
DOMÍNIO
• Serve para localizar e identificar conjuntos de computadores na internet.
• É gerenciado pelo Registro.br, responsável pelos registros da internet no
Brasil.
• Facilita a memorização dos endereços de computadores na Internet.

20. www.mauriciomallet.com
PROJETO DE WEB
DNS
• Domain Name System (Sistema de Nomes de Domínios), funciona como um
sistema de tradução de endereços IP para nomes de domínios.
• O DNS serve para que o endereço (domínio) possa ser digitado ao invés de
um monte de números.

21. HOSPEDAGEM

22. www.mauriciomallet.com
PROJETO DE WEB
HOSPEDAGEM
• Local de armazenamento do site (também conhecido como provedor).
• Responsável também pela sua conta de e-mail.

23. TECNOLOGIA

24. www.mauriciomallet.com
PROJETO DE WEB
TECNOLOGIA
• Principais linguagens para desenvolvimento de sites são: .Net (Microsoft) e
PHP (Open Source).
• Banco de Dados são usadas SQL Server (Microsoft) e My SQL (Open Source)
e para sistemas mais robustos, Oracle e Java.

25. CÓDIGO FONTE

26. www.mauriciomallet.com
PROJETO DE WEB
CÓDIGO FONTE
• Source Code é o conjunto de palavras ou símbolos escritos de forma
ordenada, contendo instruções em determinada linguagem de
programação.

27. ANÁLISE

28. www.mauriciomallet.com
PROJETO DE WEB
ESTATÍSTICAS
• O Google Analytics é uma excelente ferramenta para você entender as
métricas de seu site (número de visitantes, páginas mais visitadas, menos
visitadas…)
• Ajuda a traçar estratégias para garantir o máximo aproveitamento do canal.

29. www.mauriciomallet.com
PROJETO DE WEB
ESTATÍSTICAS

30. www.mauriciomallet.com
PROJETO DE WEB
ESTATÍSTICAS

31. WIREFRAME

32. www.mauriciomallet.com
PROJETO DE WEB
WIREFRAME
• Guia visual básico usado em design de interface para sugerir a estrutura do
site e relação entre suas páginas.
• Deve ser concluído antes que qualquer trabalho artístico seja desenvolvido.
• Ajuda o desenvolvedor de sistemas a entender o que o cliente necessita
(requisitos funcionais de um sistema).
• Retrata a arquitetura de informação e a usabilidade do sistema desejado.

33. www.mauriciomallet.com
PROJETO DE WEB
WIREFRAME

34. www.mauriciomallet.com
PROJETO DE WEB
WIREFRAME

35. www.mauriciomallet.com
PROJETO DE WEB
WIREFRAME

36. www.mauriciomallet.com
PROJETO DE WEB
WIREFRAME

37. www.mauriciomallet.com
PROJETO DE WEB
WIREFRAME

38. www.mauriciomallet.com
PROJETO DE WEB
WIREFRAME

39. TAMANHOS

40. www.mauriciomallet.com
PROJETO DE WEB
HARDWARE

41. www.mauriciomallet.com
PROJETO DE WEB
LAYOUT FLUÍDO OU RESPONSIVO
• Fluído flui com o tamanho da tela do usuário.
• Responsivo responde ao tamanho.

42. www.mauriciomallet.com
PROJETO DE WEB
LAYOUT RESPONSIVO
• Necessitam de maior atenção da área de Users Experience (UX)
• É analisada toda a usabilidade do site, contempla todos os dispositivos -
parte do princípio “mobile first”.
• Modifica a estrutura nos dispositivos (trocam as informações de lugar para
melhor visualização, podem esconder e mostrar a partir de um click -
tamanhos das fontes, ícones…)
• Abaixo existe 3 estados diferentes para layout e sua respectiva reação com a
página.
1. Largura absoluta de 960 px.
2. Largura igual ou inferir a 900px. (Larguras relativas de 100%).
3. Largura igual ou inferir a 400px.

43. www.mauriciomallet.com
PROJETO DE WEB
LAYOUT RESPONSIVO

44. www.mauriciomallet.com
PROJETO DE WEB
LAYOUT FLUÍDO
• Acompanham o tamanho da tela (aumenta e diminui navegador) - não troca a
estrutura.
• Não é pensando muito na usabilidade.

45. www.mauriciomallet.com
PROJETO DE WEB
LAYOUT FLUÍDO

46. www.mauriciomallet.com
PROJETO DE WEB
LAYOUT FLUÍDO HÍBRIDO
• Seguem o mesmo padrão dos fluídos, porém com uma limitação de largura,
nesse caso utilizamos o “max-width” e “min-width” para conseguir certo
controle do layout.
• Controle do layout.

47. www.mauriciomallet.com
PROJETO DE WEB
LAYOUT FLUÍDO HÍBRIDO

48. www.mauriciomallet.com