Função simples para testar tempo de execução em PHP

August 6th, 2008

Vou ser bem objetivo neste post.
Mostrarei uma função bastante simples para que rapidamente você verifique o tempo de execução de seus scripts PHP. Após mostrar a função, exemplo de uso e resultado, explicarei o fucionamento da função.

function getTime(){
	static $tempo;
	list($usec, $sec) = explode(" ",microtime());
	if( $tempo == NULL ){
		$tempo = ((float)$usec + (float)$sec);
	}
	else{
		echo 'Tempo (segundos): '.(((float)$usec + (float)$sec)-$tempo).'';
	}
}

Esta função funciona no PHP 4 e 5. No PHP 5 foi adicionado um parâmetro a esta função, que serve como uma flag para que o retorno da função seja float ou não (documentação do PHP para a função microtime).
Então uma forma de escrever esta função somente para PHP 5 seria:

function getTime(){
	static $tempo;
	if( $tempo == NULL ){
		$tempo = microtime(true);
	}
	else{
		echo 'Tempo (segundos): '.(microtime(true)-$tempo).'';
	}
}

Fica mais elegante porém só funciona para a versão 5 do PHP.
Vou mostrar agora um exemplo de como usá-la para que vocês vejam a simplicidade de uso.

getTime();

$testeIteracao = 0;
for($i=0;$i<1000000;$i++){
	$testeIteracao++;
}

getTime();

No código acima o resultado aqui na minha máquina foi:

Tempo (segundos): 0.19565415382385

Ou seja o PHP levou 195,65 milissegundos para executar este loop.

Como vimos, no código de exemplo, a função é chamada uma vez antes do código a ser testado e outra vez depois do código.
Na primeira chamada a variável estática “$tempo” é declarada e possui valor “NULL” e por isso obedece ao “if( $tempo == NULL )” e recebe o valor da função “microtime()”.
Na segunda chamada a variável “$tempo”, por ser estática, já possui um valor que é o tempo que foi armazenado na primeira chamada. Então entramos no “else” que subtrai o valor de uma nova chamada da função “microtime()” com o valor de “$tempo” e imprime esse valor. Dessa forma obtemos o tempo que levou da primeira chamada de “getTime()” até a segunda, ou seja o tempo de execução do código que está entre as duas chamadas da função.

As variáveis estáticas em classes, são variáveis que podem ser acessadas mesmo sem se ter um instância de um objeto daquela classe (Palavra-chave ’static’ em classes). Porém no caso de uma variável estática em uma função este valor é mantido entre as chamadas da função, sendo mantido em seu escopo, por isso aconteceu o que foi mostrado.

Espero que tenham gostado, Abraço e até o próximo post.

Django Graphviz - Documentando seus models

July 29th, 2008

Navegando pelos blogs hoje eu me deparei com uma ferramenta muito interessante: o Django Graphviz. Ele gera, a partir do arquivo models.py, uma representação gráfica do banco de dados da aplicação. Segue abaixo uma imagem gerada por ela:

Representação gráfica do banco de dados

No blog do Mayron Cachina [1] existe um tutorial explicando como utilizar a ferramenta.

[1] http://cachina.wordpress.com/2008/02/29/djangographviz-cria-um-png-de-seu-model/

CakePHP - Herança de Helper

June 2nd, 2008

