Desenvolvendo sites

Pegar valores de arquivo CSS com PHP

2011-07-05T15:23:00.000-07:00

Suponhamos que você tenha um site onde pessoas podem alterar o tema da sua página pessoal, como cores, fontes, tamanhos, etc...

Aí você pensa: vou criar uma tabela no banco de dados com mil colunas pra saber o que o usuário colocou e o que não. Além de dar muito mais trabalho, a leitura do banco de dados é mais lenta e sobrecarrega seu servidor.
Então não seria mais simples salvar tudo num arquivo css personalizado, e carregá-lo depois?

O problema depois é ler esse arquivo, certo?
Errado, aqui tá a solução. Todos os dados do CSS são exportados para uma Array, mais fácil do que isso impossível neh?
Só usar a função:

function parse($file){
 $css = file_get_contents($file);
 preg_match_all( '/(?ims)([a-z0-9\s\.\:#_\-@,]+)\{([^\}]*)\}/', $css, $arr);
 $result = array();
 foreach ($arr[0] as $i => $x){
  $selector = trim($arr[1][$i]);
  $rules = explode(';', trim($arr[2][$i]));
  $rules_arr = array();
  foreach ($rules as $strRule){
   if (!empty($strRule)){
    $rule = explode(":", $strRule);
    $rules_arr[trim($rule[0])] = trim($rule[1]);
   }
  }
  
  $selectors = explode(',', trim($selector));
  foreach ($selectors as $strSel){
   $result[$strSel] = $rules_arr;
  }
 }
 return $result;
}
// Aqui vai o arquivo que você quer ler
$css = parse('css/personalizado_011246.css');

Para usar é muito fácil:

$css['body']['background-color'];
$css['#id']['color'];
$css['.class']['font-size'];

Remover borda/margem de checkbox no Internet Explorer (IE)

2011-07-05T08:29:00.000-07:00

Fala pessoas.

Como sempre, e não surpreso, o IE (mesmo a versão 9) continua sempre querendo ser diferente e só complica para nós desenvolvedores.
Desta vez reparei que ele coloca uma baita margem e uma borda em todos checkboxes, dessa forma:

Então para que fique certo, basta fazer no seu arquivo de estilos (CSS):

form input[type="checkbox"] { border:none; padding:0; }

Fui

UPDATE sem atualizar campo com data

2011-07-03T20:27:00.000-07:00

No MySQL algumas vezes que você tem um campo do tipo date, timestamp.... que guarda data, o valor é atualizado quando se altera algum outro campo com UPDATE.

Pesquisando muito na net, achei a solução (e como sempre em nenhum site brasileiro).
Ex: você tem uma tabela com os dados do cadastro e uma coluna com DATE que é quando ele criou a conta no seu site. Se o usuário quiser mudar o email por exemplo, e você der um UPDATE na tabela, ela colocará a data do dia da modificação no campo do dia do cadastro.

Para resolver isso, basta executar:

ALTER TABLE `tabela` CHANGE COLUMN `coluna` `coluna` TIMESTAMP NOT NULL DEFAULT '0000-00-00 00:00:00',

~~Lembrando que isso basta ser executado apenas uma vez, então não coloque num arquivo PHP.~~
~~Vá no Adminer ou PHPMyAdmin e execute esse comando SQL.~~

Quando for inserir o cadastro no banco de dados, em vez de usar NOW() no campo de data, use SYSDATE(), ex:

$sql = "INSERT INTO `usuarios` VALUES ( NULL,'$nome','$email','$senha',SYSDATE() )";

Centralizar div na horizontal com tamanho variável.

2011-04-10T15:18:00.000-07:00

Meses procurando finalmente encontrei uma solução para centralizar uma div na horizontal que não tem seu tamanho definido.
Pra variar não encontrei nada em português....

Se você tem aqueles alertas tipo de "Carregando" igual o que tem nos serviços do Google sabe? Numa div amarela centralizada no topo você vai precisar disso.

O segredo é fazer 3 divs pra isso (uma coisa tão simples, precisa de tudo isso... fazer o que né?)
Vamos imaginar o código assim:

<div class="centralizar"><div>

