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.
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
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
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
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
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.
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.
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.
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.
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.
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.
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.
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.
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.