7 - Criação de Páginas 7 - Criação de Páginas WebWeb

A InternetA Internet

A InternetA Internet Empresas, instituições e pessoas individuais estão cada Empresas, instituições e pessoas individuais estão cada

vez mais interessadas não só em aceder ao imenso vez mais interessadas não só em aceder ao imenso manancial de informação disponibilizado pela Internet manancial de informação disponibilizado pela Internet mas também em oferecer a sua própria informação a mas também em oferecer a sua própria informação a muitas outras pessoas. Criar páginas Web torna-se, muitas outras pessoas. Criar páginas Web torna-se, pois, uma inevitabilidade.pois, uma inevitabilidade.

A InternetA Internet Criar uma página Web permite gerar um ambiente com muitas Criar uma página Web permite gerar um ambiente com muitas

potencialidades, onde é possível:potencialidades, onde é possível:mostrar um estilo estético próprio, personalizado e oportuno;mostrar um estilo estético próprio, personalizado e oportuno;promover a pesquisa de informação;promover a pesquisa de informação;promover produtos e serviços;promover produtos e serviços;estimular com interfaces próprias a troca de textos, imagens, estimular com interfaces próprias a troca de textos, imagens,

sons, etc.;sons, etc.; fornecer informação filtrada, seleccionada e comentada;fornecer informação filtrada, seleccionada e comentada;criar contextos propícios ao ensino à distância;criar contextos propícios ao ensino à distância;estimular compras, trocas e vendas;estimular compras, trocas e vendas;criar «espaços virtuais» onde se pode conversar, ver e ouvir criar «espaços virtuais» onde se pode conversar, ver e ouvir

outras pessoas em tempo real;outras pessoas em tempo real;consultar «grupos de estudo»;consultar «grupos de estudo»;criar ferramentas para trabalhar cooperativamente com outras criar ferramentas para trabalhar cooperativamente com outras

pessoas;pessoas;etc.etc.

7 - Criação de Páginas 7 - Criação de Páginas WebWeb

Técnicas de implantaçãoTécnicas de implantação

Programação páginas WebProgramação páginas Web

Para se criar uma página Web, terá de se usar Para se criar uma página Web, terá de se usar uma das seguintes linguagens de programação:uma das seguintes linguagens de programação:

LinguagemLinguagem CaracterísticasCaracterísticas

HTMLHTML HHyperyperTText ext MMarkup arkup LLanguageanguage: linguagem de marcação com hipertexto (documento com palavras ou : linguagem de marcação com hipertexto (documento com palavras ou imagens que permitem «saltar» para outras páginas com o clique do rato), usada para criar imagens que permitem «saltar» para outras páginas com o clique do rato), usada para criar documentos para a Web.documentos para a Web.

DHTMLDHTML DDynamic ynamic HTMLHTML: linguagem de HTML dinâmico, que inclui recursos interactivos para criar páginas : linguagem de HTML dinâmico, que inclui recursos interactivos para criar páginas Web. Utilizam-se cada vez mais scripts de linguagens de programação. O JavaScript é um bom Web. Utilizam-se cada vez mais scripts de linguagens de programação. O JavaScript é um bom exemplo.exemplo.

VRMLVRML ViVirtual rtual RReality eality MModeling odeling LLanguageanguage: linguagem para modelação de realidade virtual, que permite, : linguagem para modelação de realidade virtual, que permite, através de elementos geométricos, apresentar ambientes tridimensionais ou virtuais.através de elementos geométricos, apresentar ambientes tridimensionais ou virtuais.

Para ver páginas em VRML é necessário um plug-in (aplicação simples a instalar no computador Para ver páginas em VRML é necessário um plug-in (aplicação simples a instalar no computador «cliente» para manipular informação em determinado formato).«cliente» para manipular informação em determinado formato).

XMLXML EEXXtensible tensible MMarkup arkup LLanguageanguage: linguagem de marcação de dados que prevê um formato para descrever : linguagem de marcação de dados que prevê um formato para descrever dados estruturados e facilita declarações mais precisas do conteúdo e resultados mais significativos de dados estruturados e facilita declarações mais precisas do conteúdo e resultados mais significativos de busca através de múltiplas plataformas. Enquanto o HTML permite descrever a aparência dos dados, o busca através de múltiplas plataformas. Enquanto o HTML permite descrever a aparência dos dados, o XML permite definir o significado dos dados.XML permite definir o significado dos dados.

Editores de página WebEditores de página Web

Há duas formas de criar documentos para Há duas formas de criar documentos para a Web: a Web:

1.1. Inserir o conteúdo (textos, imagens, sons, Inserir o conteúdo (textos, imagens, sons, etc.) e formatá-lo através dos códigos de etc.) e formatá-lo através dos códigos de formatação e marcação HTML.formatação e marcação HTML.