<div id="alerta">Carregando...</div>

</div></div>

Agora o css vai ficar assim:

/* tira o que sobrar do lado, e centraliza */
.centralizar {
   position:relative;
   overflow:hidden;
}
.centralizar > div {
   float:left;
   position:fixed;
   left:50%;
}
#alerta {
   /*display:none;*/
   float:left;
   position:relative;
   left:-50%;
   padding:4px;
   background-color:#FF9;
   color:#000;
}

É isso aí...

Campo numérico com controle - jQuery

2011-04-05T13:18:00.000-07:00

Há tempos procuro um plugin pra jQuery que simule aqueles campos númericos que tem as setinhas ao lado pra você aumentar ou diminuir o valor.
Sempre procurei por Numeric Stepper (que é como conhecia).
Mas descobri outro nome: Spin Box.

Procurando no magnífico Google, cheguei ao plugin Spin Button. (Veja os exemplos aqui)

Agora você pode ter um controle maior, quando um campo requer que o usuário digite um número específico.

HTML5: também existe a opção no novo padrão HTML.
Seria:

<input type="number" min="0" max="0" step="1" value="10">

Porém até onde sei só funciona no Opera.

Se você quiser usar os dois, já se preparando para o futuro, pode verificar se o navegador já tem essa função assim com a ajuda do Modernizr:

if (!Modernizr.inputtypes.number) {

    $('#numero').spin({max:100,min:0});

Espero ter ajudado!

Página de erro do Peixe Urbano

2011-04-01T08:15:00.000-07:00

Uma página de erro muito interessante para nos inspirarmos. Veja que o texto segue o conceito da marca inspirado no nome. O peixe vive na água, logo eles colocaram todo o texto referente ao mar, muito bem escrito e ainda tem um certo humor, mesmo na hora em que o visitante deva estar meio bravo com o site.

Do que seu navegador é capaz? Mozilla

2011-03-31T15:43:00.000-07:00

A Mozilla fez um hot site muito interessante sobre a capacidade que seu novo navegador (Firefox 4) pode ter. Há apresentações de HTML, WebGL, CSS, Vídeos sem plugin etc...

Muito bacana pra sabermos com o que vamos poder lidar no futuro. Já penso nos sites 3D, usando o WebGL e monitores com essa capacidade.

https://demos.mozilla.org/pt/

Inspiração: West Coast Subs

2011-03-30T07:45:00.000-07:00

http://westcoastsubs.com/
Um site simples com um menu bem diferente.

Inspiração: Portfólio Paul Noble

2011-03-23T08:44:00.000-07:00

http://pauljnoble.com

Paul criou um site diferenciado, criativo e intuitivo. Com uma interface nova ele chama a atenção pela fácil navegação, e o design.

Quer aprender a fazer o site dele? (em inglês)
http://webdesign.tutsplus.com/tutorials/complete-websites/design-an-innovative-portfolio-site-using-alternative-uiux/

Passar query strings para url com rewrite ativado.

2011-03-20T15:14:00.000-07:00

Esses dias estava pesquisando como passar mais de uma query string numa url amigável que já tinha um rewrite_mod nela.

Não sabe o que é URL amigável?
Aprenda aqui: http://blog.thiagobelem.net/aprendendo-urls-amigaveis/

Antes usava:
RewriteRule ^produto/([a-z0-9-_]+)/?$ produto_exibe.php?link=$1 [NC]

O que funcionava perfeitamente em:
www.site.com.br/produto/nome-do-produto/

Só que o problema surgiu quando quis passar uma query junto com a url:
www.site.com.br/produto/nome-do-produto/?from=main

Aí descobrir que é só tirar o símbolo de $ que significava que a URL tinha terminado ali, e adicionar uma flag 'QSA', que acho que seria Query Strings Automáticas. (algo assim)
Aí fica:
RewriteRule ^produto/(.*)/? produto_exibe.php?link=$1 [NC,QSA]

Fica aí a dica...

Cron Job - Backup do seu site de jeito fácil

2011-03-20T14:44:00.000-07:00

Quando finalizamos um site, é importantíssimo que se tenha um script para fazer backup frequetemente. Já pensou se você tem uma loja, ou um site com galerias de imagens, e de repente alguém o invade, ou acontece algum problema no servidor e você perde tudo?
Com certeza não seria nada agradável ter que fazer tudo de novo, e seus visitantes confusos esperando algo...

Para isso existe as Cron Tabs (Linux), ou o mais conhecido Agendador de Tarefas (Windows). Isso faz com que você programa algum script para ser executado quando quiser.

O site do meu amigo Thiago tem uma introdução muito boa sobre isso, visite! http://blog.thiagobelem.net/o-que-sao-e-como-usar-as-cron-jobs/

Aqui eu vou apresentar o final do post dele.
Vamos supor que temos o site carros.com.br e queremos fazer backup da lista de carros que estão lá, e das imagens deles.
Se você tem na sua hospedagem o painel de controle cPanel, fica fácil. Então acesse ele, vai até o final e procure por Tarefas Cron.
Primeiro digite um endereço de email pra onde será enviado um relatório caso algo dê errado.

Depois em Definições Comuns, selecione de quanto em quanto tempo vai ser executado o código.
Nesse caso vou colocar 'Uma vez por dia' para a lista de carros salvos no banco de dados MySQL.
Agora em comando vc vai colocar:
/usr/bin/mysqldump -h localhost -u <usuario> -p<senha> nome_bd | gzip > /home/<site>/backup/mysql.sql.gz
O que significa?
/usr/bin/mysqldump - executa um programa que vem com o MySQL para copiar o banco de dados
-h localhost - o Host do banco de dados, altere localhost SE necessário. Geralmente esse é o padrão.
-u <usuario> - o nome de usuário do Banco de dados, se o nome fosse gabriel, ficaria -u gabriel
-p<senha> - a senha do usuário do Banco de dados, se a senha fosse webdev, ficaria -pwebdev (note que não há espaço entre -p e a senha)
nome_bd - o nome do banco de dados, se fosse `carros_lista` ficaria: carros_lista.
| gzip - compacta o arquivo para economizar espaço
> destino - depois do > deve vir o destino onde será salvo o arquivo. Geralmente é /home/<o nome do site (seu usuário)>/<a pasta onde quer salvar>/<arquivo>.sql.gz

Usando os exemplos o final ficaria assim:
/usr/bin/mysqldump -h localhost -u gabriel -pwebdev carros_lista | gzip > /home/carros/backup/mysql.sql.gz
Isso é o que deve ser posto na linha de comando no cPanel.
OBS: não esqueça de criar a pasta backup na raíz do site pelo FTP (onde tem as pastas www, public_html, etc...)

Agora vamos salvar as imagens, então crie outra Cron Job.
Para isso vamos imaginar que eles estão na pasta /images/fotos/ do site, e então vamos compactar essa pasta com os arquivos que estão dentro dela.
Vou colocar 'Uma vez por mês' dessa vez, imaginando que não são adicionados carros frequentemente.

E em comando deve ser colocado:
tar czf <destino> <origem>
tar czf -inicia o compactador
<destino>- onde vai ser salvo o arquivo compactado. Ex:
<origem> - local da pasta que será compactada.

Usando nosso exemplo, o comando final ficaria assim:
tar czf /home/carros/backup/fotos.tar.gz /var/www/images/fotos/

Curiosidade: levei cerca de 5 horas pra descobrir e fazer funcionar isso hoje, e não achei nenhum site que me mostrasse dessa forma, fui tentando, usando o que eu sabia, e cheguei nesse ponto, espero que tenha te ajudado!

Dica: se quiser testar primeito o código, coloque o tempo para a cada 5 minutos na cron. Assim ele te enviará um email a cada 5 minutos se algo estiver errado.

Início

2011-03-20T14:13:00.000-07:00

Criei esse blog para discutir e apresentar dicas para quem desenvolve sites.

Geralmente é difícil acharmos algumas coisas na web (principalmente em português), ou quando achamos geralmente é difícil de implementar em nosso site.

Vou apresentar aqui coisas que acontecem no meu cotidiano, e espero que ajude a muitas pessoas...

Vlw!!