Aulas 03 a 05 - Web Sites

Transcrição

1 Sumário O que é Site? Gerações de Sites Sites de 1ª geração Sites de 2ª geração Sites de 3ª geração Sites de 4ª geração Web Standard X Tabelas Hot Sites Web Sites Estáticos e Dinâmicos Categoria de sites Institucional 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 site pode 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 o mundo, diversão, etc. Tecnicamente, um site é um conjunto de arquivos. E cada arquivo guarda certa quantidade de informações como textos, imagens, sons, vídeos e animações. Gerações de Sites

2 Sites de 1ª geração Sites de 2ª geração Sites de 3ª geração Sites de 4ª geração Sites de 1ª geração Devido à limitação imposta por modems lentos e monitores monocromáticos os web sites de primeira geração eram muito simples. As primeiras páginas que circularam pela Web foram criadas por cientistas e pesquisadores que desejavam compartilhar suas ideias, documentos, teses, etc., com outros pesquisadores de outras universidades. Essas páginas eram caracterizadas por longos textos com sequência do topo para a base e da esquerda 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 pequenas imagens. Os web sites de primeira geração eram criados por técnicos e muitos utilizavam texto preto em fundo cinza. Sites de 2ª geração

3 Os sites de segunda geração trouxeram algumas novidades visuais que foram possibilitadas pelos recursos incorporados nas novas versões dos navegadores. Estas melhorias visuais incluem ícones substituindo palavras, imagens "ladrilhadas" substituindo o fundo cinza, botões com chanfros e banners substituindo os títulos. Outra característica dos sites de segunda geração é a utilização de menus verticais com opções dispostas de cima para baixo e com listas para apresentar uma hierarquia de informações. A tecnologia teve grande influência nos sites de segunda geração. Isto trouxe como resultado sites com uma melhoria visual através do uso de ícones e menus e sites enfeitados, cheios de efeitos pirotécnicos como consequência do deslumbramento das novas tecnologias. Neste momento a web estava sendo usada para fins comerciais, mas as páginas ainda eram construídas por técnicos. O termo homepage passa a ser largamente utilizado. Sites de 3ª geração 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, a principal 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 artes gráficas para o mundo das páginas web. Começaram a aparecer páginas mais criativas, com melhor combinação de cor, mais harmonia na composição dos elementos, enfim, com planejamento visual. A maioria dos web sites que conhecemos atualmente é classificada como web site de terceira geração.

4 Sites de 4ª geração Independentemente da classificação por geração, algumas novas tecnologias em particular trouxeram inovações que realmente estão influenciando o design dos web sites. Essas tecnologias estão permitindo a criação de web sites com interfaces totalmente novas, mais dinâmicas, mais intuitivas e mais interativas. Uma dessas tecnologias é o Flash. Através dos recursos multimídia disponíveis nesta tecnologia pode-se criar web sites com interfaces animadas, com efeitos sonoros, imagens 3D, fotos, vídeo, etc. Estes recursos ampliam as possibilidades de criação do web designer. O design ganha novas dimensões, facilitando a interação do internauta com a interface e a informação.

5 Web Standard X Tabelas A principal forma de diagramação de Web Sites até 2005 era utilizando o recurso de Tabelas (Tag Table). Essa maneira de desenvolver serviu muito bem até essa época, porém, com preocupações maiores com buscadores, acessibilidade e internet em mobiles, a 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 controle maior do layout, menos código e um tempo menor de carregamento da página. Além disso, o código é montado de maneira otimizada e melhor interpretado por buscadores e sistema de leitura para deficientes visuais. O demonstra o potencial desse tipo de Web Site, permitindo o mesmo código HTML sem ser transformado em inúmeros layouts com uma mudança no estilo CSS.

6 Hot Sites É comum a utilização do termo Hot Site, em lançamento de: produtos, filmes, eventos e publicidade online. Normalmente esse tipo de Web Site é de caráter temporário, sem manutençã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, normalmente englobando som, imagens e até mesmo vídeo.

7 Web Sites Estáticos e Dinâmicos Até o advento das tecnologias de acesso a banco de dados via web, o conteúdo dos web sites somente podia ser alterado manualmente, ou seja, cada vez que alguém pedia alguma alteração o web designer ou web master tinha que abrir a página, fazer a alteração e salvar a página novamente no servidor. As páginas deste tipo de web site são chamadas estáticas. Uma ótima solução para empresas são os sites estáticos que buscam divulgar seus produtos e serviços na Internet, através do seu site institucional, onde a mesma não necessita fazer atualizações frequentes em seu site, sem contar com o custo baixo para desenvolvimento e manutenção do site, as atualizações necessárias são realizadas no próprio documento HTML. Os web sites que utilizam tecnologias de acesso a banco de dados permitem que

8 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ção aparecerá na página do web site. As páginas deste tipo de web site são chamadas de 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 ou excluindo informações em um banco de dados, para que seu site esteja sempre atualizado, estas atualizações podem ser efetuadas de qualquer computador que estiver 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 muitas classificações diferentes, mas a classificação a seguir está baseada em macroá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 site institucional tem o objetivo de apresentar a empresa, sendo quase uma versã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 de contato;

9 páginas com informações adicionais para atrair o cliente, assim como eventos, assuntos relacionados à área de atuação da empresa, teste drive, downloads. O site da Bauducco é um bom exemplo de site institucional, que traz não apenas informação sobre a empresa e sua linha de produtos, mas também sobre lançamentos, receitas, um jogo que mostra como o panettone é produzido, página para a imprensa, além de papéis de parede, protetor de tela, etc. Exemplos: Notícia/Informação Nesta categoria incluem-se os sites de agências de notícias, revistas on-line, sites de documentação técnica, etc. Características típicas: informação atualizada; carregamento rápido das páginas;

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

11 Entretenimento Os sites de entretenimento têm necessidades e características totalmente contrárias aos sites de notícia/informação, pois o objetivo principal é entreter o internauta, e entretenimento envolve belas imagens, animações, vídeo e áudio. Características típicas: 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:

12 Comércio eletrônico Nesta categoria estão os sites de lojas virtuais, sites de magazines, etc. Não há muito segredo em relação às características primordiais de um site de comércio eletrônico. Quando entramos num site de comércio eletrônico, com o objetivo de comprar algo, o que esperamos encontrar? Primeiramente que a loja tenha o produto procurado, em segundo lugar que o prazo de entrega seja curto, terceiro que o

13 site seja seguro, e por último que o produto seja entregue. A velocidade no carregamento das páginas e na busca por produtos é considerada como primordial. Características típicas: 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:

14 Portal Nesta categoria estão os grandes sites com links para diversas 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. Características típicas: possuir informações atualizadas; uso de tecnologias de acesso a banco de dados; patrocinadores; os textos devem ser redigidos por profissionais; possuir um grande conteúdo de informações; Exemplos:

15 Serviços Atualmente há um número grande de sites que prestam serviços online. Desde correio, previsão do tempo, inserir créditos no celular, declarar seu imposto de renda ou até mesmo consultar seu saldo no banco. Características típicas: possuir informações atualizadas; uso de tecnologias de acesso a banco de dados; design claro e suave; possuir estatísticas sobre determinados assuntos; possuir busca; segurança; canal fácil de comunicação. Exemplos:

16