Projeto para WEB

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

PROJETO DE WEB
ARPANET LOGICAL MAP

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

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

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?

PROJETO DE WEB
• A WEB funciona através de três parâmetros:
1. URL: especiﬁca 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 codiﬁcar a informação da internet (exibição diversas).
PARÂMETROS

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 É?

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

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

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

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

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).
• Deﬁniçã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.

PROJETO DE WEB
DOMÍNIO
• Serve para localizar e identiﬁcar 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.

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.

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

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.

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.

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.

PROJETO DE WEB
ESTATÍSTICAS

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.

PROJETO DE WEB
WIREFRAME

PROJETO DE WEB
HARDWARE

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

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 ﬁrst”.
• Modiﬁca 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.

PROJETO DE WEB
LAYOUT RESPONSIVO

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.

PROJETO DE WEB
LAYOUT FLUÍDO

PROJETO DE WEB
LAYOUT FLUÍDO HÍBRIDO
• Seguem o mesmo padrão dos ﬂuí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.

PROJETO DE WEB
LAYOUT FLUÍDO HÍBRIDO

Projeto para WEB

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Projeto para WEB

Mais de Mauricio Mallet Duprat

Último

Projeto para WEB