Você está na página 1de 42

Semana da Engenharia de Computao Criao de Home Pages

O QUE O WWW? A definio oficial descreve o World-Wide Web como uma "iniciativa de busca de informao hipermdia a longa distncia visando dar acesso a um vasto universo de documentos". O que o projeto World Wide Web (WWW, W3) fez foi permitir que usurios em redes de computadores com um mtodo de acesso compatvel pudessem acessar inmeras mdias de maneira simples. Usando uma interface chamada Mosaic, o projeto Web mudou a maneira das pessoas verem e criarem informao - foi criada ento a primeira rede hipermdia global. O QUE HIPERTEXTO E HIPERMDIA? O funcionamento da Web utiliza o hipertexto como meio de interao com os usurios. Hipertexto basicamente o mesmo que um texto regular - pode ser armazenado, lido, ou editado - com uma importante diferena: o hipertexto contm conexes dentro do texto para outros documentos. Por exemplo, suponha que voc pudesse de alguma maneira selecionar (com um mouse ou com o seu dedo) a palavra "hipertexto" no pargrafo anterior a esse. Em um sistema hipertexto voc poderia ter ento um ou mais documentos relacionados a hipertexto - uma histria do hipertexto, por exemplo, ou uma definio de um dicionrio. Estes novos documentos por sua vez poderiam ter links e conexes para outros documentos. Dessa maneira, links hipertexto, chamados de hyperlinks, podem criar uma complexa "teia" (web) virtual de conexes. A Hipermdia um hipertexto com uma diferena - a hipermdia contm links no somente para outras partes de texto, mas tambm para outras formas de mdia sons, imagens, e filmes. Imagens podem estar ligadas a sons ou a outros documentos. COMO FOI CRIADA A WEB? A histria da Web comeou em Maro de 1989, quando Tim Berners-Lee do CERN (uma organizao Europia de pesquisadores de Fsica em altas-energias) props que o projeto fosse usado como um meio de transportar efetivamente pesquisa e idias atravs da organizao. A comunicao a esse nvel era um objetivo do CERN h muitos anos, uma vez que os seus membros localizam-se em diversos pases. O QUE O BROWSER (CLIENTE) WWW? Meses aps a proposta original do CERN, o NCSA (National Center for Supercomputing Applications) iniciou um projeto para criar uma interface para o World Wide Web. Uma das misses do NCSA era auxiliar a comunidade cientfica a produzir software amplamente disponvel, e no comercial. Outro dos seus objetivos era investigar novas tecnologias na esperana de que interesses comerciais surgissem. Assim, o Grupo de Desenvolvimento de Software iniciou o desenvolvimento de uma

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

interface verstil, multiplataforma para o World Wide Web, e o chamaram de Mosaic o primeiro browser WWW como conhecemos atualmente. Devido ao nmero de servios tradicionais que realizava, e devido a sua fcil interface "point-and-click", o Mosaic logo se tornou o browser mais popular para a Web. Mas atualmente existem inmeros outros browsers disponveis, como o Netscape, Spry, etc. Existem verses para as mais diversas plataformas, como Suns, Silicon Graphics, PCs (Microsoft Windows), Macintoshes, e outros computadores rodando vrias outras formas de UNIX. COMO FUNCIONA A WEB? A Web funciona segundo o popular modelo cliente-servidor. Um servidor Web um programa cujo nico propsito servir documentos para os clientes quando requerido. Um cliente Web um programa que faz a interface com o usurio e realiza pedidos de documentos a um servidor especificado pelo usurio. A carga causada pelo servidor normalmente pequena, uma vez que no realiza nenhum processamento pesado e s opera quando um documento pedido pelo cliente. Aqui est um exemplo de como o processo funciona: 1. Atravs de um cliente Web (tambm chamado de browser), o usurio seleciona uma parte do hipertexto ligada a outro documento - "The History of Computers". 2. O cliente Web conecta-se a um computador especificado por um endereo em algum lugar da Internet e pede ao servidor Web desse computador pelo documento "The History of Computers". 3. O servidor responde enviando o texto e qualquer outro elemento de mdia existente no documento (figuras, sons, ou filmes) para a tela do usurio. A linguagem que os clientes e servidores Web usam para se comunicarem chamada de HTTP (HyperText Transfer Protocol). Todos os clientes e servidores Web precisam "falar" HTTP para poderem enviar e receber documentos hipermdia. Por essa razo, servidores Web so normalmente chamados de servidores HTTP. O termo "World Wide Web" freqentemente usado para se referenciar ao conjunto de redes de servidores que "falam" HTTP assim como coleo global de informao disponvel atravs do protocolo. A linguagem padro que a Web usa para criar e reconhecer documentos de hipermdia so o HTML (HyperText Markup Language) que uma derivao do SGML (Standard Generalized Markup Language), uma linguagem utilizada para formatao de documentos. Os documentos HTML nada mais so que arquivos ASCII com cdigos de formatao que contm informao sobre o layout (estilos de texto, ttulos de documentos, pargrafos, listas, etc.) e seus hiperlinks. O padro de HTML que est sendo desenvolvido atualmente, chamado HTML+, suporta criao de formulrios interativos, regies sensitivas em imagens, layout mais verstil com mais opes de formatao e estilos, tabelas formatadas, etc. O HTML usa os URLs (Uniform Resource Locators) para representar links de hipermdia e links para outros servios de rede dentro dos documentos. possvel representar quase que todos os servios da Internet com uma URL.

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

A primeira parte da URL (antes das duas barras) especifica o mtodo de acesso. A segunda parte tipicamente o endereo do computador, os dados ou a localizao do servio. Outras partes podem especificar nomes de arquivos, a porta a conectar, ou o texto para se buscar em um banco de dados. Aqui esto alguns exemplos de URLs:

file://endereco.do.site/som.au - Recupera um arquivo de som e o reproduz. file://endereco.do.site/imagem.gif - Recupera uma imagem e a exibe, em um programa separado ou dentro de um documento. file://endereco.do.site/diretorio/ - Exibe o contedo de um diretrio. http://endereco.do.site/diretorio/book.html - Conecta-se a um servidor HTTP e recupera um arquivo HTML. ftp://endereco.do.site/pub/file.txt - Abre uma conexo FTP em endereo.do.site e recupera um arquivo texto. gopher://endereco.do.site - Conecta-se ao Gopher em endereo.do.site. telnet://endereco.do.site:1234 - Faz um Telnet em endereo.do.site na porta 1234. news:alt.hypertext - Conecta-se a um host de news (NNTP) e retorna os artigos no formato hipermdia.

Hiperlinks podem referenciar no somente outros textos e mdias, mas tambm a outros servios de rede. Browsers Web no so simplesmente clientes Web, mas so tambm clientes FTP, Gopher e Telnet. O HTML+ tambm inclui um URL de e-mail, assim hiperlinks podem ser feitos para enviar um e-mail automaticamente. Por exemplo, selecionando um trecho do hipertexto abriria um programa de mail, pronto para enviar um e-mail para o endereo referenciado.

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages INTRODUO AO FRONT PAGE 2000

A cada dia verificamos que a informao uma ferramenta de extrema necessidade em qualquer negcio. Sabendo disto, diversas empresas investem em tecnologias que possibilitam a transmisso de tais informaes. Um dos meios de transmisso mais divulgado na mdia de forma geral a Internet, e esta produziu tendncias como Intranet. Atravs destas redes de computadores, funcionrios, empresas, instituies, profissionais liberais, e qualquer tipo de pessoa, podem divulgar seus trabalhos, e venderem suas idias praticamente para qualquer parte do planeta. Geralmente estas informaes so apresentadas em formas de pginas gravadas em um determinado site (local virtual). O Microsoft FrontPage 2000 considerado um dos melhores programas na criao de Web sites, e se voc pensa que precisar dominar alguma linguagem de programao para obter sites com aparncia profissional, ficar surpreso em saber que o FrontPage capaz de executar automaticamente todas as tarefas de programao. DICAS PARA CRIAR UM BOM SITE Criar um site muito simples graas s facilidades que o FrontPage oferece. Porm, um site bem elaborado exige pacincia, dedicao e conhecimentos de algumas tcnicas. Procure lembrar sempre que um bom site, alm de ter uma aparncia atraente, necessita que a mensagem seja transmitida de forma sucinta e sem demora no aparecimento das informaes na tela. Fique atento s seguintes dicas: Defina os seus objetivos de forma clara; Analise o perfil de quem ir visitar seu site; Utilize itens que possam ser exibidos rapidamente na tela; Crie um bom layout de forma a torn-lo bastante atraente; Evite excesso de informaes numa nica pgina; Voc dever se preocupar, como desenvolvedor de sites para a Web, com a velocidade do modem das pessoas que iro acessar seu site e com a velocidade com que as pginas iro ser visualizadas em um browser. Para ter acesso a estas informaes, selecione Opes do menu Ferramentas e na caixa de dilogo apresentada, selecione a guia Visualizar relatrios. Veja quais alteraes so possveis de se realizar, altere o que achar necessrio e depois clique no boto OK.

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

