Manual de HTML

[helldanger1]

Dentro dela queremos introduzir um link a cada um dos elementos que a compõem. Para isso, definiremos nossos links como zonas circulares de tamanho pequeno que serão distribuídas ao comprimento e largura da imagem.

Vejamos a seguir o código que utilizaremos:

<table border=0 width=450><tr><td align="center">
<map name="mapa1">
<area alt="Clique para ver a página de meus amigos" shape="CIRCLE" coords="44,36,29" href="#">
<area alt="Clique para ver minha noiva" shape="CIRCLE" coords="140,35,31" href="#">
<area alt="Clique para conhecer minha família" shape="circle" coords="239,37,30" href="#">
<area alt="Clique para conhecer meu trabalho" shape="CIRCLE" coords="336,36,31" href="#">
</map>
<img src="../../../../docs/artigos/imagens/mapa1.gif" width="380" height="72" alt="Mapa de imagens. Clique em cada um dos círculos." border="0" usemap="#mapa1">
<br>
Clique nos círculos para acessar às seções!
</td></tr></table>
Nota: Os href das áreas vão a #
Este é um exemplo parcial de utilização dos mapas, faltaria colocar os href com valores reais e não com a #. Cada um dos links das áreas -atributo href da etiqueta <area>- deveriam levar a uma página web. O exemplo ficaria completo se criássemos todas as páginas onde linkar as áreas e colocássemos os href dirigidos para tais páginas. Como não fizemos as páginas "destino" colocamos links que não levam a lugar nenhum, que, como se pode ver, indica-se com o caráter "#".


É possível observar, tal como explicamos antes, que nosso mapa consta de duas partes principais: a imagem e a etiqueta <map> que define as áreas de cada link.

Cada área se indica com uma etiqueta <area>, que tem os seguinte atributos:

alt
Para indicar um texto que será mostrado quando situarmos o mouse na área.

shape
Indica o tipo de área.

coords
As coordenadas que definem a área. Será um grupo de valores numéricos distintos dependendo do tipo de área (shape) que estivermos definindo.

href
Para indicar o destino do link correspondente à área.

Neste caso utilizamos umas áreas circulares (shape="CIRCLE"), que se definem indicando o centro do círculo -uma coordenada (X,Y) e o radio, que é um número inteiro que se corresponde com o número de pixels desde o centro até a borda do círculo.

Tipos de áreas: shape distintas.

Existem três tipos de áreas distintas, suficientes para fazer quase qualquer tipo de figura. No desenho que acompanha estas linhas pode ser visto uma representação das áreas, que detalhamos a seguir.

shape="RECT"

Cria uma área retangular. Para defini-la utilizam-se as coordenadas dos pontos da esquina superior esquerda e da esquina inferior direita. Tal como estão nomeadas tais coordenadas em nosso desenho, a área teria a seguinte etiqueta:

<area shape="RECT" coords="X1,Y1,X2,Y2" href="#">

shape="CIRCLE"

Cria uma área circular, que se indica com a coordenada do centro do círculo e o radio. De acordo com nosso desenho, a etiqueta de uma área circular teria esta forma:

<area shape="CIRCLE" coords="X1,Y1,R" href="#">

shape="POLY"

Este tipo de área, poligonal, é a mais complexa de todas. Um polígono fica definido indicando todos seus pontos, mas atenção, pois temos que indicá-los em ordem, seguindo o caminho marcado pelo perímetro do polígono. Segundo nosso desenho e os nomes que demos aos pontos do polígono, a etiqueta <area> ficaria desta forma:

<area shape="POLY" coords=" X1,Y1, X2,Y2, X3,Y3, X4,Y4" href="#">

 

[helldanger1]

Frames em HTML



Introdução aos frames, um pouco de história e suas utilidades.

Por Miguel Angel Alvarez - Tradução de JML




Uma das mais modernas características de HTML são os frames, que foram acrescentados tanto em Netscape Navigator como em Internet Explorer, a partir de suas versões 2.0. Os frames -que significam em português janelas- são uma forma de dividir a página em diferentes espaços independentes uns dos outros, de forma que em cada espaço se coloca uma página diferente que se codifica em uma arquivo HTML diferente.

À princípio se criaram como etiquetas proprietárias do navegador Netscape e rapidamente a potência do recurso fez com que o uso de frames se estendesse por toda a web. Pouco tempo demoraria para Internet Explorer incluí-los, pois não podia deixar escapar uma novidade tão popular de seu competidor. Finalmente, como resposta à popularidade entre os desenvolvedores dos frames, o padrão HTML 4.0 incluiu estas etiquetas dentro das permitidas.

Os frames, como dizíamos, nos permitem dividir a janela do navegador em diferentes áreas. Cada uma destas áreas são independentes e devem ser codificadas com arquivos HTML também independentes. Como resultado, cada frame ou janela contem as propriedades específicas que indicamos no código HTML apresentado nesse espaço. Sendo assim, e dado que cada janela é independente, terão suas próprias barras de deslocamento, horizontais e verticais, separadamente.

Existem muitas páginas na web que contém frames e certamente todos já tiveram a ocasião de conhecer algumas. Costuma se utilizar para colocar em uma parte da janela uma barra de navegação, que geralmente encontra-se fixa e permite o acesso a qualquer zona da página web. Uma das principais vantagens da programação com frames vem derivada da independência dos distintos frames, pois podemos navegar pelos conteúdos de nosso site web com a barra de navegação sempre visível, e sem que se tenha que recarregar em cada uma das páginas que vamos visitando.

Um exemplo das áreas que se podem construir em uma construção de frames pode ser visto nas imagens a seguir.

 

[helldanger1]

Frames – Explicação básica



Explicamos os detalhes gerais e os mais básicos sobre a criação de frames, Etiquetas FRAMESET E FRAME.

Por Miguel Angel Alvarez - Tradução de JML




As páginas web que estão feitas com frames se compõem de uma declaração das janelas e tantas páginas em formato HTML corrente como distintas divisões tivermos definido. A declaração ou definição de frames é a única página que realmente devemos aprender, visto que as páginas que serão visualizadas em cada uma das janelas são arquivos HTML dos que viemos aprendendo anteriormente neste manual.

Tal definição está composta por etiquetas <FRAMESET> e <FRAME>, com as quais indicamos a disposição de todos os quadros. A etiqueta <FRAMESET> indica as divisões da janela do navegador e a etiqueta <FRAME> indica cada um dos quadros onde colocaremos uma página independente.

As partições que se podem fazer com um <FRAMESET> são em filas ou colunas. Por exemplo, poderíamos indicar que desejamos fazer uma divisão da página em duas filas, ou duas colunas, três filas, etc. Para indicar tanto a forma de dividir a janela -em filas ou colunas- como o número de partições que pretendemos fazer, temos de utilizar o atributo COLS ou ROWS. O primeiro serve para indicar uma partição em colunas e o segundo para uma partição em filas.
Nota: É importante indicar que não se pode fazer uma partição em filas e colunas de uma vez só, e sim, que devemos escolher em dividir a janela em uma das duas disposições. Mais adiante, indicaremos como dividir a janela tanto em filas como em colunas, que é feito com o acréscimo de frames.


No atributo COLS ou ROWS -somente podemos escolher um dos dois- colocamos entre aspas o número de divisões que desejamos realizar, indicando de antemão o tamanho que vai atribuir a cada uma. Um valor típico destes atributos seria o seguinte:

cols="20%,80%"
Indica que devem ser colocadas duas colunas, a da esquerda teria uns 20% do espaço total da janela e a da direita uns 80%.

rows="15%,60%,25%"
Assim, indicamos que desejamos três filas, a de cima com um 15% do espaço total, a do meio com um espaço correspondente ao 60% do total e a de abaixo com um 25%. Ao total somam o 100% do espaço da janela.

Além da porcentagem para indicar o espaço de cada um dos campos, também podemos indicá-lo em pixels. Desta maneira:

cols="200,600"
Para indicar que a coluna da esquerda deve ter 200 pixels de largura e a da direita 600. Isto está bem se nossa janela tem 800 pixels de largura, mas isto não tem porque ser assim em todos os monitores dos usuários, por isso é importante que este modo de expressar as janelas se indique da seguinte maneira.