2.2. Utilizar um editor WYSIWYG (Utilizar um editor WYSIWYG (What You See What You See Is What You GetIs What You Get – o que se vê é o que – o que se vê é o que obtém), o que permite inserir o conteúdo de obtém), o que permite inserir o conteúdo de forma gráfica, ficando a escrita dos códigos forma gráfica, ficando a escrita dos códigos a cargo do editor.a cargo do editor.

Editores de imagem e efeitos Editores de imagem e efeitos especiaisespeciais

A Web baseia-se na combinação de textos, A Web baseia-se na combinação de textos, imagens e outros componentes de forma imagens e outros componentes de forma coerente, racional e estética.coerente, racional e estética.

Existem vários editores de imagens, como por Existem vários editores de imagens, como por exemplo, o exemplo, o Corel DrawCorel Draw, o JASC , o JASC Paint Shop ProPaint Shop Pro e o e o Adobe PhotoshopAdobe Photoshop, que são programas que , que são programas que permitem manipular imagens ou fotografias, permitem manipular imagens ou fotografias, usando ferramentas poderosas.usando ferramentas poderosas.

Editores de programas de Editores de programas de animação gráficaanimação gráfica

Para criar animações existem vários Para criar animações existem vários programas, como por exemplo:programas, como por exemplo:

1.1. O O Macromedia Studio MX2004 with Flash ProfissionalMacromedia Studio MX2004 with Flash Profissional é é um programa de tratamento de animação vectorial. um programa de tratamento de animação vectorial. Permite criar animações interactivas para a Web;Permite criar animações interactivas para a Web;

2.2. O O GIF AnimatorGIF Animator é um programa que visa a produção de é um programa que visa a produção de imagens animadas. Permite manipular imagens com imagens animadas. Permite manipular imagens com formato GIF;formato GIF;

3.3. O O COOL 3DCOOL 3D é um programa que gera animações a três é um programa que gera animações a três dimensões (3D) como esferas, cubos, cones, etc.dimensões (3D) como esferas, cubos, cones, etc.

Ferramentas e utilitáriosFerramentas e utilitários

Depois de criarmos uma página Web no Depois de criarmos uma página Web no nosso computador, ela só se torna nosso computador, ela só se torna acessível ao Mundo se a colocarmos num acessível ao Mundo se a colocarmos num computador servidor, ao qual computador servidor, ao qual corresponderá um determinado endereço, corresponderá um determinado endereço, ou URL (Uniform Resource Locator).ou URL (Uniform Resource Locator).

Ferramentas e utilitáriosFerramentas e utilitários O Protocolo para Transferência de Ficheiros (FTP, File O Protocolo para Transferência de Ficheiros (FTP, File

Transfer Protocol) é o protocolo que define a forma de Transfer Protocol) é o protocolo que define a forma de enviar ficheiros pela Internet. Para publicar um site na enviar ficheiros pela Internet. Para publicar um site na Web existem diversas ferramentas, como por exemplo o Web existem diversas ferramentas, como por exemplo o WSFTP e o CuteFTP. Estes programas permitem WSFTP e o CuteFTP. Estes programas permitem «verter» informação de um computador para um «verter» informação de um computador para um servidor (computador que armazena um site e que o servidor (computador que armazena um site e que o mantém disponível na Web). Para transferir um site para mantém disponível na Web). Para transferir um site para um servidor, é preciso a identificação de utilizador e um servidor, é preciso a identificação de utilizador e palavra-passe. O explorador do Windows executa FTP palavra-passe. O explorador do Windows executa FTP directamente, sem necessidade de recorrer a outro directamente, sem necessidade de recorrer a outro software específicosoftware específico

Criação de páginas WebCriação de páginas Web A seguir indicam-se os princípios gerais a ter em conta quando A seguir indicam-se os princípios gerais a ter em conta quando

se cria uma página para a Web: se cria uma página para a Web: 1.1. A A página de entradapágina de entrada: : é frequente ser de apresentação é frequente ser de apresentação

institucional. No topo poderá aparecer o logotipo, nome, institucional. No topo poderá aparecer o logotipo, nome, endereço, números de telefone, etc.; no rodapé, a data da endereço, números de telefone, etc.; no rodapé, a data da última actualização, o contacto do responsável pela página e última actualização, o contacto do responsável pela página e o número de utilizadores que acederam à página.o número de utilizadores que acederam à página.

2.2. FontesFontes: : devem escolher-se fontes como o Arial e o Verdana devem escolher-se fontes como o Arial e o Verdana para visualizações no ecrã e o Times New Roman para para visualizações no ecrã e o Times New Roman para impressões. Relativamente ao tamanho, os mais adequados impressões. Relativamente ao tamanho, os mais adequados são: 2 (10 pontos) para texto, 3 (12 pontos) para subtítulos e são: 2 (10 pontos) para texto, 3 (12 pontos) para subtítulos e 4 (14 pontos) para títulos.4 (14 pontos) para títulos.

