Unidade 4 – Concepção de web sites. Subunidade 1 - Fundamentos · 2012-10-19 · Recentemente...

- - - - - 1 - - - - -Paula Cardoso Alcobia

Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano

Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Unidade 4 – Concepção de web sites.Unidade 4 – Concepção de web sites.Unidade 4 – Concepção de web sites.Unidade 4 – Concepção de web sites.Unidade 4 – Concepção de web sites.

Subunidade 1 - FundamentosSubunidade 1 - FundamentosSubunidade 1 - FundamentosSubunidade 1 - FundamentosSubunidade 1 - Fundamentos

- Fundamentos do planeamento de um web site

ooooo Regras para um web site eficaz

-Sobre o conteúdo

- Sobre a forma

-Modelos de páginas

ooooo Planear o web site

o o o o o Conceber web sites para diferentes suportes

-Servidores Linux e Windows

-Os diferentes browsers

-Editores de páginas web

ooooo Editores WYSIWYG

o o o o o Editores HTML



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

1.Fundamentos do planeamento de um 1.Fundamentos do planeamento de um 1.Fundamentos do planeamento de um 1.Fundamentos do planeamento de um 1.Fundamentos do planeamento de um web siteweb siteweb siteweb siteweb site

1.1. Regras para um web site eficaz1.1. Regras para um web site eficaz1.1. Regras para um web site eficaz1.1. Regras para um web site eficaz1.1. Regras para um web site eficaz

1.1.1.Sobre o Conteúdo1.1.1.Sobre o Conteúdo1.1.1.Sobre o Conteúdo1.1.1.Sobre o Conteúdo1.1.1.Sobre o Conteúdo

Categorização dos conteúdosCategorização dos conteúdosCategorização dos conteúdosCategorização dos conteúdosCategorização dos conteúdos

O desenvolvimento de uma página da web é efectuado a partir de um tema previamentedefinido. Depois de conhecido o tema, é necessário decompô-lo nos diversos conteúdos dapágina.

Os conteúdos são então agrupados em 4 categorias:! Estáticos – informações sobre os direitos de autor, políticas de privacidade e

regras para membros, etc.! Dinâmicos – informações actualizadas semanal ou diariamente.! Funcionais – informações que carecem de programas para serem disponibilizados como, por exemplo, consultas a bases de dados.! Transaccionais – informações relativas a pagamentos e suas funcionalidades

inerentes.

Quando uma página resulta de uma adequada categorização dos conteúdos apresenta umamaior flexibilidade, escalabilidade e convertibilidade, que permitem, no futuro, a suaexpansão ou renovação.

CondensaçãoCondensaçãoCondensaçãoCondensaçãoCondensação

Os conteúdos devem ser apresentados de uma forma condensada, ou seja, simples e directanuma página da web.

Conteúdo da páginaConteúdo da páginaConteúdo da páginaConteúdo da páginaConteúdo da página

A página inicial - homepage - deve reflectir o conteúdo do site e ser adequada aopúblico-alvo para a qual foi concebida.

Os conteúdos devem ser apresentados segundo o seu grau de importância, sempretendo em linha de conta que o utilizador irá fazer uma leitura das páginas do cantosuperior esquerdo do monitor para o canto inferior direito.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

1.1.2. Sobre a forma1.1.2. Sobre a forma1.1.2. Sobre a forma1.1.2. Sobre a forma1.1.2. Sobre a forma

Consistência e previsibilidadeConsistência e previsibilidadeConsistência e previsibilidadeConsistência e previsibilidadeConsistência e previsibilidade

A consistência é uma das características mais importantes numa página. A falta deconsistência leva não só o utilizador à confusão (por não conseguir identificar se apágina pertence ao mesmo site), como afecta a imagem do site como um todo,comprometendo a representação do proprietário do site.

Quanto à previsibilidade, a definição das características permitem ao utilizadorlocalizar, de uma forma rápida, os principais elementos que podem estar presentesem todas as páginas, como o menu de navegação, botões e imagens.

O conjunto das características definidas para os elementos que constituem as pági-nas pode ser concretizado através da colecção de estilos.

Uso racional da tecnologiaUso racional da tecnologiaUso racional da tecnologiaUso racional da tecnologiaUso racional da tecnologia

Inicialmente, o desenvolvimento das páginas web, utilizavam apenas o HTML(HiperText Markup Language), resultava em páginas de conteúdos estáticos.

O desenvolvimento de páginas com conteúdos dinâmicos e interactivos era feirorecorrendo à tecnologia CGI ( Common Gateway Interface). Esta tecnologia é su-portada pela maioria dos servidores web e define a interface que as aplicaçõesdevem utilizar de forma a estender as funcionalidades do servidor web. A alteraçãodo conteúdo das páginas é efectuado do lado do servidor, isto é, as páginas sãoreescritas e enviadas para o browser. Esta forma leva a um a maior processamentodo lado do servidor e, por conseguinte, a uma sobrecarga de tráfego na rede,tornando os processos mais lentos.

