Projeto para WEB

PROJETO DE WEB

HISTÓRIA

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

COMO FUNCIONA


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

PARA QUE SERVE


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 definido é 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

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

MAPA DO SITE


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

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

DOMÍNIO


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.


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.

HOSPEDAGEM


PROJETO DE WEB

HOSPEDAGEM• Local de armazenamento do site (também conhecido como provedor).

• Responsável também pela sua conta de e-mail.

TECNOLOGIA


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.

CÓDIGO FONTE


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.

ANÁLISE


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

ESTATÍSTICAS

WIREFRAME


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

WIREFRAME


PROJETO DE WEB

WIREFRAME


PROJETO DE WEB

WIREFRAME


PROJETO DE WEB

WIREFRAME


PROJETO DE WEB

WIREFRAME

TAMANHOS


PROJETO DE WEB

HARDWARE


PROJETO DE WEB

LAYOUT FLUÍDO OU RESPONSIVO• Fluído flui 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 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.


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


PROJETO DE WEB

LAYOUT FLUÍDO HÍBRIDO


Education

Projeto para WEB