7 - Criao de Pginas Web

A Internet

7 Criao de Pginas Web

A Internet
Empresas, instituies e pessoas individuais esto cada vez mais interessadas no s em aceder ao imenso manancial de informao disponibilizado pela Internet mas tambm em oferecer a sua prpria informao a muitas outras pessoas. Criar pginas Web torna-se, pois, uma inevitabilidade.

7 Criao de Pginas Web

A Internet
Criar uma pgina Web permite gerar um ambiente com muitas potencialidades, onde possvel:
mostrar um estilo esttico prprio, personalizado e oportuno; promover a pesquisa de informao; promover produtos e servios; estimular com interfaces prprias a troca de textos, imagens, sons, etc.; fornecer informao filtrada, seleccionada e comentada; criar contextos propcios ao ensino distncia; estimular compras, trocas e vendas; criar espaos virtuais onde se pode conversar, ver e ouvir outras pessoas em tempo real; consultar grupos de estudo; criar ferramentas para trabalhar cooperativamente com outras pessoas; etc.

7 - Criao de Pginas Web

Tcnicas de implantao

7 Criao de Pginas Web

Programao pginas Web

Para se criar uma pgina Web, ter de se usar uma das seguintes linguagens de programao:
Linguagem HTML Caractersticas HyperText Markup Language: linguagem de marcao com hipertexto (documento com palavras ou imagens que permitem saltar para outras pginas com o clique do rato), usada para criar documentos para a Web. Dynamic HTML: linguagem de HTML dinmico, que inclui recursos interactivos para criar pginas Web. Utilizam-se cada vez mais scripts de linguagens de programao. O JavaScript um bom exemplo. Virtual Reality Modeling Language: linguagem para modelao de realidade virtual, que permite, atravs de elementos geomtricos, apresentar ambientes tridimensionais ou virtuais. Para ver pginas em VRML necessrio um plug-in (aplicao simples a instalar no computador cliente para manipular informao em determinado formato). EXtensible Markup Language: linguagem de marcao de dados que prev um formato para descrever dados estruturados e facilita declaraes mais precisas do contedo e resultados mais significativos de busca atravs de mltiplas plataformas. Enquanto o HTML permite descrever a aparncia dos dados, o XML permite definir o significado dos dados.

DHTML VRML

XML

7 Criao de Pginas Web

Editores de pgina Web

H duas formas de criar documentos para a Web:
1. Inserir o contedo (textos, imagens, sons, etc.) e format-lo atravs dos cdigos de formatao e marcao HTML. 2. Utilizar um editor WYSIWYG (What You See Is What You Get o que se v o que obtm), o que permite inserir o contedo de forma grfica, ficando a escrita dos cdigos a cargo do editor.

7 Criao de Pginas Web

Editores de imagem e efeitos especiais

A Web baseia-se na combinao de textos, imagens e outros componentes de forma coerente, racional e esttica. Existem vrios editores de imagens, como por exemplo, o Corel Draw, o JASC Paint Shop Pro e o Adobe Photoshop, que so programas que permitem manipular imagens ou fotografias, usando ferramentas poderosas.

7 Criao de Pginas Web

Editores de programas de animao grfica

Para criar animaes existem vrios programas, como por exemplo:
1. O Macromedia Studio MX2004 with Flash Profissional um programa de tratamento de animao vectorial. Permite criar animaes interactivas para a Web; 2. O GIF Animator um programa que visa a produo de imagens animadas. Permite manipular imagens com formato GIF; 3. O COOL 3D um programa que gera animaes a trs dimenses (3D) como esferas, cubos, cones, etc.

7 Criao de Pginas Web

Ferramentas e utilitrios
Depois de criarmos uma pgina Web no nosso computador, ela s se torna acessvel ao Mundo se a colocarmos num computador servidor, ao qual corresponder um determinado endereo, ou URL (Uniform Resource Locator).

7 Criao de Pginas Web

Ferramentas e utilitrios
O Protocolo para Transferncia de Ficheiros (FTP, File Transfer Protocol) o protocolo que define a forma de enviar ficheiros pela Internet. Para publicar um site na Web existem diversas ferramentas, como por exemplo o WSFTP e o CuteFTP. Estes programas permitem verter informao de um computador para um servidor (computador que armazena um site e que o mantm disponvel na Web). Para transferir um site para um servidor, preciso a identificao de utilizador e palavrapasse. O explorador do Windows executa FTP directamente, sem necessidade de recorrer a outro software especfico