Hoje em dia existe um conjunto de novas tecnologias, tanto do lado do servidorcomo do lado do cliente, que permite criar conteúdos dinâmicos e interactivos deforma diferente.

Do lado do cliente, a utilização de tecnologia como o Java Applet, o ActiveX e osplug-ins permitem adicionar conteúdos activos às páginas em HTML, mas requerembrowsers e plataformas próprias, No caso do Java Applets é necessário existir umamáquina virtual Java (JVM – Java Virtual Machine). Relativamente aos controlos doActiveX, estes funcionam principalmente com browsers da Microsoft. Quanto aosplug-ins, estes têm de ser descarregados, instalados e actualizados.

Para ultrapassar as limitações apresentadas do lado do cliente pelas tecnologiasanteriores na criação de páginas Web, foram definidos novos standards peloW3C(World Wide Web Consortium), como por exemplo, o DHTML (Dynamic HTML),o XML(Extensible Markup Language) e outros.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

DHTMLDHTMLDHTMLDHTMLDHTML, é a união das tecnologias HTML e Javascript para permitir que uma páginaWeb seja modificada dinamicamente na própria máquina cliente, sem necessidadede novos acessos ao servidor web.

O XML, utilizando o HTML permite interactivamente trocar dados entre aplicações eorganizações e é muito mais utilizado em websites de comercio electrónico. Foiconcebido apenas para estruturar o conteúdo dos dados, enquanto que o HTML lhedá o formato e apresentação. Recentemente surgiu o XHTML (eXtensible HypertextXtensible HypertextXtensible HypertextXtensible HypertextXtensible HypertextMarkup LMarkup LMarkup LMarkup LMarkup Language)anguage)anguage)anguage)anguage). O XHTMLXHTMLXHTMLXHTMLXHTML é uma reformulação da linguagem de marcaçãoHTML baseada em XML. Combina as tag’s de marcação HTML com regras da XML,esse processo de padronização visa a visualização de páginas Web em diversosdispositivos (televisão, etc). A ideia é acessibilidade.