INICIANDO O MS- FRONT PAGE 2000 Para iniciar o MS - FrontPage 2000 siga os passos abaixo: 1. D um clique no boto Iniciar na barra de tarefas do Windows; 2. Posicione o ponteiro do mouse sobre o menu Programas para abrir o submenu; 3. Posicione o ponteiro do mouse sobre o menu Microsoft Office 2000 para abrir o submenu; 4. Clique sobre a opo Microsoft FrontPage.

Depois de clicar sobre a opo Microsoft FrontPage, aparecer a tela do FrontPage 2000. FORMATAR PGINAS Sempre que iniciado, o FrontPage cria um novo trabalho. (nova_pgina_1.htm).

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages Barra de Ttulos Menu Principal

Barra de Ferramentas (muito parecida com a do Word)

rea de Edio Barra Modos Comece formatando esta pgina. Para formatar essa pgina devemos seguir os passos abaixo: 1. Clique em Arquivo/ Propriedades 2. Em propriedades voc pode formatar o ttulo da pgina (Guia - Geral),

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

Ttulo da Home Page

Som de Fundo

3. Para alterar a cor de fundo (Guia - Plano de fundo), cores dos hyperlinks ativo, visitado, cor do texto, margens superiores e inferior. Caso queira inserir uma figura de fundo marque Figura de plano de fundo. Clique em Procurar selecione uma figura nos formatos Gif ou Jpg

Colocar Figura no Plano de Fundo Alterar a Cor do Plano de Fundo Alterar a Cor do Texto do Hyperlink Alterar a Cor do Texto

Depois de feito todas as alteraes, clique no OK e veja como ficou.

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages INSERIR TEXTO

A Colocao do Texto em uma Home Page parte fundamental em um Bom Site. O Texto deve ser simples e explicativo, um bom Site aquele que tem um texto leve e objetivo, a colocao de um fundo ajuda a embelezar a Pgina. Alguns destaques com cores e marcadores, e uma boa diagramao ajudar na aparncia e compreenso. O Front Page dispe de um completo Editor de Texto, com formatao de fontes, pargrafos, alinhamentos, marcadores, recuos, verificao ortogrfica, etc, se voc sabe utilizar o Word, no ter problemas. Para inserir um texto em sua pgina voc no precisa digitar nenhuma linha de cdigo. Ex: <FONT FACE=ARIAL COLOR=BLUE SIZE=2> O programa cria os cdigo necessrios na formatao da fonte, cor, tamanho de sua escolha. Digite o texto, selecione-o e clique em Negrito, Itlico ou Sublinhado Clique em Estilo e Fonte

Se voc quiser ver o cdigo de sua pgina s clicar na guia HTML, se quiser ver a pgina j pronta s ir na guia Visualizao.

Para salvar esta pgina clique em Arquivo/ Salvar ou clique em Salvar D um nome para a pgina se no quiser manter o mesmo nome. Escolha a pasta onde tambm deve estar todas as figuras utilizadas na pgina, exemplo figura de fundo e clique em Salvar Este exemplo est na pasta Exemplos com nome de pagina1.htm Feche esta pgina. Vamos ver agora como abrir esta mesma pgina. Clique em Arquivo/ Abrir Procure pela pasta onde foi salvo sua pgina.htm e clique em Abrir. Outra forma de abrir uma pgina clicando em: Abrir Encontrar a pgina e clicar em Abrir

HYPERLINKS

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

At o momento, construmos algumas pginas, sendo que em algumas delas fazemos referncia a outras pginas. No entanto, como as pessoas vo navegar entre estas pginas? Ser que existe algum meio de interligarmos estas pginas entre si? Ser que possvel tambm interligar estas pginas com outras pginas da Web que no estejam no mesmo site? Faremos um estudo sobre um dos conceitos mais importantes da Internet e que possibilitam a interligao entre as pginas da Web, facilitando a navegao: os links. Os links podem ser utilizados tanto em textos como em imagens, e tambm podem ser criados para diversos lugares: para pginas do mesmo site, para outros sites, e tambm para outros servios, tais como FTP, e-mail, etc. Para criar um hyperlink para uma outra pgina necessrio que esta pgina exista. Siga os passos abaixo para criar seu primeiro link: 1.) Clique em Arquivo/ Novo voc pode escolher um formato Ex: Pgina normal, Assistente de pgina de formulrio ou at mesma pgina de pesquisa entre outras. Mas selecione Pgina normal e clique em OK. O FrontPage 2000 cria uma nova pgina em branco. 2.) Salve esta pgina 3.) Selecione um texto nessa pgina criada 4.) Voc pode inserir um Hyperlink para outra pgina de vrias maneiras: 4.1) 1 clicando em Inserir/ Hyperlink Procurando a pgina armazenada que foi salva no FrontPage Selecione a pgina e clique em OK. 4.2) 2 ou simplesmente pressionando as teclas Ctrl + K Selecione a pgina e clique em OK. Hyperlink 4.3) 3 outra forma clicando em: Selecionando a pgina e clique em OK. Depois de escolhido uma das trs opes para fazer um hyperlink, aparecer a seguinte caixa de dilogo Criar Hyperlink.

Abaixo tem um exemplo de como fazer um hyperlink em HTML. Cdigo HTML <A HREF=pagina.htm>Pgina</A>

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages Web site http://www.ec.ucdb.br/ Cdigo HTML <A HREF=http://www.ec.ucdb.br/> Apostilas</A> E-mail mailto:wagner@ec.ucdb.br Cdigo HTML <A HREF=mailto:wagner@ec.ucdb.br>wagner@ec.ucdb.br</A> Salve a pgina e faa os teste necessrio clicando nos Hyperlinks criados.

10

Para ativar links em imagens o Front Page dispe de um mecanismo que torna possvel fazer referncias a diversas pginas ou servios em uma nica imagem. Desta forma, a imagem mapeada em pequenas partes sensveis ao mouse onde podemos determinar quais links sero ativados para cada parte da imagem. Para isso proceda da seguinte forma: 1.) Clique sobre uma figura que tenha sido inserida em sua pgina. A figura ficar selecionada com a presena de pontos em suas extremidades e, alm disso, aparecer uma barra de ferramentas flutuante contendo alguns botes como um crculo, retngulos e um polgono; 2.) Este botes sero utilizados para desenharmos figuras geomtricas sobre a imagem selecionada. Portanto clique sobre o boto que contm um quadro e deslize sobre a figura mantendo pressionado o boto esquerdo do mouse. Note que o ponteiro do mouse se transforma em um pequeno lpis. 3.) Quando formar um quadrado, sobre o boto do mouse e observe que aparecer a caixa de dilogo Criar Hyperlink. A partir da com voc! Utilizando os conceitos vivos nos itens anteriores crie um link para alguma pgina Web ou para uma pgina dentro do mesmo site.

NUMERAO/MARCADORES Para usar numerao selecione todo texto desejado e clique em numerao O texto ficar como no exemplo abaixo Exemplo de numerao 1. 2. 3. 4. Apostila Linux Apostila Novell Apostila Unix Apostila Windows

Para retirar a numerao selecione o texto desejado e clique novamente em numerao Para incluir marcaes no texto basta selecionar o texto desejado e clicar em marcadores O texto ficar como no exemplo abaixo

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages Exemplo de marcadores


11

Linux Novell Unix Windows 98

Exemplo na pasta Exemplos nome numerao&marcadores.htm FIGURAS Voc j aprendeu a incluir figuras de fundo na pgina, mas vamos aprender incluir figuras de Cliparts ou uma imagem que voc queira colocar em sua pgina.