7 Criao de Pginas Web

Criao de pginas Web

A seguir indicam-se os princpios gerais a ter em conta quando se cria uma pgina para a Web:
1. A pgina de entrada: frequente ser de apresentao institucional. No topo poder aparecer o logotipo, nome, endereo, nmeros de telefone, etc.; no rodap, a data da ltima actualizao, o contacto do responsvel pela pgina e o nmero de utilizadores que acederam pgina. 2. Fontes: devem escolher-se fontes como o Arial e o Verdana para visualizaes no ecr e o Times New Roman para impresses. Relativamente ao tamanho, os mais adequados so: 2 (10 pontos) para texto, 3 (12 pontos) para subttulos e 4 (14 pontos) para ttulos. 3. Cores: deve existir contraste entre o fundo e o texto. Alm disso, devem usar-se cores da paleta Web de 216 cores, de modo a garantir que a cor sempre igual em qualquer computador e resoluo. No se deve usar um nmero excessivo de cores.

7 Criao de Pginas Web

Criao de pginas Web

4. Imagens: apresent-las com o mnimo tamanho (em bytes) possvel. Optimizar a imagem, de preferncia, nos formatos JPG, GIF e PNG. No se deve abusar de GIF animados. 5. Vdeo e udio: deve incluir-se sempre o tamanho dos ficheiros e indicar o plug-in necessrio para ver / ouvir / manipular o ficheiro. 6. Molduras: usar no caso de haver contedos fixos e de controlo de navegao. 7. Tabelas: no Word, a largura disponvel para o texto fixa e depende da largura da pgina. No FrontPage a largura depende da resoluo do ecr de quem visualiza a pgina, pelo que o texto ajustar-se- at ocupar toda a largura, originando desformataes frequentes. As tabelas com bordo 0 (zero) so excelentes para fixar larguras e/ou comprimentos, pelo que devem ser usadas para misturar imagens e texto.

7 Criao de Pginas Web

Planeamento de um web site

Antes de iniciar a criao de um site para a Web, necessrio plane-lo.
Deve comear-se por determinar objectivos, respondendo questo O que pretende o site?. importante caracterizar quem visitar o site: Que computadores utilizar?; Que velocidade de ligao Internet ter? As respostas a perguntas como estas condicionaro a complexidade da estrutura de navegao, a possibilidade de utilizar recursos como vdeo e/ou som, o tamanho das pginas, a necessidade de plug-ins e o grafismo utilizado.

7 Criao de Pginas Web

Planeamento de um web site

Determinar e organizar o site por seces de visualizao, colocando na mesma pasta as pginas relacionadas. Sempre que for adequado, utilizar subpastas. Decidir previamente onde sero armazenados todos os itens, como imagens e ficheiros de som. conveniente colocar todas as imagens de uma seco numa nica pasta, para facilitar a localizao. Desenhar em papel, esquematicamente, a aparncia e a organizao das pginas, de modo a manter uma certa coerncia no aspecto e na navegao. Uma abordagem mais avanada seria criar um desenho digital do site, utilizando aplicaes como o Macromedia FreeHand, por exemplo. Criar mecanismos e sinaltica que indiquem em que parte do site o utilizador est (utilizar, por exemplo, ndices e motores de busca internos). Reunir antecipadamente todos os recursos (imagens, sons, etc.) que vo integrar as pginas antes de as comear a construir, evitando a interrupo constante do desenvolvimento do site.

7 - Criao de Pginas Web

FrontPage Apresentao

7 Criao de Pginas Web

Apresentao
A partir do menu INICIAR, procurar a opo correspondente ao programa de edio de pginas FrontPage. Em alternativa, seleccionar o comando INICIAR Executar, digitar frontpg e pressionar a tecla Enter.

7 Criao de Pginas Web

Apresentao
O FrontPage um editor de pginas Web que permite construir as pginas no modo WYSIWYG (o que se v o que se obtm), ou seja, funciona como um tradutor entre a formatao/funcionalidades dos documentos Web e o cdigo HTML necessrio para o conseguir.

7 Criao de Pginas Web

Apresentao
O ambiente de trabalho do FrontPage, divide-se em quatro reas:
1.
1

2. 3. 4.

Menus e barras de ferramentas e de formatao Barra de vistas Painel de tarefas Lista de pastas/Painel de navegao

7 - Criao de Pginas Web

FrontPage Criao de um Web Site

7 Criao de Pginas Web

Criao de um Web Site