O W3C -WWWWWorld World World World World Wide Wide Wide Wide Wide Web Consortiumeb Consortiumeb Consortiumeb Consortiumeb Consortium (http://www.w3.org), é um consórcio deempresas de tecnologia (actualmente cerca de 500 membros) fundada por TimBerners Lee em 1994 para levar a Web para o seu potencial máximo, através dodesenvolvimento de protocolos comuns e fóruns abertos que promovem a evoluçãoe asseguram a interoperacionalidade. As recomendações do W3C indicam que nocaso de se usarem tecnologias recentes, deve ser criadauma versão alternativa para que todos os utilizadorespossam ter acesso e não se criem barreirastecnológicas.

Para alcançar os seus objectivos, a W3C possui diversoscomités que estudam as tecnologias existentes para aapresentação de conteúdo na Internet e criam padrõesde recomendação para utilizar essas tecnologias. Com apadronização, os programas conseguem aceder facil-mente os códigos e entender onde deve ser aplicadocada conhecimento expresso no documento.

RRRRRecurso a imagensecurso a imagensecurso a imagensecurso a imagensecurso a imagens

A utilização de imagens pode ajudar a tornar as páginas web mais atractivas elegíveis podendo contribuir para um aumento do número de utilizadores. Por outrolado, uma página web que contenha muitas imagens, cujos tamanhos dos ficheirosseja grande, torna-se lenta, contribuindo para a diminuição dos utilizadores.

A representação de texto através de imagens deve ser evitada, pois dificulta a pes-quisa de informação e o redimensionamento do texto ao ser visualizado nosbrowsers.

Tim Berners-Lee, W3C - Director e Inventor da WorldWide Web



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Combinações de coresCombinações de coresCombinações de coresCombinações de coresCombinações de cores

A cor é muito importante como elemento orientador do olhar do utilizador. Os olhosmovem-se dos elementos maiores para os menores, das cores escuras para as maisclaras, e da cor para a ausência de cor. A escolha de cores na rede não é feitacomo se faz no papel. O papel recebe luz enquanto que o écran ilumina. Esta é aprimeira de muitas diferenças. A cor deve guiar, orientar a leitura que na rede temcontornos particulares, trata-se de uma leitura não-linear.

As cores básicas do site devem pertencer ao espectro das 256 cores. É claro queem fotos e ilustrações não fundamentais podemos alargar esta paleta mas temosque assegurar que 100% de população consiga aceder sem complicações ao site.

Uso de frames Uso de frames Uso de frames Uso de frames Uso de frames

As frames ou molduras são, em simultâneo elementos estruturais e de navegação deuma página web. São estruturais porque permitem a definição de uma estruturadividindo o espaço de uma página web num conjunto de espaços rectangularesmais pequenos. Este conjunto também conhecido por frameset que, depois deimplementado, consiste num espaço com múltiplas páginas web.

Cada um dos espaços vai poder conter um documento e para cada um deles teráde existir um ficheiro com a sua informação. Por exemplo, para dividir uma páginaem 3 frames são necessários 4 ficheiros: um para cada uma das frames e outroonde é guardada toda a informação da página com as 3 frames.

A utilização da frame permite, por exemplo, definir uma como menu, outra comotítulo e outra para apresentação de conteúdos. No entanto, a utilização de framesapresenta como dificuldades a impressão da página e o seu carregamento inicial.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

1.1.3. Modelos de páginas1.1.3. Modelos de páginas1.1.3. Modelos de páginas1.1.3. Modelos de páginas1.1.3. Modelos de páginas

Um modelo de página é um conjunto predefinido de formatos de texto e gráficos, apartir do qual se criam páginas do website. Os modelos de páginas web podemincluir tabelas de esquema, estilos, formatação, gráficos ou outros elementos depágina. Os programas de editores de páginas web tipo WYSIWYG (What You See IsWhat You Get) têm um conjunto de páginas-modelo que podem ser seleccionadas,permitindo de uma forma mais fácil a sua criação.

Páginas de aberturaPáginas de aberturaPáginas de aberturaPáginas de aberturaPáginas de abertura

A página de abertura corresponde à primeira página que écarregada no browser quando se acede a um website.

Páginas iniciaisPáginas iniciaisPáginas iniciaisPáginas iniciaisPáginas iniciais

A página inicial corresponde à pagina que é carregada no browser após a páginade abertura, quando acede a um website. Em alguns websites, devido à inexistênciada página de abertura, a página inicial e a página de abertura são a mesma.

Os ficheiros onde são guardados os dados das páginas de abertura ou inicial sãodesignadas por default ou index e têm extensões htm ou html. No entanto, no casoda utilização de tecnologias mais recentes, podem apresentar outros nomes e exten-sões. (exemplo: index.php; default.asp, etc).

http://www.sjradio.com/ http://www.essje.pt/

http://www.min-edu.pt/http://www.wikipedia.org



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

FFFFFAQAQAQAQAQ

A página FAQ (Frequently Asked Question) é utiliza-da nos websites para apresentar um conjunto dequestões e as respectivas respostas. As questões sãoformuladas de acordo com o contexto e o assuntoem que se insere o website.

ContactosContactosContactosContactosContactos

A página de contactos permite divulgar dadossobre a empresa, a instituição ou outras entidades.Normalmente os dados referidos nesta páginapodem ser a direcção, o telefone, o e-mail, o fax eoutras.

Mapa do Mapa do Mapa do Mapa do Mapa do sitesitesitesitesite

A página Mapa do site mostra aos utilizadores a organização Hierárquica das pági-nas do website, através de uma representação esquemática. A partir desta páginas épossível navegar nas páginas do website, através dos seus links, à semelhança doíndice de um livro.

Livro de visitasLivro de visitasLivro de visitasLivro de visitasLivro de visitas

A página Livro de visitas é constituída por um for-mulário, que depois de preenchido é enviado parao servidor do website. Através do preenchimento doformulário, a entidade pode requerer dados doutilizador e, em alguns casos, comentários aowebsite.

Páginas de conteúdoPáginas de conteúdoPáginas de conteúdoPáginas de conteúdoPáginas de conteúdo

As páginas de conteúdo correspondem às páginasweb utilizadas para divulgar informação relaciona-da com os objectivos do site, sob a forma de texto,gráfico, vídeo e/ou som.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Outros modelosOutros modelosOutros modelosOutros modelosOutros modelos

Página Fórum - Zona de comunicação ou de discussão emdiferido, comparável ao newsgroup da Usenet.

Página Chat - permite conversar com amigos.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Critérios para a construção de páginas da webCritérios para a construção de páginas da webCritérios para a construção de páginas da webCritérios para a construção de páginas da webCritérios para a construção de páginas da web

DESIGNDESIGNDESIGNDESIGNDESIGN

- FFFFFrameramerameramerame lateral esquerda sempre presente de modo que o utilizador não se sintaperdido e possa em qualquer momento alterar a sua navegação;

- Separadores Separadores Separadores Separadores Separadores entre as imagens;

- Setas Setas Setas Setas Setas personalizadas do mesmo padrão;

- Cores com ténues diferentes entre Cores com ténues diferentes entre Cores com ténues diferentes entre Cores com ténues diferentes entre Cores com ténues diferentes entre o menu esquerdo e as páginas do lado direitoda frame;

- Música Música Música Música Música apenas com duas repetições para não maçar o utilizador e colocada napágina esquerda da frame para que possa ser ouvida até ao fim.

CORESCORESCORESCORESCORES

- FFFFFundos undos undos undos undos em tons claros;

- LLLLLetras etras etras etras etras em tons escuros e contrastantes (preto ou azul) com o fundo;

- A utilização de fundos de páginas com muitos gráficos, imagens animadas oucores muito berrantes podem funcionar como dispersantes, podendo confundir outilizador e tornar difícil a leitura do texto que se encontra sobre o background.

- É importante que se crie um ambiente harmonioso entre as cores utilizadas nasfontes das letras e a cor utilizada no background da página. Atenção que o uso decores claras (branco, por exemplo) em backgrounds escuros impossibilita aoutilizador a impressão do texto, pois o branco das letras não vai aparecer na im-pressão de um folha branca.

- LLLLLogotipoogotipoogotipoogotipoogotipo em cada página com uma cor que realce em relação à cor do fundo;

- SeparadorSeparadorSeparadorSeparadorSeparador numa página entre os diferentes temas ou assuntos (em tom concor-dante com o fundo);

- TítuloTítuloTítuloTítuloTítulo de cada página em tom contrastante com o fundo e a cor do restante texto.

TEXTOSTEXTOSTEXTOSTEXTOSTEXTOS

- Em fonte Vfonte Vfonte Vfonte Vfonte Verdana erdana erdana erdana erdana (com a alternativa Arial) porque não têm serifa, o que facilita aleitura;

- Os títulos títulos títulos títulos títulos podem ser em TTTTTimes imes imes imes imes ou outro tipo de letra mais desenhada (com ousem serifa);

- Os textos textos textos textos textos nunca são sublinhados para que o utilizador não confunda com umahiperligação.

- Evitar a utilização de texto cintilante, animação só por si, desviam a atenção doutilizador daquilo que é essencial para o acessório.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

LIGAÇÕESLIGAÇÕESLIGAÇÕESLIGAÇÕESLIGAÇÕES

- A página com ligações dentro da mesma página ligações dentro da mesma página ligações dentro da mesma página ligações dentro da mesma página ligações dentro da mesma página (com o bookmark) permite quenum único documento exista toda a informação necessária (para eventual impres-são), tem um separador entre os diferentes textos;

- As hiperligações para o exterior hiperligações para o exterior hiperligações para o exterior hiperligações para o exterior hiperligações para o exterior devem ser feitas com a abertura de uma novajanela;

- As ligações no frame esquerdo, bem como uma qualquer ligação em outra página,abrem sempre um ficheiro html do lado direito abrem sempre um ficheiro html do lado direito abrem sempre um ficheiro html do lado direito abrem sempre um ficheiro html do lado direito abrem sempre um ficheiro html do lado direito (main) do frame, de modo a man-ter o menu de opções no lado esquerdo;

- Algumas imagens têm uma hiperligaçãoimagens têm uma hiperligaçãoimagens têm uma hiperligaçãoimagens têm uma hiperligaçãoimagens têm uma hiperligação, quando se refere a outra página.

- Manter, ao longo de todo o site, páginas não muito longas, estabelecendohiperligações com outras páginas, facilitando, assim, a navegação dos utilizadoresnas páginas.

IMAGENSIMAGENSIMAGENSIMAGENSIMAGENS

- Nas imagens deverá proceder-se à introdução de uma descrição textual que identi-fique a imagem.

- Numa página WWW apenas se podem utilizar imagens com formato .gif ou .jpg,sendo o primeiro geralmente utilizado para ilustrações e o segundo para fotos.

- Manter os ficheiros das imagens com dimensões reduzidas por forma a manter omínimo tempo possível para o carregamento da página.

- Uma imagem que apoia um texto imagem que apoia um texto imagem que apoia um texto imagem que apoia um texto imagem que apoia um texto (método aconselhável para ajudar a compreen-são do texto) deve aparecer do lado direito, para que o utilizador comece por ler otexto.

- A consistência, a nível de imagens, do grafismo e de ícones de navegação utiliza-dos, ao longo de todo o site é importante para a sua identificação.

- Os ícones de navegação deverão ser óbvios, se suscitarem dúvidas é preferívelsubstituí-los por texto, ou acompanhá-los por texto.

INTERFACEINTERFACEINTERFACEINTERFACEINTERFACE

- Cada página deve ter uma legenda diferentelegenda diferentelegenda diferentelegenda diferentelegenda diferente, de acordo com o tema, que apare-ce na margem superior do browser;

- Cada página não deve ultrapassar os 70 Kbnão deve ultrapassar os 70 Kbnão deve ultrapassar os 70 Kbnão deve ultrapassar os 70 Kbnão deve ultrapassar os 70 Kb, para que apareça rapidamente;

- Não esconder o endereço de uma hiperligação que aparece em rodapéendereço de uma hiperligação que aparece em rodapéendereço de uma hiperligação que aparece em rodapéendereço de uma hiperligação que aparece em rodapéendereço de uma hiperligação que aparece em rodapé, sempreo rato está sobre ela;



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

OUTROSOUTROSOUTROSOUTROSOUTROS

- O site pode ter um formulário ter um formulário ter um formulário ter um formulário ter um formulário para que os utilizadores possam: enviar uma men-sagem ao autor do site; escrever algumas opiniões sobre um tema pré-definido;responder a um questionário sobre um tema;

- O site pode ter um fórum ter um fórum ter um fórum ter um fórum ter um fórum com um tema pertinente;

- O site deve ter um pesquisador interno ter um pesquisador interno ter um pesquisador interno ter um pesquisador interno ter um pesquisador interno para facilitar a pesquisa;

- A página do lado esquerdo da frame, ou shared border página do lado esquerdo da frame, ou shared border página do lado esquerdo da frame, ou shared border página do lado esquerdo da frame, ou shared border página do lado esquerdo da frame, ou shared border (o menu) deve estartotalmente observável, deste modo, evita-se de ter a barra de deslocamento vertical;

- A página do lado direito da frame página do lado direito da frame página do lado direito da frame página do lado direito da frame página do lado direito da frame (a primeira a aparecer) deve estar 90%observável. Ao deslocar para baixo a barra de navegação vê-se informações com-plementares, tais como o contador ou a data;

- O site deverá ter um contador na páginaum contador na páginaum contador na páginaum contador na páginaum contador na página principal para informar o webmaster eos utilizadores da frequência e quantidade de utilizadores que a consultam;

- Inserir uma data de produção uma data de produção uma data de produção uma data de produção uma data de produção em cada página de modo a servir de indicadorsobre a actualidade da informação nela contida;

- No final da página inicial deverá estar visível o contacto com ligação directa aocorreio electrónico do responsável pela produção do site.

- Evitar finais de páginas das quais não seja possível sair. As barras de navegaçãodevem surgir no final de todas as páginas permitindo redireccionar o utilizador paraoutras páginas, nomeadamente para a página inicial.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Os dez maiores erros em Web DesignOs dez maiores erros em Web DesignOs dez maiores erros em Web DesignOs dez maiores erros em Web DesignOs dez maiores erros em Web Design

-Utilização de quadros-Utilização de quadros-Utilização de quadros-Utilização de quadros-Utilização de quadros----- Uma página dividida em quadros é muito confusa para osutilizadores, uma vez que os quadros vão contra o modelo fundamental de umapágina web. Não se pode ao mesmo tempo marcar a página corrente e voltar aesta, os URL’s param de trabalhar e as impressões tornam-se difíceis. Aprevisibilidade da reacção dos utilizadores deixa de fazer sentido quando estes nãosabem que informação será disponibilizada quando clicam num link, ou se entramem looping dentro da própria página.

-Utilização gratuita da tecnologia mais avançada- Utilização gratuita da tecnologia mais avançada- Utilização gratuita da tecnologia mais avançada- Utilização gratuita da tecnologia mais avançada- Utilização gratuita da tecnologia mais avançada- Não se deve atrair osutilizadores para um site, fazendo menção de que utiliza a última tecnologia web.Pode atrair alguns fanáticos pela informática, mas a maioria dos utilizadores pres-tam mais atenção aos conteúdos e à possibilidade do site oferecer um bom serviço.Utilizar a melhor e última tecnologia mesmo antes de ser lançada no mercado irácertamente desencorajar os utilizadores: se os seus sistemas forem abaixo enquantovisitam o site, pode-se apostar que muitos deles não voltarão a consultar o site. Anão ser que se comercialize produtos ou serviços na net, torna-se mais favorávelaguardar até que se obtenha experiência relativamente à forma mais apropriada deutilizar essas técnicas. Quando apareceu o desktop as pessoas colocaram vintefontes nos seus documentos, logo há que evitar que aconteça uma situação similarrelativamente à web.

-TTTTTexto, marcas e constantes animações em movimentoexto, marcas e constantes animações em movimentoexto, marcas e constantes animações em movimentoexto, marcas e constantes animações em movimentoexto, marcas e constantes animações em movimento- - - - - Nunca se deve incluirnuma página elementos que se movam incessantemente. As imagens em movimentotêm um efeito nefasto na visão dos humanos. A página web deve dar ao utilizadoralguma paz e serenidade para que este possa efectivamente ler o texto.

-URLURLURLURLURL’s complexas’s complexas’s complexas’s complexas’s complexas- - - - - As URL’s nunca devem estar expostas no interface do utilizador, éprevisível que os utilizadores tentem descodificar as URL’s das páginas para percebera estrutura do site. Os utilizadores tomam esta atitude devido à grande falta deapoio na navegação e sentido de orientação no browser corrente. Então, a URLdeve conter directorias de leitura acessível aos utilizadores e nomes que reflictam anatureza da informação contida no site.

-Páginas solitáriasPáginas solitáriasPáginas solitáriasPáginas solitáriasPáginas solitárias- - - - - Assegurar que todas as páginas incluem uma clara indicaçãode qual o website a que pertencem, uma vez que os utilizadores podem aceder apáginas directamente, sem ter de passar pela página inicial. Pela mesma razão,todas as páginas deverão ter um link para a página inicial, bem como algumaindicação sobre a sua localização dentro da estrutura do site.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

-Páginas com longos textos corridosPáginas com longos textos corridosPáginas com longos textos corridosPáginas com longos textos corridosPáginas com longos textos corridos- - - - - Apenas 10% dos utilizadores, acedem àinformação que está disponível para além da que está visível no ecrã quando surgea página. Todos os conteúdos importantes e opções de navegação devem estar notopo da página.

-FFFFFalta de suporte à navegação - alta de suporte à navegação - alta de suporte à navegação - alta de suporte à navegação - alta de suporte à navegação - Nunca se deve assumir que os utilizadores sabemtanto acerca do site como o designer. Eles têm sempre dificuldade em encontrarinformação, logo necessitam de suporte no que diz respeito à sua estrutura e locali-zação. Começar o design com uma boa compreensão da estrutura espacial dainformação e comunicar explicitamente essa estrutura ao utilizador. Disponibilizar omapa do site para que os utilizadores saibam onde estão e para onde se podemencaminhar. É necessário, também, um bom motor de busca, uma vez que o melhorde navegação nunca é suficiente.

-Cores não Cores não Cores não Cores não Cores não StandardStandardStandardStandardStandard nos nos nos nos nos LinksLinksLinksLinksLinks - - - - - Os links que não tenham sido utilizados devem serazuis; os links para páginas que tenham sido anteriormente visitadas devem serpúrpura ou vermelhos. Não se deve misturar estas cores, uma vez que a possibilida-de de perceber quais os links que já foram utilizados é uma das poucas ajudas paraa navegação e é standard na maioria dos browsers. A consistência é a chave paraensinar aos utilizadores o significado das cores dos links.

-Informação desactualizada-Informação desactualizada-Informação desactualizada-Informação desactualizada-Informação desactualizada- É necessário contratar um “jardineiro” web para fazerparte da equipa, torna-se necessário que alguém retire as “ervas daninhas” e plantenovamente “flores” enquanto o website se altera, mas a maioria das pessoas prefe-rem criar novos conteúdos em detrimento da manutenção do site. Na prática, amanutenção do site é uma forma barata de realçar o conteúdo do website uma vezque muitas das páginas antigas mantém a sua relevância e devem ter um link paranovas páginas. Claro que algumas páginas deverão ser totalmente removidas doserver uma vez que se tornam obsoletas.

-Downloads-Downloads-Downloads-Downloads-Downloads demorados demorados demorados demorados demorados- - - - - Este erro é referido em último lugar porque muitas pesso-as já têm conhecimento sobre o mesmo; e não por ser menos importante. As pre-missas tradicionais indicam um máximo de resposta de10 segundos até que osutilizadores percam interesse. Na web, os utilizadores têm sido treinados para supor-tar tanto sofrimento que se torna aceitável aumentar esse limite para 15 segundosnalgumas páginas.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

1.2. Planear o 1.2. Planear o 1.2. Planear o 1.2. Planear o 1.2. Planear o web siteweb siteweb siteweb siteweb site

Antes de se iniciar a construção de uma página é importante proceder-se a um pla-pla-pla-pla-pla-neamento:neamento:neamento:neamento:neamento:

1. Objectivos (o que se pretende fazer; o que se pretende atingir )

2. Audiência (a quem se destina)

3. Concorrência (avaliação de outras páginas concorrentes)

4. Conteúdos (conteúdos estáticos; dinâmicos; funcionais e transaccionais; relacio-nados e categorizados)

5.Estrutura (mapa a partir do qual se tenha a percepção o mais exacta e lógicapossível das várias páginas, como se relacionam entre si)

Tipos de Páginas:Tipos de Páginas:Tipos de Páginas:Tipos de Páginas:Tipos de Páginas:

- Páginas P- Páginas P- Páginas P- Páginas P- Páginas Pessoaisessoaisessoaisessoaisessoais

Objectivos: partilhar informação pessoal

Audiência: alunos, colegas, amigos, etc

- Páginas Comerciais- Páginas Comerciais- Páginas Comerciais- Páginas Comerciais- Páginas Comerciais

Objectivos: Proporcionar novos negócios, vender produtos, fornecer informações, etc

Audiência: clientes, etc.

- Páginas Informativas- Páginas Informativas- Páginas Informativas- Páginas Informativas- Páginas Informativas

Objectivos: transmitir informações

Audiência: público em geral



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Estrutura da páginaEstrutura da páginaEstrutura da páginaEstrutura da páginaEstrutura da página

Uma vez conhecidos os objectivos e a audiência da página, é altura de ver comovamos apresentar a informação. Criamos então um diagrama com a estrutura daspáginas, agrupadas por tópicos.

Exemplo:

Depois de termos as páginas construídas, devemos guardá-las em pastas, portópicos.

Por exemplo criamos uma pasta para todas as imagens, outra para documentos, etc.

Index. htmlIndex. htmlIndex. htmlIndex. htmlIndex. html

PPPPProdutosrodutosrodutosrodutosrodutos EmpresaEmpresaEmpresaEmpresaEmpresa NotíciasNotíciasNotíciasNotíciasNotícias ExposiçãoExposiçãoExposiçãoExposiçãoExposição ContactosContactosContactosContactosContactos

PáginaPáginaPáginaPáginaPáginaPPPPPrincipalrincipalrincipalrincipalrincipal

ExposiçãoExposiçãoExposiçãoExposiçãoExposiçãodo Pdo Pdo Pdo Pdo Produto 1roduto 1roduto 1roduto 1roduto 1

ExposiçãoExposiçãoExposiçãoExposiçãoExposiçãodo Pdo Pdo Pdo Pdo Produto 2roduto 2roduto 2roduto 2roduto 2



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

1.3.Conceber 1.3.Conceber 1.3.Conceber 1.3.Conceber 1.3.Conceber web sites web sites web sites web sites web sites para diferentes suportespara diferentes suportespara diferentes suportespara diferentes suportespara diferentes suportes

1.3.1.Servidores Linux e Windows1.3.1.Servidores Linux e Windows1.3.1.Servidores Linux e Windows1.3.1.Servidores Linux e Windows1.3.1.Servidores Linux e Windows

Um servidor web ou servidor http é um computador que disponibiliza informação,sob a forma de páginas web, através da rede, aos computadores clientes. Paraimplementar um servidor web é necessário instalar software específico como o IIS daMicrosoft para o Windows e o Apache, open source tanto para linux como para oWindows. O quadro 1 mostra a distribuição do software de servidor web, de acordocom as plataformas suportadas.

A maioria dos servidores web são implementados com os softwares Apache ou IIS.O seguinte quadro apresenta as características funcionais de cada um destes.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

1.3.2.Os diferentes browsers1.3.2.Os diferentes browsers1.3.2.Os diferentes browsers1.3.2.Os diferentes browsers1.3.2.Os diferentes browsers

BrowersBrowersBrowersBrowersBrowers - aplicação que permite consultar páginas de informação disponíveis emservidores ligados em rede, seja esta a Internet, uma rede doméstica ou empresari-al.

Tim Berners-Lee, que foi um dos pioneiros no uso do hipertexto como forma decompartilhar informações, criou o primeiro browser, designado por WorldWideWeb,em 1990, e introduziu-o como ferramenta entre os seus colegas do CERN em Marçode 1991. Desde então, o desenvolvimento dos browsers tem sido intrinsecamenteligado ao desenvolvimento da própria Web.

A Web, entretanto, só explodiu realmente em popularidade com a introdução doNCSA Mosaic, que era um browser gráfico (em oposição a browsers de modo texto)que funcionava originalmente no Unix, funcionando posteriormente no Macintosh eMicrosoft Windows. Marc Andreesen, o líder do projecto Mosaic na NCSA, demitiu-se para formar a companhia que seria conhecida mais tarde como NetscapeCommunications Corporation.

A Netscape lançou o seu produto líder Navigator em Outubro de 1994, e estetornou-se o mais popular browser no ano seguinte. A Microsoft, que até então haviaignorado a Internet, entrou na briga com o seu Internet Explorer, comprado àspressas da Splyglass Inc. Isso marcou o começo da Guerra dos browsers, que foi aluta pelo mercado dessas aplicações entre a gigante Microsoft e a companhia me-nor largamente responsável pela popularização da Web, a Netscape.

Tanto a Microsoft como a Netscape deliberadamente incluíram extensões proprietá-rias ao HTML nos seus produtos, e tentaram ganhar superioridade no mercadoatravés dessa diferenciação. A disputa terminou em 1998 quando ficou claro que atendência no declínio do domínio de mercado por parte da Netscape erairreversível. Isso aconteceu, em parte, pelas acções da Microsoft no sentido deintegrar o browser com o sistema operativo e o empacotamento do mesmo comoutros produtos por meio de acordos OEM;

A Netscape respondeu tornando livre o seu produto como código aberto, criando oMozilla. O efeito foi simplesmente acelerar o declínio da companhia, por causa deproblemas com o desenvolvimento do novo produto. A companhia acabou sendocomprada pela AOL no fim de 1998.

O Opera, um navegador rápido e pequeno, popular principalmente em computado-res portáteis e em alguns países da Europa, foi lançado em 1996 .

O Lynx browser permanece popular em certos mercados devido à sua naturezacompletamente textual.

Apesar do mercado para o Macintosh ter sido tradicionalmente dominado peloInternet Explorer e Netscape, o futuro parece pertencer ao próprio navegador daApple, o Safari, que é baseado no mecanismo de renderização KHTML, parte dobrowser de código aberto Konqueror. O Safari é o navegador padrão do Mac OS X.

Em 2003, a Microsoft anunciou que o Internet Explorer não seria maisdisponibilizado como um produto separado mas seria parte da evolução da plata-forma Windows, e que nenhuma versão nova para o Macintosh seria criada.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Mozilla FMozilla FMozilla FMozilla FMozilla Firefoxirefoxirefoxirefoxirefox (inicialmente conhecido como Phoenix e, posteriormente, comoMozilla Firebird) é um browser livre e multiplataformadesenvolvido pela Mozilla Corporation com ajuda decentenas de colaboradores.

O Firefox tem se destacado como uma alternativa aoMicrosoft Internet Explorer. Em abril de 2005, estima-va-se que a margem de uso do Firefox estivesse porvolta de 25%. O Firefox está a reduzir, de formasignificativa, o uso do Internet Explorer e reactivou a“Guerra dos browsers”.

O OperaOperaOperaOperaOpera é um browser criado em 1994 pela empresa estatal de telecomunicaçõesda Noruega e foi a primeira alternativa leve para os utilizadores. Recentementeperdeu seu posto de “browser alternativo” para o Mozilla Firefox (a versão “light”do Mozilla), conta porém ainda com uma fiel comunidade de utilizadores.

O Internet ExplorerInternet ExplorerInternet ExplorerInternet ExplorerInternet Explorer, também conhecido como IEIEIEIEIE ou MSIEMSIEMSIEMSIEMSIE, é um browser de licençaproprietária produzido inicialmente pela Microsoft em 23 de agosto de 1995. É delonge o browser mais usado actualmente (2005) uma vez que é distribuído em cadaversão do sistema operativo Windows, porém desde 2004 vem perdendo espaçopara outros browsers. Em abril de 2005, a percentagem de utilizadores do IE é de85%.

O Internet Explorer é um componente integrado dasversões mais recentes do Microsoft Windows. Está dis-ponível como um produto grátis e separado para asversões mais antigas do sistema operativo. Acompanhao Windows desde a versão 95 OSR2. No entanto, aúltima grande actualização do browser só foi oferecidaaos utilizadores do Windows XP junto do Service Pack 2.

KKKKKonqueroronqueroronqueroronqueroronqueror faz parte do K Desktop EnvironmentK Desktop EnvironmentK Desktop EnvironmentK Desktop EnvironmentK Desktop Environment (KDE)- ambiente Linux. Funcionacomo um web browser ou até como um visualizador de ficheiros.

O lynxlynxlynxlynxlynx é um browser web que mostra apenas texto,ideal para sistemas baseados em console ou compoucos recursos gráficos. Acompanha diversas distri-buições de sistemas POSIX (Unix, Linux, etc) e tambémo VMS. Também existem versões para sistemas daMicrosoft, como o MS-DOS e as variantes doWindows.



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

2. Editores de páginas 2. Editores de páginas 2. Editores de páginas 2. Editores de páginas 2. Editores de páginas webwebwebwebweb

Os editores de páginas web são programas desenvolvidos para permitirem aoutilizador criar websites e páginas da web. Existem editores do tipo WYSIWYG ouHTML.

2.1.Editores 2.1.Editores 2.1.Editores 2.1.Editores 2.1.Editores WYSIWYGWYSIWYGWYSIWYGWYSIWYGWYSIWYG

Os editores WYSIWYG (What You See Is What You Get) são programas de autorpara a criação e edição de websites que permitam ver, na sua janela, o aspectocom que o site vai ser apresentado após a sua publicação. Estes editores permitemao utilizador, de uma forma acessível e sem dominar uma linguagem de programa-ção, desenvolver websites com aparência profissional. Todo o código necessário aofuncionamento do website é autocamaticamente criado sem que o utilizador seaperceba.

Editores WYSIWYG: Frontpage, Dreamweaver, Easy Website Pro, BlueVoda,CoffeCup.

Frontpage

Easy Website Pro

Dreamweaver

CoffeCup



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

2.2.Editores HTML2.2.Editores HTML2.2.Editores HTML2.2.Editores HTML2.2.Editores HTML

Os editores HTML podem ser classificados como ferramentas de autor de páginasweb. Estes editores são essencialmente editores de texto, embora alguns apresentemfuncionalidades acrescidas, como a criação automática de código, a inserção decódigo de outras linguagens de programação e a pré-visualização da página.

A utilização dos editores de HTML implica um conhecimento prévio da sintaxe dalinguagem HTML.

Editores HTML: bloco de notas; HotDog; Visual Workshop; Crimson Editor, SiteBuilder; tsWebEditor e o LightPad.

bloco de notas

HotDog

VisualWorkshop Crimson Editor

Site Builder tsWebEditor LightPad



Esco

la S

ecun

dária

S. J

oão

do E

stor

il

Bibliografia:Bibliografia:Bibliografia:Bibliografia:Bibliografia:

Livros:

- Figueiredo, Bruno.Web Design - Estrutura, concepção e profução de sitesWeb. FCA – Editora de informática.

- Fonseca, Dalila; Pacheco, Deolinda; Marques, Fernando; Soares, Ricardo.Aplicações Informáticas A - Curso Tecnológico de Informática - 11º Ano.Porto Editora.

Páginas da web:

http://pt.wikipedia.org/wiki/Página_principal

http://www.searasoft.com/downloads/ficheiros/usabilidade.pdf

http://www.w3.org/Consortium/Overview

http://www.mediadellarte.com/digitalbureau/gloss_main.html

http://iscte.pt/Marketing/webdesign/index.htm

Unidade 4 – Concepção de web sites. Subunidade 1 - Fundamentos · 2012-10-19 · Recentemente...

Documents

Transcript of Unidade 4 – Concepção de web sites. Subunidade 1 - Fundamentos · 2012-10-19 · Recentemente...