cols="200,*"
Assim, indicamos que a primeira coluna tem de medir 200 pixels e que o resto do espaço disponível -que será maior ou menor dependendo da definição da tela do usuário- se atribuirá a segunda coluna.

Na prática podemos misturar todos estes métodos para definir as janelas da maneira de desejarmos, com porcentagem, com pixels ou com o asterístico (*). Não importa como se definem, a única recomendação é que um dos valores que indiquemos seja um asterisco, para que a área correspondente a tal asterisco seja mais ou menos grande dependendo do espaço que tenha a janela de nosso navegador. Outros métodos de definir filas e colunas, atendendo a este conselho, seriam os seguintes:

rows="100,*,12%"
Definimos três filas, a primeira com 100 pixels de largura, a segunda com o espaço que sobre das outras duas, e a terceira com um 12% do espaço total.

cols="10%,50%,120,*"
Estamos indicando quatro colunas. A primeira de 10% do espaço da janela, a segunda com a metade justa da janela, a terceira com um espaço de 120 pixels e a última com a quantidade de espaço que sobre ao atribuir espaço às demais partições.

Uma vez indicado o número de filas ou colunas e o espaço reservado a cada uma com a etiqueta <FRAMESET>, devemos especificar com a etiqueta <FRAME> a procedência de cada um dos frames que dividimos a janela.

Para isso, dispomos do atributo SRC, que tem de ser definido para cada uma das filas ou colunas. Desta maneira.

<FRAME src="janela1.html">

Assim fica indicado que o frame que estamos definindo deve mostrar a página janela1.html em seu interior.

 

[helldanger1]

Frames – Criação de uma estrutura simples



Exemplo da criação de um frame simples para ilustrar o aprendido até agora.

Por Miguel Angel Alvarez - Tradução de JML




Para ilustrar tudo o que viemos explicando podemos ver o exemplo sobre como se criaria a definição de frames da imagem que podemos ver a seguir.

<html>
<head>
<title>Definição de Frames</title>
</head>
<frameset rows="15%,*,75">
<frame src="pagina1.html">
<frame src="pagina2.html">
<frame src="pagina3.html">
</frameset>
</html>



Além disso, temos algumas considerações a fazer para terminar de compreender este exemplo:
O título da definição de frames é o que herda toda a página web, por isso, não é boa idéia titular como "definição de frames" por exemplo, já que então toda nossa página se titularia assim e certamente não seria muito descritivo. Se estivéssemos fazendo uma página para o açougue Gonçalves seria melhor titular a definição de frames algo como "Açougue Gonçalves, as melhores carnes no Rio de Janeiro".
A página que define os frames não tem body. O HTML pode totalizar um erro se o incluirmos.
As páginas "pagina1.html", "pagina2.html" e "pagina3.html" devem ser escritas em arquivos independentes com o nome indicado. Neste exemplo, Tais páginas deveriam se encontrar no mesmo diretório que a declaração de frames. Se especificarmos uma rota para acessar ao arquivo podemos colocá-lo no diretório que desejarmos.
As cores de cada um dos frames colocamos com o atributo bgcolor colocado na etiqueta <BODY> de cada uma das páginas que se mostram nas janelas.

 

[helldanger1]

Frames – Uma página em cada moldura



Vemos como seriam as distintas páginas indenpendentes que compõem um site criado com frames.

Por Miguel Angel Alvarez - Tradução de JML




As páginas que mostraremos em cada moldura são documentos HTML iguais aos que viemos criando anteriormente. Podemos colocar qualquer elemento HTML dos estudados neste manual, como etiquetas de parágrafo, imagens, cores de fundo, etc.

Cada documento, como já indicamos, se escreve separado em seu próprio arquivo HTML. Para o exemplo do capítulo anterior podemos definir os arquivos HTML da seguinte maneira.

pagina1.html
É a página que contém o título da web. Simplesmente se trata de uma etiqueta <H1> de título. A página tem seu próprio título, com a etiqueta <TITLE>, que não poderá ser visualizada nenhum lugar, a não ser que se mostre esta página sem os frames, já que as páginas dentro das janelas herdam o título da definição dos frames.

<html>
<head>
<title>Título Açougue Gonçalves</title>
</head>

<body bgcolor="#DECC09">
<h1 align=center>Açougue Gonçalves</h1>
</body>
</html>

pagina2.html
É a página que se apresentará na área principal da definição de frames, ou seja, a página que tem mais espaço para ser visualizada e onde colocaremos os conteúdos da web. Neste caso, mostra uma mensagem de bem-vindo à web, que fará as vezes de portal.

<html>
<head>
<title>Portal do Açougue Gonçalves</title>
</head>

<body bgcolor="#CF391C" text="#ffffff">
<h1 align="center">Bem-vindo a nossa web</h1>
<br>
<br>
O açougue Gonçalves, com mais de 100 anos de experiência, é a melhor fonte de carnes de boi e de porco da região.
<br>
<br>
Tanto no inverno como no verão você pode encontrar nossas ofertas de temporada de primeira qualidade.
</body>
</html>

pagina3.html
Nesta página se mostrará a barra de navegação pelos conteúdos do site. Contém links que deveriam atualizar o conteúdo da área principal da declaração de frames, para mostrar os distintos conteúdos do sitio, por exemplo, o portal, os produtos, a página de contato, etc.

<html>
<head>
<title>Barra de navegação de açougue Gonçalves</title>
</head>

<body bgcolor="#AC760E" link="ffffcc" vlink="ffffcc">
<div align="center">
<b>
<a href="pagina2.html">Portal</a> |
<a href="produtos.html">Produtos</a> |
<a href="contato.html">Contato</a>
</b>
</div>
</body>
</html>

 

[helldanger1]

Frames – Orientar os links



Explicação sobre como orientar ao frame que desejamos que atualize, que não tem porque ser o mesmo onde está situado.

Por Miguel Angel Alvarez - Tradução de JML




A única particularidade destacável no exemplo do capítulo anterior, no manejo de frames em geral, trata-se de que cada um dos links que colocamos nas páginas atualizam o frame onde está colocado este link. Por exemplo, se temos link na parte inferior da janela, no espaço correspondente a terceira janela, atualizarão os conteúdos do terceiro frame, que é onde estão situados os links.

Este efeito que comentamos pode-se observar no exemplo da página do açougue, tal como ficaria ao incluir os códigos das distintas páginas.

O lógico é que ao clicar sobre um link da barra de navegação atualizamos o frame principal, que é onde havíamos planejado colocar os conteúdos, no lugar do frame onde colocamos a barra de navegação, que deveria se manter fixa. Para conseguir este efeito devemos fazer duas coisas:
Dar um nome ao frame que desejamos atualizar
Tal nome se indica na etiqueta <FRAME> da definição de frames. Para isso utilizamos o atributo name, igualado ao nome que queremos dar a tal janela.
Orientar os links para esse frame
Para isso devemos colocar no atributo target dos links -etiqueta <A>- o nome do frame que desejamos atualizar ao clicar o link.
Depois de dar um nome ao frame principal, nossa declaração de frames ficaria da seguinte maneira.

<frameset rows="15%,*,75">
<frame src="pagina1.html">
<frame src="pagina2.html" name="principal">
<frame src="pagina3.html">
</frameset>

Ademais, deveríamos colocar o atributo target aos links, tal como se segue.

<a href="pagina2.html" target="principal">Portal</a> |
<a href="produtos.html" target="principal">Produtos</a> |
<a href="contato.html" target="principal">Contato</a>

Uma vez realizados estas duas mudanças podemos ver como os links da barra de navegação sim que atualizam a página que devem.

Valores para o atributo target

Como vimos, com o atributo target da etiqueta <A> podemos indicar o nome do frame que desejamos que atualize esse link. Entretanto, este não é o único valor que podemos aplicar ao atributo. Temos alguns valores adicionais que podemos atribuir a qualquer link em geral.

_blank
Para fazer com que esse link se abra em uma janela a parte. Nossos exemplos neste manual costumam abrir em uma janela a parte, colocando este valor no target dos links que levam aos exemplos.

_self
Atualiza o frame onde está situado o link. É o valor por padrão.

_parent
O link se atualiza sobre seu pai ou sobre a janela que estamos trabalhando, se não tiver um pai.