Para criar um novo Web site, h dois caminhos possveis:
1. Clicar no boto Novo, na barra de ferramentas padro, e escolher Web site De seguida, escolher um modelo, atribuir-lhe um nome e guard-lo numa unidade.

7 Criao de Pginas Web

Criao de um Web Site

2. Seleccionar FICHEIRO Novo. Escolher Web site de uma pgina, site da equipa SharePoint, solues de pacote web ou Mais modelos de Web site, do painel de tarefas e, por fim, seleccionar um dos modelos de Web site

7 - Criao de Pginas Web

FrontPage Gesto de um Web Site

7 Criao de Pginas Web

Gesto de um Web Site

O FrontPage possui ferramentas de gesto que o tornam um verdadeiro assistente de produo. Estas ferramentas incluem:
gesto de tarefas e ficheiros; relatrios; gesto de hiperligaes; segurana e controlo de origem.

A gesto de tarefas e ficheiros permite atribuir ficheiros e tarefas a desenvolver por uma pessoa ou por um grupo de trabalho.

7 Criao de Pginas Web

Gesto de um Web Site

Os relatrios permitem supervisionar o desenvolvimento de tarefas e fazer resumos do site, detectar problemas com pginas lentas ou ligaes quebradas, gerar estatsticas de visitas ao site, etc.

7 Criao de Pginas Web

Gesto de um Web Site

Sempre que se move ou elimina um ficheiro, o FrontPage actualiza automaticamente todas as hiperligaes relativas a esse ficheiro (gesto de hiperligaes).

7 Criao de Pginas Web

Gesto de um Web Site

O FrontPage permite que o administrador do site defina contas de utilizadores e respectivas funes e garante que cada ficheiro s pode ser editado por um utilizador de cada vez (segurana e controlo de origem).

7 - Criao de Pginas Web

FrontPage Gesto de pginas

7 Criao de Pginas Web

Criao
Para criar uma nova pgina de um site, escolher uma das seguintes opes:
1. 2. Clicar no boto Novo na barra de ferramentas padro e premir Pgina. FICHEIRO Novo Pgina ou Web e escolher, do Painel de tarefas, Novo Pgina em branco ou Novo a partir de um modelo de pgina.

7 Criao de Pginas Web

Abertura
Para abrir uma pgina existente, clicar no boto Abrir na barra de ferramentas padro ou seleccionar FICHEIRO Abrir.

7 Criao de Pginas Web

Guardar
Para guardar uma pgina, premir o boto Guardar ou seleccionar FICHEIRO Guardar. Para imprimir uma pgina, ver a pgina em modo Normal ou HTML e seleccionar FICHEIRO Imprimir. Depois, escolher as opes de impresso.

7 Criao de Pginas Web

Pr-visualizao
H duas formas de pr-visualizar um Web site:
1. Usar o browser interno, a partir do separador de modos.

7 Criao de Pginas Web

Pr-visualizao
2. Usar um browser externo, como o Internet Explorer ou oNetscape, a partir de FICHEIRO Pr-visualizar no browser. Este comando permite adicionar novos browsers, definir o tamanho da janela e activar, ou no, a guarda automtica de pginas antes da prvisualizao.

7 - Criao de Pginas Web

FrontPage Formatao e melhoramento da apresentao das pginas Web

7 Criao de Pginas Web

Adio de estilos de formatao

Tal como o Word, o FrontPage permite personalizar estilos de texto, bem como usar os que j vm definidos no programa. O estilo pode ser escolhido a partir da caixa de estilos da barra de formatao. Para ver, modificar ou adicionar estilos, escolher FORMATAR Estilos. O FrontPage permite optar entre Cdigos HTML e Estilos do utilizador.

7 Criao de Pginas Web

Tipo de letra
A formatao do texto pode ser feita usando as opes da barra de formatao, nomeadamente o estilo, o tipo de letra, o tamanho, o Negrito, Itlico e Sublinhado, o aumentar ou diminuir o tamanho de letra, etc. Se se pretender optar por outras cores ou por uma cor visvel no ecr, clicar em Mais cores, premir o comando Seleccionar e pressionar a rea que possui a cor pretendida. Por fim, premir OK. Para seleccionar mais opes de formatao, escolher FORMATAR Tipo de letra.

7 Criao de Pginas Web

Pargrafos
O FrontPage, tal como o Word, permite inserir:
quebra de linha (premir Shift + Enter), que provoca uma mudana de linha mas onde no h mudana de pargrafo; mudana de pargrafo (Enter).

