A s s u n t o s  de WebMasters :

   Construir uma Home-Page   A minha página na Internet  Tarifários

  Enviar uma página para a Internet   Html Lista de Tags  Tabela de Cores

Introdução   Em busca do software perdido  Páginas digitais ao vivo   Placo montado para o Director  HTML para Todos  

Aposta na Simplicidade  Grande conteúdos on-line

O quê? Toda a gente fala da Internet e você ainda não pertence ao mundo da "grande rede"? O Vbruno© dá-lhe a oportunidade de aprender a fazer o seu "site" .

A proliferação de "sites" na Internet já não é novi­dade nenhuma. Existem páginas para quase to­dos os assuntos que a sua imaginação possa conce­ber. Pense numa coisa qualquer, faça uma busca e de certeza que vai encontrar referências a esse tema, por mais estranho e esotérico que este seja. No entanto, apesar do crescimento diário do número de páginas, a verdade é que existem ainda muitos cibernautas que são, apenas, navegadores, e não publicam as suas páginas pela simples razão de não saberem como é que o podem concretizar.Para já o HTML não é, à partida, muito user ftiendly para os neófitos. Mas um dos muitos editores Web que existem no mercado pode revelar­-se uma boa opção.

 As ferramentas

   Existem inúmeras soluções para quem pretenda criar um "site". Desde as mais básicas, às mais profissionais. Ou seja, nunca será por falta de ferra­mentas que o seu "site" não vai ser uma realidade. Uma pequena busca na Internet oferece-lhe a pos­sibilidade de escolher entre uma grande variedade de aplicações. A grande maioria é "freeware"  ou seja, ~ absolutamente gratuita.Não se preocupe, porque fazer um "Web site" uti­lizando uma destas ferramentas é tão complicado co­mo utilizar a edição gráfica de um dos programas a que já se habituou. Por outras palavras, é muito fácil. A primeira, e primordial, preocupação é a de saber o que pretende colocar no seu "site" e de que forma é que pretende efectuar a apresentação desse conteúdo. Aqui entra aquilo a que se chama o Web Design.Se navega com frequência, já reparou que o visual das páginas é condição essencial para determinar a sua permanência durante alguns minutos, ou o regresso, ou ainda, a eleição das páginas para figurar na sua pasta de Favoritos. Este é, ou deveria ser, o desejo de qualquer Webmaster.

 Artistas digitais

   Existem algumas premissas que tem de cumprir para que o seu 'site" seja um sucesso. São pequenas dicas que lhe podem parecer irrelevantes, mas que fazem toda a diferença. Por exemplo escolha uma fonte que tenha a certeza de que existe na maioria dos computadores, tipo Times New Roman ou Anal. In­clua os seus contactos pessoais, de preferência o en­dereço de e-mail. Efectue uma versão "text-only" (ou seja visualizar apenas o texto), para os ciberriaútas que tenham um "browser" que só funcione dessa for­ma, ou recorrem à opção de "desligar" as imagens no Internet Explorer e no Navigator. Finalmente, tenha o cuidado de fazer um "Web site" que fun­cione nos diferentes "browsers" - e que funcione visualmente, independentemente do tamanho da janela onde é visualizado. Mas estas são apenas algumas pequenas dicas. Neste tema de capa poderá aprofundar os seus conhecimentos nesta ar' e a. Investigámos alguns dos programas gratuitos que existem na Internet e elaborámos quatro tutorais que o vão guiar na construção do seu "site". Conheça ainda alguns exemplos de "sites" bem concebidos, e veja o futuro da Internet com a implementação em massa do aces­so de banda larga. Aproveite e seja bem vindo ao universo da "Rede que mudou o mundo".    

Quer fazer o seu "Web site" e não sabe por onde há-de começar? Nada melhor do que ir à Internet buscar as ferramentas que precisa .

Em busca do software perdido !!!

De certeza que a maioria dos leitores já sabe que a Internet é o veículo de eleição para passar in­formação da forma mais rápida. No entanto, nunca se decidiu a fazer o seu "site", porque tem a ideia pré-concebida de que vai ter de aprender uma linguagem informática estranhíssima denominada por HTML (Hyper7ext Murk-up Language). Mas não precisa de se preocupar. A fazer justiça ao já dito anteriormente, a Internet é o veículo ideal para a transmissão de informações, e é em vários "sites" que vai poder encontrar toda a informação de que necessita, desde programas a fotografias e "cli­part". Quando decidir que vai para a frente com o projecto do seu "site", deve preocupar-se em delinear qual é o objectivo que pretende atingir com a sua pre­sença na Internet. É uma página exclusivamente pes­soal? É para o seu grupo de Paintball? E para vender as suas colecções de selos? Consoante o propósito, assim terá de ser o design do seu "site".

( Depois de ter decidida que "site" pretende fazer, pode ir a Internet  procurar a software que vai utilizar Aqui estão dais exemplos: a Free.com e a Tucows)

Para começar, faça o plano, num papel, do seu "site". Um esquema que permite saber qual é a pági­na de abertura, e de que forma é que as páginas vão interagir umas com as outras. Depois, preocupe-se com o espaço que a sua página vai ocupar. Os Inter­net Service Providers (ISP) portugueses estão a ofe­recer entre 5 a 10 MB de espaço.