Para inserir uma figura de Cliparts clique em Inserir/ Figuras/ Cliparts Selecione um Cliparts adequado e clique em Inserir clipe. Para inserir uma figura de outras pastas clique em Inserir/Figuras/ Do Arquivo Basta selecionar a imagem desejada e clicar em OK. Lembrando que aps sua pgina estar pronta voc deve enviar junto com ela todas figuras utilizadas na pgina. Nota: O Netscape Communicator no exibe figuras nos formatos wmf que o formato utilizado para os Cliparts, converta para Gif ou Jpg antes de salvar sua pgina.

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

12

TABELAS s vezes entramos em uma pgina feita completamente por tabelas, mas essas tabelas no necessariamente aparecem. A formatao da pgina feita por tabelas. Isso no impede de criamos tabelas de preos, de produtos, artigos em geral. Fundindo clulas em novas tabelas e criando um visual interessante. Para criar uma tabela clique em Inserir tabela Arraste (selecionando) at os quadros que deseja que faam parte da tabela Como mostrado na figura abaixo: Boto para Inserir Tabela

Quadro de Seleo das Dimenses da Tabela

J com a tabela na pgina selecione algumas clulas para formatao, clique com o boto direito do mouse. Selecione propriedades da clula para formatar cor de fundo, borda tamanho e cor, alinhamento vertical e horizontal, etc. O texto das clulas voc formata usando Negrito, Itlico, Sublinhado, Cor da fonte, Centralizado, etc. Aparecer a caixa de dilogo mostrada abaixo, dentro da qual encontram-se todas as opes de formatao da tabela.

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

13

Alinhamento da Tabela

Forar o Tamanho da Tabela

Tamanho da Tabela

Tamanho da Borda

Cor do Fundo da Tabela

COMPONENTES Os componentes aqui listados s funcionam no navegador da Microsoft (Internet Explorer). Usaremos como exemplo trs componentes: Office Spreadsheeet, Contador de acesso, letreiro digital e Boto em foco. Para inserir esses e outros componentes ver a figura abaixo ou clique em Componentes.

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

14

Office Spreadsheet Capaz de somar, subtrair, multiplicar, dividir da mesma maneira que o Excel. Trata-se de clulas do Excel que usamos formulas simples ou complexas Ex: C1=B1-A1 O resultado aparece na clula C1 aps pressionar a tecla enter. Contador de acesso Como o nome j diz faz uma contagem de visitantes em sua pgina Use um dos vrios modelos Marque Redefinir contador para: 1 O contador s executado no servidor com sua pgina pronta e recebendo visitas na internet. Letreiro digital S funciona com o Navegador Internet Explorer Digite o texto desejado no espao para Texto Marque a opo que mas, lhe agrada em Direo, Velocidade, Comportamento, Cor de fundo, etc. Ateno: No Netscape ser exibido apenas um texto fixo sem efeito. Boto em foco Este sim trs um efeito bem interessante que executado tanto no Internet Explorer como no Netscape Digite o Texto do boto que ser visualizado por todos visitantes da pgina Em Vincular a: clique em Procurar... escolha a pgina que deseja que este boto ao ser clicado abra.

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

15

Selecione uma Cor do boto, Cor do plano de fundo do Efeito, cor de efeito e clique em OK. Clique em Salvar Para salvar sua pgina. Neste caso foi criado applet que devem ser enviados junto com sua pgina Exemplo na pasta Exemplos nomes componentes.htm nome fphover.class nome fphoverx.class Voc pode incluir outros efeitos Experimente outros componentes. HTML Apesar do programa FrontPage criar todo cdigo HTML para voc, bom saber um pouco sobre HTML. O FrontPage trs trs Guias de trabalho.

Normal Onde voc digita o texto, inclui figuras, componentes, tabelas sem se preocupar com os cdigos. HTML Que exibe os cdigos criados pelo FrontPage para que sua pgina seja exibida sem falhas Visualizao Como o nome j diz, exibe o resultado de seu trabalho (pgina). Mas voltamos a falar sobre HTML Veja o cdigo criado pelo FrontPage <p>Pgina local</p> <p><a href="pagina1.htm">pagina1.htm</a>&nbsp;</p> <p>Home Page</p> <p><a href="http://www.option-line.com/members/apostilas/">http://www.optionline.com/members/apostilas/</a></p> No caso acima foi criado um Hyperlink para a pgina1.htm. <p> determina que todo texto digitado entre as tags<p></p> ficar em um nico pargrafo e um espao de uma linha dividir este pargrafo do prximo Podemos modificar o cdigo HTML para que o texto tenha uma seqncia. Usamos<font face=arial size=2>para definir qual fonte ser usada. Digitamos o Hyperlink<a href=pgina1.htm> Modificamos o nome pgina1.htm para Primeira pgina ou Voltar, retornar algo parecido e fechamos o Hyperlink com a tag </a>.

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

16

Se o texto seguir em outra linha digitamos <br> No esquecendo de fechar a tag </font> caso o texto seguinte utilize outro tipo e tamanho de fonte. Veja o cdigo completo <font face=arial size=2> <a href=pgina1.htm>Voltar</a><br> </font> DHTML A HTML (Hypertext Markup Language, linguagem de marcao de hipertexto) dinmica (DHTML) um aperfeioamento da Microsoft para a HTML verso 4.0 que permite criar efeitos especiais, como texto que se desprende da pgina uma palavra de cada vez ou efeitos de giro da transio do estilo de mensagem entre pginas. Entretanto, alguns navegadores da Web no oferecem suporte a DHTML, de modo que as pginas que contm DHTML podem no ser exibidas adequadamente ou podem conter erros quando visualizadas por alguns visitantes do site. Como criar um efeito DHTML? Crie um ou dois Hyperlink(s) em sua pgina. Na Guia Normal selecione um Hyperlink. Como selecionar? Clique com o boto direito do mouse na primeira letra do Hyperlink e arraste at a ltima letra do Hyperlink. Com o Hyperlink selecionado clique em Formatar/ Efeitos de HTML dinmico. Surge uma longa barra de ferramenta caso essa no esteja fixa junto as demais. Em Ao Escolha um efeito, selecione um dos efeitos. Em Aplicar Escolha um efeito, selecione um dos efeitos Clique em Escolha uma formatao. Dependendo pode ser borda ou fonte. Caso tenha escolhido fonte modifique Cor da fonte, Efeitos, Tamanho, Estilo e a prpria fonte. Caso tenha escolhido borda escolha o fundo a borda e preenchimento da mesma. No faa modificaes absurdas como sua fonte normal ter tamanho 1 e alterar o tamanho para 7. Aps salvar esta pgina o FrontPage cria um arquivo com extenso .js e um pequeno script em sua pgina. </script> <script language="JavaScript1.2" fptype="dynamicanimation" src="animate.js"> </script> necessrio que voc envie este arquivo junto com sua pgina Exemplo na pasta Exemplos Nome da pgina dhmtl.htm Nome do arquivo animate.js Para visualizar o script criado em animate.js utilize o Bloco de Notas.

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages FORMULRIOS

17

Criar um formulrio usando um assistente Voc pode criar um formulrio usando o Assistente de pgina de formulrio, que pede que voc especifique as seguintes informaes:

Os dados que deseja coletar, que determinam quais campos devem ser colocados no formulrio. A maneira como deseja formatar os campos. Voc pode organizar o formulrio em pargrafos ou listas e escolher se deseja usar tabelas para formatar a pgina. Se desejar incluir um ndice analtico na parte superior da pgina, o que til em formulrios grandes. Como deseja salvar os resultados do formulrio (os dados coletados no formulrio, aps um visitante do site preench-lo). O assistente permite salvar os resultados em um arquivo de texto ou em um arquivo HTML (Hypertext Markup Language, linguagem de marcao de hipertexto), ou voc pode usar seu prprio script personalizado para lidar com os resultados. Quando um visitante do site clicar no formulrio, os resultados do formulrio sero enviados ao local especificado.