As diferenas so visveis, por exemplo, na altura entre linhas e na aplicao de alinhamentos de pargrafos. No primeiro caso, como h um s pargrafo, s se pode ter um alinhamento. No segundo, podem aplicar-se diferentes alinhamentos ( esquerda, direita, centrado ou justificado).

7 Criao de Pginas Web

Marcas e numerao
Para formatar listas, seleccionar FORMATAR Marcas e numerao Propriedades da lista. Este comando permite escolher marcas de imagens e nmeros. Alm disso, permite fechar os itens dentro da lista, atravs da opo Permitir fechar destaques.

7 Criao de Pginas Web

Limites e sombreado
Este comando permite escolher uma imagem de padro de fundo, definir limites, cor, largura, rea, cor de fundo e de primeiro plano.

7 Criao de Pginas Web

Posio
Este comando s se encontra activo quando se selecciona uma imagem. Permite escolher um estilo de moldagem para combinar imagem e texto.

7 Criao de Pginas Web

Temas
A partir de FORMATAR Temas possvel escolher um tema a aplicar a todas as pginas ou apenas a pginas seleccionadas (para seleccionar vrias pginas abrir a lista de pastas e, enquanto se pressiona a tecla Ctrl, clicar com o rato no nome da pgina).

7 Criao de Pginas Web

Limites partilhados
Este comando permite definir barras de hiperligaes a aplicar a todas as pginas ou apenas pgina actual.

7 Criao de Pginas Web

Preenchimento de fundo
Esta opo s se encontra disponvel para pginas que no tenham tema. A partir de FORMATAR Preenchimento de fundo, possvel escolher:
uma imagem de fundo e aplicar-lhe marca de gua; efeitos rollover em hiperligaes, isto , quando o cursor do rato passar sobre a hiperligao, esta muda de cor e apresenta uma ligeira animao; alterar as cores do fundo, do texto e das hiperligaes; obter informaes do fundo a partir de outra pgina.

7 Criao de Pginas Web

Insero de imagens
O FrontPage permite inserir imagens de diferentes fontes: do ClipArt, a partir de um ficheiro, do scanner, de desenhos e formas automticas, do WordArt, a partir de vdeo, etc. A barra de ferramentas Imagens permite efectuar vrios tipos de operaes sobre imagens.

7 Criao de Pginas Web

Adio de som de fundo

Para se adicionar um som que se ouvir quando se abrir a pgina, activar o menu de atalho da pgina e seleccionar Propriedades da pgina. ento possvel escolher:
a localizao do ficheiro; o nmero de vezes que se repete o som; repetir sempre o som ou no.

Por fim, premir OK.

7 Criao de Pginas Web

Criao de formulrios
Dois dos modelos de pgina disponveis em FICHEIRO Novo so relativos a formulrios:
1. 2. Formulrio de confirmao permite confirmar a recepo de entradas por parte do utilizador nas pginas de debate, de registo ou de resultado do formulrio. Formulrio de resposta permite ao utilizador comentar o site, a sua organizao ou os seus contedos.

7 Criao de Pginas Web

Criao de formulrios
Para criar um formulrio a partir de uma folha em branco, escolher os seus componentes a partir de INSERIR Formulrio.

7 Criao de Pginas Web

Utilizao Tabelas
Como vimos anteriormente, o uso de tabelas no FrontPage permite combinar texto e imagens, evitando posteriores desformataes. Normalmente, faz-se desaparecer a tabela definindo o tamanho do limite com o valor zero (0). As operaes com tabelas no FrontPage so semelhantes s efectuadas no Word.

7 Criao de Pginas Web

Utilizao de molduras (frames)

As frames so teis para criar ferramentas de navegao, como por exemplo listas de hiperligaes. Normalmente a rea fixa mantm-se sempre visvel, enquanto a rea central varivel. Em Mais modelos de pginas, no separador Pginas com frames, possvel abrir uma nova pgina com frames.

7 Criao de Pginas Web

Utilizao de molduras (frames)

O FrontPage abre uma pgina separada por reas, s quais se atribui um ficheiro existente ou um ficheiro em branco. A partir do menu de atalho da pgina podem editar-se as propriedades da frame (pgina inicial, tamanho, margens, definir se a frame ser redimensionvel ou no no browser, etc.) e escolher opes para mostrar barras de deslocamento. Ao premir o boto Pgina das frames pode inserir-se o espaamento da frame e activar, ou no, a opo de mostrar os seus limites.

7 - Criao de Pginas Web

