terça-feira, 5 de julho de 2011

Pegar valores de arquivo CSS com PHP

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)

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

domingo, 3 de julho de 2011

UPDATE sem atualizar campo com data

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() )";

domingo, 10 de abril de 2011

Centralizar div na horizontal com tamanho variável.

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í...

terça-feira, 5 de abril de 2011

Campo numérico com controle - jQuery


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!

sexta-feira, 1 de abril de 2011

Página de erro do Peixe Urbano

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.

quinta-feira, 31 de março de 2011

Do que seu navegador é capaz? Mozilla

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/

quarta-feira, 30 de março de 2011

quarta-feira, 23 de março de 2011

Inspiração: Portfólio Paul Noble


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/

domingo, 20 de março de 2011

Passar query strings para url com rewrite ativado.

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...