Usando estas informaes, o assistente cria seu formulrio. Voc pode personaliz-lo editando o texto e definindo propriedades e regras de entrada de dados para os campos de formulrio. 1. No menu Arquivo, aponte para Novo e, em seguida, clique em Pgina. 2. Na guia Geral, clique em Assistente de pgina de formulrio e, em seguida, clique em OK. O Assistente de pgina de formulrio aberto. Siga as instrues na tela para completar o formulrio Mais informaes sobre formulrio voc encontra no ( ) assistente do FrontPage. Mas muito comum voc clicar em Submeter e nada acontecer, neste caso utilize um formulrio com parmetros do prprio servidor que hospeda sua pgina. Um bom exemplo o formulrio da OptionLine www.option-line.com que envia todos os dados para sua conta de e-mail OptionLine. Alm disso, voc pode lanar mo dos Guestbook (livro de visita). Iniciando a criao de um formulrio sem o assistente Os formulrios so questionrios colocados em pginas Web, que podem ser preenchidos pelos visitantes do site e enviados para algum endereo definido durante a criao da pgina. Para comear a construo de um formulrio devemos ir ao menu Inserir/Formulrio, como mostra a figura abaixo:

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

18

Os formulrios so uma grande forma de transmisso de informaes e obter "feedback" dos visitantes para o seu site. Um formulrio composto de campos), que podem ser dos seguintes tipos: Caixa de Texto de uma Linha

Caixa de Texto de Rolagem


% $ # " ! + * ) ( ' &

Caixa de Seleo Boto de Opo Menu Suspenso

Enviar

Boto de Ao

O usurio preenche os campos de seu formulrio e envia-os para o servidor atravs de um boto, geralmente chamado "Submit" ou "Enviar". Quando se clica este boto, o manipulador do formulrio assume o controle. Este manipulador que diz o que ser feito com a informao digitada nos campos dos formulrios. Algumas operaes possveis que o manipulador pode realizar so:

enviar os dados para um arquivo texto no servidor web

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages


19

enviar os dados para uma conta de e-mail enviar os dados para um componente CGI, ASP, etc. que podem realizar vrias operaes com os dados, includo a incluso em um banco de dados.

Criando um Formulrio Faremos agora um formulrio simples de cadastro de dados pessoais. Primeiro, crie uma nova pgina no seu FrontPage Editor, e para inserir o primeiro campo do seu formulrio, v ao menu Inserir - "Formulrios", e escolha o elemento "Caixa de Texto em Linha".

Aparecer algo como a figura acima. Quando voc insere o primeiro objeto de um formulrio, tambm so inseridos automaticamente os elementos 1, 2 e 3 do grfico acima. A rea de linha tracejada 1 representa a rea de trabalho do formulrio. Todos os campos do formulrio devero estar dentro dessa rea. O boto n 2 envia os dados para o manipulador do formulrio. O boto n 3 retorna o valor de todos os campos para o seu estado original. Caixa de Texto em Linha O elemento que ns inserimos, Caixa de Texto em Linha, permite que voc escreva dados em uma linha. Para alterar as propriedades deste campo, clique com o boto direito do mouse sobre ele e escolha a opo "Propriedades do Campo do Formulrio". Aparecer a seguinte janela:

1 2 3 4 6
No campo 1, voc ir definir o nome para este campo, este nome muito importante para o manipulador do formulrio. Tente sempre colocar nomes significativos para ele. No nosso exemplo vamos alter-lo para "nome". O campo 2, define um valor inicial para o campo. Este valor j mostrado quando o formulrio exibido. Podemos tambm alterar o nmero de caracteres exibidos neste campo utilizando a opo 3. Se o campo for para digitar uma senha, no queremos que esta senha seja exibida. Se voc definiu a opo 4 como "sim", tudo o que voc digitar no campo ser substitudo por um asterisco na visualizao. O campo 5 define a ordem de

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

20

tabulao do campo. Isto serve para quando se tiver vrios campos no formulrio e fizer a navegao entre eles usando a tecla "Tab", ser seguida a ordem indicada pelo nmero neste campo.Clicando no boto 6 ver a seguinte janela:

1 2 3 4 5 6

Dependendo da opo que voc escolher no campo 2, sero habilitadas as reas 1, 3 e 4. Se voc escolheu a opo Texto no campo 2, poderemos utilizar as clusulas de validao na rea 3. Nela poderemos definir que tipos de caracteres sero aceitos pelo campo do formulrio. Se voc marcar a opo "Letras", habilitamos o campo a aceitar letras. Com a opo "Dgitos", a mesma coisa, mas para os dgitos de "0" a "9". A opo "Espao em Branco" permite a insero de caracteres que contenham espao em branco, como "Enter", barra de espao e "tab". Se quisermos inserir outros tipos de caracteres que no sejam os especificados anteriormente, utilizamos a opo "Outros" e digitamos os caracteres que queremos que sejam aceitos pelo campo, por exemplo: $,%,&, etc. Podemos selecionar mais de uma opo para obter combinaes do tipo: aceitar todas as letras e nmeros. Quando escolhemos a opo Nmero Inteiro no campo 2, uma parte da rea 4 habilitada ("Agrupamento"). Nesta parte, escolhemos qual o caractere que ser aceito pelo campo como separador de milhares. Por exemplo, se voc escolher "Ponto", e entrar no campo a informao "1.345", esta informao ser aceita pelo formulrio quando clicar no boto "Submeter", pois ele vai entender que "1.435" a mesma coisa que "1435". Por outro lado, se voc entrar "1,345" com a configurao atual, este nmero ser rejeitado. Agora, se voc mudar a opo da rea 4 para "Vrgula", o caractere de separao de milhares ser a vrgula. Ento, "1,435" ser aceito como "1435", e "1.435" ser rejeitado pelo formulrio. Se voc escolher nesta rea a opo "Nenhum", nenhum caractere ser aceito como separador.

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

21

Se no campo 2 selecionarmos a opo Nmero, a outra parte da rea 4 (Decimal) tambm ser habilitada. Aqui define-se quem ser o caractere separador da parte inteira e decimal do nmero: o ponto ou a vrgula. O funcionamento semelhante ao do separador de milhares visto acima, sendo que no ser aceito que as duas partes usem o mesmo caractere (por exemplo, definir que o separador de milhares e o de parte decimal seja o ponto). Do lado direito da rea de definio do caractere de separao da parte decimal aparece um exemplo do formato de nmero que ser aceito pelo campo do formulrio. O campo 1 habilitado quando voc escolhe no campo 2 os valores Inteiros ou Numricos. Quando ocorre um erro de validao no campo do formulrio, a mensagem de erro identifica o nome do campo pelo seu nome interno (aquele que voc v quando edita as propriedades do campo). Geralmente, este nome no corresponde ao texto que identifica o campo no formulrio. Digite no campo Nome de Exibio o nome que voc quer que aparea na mensagem de erro. Na rea 5, a opo "Necessrio" diz se obrigatrio o preenchimento do campo ou no. Se ela estiver ativada, o campo deve ser preenchido com algum valor, seno aparecer uma mensagem de erro. Os campos "Compr. Mnimo" e "Compr. Mximo" definem, respectivamente, o nmero mnimo e mximo de caracteres que so aceitos no campo do formulrio. Por exemplo, se eu quiser que a entrada do campo seja de at 20 caracteres, eu defino "Compr. Mximo" com valor 20. Na rea 6 podemos definir uma faixa de limites para os valores entrados no campo do formulrio. Se ns quisermos, por exemplo, que sejam aceitos no campo apenas nmeros entre 10 e 20, inclusive, deveremos acionar a opo "O compo deve ser" e na opo seguinte escolhemos "Maior ou Igual a" e no prximo campo colocamos o valor 10. Definimos ento a seguinte regra de validao: o campo deve ser maior ou igual a 10 Agora devemos fazer a outra regra. Clique na opo "e deve ser" e na opo seguinte escolha "menor ou igual a" e no prximo campo inclua o valor 20. Fizemos agora a seguinte regra: o campo deve ser menor ou igual a 20 E, juntando as duas condies, atendemos s nossas necessidades de validao. As opes de comparao que voc pode incluir so:

Inserindo texto no formulrio Agora, temos que inserir um texto antes do campo que ns criamos para indicar que nele temos que colocar um nome de usurio. Posicione o cursor de texto no comeo da linha onde est o campo e digite o texto "Nome:". Agora nosso formulrio ficaria assim:

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

22

Inserindo mais um campo no formulrio Continuando nosso formulrio de cadastro, devemos inserir um campo para que o usurio escolha o sexo dele. Mas primeiro, vamos colocar o cursor de texto na posio correta de insero: posicione o cursor de texto entre o campo do formulrio e o boto "Submeter" e tecle "Enter". Ser criada mais uma linha dentro do formulrio e podemos digitar o texto "Sexo:" Inserindo um Boto de Opo Com o cursor de texto posicionado logo aps "Sexo:", v at o menu: "Inserir Formulrio Boto de Opo". Aparecer nossa primeira opo de Boto de Opo. D um espao e digite "Masculino" e d mais alguns espaos. Usando os passos vistos anteriormente, insira mais um boto de opo e depois digite "Feminino" e "Enter". Agora teremos o seguinte aspecto no nosso formulrio:

Os Botes de Opes so organizados em grupos de opes. Quando voc coloca vrios Botes de Opes seguidos, o FrontPage automaticamente os coloca no mesmo grupo. No nosso exemplo, os campos referentes ao sexo masculino e feminino fazem parte de um mesmo grupo, e ser aceito apenas que um campo esteja ativado no momento. Para ver as propriedades de um Boto de Opes, clique com o boto direito do mouse sobre ele e escolha a opo "Propriedades do Campo do Formulrio". Faa isso no campo esquerda de "Masculino". Aparecer a seguinte janela:

1 2 3 4
O campo 1 determina o nome do grupo do campo. Ele deve ser o mesmo para todos os campos que fazem parte do grupo de opes. Vamos mud-lo para "Sexo". Faa a mesma coisa no campo de formulrio referente "Feminino". No campo 2,

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

23

definido o valor que ser atribudo ao grupo quando aquele campo do formulrio tiver sido selecionado. Para o campo antes de "Masculino", atribua o valor "M". E para o campo "Feminino", atribua o valor "F". A rea 3 dito se aquele campo ser o valor inicial do grupo ou no. Vamos colocar a opo "Selecionado" para o campo "Masculino". No boto 4, definimos as regras de validao do campo. Clique nele e aparecer a janela a seguir.

1 2

O campo 2, dizemos se o preenchimento do grupo obrigatrio ou no. Como na maioria das vezes j temos sempre um valor inicial definido, geralmente essa opo no habilitada. Mas se for, o campo 1 ativado, onde podemos colocar o nome do campo para as mensagens de erro, de maneira semelhante ao campo visto nas propriedades de validao do elemento "Caixa e Texto de Uma Linha". Inserindo um Caixa de Seleo Na linha seguinte do nosso formulrio de exemplo. Vamos ao menu: "Inserir Formulrio Caixa de Seleo" e a seguir digite "Quero receber as novidades deste site" e "Enter". Agora temos uma opo para o usurio decidir se quer ou no receber um informativo, bastando clicar na caixa que est esquerda da frase.

Usando o boto direito do mouse sobre o Caixa de Seleo, escolhemos a opo "Propriedades do Campo do Formulrio" para ver as propriedades deste campo.

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

24

1 2 3

O campo 1 o nome do campo. Vamos mud-lo para "Novidades". No campo 2, definido o valor que ser atribudo ao campo quando ele for acionado. Vamos mud-lo para "SIM". A rea 3 diz se o estado inicial do campo marcado (Selecionado) ou no (No Selecionado). Inserindo um Menu Suspenso Digite no nosso formulrio de exemplo "Estado:" e depois v ao menu: "Inserir Formulrio Menu Suspenso". Depois clique com o boto direito do mouse sobre o campo e escolha a opo "Propriedades do Campo do Formulrio".

1 3 4 2 5 6 7 8 9 10
No campo 1, onde se define o nome do campo, daremos o nome de "Estado". No campo 2, onde estaro as opes do nosso menu. Para inserir uma nova opo clique no boto 3 - "Adicionar". Aparecer a janela abaixo:

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

25

1 2 4 3

Nesta nova janela, voc digita no campo 1 a opo que ir aparecer no menu de opes. No nosso exemplo, para a lista de estados, podemos digitar "AC". No campo 2, definimos se esta opo ter um valor interno, diferente do texto que aparece no menu. Por exemplo, suponhamos que internamente, eu tenha que mandar a informao "1" em vez de "AC", para processamento em um banco de dados. Se for este o caso, habilita-se este campo e preenche o valor interno no campo 3. No campo 4 dizemos se esta opo do menu ser a opo inicial (default). No nosso exerccio, no usaremos os campos 3 e 4. Agora, como tarefa, voc pode inserir vrios outros estados no nosso menu. Depois disso, teramos em nosso menu algo parecido como:

1 3 4 2 8 9 10
Para editar uma das entradas do menu, clique sobre a entrada desejada no campo 2 e selecione o boto 4 (Modificar). Na janela que voc j viu antes, faa as alteraes necessrias. Para remover uma entrada, clique sobre ela no campo 2 e depois clique no boto 5 (Remover). Se voc quiser alterar a ordem das entradas do menu, usamos os botes 6 e 7. Por exemplo, se quiser colocar a entrada "BA" do nosso menu como primeira opo, clica-se sobre ela no campo 2 e depois clicamos vrias vezes o boto 6 (Mover para cima) at que a entrada esteja na posio desejada. O campo 8 define a altura da lista de opes, e dada em linhas. No campo 9, dizemos se o usurio pode

5 6 7

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

26

selecionar ou no mais de um item. O campo 10 sobre a validao do campo do formulrio. Clicando nele teremos a seguinte janela:

1 2 3

Nesta janela, o campo 2 define se o campo de preenchimento obrigatrio ou no, e o campo 3 desabilita o primeiro item da lista. Este campo usado muito na seguinte situao: geralmente no primeiro item do menu coloca-se uma informao instruindo o usurio, tipo "Selecione um estado", e por isso ele no pode ser uma entrada vlida no menu. A usamos o campo 3. O campo 1 semelhante ao que vimos nos outros campos do formulrio e s habilitado quando seleciona-se o campo 2 ou 3. Ele define o nome do campo que ser exibido na mensagem de erro. Inserindo um Scrolling Text Box Agora, iremos inserir no nosso exemplo um campo onde o usurio possa colocar as suas sugestes. Insira uma nova linha no seu exemplo e digite "Deixe aqui a sua opinio ou sugesto:". Insira mais uma linha e v ao menu "Inserir - Formulrios Caixa de Texto de Rolagem". Agora temos um local para as sugestes.

Clique no "Caixa de Texto de Rolagem" com o boto direito e escolha a opo "Propriedades do Campo do Formulrio".

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

27

1 2 3 4 5
No campo 1, daremos o nome do campo como "Opinio". No campo 2, define-se um valor inicial para o campo. No campo 3 e 4, definimos o comprimento e a altura de exibio do campo, respectivamente. Clicando no boto 5 (Validar) iremos para as regras de validao do campo do formulrio, que a mesma janela vista na "Caixa de Texto de Uma Linha" Trabalhando com os botes no formulrio Os botes so responsveis, principalmente, pelo envio das informaes ao manipulador do formulrio. Para editar as propriedades do boto, clique com o boto direito do mouse sobre ele e escolha a opo "Propriedades do Campo do Formulrio". Faa isso com o boto "Submeter" do nosso exemplo.

1 2 3

No campo 1, definimos o nome interno para o boto. O campo 2 o texto que ser mostrado sobre o boto. Vamos mud-lo para "Enviar". No campo 3, definimos a ao que ser tomada quando este boto for pressionado. Se for "Normal", ser um boto normal, onde voc ter que assinalar um script a ele para fazer alguma ao. No caso da opo "Submeter" , os dados do formulrio sero enviados para o manipulador do formulrio. A opo "Redefinir" ir fazer com que todos os campos do formulrio voltem ao seu estado original. Quando voc cria um formulrio no FrontPage, dois botes do tipo "Submeter" e "Redefinir" so automaticamente inseridos no formulrio junto com o primeiro elemento. No nosso exemplo, aproveite para mudar o texto do boto "Redefinir" para "Limpar Campos".

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages Enviando os dados do formulrio

28

Depois de criar os campos do formulrio, precisamos saber o que fazer com eles. Estes dados so tratados por um manipulador de formulrios. Clique com o boto direito do mouse em qualquer rea do seu formulrio, e escolha a opo "Propriedades do Formulrio".

3 5 2 8 9 6

10

