sexta-feira, 7 de março de 2008

Expressão Regular para encontrar TAGs HTML

Com a expressão regular abaixo eu consigo criar um array como o que está mais abaixo

<[^>]*>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>

    teste

 </BODY>
</HTML>

O Array gerado:

Matches[0] = <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Matches[1] = <HTML>
Matches[2] = <HEAD>
Matches[3] = <TITLE>
Matches[4] = </TITLE>
Matches[5] = <META NAME="Generator" CONTENT="EditPlus">
Matches[6] = <META NAME="Author" CONTENT="">
Matches[7] = <META NAME="Keywords" CONTENT="">
Matches[8] = <META NAME="Author" CONTENT="">
Matches[9] = <META NAME="Description" CONTENT="">
Matches[10] = </HEAD>
Matches[11] = <BODY>
Matches[12] = </BODY>
Matches[13] = </HTML>

 

Não só para destrinchar o código HTML, mas também para trabalhar com templates essa fórmula de expressão regular é muito usada, imagine o caso de ter um templatezinho do corpo de um email assim:

___________________

Prezado {apelido},

Favor confirme seu cadastro junto nossa empresa, as informações que temos são:

{nome_completo}, nascido em {data_nascimento}, com endereço residencial em {endereco_residencial}.

___________________

Daí usamos a expressão regular {[^}]*} para formar um array com todos os parâmetros do template para substituir depois. Se fossemos usar um mero replace, precisaríamos engessar o código com cada um dos parâmetros usados, usando a expressão regular, a parametrização fica dinâmica, permitindo até que o próprio usuário do sisteminha de email diga o que vai em cada parâmetro.

Por exemplo:

A lista de destinos é composta por:

SELECT Clientes.Apelido, Clientes.Nome, Clientes.DataNascimento, Clientes.Endereco, Clientes.Email
FROM Clientes
ORDER BY Clientes.Nome

E em uma tela do sisteminha, o usuário pode escolher qual dos campos da lista está vinculado a qual dos campos do template, dando uma flexibilidade bem jóia pro envio de email, trabalhinho bem facilitado pela expressão regular.

{apelido} = Clientes.Apelido
{nome_completo} = Clientes.Nome
{data_nascimento} = [ Informe aqui o campo que deseja usar ]
{endereco_residencial} = [ Informe aqui o campo que deseja usar ]

quarta-feira, 5 de março de 2008

Tocar música no site

Para tocar um arquivo mp3 no mesmo estilo do youtube "rodar enquanto carrega", a sugestão é usar um player em swf que se encontra na web.

Pode fazer download do arquivo nesse endereço:

http://www.socialsportclub.com.br/music.zip
(contém o player.swf e um exemplo music.html)

É possível configurar as cores e propriedades como autostart e loop.

No exemplo, quando a página carregar o Player vai inciar a música automaticamente (autostart) e vai ficar ficar repetindo (loop).

Então, crie uma página html e na tag head coloque o javascript:

------------------

<script language="JavaScript">
var ap_instances = new Array();

function ap_stopAll(playerID) {
for(var i = 0;i<ap_instances.length;i++)
{
try
{
if(ap_instances[i] != playerID)
document.getElementById( "audioplayer" + ap_instances[i].toString() ).SetVariable("closePlayer", 1);
else
document.getElementById( "audioplayer" + ap_instances[i].toString() ).SetVariable("closePlayer", 0);
}
catch( errorObject )
{
// stop any errors
}
}
}

function ap_registerPlayers()
{
var objectID;
var objectTags = document.getElementsByTagName("object");
for(var i=0;i<objectTags.length;i++) {
objectID = objectTags[i].id;
if(objectID.indexOf("audioplayer") == 0) {
ap_instances[i] = objectID.substring(11, objectID.length);
}
}
}

var ap_clearID = setInterval( ap_registerPlayers, 100 );
</script>

------------------

Depois, no Body crie o objeto:

--------


<object type="application/x-shockwave-flash" data="player.swf" id="audioplayer1" height="24" width="290">
<param name="movie" value="player.swf">
<param name="FlashVars" value="playerID=1&bg=0xf8f8f8&leftbg=0xeeeeee&lefticon=0x666666&rightbg=0xb8b160&rightbghover=0x999999&righticon=0x323232&righticonhover=0xffffff&text=0x666666&slider=0x666666&track=0xFFFFFF&border=0x666666&loader=0xb8b160&loop=yes&autostart=yes&soundFile=sua_musica.mp3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>

--------

Perceba que em no parametro "FlashVars" você configura as cores podendo personalizar de acordo com as cores do seu site.

O FlashVars é composto de uma string com diversos parametros, entre eles os responsáveis por iniciar a música automaticamente e por repetir a música sem parar (se o usuário não clicar no pause) são loop=yes e autostart=yes, e para desativar o loop o autostart basta substituir o valor yes por no.

Se você ainda quiser fazer a música rodar sem parar mesmo quando o usuário navega pelos links que provocam reload na página, daí só colocando um iframe ou alguém comente uma outra forma que não seja desenvolvendo todo site em flash pois não sou muito fã do iframe.

E era isso ...

-----