De seguida, há a escolha do software em que vai trabalhar. Aqui, pode decidir-se por editar, pelas suas próprias mãos, o código HTML (opção destinada a utilizadores mais avançados) ou utilizar um programa  de edição para a Web. Este efectua, automatica­mente, a conversão para HTML. Não se esqueça de que o objectivo primordial de um "site" deve ser a in­teractividade com os cibemautas. Insira pormenores como os seus contactos e um livro de registos.

   Já tomou todas as decisões. Já planeou e deu um nome à sua página. Agora há que pegar na "picareta" e começar a explorar a Internet à procura do melhor software, das melhores fotos, "clipart" ou sons. Não se preocupe, porque nós estamos aqui para lhe facili­tar a vida. Para começar, vamos descarregar o pro­grama que vai ser o principal responsável pela cons­trução do seu "site": o editor Web. Este passo pode ser ultrapassado facilmente se tiver instalado o Offlce 2000. A versão deste ano da "site" de produtividade da Microsoft já traz o FrontPage, um dos programas mais simples, graças aos seus menus de ajuda, para fazer o seu "site". De qualquer forma, se não tiver este programa, vá ao miarror do Tucows, a partir do servidor da Telepac, e dirija-se à parte do software (http://tucows.telepac.pt ). Aqui, escolha o seu sis­tema operativo e depois dê uma vista de olhos nos menus HTML Tools e Internet Tools. Pode escolher entre editores para principiantes ou mais avançados.

(A Internet está repleta de "sites" onde no poder encontrar tudo o que necessita para preencher a seu "site". Basta utlizar as motores de busca para encrostar  a que pretende !)

Editores à borla!

   Vamos ver os editores para principiantes. A lista é considerável e, na maioria, em freeware. Ou seja, absolutamente grátis. Aconselhamos, por exemplo, o CoffeeCup Free HTML, o Hot Dog Junior e o Web Scrapbook. Estes três programas são de fácil instalação. Por exemplo, se instalar o CoffeeCup Fne HTML vai deparar com uma interface muito amigá­vel e em tudo semelhante ao que já encontrou em outros programas com que trabalha habitualmente. Principalmente para fazer edição gráfica. Um dos outros "sites" onde se pode dirigir pura obter software é no Free (www.free.com ). Aqui, também pode escolher entre uma infinidade de apli­cações, basta saber o que procura. 

E o "recheio"'

   Quer fotografias de alguém ou de algo em especial? Faça uma busca com o nome num dos muitos motores de busca da Internet. Por exemplo, basta ir ao "site" da Yahoo! e fazer uma busca em Steven Spielberg. Resultado: duas categorias e 23 "sites". Agora basta dar uma volta por estas páginas à procura de informações e de fotografias.

Saiba como desenvolver as suas página pessoais utilizando os recursos do Adobe GoLive .

Páginas digitais ao vivo

O GoLive, da Adobe, é uma das melhores ferra­mentas actualmente disponíveis para a criação de Web sites". Neste artigo, mostraremos como tirar partido das suas funcionalidades para produzir a sua página, de uma forma simples e fácil. Como ponto de partida, claro está, é necessário criar um novo "site" e acrescentar ficheiros. Para is­to, basta seleccionar File 1 New Site 1 Blank. Isto irá criar um novo "site" de raiz. De seguida, aparece uma janela onde deverá indicar o nome do "site" e o directório onde irá armazená-lo  localmente.  Preencha  os  dados necessários e carregue em 0K. O novo    e então criado na máquina local. Agora,  iremos  criar,  primeiro,  os  ficheiros necessários. No exemplo que estamos a desenvolver, iremos precisar de três páginas, mais uma adicional, para servir de menu no lado esquerdo. As páginas a criar podem ser chamadas menu.html, apresentacao.html, amigos.html e bookmarks.html. Para adicionar uma nova página ao "site", escolha a pasta Site na janela da "palete". Para cada um dos ficheiros a criar, arraste o icone correspondente a Generic Page para a janela do site", com a pasta Files seleccionada. Faça isso para cada uni do ficheiros mencionados anteriormente.

 Acrescentar conteúdo a uma página

  Vamos agora fazer a página de apresentação. Para abrir a página de apresentação, faça um duplo dique sobre apresentacao.html, na janela do "site". Este procedimento abre a janela de edição de páginas.  O  processo de inserção de texto é simples. Os comandos de formatação são equivalentes aos de um processador de texto típico. No exemplo aqui seleccionado sobre a frase "Página pessoal de  seleccione, no menu, Format /Header 1. De seguida, selec­cionar Fonnat 1 Alignment 1 Cen­ter, para centrar a frase. Para criar um "link" sobre uma frase, é preciso seleccioná-la e, de seguida, Clicar no símbolo da "corrente", a azul, na segunda barra de opções do Cio Live. Introduza oURL corres­pondente. Para alterar o título das páginas na pasta do Layout, faça duplo clique ao lado da página, no ícone com o formato de uma folha de texto.

 Inserção de imagens

  Para inserir uma imagem abaixo do texto, arraste o ícone Image, da janela Palette, para a janela da página "apresentação.html". A seguir, dique no botão Browse, na janela Image Inspector, para um dicar onde se encontra a imagem desejada. Acabada a página de apresentação, prosseguimos para a página de "boolcmarks". Faça duplo dique agora no ficheiro "boolunarks.html", dentro da pasta Files da janela do "site".

 Criar tabelas

Depois de escrito o tftulo da página, como está acima descrito, crie uma tabela com seis linhas e duas colunas. Para isso, arraste o ícone Table, da janela Palette, para dentro da janela da pági­na "boolcmarks.html". Indique as co­lunas e linhas e preencha a tabela com os seus "sites" favoritos, criando os "links" como já foi explicado. Para criar o cabeçalho, dique por baixo da primeira e da se­gunda célula e escolha a opção Header Style, na janela Table Inspector. Para criar um tabela como fizemos na página "ami­gos.html", basta colocar o valor do Border em O. Isto serve para organizar o texto na página, pois não é possível o uso de "tabs". 

Criar "frames”

   Seleccione, na janela do "site", o ficheiro "index.html". De seguida, seleccione a pasta Frames, na mesma janela. Na janela Palette, seleccione a pasta Frames e arraste o segundo ícone para "index.html". A cada um dos "frames", vamos atribuir uma página. Para isso, dique onde se lê No Reference no "frame" da esquerda. Na janela Frame Inspector, faça Browse e seleccione o ficheiro "menu.html". Depois, faça o mesmo no "frame" da direita e seleccione o ficheiro "apresentacao.html". Na pro­priedade Name, nessa mesma janela, dê o nome "detalhado". Assim, identifica o "frame" direito que será usado mais tarde.

 Fazer o menu

   Abra agora o ficheiro "menu.html". Vamos criar uma entrada para cada uma das subpáginas: apresentacao.html, bookmarks.html e amigos.html. Siga o procedimento já indicado antes para criar as ligaçoes. Para cada um dos "links", na janela Text Inspector escreva "detalhado", na propriedade Tar­get. Note que "detalhado" corresponde ao nome da­do ao "frarne" direito em "index.html". Esta pro­priedade indica onde o "link" deve ser aberto.

 Preferências e "upload"

Carregue agora no ícone das preferências do "site". Seleccione FTP Preencha então os dados da sua ligação F~FP e carregue em 0K. Depois de configuradas as preferências, é necessário ligar-se ao servidor FTP Para isso, car­regue no ícone presente na barra de ferramentas para o efeito (FTP Server ConnectlDisconnect). Depois da ligação estabelecida, escolha o direc­tório correcto no servidor para onde vai mandar os seus ficheiros. Seleccione os ficheiros na pasta Files da janela do "site", e dique sobre o ícone ao lado direito do ícone de ligação, para fazer o "upload" dos seus ficheiros para o servidor na Internet. E pronto: o seu "site" já está operacional. 

Use o Macromedia Director para produzir documentos multimédia e introduzir interactividade no seu "Web site^"

Palco montado para o Director inicio

O Director, da Macromedia, é uma aplicação de authoring multimédia, com capacidades de produção de animações em ShockWave ou, em alter­nativa, executáveis autónomos. As animações em ShockWave podem ser usadas para acrescentar interactividade a páginas Web. Aqui, vamos ver como é possivel criar animações simples com o Director, nomeadamente:

&           Animações básicas, como interpolação e movimento de sprites.

&         Comportamentos básicos de controlo, como salto de "frames", voltar atrás, etc.

&         Publicação na Web.

Como se pode observar, o Director usa a metáfora do cinema e das artes do espectáculo.

 Fazer uma cortina

Um efeito bastante simples de efectuar com o Director, é o efeito de cortina. Siga os seguintes passo 

1 Construa o rectângulo a preto que vai servir d fundo. Para isso, seleccione a ferramenta "Rectângulo" da caixa, e insira uma na janela de stage. Ajusi o rectângulo para toda a área do espaço. Ajuste existência do rectângulo no score do "frame" 1 a 

2 Agora, adicione um rectângulo em branco a stage. Ponha-o com a mesma área que a do rectângulo a preto. Ajuste também a área temporal de mo do a que esteja de acordo com o rectângulo a preto. 

3 Seleccione o último "frame" (o 30) na barra correspondente ao rectângulo branco.

4 Com o rectângulo assim seleccionado, ajuste seu tamanho de modo a ficar com o aspecto final ~ cortina. Ao efectuar a alteração de tamanho, o último "frame" muda o símbolo para um losango.

5. O Director vai executar automaticamente a interpolação do tamanho do rectângulo entre os "frame”

 Botões e pausa

Vamos inserir alguns botões e demonstrar como possível alterar o fluxo de controlo no Director.

2.  Com o comportamento seleccionado na janela de Cast, arraste-o para a janela de seore, para o 'frame" final (30), no elemento por cima da régua.

3 Vamos agora inserir um botão. Seleccione a ferra­menta Button, e arraste para o Canvas. Certifique-se de que tem o "frame" 30 seleccionado na barra tem­poral. Atribua-lhe o nome "Letras". Na janela tempo­ral, de-lhe uma duração de apenas um "frame".

Movimento de sprftes

Vamos agora ilustrar o movimento de sprites. Para isso, vamos fazer um exemplo com texto animado

1 O texto animado só irá aparecer quando se carrega no botão "Letras"; por isso será criado a partir do "frame" com o comportamento de Stop (o "frame" 31). Crie o texto e posicione-o de acordo, através da ferramenta de texto. Atribua uma duração do "frame" 31 a50.

2.  Como texto seleccionado no "frame" 31, carregue no canto superior direito do rectângulo de selecção, onde se encontra um pequeno círculo azul; arraste o círculo até definir o percurso pretendido.

3.  Corra a animação a partir do "frame" 31.

 Controlo

Falta apenas atribuir ao botão a função de mostrar o texto flutante. Basta criar um comportamento para saltar o fluxo da animação para o "frame" 31.

1.  Crie um novo com­portamento,  Go to Frame X Button. Este comportamento está

disponível na janela de bibliotecas sobre a pasta Navigation. Arraste o comportamento para a janela de Cast.

2.  Depois de criado o comportamento, ar­raste-o de novo para a janela de Stage. Ao

largar sobre o botão, aparece uma caixa de diálogo para atribuição do "frame" para qual se deve saltar ao carregar no botão. Atribua o "frame" 31.

3.  Execute de novo a animação a partir do "frame" inicial. Ao carregar no botão, o texto aparece.

 Publicação na Web

Para publicar. basta executar Publish, no menu File. Um "browser" é automaticamente aberto.

Vamos explicar algumas técnicas que vão ajudá-lo a criar, com o FrontPage 2000, a sua página pessoal - ou, quem sabe, uma página empresarial

HTML , para todos

   O  que é afinal o HTML (HíperText Markup Language)? Não é mais do que a linguagem que é utilizada na Internet para que os "browsers' que usamos todos os dias consigam perceber o que cada instrução quer dizer, e no que se traduz em termos práticos. É o meio que usamos para especificar como queremos que um texto  como este que está a ler possa ser apresentado. Não é o nosso objectivo tomálo num expert em HTML, mas apenas explicar como empregar algu­mas técnicas básicas. Para isso, vamos recorrer ao FrontPage 2000 da Microsoft - embora para certas partes deste artigo, possa também usar o Word 2000. Qualquer pessoa pode criar uma página. O que di­fere estas páginas pessoais das páginas feitas por em­presas especializadas não está no HTML, mas sim noutras tecnologias, como Java, JavaScript, Perl, PHP3, ASP e outras. No entanto, estas tecnologias apenas representam uma parte do processo de con­strução de uma página ou de um "site". A parte mais importante é conseguir apresentar o conteúdo numa forma gráfica mais apelativa.

 A sua primeira página

  O FrontPage 2000 ajuda-o a definir qual tipo de página que deseja criar. Para isso basta fazer Filei New e aparecer-lhe-á uma janela que contém vários poderá escolher se prefere o texto disposto em colunas ou de outra forma. Quando escolher o estilo da sua página, irá apare ser uma janela. é reparar bem, no final desta janela vai encontrar três separadores que são ferramentas de trabalho importantes: NormaliHTMLIPreview. A visualização Normal é a que será mais utiliza da, pois permite-lhe fazer quase tudo o que desejai através dos menus ou botões das barras de ferramentas. Quando chegar a um ponto em que queira perceber qual o resultado de cada instrução na linguagem HTML, deverá mudar para esse mesmo separador, ele dirigir-se-á para a parte do código que diz respeito à instrução que acabou de dar. Assim, quando estiver à vontade para retocar algumas coisas do código, faça-o sem medo  mas, primeiro, guarde o faça uma cópia de segurança, não vá perder todo seu trabalho. Quando desejar ver o resultado do sei esforço e como ele aparecerá quando for publicada na Internet, use o separador Preview.  Através do Word 2000, pode também desenhar sua página e, no final, basta guardar no formato HTML (File/Save As HTML). É claro que não ter ao seu dispor todas as ferramentas do FrontPage, nem tudo o que vê será implementado tal como esta mas as diferenças são mínimas. No que se refere ao texto, pode utilizar qualquer programa de texto que queria para escrever , e depois ,  basta fazer um Copy desse texto, seguido de um Paste no FrontPage, no local onde o deseja colocar.

 Tudo ligado

  Uma página de texto, sé por si, não e nada ou se­ja, as páginas da Internet são desenhadas para permi­tirem interactividade entre elas. Para isso, usamos os hyperlinks". Um "hyperlink" pode ser feito para um texto ou uma imagem bastando, para isso, selec­cionar o que deseja e escolher a opção Hyperlink, no menu Insert. Há duas formas de ligar o que seleccio­nou: a um outro ficheiro (.HTM, .HTML, .SHTML, ASI, .DOC, .XLS e outros ainda) que esteja no seu directório, ou directamente a uma outra página que já esteja a funcionar na Net. Existem outros pormenores aos quais deverá prestar atenção, que são as opções desta janela, nomeadamente o Bookmark e o Target Frame. En­tende-se como um "bookmark" um ponto de referên­cia que deseja assinalar. Por exemplo, se este artigo estivesse publicado na Internet, ele encontrar-se-ia dividido em várias partes ou capítulos, em que cada capítulo poderia ter um "bookmark" associado, onde seria possível, através de um "hyperlink", aceder a outro documento, sem ser necessário sair daquele onde está. A principal vantagem do "bookmark" é o facto de se poder saltar" directamente para um paragrafo específico, sem ter de "correr" o ficheiro todo.Fazer um "boolznark" é simples. Basta seleccionar o texto ou imagem e escolher a opção Bookmark, no menu Insert. Se quiser utilizar um           "bookmark" de uma página (HTML), só tem de fazer um "hyperlink", escolher o ficheiro e, nas opções, escolher o "bookmark" que deseja.

 O poder dos "frames"

 No que se refere ao Target Frame, é utilizado quando estamos a recorrer a um método de estrutu­ração de páginas, que se baseia na existência de "secções", ou &visões do ecrá em janelas diferentes. Através dessa opção, pode-se "dizer" para que secção do ecrá deverá ir o conteúdo da página à qual estamos a fazer o "hyperhnk". Os "frames" são formas de estruturar um "site", para que possamos ter um pouco mais de interactivi­dade entre as nossas páginas. De certeza que já visi­tou páginas em que do lado esquerdo, ou no topo, es­tá um conjunto de botões que funcionam como o menu de todo o "site". É aí que vai encontrar "hyperlinks", que direccionam para outras páginas, dentro ou fora do "site". Suponha que quer que, no lado esquerdo da sua janela, apareçam sempre os mesmos botões de nave­gação - por exemplo, colocar no topo o logó tipo da sua empresa e os seus patrocínios ou promoções. Poderia escolher um tipo de "frames" em que a janelasó estivesse dividida em três partes, para poder ter es­sa funcionalidade. Para este exercício vamos definir alguns passos que o irão ajudar:

1 Normalmente, para se fazer algo novo, faz-se File/New; a diferença começa a partir do momento em que deve escolher o separador Frames Pages e, no Preview, escolher o tipo de disposição que deseja.

2 Após ter escolhido o tipo de disposição, irá apare­cer uma janela. O seu princípio de funcionamento baseia-se em definir qual a página que vai ficar em cada um dos "frames" (secções). Para isso, dispõe de duas possibilidades: Set Initial Page ou New Page.

Pode começar a fazer uma nova página nesse mo­mento, ou já ter páginas definidas. Se desejar fazer uma nova página, só tem de carregar no botão New Page. Nesse momento, pode começar a construir a página que vai conter os "links" para o seu "site".

Mas, se já tiver cada uma dessas páginas definidas, é ainda mais fácil, pois o processo não é muito diferente do de abrir um ficheiro. Para isso, deve escolher a outra opção, Set Initial Page.

3 O passo mais importante de qualquer trabalho é gravar. Quando trabalhamos com "frames", a forma como o Save é executado é diferente do Save normal de qualquer outro programa.

 Seja criativo!

Quando fazemos um Save, podemos definir para cada página o nome do ficheiro, ou outro qualquer, e o título de cada página, que aparece na barra de títu­lo do "browser". Algumas pessoas escrevem "Welcome", ou "Bem-vindo", mas seja original! A cria­tividade é o bem mais precioso de um Web designer. Ao utilizarmos "frames" não estamos a usar ape­nas um ficheiro para guardar toda a informação. E podemos ter a sensação de que estamos a trabalhar apenas com três ficheiros, mas na realidade são qua­tro: o ficheiro de topo, o da esquerda e o do corpo principal, mas ainda falta um último, que vai conter os parâmetros de localização no disco e da dimensão de cada um dos "frames". Normalmente, chama-se index.htm. Para verificar o código associado, dique no separador Frames Page HTML.

O design de um "site" é determinante para o seu sucesso. Mas não é preciso preocupar-se demais com a utilização de imagens e vídeos .

 Aposta  na simplicidade

Se já navegou nas "ondas digitais" da Internet reparou, por certo, nas grandes diferenças que existem na forma como alguns "sites" estão concebidos. Aliás essa é, em última análise, a razão primordial que o induz a voltar a um "site". Sim, porque a informação é muito importante, mas se esta não estiver apresentada de uma forma "agradável" e atraente, o seu "site" vai ter tantas visitas como o jogo de futebol entre o Imortal de Albu­feira e o Pescadores Unidos da Costa da Caparica. Ou seja, nenhumas. Será, assim, fundamental investir tempo e traba­lho na definição de um bom layout. Quem está habituado a trabalhar com ferramentas de DTP (Desktop Publishing), ou seja, a fazer edição gráfica, sabe que é determinante a es­colha de elementos como a fonte em que vai apre­sentar o seu texto, a cor de fundo da página e a facilidade de visualização. Mas estes são apenas alguns dos pormenores a ter em conta. Fazer um "site" é fácil. Complicado é fazer um que cative o inte­resse do cibernauta.

 E os vencedores são...

O Instituto Superior de Tecnologias e Artes de Lisboa (IEE) decidiu distinguir os "sites" que pri­maram por ser exemplos do melhor que se faz ao ní­vel do design. Os prémios Webdesign 2000, institui­dos pela primeira vez, foram organizados em duas categorias: a Pro e a Open. A primeira era para profissionais e destinava-se a premiar as empresas envolvidas no desenvolvimento dos "sites". A categoria Open estava aberta a participantes em nome individual. O júri do concurso distinguiu o melhor "site", o melhor "site" em HTML e o melhor "site" a utilizar a tecnologia Flash. A estes prémios candidataram-se 116 "sites" e a votação "on-line" englobou mais de 3 mil pessoas. O Troféu Web Design 2000 foi para o "site" da Peugeot, desenvolvido pela Euro RSCG.Na página inicial, é dada ao navegador a hipótese de escolher qual o formato em que pretende consul­tar a página: HTML ou Flash. Claro que a versão Flash é mais apetecível. A navegação no site" e bas­tante fácil e intuitiva, mas a componente sonora poderia ter sido mais bem explorada.O 'site" tem a informação essencial colocada de uma forma sintética e acessível. Existem "links" para o "site" oficial da marca francesa e o visitante tem a possibilidade de deixar os seus contactos, de forma a receber o catálogo do construtor. A animação feita em Flash está muito bem con­seguida e é um bom exemplo a seguir por um cibernauta que esteja a idealizar o seu "site".

 Palavra de ordem: animar!

Na categoria pro para "sites" feitos em Flash, o IEE distinguiu dois, o da Medi acaos e o da Heineken. O primeiro, de uma empresa de serviços e produtos para a área de publicidade, design e multimédia, tem uma excelente animação e faz com que o cibernauta se sinta cativado a experimentar os diversos "links". O bom gosto impera e a facilidade com que se acede à informação é de assinalar. Os menus e submenos estão muito bem imaginados. E um excelente exemplo de como se podem desenhar botões de aces­50 a "links". São quase todos diferentes de página para página, o que representa uma forte fase de planeamento. De destacar que todos os pormenores foram considerados e que falta apenas uma opção para quem pretende visualizar o "site" em HTML. O "site" da Heineken apela a um espírito mais jovem. As animações são muito boas, embora algo pesadas, o que implica alguma demora na abertura das páginas. No entanto, vale a pena esperar. Os sons são muito engraçados e o cibernauta acaba por ficar "preso" à simpática garrafa que é o guia do "site". Aliás, há um pormenor curioso: sempre que é arrastado, o cursor deixa um pequeno rasto de garrafas. Há ligações, por exemplo, para a história da em­presa, concursos, e até para alguns bares portugueses. Na categoria Open, o vence­dor primou pela actilização de um design simples, mas muito dinâmico. Para o cibemauta, existe a pos­sibilidade de escolher qual o formato em que pre­tende visualizar o "site". Há muito humor espalhado por todas as páginas, o que leva o visitante sentir-se curioso por experimentar os "links" que vão surgin­do. O "site" contém ainda a apresentação de um portfólio e os contactos do Weh designer

 E em HTML...

Para a categoria Pro em programação HTML o júri do IEE decidiu atribuir o Webdesign 2000 a dois "sites": o do Pingo Doce, desenvolvido pela Abrini­cio, e o da Alma Design. O do Pingo Doce é sobejamente conhecido. Um "site" destinado ao utilizador que pretende efectuar as suas compras "on-line". O processo é muito sim­pIes e a inserção de algumas, muito poucas por sinal, imagens nas páginas do "site" fazem com que este seja bastante "leve" e de carregamento fácil. Sendo um "site" exclusivamente de compras, de Á simplicidade é um toctor a ter em conta e determinante  na concepção do seu "sito" encomendas, os designers conceberam um sistema de caixinhas bastante fácil de perceber e agradável ao visitante. As possibilidades de efectuar buscas ou o simples facto de poder efectuar um "drilldown" em algumas áreas permitem ao cibernauta chegar fácil e rapidamente à informação que procura. A segmen­tação dos produtos é igual à que encontra num supermercado real, por isso também aqui será difícil o utilizador não interagir com o sistema. O "site" da Alma Design junta a simplicidade àquestão de extremo bom gosto. A escolha das cores e do tipo de letra está muito bem conseguida. Os res­ponsáveis pelo design pouparam na inserção de ima­gens, de forma a garantir que o carregamento seja bastante rápido. A informação é praticamente toda escrita. No entanto, a apresentação das páginas não cansa o visitante. Embora se reconheça que, sendo um "site" empresarial, se destina exclu­sivamente àqueles que pretendam recrutar os serviços da empresa, é um exemplo do que se pode fazer com a exploração da cor e da fonte apro­priada - sem ter de recorrer à animação, nem à in­serção de muitas imagens.

O escolhido dos votantes

Neste concurso do IEE existe também uma ver­tente de votação "on-line". Mais de 3 mil pessoas votaram e elegeram o Webclimbing, dedicado aos fãs do montanhismo. Notícias, entrevistas, mensagens, tudo se pode encontrar neste "site", que, mais uma vez, prima pela simplicidade. Depois de visitarmos estes "sites", a lição para conseguir ter um design aceitável assenta na característica com a qual mais vezes nos deparámos: a simplicidade. Por isso, não se esqueça: se pretende obter um "site" bem concebido do ponto de vista estético, preocupe-se com a informação que pretende disponibilizar, mas não carregue demasiado nas imagens.  

www.peugeot.pt/coupe | www.mediacaos.pt  |  www.heineken.pt  | www.brasil.terravista.pt/claridade/3964 | www.pingodoce.pt | www.almadesign.pt | www.webclimbing.com 

O futuro da Internet passa pelo aumento da largura de banda. Uma condição essencial para o fornecimento de conteúdos multimédia

Grandes conteúdos on-line

Longe vai o tempo em que a Internet era "apenas" uma forma de os investigadores universitários trocarem informações. Com a criação dos primeiros sites" lúdicos, gerou-se uma vontade insaciável nos cibernautas de acederem a conteúdos mais comple­xos. Primeiro, foram os ficheiros para "download" programas completos ou versões em shareware. Ao mesmo tempo, a Net era inundada de fotografias, ficheiros de som e de pe­quenos vídeos. Depois, o MP3, e com este surgiu uma verdadeira "corrida à largura de banda". Os navegadores já não tinham mãos a medir. Podiam ir buscar tudo à Internet. No entanto, ainda queriam mais. Novos conceitos como o Video On Demand e a Web TV começaram a ocupar o Imaginário dos fabricantes de hardware e software.

O  imperativo da banda larga

Os 56 Kbps fornecidos pelas linhas analógicas há muito que já não são suficientes para efectuar o transporte dos dados. Com frequência, os utilizadores fartam-se de esperar pelos "downloads" e acabam por desistir. A RDIS oferece até 128 Kbps, mas implica o dobro do custo: 

o utilizador tem de pagar o equivalente a duas linhas telefónicas. No entanto, a velocidade de transferência de dados já é considerável para efectuar os seus passeios na Net.

Mas a RDIS não é a solução ideal para quem pre­tenda ter acesso aos conteúdos multimédia mais complexos. Aqui, a resposta é, neste momento. o acesso por cabo. Não esqueçamos que estamos a falar do acesso doméstico, ou seja, o acesso que o utilizador individual efectua a partir da sua residên­cia. Porque se estivermos a falar de empresas, temos de considerar as potencialidades e serviços espe­ciais que os Internet Service Providers (TSP) fornecem a este tipo de clientes - como o acesso a linhas dedicadas, por exemplo.

 "O cabo da esperança"

O futuro

No primeiro trimestre do próximo ano o Instituto de Comunicações de Portugal (ICP) vai atribuir as quatro licenças para operadores de UMTS (Univer­sal Mobile Telecommunication Systems) em Portu­gal. Nessa altura, vai saber-se quem é que vai fornecer telecomunicações a uma velocidade ver­dadeiramente impressionante. Um utilizador fixo vai ter acesso à Internet a 2 Mbps. Os utilizadores de telemóveis vão ter acesso a 384 Kbps. Já pode começar a imaginar o que vai poder rece­ber pela sua linha telefónica. Exactamente: tudo o que imaginar. O seu filme favorito, uma transmissão televisiva, livros, aulas. Aqui, a única limitação vai ser a da imaginação dos fornecedores de conteúdos . É óbvio que, inerente a esta evolução da tecnologia, vai estar todo um novo tipo de serviços, que vão passar por inovações como a banalização da videoconferência e, por exemplo, a implemen­tação da telemedicina. E não será demais referir a tão importante, anun­ciada e esperada com impaciência, TV interactiva. O utilizador individual terá a oportunidade de poder, a partir da sua casa, aceder a uma quantidade infindável de benefícios. Os jogos on-line", que já são responsáveis por muito do tempo gasto na Internet pelos cibernautas, vão tornar-se mais complexos e exigentes graficamente. Ao utilizador, resta esperar mais dois anos pelo UMTS, ou meses, con­soante a zona, pelo acesso cabo para poder usufruir das novas ca­pacidades da Internet.

Construir uma Home-Page

     “Existem muitos programas de fácil desenho (disse ”desenho”, não construção) de páginas para serem alo­jadas na WWW Mas, o problema á exactamente esse, quando os problemas acontecem E realmente imprescindível que qualquer Webmaster' se vá familiarizando com o HTML, pois sã assim conseguirá confiança para saber o que fazem esses programas e resolver os problemas quando acontecem..."

     Para fazer uma homepage você não precisa de saber HTML. Basta usar programas como o FrontPape, o Composer ou o PapeMill. Estes programas usam uma linguagem vi­sual ou seja, você trabalha vendo o que e onde estão sendo colocadas as coisas, você não trabalha com os códigos. Mas é aconse­lhável que se tenham pelo menos noções básicas de HTML. A linguagem HTML significa "Hipentext Mark­op Language', gue pode ser traduzido como linguagem de hipertexto baseada em códigos. O HTML é muito fácil. A palavra linguagem, leva a associação com linguagens de pro­gramação, mas você verá que é tão fácil quanto editar um texto no seu editor preferi­do (Word, NotePad....).

     Para que qualquer computador pudesse en­tender os documentos HTML, sem muitas complicações foi definido que um ficheiro, ou programa, HTML seria guardado como um ficheiro de texto simples (não formata­do), mas com a extensão '.htm' ou ".html" e não ".txt". A diferença entre '.htm" e ".html" é que o HTML é mais recente do que o origi­nal HTM, mas poucas diferenças existem. No entanto, significa isto que você pode fa­zer as suas páginas pura e simplesmente no NotePad ("Bloco de Notas", o editor de ".txt" predefinido do Windows) .

 1)  Elementos Básicos

    Os TAGS ou comandos são utilizados para Dar todas as indicações necessárias ao Browser (programa de navegação ou visualização  de páginas da Web) . Estes comandos são digitados dentro do documento da mesma forma que o conteúdo a ser exi­bido. Por exemplo:

 <P> <CENTER> PAGINA 