No campo 1, especificamos se vamos enviar os dados preenchidos no formulrio para um arquivo e/ou endereo de e-mail. Se for mandar para um arquivo, especifique o caminho dele no campo 3. Por padro, o FrontPage envia para um arquivo dentro da pasta "private", mas voc pode especificar qualquer outro arquivo. Se o arquivo estiver dentro do seu site, voc pode selecion-lo tambm atravs do boto 4 (Procurar). Se voc quiser enviar os dados do formulrio para um endereo de e-mail, digite-o no campo 5. Agora, muita ateno! Sempre que voc definir este campo aparecer depois uma mensagem dizendo que as extenses do FrontPage no seu servidor no esto configuradas para o envio de e-mails. Se voc estiver usando o FP com o FrontPage Web Server, isto verdade. O que importa se, no servidor onde a pgina ir ficar hospedada definitivamente, as extenses do FrontPage esto configuradas corretamente. Na dvida, contate o administrador do servidor de hospedagem. Habilitando o campo 2, podemos enviar os dados para um script ASP, CGI, etc, que pode realizar aes especficas com eles, inclusive uma integrao com um banco de dados. Isso decidido no campo 6. Neste campo, tambm pode-se mandar os resultados para um "Registration Form Handler" ou um "Discussion Form Handler", ambos componentes do FrontPage. Como estes componentes no fazem parte do nosso escopo, iremos trat-los em outras oportunidades. Depois que voc seleciona para onde

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

29

iro os seus dados, clique o boto 7 (Opes) para configurar o manipulador de formulrio que ser utilizado. Veremos estas opes com mais detalhes mais adiante. No campo 8, definimos um identificador para o nosso formulrio. Este nome pode ser til no caso de usarmos outros manipuladores de formulrios (como os definidos no campo 2). No campo 9, dizemos qual o frame da janela onde ser mostrado o resultado do envio dos dados. No boto 10 (Avanadas), poderemos especificar alguns valores ocultos para um manipulador de formulrio customizado. Isso mais usado quando, por exemplo, temos um nico manipulador para vrios formulrios. Podemos ento especificar um identificador num campo oculto que tenha um valor diferente para cada formulrio. Desta maneira, o manipulador saber de onde os dados vieram. Opes do manipulador do formulrio Quando voc clica no boto 7 (Opes), aparece a janela:

1 2 3 4

A primeira parte desta janela (Resultados do Arquivo) deve ser usada quando voc definir que os dados do formulrio vo para um arquivo no seu site. O campo 1 j vem com o nome de arquivo que voc definiu no campo 3 da janela anterior. No campo 2, deve-se escolher o formato como ser gravado o arquivo. As opes so: Opo HTML Descrio Arquivo em formato HTML, com ttulos dos campos em negrito. o

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages valor padro para o manipulador de formulrio de registro (Registration Form) Arquivo HTML usando uma lista Lista de Definies HTML de definio Arquivo HTML usando uma lista Lista com Marcadores HTML com bullets Arquivo HTML usando texto com Texto Formatado dentro de HTML formatao Texto Formatado Texto normal com formatao Texto com vrgula separando os O Banco de Dados de Texto est valores. o formato padro para o Usando Vrgula como Separador manipulador de formulrios O Banco de Dados de Texto est Texto com marcas de tabulao usando Tabulao como Separador (tab) separando os valores O Banco de Dados de Texto est Texto com espao separando os usando espao como separator valores

30

Os trs ltimos valores da tabela acima so os mais indicados para realizar uma importao num banco de dados. Com o campo 3 ativado, tambm sero includos no arquivo os nomes dos campos. O campo 4 vale para a gravao em arquivos HTML. Com ele ativado, os dados mais recentes estaro sempre includos no final do arquivo. Este valor padro para os arquivos no formato texto e no pode ser modificado. A rea 5 define os mesmos parmetros vistos acima para um segundo arquivo (opcional). Ele til no caso, por exemplo, de voc preparar um arquivo formatado para ter os dados inseridos numa planilha ou banco de dados, e um outro arquivo de formato texto para permitir a sua visualizao.

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

31

1 2 3 4 5 6 7

Se voc for utilizar o envio das respostas do seu formulrio para um e-mail, dever usar a parte "Resultados pelo Correio Eletrnico" das opes do formulrio. No campo 1, deve-se inserir o endereo de e-mail onde ser enviado os dados. No campo 2 especificamos o formato do e-mail. As opes para este campo so as mesmas vistas no campo "Formato do Arquivo" na rea "Resultados do Arquivo" (veja a tabela anterior). No campo 3 dizemos se sero includos ou no os nomes dos campos no e-mail. A parte do cabealho do e-mail contm os campos 4 a 7. O campo 4 especifica se voc ir colocar como assunto do seu e-mail o resultado de um campo do seu formulrio ou no. Se voc acionar este campo, digite o nome do campo do formulrio no campo 5. Seno, voc pode digitar o texto de sua escolha para o assunto do e-mail neste campo. Os campos 6 e 7 so semelhantes aos vistos anteriormente e servem para mandar uma cpia do e-mail para um segundo endereo.

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

32

A rea "Pgina de Confirmao" permite-nos definir uma pgina de confirmao e/ou falha para ser exibida depois dos dados do formulrio serem enviados. No campo 1 voc pode definir um endereo de uma pgina que ser sempre exibida quando os dados do formulrio forem enviados com sucesso. E no campo 2 definimos a pgina que ser exibida quando uma das regras de validao dos campos do formulrio forem violadas. As duas pginas so opcionais e, se no forem definidas aqui, sero usadas pginas padro.

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

33

3 2 4 6 5

A ltima rea das opes do formulrio trata sobre as informaes que sero salvas no arquivo ou e-mail. No campo 1 defina quais os campos do formulrio que sero salvos. E nos outros campos, podemos guardar informaes adicionais sobre o usurio, como hora(2), data(3), nome do computador(4), nome do usurio(5) e tipo do browser usado(6). PROPRIEDADE INTELECTUAL

1. Propriedade Intelectual Segundo, a Internet est tirando aproximadamente 3% do pblico brasileiro da frente da TV e levando-o para frente do monitor de computador. Uma das caractersticas mais interessantes da Internet a possibilidade de qualquer pessoa poder tornar pblico qualquer tipo de informao. Isto faz com que cada pessoa possa ser um editor e um designer, independentemente da formao profissional e tica. Entretanto, no basta saber trabalhar com este ou aquele sistema operacional e conhecer as aplicaes para a criao e manuteno de sites. preciso agir de forma tica tambm neste mundo virtual. H coisas que no diferem da dita vida real. So os valores de base da vida em sociedade. Coisas como o respeito pelo trabalho dos outros. Coisas como o respeito pela propriedade intelectual, que embora legalmente protegida, no na Internet mais respeitada do que fora dela.

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

34

A Internet veio trazendo consigo a necessidade de uma nova tica. Uma tica que cultive valores humanos superiores, onde assuntos aparentemente banais, como o uso de msicas numa simples home page, pode fazer brotar nas pessoas o senso do respeito ao trabalho alheio. A palavra-chave que melhor define este assunto respeito. Definitivamente, preciso que as leis relativas aos direitos autorais sejam revistas e adaptadas aos sistemas on line com a mxima urgncia possvel, sob pena de presenciarmos uma forma totalmente nociva (ainda que no intencional) de democratizao das informaes. Quem plagia na Web deve achar que est em territrio irreal, uma espcie de mundo da fantasia onde tudo permitido. A Internet um mundo sem lei, onde tudo possvel e permitido. Ou seja, j que o material est publicado na Internet, pensa-se que deve ser de domnio publico e ponto final. Dada sua dimenso, fica realmente impossvel o exerccio de qualquer tipo de fiscalizao relativa reproduo de material de terceiros sem prvia autorizao na Internet. E justamente disso que muita gente est se aproveitando para apoderar da propriedade intelectual alheia, levando ainda o leitor, na imensa maioria das vezes, a considerar que tais contedos so originais e inditos, concedendo desta forma crdito s pessoas erradas. Existem vrias empresas de porte, incluindo multinacionais e at instituies educacionais de renome, que se utilizam ilegalmente de contedos grficos e textuais que no so de domnio pblico. Cita-se como exemplo o caso de uma empresa portuguesa, atuante na rea de desenvolvimento grfico, que descobriu que seis cones de sua criao foram copiados e utilizados sem qualquer tipo de autorizao em uma home page tambm produzida por portugueses (hospedada, porm, em domnio norteamericano). Apurada a denncia, e sob ameaa de processo judicial, os acusados imediatamente retiraram as imagens do site, alegando "motivos de remodelao do servio" e, questionados sobre o assunto, declararam (pasmem): "os cones tinham de fato um aspecto agradvel. Alis, francamente, no entendemos como se revelam to importantes na estratgia da referida empresa". [Alexandre Sobrino Ganana] Um tema importante a ser tratado quando da discusso de Propriedade Intelectual est relacionado ao direito cultural a ser abordado na prxima subseo. 1.1 Direito Autoral Manuel Lopes Rocha afirmou que, embora no existam disposies legais quanto ao direito de autor on line, existe a legislao no chamado mundo fsico e essa que aplicada. O Artigo 2 do Cdigo do Direito de Autor e dos Direitos Conexos considera obras originais as obras de artes aplicadas, desenhos ou modelos (...) e obras de design que constituam criao artstica, (...), mas tambm lemas ou divisas, ainda que de carter publicitrio, se revestirem de originalidade; (...) O Artigo 195 do mesmo diploma considera que comete crime de usurpao quem, sem autorizao do autor (...) utilizar uma obra ou prestao por qualquer das formas previstas no Cdigo do Direito de Autor. Resta acrescentar que se considera que comete o crime de contrafaco quem utilizar fraudulentamente, como sendo criao ou prestao sua, obra (...) que seja mera reproduo total ou parcial de obra ou prestao alheia, divulgada ou no divulgada, ou por tal modo semelhante que no tenha individualidade prpria

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

