Etaproni Escola Tecnolgica Artstica e Profissional de Nisa

A Internet e o seu funcionamento.

H uma srie de protocolos que permitem que o computador se ligue rede. Protocolo TCP/IP Transmission Control Protocol / Internet Protocol

Composto por: TCP define o conjunto de regras para a ligao e comunicao IP define como um computador reconhecido na Internet, o seu IP constitudo por conjunto de nmeros xxx.xxx.xxx.xxx DNS Domain Name System atribui a cada IP um nome SMTP Simple Mail Transfer Protocol possibilita a troca de correio FTP File Transfer Protocol transferncia de ficheiros Telnet ligao de dois computadores remotos para executar programas. Trabalhar num computador distncia.

Servidor computador de caractersticas especiais que permite alojar pginas web.

Criao de pginas web

H vrias formas / vrios programas. sempre necessrio pensar antes o que se quer fazer e como: O site deve ser atraente; O site deve ser de fcil navegao.

Etaproni Escola Tecnolgica Artstica e Profissional de Nisa

Tcnica de Implantao
Programao de pginas web A mais utilizada a HTML (HiperText Markup Language) Linguagem de formatao de hipertexto. Com esta podemos criar pginas (por exemplo num processador de texto) ou em outros programas. H outras linguagens DHTML Dynamic Hypertext Markup Language

Permite dinamizar os elementos da pgina: imagens que aparecem e desaparecem e textos que se movem.

VRML Virtual Reality Modelling Language

Permite criar ambientes virtuais onde podemos observar objectos em ngulos diferentes e interagir com eles.

Editores de pginas web Processador de texto Word, Bloco de Notas atravs de linguagem. FrontPage, Publisher Microsoft Permitem conjugar a parte visual com o cdigo Dreamweaver Macromedia

Editores de imagens e efeitos especiais CorelDraw Corel Photoshop Adobe FireWorks Macromedia

Etaproni Escola Tecnolgica Artstica e Profissional de Nisa

Editores e programas de animao grfica Flash ULEAD Gif animator ULEAD 3D

Ferramentas e utilitrios de transferncia/publicao de pginas web Para se publicar um site (torn-lo acessvel na web para toda a gente) tem que se cumprir o protocolo FTP (File Transfer Protocol). H vrios programas que implementam esse protocolo, ou seja, que fazem a transferncia dos ficheiros do nosso computador para um servidor que ir disponibilizar o nosso site, entre eles temos: Cute FTP WS FTP

Definir documentos HTML

So documentos em que a sua linguagem utilizada para produzir pginas na Internet. Essa linguagem interpretada pelos browsers para exibir as pginas na net. Browsers so programas que permitem navegar na net, como por exemplo: Internet Explorer e Netscape Navigator.

Definir conceito de Hipertexto

Hipertexto um sistema para a visualizao de informao cujos documentos contm referncias internas para outros documentos e para a fcil publicao, actualizao e pesquisa de informao. O sistema de hipertexto mais conhecido actualmente a World Wide Web.

Reconhecer a importncia do planeamento

1 - Organizar todos os elementos dentro de pastas - uma pasta principal - uma pasta para imagens - sons - vdeos

Etaproni Escola Tecnolgica Artstica e Profissional de Nisa - animaes - etc.

2 - Definir o site - tema - objectivos - pblico-alvo - como ser construdo - onde ser colocado - qual o espao mximo a ocupar

3 - Arquitectura do site - como ser apresentado - tipo de navegao entre as pginas

4 - Desenho do site - cores - backgrounds - tipos de letra - etc.

5 - Actualizaes permanentes

FrontPage
Um site envolve dois tipos de tarefas: a criao e a gesto. Podemos dizer que um site est sempre em construo. Por isso necessrio verificar com regularidade o nosso site (sobretudo se existirem ligaes externas, umas vez que estas no dependem de ns). O FrontPage gera automaticamente pginas em HTML sendo um bom exemplo de WYSIWYG (What You See Is What You Get aquilo que v aquilo que tem).

Etaproni Escola Tecnolgica Artstica e Profissional de Nisa

1 Contacto com o programa

Iniciar o programa FrontPage

Definir um novo site

No menu Ficheiro optar por Novo/Pgina ou Web. No painel de tarefas, optar por Web vazia Ao clicar em Procurar permite especificar a pasta onde vai ficar localizada a web. Ambiente de trabalho do FrontPage

Etaproni Escola Tecnolgica Artstica e Profissional de Nisa