_top
A página carrega a tela completa, ou seja, eliminando todos os frames que pudesse haver. Este atributo é muito importante porque se colocamos em nossa página com frames um link a uma página externa, se abriria em um dos frames e se manteriam visíveis outros frames da página, fazendo um efeito que costuma ser pouco agradável, porque parece que estão evitando que nos escapemos.

A sintaxe de um desses valores de atributos colocados em um link seria a seguinte:

<A href="http://www.web.com" target="_top">Acessar a criarweb.com</A>

 

[helldanger1]

Frames – Aninhar frames




Explicamos como se criam estruturas com frames mais complexas: aninhamento de frames.

Por Miguel Angel Alvarez - Tradução de JML





Para criar estruturas de janelas nas quais se misturam as filas e as colunas devemos aninhar etiquetas <FRAMESET>. Começando pela partição de frames mais geral, devemos colocar dentro as partições de frames menores. A maneira de indicar isto se pode ver facilmente com um exemplo.

Os passos para definir o aninhamento podem ser encontrados à direita.
Os distintos frames vêem numerados com a ordem
na qual são escritas no código.

Na imagem pode ser visto o resultado final acompanhada da representação sobre a maneira de defini-los. Em primeiro definimos uma estrutura de frames em duas colunas e dentro da primeira coluna colocamos outra partição de frames em duas filas. O código necessário é o seguinte.

<frameset cols="200,*">
<frameset rows="170,*">
<frame src="pagina1.html">
<frame src="pagina2.html">
</frameset>
<frame src="pagina3.html">
</frameset>



Nota: colocamos uma margem em cada uma das linhas desta definição de frames para conseguir um código mais compreensível visualmente. Estas margens não são em absoluto necessários, simplesmente nos servem para ver em que nível de aninhamento nos encontramos.


O exemplo anterior pode se complicar um pouco mais se incluirmos mais partições. Vamos ver algo um pouco mais complicado para praticar mais com os aninhamentos de frames.

Os passos para definir o aninhamento podem ser encontrados à direita.
Os distintos frames vêem numerados com a ordem
na qual se escrevem no código.

Na imagem se observa que o primeiro frameset a definir se compõe de duas filas. Posteriormente, dentro da segunda fila do primeiro frameset, temos outra partição em duas colunas, dentro das que colocamos um terceiro nível de frameset com uma definção em filas nos dois casos. O código pode ser visto a seguir.

<frameset rows="60,*">
<frame src="pagina1.html">
<frameset cols="200,*">
<frameset rows="*,150">
<frame src="pagina2.html">
<frame src="pagina3.html">
</frameset>
<frameset rows="*,60">
<frame src="pagina4.html">
<frame src="pagina5.html">
</frameset>
</frameset>
</frameset>



Até aqui vimos a parte mais básica da criação de frames. Nos próximos capítulos poderemos aprender a configurar as janelas para variar sua aparência e, entre outras coisas, eliminar as barras que separam cada um dos distintos frames.

 

[helldanger1]

Frames – Atributos avançados



Lista de atributos das etiquetas frameset e frame com as quais podemos configurar a aparência e características das janelas.

Por Miguel Angel Alvarez - Tradução de JML




A parte da criação das janelas propriamente dita, existem muitos atributos com os que configurar sua aparência. Para isso, tanto a etiqueta <frameset> como <frame> admitem diversos atributos que permitem especificar a forma de elementos como as bordas dos frames, a margem, a existência ou não de barras de deslocamento, etc.

Atributos para a etiqueta <frameset>

Já conhecemos o atributo cols e rows, que servem para indicar se a distribução em janelas se fará horizontalmente ou verticalmente. Somente se pode utilizar um deles e se iguala às dimensões de cada uma das divisões, separadas por vírgulas.

border="número de pixels"
Permite especificar de maneira global para todo o frameset o número de pixels que há de ter a borde dos frames.

bordercolor="#rrggbb"
Com este atributo podemos modificar a cor da borda dos frames, também de maneira global a todo o frameset.

frameborder="yes|no|0"
Serve para mostrar ou não a borda do frame. Seus possíveis valores são "yes" (para que se vejam as bordas) e "não" ou "0" (para que não se vejam). Na prática elimina a borda, mas permanece uma linha de separação dos frames.

framespacing="número de pixels"
Para determinar a largura da linha de separação dos frames. Pode -se utilizar em Internet Explorer e junto com o atributo frameborder="0" serve para eliminar a borda das janelas.

Atributos para a etiqueta <frame>

Para esta etiqueta, assinalamos nos capítulos anteriores os atributos src, que servem para indicar o arquivo que contém a janela e name, para dar um nome à janela e logo direcionar os links para ele. Vejamos agora outros atributos disponíveis.

marginwidth="número de pixels"
Define o número de pixels que tem a margem do frame onde se indica. Esta margem se aplica à página que pretendemos ver nessa janela, de modo que se colocamos 0, os conteúdos da página nessa janela estarão completamente grudados na borda da margem e se indicamos um valor de 10, os conteúdos da página estariam separados da borda 10 pixels.

marginheight="número de pixels"
O mesmo que o atributo anterior, mas para a margem vertical.

scrolling="yes|no|auto"
Serve para indicar se queremos que haja barras de deslocamento nas diferentes janelas. Se indicamos "yes" sempre sairão as barras, se indicamos "no" não sairão nunca e se colocamos "auto" sairão somente se forem necessárias. Auto é o valor por padrão.
Conselho: Há que ter cuidado se eliminamos as bordas dos frames, visto que a a página web pode ter dimensões distintas dependendo da definição de tela do visitante. Se o espaço da janela se vê reducido, poderia se ver reduzido o espaço para o frame e pode acontecer de não caber os elementos que antes sim cabiam e se eliminamos as barras de deslocamento pode ser que o visitante não possa ver todo o conteúdo da janela.

Este mesmo conselho pode ser aplicado ao redimensionamento de frames, que veremos no seguinte atributo. Se fizermos com que as janelas não sejam redimensionáveis provavelmente teríamos uma declaração de frames demasiado rígida, que pode ser mal vista em algum tipo de tela.


noresize
Este atributo não tem valores, simplesmente se coloca ou não se coloca. No caso de que esteja presente indica que o frame não se pode redimensionar. Como podemos ver, ao colocar o mouse sobre a borda das janelas sai um cursor que nos assinala que podemos mover tal borda e redimensionar assim os frames. Por padrão, se não colocamos nada, as janelas podem ser redimensionadas.

frameborder="yes|no|0"
Este atributo permite controlar a aparição das bordas dos frames. Com este atributo igualado a "0" ou "não" as bordeas se eliminam. Entretanto, ficam as feias margens na borda. Pelo que podemos comprovar funciona melhor no Netscape do que no Internet Explorer. De qualquer forma, temos um pouco mais adiante, uma nota para explicar os frames sem bordas.
Nota: os atributos de frames não funcionam sempre bem em todos os navegadores. É recomendável fazermos um teste sobre o que estamos desenhando em vários navegadores para comprovar que nosos frames se vêem bem em todas as plataformas.


bordercolor="#rrggbb"
Permite especificar a cor da borda da janela.

 

[helldanger1]

Vantagens e incovenientes do uso de frames



Vemos uma série de coisas boas e ruins derivadas do uso de janelas ou frames na hora de desenhar e utilizar um web site.

Por Miguel Angel Alvarez - Tradução de JML




O desenho com frames é um assunto bastante controvertido, já que distintos desenhadores podem ter outras opiniões.
Referência: Se você deseja saber o que são os frames e como criá-los consulte os capítulos de Frames de nosso manual de HTML.


No meu caso, penso que é preferível não utilizá-los, apesar de que isso depende do tipo de web site que esteja construindo, pois em alguns casos sim que seria muito adequado seu uso.

Colocarei algumas vantagens e alguns inconvenientes deo uso de janelas (frames). Isto é ao meu ponto de vista, outros podem ter outras opiniões.

Vantagens de usar frames
A navegação da página será mais rápida. Apesar de que o primeiro caerregamento da página seria igual, em sucessivas impressões páginas já teremos algumas janelas salvas, que não teriam que voltar a descarregar.

Criar páginas do site seria mais rápido. Como não temos que incluir partes de código como a barra de navegação, título, etc. criar novas páginas seria um processo muito mais rápido.

