Aulas 03 a 05 - Web Sites · aparecerá na página do web site. As páginas deste tipo de web site são chamadas ... características primordiais de um site de comércio eletrônico

Aulas 03 a 05 - Web Sites

SumárioO que é Site?

Gerações de SitesSites de 1ª geração

Sites de 2ª geração



Web Standard X TabelasHot Sites

Web Sites Estáticos e Dinâmicos

Categoria de sitesInstitucional

Notícia/Informação

Notícia/Informação (Cont.)

Entretenimento

Comércio eletrônico

Portal

Serviços


O que é Site?

A definição do que é um site depende do ponto de vista do segmento que se olha. Para um empresário um sitepode ser um canal de comunicação e novas oportunidades de negócios.

Para um usuário comum da Web pode ser um conjunto de páginas contendo muitas informações sobre omundo, diversão, etc. Tecnicamente, um site é um conjunto de arquivos. E cada arquivo guarda certaquantidade de informações como textos, imagens, sons, vídeos e animações.


Gerações de Sites







Devido à limitação imposta por modems lentos e monitores monocromáticos os web sites de primeirageração eram muito simples. As primeiras páginas que circularam pela Web foram criadas por cientistase pesquisadores que desejavam compartilhar suas ideias, documentos, teses, etc., com outrospesquisadores de outras universidades.

Essas páginas eram caracterizadas por longos textos com sequência do topo para a base e daesquerda para a direita e usavam recursos básicos de formatação de texto, como negrito, itálico,marcadores de textos, quebras de parágrafo, linhas horizontais como separadores, e pequenasimagens. Os web sites de primeira geração eram criados por técnicos e muitos utilizavam texto preto emfundo cinza.



Os sites de segunda geração trouxeram algumas novidades visuais que foram possibilitadas pelosrecursos incorporados nas novas versões dos navegadores.

Estas melhorias visuais incluem ícones substituindo palavras, imagens "ladrilhadas" substituindo ofundo cinza, botões com chanfros e banners substituindo os títulos. Outra característica dos sites desegunda geração é a utilização de menus verticais com opções dispostas de cima para baixo e comlistas para apresentar uma hierarquia de informações.

A tecnologia teve grande influência nos sites de segunda geração. Isto trouxe como resultado sitescom uma melhoria visual através do uso de ícones e menus e sites enfeitados, cheios de efeitospirotécnicos como consequência do deslumbramento das novas tecnologias.

Neste momento a web estava sendo usada para fins comerciais, mas as páginas ainda eramconstruídas por técnicos. O termo passa a ser largamente utilizado.homepage



Os sites de terceira geração representam uma mudança radical na aparência dos web sites.Apesar da contínua evolução dos navegadores e tecnologias que sempre influenciam o design, aprincipal característica dos web sites de terceira geração não é a tecnologia, e sim o design.

Esta mudança foi consequência, sobretudo, da vinda de designers que já trabalhavam com artesgráficas para o mundo das páginas web. Começaram a aparecer páginas mais criativas, commelhor combinação de cor, mais harmonia na composição dos elementos, enfim, complanejamento visual.

A maioria dos web sites que conhecemos atualmente é classificada como web site de terceirageração.



Independentemente da classificação por geração, algumas novas tecnologias em particulartrouxeram inovações que realmente estão influenciando o design dos web sites. Essastecnologias estão permitindo a criação de web sites com interfaces totalmente novas, maisdinâmicas, mais intuitivas e mais interativas.

Uma dessas tecnologias é o Flash. Através dos recursos multimídia disponíveis nestatecnologia pode-se criar web sites com interfaces animadas, com efeitos sonoros, imagens3D, fotos, vídeo, etc. Estes recursos ampliam as possibilidades de criação do web designer. Odesign ganha novas dimensões, facilitando a interação do internauta com a interface e ainformação.


Web Standard X Tabelas

A principal forma de diagramação de Web Sites até 2005 era utilizando o recurso deTabelas (Tag Table). Essa maneira de desenvolver serviu muito bem até essa época,porém, com preocupações maiores com buscadores, acessibilidade e internet em ,mobilesa tabela aos poucos vem sendo substituída pelo Web Standard (Tableless).

A tag Div, juntamente com uma utilização mais inteligente do CSS, permite um controlemaior do , menos código e um tempo menor de carregamento da página. Alémlayoutdisso, o código é montado de maneira otimizada e melhor interpretado por buscadores esistema de leitura para deficientes visuais.

O www.csszengarden.com demonstra o potencial desse tipo de Web Site, permitindo omesmo código HTML sem ser transformado em inúmeros com uma mudança nolayoutsestilo CSS.


Hot Sites

É comum a utilização do termo Hot Site, em lançamento de: produtos, filmes, eventos epublicidade online. Normalmente esse tipo de Web Site é de caráter temporário, semmanutenção posterior e faz parte de uma campanha de marketing mais agressiva.

O Adobe Flash é o software mais utilizado para a criação de Hot Sites, normalmenteenglobando som, imagens e até mesmo vídeo.


Web Sites Estáticos e Dinâmicos

Até o advento das tecnologias de acesso a banco de dados via web, o conteúdodos web sites somente podia ser alterado manualmente, ou seja, cada vez quealguém pedia alguma alteração o web designer ou web master tinha que abrir apágina, fazer a alteração e salvar a página novamente no servidor. As páginasdeste tipo de web site são chamadas .estáticas