</CENTER> </P>

 indica que a palavra Pagina deve ser apresentada centralizada na linha, e o elemento <P> indica um parágrafo. No browser ele apareceria como exemplificado na figura.

    Os comandos são delimitados pelos sinais <" e ">", com letras malúsculas apenas para facilitar a visualização, pois você pode misturar ou colocar tudo minúsculo que é a mesma coisa. O uso de letras maiúsculas ou minúsculas é igualmente aceite pelos Browsers. Os comandos, na sua maioria, são do tipo inicio-fim, ou seja, trabalham em pa­res, delimitando um determinado conteúdo. Nesse caso, a tag de fim é idêntica à tag de inicio, mas sempre precedida de uma barra (1) como no exemplo acima e abaixo.

 <CENTER> </CENTER>

     Outros elementos, são solitários, ou seja, não precisam de complemento. Basta um único elemento para fazer a indicação necessária. E o caso do comando <HR>, o qual coloca uma linha vertical na página.

2)Estrutura Básica de um Documento

    A estrutura básica de um  documento HTML é a seguinte :

<HTML>

<HEAD>

<TITLE> Título do documento </TITLE>

 </HEAD>

<BODY...>

 Aqui é  inserido o corpo da página propriamente dita.

</BODY>

</HTML>

Vejamos então a explicação de cada um des­tes comandos:

<HTML>...</HTML>: Indicam o inicio e o fim do documento. Tudo o resto deve estar entre estes dois comandos. <HEAD> </HEAD>: Delimitam a secção de cabeçalho do documento. Trata-se da cabe­ça do documento, é o que vai aparecer na barra de título do browser. Este comando é usado para colocar o título da página nessa barra da janela.

<TITLE> </TITLE>: Indicam o título do do­cumento, o que será apresentada na barra superior do Browser. Estes comandos de­vem estar sempre entre o comando acima.

 <BODY>...</BODY>: Indica o corpo do documento. Entre estes comandos estará a sua página em si (aquilo que desejamos que o visitante veja>. O texto, as imagens... tudo o que será visível no browser.

Neste comando ficam também as persona­lizações da sua página, como as cores, ima­gens para o fundo, cores das letras (se não for especificada será preta), cor dos links, etc.

 3)  As Cores

O principio básico do grafismo por compu­tador são as cores primárias: vermelho (Hed), verde (Green) e azul (Blue). Quando temos a intensidade máxima de vermelho, verde e azul surge o branca.

Em Html cada cortem um código. Para cada um destas componentes - R, G e B - é atribuído um valor, que vai de O para ausência completa até 255 para intensidade máxima. O amarela, por exemplo, tem os valores R:255 C:255 B:C. No entanto, numa página HTML, teremos que converter estes valores para hexadecimal (base 16>. Temos en­tão que contar O,1,2...9, A, B...F Represen­tamos os valores em hexadecimal com um cardinal (#) antes. Assim, 1O=#A, 15=#F 16=#1O, 156=#9C, 255-#FF.

Resultado de tudo isto, umas referências de cores bastante “complicadas”. Para faci­litar as coisas, junto uma tabela de 99 co­res mais utilizadas.

 Para colocar o cor de fundo o comando é "BGCOLOR=#FFFFFF, para colocar a cor no link o comando é “LNK=Cor do link” para colocar a cor no link já visitado é “VLlNK=Cor do link" e, para definir a corno link activo o comando é 'VLINK=Cor do link".

Para colocar uma figura como imagem de fundo na página o comando é:  BACK GROUND nome da imagem.extensão. Ouando se utiliza este "background' é sem­pre bom utilizar igualmente o comando "RG­COLOR', para o caso de não ser carregada (pelo visitante, sendo uma opção de alguns browsers não visualizar imagens a imagem de fundo.

 O comando BODY inteiro seria então:

 <BODY BGCOLOR=#FFFFFF LINK=Cor do Iink

VLINK-- Cor do Iink VLINK= Cor do Iink BACKQ

RDUND=imagem.extenção>

A sequência dos atributos não importa (co­mandos dentro de um comando, como BC­COLOR, LINK, VLINK...( mas é sempre colo­cado um espaço entre os atributos. Lembre-se disto sempre que definir um atributo, em qualquer tipo de comando.

 Esta estrutura inicial é bem simples:

a Todas as tags apresentadas são do tipo início fim, ou seja funcionam em pares, uma para abrir e outra para fechar o comando. b( Em cada documento HTML, sé deve ha­ver uma marca de cada tipo das que foram apresentadas.

c( Existe uma sequência lógica entre as tags. Obviamente você não irá colocar o corpo (<BODY>( antes do que o cabeçalho (<HEAD>).

 Estes detalhes devem ser bem observados pois se existirem falhas o browser não irá visualizar sua página e... como o HTML não é uma linguagem de programação, você nun­ca será avisado de erros cometidos na edi­ção do seu documento. O simples esqueci­mento de uma barra pode mudar toda a sua pagina.

Teste o seu código sempre, e com pelo me­ nos dois tipos  de browsers.

 4)Formatação de Textos

A utilização de diferentes tamanhos de le­tras numa página é importante, pois dará ao visitante uma ideia geral sobre o que se tra­ta o texto em questão, e portanto a possibi­lidade de reconhecer o que mais lhe inte­ressa. Podemos utilizar até seis níveis de tamanhos para as letras, que são numera­dos de 1 (O maior> até 6 (O menor). São tags do tipo início fim.

<H1 >Tamanho 1 </H1>

<H2> Tamanho 2 </H2>

<H3> Tamanho 3 </H3>

<H4> Tamanho 4 </H4>

<H5> Tamanho 5 </H5>

<H6> Tamanho 6 </H6>

Ao contrário do editor de texto o 'Enter" não significa nada na linguagem HTML. Existe um comando para mudar de linha, tal como outros a seguir mostrados.

 <BR> - Quebra de linha. Passa para a próxi­ma linha.

 <P> </P>- Passa para a próxima linha mas deixando um espaço de parágrafo. Chama-se "parágrafo'. Coloca-se um no início do pa­rágrafo e outro no fim.

 <B></B> ou <STRONC></STRONC>­

O que estiver entre este comando fica em negrito.

<l></l> ou <EM></EM> ou <EMPHASIS></EMPHASIS> - O que estiver entre este comando fica em itálico.

<U> </U> - O que estiver entre este coman­do fica sublinhado. Este comando não é muito indicado pois poder-se-á confundir com os links.

Os comandos de negrito, itálico e sublinha­do podem ser usados juntos, mas desta forma:

<B> <I>Texto em itálico e negrito</I></B>

 E não assim..

 <B><l>Texto em itálico e negrito</B></l>

 O comando início que estiver por dentro deve estar por dentro também no comando fim. Caso contrário o comando não terá efeito.

A utilização de linhas horizontais são formas de deixar sua página com mais facilidade de encontrar coisas e tamhám mais apre­sentável. Essas linhas são boas opções para textos grandes em que os assuntos são di­versos.

 <HR SIZE=8 WIDRH=80%>

 ou sem qualquer atributo:

 <HR>

 No exemplo, o atributo SIZE indica que deve ser apresentada uma linha com 8 pixels de espessura enquanto o atributo WIDTH indica que a linha deve ocupar 80^% da largura da janela do Browser.

Comando de preformatação:

O comando <PRE> é usado para que o browser aceite os seus espaços grandes de uma letra para outra e a mudança de linha. Se o comando <PRE> for utilizado o texto digitado aparecerá exactamente assim no browser

<PRE> texto a ser preformatado </PRE>

 5)  Imagens

As imagens muitas vezes dizem tudo numa página. Elas deixam a sua página muito mais apresentável e bonita. Para colocar uma ima­gem é muito simples. Mas antes de se co­locar uma imagem é aconselhável salvar a página pois as imagens têm que ser ende­reçadas.

 Se a imagem estiver na mesma pasta que a página, você só precisa colocar o comando:  

<IMG SRC=”nome da imagem.extensão”>

Mas se a imagem estiver numa pasta dife­rente? Digamos que sua página está na pas­ta 'Página" e a imagem (titulo.JPG> que você vai utilizar está na pasta 'imagens' dentro dessa pasta 'Página', ou seja, essa imagem (titulo.JPG) está dentro da pasta \ima gens\titulo.JPG :

 Então o comando seria (caso o nome da figura seja titulo.JPG):

<IMG SRC=”imagens\titulo.jPG^”>

Para colocar uma imagem deve ser sempre colocado o 'nome da imagem - ponto - ex­tensão". As extensões aceites são somente .JPG e GIE

 Como você deve ter percebido, o comando para inserção de imagens não é um coman­do início-fim.

 Se você colocar o comando ALT=” explicação da imagem “ , quando o visitante deixar  o cursor do rato sobre a imagem aparecerá  o que você aqui escreveu, normalmente uma breve descrição da imagem.

 Outro comando que você pode colocar aqui é o comando BORDER=”5”. Os números são os tamanhos que você quer a borda. Como comando border ficaria assim:

 <IMG SRC=”imagem.ext' ALT=^"Descrição da imagem" BORDER=”5”>

Muito bem, coloquei uma figura na minha página, mas como faço para que o texto fi­que escrito ao lado da figura e não fique apenas numa linha? Com o comando ALIGN=”comando de ali­nhamento'” Com este comando você pode ta   alinhar a imagem de várias formas. Para alinhar em resposta à pergunta acima, o comando seria ALIGN="LEFT' para que a é   imagem fique à esquerda e o texto à direi­ta. Trocando a palavra LEFT por RIOHT a imagem fica à direita e o texto na sua es­querda.

Os dois comandos acima são os únicos modos para alinhar mais de uma linha de é texto ao lado de uma figura.  

Existem outros comandos para alinhamen­tos  diferentes, apenas trocando as palavras  'LEFT" e 'RICHT' por outras, e com elas com  e a   seguem-se bonitos efeitos:

•  Para alinhar a linha de texto centralizada na figura é só trocar por MIODLE";

•  Para alinhar no topo da figura troque pelo o comando “TOP".

• Para alinhar na parte de baixo não é necessário nada, mas a palavra "BOTTOM" tam­bém o faz.

Sempre que colocar um ljnk numa figura, procure deixar o Iink da página da mesma cor que o fundo, pois assim aquele azul do Iink não ficará em volta da imagem.

 6)    Links

O comando link é igual ao das imagens mas ele é um comando inicio-fim. A Dife­rença é que se ele for clicado você vai para outra página. O tipo mais simples é quan­do a página apontada está armazenada na mesma pasta que a página em que foi colocado o link. Como as imagens, você tem que direccional o link para onde está o ficheiro.

 <A HREF=”segunda pagina.html" > Clique a aqui para abrir a segunda pagina </A>

    O Browser geralmente apresenta os links em azul e sublinhados. Quando o visitante clicar neste texto ele carregará a página res­pectiva.

            Se a página a ser carregada se encontrar noutra pasta, você deverá direccionar o link para a pasta correcta, tal como é feito com as imagens.

            Com a mesma facilidade que você constrói um link para uma página no seu próprio com­putador, você pode fazer também o mes­mo para uma página em qualquer lugar do mundo. E só colocar no local do nome da página o endereço onde ela se encontra. Por exemplo:

 <A HREF=”http://www.terravista.pt”>HomePage da  Terràvista </A>

             As âncoras são links que apontam não para outras páginas mas para outra parte da mes­ma página. São portanto muito usadas em grandes textos ou que possuam divisões.

As âncoras são feitas da seguinte forma:

 a) Você coloca o nome no local para onde de­seja que o link se dirija, como por exemplo:

 <A NAME=”seccao_1”></A>

 Agora faça o link para essa âncora:

 <A HREF=”#seccao 1”>Clique aqui para regressar ao inicio da pagina </A>

 As âncoras também podem ser usadas de uma página para uma parte especifica de outra página:

 <A HREF=”paginal#seccao_1”> Clique aqui para ir para o início da pagina </A>

A minha Página na Internet    

    A lnternet é um “vício^”,  uma “necessidade", e um  "prazer" e um "orgulho'. Quando damos os pri­meiros passos na Net é fácil cair­mos no "vício" do IRC, depois de a aprendermos a utilizar em ou­tras vertentes sentimos necessi­dade de utili­zar os muitos recursos da rede, se o aprendemos a fazer bem é com autênti­co prazer que "surfamos", logo depois vem aquele sonho   de construirmos a nossa pró­pria presença na Net, fazer uma página pessoal de que nos possamos orgulhar. Este passo é muitas vezes o mais difícil, são muitas as dúvidas que nos podem surgir quando come­çamos a pensar nos "como" e "porquês" dessa nossa página.

  Onde?

    Uma das primeiras questões co­meça pelo local (servidor> onde poderemos alojar a nossa pági­na. Há que pensar (para além do custo, que deve ser nulo) em ter­mos de facilidade, do espaço que necessitamos. das condições (banners, conteúdo) que nos pode ser imposta, etc.

    Mas, o melhor mesmo é come­çar por um qualquer servidor gra­tuito, já que pode sempre trans­porta toda a sua página     para ou­tro caso sinta a necessidade de o fazer.

    Esta revista tem incluído bastan­tes servidores onde podemos alojar a nossa página, desde o Geocities ao Terravista, mas em minha opinião o mais fácil é en­tar o alojamento no Terravista: é rátis, espaço suficiente, é por­tuguês e torna-se fácil:

www.iol.pt www.sapo.pt www.geocites.com  

  Como?

    A construção de uma pági­na é, nos dias de hoje, uma tarefa simples. Existem muitas aplica­ções específi­cas para fazer com simplici­dade  uma home-page.

    As mais po­pulares são  Frontpage da Microsoft e o Composer da Netscape.

    FrontPage (versão express) com a 'suíte Internet' da  Microsoft (1E5, Outlook, etc.), tem interface bastante parecida a do Word, é WYSIWYQ (você vai vendo o resultado à medida que digita) . O Composer com a "suíte" da Netscape. utilização de qualquer deles é simples como um editor de ) ou programa de desenho. há necessidade de conhecer quaisquer códigos de html, a colocara nossa imaginação a funcionar .

    Mas logo depois vem a necessi­de se fazerem pequenos “retoques" no resultado: compatibilidade, componentes  se resultam on-line tão bem como o programa editor , etc.

    Sentimos então necessidade de aprender algumas noções de html. O trabalho com o html pode ser feito num qualquer editor de texto, desde o bloco de notas (notepad) ao Word.

Que assunto?

    Se você não quiser que a página seja visitada apenas p si próprio e alguns amigos ou familiares curiosos, o melhor é pensar num tema que possa tom visitáveis a sua página. E imprescindível que seja u assunto de que goste e/ou d mine bem, pode ser do âmbito da sua profissão/formação ou reflexo dos seus hobbies. Ou quer que seja o assunto, sugiro que você pesquise na Internet páginas que já existam sobre mesmo assunto. Questione-se você terá condições de oferecer algo mais além do que esta páginas já oferecem, em termos de informação e/ou imagens.

    Como divulgá-la?

    Registe-se nos muitos ^“motores” de pesquisa nacionais e intencionais, ou mesmo “portais” que lhe permitam. Tente conseguir a troca de links com páginas cujos assuntos  se relacionados aos do seu site .

Ética

    Ao colocar links para páginas secundárias de sites alheios, dei claro que aquela página já n pertence ao seu site. Do     contrário, parecerá que aquela página foi feita por si próprio. Se você utilizar imagens ou textos retirados de outras fontes indique Sempre a autoria ou origem dos mesmos. Não cor material com ^“reprodução proibida” sem antes obter autorização !

Tarifários

IOL --> Tarifario;

Tarifário do Acesso IOL

Período normal: dias úteis das 9h-21h
Período económico: Sábados, Domingos, Feriados e dias úteis das 21h-9h
A taxação é feita ao segundo
Números de acesso principais
Acesso através dos números 674400000
Tarifário aplicável à maioria das zonas do país
Custo inicial: €0,129 (com IVA: €0,1535)
Período normal: €0,028 (com IVA: €0,0333)
Período económico: €0,012 (com IVA: €0,0142)


Acesso através do número 674401000 (*)
Custo Inicial: €0,129 (com IVA: €0,1535)
Período normal: €0,028 (com IVA: €0,0333)
Período económico: €0,028 (com IVA: €0,0333)
.................................................................................
IOL FLASH

Acesso através do número 674 402 000
Tarifário aplicável à maioria das zonas do país

Custo inicial da chamada: €0,146 (com IVA: €0,1737)
Período normal: €0,036/por min. (com IVA: €0,0430)
(Dias úteis das 9h-21h)
Período económico: €0,015/por min. (com IVA: €0,0178)
(Sábados, Domingos, Feriados e dias úteis das 21h-9h)

A taxação é feita ao segundo.

Acesso através do número 674 403 000 (*)

Custo inicial da chamada: €0,146 (com IVA: €0,1737)
Período normal: €0,036/por min. (com IVA: €0,0430)
(Dias úteis das 9h-21h)
Período económico: €0,036/por min. (com IVA: €0,0430)
(Sábados, Domingos, Feriados e dias úteis das 21h-9h)

A taxação é feita ao segundo.
 

Enviar uma página para a Internet

Um bom programa de envio de FTP que é essencial para enviar a página para a Net  é o “ws-ftp95”. É  gratuito (penso que perma­nentemente) para utilizações não comerais, pode recolher-se de.

 www.calpoly.edu/Pub/supported/pc/win95/ftp/wsftp95/ws_ftple.exe .

 É bom porque oferece logo a seguir à instalação as propriedades da sessão com duas rubricas essenciais:

General  “Profile Name" , “user id" e "password” ( que já se definiram com o servidor  onde está o local que albrega a nossa págna).

Startup-"lnicial Remote Host Directory" (Terravista.pt/Meco/6860/  no meu caso) e "mica Local Directorv" (a pasta do PC onde temos os ficheiros guardados)

Html Lista de Tags

“Tags” básicos

<html> </html>  inicio/termina um documento em HTML

<head> </head>  Define a área de cabeçalho, com elementos não visualizáveis na página.

<body> </body> Define a área visível do documento.

Cabeçalho

<title> </title>  Coloca o nome do página na barra de título do janela.

Atributos do  Corpo

        <body bgcolor=?>        Cor de fundo.

        <body text=?>        Cor de texto.

        <body link=?>        Cor das links.

        <body vlink=?>        Cor dos links previamente visitadas.

        <body alink=?>        Cor da link activa.

Texto

        <b> </b>        Texto carregado.

        <i> </i>        Texto em itálico.

        <tt></tt>        Texto estilo máquina de escreve'; espaço simples.

        <font size=?> </font>        Tamanho dos letras.

<font color=?> </font> Cor das letras.

<font face=?> </font> Define a fonte utilizada.

Links

        <a href="URL”> </a>        Cria uma hiperligação.

<a href="mailto:EMAIL"></a> Cria uma link para o envio de correio.

        <a name="NOME"> </a> Cria um alvo dentro de uma página.

        <a href-"#NAME"></a>      Para ligação a um alvo' presente dentro da mesma página.

Formatação

<p> </p>  Define o área de um parágrafo.

<p align=?> Alinhamento de um parágrafo.

   <br>  Insere uma quebra de linha

<div align=?> 'Tag' genérico utilizado poro formatar blocos de teria.

Tabelas

<table> </table> Cria uma tabelo.

<tr> </tr>                 Linha de uma tabela

<td> </td> Célula individual numa linha.

Atributos das tabelas

<table border=#> Borda à volta de cudo célula.

<table cellspacing=#>  Espaço entre as células.

<table cellpadding=#> Margem interior dos células

<table width=# ou %>  Largura da tabela - em pixels ou percentagem.

<tr align=?> or <td align=?> Alinhamento horizontal do conteúdo dos células.("leff', 'center" ou 'right') .

<tr valign=?> or <td ',align=?> Alinhamento vertical do conteúdo das células. ('top', "rniddle" ou "bottom) .

<td colspan=#> Número de colunas ‘percorridas’  por uma célula.

<td rowspan=#>  Número de linhas ‘percorridas’ por  uma célula.

Grafismo

<img src= “FICHEIRO”> Insere uma imagem.

<img src="FICHEIRO" align=?> Alinha uma imagem em relação ao resto do texto.

<img src=”FlCHElRO” barder=?> Define a bordo da imagem.

<hr> Insere urna linha horizontal.

Frames

<frameset> </frarnesot> Define o conjunto de frames. Surge antes de <body> num documento com frames.

<frameset rows='valor,valor'> Define as linhas num conjunto de frames. Volor pode serem pixeis, percentagem ou * (o resto / proporção).

<frameset cols='valor,valor’>  Define as colunas num conjunto de frames. Valor pode serem pixeis, percentagem ou * (o resto 1 proporção).

<frame> Define uma única frame. Surge dentro de <frameset>

        <noframes> <Inoframes> Área onde é inserido o conteúdo visível em browsers que fluo suportam ouso de frames,

Atributos de uma frame

      <frame src="URL">      Especifica o documento HTML o

            ser exi6ido no frame.

      <frume name="nome">      Dó um nome à frome de modo a

            poder ser 'Iinkuda' o partir de

            outras frames.

      <frume scrolling=VALOR>      Define se a frume tem barra de

            scroll. VALOR pode ser "yes", 'no"

            ou "auto".

      <frame noresize>      Impede o visitante de

            redimensionar a frame.

Tabela de Cores  

Quem se dedique à construção de páginas, vai rapidamente verificar a utilidade que temo conhecimento de algumas no­ções de html Nestas, vamos ter necessidade de interpretar / aplicar códigos de cores o            principio básico do grafismo por computador são as cores primarias , vermelho (Red), verde (Green) e azul (Blue). Quando  surge o branco.

Para cada um destas componentes - R, G e B - é atribuído um valor, que vai de O para ausência completa até 255 para inten­sidade máxima . O amarelo, por exemplo. temos valores R:255 6:255 B:O. No entanto. numa página HTML, teremos que converter estes valores para hexadecimal (base 16). Temos então que conter 0,1 ,2.~.9, A, 8...F Representamos os valo­res em hexadecimal com um cardinal (#> antes. Assim, 10=#A, 15=#F, 18=410, n5a=#YC. 255=#FF

Tabelas de cores em TXT

Para mais informações , para e-mail

Todos os Direitos Reservados