Partes da página (como a barra de navegação) se mantém fixas e isso pode ser bom, para que o usuário não as perca nunca de vista.

Estas mesmas partes visíveis constantemente, se contém links, podem servir muito bem para melhorar a navegação pelo site.

Mantém uma navegabilidade do site onde se navega, pois os elementos fixos conservam a imagem sempre visível.
Inconvenientes de usar frames
Tiram espaço da tela. O espaço ocupado pelos frames fixos se perde na hora de fazer páginas novas, porque já está utilizado. Em definições de tela pequena ou em dispositivos como Palms, este problema se torna mais patente.

Forçam ao visitante a entrar pela declaração de frames. Se não o fazem assim, somente se veria una página interior sem os requadros. Estes requadros poderian ser insuficientes para uma boa navegação pelos conteúdos e poderiam não conservar uma boa imagem corporativa.

A promoção da página seria, à princípio, mais limitada. Isto é devido a que somente se deveria promocioanr o portal, pois se se promocionam páginas interiores, poderia acontecer o caso em que os visitantes entrassem por elas no lugar do portal, criando o problema descrito no ponto anterior.

Muita gente não gosta porque não se sentem livers na navegação, pois entendem que estas partes fixas estão limitando sua mobilidade pela web. Este efeito se torna mais patente se a página com frames tem links a outras páginas web fora do site e, ao clicar um link, se mostra a página nova com as janelas da página que tem frames.

Alguns navegadores não os suportam. Isto não é muito habitual, mas se estamos fazendo uma página que queremos que seja totalmente acessiível deveríamos considerá-lo importante.

Os bookmarks ou favoritos não funcionam corretamente em muitos casos. Se quisermos incluir um favorito a uma página de um frame que não seja o portal podemos encontrar problemas.

Pode acontecer que o botão detrás do navegador não se comporte como desejamos.

Se você quer atualizar mais de um frame com o clique de um link deverá utilizar Javascript. Ademais os scripts podem se complicar bastante quando têm de comunicar vários frames entre si.
Conclusão

O trabalho com frames pode ser mais ou menos indicado dependendo das características da página a desenvolver, é sua tarefa saber se no seu caso deve utiliza-los ou não.

 

[helldanger1]

As etiquetas de HTML 4.0



Neste artigo veremos estas etiquetas padrão HTML 4.0.

Por Miguel Angel Alvarez - Tradução de JML





Introdução. Quando Internet começava sua incontrolável escalada, a versão padrão HTML que circulava era a 2.0, o qual continua suportando os navegadores mais atuais. Porém, as ferramentas de que se dispunha não oferecia um controle preciso dos documentos.

Contudo, como até então o objetivo da Internet estava fundamentalmente orientado ao âmbito acadêmico e não ao de design, não se deu muita importância à questão de lançar uma versão melhorada do padrão até que Netscape, que até então era a empresa líder no setor, tomou a iniciativa de incluir novas etiquetas pensadas para melhorar o aspecto visual das páginas web.

Por este motivo o IETF (Internet Engineering Task Force) ou o que é o mesmo, Grupo de Trabalho em Engenharia de Internet, começou a elaborar novos padrões, os quais deram como fruto o HTML 3.0, que resultou ser grande demais para as infra-estruturas que havia nesse momento, o qual dificultou sua aceitação.

Sendo assim, uma série de companhias (entre as que estavam Netscape, Sun Microsystems ou Microsoft, entre outras), se uniram para criar o que hoje se denomina W3C (ou o que é o mesmo, Consorcio para a World Wide Web), que foi fundado em outubro de 1.994 para conduzir à World Wide Web ao seu máximo potencial, desenvolvendo protocolos de uso comum, para normalizar o uso da web em todo o mundo.

O compromisso do W3C de encaminhar à Web ao seu máximo potencial inclui promover um alto grau de acessibilidade para as pessoas com deficiências. O grupo de trabalho permanente Web Accessibility Initiative (WAI, Iniciativa para a Acessibilidade da Rede), em coordenação com organizações ao redor de todo o mundo, persegue a acessibilidade da Web através de cinco áreas de trabalho principais: Tecnologia, diretrizes, ferramentas, formação, difusão, e investigação e desenvolvimento.

Desta iniciativa nasceu o rascunho de HTML 3.2 e em sua versão definitiva se introduziram mudanças essenciais para as possibilidades que os navegadores começavam a oferecer, estas inclusões foram as tabelas, os applets, etc.

Em julho de 1.997 nasce o rascunho do HTML 4.0 e finalmente se aprova em dezembro de 1.997 este padrão incluindo como melhorias os frames, as folhas de estilo e a inclusão de scripts em páginas web, entre outras coisas.

 

[helldanger1]

As etiquetas de HTML 4.0 (1)



Vejamos uma série de etiquetas para formatar o texto das páginas HTML, com uma breve descrição de cada uma delas.

Por Miguel Angel Alvarez - Tradução de JML





Entre o padrão do HTML 3.2 a 4.0 se introduziram novas etiquetas das quais daremos uma breve explicação.

<Q>... </Q>

As etiquetas <Q> e </Q> agem de forma muito parecida a <BLOCKQUOTE> porém com a particularidade de que se adiciona uma margem em parágrafos menores e sem a necessidade de romper o parágrafo.

Segundo, o W3C, a etiqueta <BLOCKQUOTE> é para adicionar margens largas e <Q>, para margens menores, sem necessidade de romper o parágrafo.
Nota: No HTML 4.0 é imprescindível colocar a etiqueta de abertura e a de fechamento <Q>.... </Q>.



<ACRONYM>... </ACRONYM>

As etiquetas <ACRONYM>... </ACRONYM>, indicam que há um acrônimo no texto. Um acrônimo é um pequeno texto que ajuda a explicar a estrutura do texto uma frase.

<INS>... </INS> e <DEL>... </DEL>

Utilize < INS>...</INS> para marcar as partes de um documento que foi agregado pela versão passada do documento. <DEL>... </ DEL> marca de maneira similar um texto de um documento que se foi suprimido pela versão anterior.

<COLGROUP>... </COLGROUP>

Utiliza-se para ter um melhor controle sobre um o formato das tabelas especificando as características que compartilham como: largura, altura e alinhamento.
Cada tabela deve ter pelo menos um <COLGROUP>; sem especificar nenhuma característica de < COLGROUP >. HTML 4.0 assume que uma tabela contém um só grupo de colunas e que este contém todas as colunas de uma tabela.
Por exemplo, isto nos serviria para criar uma tabela com uma célula na que pode se incluir uma descrição e depois seguido de check boxes para selecionar as opções desejadas.

Código: <TABLE> <COLGROUP span="10" width="30"> <COLGROUP span="1" width="0*"> <THEAD> <TR>... </ TABLE>

Desta forma, <COLGROUP> proporciona um formato mais agradável aos check boxes sem a necessidade de especificar, propriedades idênticas para cada fila.

A etiqueta de início < COLGROUP >, requer outra de fechamento.
Com o qual obtemos: (em Nestcape só se verá a tabela, não o botão).

 

[helldanger1]

As etiquetas de HTML 4.0 (2)



Explicação das novas etiquetas de HTML 4.0 para uso em formulários.

Por Luciano Moreno




<FIELDSET>... </FIELDSET>

Até agora, não dispúnhamos de nenhuma maneira de agrupar visualmente vários controles, se não aproveitássemos elementos que não são do formulário, como tabelas ou imagens.
Agora, se fechamos uma parte de um formulário dentro da etiqueta FIELDSET se mostrará um retângulo ao redor dos mesmos. Ademais, podemos indicar um título por meio da etiqueta LEGEND, que admite o parâmetro align="left / center / right / top / bottom", o que nos permite alinhar o título horizontal e verticalmente. O único problema é que deveremos introduzir o conjunto em uma célula de tabela com uma largura determinado, já que se não fizermos assim a moldura abarcará toda a largura de tela disponível.

Exemplo.- (Só para I. Explorer)

<form action="cgi-bin/control.exe" method="post" enctype="text/plain" name="meuform">
<table width="200">
<tr>
<td>
<fieldset>
<legend align="left"><font color="red">Caixa de texto</font></legend>
Coloque seu nome:
<input type="text" size="15">
</fieldset>
</td>
</tr>
<table>
</form>