Ultimamente tenho utilizado o Framework CakePHP, e uma dúvida que me surgiu esses dias foi como um Helper herdar de outro helper. Por exemplo, criei um helper MyTimeHelper que herda do TimeHelper, e adicionei um método que sobrescreve o format. Entretanto, me ocorria um problema que o script não conseguia encontrar o TimeHelper, por ele não ter sido invocado pelo core do cake. Então eu adicionei a linha App::import(’Helper’,'Time’); no início da definição do MyTimeHelper e o problema foi resolvido. Então o codigo fica assim:

App::import(’Helper’, ‘Time’);

class MyTimeHelper extends TimeHelper {

}

Evitando múltiplos posts com session

March 10th, 2008

Muitos desenvolvedores já se depararam com a situação de que usuários impacientes enviam formulários dezenas de vezes, e isso realmente incomoda, pois aparecem vários registros idênticos.

Uma forma de solucionar tal problema seria usando session. No momento do envio, salva algo que identifique(que chamarei de identidade) o formulário na SESSION, e sempre que for enviar algo, verifica se a identidade da session bate com a do fomulário enviado, se bater, o sistema impede que o formulário seja enviado novamente.

No caso de formulários de e-mail, eu particularmente uso como identidade a mensagem do e-mail criptografada por md5, visto que reduz significativamente o tamanho do que será guardado na session.

Bom, vamos aos códigos:


session_start();

$md5Mensagem = md5($_POST['mensagem']);
if(isset($_SESSION['md5Mensagem'] && $md5Mensagem == $_SESSION['md5Mensagem']){
     echo 'Esta mensagem já foi enviada';
} else {
     if(ENVIA_MENSAGEM){
          $_SESSION['md5Mensagem'] = $md5Mensagem;
          echo 'Mensagem enviada com sucesso';
     } else echo 'Mensagem não foi enviada';
}

O código acima está bem simplificado, eu encapsulei o processo de enviar a mensagem (função mail, gravar no banco, ou qualquer outro método) por fugir do escopo deste post.

O código verifica se existe algum md5Mensagem na session, e se ele é igual ao md5 da mensagem enviada, se sim, ele informa que a mensagem já foi enviada, se não, o sistema tenta fazer o envio, se der certo ele salva o md5 na session, se não, ele apenas informa que não deu certo.

Bom, é isso, qualquer dúvida, postem comentários que responderemos.

Mensagens de Erro com Session em PHP (serialize)

February 11th, 2008

Pra quem pensa que a variável global SESSION é apenas para autenticação de usuários, aqui vai mais uma. O objetivo principal da SESSION, assim como dos COOKIES é enviar variáveis calculadas em uma página para outra página.

Irei apresentar aqui um sistema simples de mensagens de erro e confirmação com o uso da SESSION.

Primeiramente vou apresentar uma classe que eu usei para armazenar as mensagens:


<?
class Mensagem {
    public static $ERRO=1,$SUCESSO=2;

    private $mensagem;
    private $tipo;

    public function __construct($mensagem,$tipo){
        $this->mensagem = $mensagem;
        $this->tipo = $tipo;
    }

    public function getMensagem(){
        return $this->mensagem;
    }

    public function getTipo(){
        return $this->tipo;
    }

    public static function tipoToString($tipo){
        if($tipo == 1) return 'erro';
        else if($tipo == 2) return 'sucesso';
    }
}
?>

Pra quem já mexe com orientação a objetos, a classe acima é simples. Uma classe com 2 variáveis estáticas($ERRO e $SUCESSO) que seriam os tipos de mensagens, uso isso mais para definir o CSS que irá acompanhar a mensagem. Tem duas variáveis, uma para a mensagem em si, e outra para o tipo da mensagem, um construtor que define as variáveis, e funções para obter os valores das variáveis.

O uso é simples, vamos ver um caso abaixo:

Temos a página de formulário simplificada (form.php) da seguinte forma:


<?
if(isset($_SESSION['mensagens'])){
    $mensagens = unserialize($_SESSION['mensagens']);
    unset($_SESSION['mensagens']);
} else {
    $mensagens = array();
}

if(isset($_SESSION['pessoa'])){
    $pessoa = unserialize($_SESSION['pessoa']);
    unset($_SESSION['pessoa'];
} else {
    $pessoa = new Pessoa();
}

?>

<ul class="mensagens">
    <?= foreach($mensagens as $mensagem): ?>
    <li><p class="<?=Mensagem::tipoToString($mensagem->getTipo())?>"><?=$mensagem->getMensagem()?></p>  </li>
    <? endforeach; ?>
</ul>
<form action="insert.php" method="post">
    <input name="nome" value="<?=$pessoa->getNome()?>" type="text" />
    <input name="idade" value="<?=$pessoa->getIdade()?>" type="text" />
    <input type="submit" />
</form>

No código acima, criamos um formulário solicitando nome e idade. As primeiras linhas são código PHP, atente para a função unserialize, ela desserializa os dados que vieram da SESSION, visto que a mesma não suporta objetos. Pegamos da SESSION as mensagens, e apagamos da SESSION para que a mensagem só apareça uma vez. Fazemos o mesmo com um objeto do tipo pessoa, o qual armazena os dados que já foram enviados previamente, evitando que o usuário preencha o formulário novamente.

Abaixo vem uma lista, com todas as mensagens que estavam na SESSION. Atente para a função tipoToString, da classe mensagem, que eu criei apenas para definir o atributo class do parágrafo da mensagem.

Em seguida vem o formulário pegando todos os values do objeto pessoa que estava na SESSION.

Abixo teremos o script que irá processar este formulário (submit.php):


<?

$nome = $_POST['nome'];
$idade = $_POST['idade'];

$pessoa = new Pessoa();

if(!$nome) $mensagens[] = new Mensagem("O nome não foi informado",Mensagem::$ERRO);
else $pessoa->setNome($nome);

if(!is_numeric($idade)) $mensagens[] = new Mensagem("A idade deve ser um número!",Mensagem::$ERRO);
else $pessoa->setIdade($idade);

if(count($mensagens)){
    $_SESSION['mensagens'] = serialize($mensagens);
    $_SESSION['pessoa'] = serialize($pessoa);
    header("Location: form.php");
}

if(cadastra no banco){
    $mensagens[] = new Mensagem("Pessoa cadastrada com sucesso!",Mensagem::$SUCESSO);
} else {
    $mensagens[] = new Mensagem("Ocorreu um erro durante o cadastramento da pessoa!",Mensagem::$ERRO);
}

header("Location: form.php");

?>

No código acima, pegamos os dados do formulário através do POST e verificamos se os dados validam de acordo com algumas regras, caso contrário colocamos, em um array de mensagens, uma mensagem de erro. Depois de feita a validação, verificamos se existem mensagens de erro, caso positivo, serializamos as mensagens e a pessoa que possui alguns dados já cadastrados e colocamos na SESSION, fazendo o redirecionamento para o formulário, de forma que o usuário possa retificar seus erros.

Caso tudo ocorra dentro do normal, armazenamos uma mensagem de sucesso na SESSION, e redirecionamos para o formulário, para que o usuário efetue novo cadastro. Poderia redirecionar para a lista de cadastrados, ou qualquer outro lugar, contanto que o script tenha os códigos que lessem a mensagem de sucesso, mas para simplificar o meu post, eu criei apenas duas páginas.

Espero que isso ajude, e qualquer dúvida, comenta.

Melhorando o tempo de carregamento de um site

December 21st, 2007

Não sei se o leitor conhece um add-on (ou plugin) do Firefox chamado Firebug. Essa ferramenta é de fundamental importância para o desenvolvimento de sites usando CSS e Javascript, não vou entrar em detalhes. Onde quero chegar é que o Firebug possui um add-on ( isso mesmo um add-on de um add-on ) chamado YSlow, ele ajuda bastante o desenvolvedor a achar onde o site está lento. Ele se baseia em 14 regras, por ordem de importância, para dar notas ao site. Dependendo de como ele estiver em cada uma das regras ele receberá a respectiva nota para a regra. Falarei sobre algumas das regras que esse programa apresenta e como obter uma melhor nota em cada uma delas.

Regra número 1: Fazer o minimo de requisições HTTP possível

Como eu falei acima as regras estão em ordem de importância, ou seja essa é a principal delas. Para diminuir as requisições HTTP do seu site o que pode ser feito é diminuir o número de arquivos externos, como por exemplo, arquivos Javascript, CSS, imagens, etc. No caso o ideal seria que o site tivesse no máximo um arquivo CSS e um Javascript. Já no caso das imagens o que pode ser feito é salvar várias imagens em apenas uma e usando a propriedade background-position do CSS você acessaria cada uma dessas imagens.

exemplo

Regra número 2: Usar mais de um sub-domínio

Você pode criar subdomínios e colocar os arquivos externos de seu site neles. Por exemplo se você tem o domínio meiocodigo.com você pode colocar seus arquivos CSS e javascript num subdomínio a.meiocodigo.com e botar arquivos flash, flv e vídeos por exemplo num subdomínio b.meiocodigo.com. Isso melhora a velocidade do site por que ao fazer isso você acessa mais de um servidor de uma vez, e dessa forma eles têm como enviar seus pedidos mais rapidamente. Para entrar em mais detalhes sobre os benefícios visite este site.

Regra número 3: Adicionar data de expiração no cabeçalho

A data de expiração que pode vir no cabeçalho de arquivos HTTP serve para informar ao browser a data em que ele deve ser desprezado, ou seja se colocarmos uma data futura no cabeçalho o browser será capaz de armazenar em cache o arquivo até a data que você determinar. Existem várias formas de fazer isso. Uma delas é adicionando a meta tag abaixo dentro da tag head de uma página de seu site:

<meta http-equiv=“expires” content=“Tue, 18 Dec 2007 02:18:46 GMT” />

Uma outra que eu particularmente prefiro e acho mais robusta, apesar de que somente serve para servidores Apache ( mas deve ter formas semelhantes para outros servidores ) é acrescentar a seguinte regra ao seu httpd.conf ou .htaccess:

<FilesMatch ".(jpg|jpeg|png|gif)$">
Header set Expires "Tue, 18 Dec 2007 02:18:46 GMT”
</FilesMatch>

Dessa forma eu estou dizendo que apenas os arquivos de imagem do meu site terão data de expiração futura. Você pode usar essa forma para adicionar datas de expiração diferentes para diferentes grupos de arquivos. Por exemplo não é muito interessante colocar uma data muito futura no caso de arquivos .html ou .php, que são arquivos que estão em constante atualização.

mais sobre cache

Regra número 4: Compactar arquivos externos com GZip

Essa é uma das principais regras para quem costuma usar bibliotecas javascript (JQuery, Mootools, etc) com frequência, mas também pode ser usado com qualquer arquivo. A motivo de informação sobre os benefícios da compactação GZip darei um exemplo de uma usando a biblioteca JQuery que tem em torno de 77kb em sua forma normal. Se for usado o compactador de javascript do Yahoo! ele passa a ter em torno de 46kb, e se for usada a compactação GZip em cima desse arquivo a biblioteca fica com incríveis 15kb! É um ganho de 513,33%!

Para compactar seus arquivos usando GZip deve-se ter o mod_deflate instalado no Apache ( a maioria dos hosts possui ) e pode-se usar a seguinte regra em seu httpd.conf ou .htaccess:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/x-javascript text/css text/javascript
</IfModule>

Neste caso estou compactando apenas os arquivos Javascript e CSS, mas claro que pode-se adicionar outros tipos de arquivos. Para mais tipos de arquivos você pode olhar o arquivo mime.type que se encontra na pasta raiz do Apache.

Regra número 5: Colocar arquivos CSS no cabeçalho do arquivo

Foi constatado que as páginas de um site carregam com maior velocidade se os estilos forem colocados na tag head dos arquivos. Isso acontece por que a renderização da página é feita progressivamente, ao contrário do que acontece quando você coloca CSS no final de um arquivo. Um outro fator é o visual, quando um usuário abre uma página e ela vai “visualmente abrindo” ele sabe que a página está chegando em seu browser e ele vai esperar calmamente (até um certo limite, é claro), mas se você colocar o CSS na parte de baixo do site ele será a última coisa a ser lida pelo browser e o usuário terá a sensação que o site não está carregando até que seja finalmente lido o CSS e ele veja o site completo. Além de que existem bugs de renderização no IE, quando se coloca CSS na parte de baixo do site ( em cima ou em baixo, sempre existirão bugs de renderização no IE :S ).

Regra número 6: Colocar scripts no final do arquivo

Os browsers lêem o código fonte dos sites de cima para baixo, e quando lê uma inclusão de um arquivo Javascript, por exemplo, ele tem que baixar todo o arquivo, ler seu conteúdo e interpretar o código, para somente depois continuar com a leitura do resto do site. Por isso quando existem arquivos muito pesados na parte de cima de um site o usuário pode ficar um tempo considerável sem ter nenhuma resposta visual do site, por que o browser está lendo e interpretando linhas de script. Por isso, deve-se evitar ao máximo colocar scripts na parte de cima dos sites. Uma das soluções é incluir um arquivo, usando qualquer linguagem server-side, somente com scripts no final da página, antes do fim da tag body.

Regra número 7: Evitar expressões no CSS

As expressões de CSS são suportadas apenas pelo Internet Explorer e devem ser evitadas por que são executadas toda vez que um evento acontece no site ( toda vez que o mouse mexe, ou damos um click por exemplo) , podendo acarretar em lentidão no computador do usuário. A regra é só usar expressões em casos em que já se tentou de tudo e não se obteve sucesso. Para quem não sabe o que são expressões de CSS ai vai um exemplo de linha de código para uma expressão desse tipo, pesadíssima por sinal:

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

Regra número 8: Colocar Javascript e CSS em arquivos externos

Quanto maior os arquivos de Javascript e CSS e quanto maior a quantidade de páginas usando o mesmo conteúdo dos arquivos mais importante é essa regra. O que acontece é que esses arquivos externos são guardados em cache quando possuem data de expiração futura ( regra 3 ) e quando um usuário visita mais de uma página de seu site acaba tendo acesso muito mais rápidos às páginas por possuir os arquivos em cache.

Regra número 9: Reduzir o número pesquisas em DNS

Essa regra vai um pouco contra a regra número dois mas a idéia é não ter um número muito grande de nomes de domínios numa mesma página de um site. Como a requisição a um servidor DNS para saber qual o IP associado a aquele nome demanda um certo tempo isso pode comprometer o desempenho do site. O ideal então é ter entre 2 e 4 nomes de domínios diferentes no mesmo site. Se for menos vai contra a regra número 2 e se for mais vai contra esta regra.

Regra número 10: Comprimir os arquivos Javascript

Existem algoritmos opensource na internet que comprimem scripts Javascript. Eles são especialmente úteis para trechos de código fixos, onde se sabe que não ocorrerão alterações ( o código após a compressão fica difícil de compreender ) como por exemplo no caso de se usar uma biblioteca Javascript. Algumas já fornecem seus códigos comprimidos usando esse tipo de algoritmo. Os mais famosos e eficientes são o YUI-Compressor criado pela Yahoo! e o packer criado por Edwards Packer. Cada um tem sua vantagem, o da Yahoo! tem uma taxa de compressão muito boa e não usa nenhum tipo de script mirabolante para comprimir o arquivo, já o packer tem uma taxa de compressão excelente porém usa um script que faz uso da função eval do javascript (muito conhecida por ser pesada) para a compressão do arquivo e por isso pode comprometer o desempenho do site quando o arquivo comprimido está sendo interpretado pelo browser. Meu preferido, e acredito que de muita gente, é o YUI-Compressor, que além de não comprometer o desempenho do site ainda tem uma taxa de compressão muito boa e pode chegar até a ser melhor do que a do packer se em cima desse arquivo for usada a compressão GZIP, que foi apresentada na regra número 4. Mais informações sobre o benefício do YUI-Compressor com GZIP neste link.

Regra número 11: Evite redirecionamentos

Bom achei essa regra um pouco boba, afinal só se faz redirecionamento em sites quando é realmente necessário. Simplesmente evite-os.

Regra número 12: Remover scripts duplicados

Sem comentários.

Regra número 13: Configurar ETags

As ETags são etiquetas compostas por inode-tamanho-timestamp no caso do Apache 1.3 e 2.x e servem para identificar unicamente um arquivo e isso pode causar um pequeno delay se seus arquivos estiverem hospedados em diversos hosts diferentes. Para remover as ETags de seus arquivos você pode colocar as seguintes linhas em seu arquivo httpd.conf ou .htaccess:

Header unset ETag
FileETag None

Para mais informações sobre ETags visite este site.

Regra número 14: Fazer cache de Ajax

Quando uma aplicação tiver um arquivo Ajax com conteúdo estático o ideal seria usar a regra 3 nesses arquivos. Dependendo da quantidade de arquivos deste tipo seu site pode ficar bastante rápido e intuitivo.

Espero que tenham gostado pessoal, postem por favor! Próximo post estou pensando em adicionar mais uma funcionalidade a biblioteca ajax que já apresentei anteriormente.

Compactar com GZip e armazenar em Cache arquivos .js e .css (solução)

October 25th, 2007

Editado:

Pessoal, para a melhor solução para este tipo de problema vejam a regra número 4 deste post.
Se quizer entender mais sobre GZip continue lendo.

Fim da edição.

GZip é uma compactação feita pelo servidor web antes de enviar os arquivos para o browser, mas para que isso ocorra com sucesso deve-se mudar o cabeçalho dos arquivos para indicar que o arquivo aceita esse tipo de compactação, para que o servidor compacte este arquivo e quando esse arquivo chegar no browser, este descompacte-o, tornando-o um arquivo normal como todos os outros novamente.

A motivo de informação sobre os benefícios da compactação GZip darei um exemplo de uma biblioteca muito famosa, a JQuery, que tem em torno de 77kb em sua forma normal. Se for usado o compactador de javascript do Yahoo! ele passa a ter em torno de 46kb, e se for usada a compactação GZip em cima desse arquivo a biblioteca fica com incríveis 15kb!

Vinha a um tempo pensando em uma forma inteligente de compactar arquivos “.js” e “.css” usando GZip. Li vários artigos no Yahoo! e em fórums diversos e não encontrei nada falando a respeito, e quando falavam não era de forma clara, tanto é que só fui ver uma forma inteligente de se fazer isso a uns minutos atrás, quando achei algo a respeito no site do Joomla. É uma extensão que modifica o cabeçalho dos arquivos que são incluídos nas páginas desse sistema. Vendo a extensão eu pude ver o quão simples é modificar o cabeçalho de arquivos .css e .js de forma inteligente. Antes havia pensado em modificar a extensão dos arquivos para “.php” e fazer essas modificações (trabalho de corno), vi que funcionou mas não era viável em um projeto grande.

Bom, falei demais já. Vamos para o código da solução:

  /**
* @author Fábio Miranda Costa  
* Usado para compactar arquivos JS e CSS, acrescenta-os ao cache do browser
* e faz algumas melhorias adicionais. 
*/
$file = $_GET[”file”];
$ext = substr($file,strrpos($file, “.”)+1,strlen($file));
ob_start (”ob_gzhandler”);
if($ext==”js”) $ext=”javascript”;
header( “Content-type: text/”.$ext.”; charset: iso-8859-1“);//não se esqueça de mudar para o charset que você usa
header( “Content-Encoding: gzip,deflate”);
header( “Expires: “.gmdate(”D, d M Y H:i:s”, time() + (24 * 60 * 60)) . ” GMT”);//adiciona 1 dia ao tempo de expiração
header( “ETag: “);//a idéia é apagar o conteúdo da Etag, ver post http://www.meiocodigo.com/2007/12/21/melhorando-o-tempo-de-carregamento-de-um-site/
header( “Cache-Control: must-revalidate, proxy-revalidate” );
include($file);
ob_flush();

Fiz esse código o mais compacto possível, já que será usado em todos os includes de css e js do site.
Não vou explicar muito como funciona, apenas como usá-lo, que é o que importa.
Para usar é muito fácil, apenas crie um arquivos incluindo o código acima, no meu exemplo o arquivo é “file_inc.php”, e coloque no cabeçalho do seu site os includes de arquivos css e javascript seguindo os exemplos abaixo:

para javascript:

<script src="incs/file_inc.php?file=funcs.js" type="text/javascript"></script>

No atributo “src” coloque o caminho para o arquivo “file_inc.php” depois passe a variável “file” usando GET, ou seja adicione o texto “?file=” logo após o nome do arquivo, como pode-se ver no exemplo e depois coloque o endereço do arquivo “.js” que você quer incluir em seu site. Lembrando que esse endereço será sempre relativo ao arquivos file_inc.php, ou seja, se o “file_inc.php” estiver na pasta “inc/includer/” e o arquivo que você quer incluir está na pasta “inc/js/” o “src” do include ficará “inc/includer/file_inc.php?file=../js/funcs.js”.

para css:

<link href="incs/file_inc.php?file=styles.css" rel="stylesheet" type="text/css" />

Com o css é a mesma coisa, o que muda é apenas o óbvio, ou seja, a tag será “link” e o atributo usado passará a ser “href”.

Solução para update de “select” usando Ajax no IE

August 27th, 2007

Hoje, depois de um certo tempo sem postar, irei apresentar uma solução para o problema do update em tags “select” no IE, mas antes explicarei que problema é esse para quem não entendeu.
O Internet Explorer (IE) não aceita, por um bug, a inserção de nós “option” em um nó “select” usando a propriedade inneHTML do mesmo. Ao se tentar isso as opções do “select” simplesmente não aparecem, ficam todas brancas, é tosco!
por exemplo, se eu tentar executar o código abaixo as options não aparecerão no IE:

document.getElementById("id_de_um_select").innerHTML = "Opção 1";

Agora vou mostrar a solução para esse problema, ela é bem simples de entender e o método é bastante rápido e eficiente, eu mesmo que fiz depois de penar com esse bug e testar alguns métodos que encontrei por ai na net e ver que quando eles eram usados com uma lista muito grande de “options” o “select” demorava anos para ser atualizado. Nesse caso não o método funciona mais ou menos na mesma velocidade para lista de tamanhos diferentes. Eis o método, e logo abaixo a explicação do mesmo:


/**
 * Método usado para jogar conteúdo no innnerHTML de selects.
 * @param {Object} selectObj - o Select que receberá o texto.
 * @param {Object} texto -  o texto que será incorporado no objeto select.
 */
function updateSelect(selectObj,texto){
	var tempDiv = document.createElement("div");
	var attString = "";
	var att = selectObj.attributes;
	for(var i = 0 ; i < att.length ; i++)
		if(att[i].nodeValue != "" && att[i].nodeValue != null )//o IE diz que nó tem todos os atributos possíveis com valor null ou "" então temos que filtrar esses valores
			tempDiv.innerHTML = "<select "+attString+">"+texto+"</select>";
	var newSelect = tempDiv.firstChild;
	selectObj.parentNode.replaceChild(newSelect,selectObj);
	selectObj = null;tempDiv = null;
	return newSelect;
}

Como podemos ver essa função tem dois parâmetros, “selectObj” e “texto”. selectObj é o objeto select que receberá a string “texto” em seu “innerHTML”.
Bom vou pular as partes bestas…
No único “for” dessa função o que estou fazendo é jogando todos os atributos do nó “select” numa string para futuramente colocar no innerHTML de uma div temporário que é criada. Dentro da tag “select” eu coloco o parâmetro “texto” e jogo eles no innerHTML da div temporária, depois crio um select temporário que recebe o primeiro nó da div temporária (no caso é o nosso select) e substituo o select anterior por este novo.
Simples não?

Vou anexar a este post a biblioteca “max”, que foi apresentada anteriormente em outro post, já com esse novo método sendo usado automaticamente ao se tentar fazer um update em um nó “select”.
Em breve estarei postando mais um método para a biblioteca “max” que vai torná-la capaz de ser usada com o method “post”, normalmente usado em formulários.
Qualquer dúvida em como usar a biblioteca por favor me avisem! e seu comentário é muito importante!!! :D

Arquivos:

Flash cobrindo conteúdo (solução)

June 20th, 2007

Um problema muito comum para quem usa flash combinado com html e css, apenas para destacar alguns detalhes, é o fato de o flash cobrir o conteúdo da página por padrão. Eu particularmente enfrentei este problema várias vezes ao tentar colocar um menu drop-down que ao ser visualizado deveria cobrir o flash. Mas o menu ficava sempre escondido atrás do flash.

Para solucionar o caso eu utilizei os seguintes conceitos:

  • A propriedade z-index do CSS;
  • posicionamento do CSS;
  • As tags object e embed;
  • e o atributo wmode do vídeo.

O z-index pelo que eu tenho percerbido e lido em diversos lugares só funciona em elementos html que estejam “posicionados”, ou seja, tenham o atributo position com o valor absolute, relative ou fixed.

Portanto, colocaremos o video flash dentro de uma div e aplicaremos o seguinte css a ela:

div#flash_div{
position: relative;
z-index: 0;
}

E devemos fazer o mesmo para os objetos que queremos que sobreponham o flash.

Como existem muitas divergências na renderização entre os browsers, é necessário fazer duas chamadas ao vídeo: uma por meio da tag object(a qual é aceita pelo Internet Explorer) e por meio da tag embed(aceita pelo firefox). Ambas as tags terão os mesmos atributos. E dentre eles deve-se setar o wmode do object e do embed para transparent:


<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="214" height="229" id="monitor" align="">
<param name="movie" value="images/monitor.swf">
<param name="quality" value="high">
<param name=”wmode” value=”transparent”>
<embed wmode=”transparent” src=”images/monitor.swf” quality=”high” bgcolor=”#FFFFFF” width=”214″ height=”229″ name=”monitor” align=”" type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer”></embed>
</object>

Eu resolvi meu problema assim. Com apenas uma ressalva: essa solução não funciona para usuário do Linux, e não tenho conhecimento de nenhuma outra solução. Espero ter ajudado.

Operaçoes matemáticas com datas em PHP

June 12th, 2007

Hoje eu vou falar de um problema que eu vejo muito nos fórums de comunidades de programadores PHP iniciantes. As lendárias operações sobre datas.

Vou listar as funções mais significativas para o nosso problema:

Com estas três funções acima já é possível converter datas de um formato para outro facilmente.

Para exemplificar, eu irei criar um script que, baseado na minha data de nascimento(11/08/1986), converta-a para um formato usado em SGBDs (aaaa-mm-dd). Depois o script irá retornar a minha idade em dias, meses e anos.

Vamos primeiro aprender a converter data do formato mais amigável ao ser humano(dd/mm/aaaa) para o formato utilizado pela maioria dos SGBDs (aaaa-mm-dd). Para isso vamos usar o método explode, para separar os valores de dias, meses e anos, supondo que temos uma string no formato dd/mm/aaaa:

$data = "11/08/1986"; //minha data de nascimento
$vetor = explode(”/”,$data);
$dias = $vetor[0];
$meses = $vetor[1];
$anos = $vetor[2];
$data_formatada = $anos.”-”.$meses.’-’.$dias;

No código acima, foi gerado uma string de data no formato aceito pelos campos DATE dos SGBDs.

Para realizar operações entre datas, e desta forma, encontrarmos a diferença entre o dia de hoje e meu nascimento, usaremos o método mktime e o método date, aplicados aos valores de $dias, $meses e $anos obtidos no código acima. E o método date, para obter a data atual.

$dias_atuais = date("d");
$meses_atuais = date("m");
$anos_atuais = date("Y");
$diferenca_segundos = mktime(0,0,0,$meses_atuais - $meses,$dias_atuais-$dias,$anos_atuais-$anos);
$diferenca_minutos = $diferenca_segundos/60;
$diferenca_horas = $diferenca_minutos/60;

Pronto, com o código acima eu encontrei a minha idade em segundo, em minutos e em horas. Com essa mesma lógica é possível encontrar em dias e semanas. Meses e anos é um pouco mais complicado pois necessita de verificar quais meses tem 28, 30 ou 31 dias, e que anos são ou não bissextos.

Vamos deixar este detalhe para um próximo post.

Espero que tenha ajudado.