3.3. Cores:Cores: deve existir contraste entre o fundo e o texto. Além deve existir contraste entre o fundo e o texto. Além disso, devem usar-se cores da paleta Web de 216 cores, de disso, devem usar-se cores da paleta Web de 216 cores, de modo a garantir que a cor é sempre igual em qualquer modo a garantir que a cor é sempre igual em qualquer computador e resolução. Não se deve usar um número computador e resolução. Não se deve usar um número excessivo de cores.excessivo de cores.

Criação de páginas WebCriação de páginas Web

4.4. ImagensImagens: apresentá-las com o mínimo tamanho (em bytes) : apresentá-las com o mínimo tamanho (em bytes) possível. Optimizar a imagem, de preferência, nos formatos possível. Optimizar a imagem, de preferência, nos formatos JPG, GIF e PNG. Não se deve abusar de GIF animados.JPG, GIF e PNG. Não se deve abusar de GIF animados.

5.5. Vídeo e áudioVídeo e áudio: deve incluir-se sempre o tamanho dos : deve incluir-se sempre o tamanho dos ficheiros e indicar o plug-in necessário para ver / ouvir / ficheiros e indicar o plug-in necessário para ver / ouvir / manipular o ficheiro.manipular o ficheiro.

6.6. Molduras:Molduras: usar no caso de haver conteúdos fixos e de usar no caso de haver conteúdos fixos e de controlo de navegação.controlo de navegação.

7.7. TabelasTabelas: no Word, a largura disponível para o texto é fixa e : no Word, a largura disponível para o texto é fixa e depende da largura da página. No FrontPage a largura depende da largura da página. No FrontPage a largura depende da resolução do ecrã de quem visualiza a página, depende da resolução do ecrã de quem visualiza a página, pelo que o texto ajustar-se-á até ocupar toda a largura, pelo que o texto ajustar-se-á até ocupar toda a largura, originando desformatações frequentes. As tabelas com bordo originando desformatações frequentes. As tabelas com bordo 0 (zero) são excelentes para fixar larguras e/ou comprimentos, 0 (zero) são excelentes para fixar larguras e/ou comprimentos, pelo que devem ser usadas para misturar imagens e texto.pelo que devem ser usadas para misturar imagens e texto.

Planeamento de umPlaneamento de umweb siteweb site

Antes de iniciar a criação de um site para Antes de iniciar a criação de um site para a Web, é necessário planeá-lo. a Web, é necessário planeá-lo. Deve começar-se por Deve começar-se por determinar objectivosdeterminar objectivos, ,

respondendo à questão «O que pretende o site?».respondendo à questão «O que pretende o site?». É importante É importante caracterizar quem visitarácaracterizar quem visitará o site: «Que o site: «Que

computadores utilizará?; Que velocidade de ligação à computadores utilizará?; Que velocidade de ligação à Internet terá?» As respostas a perguntas como estas Internet terá?» As respostas a perguntas como estas condicionarão a complexidade da estrutura de condicionarão a complexidade da estrutura de navegação, a possibilidade de utilizar recursos como navegação, a possibilidade de utilizar recursos como vídeo e/ou som, o tamanho das páginas, a vídeo e/ou som, o tamanho das páginas, a necessidade de plug-ins e o grafismo utilizado.necessidade de plug-ins e o grafismo utilizado.

Planeamento de umPlaneamento de umweb siteweb site

Determinar e organizar o site por secções de visualizaçãoDeterminar e organizar o site por secções de visualização, , colocando na mesma pasta as páginas relacionadas. Sempre que colocando na mesma pasta as páginas relacionadas. Sempre que for adequado, utilizar subpastas. for adequado, utilizar subpastas.

Decidir previamente onde serão armazenados todos os itensDecidir previamente onde serão armazenados todos os itens, , como imagens e ficheiros de som. É conveniente colocar todas as como imagens e ficheiros de som. É conveniente colocar todas as imagens de uma secção numa única pasta, para facilitar a imagens de uma secção numa única pasta, para facilitar a localização. localização.

Desenhar em papel, esquematicamente, a aparência e a Desenhar em papel, esquematicamente, a aparência e a organização das páginasorganização das páginas, de modo a manter uma certa , de modo a manter uma certa coerência no aspecto e na navegação. Uma abordagem mais coerência no aspecto e na navegação. Uma abordagem mais avançada seria criar um desenho digital do site, utilizando avançada seria criar um desenho digital do site, utilizando aplicações como o aplicações como o Macromedia FreeHandMacromedia FreeHand, por exemplo., por exemplo.

Criar mecanismos e sinalética que indiquem em que parte do Criar mecanismos e sinalética que indiquem em que parte do site o utilizador estásite o utilizador está (utilizar, por exemplo, índices e motores de (utilizar, por exemplo, índices e motores de busca internos). busca internos).

Reunir antecipadamente todos os recursosReunir antecipadamente todos os recursos (imagens, sons, (imagens, sons, etc.) que vão integrar as páginas antes de as começar a construir, etc.) que vão integrar as páginas antes de as começar a construir, evitando a interrupção constante do desenvolvimento do site.evitando a interrupção constante do desenvolvimento do site.