<LABEL>... </LABEL>

Até pouco tempo atrás os campos de entrada não estavam associados a eles mesmos. Por exemplo; na hora de clicar sobre um campo de confirmação, não acontecia nada! Porém agora, se o clicarmos o controle mudará de estado.

Exemplo:

<form action="cgi-bin/meucontrol.exe" method="post" enctype="text/plain" name="mais um exemplo">
<label>
<input type="checkbox" name="email">
Desejamos um feliz ano novo
</label>
</form>

<BUTTON>... </BUTTON>

A partir da implementação dos padrões HTML 4.0 contamos com várias etiquetas novas para construir formulários, sendo BUTTON uma delas, aliás, bastante. O problema é que as versões de 4 de Nestcape foram lançadas antes destas implementações, por isso estas etiquetas só podem ser visualizadas corretamente com Internet Explorer 4 e superiores.
Esta etiqueta proporciona um método único para a implementação de qualquer tipo de botão de formulário. Seus principais atributos são:
type= " tipo ", que pode tomar os já conhecidos valores submit (por padrão), reset e button.

name= " nome ", que atribui um nome identificador único ao botão.

value= " texto ", que define o texto que vai aparecer no botão.


A principal vantagem que traz estas etiquetas é que agora vamos poder introduzir dentro delas qualquer elemento de HTML, como imagens e tabelas.

Exemplos.

<form action="cgi-bin/control.exe" method="post" enctype="text/plain" name="meuform">

<button name="boton_1" type="button">
<table width="10" cellspacing="0" cellpadding="2" border="1">
<tr>
<td>um</td>
<td>dois</td>
</tr>
<tr>
<td>três</td>
<td>quatro</td>
</tr>
</table>
</button>
</form>

 

[helldanger1]

Áudio em HTML I, introdução



Este é o primeiro capítulo de uma série sobre o áudio na web.

Por Luciano Moreno





Em sua curta, porém rápida vida, as páginas web passaram a ser não só uns meros documentos textuais aos que se podem acessar pela Internet, mas como umas verdadeiras apresentações multimídia, que combinam textos com imagens, áudios, vídeos e elementos de realidade virtual.

Se o primeiro passo que se deu foi adicionar imagens às páginas web (tanto estáticas como dinâmicas GIF animados), o seguinte passo consistiu em introduzir áudios nas mesmas, conseguindo com eles o apelativo de "multimídia". E nos referiremos daqui por diante quando falarmos de áudio tanto sintetizado como verdadeiras gravações de áudio, de qualidade muito elevada.

Entretanto, apesar dos navegadores terem sido capazes de interpretar os arquivos de áudio adequados desde já algumas versões, é verdade que a aplicação de áudios às páginas web sempre esteve limitada pela largura de banda necessária nas conexões a Internet para poder baixar de forma adequada tais arquivos, devido ao tamanho "excessivo" dos mesmos.

Outra das limitações importantes que encontramos na hora de incluir arquivos de áudio em nossas páginas é a diferente implementação que fazem deles os navegadores web mais usados. Teoricamente, não só deveremos usar etiquetas HTML distintas para Internet Explorer que para Netscape Navigator, como também que às vezes a própria forma de interpretar o áudio pode diferir de um ao outro navegador.

Finalmente, há que destacar que na hora de incluir arquivos de áudio em nossas páginas devemos ser conscientes que muitos dos formatos usados, sobretudo em gravações de qualidade, precisam um plugin ou programa especial para sua reprodução no navegador cliente. E se é verdade que atualmente há certos plugins que se transformaram quase que em um padrão na Internet (como o de Real Audio ou o de MP3), há outros possíveis que não é normal ter instalado, portanto se incluirmos arquivos deste tipo obrigaremos ao usuário a ter que instalá-los, coisa que as pessoas costuma ter resistência.

 

[helldanger1]

Áudio em HTML II, características do áudio digital



Conceitos básicos do áudio digital.

Por Luciano Moreno




Vamos estudar alguns dos conceitos básicos do áudio digital, embora sem entrar em demasiadas considerações técnicas. Para aqueles que desejarem mais informação, existem uma infinidade de web sites que estudam especificamente o áudio digital e o hardware necessário para sua captura e reprodução.

O áudio tem uma natureza ondulante, ou seja, se propaga em forma de ondas analógicas desde o objeto que o produz. As características próprias de qualquer áudio (desde o produzido por um automóvel até uma bela canção), seus diferentes tons e notas dependem precisamente das propriedades físicas das ondas que o formam.

Para poder viajar desde o emissor ao receptor, as ondas de áudio precisam de um meio físico de suporte, seja o ar da atmosfera, a água, etc. Tanto é assim que no espaço exterior, onde não há meio físico de suporte, não se podem transmitir áudios.

Se representarmos em um gráfico um áudio complexo, obteremos a seguinte figura:

Na qual podemos apreciar os diferentes valores de onda que vai tomando o áudio.

Todos nós sabemos que as máquinas informáticas não trabalham com dados analógicos, e sim, que trabalham com dados digitais, formados por estados binários. Portanto, para representar um áudio, desde o ponto de vista informático, é preciso capturá-lo em uma natureza binária, para que se faça uma amostra do mesmo, tomando determinados valores das ondas e representando tais valores em formato digital. Em cada captura obteremos um ponto do gráfico anterior.

Porém, quantas amostras deveremos tomar? Este é o verdadeiro miolo da questão, já que quantas mais amostras tomarmos, mais fiel será o áudio capturado com respeito ao original, com o que terá mais qualidade.

Para medir o número de capturas utilizamos a freqüência da amostra. Como um Herz é um ciclo por segundo, a freqüência de uma captura em Herz representa o número de capturas que realizamos em um segundo. Assim, uma frequência de amostra de 20 KHz (20 Kilo Herz = 20000 Herz) realizará 20000 capturas de pontos cada segundo.

O ouvido humano é captar de captar a assombrosa quantidade de 44000 áudios por segundo, ou seja, 44 KHz. Portanto, para que um áudio digital tenha suficiente qualidade deverá estar baseado em uma frequência similar a esta. Em geral, o valor padrão de captura de áudios de qualidade é de 44,1 Khz (qualidade CD), embora haja capturadoras de áudio profissionais que chegam até os 100 Khz, com objeto de obter um maior número de pontos sobre a amostra, conseguindo uma qualidade máxima.

Outro conceito do que já devem ter ouvido falar sobre o áudio digital é o número de bits de um cartão de áudio. A origem desta magnitude é que, na hora de capturar o áudio, não só é importante o número de amostras tomadas, como também a quantidade de informação capturada em cada uma dessas amostras.

 

[helldanger1]

Uma vez capturado o áudio, para sua posterior reprodução em uma máquina informática é necessário mandar uma série de impulsos ou posições aos alto-falantes para que criem o áudio a partir deles. Como? Bom, produzindo a partir dessas posições movimentos das membranas dos alto-falantes, movimentos que transformam de novo o áudio digital em analógico, estado no qual é capaz de viajar pelo ar e produzir os estímulos necessários em nossos tímpanos, com o qual somos capazes de perceber o áudio "original". Quantas mais posições de informação se enviem aos alto-falantes, melhor a qualidade terá o áudio reproduzido.

Com estas bases, se define o número de bits de um áudio digital como o número de impulsos de informação (posições) que se enviam aos alto-falantes para sua transformação em ondas analógicas.

Os cartões de áudio atuais trabalham normalmente com 8 bits de informação, com os que se podem obter 28=256 posições (zeros e uns binários), embora haja algumas de melhor qualidade que são capazes de trabalhar com capturas de 16 bits, que originam 216 = 65536 posições de informação.

Como dado de referência, os CDs atuais estão baseados em áudio gravado a 44 Khz e com um tamanho de amostra de 16 bits. Estas medidas se conhecem com o nome de áudio de qualidade CD.

Por último, uma vez que o áudio digital chega aos nossos ouvidos, impactam contra os tímpanos, verdadeiras membranas especializadas que voltam a transformar as ondas analógicas em impulsos elétricos, que viajam até nosso cérebro, onde são interpretados e produzem as sensações auditivas que todos nós conhecemos.