Criao de pginas
Para criar uma pgina pode-se aceder ao menu Ficheiro e comando Novo Pgina Web ou na Barra Padro clicar no boto Criar uma nova pgina normal. Ateno: a Home Page pgina inicial deve-se chamar index.htm ou default.htm porque assim o URL do site pode ser simplificado (por exemplo http://ajudasticeb1.do.sapo.pt se a pgina inicial tiver a designao de index.htm, em vez de http://ajudasticeb1.do.sapo.pt/pagina_inicial.htm se a pgina inicial tiver a designao pagina_inicial.htm).

Designao de Ficheiros e de Pastas

Antes de comear a trabalhar com o FrontPage convm ter a noo de que, apesar do Windows 98/Me/2000/XP suportar designaes de ficheiros com caracteres portugueses e espaos entre as palavras, no os utilize em circunstncia alguma. Se tentar enviar por FTP ficheiros nessas circunstncias, o resultado bastante desanimador: no so admitidos. tambm aconselhvel utilizar sempre letras minsculas nas designaes de pastas e ficheiros. frequente os programas de edio de imagem atribuirem uma extenso aos ficheiros em letra maiscula. Corrija essa situao antes de incluir a imagem no site para evitar que as hiperligaes deixem de funcionar. Resumindo, os nomes das pginas, pastas e ficheiros no podem ter espaos, maisculas, acentos e .

Edio de pginas
Depois de criar as pginas pretendidas, chega a altura de editar as pginas para nelas colocar textos, imagens, fundos, etc. e para estabelecer Hiperligaes internas (links para pginas do mesmo site) e Hiperligaes externas (links para pginas de outros sites). Clicando com o boto direito do rato na rea da pgina e acedendo opo Propriedades da Pgina pode-se alterar o ttulo (aparece na barra azul no topo do browser, o tipo, tamanho e cor de letra, cor ou imagem de fundo (para a imagem de fundo, dever indicar a sua localizao), margens, cores das hiperligaes (as cores com as quais ficaro as letras de uma hiperligao durante os seus 3 estados antes de ser activado, depois de ser activado e activo ter ateno que por vezes uma dessas cores da hiperligao pode coincidir com a cor de fundo o que levar ao desaparecimento do texto, logo deve-se mudar ou a cor de fundo ou a cor da hiperligao) e som de fundo indicar a sua localizao (referindo apenas algumas das opes mais utilizadas). No esquecer de guardar/gravar as alteraes que vo sendo realizadas na pgina pois s assim ser possvel visualiz-la. O FrontPage avisa-nos quando uma pgina no

Etaproni Escola Tecnolgica Artstica e Profissional de Nisa guardada ao inserir um * junto ao nome da pgina. Ao guardar a pgina podemos darlhe o nome, mudar-lhe o ttulo e, caso tenha imagens inseridas, devemos coloc-las na pasta images (clicando em Mudar pasta).

Insero e formatao de uma tabela

Na construo de pginas web utilizam-se frequentemente tabelas, visto que estas permitem um alinhamento mais rigoroso do texto e uma distribuio mais harmoniosa e normalizada das imagens e do texto. Para inserir tabelas, aceder ao menu Tabela, opo Inserir Tabela. Pode-se definir o nmero de linhas, de colunas, o alinhamento, a largura, o tamanho do limite, etc. Depois de inserida pode-se ainda alterar as suas propriedades clicando com o boto direito do rato sobre a tabela e acedendo opo Propriedades da Tabela. Para alm dessas formataes ainda possvel, por exemplo, unir ou separar clulas consoante as necessidades.

Insero e formatao de imagens

Para inserir imagens, aceder ao menu Inserir, comando Imagem e escolher o tipo de imagem pretendido (do Cipart, do WordArt, do ficheiro indicar depois a localizao desse ficheiro de imagem do vdeo, etc.). Depois de introduzida a imagem pode-se alterar as suas propriedades clicando com o boto direito do rato sobre a imagem e escolher a opo Propriedades da imagem. Aqui pode especificar o tamanho do limite (caso queira colocar uma moldura), o tamanho da prpria imagem (activando a opo Especificar tamanho no convm desactivar a opo Manter a proporcionalidade uma vez que poder desfigurar a imagem) no separador Aspecto, enquanto que no separador Geral, poder adicionar texto imagem, texto esse que surgir quando, no Browser, passar com o rato sobre a imagem.

Criao de hiperligaes
atravs das hiperligaes que nos possvel navegar entre vrios sectores de uma mesma pgina (recorrendo a marcadores), de uma pgina para outra dentro do mesmo site (a estes dois tipos de hiperligaes d-se o nome de hiperligaes internas), para outros sites e para caixas de correio electrnico (hiperligaes externas). As hiperligaes (tambm conhecidas por links) podem ser feitas a partir de textos (pode ser apenas uma letra ou um conjunto de palavras), a partir de imagens e ainda a partir de partes de imagens (os chamados hotspots ou pontos activos). Hiperligaes dentro da mesma pgina atravs de Marcadores

Etaproni Escola Tecnolgica Artstica e Profissional de Nisa Muitas vezes as pginas de um site contm no incio (e/ou no fim) um ndice com hiperligaes que remetem o leitor para textos ou imagens que se encontram nessa mesma pgina. O processo envolve duas etapas: a criao do marcador (que ser colocado no local de destino da nossa hiperligao) e a criao da hiperligao. Para criar o marcador basta situar o cursor no local onde pretende inseri-lo e aceder ao menu Inserir e ao comando Marcador (depois dar um nome ao marcador e Ok). O marcador surge-nos no FrontPage com uma bandeirinha ou, caso tenha sido colocado mesmo no local de uma palavra, esta surgir a tracejado ( de notar que nem a bandeirinha nem o texto a tracejado aparecero no browser quando visualizar a pgina). Depois basta seleccionar o texto ou a imagem a partir da qual pretende fazer a hiperligao e com o boto do lado direito do rato escolher a opo Hiperligao (tambm pode recorrer ao menu Inserir e ao comando Hiperligao). Surge-nos ento uma caixa de dilogo e, como este nosso link tem como destino um marcador, temos que escolher a opo Marcador e escolher o marcador pretendido (caso haja mais que um, deve-se saber qual o nome que corresponde ao marcador pretendido).

Hiperligaes entre vrias pginas do mesmo site Grande parte das hiperligaes existentes resultam na ligao de duas pginas de um mesmo site. Antes de fazer essa hiperligao convm guardar as pginas, dandolhes nomes, pois ser atravs do nome da pgina que estabelecer o link. Tendo, pelo menos, duas pginas criadas e guardadas, para ligar a pgina index.htm (nome que dever ter a pgina inicial do site) pagina2.htm (por exemplo) basta escrever/inserir texto/imagem escolha na pgina index.htm e, depois de seleccionar o texto ou a imagem, clicar com o boto direito do rato sobre esse texto/imagem e escolher a opo Hiperligao. Na janela de dilogo que se abre seleccionar o ficheiro pretendido, isto , o ficheiro que vai abrir ao ser activada a hiperligao (neste caso seria pagina2.htm). Para testar todas as alteraes feitas na pgina (inclusivamente as hiperligaes) pode escolher entre a opo (Pr-visualizar no Browser) localizada na Barra padro (parte inferior da pgina) ou ir raz (fora do FrontPage, aceder pasta onde est guardado o site e correr o ficheiro index.htm).

Hiperligaes para outros sites Imaginando que pretende estabelecer um link entre uma pgina do seu site para uma pgina de um outro site o processo bastante semelhante ao ponto anterior. Haver uma imagem ou um texto a partir do qual far a hiperligao e, aps fazer a hiperligao, na janela de dilogo que se abre, em vez de seleccionar o ficheiro pretendido, vai, no campo Endereo, digitar o endereo da pgina a que pretende ligar (por exemplo http://www.google.pt).

Etaproni Escola Tecnolgica Artstica e Profissional de Nisa

Hiperligaes para endereos de correio electrnico Pode, igualmente, estabelecer uma hiperligao para uma caixa de correio electrnico. O procedimento semelhante aos dois pontos anteriores at ao momento em que, aps inserir a hiperligao, surge a janela de dilogo. Neste caso escolher a opo Ligar a Endereo de correio electrnico (canto inferior esquerdo). Em seguida, no campo Endereo de correio electrnico digite o e-mail pretendido (por exemplo franciscojsb@sapo.pt).

Criao de Hotspots (pontos activos) Certamente que j encontrou na internet pginas onde existem imagens com hiperligaes diferentes, consoante a rea em que se clica. Para criar um (ou vrios hotspots) a partir de uma imagem, verifique se a Barra de Imagens (caso no esteja, aceder ao menu Ver e opo Barra de Ferramentas e seleccionar a Barra de Imagens. Seleccionando a imagem pretendida (e s com uma imagem seleccionada a opo de criar hotspots fica disponvel) na Barra de Imagens clicar no boto Ponto activo rectangular (h tambm a opo de ser circular e normalmente esses botes estaro no canto inferior direito do monitor). Agora basta desenhar a rea que pretende para o seu ponto activo e, na janela de dilogo que surge, seleccionar a pgina de destino desse ponto activo que acabou de criar.

Introduo de paineis rolantes

Dar um pouco de animao nossa pgina web no nada complicado. Ao introduzir um painel rolante possvel colocar um texto nossa escolha a passear pela nossa pgina da esquerda para direita e/ou vice-versa. Para tal, basta aceder ao menu Inserir, comando Componente Web e na janela de dilogo que surge escolher a opo Painel Rolante. Depois introduzir o texto pretendido, e format-lo a gosto (a sua cor, tamanho, orientao (esquerda para a direita ou vice-versa) comportamento, etc. Ao visualizar a nossa pgina ver-se- o resultado da nossa opo.

Introduo de transies de pgina

Outro elemento que nos permite dar um cunho pessoal e uma animao ao nosso site a possibilidade de introduzir transies de pgina. Acedendo ao menu Formatar e opo Transio de pgina pode escolher o momento em que essa transio ocorre (ao entrar ou ao sair da pgina), a durao (em segundos) que essa transio ter e o tipo de transio (escolher uma de vrias opes).

Etaproni Escola Tecnolgica Artstica e Profissional de Nisa

Introduo de botes
Se podemos navegar pelas pginas do nosso site recorrendo s ferramentas acima apresentadas, podemos tambm obter hiperligaes a partir de botes por ns inseridos. No FrontPage 2003 bastante simples inserir um boto e format-lo de acordo com os nossos gostos e/ou necessidades. Basta aceder ao menu Inserir e opo Boto interactivo para lhe surgir a janela de dilogo onde pode escolher a forma, a cor e o texto do boto assim como o destino ao qual ele vai ligar. Ateno: caso digite o nome da pgina, no esquecer de digitar a extenso, isto , caso um boto ligue, por exemplo pgina index ter que escrever index.htm Ateno: aps inserir o boto, quando guardar essa pgina verificar que o FrontPage lhe pergunta onde quer guardar as imagens novas. Essas imagens so relativas aos botes (3 imagens para cada boto correspondendo a diferentes aspectos) e ao apag-las ou guard-las em local indevido perder os botes. Convm guardar essas imagens na pasta images (que criada automaticamente) juntamente com todas as outras imagens do site.

Criao de formulrios
Com certeza que, ao navegar na Internet, j acedeu a pginas que, pelas mais diversas razes, pretendem obter informaes sobre os seus visitantes. Uma das formas mais utilizadas para recolher esse tipo de informaes (normalmente pergunta-se o nome, idade, sexo, contacto, os gostos, regio em que vive e h at um espao destinado a recolher sugestes) atravs de formulrios. Para se inserir um formulrio ter que aceder ao menu Inserir e comando Formulrio. Todas as opes que surgem devero ser inseridas aps inserir o formulrio propriamente dito. Aps essa operao surgiro dois botes Submeter e Repor dentro de uma caixa a tracejado. Esse tracejado marca o limite do formulrio pelo que, tudo o resto dever ser inserido dentro dele. Abordando apenas as opes mais usuais comearemos por escrever Nome: e inserir frente uma caixa de texto (menu Inserir comando formulrio e opo caixa de texto) todas as ferramentas vm com valores pre-definidos que podemos, no entanto, alterar. Esta caixa de texto (tambm usada por exemplo para o contacto mail ou telefnico ou para a idade) permite por exemplo indicar o nmero de caracteres que ter (todos estes botes dos formulrios podero ser editados clicando com o boto direito do rato sobre eles e opo formatar campo de formulrio) que ser o nmero de caracteres visvel quando se abrir a pgina ou por valores de validao, isto , impedir, por exemplo, que um telefone tenha o nmero de caracteres incorrecto. O boto de opo (normalmente utilizado com a indicao do sexo) permite que apenas uma das opes esteja escolhida podemos tambm definir qual aparece definida quando se abre a pgina. A caixa de verificao, pelo contrrio, permite que vrias (ou mesmo todas) as opes sejam escolhidas (normalmente utilizado com indicaes sobre gostos/preferncias/passatempos, etc.). A lista (caixa) pendente permite introduzir uma srie de valores que ao clicar surgem em lista para que se escolha uma opo (utilizado,

10

Etaproni Escola Tecnolgica Artstica e Profissional de Nisa por exemplo, para indicar a regio em que vive, ou o clube preferido, etc.). Por fim, a rea de texto permite colocar (por exemplo, sugestes) numa rea em que podemos indicar o nmero de caracteres e o nmero de linhas.

Pginas com frames

Esta uma tcnica que nos permite dividir o ecr em vrias reas diferentes, frames, sendo que cada uma dessas reas funciona como uma pgina web independente onde, por exemplo se pode aplicar cores de fundo, cores e tipos de letra diferentes das restantes. As frames para alm de proporcionarem um efeito visual interessante, podem facilitar a navegao num site pois, por exemplo, tendo uma frame com um menu e uma outra onde vo aparecendo as diferentes pginas do site, o menu estar sempre visvel podendo o utilizador ter sempre presente o modo de passar de uma para outra pgina. No entanto, um recurso que deve ser utilizado moderadamente. Para criar uma site sob o modelo de frames deve aceder ao menu Ficheiro e comando Novo. No painel de tarefas seleccionar Mais modelos de pgina. Na janela de dilogo aceder ao separador Pginas com frames e seleccionar o modelo pretendido (o FrontPage mostra na rea da Pr-visualizao dessa janela de dilogo o aspecto de cada modelo de frames. Posteriormente, aparecer a pgina com as suas frames e podemos escolher uma de duas opes: ou clicamos em Nova pgina e formatamos a pgina a nosso gosto ou clicamos em Definir pgina inicial e podemos incluir uma pgina j feita. Ateno: ao gravar a pgina com frames, o FrontPage pergunta como se chama cada parte constituinte da pgina, ou seja, cada frame. A parte em questo aparecer marcada a azul (o programa pergunta como se chamar cada frame e ainda qual o nome a atribuir pgina inteira, isto , ao conjunto das frames. Normalmente, num site elaborado sob o modelo das frames apenas o index, ou seja, apenas a Home Page ser constituda por frames. Portanto, e imaginando que o site teria 3 frames (uma superior, uma lateral com os menus e a outra onde apareceriam as diferentes pginas), ao guardar poderiamos fazer o seguinte: a frame superior chamarse-ia topo, a frame lateral teria o nome de menus, a outra frame seria chamada de principal e ao conjunto das trs frames dar-se-ia o nome de index. A partir daqui poderiamos construir nova pginas sem frames mas que apareceriam no lugar da frame principal. Assim, teriamos que, as frames topo e menus estariam sempre vsiveis aparecendo as pginas no local da frame principal. Ao fazer hiperligaes no modelo das frames, na janela de dilogo que surge aps inserir hiperligao, h uma opo Frame de destino que nos permite escolher, por exemplo, se uma qualquer hiperligao dever surgir numa determinada frame ou numa nova janela.

11

Etaproni Escola Tecnolgica Artstica e Profissional de Nisa

Colocao on-line do site

Antes de publicar o seu site na web, deve verificar duas coisas: A correco de todas as hiperligaes: perca algum tempo a navegar pelo seu site para verificar se todas as ligaes funcionam, se todas as imagens surgem, etc. O tamanho dos ficheiros: muito importante que os ficheiros de imagens sejam pequenos pois no h nada mais desagradvel do que estar demasiado tempo espera que a pgina seja carregada. A colocao do site num servidor WWW poder ser feita por um programa de FTP ou atravs de sites que disponibilizam espao para alojar sites. Para utilizar um programa de FTP ter que ter um username e uma password.

Actualizao de um site
Como j referi, um site nunca est acabado, est em constante actualizao. Para essa actualizao h que ter em conta um aspecto muito importante: imaginemos que o nosso site tem 30 pginas mas que actualizmos apenas 3. Depois de actualizarmos essas 3 pginas apenas necessitamos de voltar a enviar por FTP essas pginas e no todas as outras. Ter ateno que, caso tenham sido adicionadas novas imagens ou outro tipo de ficheiros, esses tero que ser enviados. Um aspecto que normalmente se coloca numa pgina de internet e que actualizado automaticamente aquando da sua edio a data de ltima actualizao. Por norma, escreve-se Actualizado a: e em seguida aceder ao menu Inserir e comando Data e hora, escolher o formato e cada vez que essa pgina (normalmente insere-se a data no index) for editada a data actualizada automaticamente. Nota: na actualizao de um site deve-se ter em conta os links externos (muito susceptveis de deixarem de funcionar).

12