FrontPage Hiperligaes

7 Criao de Pginas Web

Hiperligaes
Para visualizar as hiperligaes de uma pgina, seleccion-la da lista de pginas e abrir a vista de Hiperligaes.

7 Criao de Pginas Web

Criar hiperligaes
Para criar uma hiperligao interna necessrio criar marcadores no documento e, de seguida, inserir hiperligaes para esses marcadores. Para criar marcadores:
clicar no ponto onde se pretende inserir o marcador; escolher INSERIR Marcador; atribuir um nome ao marcador.

7 Criao de Pginas Web

Inserir hiperligaes
Para inserir uma hiperligao, colocar o cursor do rato no ponto de insero [na(s) palavra(s) ou figura seleccionada(s)] e escolher INSERIR Hiperligao (Ctrl + K) ou premir o boto Inserir hiperligao.
Criar hiperligaes para Ficheiro ou pgina Web Colocar neste documento Um novo documento Endereos de correio electrnico Aco seguinte Escolher a pasta, a pgina, o ficheiro ou o endereo Web. Seleccionar o marcador. Digitar o nome do documento e escolher se se pretende editar o ficheiro mais tarde ou logo aps a insero da hiperligao. Digitar o endereo electrnico e o assunto ou escolher um endereo de correio electrnico utilizado recentemente.

7 Criao de Pginas Web

Barras de hiperligaes
Podem criar-se barras de hiperligaes personalizadas com ligaes Anterior e Seguinte e baseadas na estrutura de navegao.

7 Criao de Pginas Web

Barras de hiperligaes
A barra de hiperligaes apresenta a ordem pela qual as pginas aparecem na vista de Navegao. Ao abrir as propriedades da barra de hiperligaes, no menu de atalho, podem ser escolhidas vrias opes.

7 - Criao de Pginas Web

FrontPage Animao

7 Criao de Pginas Web

Insero de componentes Web

A partir de INSERIR Componentes Web podem escolherse os efeitos dinmicos para botes de apontar, painis rolantes e gestor de faixas. Algumas destas animaes (e tambm o som) s ficam disponveis para utilizadores do browser Internet Explorer

7 Criao de Pginas Web

Boto interactivo
Na caixa Propriedades do boto sensvel ao rato possvel:
inserir um texto no boto em diferentes tipos de letra; criar hiperligaes; definir as cores do boto e do fundo; seleccionar o efeito e a sua cor; redimensionar o boto; personalizar o boto com sons e imagens.

7 Criao de Pginas Web

Painel Rolante
Um painel permite mostrar texto a deslocar-se, na horizontal, no ecr. Em Propriedades do painel rolante possvel digitar o texto, indicara sua direco, velocidade e comportamento, o tamanho, as repeties e a cor do fundo.

7 Criao de Pginas Web

Transio de pgina
Este comando, que se pode encontrar no menu FORMATAR Transies de pgina, permite escolher efeitos de transio para os seguintes eventos: Ao entrar na pgina, Ao sair da pgina, Ao entrar no site e Ao sair do site. Para retirar estas transies, escolher a opo Sem efeitos em Efeito de transio.

7 - Criao de Pginas Web

FrontPage Publicao

7 Criao de Pginas Web

Publicao das pginas num servidor Web

Para publicar um site, necessrio encontrar uma empresa fornecedora de acesso Internet (ISP) que guarde e disponibilize o site. Para que fiquem operacionais algumas funcionalidades, como os formulrios, este fornecedor dever possuir as extenses do FrontPage activas. Para publicar pginas de um Web site, escolher FICHEIRO Publicar destino. De seguida, inserir o destino de publicao, que pode ser um servidor de HTTP ou de FTP, escolher as pginas a publicar e premir Publicar.

7 Criao de Pginas Web

Publicao das pginas num servidor Web

Por fim, clicar em Publicar Web site

7 Criao de Pginas Web

Gesto e actualizao do contedo de um site

Antes e depois de publicar o site boa prtica rever todos os relatrios para detectar problemas a resolver. Se se pretender verificar as hiperligaes do site, escolher as opes de verificao. Ao premir o boto Iniciar, o FrontPage abre um relatrio onde se podem detectar todos os problemas com hiperligaes.

7 Criao de Pginas Web

Gesto e actualizao do contedo de um site

Sempre que se efectuarem alteraes a algumas das pginas do site, deve proceder-se novamente sua publicao. Para actualizar as definies do Web site, usar FERRAMENTAS Definies do site.