Uma exceção ao áudio anteriormente descrito, que podemos denominar "de dados de áudio", é o áudio sintetizado, o qual não se realiza nenhuma captura de ondas sonoras reais, e sim que é áudio totalmente digital, gerado diretamente na máquina informática pelo reprodutor digital conhecido pelo nome de MIDI (Music Instrument Digital Interface). Quando se deseja reproduzir uma nota musical concreta, se envia um comando MIDI ao chip sintetizador, que se encarrega de traduzir esse comando em uma vibração especial que produz a nota. Mediante este sistema é possível criar melodias bastante aceitáveis, embora nunca tenham a qualidade, nem a riqueza de uma onda sonora natural capturada.

 

[helldanger1]

Áudio em HTML (III)




Quais são os arquivos que podemos executar através do navegador e quais através de um programa específico.

Por Luciano Moreno





Formatos de áudio

Na hora de incluir arquivos de áudios em nossas páginas web devemos distinguir entre os que podem ser diretamente executados pelo navegador e aqueles que devem ser abertos por um programa próprio, que deverá ter o usuário instalado em sua máquina para poder reproduzir o arquivo.

De forma geral, podemos incluir na web os seguintes tipos de arquivos de áudio.

WAV (Wave form Audio File format): formato típico da casa Windows, de elevada qualidade, usado nas gravações de CDs, que trabalha a 44 Khz e a 16 bits. Consta basicamente de três blocos: o de identificação, o que especifica os parâmetros do formato e o que contém as amostras. Seu principal inconveniente é o elevado peso dos arquivos, pelo qual seu uso fica limitado na Internet à reprodução de ruídos ou frases curtas. A extensão destes arquivos é .wav. É suportado por Internet Explorer e Netscape 4x.


AU (Audio File format): formato criado pela casa Apple para plataformas MAC, cujos arquivos se salvam com a extensão .au


MIDI formato de tabela de ondas, que não salvam o áudio a reproduzir, e sim um código que nosso cartão de áudio terá que interpretar. Por isso, este tipo de arquivos não pode armazenar áudios reais, como vozes ou música gravada; só pode conter áudios armazenáveis em tabelas de ondas. Como contrapartida, os arquivos MIDI, que se salvam com extensão .mid, são de pequeno tamanho, o que os torna ideais para a web. É suportado pelo Internet Explorer e Netscape 4x.


MP3 (MPEG 1 Layer 3): desenvolvido pelo MPEG (Moving Picture Expert Group), obtém uma alta compressão do áudio e uma muito boa qualidade na eliminação dos componentes do áudio que não estejam entre 20 hz e 16 Kh (os que pode ouvir o ser humano normal). Tenha em cota o áudio envolvente (surround) e a extensão multilingüe, e salve os arquivos com a extensão .mp3, e permite configurar o nível de compreensão, conseguindo-se qualidade similares às do formato WAVE, porém com até 10 vezes menos tamanho de arquivo. É suportado diretamente somente pelo Internet Explorer 5.5 e superiores.


MOD espécie de mistura entre o formato MIDI e o formato WAV, já que por um lado armazena o áudio em forma de instruções para o cartão de áudio, porém por outro pode armazenar também áudios de instrumentos musicais digitalizados, podendo ser interpretados por qualquer cartão de áudio de 8 bits. Não é um formato padrão de Windows, por isso seu uso é mais indicado para sistemas Mac, Amiga ou Linux. A extensão dos arquivos é .mod


µ-Law Format de qualidade similar ao formato WAV, é original das máquinas NeXt, e salva seus arquivos com a extensão .au


Real Audio de qualidade média, embora permita arquivos muito comprimidos, que salva com extensão .rmp ou .ra. Para sua reprodução necessita-se ter instalado o plugin Real Audio.

 

[helldanger1]

Na hora de trabalhar com estes formatos de áudio, deveremos ter em conta as limitações em seu uso, já que muitos deles não podem ser reduzidos mais que em sistemas operacionais concretos, e ainda assim, com plugins ou programas específicos.

Em busca da compatibilidade, se usamos Windows como sistema operacional convém usar para arquivos musicais a reproduzir diretamente no navegador os formatos WAV e MIDI, que são os mais compatíveis.

Em troca, se o que desejamos é poder oferecer a nossos visitantes a opção de navegar com música executável através de um programa externo, o melhor é usar arquivos em formato MP3, já que na atualidade a maioria dos navegantes têm instalado em sua máquina algum programa reprodutor adequado, podendo valer desde software incluído em Windows, como Windows Media Player, até aplicações externas, como Winamp. Neste caso, basta colocar um link normal em nossas páginas, apontando ao arquivo de áudio.

Como exemplo, se quisermos linkar em nossa página um arquivo MP3, bastaria escrever:

<a href="audios/mp3.mp3" target="_blank"> Clique aqui para ouvir a música. </a>

Que nos daria:

Clique aqui para ouvir a música

Com isto, o usuário ao clicar o link, se lançará a aplicação que tiver associada com o tipo de arquivo MP3, que dependerá da configuração interna de cada navegador e usuário.

Um caso especial é Netscape 6x. Quase não admite diretamente nenhum tipo de formato de áudio incrustado na página, ao não vir configuradas por padrão as aplicações ou plugins necessários. E no caso de arquivos linkados, Nestscape 6x costuma lançar seu próprio reprodutor, que costuma ser da casa AOL, precisando para a execução uma série de passos para se inscrever nessa companhia como usuário do software.

Resumindo: cada usuário terá configurada sua máquina de forma particular, costumando prevalecer o último software de áudio instalado, já que estes programas costumam se apropriar de certos tipos de arquivos para sua execução automática. Entre as aplicações possíveis de execução de arquivos de áudio, seja de forma direta ou em forma de plugins para os navegadores, destacam-se Windows Media Player, Real Player, Winamp, Quick time, etc.

 

[helldanger1]

Áudio em HTML (IV)



Neste capítulo veremos a maneira de incluir os arquivos de música no HTML.

Por Luciano Moreno




Incluir áudios na web.

Uma vez escolhidos nossos arquivos de áudio, é hora de incluí-los em nossa página web. Logicamente, para que um arquivo de áudio possa ser reproduzido por um navegador é necessário que sua máquina tenha incluído um cartão de áudio e um par de alto-falantes.

Existem diversas formas de incluir um arquivo de áudio em uma página, formas que dependem do tipo de arquivo e do navegador usado, e podemos usar diferentes etiquetas para cada una delas.

BGSOUND

A etiqueta bgsound incorpora áudios de fundo em uma página web, áudios que se executam automaticamente ao carregar página. É uma etiqueta proprietária de Microsoft, por isso só é interpretada por Internet Explorer, admitindo os formatos de áudio MID e WAV, embora geralmente também aceita AU e MP3, em versões atuais do navegador ou mediante plugins de uso geral.

Sua sintaxe geral, com seus atributos mais importantes, é do tipo:

<bgsound src="rota_arquivo" loop="l" balance="b" volume="v"></bgsound>

Onde:
src="rota_arquivo" fixa a rota na qual se encontra o arquivo de áudio a reproduzir. A rota pode ser relativa ao nosso sistema de pastas local, absoluta com respeito ao sistema de pastas do servidor web ou uma URL completa que localize o arquivo em Internet.


loop="l" determina o número de vexes (l) que se deve executar o arquivo de áudio. Se dermos o valor infinite, o arquivo se reproduzirá indefinidamente.


balance="b" determina o equilíbrio de áudio entre dois alto-falantes da máquina, ou seja, a potência ou intensidade com que se escutará em cada um deles (direito e esquerdo). Seus valores podem estar entre -10,000 e +10,000, correspondendo o valor 0 a um balance equilibrado entre os dois alto-falantes.


volume="v" fixa o volume ao que se ouvirá o áudio, e seus valores podem variar entre -10,000 (mínimo) e 0 (máximo). Não é suportado pelas máquinas MAC.
Exemplo:

<bgsound src="../audios/wav.wav" balance=0 volume=0></bgsound>

 

[helldanger1]

A etiqueta bgsound admite muitas mais propriedades (disabled, delay, id, class, controls, etc.). Ainda assim, esta etiqueta é acessível em Internet Explorer mediante código JavaScript, podendo modificar em tempo real suas propriedades balance, loop, src, e volume, embora esta última só seja acessível em plataformas PC. Para uma informação completa sobre todas as propriedades e funcionalidades desta etiqueta pode-se visitar a página correspondente de Microsoft:

http://msdn.microsoft.com/library/d...op/author/dhtml/reference/objects/bgsound.asp

EMBED

Nestcape Navigator implementou a etiqueta embed para incorporar arquivos de áudio. Easta é uma etiqueta de caráter geral, que se usa para a inclusão nas páginas web de todos aqueles arquivos alehios ao navegador e que necessitam portanto a execução de algum plugin para sua interpretação.

Paradoxalmente, Internet Explorer assumiu depois o uso desta etiqueta para a inclusão de arquivos de áudio, para chegar a interpretá-la melhor e ampliá-la com mais atributos e propriedades, de tal forma que a execução de áudio com embed é atualmente mais cômoda com este navegador, ao incorporar a suíte de Microsoft seus próprios plugins para a interpretação dos diferentes formatos de áudio. Em troca, se usamos Netscape Navigator nos encontraremos em muitos casos com uma falha na reprodução ou com uma molesta mensagem de necessidade de algum plugin especial (sobretudo nas versões 6x), o que nos obrigará a visitar a página de Netscape para seu download e instalação, que muitas vezes não será efetiva.

Seja como for, há que indicar que esta etiqueta nos incluirá na página web um objeto especial, uma espécie de console de comando, denominada Crescendo, que consta de três botões, similares ao de qualquer reprodutor de áudio: um botão Play, para começar a reprodução (se não estiver estabelecido o automático), um botão Pause, para deter momentaneamente e um botão Stop, para deter definitivamente (posto a zero). Este console é diferente segundo o navegador usado; no caso de Internet Explorer se mostra o típico console de Windows Media, cujo tamanho podemos configurar, enquanto que em Netscape se mostra um console próprio, de tamanho fixo definido.

A sintaxe geral da etiqueta embed é do tipo:

<embed atributo1="valor1" atributo2="valor2"...atributoN="valorN"></embed>

E no caso que nos ocupe, da inclusão de arquivos de áudio, os atributos podemos dividi-los em dois tipos:

1. Atributos referentes ao áudio:
src="rota_arquivo", que fixa a rota na qual se encontra o arquivo de áudio a reproduzir. A rota pode ser relativa ao nosso sistema de pastas local, absoluta respeito ao sistema de pastas do servidor web ou uma URL completa que localize o arquivo em Internet.


loop="l/true/false", que determina o número de vezes que se deve executar o arquivo de áudio. Os valores admitidos são l (número inteiro de vezes), true (infinitas vezes) e false (só uma vez). Só é reconhecida por Netscape Navigator.


playcount="n", que define o número de vezes que se deve executar em arquivo de áudio no caso de Internet Explorer.


type="tipo_arquivo", atributo importante, que declara o tipo de arquivo de áudio que estamos usando, com o qual o navegador web pode executar o programa ou plugin adequado para a reprodução do arquivo. Pode ser audio/midi, audio/wav, etc.


autostart="true/false", que determina se o arquivo de áudio deve começar a se reproduzir por si só ao carregar a página ou se ao contrário, será preciso a atuação do usuário (ou de código de script) para que comece a audição.


pluginspage="URL", que estabelece, no caso de ser necessário um plugin especial para reproduzir o arquivo, a página web onde se pode baixar o mesmo. Só se ativa no caso de que o navegador não seja capaz de reproduzir o arquivo por si mesmo, e é suportada somente por Netscape Navigator.


name="nome", que atribui um nome identificador (deve ser único na página) a uma etiqueta embed determinada, com objeto de ser acessada logo por linguagens de script.


volume="v", que determina o volume de reprodução de áudio, e que pode variar entre 0 e 100. É suportada somente por Netscape Navigator, que no console mostra o valor estabelecido em seu indicador de volume, sendo seu valor padrão 50. No caso de Internet Explorer, o valor de volume por padrão é 50 em plataformas PC, e 75 em MAC, sendo necessário agir sobre o controle de volume do console para modificá-lo.

 

[helldanger1]

2. Atributos referentes ao console:
hidden="true/false", que estabelece se o console será visível (false) ou não (true). Este é um aspecto polêmico, já que se ocultamos o console obrigamos ao usuário a ouvir nosso arquivo, sem possibilidade de deter nem de modificar o volume, e se o mostramos estaremos incrustando na tela um objeto que muitas vezes nos romperá o esquema de design de nossa página. Resta determinar seu uso em cada caso concreto.


width="w", que determina a largura visível do console, em pixels. height="h", que determina a altura visível do console, em pixels. Estes atributos são também muito importante, no caso de que tenhamos estabelecido hidden= "false", já que de seu valor irá depender a correta visulazação do console. No caso de Internet Explorer, que mostra um logo de Windows Media sobre os controles, o tamanho mínimo aceitável deve ser de 140x100 pixels, já que senão o console sairá deformado em excesso ou recortado. E no caso de Netscape Navigator, deveremos atribuir uns valores de 145x60 pixels, que é o que ocupa o console; se colocarmos um tamanho menor, o console será recortado, perdendo funcionalidades, e se atribuímos um tamanho maior, aparecerão espaços cinzas ao redor do console, tornando o aspecto da página feio. Se não especificarmos estes atributos e tampouco hidden, aparecerá na página somente os comandos do console, sem logotipos adicionados (Internet Explorer) ou o console recortado (Netscape Navigator).


align="top/bottom/center/baseline/left/right/
texttop/middle/absmiddle/absbotom", análogo ao da etiqueta IMG, define o alinhamento horizontal ou vertical do console com respeito aos elementos da página.


hspace="hs", que estabelece a separação horizontal, vspace="vs", que estabelece a separação vertical, em pixels, entre o console e os elementos da página que a rodeiam. Análoga aos seus equivalentes da etiqueta IMG.
Estes são os atributos principais, embora possamos encontrar referências de outros admitidos, apesar de não costumarem ser operacionais na realidade, já que não funcionam de forma correta ou são específicos de Nestcape (como toda a série de atributos que configuram os controles do console).

Exemplo sem console:

<embed src="../audios/mid.mid" hidden="true" type="audio/midi" autostart="true"></embed>



Exemplo com console:

<embed src="../audios/mid.mid" hidden="false" type="audio/midi" autostart="false" width="150" height="100"></embed>

Que temos visível (e audível) nesta outra janela.

 

[helldanger1]

Áudio em HTML (V)



Neste capítulo veremos o potencial da etiqueta OBJECT.

Por Luciano Moreno




A etiqueta OBJECT.

Com objeto de normalizar a inclusão de arquivos não nativos nos navegadores web se decidiu substituir as diferentes etiquetas que realizavam este papel (APPLET, BGSOUND, EMBED, etc.), e que não pertenciam aos padrões web, por uma etiqueta geral, que fosse capaz de incrustar no navegador todo tipo de arquivo. A etiqueta escolhida no padrão HTML 4.0 foi OBJECT, a qual se dotou de suficientes atributos e flexibilidade para poder realizar corretamente seu trabalho. Devido a isto, a proposta foi usar a etiqueta object também para incluir arquivos de áudio de todo tipo nas páginas web.

Pois bem, a aceitação e implementação que a mesma teve varia segundo a do navegador em particular, assim como em função do objeto a incrustar. Desta forma, Internet Explorer realizou sua própria implementação da etiqueta object, incluindo nela referências a filtros e componentes ActiveX específicos para os arquivos de áudio. Por seu lado, os navegadores Netscape não suportam corretamente esta etiqueta para arquivos deste tipo.

Restringindo-nos a Internet Explorer, a polêmica continua, já que em diferentes manuais encontraremos diferentes formas de incrustar áudios mediante object, umas que funcionam bem, e outras que não. Por que acontece isto? Eu creio que porque Microsoft foi usando a etiqueta object para implementar todo um grande conjunto de componentes próprios, que ademais foram se adaptando às diferentes versões de Internet Explorer.

Como regra geral, válida não só para incrustar arquivos de áudio, como também para outros tipos, a etiqueta object vai definir um objeto ou componente externo encarregado da reprodução do arquivo, que no caso de Internet Explorer costuma ser algum tipo de controle ActiveX. Mediante object se instancia o objeto, se declara sua URL e suas principais propriedades gerais, e mediante um conjunto de etiquetas especiais, PARAM, se passam os valores que necessita para seu correto funcionamento ou para sua configuração desejada.