35

O grande problema fazer com que as pessoas se conscientizem sobre direitos autorais na Internet, entre outros motivos porqu: - A maior parte dos internautas nunca produziu textos ou fotos prprios. Assim, talvez o internauta tpico no se preocupe com a pirataria simplesmente porque no tem nada para ser copiado. Alis, para muitos, quanto mais pirataria melhor; - As revistas de informtica, a imprensa em geral e os prprios sites (em especial os que ensinam a fazer Home Pages) praticamente ignoram o problema; Muitos sites apresentam como de reproduo livre materiais que, em algum momento, foram pegos sem autorizao de quem os fez originalmente. Isso cria a figura do "copiador de boaf". - Em alguns casos, no se tem claro que tipo de material de reproduo livre ou no; - Sejamos realistas: faz parte do cotidiano brasileiro a cpia no autorizada (quantos, por exemplo, no xerocam livros inteiros, ao invs de comprar os livros?), bem como o uso no-autorizado de material alheio (leia-se uso de software no registrado). Porm, o problema da Internet mais srio: quem xeroca um livro ou instala uma cpia pirata do Windows 95 no est dizendo que o autor destes produtos. J quem usa em um site textos e fotos alheios, sem colocar os crditos, praticamente se coloca como autor dos mesmos. Outro ponto: uma empresa que produz software consegue facilmente o apoio da lei (que neste aspecto clara), quando descobre uma pirataria. E aquele que descobre um plgio na Internet recorre a quem? A lei clara? 1.2 Legislao compreensvel a controvrsia sobre direito autoral. A obra de arte, o produto da criao, peculiar. Gera um interesse universal e, sem dvida alguma, um direito tambm especial: o direito que tem o cidado em qualquer tempo e em qualquer lugar apreciar uma obra de arte. H, dessa forma, dois pontos: 1) o autor, como proprietrio da obra que cria, dela pode dispor; 2) mas, essa obra , tambm, feita para o pblico. Sem ele perde-se a finalidade maior da obra. A propriedade intelectual como um todo, e o direito autoral em particular vivem, nesta segunda metade da dcada de 90, a maior ameaa que j sofreram nos mais de dois sculos de existncia da tutela legal especfica.Vivemos novamente a era da crescente necessidade de uma legislao supranacional, no momento em que as redes e os satlites transformam as fronteiras fsicas em meras referncias geogrficas. A transio de uma sociedade ps-industrial para a sociedade da informao no acontecer da noite para o dia, como to pouco aconteceu repentinamente a mudana de sociedade agrria para a sociedade industrial. No h dvidas de que estamos atravessando um perodo de transio, ocasio adequada para a reavaliao dos nossos propsitos e objetivos, passando em revista o arcabouo legal que nos circunda.

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

36

A Compuserve, por exemplo, foi obrigada a desconectar cerca de 200 clientes da rede porque veiculavam matria pornogrfica, por deciso de um tribunal alemo. Como impossvel bloquear as transmisses para determinados pases, a conseqncia de uma deciso judicial em determinado territrio tem efeitos em todos os demais. Qualquer modalidade de reproduo na era digital torna-se imediatamente uma distribuio j que, pelo simples fato de estar na tela de um computador ou de vrios simultaneamente, a obra j est sendo multiplicada e copiada, ocorrendo a violao dos direitos autorais. A prpria tecnologia, atravs dos cdigos de segurana, criptografia, etc... est se encarregando de disciplinar os novos usos gerados Poe ela mesma. Esta tecnologia, aliada a uma proteo jurdica globalizada e crescente conscientizao do usurio permitir, em futuro prximo, a circulao das obras protegidas pela Internet em proveito de todos. 1.3 Exemplos de Argumentos de Plagiadores, e os Contra-Argumentos Vlidos. Nesta seo tem-se trechos de e-mails onde o Augusto Csar B. Areal comenta os e-mails respondidos pelos plagiadores. "(...) o que de maneira nenhuma constitui-se na ao citada em no assunto (subject) de seu e-mail, o qual refere-se a crime de coao sob utilizao de arma branca ou de fogo para obteno de propriedade alheia. Acusao, alis, que pode perfeitamente ser objeto de processo judicial por calnia e difamao (considerando que vrias pessoas possuem cpia testemunhal do seu delito criminal)". A acusao qual se refere o autor do texto acima a seguinte Ele enviou para os chefes do plagiador um e-mail com o subject tive material roubado. Mandou o referido e-mail porque o plagiador havia copiado uma relao de links comentados de autoria do Augusto Areal, e no havia respondido mensagem que lhe enviara em carter privado. "Pensei que voc fosse ficar orgulhoso" Foi isso que ouvi, por telefone, do mesmo sujeito que ameaou me processar por calnia, por eu ter usado a palavra 'roubado'. No entendi: ficar 'orgulhoso' do qu? Seria que ele no estaria sendo meio convencido, ao achar que ser copiado por ele motivo de 'orgulho'? "Se voc no quiser que ningum copie, no ponha na Internet. E' bobagem achar que vai ter exclusividade sobre o contedo na Internet. Besteira pura (...) isso e' a Internet, cara. O jeito correto de lidar com a situao no e' falar de porcaria de lei de direito autoral, e sim relaxar e aproveitar enquanto a internet ainda e' nossa." Um raciocnio no mnimo algo pitoresco: "se voc no quiser que ningum copie, no ponha na Internet". Outras sugestes pela mesma lgica: "se voc no quiser que ningum roube o seu carro, nunca o retire da garagem"; "se voc no quiser ter sua correspondncia extraviada, no a ponha no correio". Viu como fcil evitar problemas?

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

37

"NO GOSTEI DE VSa. DIZER AO FINAL DE SEU SITE QUE O USO DE SUAS FOTOS DE FORMA NO AUTORIZADA PODERA SER OBJETO DE AO JUDICIAL, SE ASSIM FOR PORQUE EXPOE NA INTERNET, SENDO A INTERNET UMA REDE COMUNICAO DAS COMUNICAES AO MESMO UMA REDE DE AMIZADE E NEGOCIOS NADA MAIS JUSTO QUE SUAS FOTOS SEJAM USADAS POR QUEM QUER QUE SEJA, ONDE QUISER (...)" Achei interessante a afirmao acima, pois o raciocnio dele poderia ser aplicado tambm para justificar a cpia indiscriminada de livros, de CD's. Ainda bem que existem leis, pois se cada um pudesse fazer o que acha "justo", o mundo seria uma baguna bem maior do que j ...

PUBLICAR SUA WEB Quando a sua Web estiver pronta para ser exibida na World Wide Web ou na intranet de sua organizao, voc deve public-la. Publicar uma Web basicamente copiar os arquivos de sua Web para um destino, tal como um servidor Web, onde outras pessoas possam procurar a Web.