Uma ótima solução para empresas são os sites estáticos que buscam divulgar seusprodutos e serviços na Internet, através do seu site institucional, onde a mesma nãonecessita fazer atualizações frequentes em seu site, sem contar com o custo baixopara desenvolvimento e manutenção do site, as atualizações necessárias sãorealizadas no próprio documento HTML.

Os web sites que utilizam tecnologias de acesso a banco de dados permitem que

as páginas sejam atualizadas de forma automática ou dinamicamente. Ou seja,basta fazer a alteração no banco de dados que automaticamente a nova informaçãoaparecerá na página do web site. As páginas deste tipo de web site são chamadasde páginas .dinâmicas

Os sites dinâmicos geralmente contam com uma área administrativa onde vocêmesmo poderá administrar as páginas dinâmicas do seu site inserindo, alterando ouexcluindo informações em um banco de dados, para que seu site esteja sempreatualizado, estas atualizações podem ser efetuadas de qualquer computador queestiver conectado com a Internet.


Categoria de sites

Para facilitar o aprendizado sobre a importância das características e recursos,alguns web sites foram classificados em categorias. Podem-se usar muitasclassificações diferentes, mas a classificação a seguir está baseada emmacroáreas de atuação, sendo elas:

institucional;

notícia/informação;

entretenimento;

comércio eletrônico;

portal;

serviços.


Institucional

Este foi o primeiro tipo de site comercial que apareceu na web. O siteinstitucional tem o objetivo de apresentar a empresa, sendo quase umaversão interativa do folder institucional da empresa.

Características típicas:

informação atualizada sobre a área de atuação da empresa;

informação sobre os produtos ou serviços da empresa;

local8ização e telefones;

página e e-mail de contato;

páginas com informações adicionais para atrair o cliente, assim comoeventos, assuntos relacionados à área de atuação da empresa, testedrive, downloads.

O site da Bauducco é um bom exemplo de site institucional, que traz nãoapenas informação sobre a empresa e sua linha de produtos, mas tambémsobre lançamentos, receitas, um jogo que mostra como o panettone éproduzido, página para a imprensa, além de papéis de parede, protetor detela, etc.

Exemplos:

http://www.bauducco.com.br

http://www.bosch.com.br/

http://www.etti.com.br


Notícia/Informação

Nesta categoria incluem-se os sites de agências de notícias, revistason-line, sites de documentação técnica, etc.


informação atualizada;

carregamento rápido das páginas;

design agradável, porém leve;

pouca imagem na homepage;

navegação clara e objetiva;

textos não muito longos;

links para edições anteriores;

estrutura e organização das páginas;

tecnologias de acesso dinâmico.


Notícia/Informação (Cont.)

Exemplos:

http://www.veja.com.br

http://www.estadao.com.br

http://www.g1.com.br

http://quatrorodas.abril.uol.com.br/


Entretenimento

Os sites de entretenimento têm necessidades e característicastotalmente contrárias aos sites de notícia/informação, pois oobjetivo principal é entreter o internauta, e entretenimento envolvebelas imagens, animações, vídeo e áudio.


visual colorido;

uso de imagens;

animação e vídeos;

músicas e efeitos sonoros;

navegação clara e limpa;

design mais livre;

uso de tecnologia como Flash, HTML dinâmico, Java Script;

alta interatividade.

Exemplos:

http://www.cartoonnetwork.com.br/ppg/index.html

http://www.hopihari.com.br

http://www.atrativa.ibest.com.br/


Comércio eletrônico

Nesta categoria estão os sites de lojas virtuais, sites demagazines, etc. Não há muito segredo em relação àscaracterísticas primordiais de um site de comércio eletrônico.

Quando entramos num site de comércio eletrônico, com oobjetivo de comprar algo, o que esperamos encontrar?Primeiramente que a loja tenha o produto procurado, emsegundo lugar que o prazo de entrega seja curto, terceiro que o

site seja seguro, e por último que o produto seja entregue. Avelocidade no carregamento das páginas e na busca porprodutos é considerada como primordial.


possuir produto ou serviços atualizados;

informações detalhadas sobre produto ou serviço;

fotos e preço de cada produto;

segurança;

uso de tecnologias de acesso a banco de dados;

opções de formas de pagamento;

promoções.

Exemplos:

http://www.americanas.com.br

http://www.submarino.com.br

http://www.e-store.com.br

http://www.fnac.com.br/


Portal

Nesta categoria estão os grandes sites com links paradiversas páginas sobre um determinado assunto.

Geralmente estão ligados a outros sites como games,cinema, notícias, bate-papo, revistas, compras, esportes,educação e muitos outros assuntos.


possuir informações atualizadas;


patrocinadores;

os textos devem ser redigidos por profissionais;

possuir um grande conteúdo de informações;

Exemplos:

http://www.terra.com.br

http://www.uol.com.br

http://www.ig.com.br


Serviços

Atualmente há um número grande de sites que prestamserviços online. Desde correio, previsão do tempo, inserircréditos no celular, declarar seu imposto de renda ou atémesmo consultar seu saldo no banco.


possuir informações atualizadas;


design claro e suave;

possuir estatísticas sobre determinados assuntos;

possuir busca;

segurança;

canal fácil de comunicação.

Exemplos:

http://www.inmet.gov.br/

http://www.itau.com.br

http://www.detran.sp.gov.br/

Documents

Aulas 03 a 05 - Web Sites · aparecerá na página do web site. As páginas deste tipo de web site são chamadas ... características primordiais de um site de comércio eletrônico