A sintaxe geral da etiqueta object, para o caso de arquivos de áudio, é do tipo:

<object atributo1="valor1" atributo2="valor2" ... atributoN="valorN">
<param name="nome" value="valor">
<param name="nome" value="valor">
...
</object>

 

[helldanger1]

Os principais atributos de object, em referência a arquivos de áudio, são:
classid="identificador_objeto", que fixa a URL do objeto ou componente externo necessário para reproduzir o arquivo de áudio, e a implementação CLSID dos controles ActiveX necessários.


type="tipo_arquivo", atributo importante, que declara o tipo de arquivo de áudio que estamos usando.


width="w", que determina a largura visível do console, em pixels.


height="h", que determina a altura visível do console, em pixels.


align="top/bottom/center/baseline/left/right /texttop/middle/absmiddle/absbotom", análogo ao da etiqueta IMG, define o alinhamento horizontal ou vertical do console com respeito aos elementos da página.


hspace="hs", que estabelece a separação horizontal, vspace="vs", que estabelece a separação vertical, em pixels, entre o console e os elementos da página que a rodeiam. Análoga aos seus equivalentes da etiqueta IMG.


autostart="true/false", que determina se o arquivo de áudio deve começar a se reproduzir por se só ao carregar a página ou se pelo contrário será preciso a atuação do usuário (ou de código de script) para que comece a audição.


standby="mensagem", que apresenta em tela uma mensagem ao usuário enquanto carrega o arquivo.


Quanto aos elementos, param os mais importantes são:

param name="FileName" value="rota_arquivo", determina a rota ou URL do arquivo de áudio a reproduzir. Não é necessário utilizar só arquivos WAV ou MID, podendo reproduzir também arquivos MP3 ou Real Audio. Explorer inclui o reprodutor do primeiro em ActiveMovie (componente de Windows Media).


param name="autostart" value="true/false", indica ao navegador se se deve começar a reproduzir o áudio automaticamente ao carregar a página ou se pelo contrário será preciso que o usuário clique o botão Play para isso.

 

[helldanger1]

Estes não são todos os atributos e parâmetros possíveis. Na verdade, quanto aos componentes Microsoft, podemos encontrar uma infinidade de configurações possíveis, que vão nos permitir fixar muitos aspectos dos mesmos. Deixo a cada um a possibilidade de aprofundar no estudo daqueles componentes e propriedades que necessite, porém sabendo que com os elementos vistos acima temos mais que suficiente para apresentar um arquivo de áudio em nossa página web.

xExemplo:

<object classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A" width="150" height="175" type="audio/midi">

<param name="FileName" value="../audios/xfiles.mid">
<param name="autostart" value="true">
</object>>

Que se pode ver funcionando nesta janela (somente em Internet Explorer).

A etiqueta A.

Se até agora vimos como podemos incluir em nossas páginas áudios de fundo ou iniciados pelo usuário mediante interação com o console Crescendo, vamos ver agora como podemos implementar áudio mediante o uso de uma das etiquetas mais polivalentes em HTML: a etiqueta A.

Efetivamente, os links são a base do hipertexto, base por sua vez da web, e dentro de seus múltiples usos podemos considerar o link a arquivos de áudios. O arquivo linkado pode ser interpretado diretamente pelo navegador (por ser de reprodução direta ou por ter instalado o plugin adequado) ou pode ser executado por um programa independente que se abra automaticamente (Winamp, Real Audio, etc.), sendo este o caso mais comum. Se o usuário não dispõe do programa ou plugin adequado, se abrirá uma janela de download do arquivo, com o qual poderá salvá-lo até dispor da aplicação necessária para sua reprodução.

A sintaxe geral neste caso será do tipo:

<a href="rota_arquivo">Mensagem</a>

Exemplo de arquivo MID:

<a href="audios/watermark.mid">Música para você</a>



Exemplo de arquivo MP3:

<a href="audios/mp3.mp3">Madonna</a>

 

[helldanger1]

Declaração DOCTYPE em documentos HTML



Estudo da declaração do tipo de documento HTML, que se especifica na declaração DOCTYPE ao princípio do código.

Por Jose A. Molina



Neste artigo nos centraremos na declaração DOCTYPE dos documentos HTML.

O W3C (World Wide Web Consortium: _www.w3.org), encarregado da criação dos Standard webs, define que os arquivos HTML, XML, XHTML devem ter uma declaração de tipo DOCTYPE que deve fazer referência a uma das três definições do tipo de documento que existem.

Esta declaração deve ser a primeira linha de nosso documento e é necessária para dizer ao navegador que versão de HTML é a que se usa na página. Se não se faz, o navegador processará a página em modo Quirks (modo de compatibilidade) podendo não interpretar corretamente o código da página.

A DTD (definição do tipo de documento) é a estrutura regulamentar, ou seja, os elementos e atributos que estão disponíveis para cada tipo de documento. Para HTML 4.01 (as versões anteriores não são recomendáveis devido a que não são totalmente compatíveis com as Folhas de Estilo), existem 3 tipos de DTD:
HTML 4.01 transitório

O HTML 4 transitório inclui todos os elementos e qualidades de HTML 4 Strict, porém agrega qualidades "presentational", elementos desaprovados ou elementos obsoletos. Chama-se Transitional porque está pensado como transição para HTML 4 estrito.

O modo de defini-la é:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">

HTML 4.01 Frameset:

Esta é uma variante de HTML 4 transitório para os documentos que utilizam Frames (molduras).

O modo de defini-la é:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Frameset//EN\" \"http://www.w3.org/TR/html4/frameset.dtd\">

HTML ESTRITO

Se declararmos este DTD, o navegador passará a agir em cumprimento dos padrões (Standards compilam-se). Isto implicará que só possam se usar as etiquetas de HTML 4.01. Este é o modo recomendado pelo W3C, já que é compatível com o CSS e pode ser interpretado corretamente por todos os navegadores, tornando muito mais fácil o passo de nossos documentos ao XHTML que muito possivelmente tenda a substituir ao HTML nos próximos anos.

O modo de defini-la é:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">

 

[helldanger1]

Atributo nofollow nos links




O atributo rel=nofollow, dos links, serve para que os buscadores não continuem rastreando a partir desses links.

Por Miguel Angel Alvarez - Tradução de JML


Deixaremos aqui uma pequena resenha sobre um atributo que está se convertendo em essencial nos links e que não tínhamos comentado em nosso manual de HTML, embora sim que vimos algo em nosso manual de posicionamento em buscadores.

Nofollow é um atributo dos links HTML (etiqueta <A>), que serve para definir ou marcar o comportamento dos buscadores quando rastreiam nossa página web em busca de conteúdos para indexá-los. Por padrão, quando um buscador visita uma página web vai percorrendo todos seus links e vai indexando seu conteúdo em seu banco de dados de páginas. Isto é algo que fazem automática e periodicamente. Ocorre tanto com os links internos a outras páginas de nosso site como com os links externos a outras páginas web. Os motores que percorrem as webs de link a link, se chamam aranhas.

Pois bem, nós podemos através do atributo rel="nofollow", dizer a um buscador que não continue indexando os conteúdos da página a qual leva um link em particular. Faríamos assim:

<a href="URL_DO_LINK" rel="nofollow">TEXTO_DO_LINK</a>

Um pouco de história sobre nofollow

Para completar estas notas teríamos que comentar que o atributo foi criado por iniciativa de Google e Blogger em 2005, como uma idéia para deter o spam de links em websites que permitem aos usuários a participação.

Uma prática comum das pessoas que pretendem divulgar uma página web é realizar comentários ou participações em páginas web, nas que inserem links aos seus próprios sites. Isto se conhece como spam de links, ou com o término de spamdexing.

Com o atributo rel="nofolow" pretende-se mitigar os efeitos desse tipo de spam nos sites como fóruns, blogs, ou qualquer página que permita a interação com a comunidade de visitantes. Algumas páginas como a Wikipedia o utilizam em todos os links externos.

Atualmente, o atributo ren=nofollow está sob patente, embora esteja liberada de royalties, o que quer dizer que se pode utilizar sem limitação e sem ter que pagar nada.