ANTES DE PUBLICAR SUA WEB Antes de publicar a sua Web, voc deve ter certeza de que ela esteja pronta verificando se h hyperlinks desfeitos, verificando se as pginas esto com a aparncia desejada e testar a Web para garantir que tudo esteja funcionando. Uma boa maneira de garantir isso visualizando sua Web em um navegador Web e navegando no site e revendo o status de seus arquivos no modo de exibio Relatrios. Se voc vai publicar a sua Web na World Wide Web, precisar de um Provedor de servios de Internet (ISP), de preferncia um que tenha um servidor Web com as extenses de servidor do FrontPage instaladas. Tambm ser necessrio conhecer o local do servidor Web de seu provedor de servios de Internet para publicar a sua Web, alm do nome do usurio e a senha, se necessrios. Para obter informaes sobre Provedores de servios de Internet (ISPs) que usam extenses de servidor do FrontPage (conhecidos como Provedores de presena da Web), clique em Publicar no menu Arquivo e, em seguida, clique no boto Provedor.

COMO AS EXTENSES DE SERVIDOR AFETAM A PUBLICAO H vrias vantagens em publicar em um servidor Web que tem as extenses de servidor do FrontPage instaladas:

Sua Web ter funcionalidade completa do FrontPage quando for publicada. Sem as extenses de servidor, determinados recursos no funcionaro, tais como a

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

38

maioria de manipuladores de formulrios, formulrios de pesquisa, contadores de acessos e recursos de componentes. O FrontPage atualizar seus arquivos e hyperlinks toda vez que voc publica a Web, o FrontPage compara os arquivos em seu computador local com os arquivos no servidor Web. Por exemplo, se mover um arquivo em sua Web local, o FrontPage atualizar e corrigir quaisquer hyperlinks para ele e, em seguida, far as mesmas correes nos arquivos do servidor Web na prxima vez em que a Web for publicada. Aps ter publicado a Web, voc poder edit-la diretamente no servidor Web do provedor de servios de Internet (no entanto, a verso local de sua Web no permanecer em sincronizao).

Se o seu servidor Web tiver as extenses de servidor, o FrontPage poder publicar sua Web usando HTTP (HyperText Transfer Protocol). Caso contrrio, sua Web ser publicada usando FTP (File Transfer Protocol).

ESCOLHENDO OS ARQUIVOS A SEREM PUBLICADOS

Voc pode escolher quais arquivos deseja ou no publicar. Por exemplo, se uma pgina estiver incompleta ou no fizer parte diretamente de sua Web, poder marcar o arquivo como No publicar. Mais tarde, se decidir publicar o arquivo, por exemplo quando tiver concludo uma pgina, poder alterar seu status para Publicar. Certos arquivos no devem ser publicados novamente aps a primeira publicao de sua Web. Por exemplo, crie uma Web com um livro de convidados e, em seguida, publique-a. Posteriormente, atualize suas pginas da Web se voc publicar todos os seus arquivos, incluindo o arquivo que registra as informaes do livro de visitantes, voc salvar um livro de convidados em branco sobre o existente, perdendo todas as informaes. Outros exemplos incluem pginas com um contador de acesso, Webs de discusso e catlogos (se estiver executando o Index Server). Voc tambm pode escolher para publicar apenas os arquivos que foram alterados. O FrontPage ir comparar os arquivos na Web de trabalho em seu computador local com os arquivos publicados no servidor Web. Se o FrontPage detectar uma verso mais recente de um arquivo em seu computador local, o arquivo ser publicado no servidor Web.

GERENCIANDO OS ARQUIVOS NO SERVIDOR WEB

Se o seu provedor de servios de Internet (ISP) estipular um limite de tamanho no servidor Web, o gerenciamento de arquivos uma necessidade. Excluir periodicamente arquivos no-utilizados ou antigos (principalmente grficos) pode manter o tamanho de sua Web reduzido. Aps publicar uma Web, o FrontPage pode

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

39

sincronizar os arquivos em sua Web local com os arquivos publicados no servidor Web, toda vez que voc publicar novamente. Aps excluir os arquivos de seu computador local, o FrontPage perguntar a voc sobre a excluso dos mesmos arquivos no servidor Web quando publicar novamente sua Web e escolher para publicar apenas as pginas que foram alteradas. Se o seu servidor Web usa as extenses de servidor do FrontPage, o FrontPage tambm pode combinar outras aes no servidor Web, tais como mover ou renomear arquivos, na prxima vez em que voc publicar a sua Web. O FrontPage atualizar suas barras de navegao, bordas compartilhadas e hyperlinks no servidor Web para corresponder s aes executadas na Web em seu computador local.

COMO COLOCAR A SUA HOME PAGE NO AR Primeiramente, voc ter que achar um servidor que hospeda paginas gratuitamente, ou se preferir ter domnio prprio, ai vai de cada um. Quem preferir colocar a sua Home Page em um servidor grtis, pode acessar esse endereo: (www.freeservers.com). Quando entrar voc dever fazer um cadastro, simples, o problema e que e em ingls. Depois de terminar o cadastro, voc receber por e-mail um cdigo onde ter que colocar na ultima seo do cadastro. Colocado o cdigo voc acabou de liberar o espao no servidor da freeservers. Depois de ter recebido o primeiro e-mail com o cdigo voc receber outro, com o seu login, sua senha, e seu endereo para fazer as transferncias de arquivos da sua Home Page. Para fazer essa transferncia voc poder utilizar o programa WSFTP.

COMO UTILIZAR O PROGRAMA WS-FTP

Esse programa e utilizado para fazer transferncias de arquivos, ou seja, voc poder colocar a sua Home Page no ar, e atualizar quando necessrio, mandando os arquivos para o servidor que voc escolheu para colocar a hospedar seu site. Essa e a tela principal do programa:

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

40

Colocar o endereo do servidor onde voc escolheu para colocar seu site no ar. Nome do Usurio (seu login) Senha

Depois de configurado, e s voc clicar em OK, e esperar conectar.

Arquivos do seu Computador

Arquivos do Servidor onde voc hospeda o seu site

Depois de conectado e s fazer a transferncias dos arquivos. OBS.: No esquea de salvar as suas home pages em vrios diretrios para que fique mais organizado e de melhor entendimento.

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages FINALIZANDO

41

Agora voc j tem conhecimento suficiente para criar seu prprio Web Site Faa incluso de sua pgina em todos os sistemas de busca conhecidos www.achei.com.br www.aonde.com.br www.quem.com.br www.zeez.com.br www.cade.com.br www.radaruol.com.br www.surf.com.br www.yahoo.com.br www.altavista.com.br www.altavista.com www.lycos.com www.yahoo.com www.webcrawler.com www.excite.com www.infoseek.com www.hotbot.com

ENDEREOS INTERESSANTES PARA A CONSTRUO DA SUA HOME PAGE

Java - Applets - Free Java Applets - javapowered.com http://www.javapowered.com/ http://javaboutique.internet.com/ Contador http://www.thecounter.com Imagens/ Fundos e Clips http://www.microsoft.com/clipgallerylive http://microsoft.com/gallery/files/images/default.htm Texturas e Backgrounds: http://www.sfsu.edu/~jtolson/textures/textures.htm http://www.meat.com/textures Som nas Paginas: http://www.deol.ru/~queen/jalfrezi/tnt.htm Streaming de audio e video: http://www.microsoft.com/ntserver/netshow http://www.real.com (Real audio e real vdeo)

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Semana da Engenharia de Computao Criao de Home Pages

42

Programas CGIs para Formulrios e Bases de Dados. Programao CGI http://www.builder.com/programiming/cgi Programao em Perl http://www.builder.com/programming/perl Acesso a base de dados http://www.builder.com/programming/databases Base de Dados usando ASP da Microsoft http://support.microsoft.com/support/kb/articles/q175/7/70.asp Base de Dados usando Cold Fusion http://www.allaire.com

BIBLIOGRAFIA Plgio e Direito Autoral na Internet Brasileira http://www.persocom.com.br/brasilia/plagio1.htm A Propriedade Intelectual na Universidade Pblica: Privilgio Instituicional ou Bem Comum? http://www.cecae.usp.br/guia/Altec99.html A Reproduo no autorizada de obras literrias na Internet http://www.jus.com.br/doutrina/viodaut.html Alguns Aspectos Jurdicos da Internet no Brasil http://www.jus.com.br/doutrina/aajib.html Alguns Comentrios sobre o Registro de Domnio no Brasil http://www.jus.com.br/doutrina/domain.html

OBSERVAES

Esta apostila foi elaborada pelo aluno Wagner Tanaka Botelho do curso de Engenharia de Computao da Universidade Catlica Dom Bosco Campo Grande - MS

Wagner Tanaka Botelho - Engenharia de Computao UCDB

Você também pode gostar