El Micox

Marcar o item atual de um Menu com uma classe específica - Sem server-side

2009-11-23T15:40:00.004-03:00

Códigozinho inspirado por uma dúvida da olhosespanhois lá no Webly

Muitas vezes, quando temos um menu qualquer, queremos marcar o item aberto com um visual diferente. Tipo, se o visitante clica em "serviços", deixar o menu "serviços" de outra cor.

Ao usar CSS (e um menu baseado em UL-LI) Agente faz isto colocando uma classe diferente no LI do "serviços", por exemplo.

Pra marcar esta classe no LI geralmente se usa programação server-side (php, asp, jsp, etc), o que dá um certo trabalho e atrapalha se formos testar localmente.

Bem, que tal uma gambiarra javascript pra resolvermos isto e sempre marcar o item atual com a classe "ativo" e os outros LI com a classe "inativo".

O script está abaixo bem comentado. É só salvar no seu PC, alterar o que quiser e testar.

Útil para fazer menus em abas e coisas do tipo.

Adiós.

<html>
<head>
 <style>
  /* os estilos css do ativo e inativo. Altere as propriedades como quiser
  só não altere os seletores */
  #menu .inativo a { color: white; background-color: black }
  #menu .ativo a { color: black; background-color: white }
 </style>
 <script>
  //função que troca a classe dos li para ativo e inativo
  function ativoinativo(quem){
   //o 'quem' original é um link, agora tô pegando o li pai
   var lipai = quem.parentNode; 
   if(lipai.className=='ativo'){
    //se ele já era ativo vira inativo
    lipai.className = 'inativo';
   }else{
    //se ele não tinha classe ainda, transformo em ativo
    lipai.className = 'ativo';
    //e também faço seus irmãos li virarem inativos
    var irmaosli = lipai.parentNode.childNodes; //pegando os irmaos li
    for(var i=0; i<irmaosli.length ; i++){ //varrendo os li
     var liatual = irmaosli[i];
     if(liatual != lipai && liatual.nodeName=='LI'){
      //se não é o li atual vai virar inativo
      irmaosli[i].className = 'inativo'
     }
    }
   }
  }
  
  //função que testa qual li que tem o link atual e marca como ativo
  function initAtivoInativo(divalvo){
   if(!divalvo.nodeName){
   //testando se o divalvo já é um objeto
   //se não for, eu uso o velho getElementById
    divalvo = document.getElementById(divalvo);
    if(!divalvo){ alert('Erro: o divalvo não existe'); return;}
   }
   //pegando os li que tão dentro do divalvo
   var ah,lis = divalvo.getElementsByTagName('li');
   for(var i=0; i<lis.length ; i++){
    
    //pegando os links que tão dentro de cada li
    ah = lis[i].getElementsByTagName('a')[0];
    if(!ah){ continue; } //se não achou o link vai pro prox li
    
    //ativando o onclick nos links pra fazer a troca de ativo/inativo
    ah.onclick = function(e){
     //pegando o alvo crossbrowser http://elcio.com.br/crossbrowser/#7
     if(typeof(e)=='undefined')var e=window.event; 
     source=e.target?e.target:e.srcElement; //
     if(source.nodeType == 3)source = source.parentNode
     //ativando o onclick nos links pra fazer a troca de ativo/inativo
     ativoinativo(source);
    }
    
    if(location.href.indexOf(ah.href)>-1){
     //se o endereço atual tem o link do li atual marco ativo
     lis[i].className = 'ativo'
    }else{
     //senão é inativo
     lis[i].className = 'inativo'
    }
   }
  }
  //ativando no onload (mas depois de um tempinho pra não bugar em alguns browsers heheh)
  //você pode usar body onload tb ou onready de libs
  window.onload = setTimeout(function(){initAtivoInativo('menu');},300);
 </script>
</head>
<body>
 <ul id='menu'>
  <li><a href="#home.htm">home</a></li>
  <li><a href="#micox.htm">Micox</a></li>
  <li><a href="#mwords.htm">mwords</a></li>
 </ul>
</body>
</html>

Load Limiter - Limitando o load de seu site pra não sobrecarregar o servidor

2009-10-29T10:24:00.005-03:00

Ae senhores, bão? bãozão?

Post rápido com uma funçãozinha que fiz quando tava tendo problemas com a hospedagem antiga do meu site (um dia eu conto essa história pra quem não acompanhou pelo twitter. Era a hospedagem da bysite.com.br - agora tô com a ótima PortoFacil.net).

Basicamente, meu site tava tendo muitos acessos E eu, provavelmente, devo ter ativado algum plugin louco no meu site. Resultado: excesso de processamentos no servidor. O bixo não tava dando conta do serviço e a hospedagem me sacaneava tirando meu site do ar por várias horas sem dar explicação, legal né?

Os servidores tem um lance que chamam de Load pra indicar mais ou menos comé que tá a carga nos bixo. É tipo uma média de quantos processos tão na fila. Veja mais explicações aqui se você não souber o que é.

A solução que pensei, além de desativar o plugin, foi fazer uma funçãozinha pra exibir uma página simples caso o server esteja com Load alto. Existem também outras ferramentas pra load balancer que eu optei por não usar por preguiça de aprender a configurar essas parada e ver se servia ao meu caso.

O que a função faz é: Testa se o load do server tá acima do valor que você configurou. Se estiver, executa a função passada no parâmetro. Muito simples mas muito útil pra evitar surpresas com servidores (compartilhados principalmente).

Bora:

0) Crie um novo arquivo e dê o nome de "inc-loadLimiter.php" Este é o conteúdo que você vai colocar dentro dele:

<?php
/*** Limita o processamento de acordo com o server load
By Micox: http://twitter.com/micox - http://elmicox.blogspot.com

Exemplo:
$loadLimiter=10; //limitei meu load a 10
if($loadLimiter){
  include_once "inc-loadLimiter.php";
  function saiVazio(){ 
    header("Cache-Control: no-cache, must-revalidate");
    include("aviso_de_manutencao_simples.htm"); //faça sua própria pág. simples.
    //echo "Em manutenção"; //caso você não queira usar include
    exit();
  }
  execIfLoad($loadLimiter,'saiVazio');
}
***/
function get_server_load($windows = 0) {
//fonte: http://www.videotexto.com.br/forum/viewtopic.php?t=243&sid=910886ae470cefbee204751ab41292d9
        $os = strtolower(PHP_OS);
        if(strpos($os, "win") === false) {
  if(file_exists("/proc/loadavg")) {
         $load = file_get_contents("/proc/loadavg");
         $load = explode(' ', $load);
         return $load[0];
  }
  elseif(function_exists("shell_exec")) {
         $load = explode(' ', `uptime`);
         return $load[count($load)-1];
  }
  else {
         return "";
  }
        }
        elseif($windows) {
  if(class_exists("COM")) {
         $wmi = new COM("WinMgmts:\\\\.");
         $cpus = $wmi->InstancesOf("Win32_Processor");
         
         $cpuload = 0;
         $i = 0;
         while ($cpu = $cpus->Next()) {
    $cpuload += $cpu->LoadPercentage;
    $i++;
         }
         
         $cpuload = round($cpuload / $i, 2);
         return "$cpuload%";
  }
  else {
         return "";
  }
        }
}

function execIfLoad($loadLimit,$callback){
    if(get_server_load()>$loadLimit){ call_user_func($callback); }
}
?>

1) Coloque o código abaixo no começo de todas as páginas do seu site. Como eu uso wordpress, no meu caso, editei o tema e coloquei no header.php.

/**** Limitando o load pra não sobrecarregar o servidor.By Micox ***/
$loadLimiter=40; //limitei meu load a 40
if($loadLimiter){
  include_once "inc-loadLimiter.php"; //você verá esta função logo abaixo
  function saiVazio(){ 
    header("Cache-Control: no-cache, must-revalidate");
    include("aviso_de_manutencao_simples.htm"); //faça sua própria pág. simples.
    exit();
  }
  execIfLoad($loadLimiter,'saiVazio');
}

Prontinho. Dúvidas, manda nos comments.

Ferramenta do Micox para te ajudar a ganhar dinheiro

2009-08-27T10:27:00.004-04:00

Hoooeeaa

Estamos de volta após algumas semanas desenvolvendo um scriptzinho novo. Sim, mais um. Mas este é um pouco diferente. O objetivo deste script novo é te ajudar a ganhar grana com o programa de afiliados MercadoSócios do Mercado Livre.

Nas últimas semanas eu andava meio grilado com as quedas absurdas no rendimento de outro sistema de afiliados que eu usava E andava bastante satisfeito com o programa MercadoSócios, ENTÃO decidi que tava na hora de criar algo. Disso saiu o MWORDS.

Antes de explicar sobre a ferramenta famos falar sobre o MercadoSócios :

Mercado Sócios é um programa de afiliados que paga por ação, isto é, você vende coisas deles (ou exibe banners) e ganha uma grana por isto. Você ganha de 30% a 70% das comissões de venda cobradas pelo MercadoLivre e ainda ganha enre R$9,50 a R$15 por cada cadastro ativo.

Se você ainda não é cadastrado, aproveite a oportunidade. Clique aqui para ver as REGRAS completas e se cadastrar.

Agora sobre a ferramenta e seus principais diferenciais:

Bom, na verdade não podemos chamar de ’scriptzinho’ pois o bixo deu um bom trabalho e me ensinou algumas técnicas novas também que postarei em breve aqui no meu abandonado blog.

É uma Ferramenta (script) que insere links para produtos do MercadoLivre no conteúdo do texto do seu site ou blog, aumentando incrivelmente seus ganhos com o programa de afiliados MercadoSócios.
É simples, leve, automático e contextual, isto é, leva em consideração o assunto do texto para exibir os links.
Pode ser ativado automáticamente em imagens também.
É totalmente configurável.
Se você já estiver cadastrado no MercadoSócios não é necessário fazer nenhum outro cadastro chato e nem me pedir autorização pra usar.
Você não precisa baixar nem instalar nada complicado no seu site, é só colocar a chamada ao script no final do seu site.
Veja ele em funcionamento aqui mesmo no El Micox.
Veja aqui outro exemplo do script em funcionamento.

Quanto vou te cobrar pelo script? NADA. (mas uma postagenzinha no seu blog ou twitter seria legal hehehe. Na verdade, ganharei uma pequena comissão que negociei diretamente com o MercadoLivre e que não interfere em seus ganhos hehe ).

Um exemplo do código que você colocará no seu site:

<script type=’text/javascript’>
/* mwords - valeus.net/mwords - by Micox
*  Links para o mercado livre em palavras-chave do texto */
var mk_toolid = 5575926  ; //aqui você deve colocar seu toolid do mercadosócios
var mk_byid   = ‘content’; //aqui você indica qual o ID da div que contém os textos
</script>

<script charset=’UTF-8′ src=’http://valeus.net/mwords/motor.js’ defer=’defer’ type=’text/javascript’>
</script>

Simples, fácil e vai melhorar seus ganhos.

Agora, se quiser, é só usar o gerador que está na página valeus.net/mwords pra escolher algumas configurações mais complexas.

Problemas, sugestões, depoimentos ou comentários comenta ae. Está nos meus planos pro futuro desta ferramenta adaptar ela pra vários programas de afiliados, fazer um plugin Wordpress e Blogger pra ela e permitir vender para vários países.

Vamo ver se o povo vai usar isso. Aguardemos…

Livros lidos: Investimentos, Devoradores de Mortos e Jquery

2009-05-29T08:41:00.004-04:00

Hooaaa.

Hoje acho que tô meio animado pra postar aqui no ElMicox. Então vamo aproveitar essa animação e tagarelar.

Andava bastante desanimado pra postar por vários motivos: prequiça, falta de scripts novos, twitter, outros sites meus dando grana e pedindo minha atenção, pouca leitura de outros sites da área, etc.

Aliás, acho que poucos lerão este post. Os blogs de desenvolvimento web andam meio abandonados, quase ninguém mais lê feeds e talz. Até o Webly está com baixíssimo movimento, ninguém mais tem dúvidas, poucos querem ajudar nas dúvidas dos outros. Sei lá… Acho que todo mundo anda sem tempo.

Aliás, o MayronCachina, uma boa alma, vai dar um curso grátis de PHP. Se você ainda não souber PHP agora é a hora.

Li vários livros durante meu retiro espiritual aqui do blog. Abaixo mostro 3 que achei bem interessantes:

1) Investimentos: Como Administrar Melhor Seu Dinheiro - do Mauro Halfeld

Muuuuuuuito bom. Quando comecei a ganhar uma graninha boa nos meus sites vi que eu não tava segurando dinheiro nenhum. A grana não rendia. Daí topei com este livro lá na Saraiva. O cara escreve muito bem coisas ótimas pra manejar a grana. Não são coisas de outro planeta que só investidores-viciados conseguem entender.

São coisas pra pessoas normais, classse média, aprenderem a usar melhor e investir melhor o dinheiro.

Ele explica várias daquelas siglas que agente vê no jornal e fica sem entender. Explica os melhores investimentos, explica sobre imóveis e como investir nisso, explica sobre bolsa de valores, etc.

Como já twittavam por aí: “Quem trabalha demais não tem tempo pra ficar rico” hehaeh
Agora sério: O lance do Investimento é você fazer o dinheiro trabalhar pra você. Ter rendimentos que independam do seu trabalho (diretamente) tipo aluguéis, sites, ações, empresas. Assim você terá liberdade de criar novas e novas fontes de renda e finalmente ter a liberdade de escolher se quer continuar sendo funcionário ou não.

2) Devoradores de Mortos - do MICHAEL CRICHTON

É uma historinha muito boa. Ótima. Um dos melhores livros de historinha que eu já li.
“O autor apresenta o mais antigo relato da vida dos vikings: o manuscrito do árabe Ibn Fadlan, de 922. Através deste documento, narra a vida desse povo de uma forma inédita, jamais vista pelos ocidentais.” - Submarino.

Mas o melhor é que o livro é (ou diz ser) baseado em um manuscrito do milênio passado que muitos historiadores confirmam a veracidade. Daí, a galera que gosta de “aventuras medievais” e uns lance meio RPG vai curtir pra caramba o livro e ficar naquela de ’será que aconteceu mesmo? será que é vero?’.

“Ibn Fadlan ficou conhecido por escrever um manuscrito (Kitāb ilā Malik al-Saqāliba (كتاب إلى ملك الصقالبة)) sobre suas viagens como embaixador do Abássida al-Muqtadir para a terra dos búlgaros.

Por muito tempo, havia apenas uma versão incompleta dos manuscritos, espalhada por verbetes no dicionário geográfico escrito por Yaqut al-Hamawi, publicado em 1823.[1] Porém em 1923, o estudioso Zeki Validi Togan encontrou num museu em Meshed o manuscrito MS 5229, que continha entre outras coisas a versão mais completa do escrito de Ibn Fadlan.[2]” - Wikipedia

Destaque para as passagens mostrando a porqueira da época, a putaria da época, os monstros marinhos (que alguns historiadores acreditam ser baleias), anões adivinhos, uma raça humana desconhecida, o espírito lutador dos nórdicos, tabernas, etc.

Pra variar, fizeram uma bosta de um filme baseado neste livro: O 13o Guerreiro. É lógico que o filme não mostra nem 40% do livro e é um fracasso total.

Compre este livro, não costuma ser mais de 20 conto.

3) Livro Jquery do Maujor

Bom, esse aqui nem precisa falar muito né. É um livro técnico explicando como usar o biblioteca para javascript Jquery.
Se você é novato na área e não entende muito de javascript e nem de jquery, este livro vai te ajudar.

O Maujor explica detalhadamente (quase) todas os métodos, propriedades e funções do jquery e dá um monte de exemplos. Muito bom pra se usar quando se precisa de referência em Jquery.

Eu só não gostei muito da forma repetitiva que as funções/métodos são mostrados e nem da forma como foram apresentados os seletores.
Como o Maujor é um grande mestre do CSS, achei que os seletores seriam mostrados como foram no site CSS dele, onde está mais fácil de entender e com menos texto.

No restante o livro é show.

(Obs.: Como nunca citei livros aqui no blog, alguns podem pensar que eu quero só ganhar uma grana extra com comissão. Bom, o ElMicox não rende nem 1 centavo por mês e acredito que com estes livros não será diferente.
As indicações do livro são mais pra voltar o pique do blog já que tô sem scripts novos. Se alguém comprar através da minha indicação, bem, senão, amém. Ganho MUITO mais grana com meus outros blogs/sites.
A idéia é mesmo mostrar livros bons que li.)

Maxlength No Textarea - Inline E Simplão (e outras bizarrices javascript)

2009-05-29T07:37:00.007-04:00

oaaaaaaaaaaaaaaoaoaoaoaoooooooooaaaaaaaaa será que o micox tá de volta? Não sei. Provavelmente os leitores de feed não acompanham mais isso aqui mesmo. Vamo ver se vai ter algum comentário hehehehaeuhauehauehuaehuaheuheauea heauheauhe uhaeueahue lololololoo (louco mode off)

Bom, hoje postaremos um nano-tutorial-código que mostra uma das trocentas maneiras de se implementar maxlength no textarea.

Como vossa senhoria já deve saber, maxlength só tem em inputs, o pobre do textarea ficou esquecido.

O código:

<textarea name='meutext' onkeydown='if(this.value.length>(MAXLEN=5))this.value=this.value.substr(0,MAXLEN)'>
</textarea>

Para usar você só tem que alterar o número ‘5′ para a quantidade de caracteres que deseja como limite para seu textarea.

Testei com sucesso no FF3 IE5 IE6 IE7 OP GCh (google chrome), se testarem em mais navegadores e funfar, postem ae.

“Não entendi este código Sr Micox, WTF vc tá fazendo naquele trecho (MAXLEN=5) alí?”

Bom, aquilo é uma bizarrice permitida pelo javascript pra reduzir (e complicar) o código. Quem mexe com Ruby já conhece este tipo de loucura muito útil.

O que tá dentro do parênteses, além de atribuir um valor à variável MAXLEN, retorna o útlimo valor usado.

Então se eu fizer (d=document).write(’cocô’) , além de escrever ‘cocô’ na tela, ainda atribuirá o objeto document à variável ‘d’, o que me permitirá reduzir o código em futuras linhas deste script:

(d=document).write('cocô'); //isso funciona
d.write('fede'); //isso também

Hahá.
Então quando eu faço if(this.value.length>(MAXLEN=5)) é a mesma coisa de fazer MAXLEN=5; if(this.value.length>MAXLEN)

hAHÁe hihíiii

Hoje tô animado. Acho que já vou fazer outra postagem sobre minha ausência e os livros que li durante meu retiro espiritual do blog.

Detesta burocracia no desenvolvimento? Getting Real neles

2008-12-17T08:35:00.001-03:00

“Getting Real” (traduzido como “Caindo na Real”) é um livro e que descreve uma metodologia de desenvolvimento de negócios na internet.

Eu já tinha lido ele há muito tempo, mas ainda não tinha comentado ou implementado. Tô meio atrasado (o mundo inteiro já deve ter lido este livro) mas bora lá.

Ela prega que, a partir do momento que as idéias do negócio já estejam definidas, não se enrole muito pra desenvolver o seu site.

“Em resumo, o que o Getting Real prega é que pulemos as fases que representam o projeto (documentos, especificações, wireframes, testes de usabilidade etc.) e partamos direto para o que realmente é o projeto, ou seja, telas, códigos e programação.

A justificativa é que não importa o quanto seja planejado, quando o projeto for ao ar e os usuários começarem a realmente utilizá-lo, ele terá que ser alterado e ajustado” - Walmar Andrade

Se você já desenvolveu algo pra internet e colocou uma campo de contato para receber comentários e opiniões, sabe que isto é verdade.

Você só vai perceber o que precisa ser ajustado após o serviço ir pro ar. Além disso, você também irá perceber claramente quais as funcionalidades mais prioritárias de se implementar.

Se você já têm a idéia inicial, não demore. Na internet, quem chega primeiro têm chances maiores de se dar bem (bom, acho que na vida real também né hehehe).

Opa, não estou dizendo pra você jogar qualquer porcaria na rede. Faça algo bom, algo cativante, algo que seus visitantes voltarão pra ver, algo que seus visitantes indicarão pros amigos.

A cada dia que passar, os visitantes, vendo que funcionalidades novas vão sendo implantadas, vendo que as sugestões deles são ouvidas, vendo que é um site dinâmico e crescente, eles ficarão mais e mais fiéis do seu serviço.

Colocando seu serviço no ar rapidamente, você também terá a vantagem de medir previamente como os visitantes estão chegando até você: palavras chave (busca do google) que dão mais resultado, que tipo de marketing dá mais resultado, quais parceiros dão mais resultado, etc.

Detalhe: o livro está disponível “di grátis” e em português no site http://gettingreal.37signals.com/GR_por.php
Leia a introdução e o capítulo 1 e se impressione.

Minha opinião resumida é: não abandonte totalmente o planejamento, faça uns rabiscos, mas não demore meses pra lançar sua idéia.

Talvez esta metodologia seja útil não só para o desenvolvimento web, mas para o desktop também (desde que o software tenha um sistema legal pra atualizações).

//Pensando melhor, talvez ela não seja útil só na área de informática. Esta metodologia de fazer algo bom e rápido e , depois, ir melhorando já é usado por churrasquinhos que viram restaurantes, lojinhas de roupas que viram lojões, etc.

Caindo na Real se livra de …

* Cronogramas que levam meses ou mesmo anos
* Especificações Funcionais Utópicas
* Debates de Escalabilidade
* Reuniões de equipe intermináveis
* A “necessidade” de contratar dúzias de funcionários
* Números de versões sem sentido
* Planejamentos cristalinos que prevêem o futuro
* Opções de preferência intermináveis
* Suporte terceirizado
* Testes de usuário irreais
* Papelada inútil
* Hierarquia de cima-para-baixo

Plugins essenciais pra Wordpress na opinião do Mico

2008-11-28T13:50:00.005-03:00

Pacote de plugins essenciais pra Wordpress na opinião deste Mico que vos fala.

Toda instalação de wordpress que eu faço (que não são muitas) eu uso os seguintes plugins que facilitam pra caramba minha vida. Acho que eles já deveriam vir (pelo menos alguns) no pacote inicial do wordpress hahehaehe.

Se você têm mais ae, sugira nos comentários. Alguns dos abaixo, foram indicados pelo brodi Igor.

ChapSecureLogin - criptografa (via javascript) sua senha pra que ela não passe em branco pela rede (e qualquer sniffer de rede possa vê-la)

LoginLockDown - Bloqueia após 3 tentativas de senhas. Daí o mala só vai poder tentar força bruta novamente após XX minutos

WP Security Scan - Testa permissões de pasta, nome do banco de dados, senhas e mais outras coisas. Muito bom.

Admin management Xtended - Adiciona opções ajax a algumas ações de administração (como por ex deixar a página visível, trocar ordem de posts, etc)

Ozh Admin Drop Down Menu - transforma o menu do wp-admin em algo mais fácil de mexer. Em vez de ter que ficar acessando o menu pai pra só depois poder acessar os filhos. Esse compensa di cum força.

All in One SEO Pack - Deixa seu blog mais amigável pra mecanismos de busca.

Google XML Sitemaps - Simplesmente ótimo pra gerar seu sitemap. Com opção de peso pra cada tipo de página e envio automático pros motores de busca.

Comments Hash do Japs - Já famoso. Adiciona uma conta matemática na caixa de comentários. Reduz spam (e se você complicar a conta, pode reduzir comentários de não inteligentes também hahaha) - Ele não está na lista de plugins do wordpress.org, tem que procurar no google.

Old Post Alert - Mostra um aviso se o post for antigo X meses. Bom pra sites de notícias.

Similar Posts - Exibe links para postagens similares ao post em que o visitante está. (requer o post plugin library)

Theme Test Drive - pra você poder testar vários temas e modificações sem que seu visitante veja.

Wordpress Popular posts - Mostra os posts mais populares.

Wordpress stats - Estatísticas completas: pageviews, palavras chave, links clicados, sites que linkaram, etc

wordpress mobile edition - link pra versão simples do seu site. Bom pra celulares e talz.

404 notifier - òtimo quando se está no começo do blog ou de um novo template, bom pra ver arquivos, imagens e outros links quebrados.

WP DBManager - alem do backup automática, faz otimização automática, reparação, restore do backup, etc.

WP Super Cache - Transforma seus posts em arquivo HTML reduzindo o acesso ao banco de dados e lentidão.

Wordpress Automatic upgrade - Simplifica o trabalho chato de atualizar seu wordpress

PageNavi - Adiciona números de página no seu blog ao invés do velho "página anterior" , "próxima página".

Por hoje é só. Se você têm mais, sugira nos comentários.

Eu odeio a Brasil Telecom, seu call-center, sua URA e seus líderes

2008-11-26T16:34:00.001-03:00

Cenário real: A conta telefônica do senhor X, mais um dos zilhões dos clientes da Brasil Telecom, chega com valores indevidos. Ele tenta, por vários dias, ligar para a central de atendimento e corrigir os valores indevidos para poder pagar. Nunca consegue. Certo dia, um robô da Brasil Telecom, liga na casa do senhor X e diz que se ele não pagar até o dia tal, terá seu telefone cortado.

(pra quem não sabe, URA são aqueles sistemas de atendimento automático que te colocam pra digitar mil opções até ser atendido pela área certa).

tuuuu
103-14
"Bem vindo à Brasil Telecom"
"Para telefone fixo, digite 2"
2
"Se deseja atendimento para seu telefone fixo, digite 2"
2
"Se o atendimento é para o telefone do qual está falando digite 2, ou digite o número do telefone para o qual deseja atendimento"
XX-XXXX-XXXX
Música...
"Para conta telefônica, digite 2"
2
"Sua conta já está na internet. Você pode imprimí-la, solicitar por email, blablabla, blablabla. Acesse www.brasiltelecom.com.br e confira"
"Por favor, digite o número do seu CPF"
XXX.XXX.XXX-XX
"Para valor da conta, digite 2, segunda via, digite 3, informar pagamento, digite 4, mudar vencimento, digite 5, conta detalhada, digite 6, voltar ao menu anterior, digite 8, falar com um de nossos atendentes, digite 9" (finalmente, lágrimas de emoção escorrem dos olhos do senhor X)
"Queremos saber sua opinião sobre nosso atendimento. Ao finalizar, participe de nossa pesquisa, blablabla" (engraçado que a pesquisa é sobre os atendentes do callcenter e não sobre a qualidade da maldita URA ou dos sistemas deles)
"Aguarde um momento para ser atendido" (novidade)
"Para sua segurança, esta ligação poderá ser gravada"
tuuuu
tuuuu
tuuuu
"No momento, todos os nossos atendentes estão ocupados. Por favor, ligue mais tarde." (neste momento, deve-se manter a calma, respirar fundo e treinar as técnicas milenares de auto-controle)

Por este e por outros motivos, eu (e outros zilhões) odeio a Brasil Telecom.

Aguardamos, ansiosamente, o dia 01 de dezembro de 2008, quando entra em vigor a histórica lei que regulamente melhor os Call-centers (ou SAC's).

Aliás, o ex-líder espiritual da BRT andou tacando o caos na justiça federal, PRF e Abin. No melhor estilo Joker, transformou o 'mocinho' em investigado e instalou guerras internas em instituições federais.

Qualquer semelhança é uma mera coincidência

Se você quer falar mal da Brasil Telecom na internet (ou de qualquer outra empresa), não tenha medo. “Exercer censura sobre a Internet, exceto nas hipóteses de crime, seria pôr fim ao seu objeto de unir povos e culturas diferentes no espaço virtual”.

Redirecionamentos http 301 em várias linguagens/servidores

2008-11-20T07:53:00.002-03:00

Como alguns já sabem, a comunidade/fórum de desenvolvimento web ievolution mudou seu nome para Webly.

Foi necessário, então, fazer um redirecionamento de domínio para apontar para o novo Webly (webly.com.br). O cpanel cuidou de tudo direitinho, os users do fórum mal perceberam, não perdemos links e nem pagerank, graças ao bom e velho redirecionamento http 301.

Existem inúmeros outros códigos de redirecionamento, mas o dr. 301 (moved permanently) se dá melhor com buscadores.

Apesar do Cpanel ter feito o serviço perfeitamente, eu, como um bom nlerd que sou, dei uma pesquisada básica sobre o assunto e achei um documento interessante que mostra redirecionamentos em várias linguagens/servidores: IIS, Apache, PHP, JSP, ASP, Coldfusion, CGI PERL, Ruby.

No fim, eu mostro também como redirecionar via HTML através do META refresh, algo não muito recomendado.

Apache 301 redirect (htaccess)

Vá no seu htaccess e coloque:

Options +FollowSymLinks
RewriteEngine on
RewriteRule (.*) http://www.newdomain.com/$1 [R=301,L]

IIS 6 - 301 redirect

Segundo a MS

Internet Services Manager (Geranciador do IIS) > botão direito na pasta a ser redirecionada
Clique na guia Diretório Base, Diretório Virtual ou Diretório
Em O conteúdo deste recurso deve vir de, clique em Um redirecionamento para uma URL
Na caixa Redirecionar para, digite a URL do diretório ou site de destino. Por exemplo, para redirecionar todas as solicitações de arquivos do diretório Catalog para o diretório NewCatalog, digite /NewCatalog.

Redirecionamento PHP

<?
    Header( "HTTP/1.1 301 Moved Permanently" );
    Header( "Location: http://www.new-url.com" );
?>

Redirecionamento ASP

<%@ Language=VBScript %>
<%
Response.Status="301 Moved Permanently"
Response.AddHeader "Location","http://www.new-url.com/"
%>

ASP.net 301 redirect

<script runat="server">
private void Page_Load(object sender, System.EventArgs e)
{
Response.Status = "301 Moved Permanently";
Response.AddHeader("Location","http://www.new-url.com");
}
</script>

JSP (Java) Redirect

<%
response.setStatus(301);
response.setHeader( "Location", "http://www.new-url.com/" );
response.setHeader( "Connection", "close" );
%>

Redirecionamento em Ruby

def old_action
headers["Status"] = "301 Moved Permanently"
redirect_to "http://www.new-url.com/"
end

Coldfusion Redirect

<.cfheader statuscode="301" statustext="Moved permanently"> 
<.cfheader name="Location" value="http://www.new-url.com">

CGI PERL Redirect

$q = new CGI;
print $q->redirect("http://www.new-url.com/");

Via html meta tag

<meta http-equiv="refresh" content="0;url=http://example.com/" />

Por hoje é só. Não tinha nada melhor pra eu postar hehhhee

Abandone o getElementById

2008-11-14T10:27:00.003-03:00

"WTF mico? Are you Crazy?"

Calma malucada, não estou dizendo pra vocês voltarem ao século passado, quando referenciávamos os elementos via 'document.all' hehe. Na verdade este post é um incentivo pra vocês "apelidarem" alguns métodos e objetos, de forma facilitar a digitação de vocês.

//É que eu tava afim de fazer um título polêmico hahehahe

"Como assim?"

Estou cansado de ver códigos assim:

function juntaEnd(){
 var rua = document.getElementById('input_rua').value
 var num = document.getElementById('input_num').value
 var bairro = document.getElementById('input_bairro').value
 var cidade = document.getElementById('input_cidade').value
 var estado = document.getElementById('input_estado').value
 return rua+num+bairro+cidade+estado
}

Olha o tanto que o cara teve que digitar (ou copiar e colar). O tanto de bytes gastos com o 'document.getElementById'.

Muitos dos meus inteligentes leitores já fazem de uma forma mais 'legal':

function get(quem) { return document.getElementById(quem) }
function juntaEnd(){
 var rua = get('input_rua').value
 var num = get('input_num').value
 var bairro = get('input_bairro').value
 var cidade = get('input_cidade').value
 var estado = get('input_estado').value
 return rua+num+bairro+cidade+estado
}

Olha só, muito melhor de ler, digitar, economizar banda hehaehae. O nome da função 'get' poderia ser o que você quisesse. Eu por exemplo uso '$m'.

Existem várias outras funções mais poderosas que este 'get' simples mostrado. Pesquise, também, funções dos diversos frameworks existentes que facilitam o serviço.

Além de 'apelidar' o getElementById você pode apelidar outros objetos também de forma mais simples, caso não saiba. ~~(Não lembro o nome real pra isso de 'apelidar' na literatura acadêmica de programação, se vocÊ souber ae me avisa nos comments hehe :P )~~ (O nome é 'alias' conforme foi lembrado pelo Maujor e Walter Cruz)

Exemplo:

var d = document
d.write('isto funciona, caracas!').
d.getElementById('input_nome').value = 'apelidando o document';

Um exemplo mais hard (mas pode te ajudar pois direto agente vê isto em scripts que baixa e fica boiando sem saber o que é):

(dc=document).write('o document também foi apelidado dessa maneira doida??')
dc.getElementById('input_nome').value = 'Sim!!';

Bom, é isso ae, por hoje é só! Acredito que, para os que não conheciam estes truques loucos, eu devo ter dado uma luz. Só toma cuidado pois o uso indiscriminado sem comentários pode deixar seu código ilegível e complicar sua cabeça no futuro.

Adiós povo. Não se esqueçam de participar do desafio Webly de Natal em Flash (valendo 1 pendrive 4Gb) ok?

Funções Javascript equivalentes a funções PHP

2008-11-13T14:53:00.001-03:00

Holá senhores e senhoras,

Hoje volto para mostrar um projeto muito interessante: PHP to Javascript Project: php.js

Vendo o tanto de gente querendo funções equivalente do PHP no javascript, os malucos tiveram a idéia de portar grande parte das funções do PHP para o javascript, usando a sintaxe mais próxima possível do php.

Assim, acabam ajudando a galera que entende de PHP mas não entende muito de javascript.

Eu achei uma ótima idéia. Parece que ela é meio antiga mas eu só encontrei agora por acaso.

Os caras têm versões de 190 funções PHP, inclusive a de criação de array, explode, isset, is_array, utf8_encode, urldecode, trim, time, wordwra, unserialize, sha1, md5, print_r, e o escambau.

Acessem o site do projeto e confiram. Está sendo um ótimo trabalho e, provavelmente, vai te ajudar algum dia.

http://kevin.vanzonneveld.net/techblog/article/javascript_equivalent_for_phps_addslashes/

Não olhei os créditos inteiros, mas já ví que os brasileiros do jsfromhell contribuiram bastante.

Combo de estados e cidades em ajax - Seus problemas acabaram

2008-10-06T16:31:00.005-04:00

Quer fazer aquela conhecida dupla de select's com os estados e, ao lado, as cidades respectivas mas está cansado de quebrar a cabeça?

Cansado de tentar entender ajax pra fazer isto?

Cansado de tentar organizar um banco de dados pra isto?

Cansado de aguardar o navegador carregar (loading) as mil cidades que têm?

SEUS PROBLEMAS SE ACABARAM-SE!!!

O grande DGMike fez um script espetacular que te poupará até de organizar o banco de dados com as cidades e estados. Já está tudo pronto.

Nas palavras do próprio:

Pensando nisso, resolvi escrever uma biblioteca que resolva este problema, além de estar disponível em uma única URL (hospedado no google) no qual qualquer um pode utilizar. Assim, o usuário guarda em cache apenas um arquivo, e se o usuário passar em um site que chama a biblioteca, no próximo site que ele entrar e usar a biblioteca de novo, carregará o arquivo em cache e não precisará fazer o download de novo.

Outra vantagem é que o arquivo possui os estados e cidades no próprio core, assim não é necessário de interação com o servidor, o que deixa a resposta ao usuário mais rápida, deixando-o satisfeito. Ah, e sem falar que ele é crossbrowser e funciona com (ou sem) todas as bibliotecas conhecidas (como jQuery, prototype, dojo ou mootools) por trabalhar com apenas as funções que já existem no javascript.

Pra usar, você só precisará incluir o arquivo javascript, fazer seus selects no html e chamar 1 (uma) função pra ativar o treco no onload. Muito simples e rápido. Eu vou usar.

Veja a solução do cara lá no blog dele: Combo de estados e cidades em ajax by DGMike

Como diminuir a probabilidade de ter seu carro furtado sem gastar dinheiro, apenas com matemática

2008-09-10T09:22:00.004-04:00

Hohoho, olá senhoritos e senhoritas. Não sei se alguém ainda acompanha esta bagaça mas após alguns anos de férias o senhor Mico está de volta! Com menos tutoriais, com menos scripts, com menos tempo mas, ainda assim, está parcialmente de volta. hohohooo

Antes de explicar os motivos dos poucos tutoriais, vamos ao assunto principal do título do post: Como diminuir a probabilidade de ter seu carro furtado sem gastar dinheiro. Matemática pura.

Vossas senhorias ficarão perplexas com tamanha sagacidade matemática probabilística e prostrar-se-ão amedrontados por não terem chamado um sábio do meu patamar para ajudar na construção do LHC, o que pode culminar no fim dos El Micox e de tudo mais.

Na verdade, todo esse lero-lero é para encher o post visto que a teoria do carro é bastante simples. Lerigôu:

1) Suponhamos que o nobre leitor estaciona seu carro sozinho em um local que não há outros carros. Neste dia, passa um senhor meliante (SM) esteja com vontade de furtar um carro. Qual a probabilidade do SM levar o carro do nobre leitor? 100%

2) Suponhamos que o nobre leitor estacione seu carro, não mais sozinho, mas sim próximo a um segundo carro. Qual a probabilidade de ter seu carro roubado? 50% "IMPRESSIONANTE senhor mico. Sem gastar um centavo, reduzi a probabilidade pela metade apenas com vossos conhecimentos!!"

3) Mudando um pouco as variáveis: Supponhamos que o senhor meliante deseje roubar um Fusca hoje, e coincidentemente, o carro do ilustríssimo leitor é um Fusca. E não há outro Fusca na região. Babau. Tchau Fusca.

4) Usando a secreta técnica dos carros semelhantes ensinada pelo Micox, você deverá procurar outro Fusca e estacionar próximo a ele. Assim, ao ver 2 Fuscas, a probabilidade de SEU Fusca ser levado cai pela metade.

5) Caso você esteja em um dia de sorte e encontre 3 Fuscas (mais o seu carro ficam 4 Fuscas), parabéns, a probabilidade de ter seu Fusca roubado por um bandido que queira Fuscas é de apenas 25%! :)

6) Suponhamos que você está em uma "convenção" de Fuscas ( que legal heim ) e existem exatamente 999 fuscas estacionados naquela região. Acredite: pode deixar seu fusca destrancado. A probabilidade de escolherem vosso digníssimo carro é de apenas 0,1%.

Usando os estudos de caso apresentados acima, o Instituto Micox de Sabedoria formulou a seguinte fórmula:

P = { 100 / (QC + 1) } * SM

onde P é a probabilidade (%) de ter seu carro roubado, QC é a quantidade de carros estacionados FORA o seu carro SM é a quantidade de meliantes disponíveis

Atenção: A escolha do tipo do carro é apenas para exemplificar. Ignoramos o fato de que nenhum ladrão em sã consciência escolheria um fusca para roubar. Ou seja, se você têm um fusca pode ficar tranquilo e nem precisa usar estas técnicas.

Resumindo: Procure carros parecidos com o seu e estacione perto. Impressionante! hahá.

Outras dicas para reduzir ainda mais.

1) Sabemos que senhores meliantes são seres preguiçosos por natureza, caso contrário estariam trabalhando ao invés de estar roubando. Sendo assim, procure estacionar seu carro em um local difícil de sair, local apertado, sei lá. Isto irá reduzir a vontade do meliante preguiçoso em roubar seu carro. - Segundo minhas pesquisas, com mais esta técnica secreta, você consegue reduzir a probabilidade de ter seu carro roubado em 17 pontos percentuais, em média.

2) Muitos meliantes gostam de quebrar o vidro do carro para levar o som. Caso você tenha som no carro, não tenho dicas.
Agora se você é como eu e NÃO tem som de carro para não atrair bandidos, mostre isso a eles. Assim não perderão tempo quebrando seu vidro em busca do som. Deixe também o porta-luvas aberto para verem que não há som lá e nem outra coisa de valor. - Com esta técnica, você reduz em 66,666% a probabilidade de quebrarem o vidro do seu carro.

3) Muitas pessoas gostam de guardar o documento do carro dentro do próprio carro o que deixa os bandidos muito felizes. Mostre aos meliantes que o documento não está no carro descendo o "corta-sol" (aquele troço que fica acima da cabeça que eu não lembro o nome) toda vez que estacionar. - Usando este truque, você reduz em 13,696969% a probabilidade de levarem seu carro.

4) É claro que te aconselho a comprar alarme, trava, rastreio por satélite e o escambau, mas aí fugiria do objetivo proposto que é "sem gastar um centavo".

Chega de lorota. Agora vamos aos motivos dos poucos tutoriais conforme prometido. Bom, são diversos motivos que levam um senhor importante como eu a estar com poucos tutoriais para postar.

Primeiramente, estou levando 3 projetos: Reestruturação do Webly, um projeto com o Sr. Fante e meu site de concursos (Aliás, quem souber de um sistema de afiliados que não seja o Mercado Livre e tenha apostilas de concursos para me indicar me ajuda comentando ae). Devido a estes projetos o tempo na web fica curto pra caramba.

Segundamente, sou um senhor trabalhador. Funcionário público. E estes dias tá meio correria aqui. Acabei de voltar de férias e talz, sacomé né?

Terceiramente e mais importante: Eu não tenho mais scripts na manga. Parece que acabou o gás. Já tem tudo pronto. Libs e talz. Também tô muito tempo sem desenvolver scripts, sem trabalhar na área, daí acredito que por enquanto estamos zerados. Sem idéias para novos scripts mirabolantes.

Aliás, não deixem de tirar suas dúvidas no Webly. Estamos recrutando novos colunistas e colaboradores pra comunidade, visto que muitos da galera antiga estão se dando bem profissionalmente (talvez por causa do Webly :) ) e consequentemente ficando sem tempo.

Não sei se eu já tinha falado aqui, mas já tem um bom tempo que eu tagarelo pelo Twitter. Se quiserem acompanhar melhor minhas poucas divagações 'na hora' é só me seguir.

Por hoje é só. Este é meu post de volta das férias. Adiós.

(Praia da Graciosa - Palmas)

Drag and Drop - mover e arrastar divs e elementos

2008-07-25T14:49:00.002-04:00

Prosseguindo com alguns códigos que uso sempre, abaixo mostro um drag-n-drop feito pelo tmferreira e corrigido por mim. Logicamente serve pra arrastar e mover elementos, divs, etc.

Uso ele quando não to afim de usar libs completas como o jquery.

Vou deixar direto o código completo até com o exemplo de uso. É só salvar o conteúdo abaixo como um arquivo HTML qualquer e testar. Pra ativar o drag-n-drop nos seus elementos e páginas, é só entender o exemplo e chamar a função dragdrop para os elementos que desejar.

<script>
//drag n drop de div ----------------------------------------------------
//by tmferreira - http://www.webly.com.br/tutorial/javascript-e-ajax/7045/drag-and-drop.htm
//corrigida 30/01/2008 por Micox - http://forum.ievolutionweb.com/index.php?s=&showtopic=7045&view=findpost&p=139679

var objSelecionado = null;
var mouseOffset = null;
function addEvent(obj, evType, fn) {
//Função adaptada da original de Christian Heilmann, em
//http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html
if (typeof obj == "string") {
  if (null == (obj = document.getElementById(obj))) {
   throw new Error("Elemento HTML não encontrado. Não foi possível adicionar o evento.");
  }
}
if (obj.attachEvent) {
  return obj.attachEvent(("on" + evType), fn);
} else if (obj.addEventListener) {
  return obj.addEventListener(evType, fn, true);
} else {
  throw new Error("Seu browser não suporta adição de eventos. Senta, chora e pega um navegador mais recente.");
}
}
function mouseCoords(ev){    
    if(typeof(ev.pageX)!=="undefined"){
      return {x:ev.pageX, y:ev.pageY};
    }else{
        return {
          x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
          y:ev.clientY + document.body.scrollTop  - document.body.clientTop
        };
    }
}
function getPosition(e, ev){
    var ev = ev || window.event;
    if(e.constructor==String){ e = document.getElementById(e);}
    var left = 0, top  = 0;    
    var coords = mouseCoords(ev);    

    while (e.offsetParent){
      left += e.offsetLeft;
      top  += e.offsetTop;
      e     = e.offsetParent;
    }
    left += e.offsetLeft;
    top  += e.offsetTop;
    return {x: coords.x - left, y: coords.y - top};
}

function dragdrop(local_click, caixa_movida) {
//local click indica quem é o cara que quando movido, move o caixa_movida
    if(local_click.constructor==String){ local_click = document.getElementById(local_click);}
    if(caixa_movida.constructor==String){ caixa_movida = document.getElementById(caixa_movida);}
    
    local_click.style.cursor = 'move';
    if(!caixa_movida.style.position || caixa_movida.style.position=='static'){
        caixa_movida.style.position='relative'
    }
    local_click.onmousedown = function(ev) {
        objSelecionado = caixa_movida;        
        mouseOffset = getPosition(objSelecionado, ev);
    };
    document.onmouseup = function() {
        objSelecionado = null;
    }
    document.onmousemove = function(ev) {
        if (objSelecionado) {
            var ev = ev || window.event;
            var mousePos = mouseCoords(ev);
            var pai = objSelecionado.parentNode;
            objSelecionado.style.left = (mousePos.x - mouseOffset.x - pai.offsetLeft) + 'px';
            objSelecionado.style.top = (mousePos.y - mouseOffset.y - pai.offsetTop) + 'px';
            objSelecionado.style.margin = '0px';
            return false;
        }
    }
}</script>
<body>
<!-- esta é a div de exemplo que será movida ao clicar no p de borda azul -->
<div id='movido' style='border: 1px solid black; width: 200px; '>
<p id='movedor' style='border: 1px solid blue;'>mova</p>
sou a div lálalá
<br />
lálálá
</div>
<!-- aqui o script chamando a função que ativa o drag'n'drop -->
<script>
dragdrop('movedor','movido');
</script>
</body>

Mini-lib CSS Reset do Micox - Sim ele voltou

2008-07-25T14:16:00.003-04:00

Helou senhores. Muito tempo sem postar. Na verdade tava até pensando em abandonar o elmicox aqui, sei lá. Postar dá trabalho e toma tempo.

Mas daí lembrei que este troço aqui é meu repositório de códigos. Muito melhor que pastas do windows, muito melhor que zip, rar, melhor que ter que procurar em zilhoes de arquivos onde está a versão XYZ do meu script que faz ZXY.

Agora acho que vou deixar o elmicox aqui só pra códigos mesmo. Quando eu tiver opiniões e talz postarei lá no recentíssimo Blog do Webly. Passem lá. Assinem-no.

Também deixarei de tentar monetizar o ElMicox. Site pra nerd não dá grana mesmo (Atenção aspirantes a pro-blogger ou fazedores de site em geral). O que dá dinheiro é o povão.

Então, back to work. Back to codes micox.

Vou postar algumas coisas que eu sempre uso em meus projetos. NADA INOVADOR não, é só para eu não perder nos mil arquivos/projetos.

TALVEZ, as coisas básicas que eu for postando estes últimos dias sirvam pra alguém. Talvez não.

Vou começar com uma tentativa minha de fazer um CSS reset. Tipo uma mini-lib CSS com o qual eu tenho iniciado meus últimos projetos. Ajuda bastante pra não ter que ficar redefinindo tuuuudo novamente a cada novo projeto.

Provavelmente os senhores webstandeiros aí têm as suas mini-libs também. Leiam a minha, adaptem, sugiram melhorias, implementem idéias minhas nas suas libs, troquemos conhecimentos.

Coloquei esquemas de zerar propriedades (css reset) padronizando nos diferentes navegadores; tamanhos de títulos; classes especiais pra posicionamento, pra simular tabelas, pra avisos, pra teclas de acesso, pra fazer wrapper, pra simular colunas, pra debugar (com bordas), pra fazer menus drop-down, e pra ativar o .hover e o first-child.

Leiam ae e vejam se aproveitam algo. Comentem pra eu ver se meus leitores também ainda estão vivos hehehe. Té. Divirtam-se.

/* Micox CSS mini-lib 1.0 - 22/02/2008 - elmicox.blogspot.com
   A leitura dos comentários é obrigatória para o entendimento */

/* padronizando propriedades pros navegadores ficarem parecidos e corrigindo alguns bugs */
* { margin: 0; padding: 0; outline: 0;
 font-weight: inherit; font-style: inherit;
 font-size: 100%; font-family: inherit;
 line-height: 1.1em; vertical-align: baseline }
p { margin-bottom: 0.5em; }
hr { clear: both; float: none; width: 100%; }
* html body hr { margin: -7px; display: block;}  /* os hr tem uma altura extra misteriosa no IE */
a, img { border: none; }
img { vertical-align: middle;}
fieldset { display: block; border: 2px ridge #FFF; padding: 10px; } /* fieldset não é block em todos */
ul, ol { margin-left: 1.5em; list-style-position: outside; }
li { vertical-align: top; line-height: 1.2em;}  /* IE: posição vertical do marcador no IE  e espaço extra fantasma em lis*/
li a { zoom: 1; line-height: 1.2em; }  /* complemento do anterior */
input[type=hidden]{ display: none !important; visibility: hidden !important;} /* input hidden no FF */
button { border: 1px outset #AAA; }
legend { margin-bottom: 1.4em; } /* Fixes incorrect styling of legend in IE6 fieldsets. */
label { display: block;}
table { border-collapse: separate; border-spacing: 0; }
caption, th, thead, tfoot { text-align: center; font-weight: bold; }
blockquote:before, blockquote:after,q:before, q:after { content: “”; }
blockquote, q { quotes: "" ""; }
pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap !important; /* FF 1999 */
 white-space: -pre-wrap; /* OP 4-6 */ white-space: -o-pre-wrap; /* OP 7 */  word-wrap: break-word; /* IE 5.5+ */
}
h1 { font-size: 250%; font-weight: normal;}
h2 { font-size: 200%; font-weight: normal;}
h3 { font-size: 150%; font-weight: normal;}
h4 { font-size: 120%; font-weight: normal;}
h5 { font-size: 110%; font-weight: normal;}
h6 { font-size: 100%; font-weight: bold;}

/* centralizando o container (que tem todo o conteúdo da página) */
#container { margin: auto; vertical-align: middle; }

/* classes úteis de posicionamento.
   Ex.: Tenho uma lista de caixas separadas por margin. Pra última caixa se alinhar com a borda,
   é bom colocar a classe last nela */
.top { margin-top: 0; vertical-align: top; vertical-align: top;}
.bottom { margin-bottom: 0; vertical-align: baseline;  vertical-align: bottom;}
.left { margin-left: 0; float: left; }
.right { margin-right: 0; float: right; }
.center { margin: auto; vertical-align: middle; }
.first { margin-top: 0; margin-left: 0; vertical-align: top;}
.last { margin-bottom: 0; margin-right: 0; vertical-align: bottom;}

/* classes úteis na formatação */
.screenreader { display: none; }
.ak { text-decoration: underline; /* access keys */ }
.u { text-decoration: underline; /* textos underline */}
.notice { background-color: #F9FF9A; /*yellow*/}
.error { background-color: #FF8E8E; /*red*/}
.highlight  { background:#ff0; }

/* para não precisar do famoso div wrapper [http://www.positioniseverything.net/easyclearing.html] */
.clear { display: inline-block; }   
.clear:after, .container:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clear { display: block; zoom: 1; }

/* fazendo colunas com alturas iguais [http://www.positioniseverything.net/articles/onetruelayout/equalheight] */
.paifullcols { overflow: hidden; width: 99.8%; display: inline-block; }
.paifullcols:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.paifullcols { display: block; zoom: 1; }
.paifullcols .fullcol { float: left; padding-bottom: 1000em; margin-bottom: -999.5em; width: auto }

/* classes para debug: borderchilds, borderdivs e bordercols */
.borderchilds * { border: 1px dashed #CCC;}
.borderchilds span, .borderchilds a, .borderchilds b, .borderchilds strong, .borderchilds i, .borderchilds em,
.borderchilds legend, .borderchilds br { border: none;}
.borderchilds p { border-color: blue; }
.borderchilds div { border-color: red; }
.borderchilds table { border-color: green; }
.borderchilds ul, .borderchilds ol { border-color: cyan; }
.borderchilds .fullcol { border: 1px solid black;}
.borderdivs div, .bordercols .fullcol, .bordercols .paifullcols { border: 1px dashed red;}


/*
  Menus drop-down horizontal-vertical (hv) e vertical-vertical (vv) até 4 níveis
  by Micox - elmicox.blogspot.com - Ver. 2.0 - 20/02/08 - Creative Commons License
*/    
.menu-hv, .menu-vv { position: relative; margin: 0; padding: 0; display: block; zoom: 1;}
 .menu-hv * ,    .menu-vv * { margin: 0; padding: 0 ; list-style: none}
 .menu-hv li ,   .menu-vv li { position: relative; line-height: 1.2em; vertical-align: top }
 .menu-hv a ,    .menu-vv a { display: block; zoom: 1; line-height: 1.2em }
 .menu-hv li ul, .menu-vv li ul { position: absolute; visibility: hidden  }
 .menu-hv li:hover ul,  .menu-vv li:hover ul,
 .menu-hv li.hover ul,  .menu-vv li.hover ul { visibility: visible }
 .menu-hv li:hover ul ul,  .menu-vv li:hover ul ul,
 .menu-hv li.hover ul ul,  .menu-vv li.hover ul ul { visibility: hidden }
 .menu-hv li li:hover ul,  .menu-vv li li:hover ul,
 .menu-hv li li.hover ul,  .menu-vv li li.hover ul { visibility: visible }
 .menu-hv li li:hover ul ul,  .menu-vv li li:hover ul ul,
 .menu-hv li li.hover ul ul,  .menu-vv li li.hover ul ul { visibility: hidden }
 .menu-hv li li li:hover ul,  .menu-vv li li li:hover ul,
 .menu-hv li li li.hover ul,  .menu-vv li li li.hover ul { visibility: visible }
 /* características horizontal-vertical */
 .menu-hv:after, .menu-hv.after { content: "."; line-height: 0px; clear: both; display: block; visibility: hidden}
 .menu-hv li { float: left; }  
 .menu-hv li ul li { float: none; }
 .menu-hv li ul li ul { position: absolute; left: 100%; top: 0; }
 /* características vertical-vertical */
 .menu-vv { float: left; } 
 .menu-vv li ul { left: 100%; top: 0; }
 /* ****************************************
   ALTERE ABAIXO. defina a largura dos itens do seu menu abaixo
   ou apague as linhas se for definir em outro lugar */
 .menu-hv li { width: 100px; background-color: cyan }
 .menu-vv li { width: 100px; background-color: cyan }
 .menu-hv li a:hover { background-color: gray }
 .menu-vv li a:hover { background-color: gray }
 
/* Micox Pseudo-class-css2 to IE (MXPC). Activate .hover and .first-child in IE 6 
   Deixe isto ao final de tudo do seu CSS pois o Webkit não interpreta nada mais abaixo do expression
*/
* html * { color: expression( (function(who){ if(!who.MXPC && who.nodeName != 'A'){
 who.MXPC = '1';
 who.onmouseenter=function(){ who.className += ' hover'};
 who.onmouseleave=function(){ who.className = who.className.replace(' hover','')};
 (who==who.parentNode.firstChild) ? who.className += ' first-child' : '' ;
} } )(this) , 'auto') }

Ah, meu novo passatempo é um site de concursos www.resultadoconcursos.net . Quem curte concursos passa por lá.

Zumbis

2008-04-15T09:44:00.003-04:00

Chega um pouco de falar de javascript, css, programação, concordam?
Hoje o mico vai papear e falar sobre zumbis. "What?!?" - Isso mesmo, zumbis comedores de carne humana.

Em breve, vocês vão ver seu leitor de feeds lotar com notícias sobre o tal filme de zumbis rodado em Brasília.
O motivo é uma promoção do atoouefeito dando camiseta e sangue pra quem ajudar a divulgar o filme. Djo não estou ajudando só por causa disso não, pois nunca ganhei promoção nenhuma, nem em bingo.
Tô ajudando a divulgar, pois sou fã dessas paradas comédia de zumbis e acho que um filme brazuca deve ser mais comédia ainda heheaheh. Ainda mais sendo um filme independente, com pouca verba e talz. Vamo ver o que sai, gosto muito da mistura de terror e comédia.

Sou leitor do Ato Ou Efeito e acompanhei estes dias a coluna que fala sobre zumbis. Lá descobri que, há um tempo atrás, saiu uma HQ misturando zumbis e o universo Marvel (x-men, homem aranha, pá e talz).
O nome da série é Marvel Zombies e, este macaco, que havia passado 7 anos sem ler uma mísera HQ, teve vontade de achar as supra-citadas revistas para ler.

Infelizmente não achei para comprar (a séria é de 2006/2007 parece) então tive que "cavucar" na net e ir baixando as partes separadas. Tá dando trabalho pois a saga completa é dividida em várias revistas, são links antigos, quebrados, alguns sem tradução, etc. Mas as partes que eu já baixei tão valendo a pena, muito bom a parada.

Nas aulas de redação do meu ensino médio, aprendi sobre uma parada chamada "verossimilhança" que diz que, apesar da estória (com 'e' mesmo neste caso) ter a liberdade de ser fantasiosa, ela tem que manter um certo grau de possibilidade, sem ambiguidades, sem loucuras em excesso (a não ser que seja um livro do Mário de Andrade hehahe), enfim, não sei como explicar. "E daí mico?".

E daí que sempre tive algumas dúvidas sobre essas bizarrices de zumbis. Acompanhem meu raciocínio nobres colegas, caso ainda não estejam dormindo:

1) Se o zumbi não comer por muito tempo, o que sustenta a energia do corpo dele? Ela deveria acabar e o zumbi cair no chão, certo?

2) Como a fome dos zumbis é grande, ao se alimentar de pessoas, devem comer tudo e não sobrar nada né? Como ainda sobra tantas pessoas com corpo inteiro pra virar novos zumbis? Eles não deveriam se multiplicar tão rápido ué.

"É um filme bizarro mané, ele não tem que se explicar, ele tem apenas que divertir. O maluco tá vendo um filme onde mortos andam e quer verossimilhança? Doido" - Vocês pensando...

Mudando de assunto, você pode não saber, mas o Micox já foi um exímio diretor de filmes trash quando era mais jovem (1998/1999) com 3 filmes de mais de 15 mins na bagagem huaheuae. Tiroteios, explosões, cenas em velocidade, pá e talz.
Um deles passou até em um festival de filmes trash aqui em Goiânia em que o ilustríssimo Zé do Caixão estava presente. O povo morreu de rir com o filme, caiam no chão heaehe.
Este que passou está em formato digital, mas não vou publicar na net não porque (1) eu não sei mais onde está o dvd, (2) Os "atores" colegas meus me ameaçaram de morte se eu publicar isto. Hoje são todos senhores de respeito, casados, pá e talz. heaheh

Vocês devem estar pensando: "Puts, esse micox é deve ser um power nerd espinhento de óculos fundo de garrafa que não pega mulé mesmo viu: javascript, programação, filmes trash, HQs. Só falta dizer que gosta de Jornada nas Estrelas"

Bom, tirando a parte do "espinhento de óculos fundo de garrafa que não pega mulé" o resto é verdade mesmo (só que não gosto de Jornada nas Estrelas).
Só não posto uma foto para a mujerada ver meu poder galanteador senão os servidores não vão aguentar de tantos acessos femininos.

"Puts, desliga o mico que ele tá doido hoje".
OFF.

Homer em CSS puro - sem imagens

2008-04-11T13:55:00.006-04:00

Pois é...

Tem que tá com muuuuito tempo sobrando, ter muita criatividade e domínio do CSS. E o pior é que não ficou bizarro. O negócio ficou bom, muito bom.

Autor: Román Cortés

Descoberto via: Dkcell

(

)

•

(

Help CHM da API do jQuery, Leilão El Micox e outras notícias

2008-04-01T15:35:00.004-04:00

"Ôlha só quem estâ de vôoolta, êle mêêsmo, o Micôx, com notícias quentinhas. É fantâârdigo." - Cid Moreira sobre Nova postagem no El Micox

Ae malucada, comecemos falando sobre a lentidão ao acessar o site do jquery, principalmente quando estamos apressados atrás de uma documentação sobre a api.
Porém há uma luz no fim do tunel. Em uma postagem no grupo de discussões do jQuery em inglês, o senhor Charles (char101) disponibiliza um arquivo .chm (help do windows) para o nosso amado jQuery. Baixem e agilizem suas pesquisas sobre a API. Amém irmãos...

Em seguida mostro 2 dos ótimos layouts feitos para o desafio Webly de layout 2050 que está na reta final. Os caras capricharam.
Só coloquei os 2 que tinham thumbs, mas os todos os layouts ficaram muito bons, dava até pra usar como layout atual hehe. Compensa visitar e depois votar.

Ahora djo falar sobre o leilão do banner no El Micox que rendeu váaarios lances, um melhor que o outro. Chegamos a ótima cifra de R$360,00 por um mês de banner.

Infelizmente, é lógico que "esto non ecxiste, es fruto de la imarrinación del microx".
Mas o leilão não foi de todo ruim. Recebi 1 lance de R$50 e uma doação gratuita (pleonasmo) do grande Tiago Celestino (vivaaa).
O lance que recebi até agora foi de R$50 contos do brodi canha , aeeee. Ainda dá tempo de você participar desta importantíssima competição nacional que está dando o que falar. Vou fechar a bagaça na próxima terça (se eu lembrar).

Pra encerrar esta edição do Micox News, informamos que, como a quantidade de comentários caiu, o leilão só rendeu 1 lance, este blog está encerrando as atividades hoje. Hasta la vista.
(mas que mentira besta)

Leilão no El Micox por banner - tentativa

2008-03-11T09:08:00.004-04:00

Olá Sr. Senhor, que tal um banner com link do seu site alí em cima?

O Sr. Micox não ganha um mísero centavo para ficar postando tutoriais e códigos bala aqui e tava afim de explicar financeiramente para a patroa "por que motivos ele fica na frente do computador fazendo códigos pros outros em vez de ir assistir o BBB".

O Sr. Senhor não irá se arrepender. O(s) blog(s) do Micox tem uma seleta casta de leitores e assinantes desenvolvedores web que levarão seus rendimentos às alturas!

A idéia surgiu após eu ver este post aqui do treta e raciocinar que o google adsense não é generoso com este pobre blog, então preciso procurar outros caminhos pra continuar postando e ter pelo menos um pequeno retorno financeiro por fazer códigos di grátis na madrugada. hehahe

Aconselho meus brodis blogueiros de desenvolvimento web a tentarem a mesma fonte de recursos. Google adsense só dá certo com blogs do povão.

Como não sei o valor de um banner 468x60 com link aí no topo vou fazer um leilão. Não é possível que um blog com tamanha qualidade e quantidade de acessos tenha o valor pelo menos de um mísero iphone, portanto vou fixar o lance mínimo em 500 reais para ter seu banner aí por 1 mês (claro que é brincadeira). Na real, o lance mínimo é 50 reais por mês.

Acretido que pra muitos blogs/sites/serviços o El Micox talvez seja interessante. Um pagerank bãozim, links importantes de sites importantes, visitantes da área de tecnologia, etc.

Dê seu lance por um banner no El Micox. Mesmo que seja pouco, não deve ser menos que o que ganho do Google Adsense aqui no El Micox hehaeh. Ajuda o macaco aeee. Se você está por aqui é porque provavelmente ele já deve ter te ajudado.

Abaixo, algumas estatísticas (o banner será colocado nos 3 elmicox):

elmicox.blogspot.com
Frequencia de postagem - Semanal
Postagens: 125
Assinantes do feed: 0 (todos 460 são redirecionados ao www.elmicox.com)
Pagerank 5 (Calculado por marketingdebusca.com.br)
Technorati authority: 26 (quanto maior melhor)
Links apontando (de acordo com o Google Webmasters tools): 6936
Links apontando (de acordo com o link:elmicox.blogspot.com desatualizado): 150
Links apontando (de acordo com o technorati): 231 blog reactions
Visitas dos assinantes ao site (últ. 30 dias): 0 (redirecionados ao elmicox.com)
Total de visitas (by google analytics - ult. 30 dias): 5.963
Exibições de página (ult. 30 dias): 8.004
Tempo médio no site: 01m 26s
Cidades que mais visitam (ult. 30 dias) : SP (1020); RJ (518); BH (311); curitiba (248); continua...

www.elmicox.com
Frequencia de postagem - Semanal
Postagens: 67
Assinantes do feed: 460
Pagerank 4
Technorati authority: 10
Links apontando (Google Webmasters tools): 538
Links apontando (link:elmicox.blogspot.com desatualizado): 28
Links apontando (technorati): 15 blog reactions
Visitas dos assinantes ao site (últ. 30 dias): 82 clicks
Total de visitas (by google analytics): Não monitoro
Exibições de página (ult. 30 dias): Não monitoro
Tempo médio no site: Não monitoro
Cidades que mais visitam (ult. 30 dias) : não monitoro

elmicoxcodes.blogspot.com (ingles)
Frequencia de postagem - Mensal Fraca.
Postagens: 13
Assinantes do feed: 23
Pagerank 4
Technorati authority: 4
Links apontando (Google Webmasters tools): 1173
Links apontando (link:elmicox.blogspot.com desatualizado): 31
Links apontando (technorati): 54 blog reactions
Visitas dos assinantes ao site (últ. 30 dias): 12 clicks
Total de visitas (by google analytics - ult. 30 dias): 3.151
Exibições de página (ult. 30 dias): 3.919
Tempo médio no site: 01m 09s
Países que mais visitam (ult. 30 dias) : USA (817); India (358); Reino Unido (173); Alemanha (142); continua...

As estatísticas não estão maquiadas. Vejam que coloquei até indicadores não muito bons.

Desafio Webly de Layouts - valendo pendrive, revista webdesign, camisetas, mousepads

2008-03-10T09:15:00.003-04:00

Pois é pois é pois é.

O desafio da vez no Webly é o:

"tchanaaam!!!" - Desafio WeblY de layouts! Como será o layout do Portal Webly em 2050?

Como o Webly é o mais superfodástico portal e fórum de tutoriais web, conseguimos vários patricínios e grana para poder oferecer VÁRIOS prêmios aos participantes deste desafio:

Pendrive da Emporio Logo, CDs da revista Webdesign, adesivos webly, camisetas webly e mousepad webly.

[jabá inside jabá on] Se quiser patrocinar o Webly também ou ver as vantagens em ser parceiro, entra em contato com um dos admins [/jabá inside jabá off]

É difícil você ver estes desafios de fórum darem prêmios. E ainda mais tantos prêmios.

Passa lá. Quem sabe, além de se divertir e mostrar sua técnica, você ainda ganha um dos prêmios. A parada já está valendo!

Chama seus cumpadi aí também.

Ultimate Micox Menu drop-down CSS - até 4 níveis

2008-03-07T08:09:00.005-04:00

HOoooaa. E ae malucada.

Há um tempo eu venho brigando em busca do código de menu css drop-down perfeito.
Eu queria um menu dropdown css pra copiar e colar, simples, rápido, sem precisar de configurações.
Apenas copiar/colar no meu CSS, definir cor e largura dos itens, usar a classe no html e pronto. E tudo funcionando nos navegadores mais usados (FF, IE6/7, OP).

Ontem eu postei a peça que faltava (ativar hover no IE6 via css).
Veja o exemplo online (e o código fonte) do Ultimate Micox Menu Drop Down CSS até 4 níveis.

Bem, vamos aos códigos:
Primeiro é só fazer seu velho menu usando UL e LI.

<ul>
 <li>class='menu-hv'</li>
 <li><a href='#'>2</a></li>
 <li><a href='#'>3...</a>
  <ul style='background-color: red; '>
   <li>31</li>
   <li><a href='#'>32</a></li>
   <li>33</li>
  </ul>
 </li>
 <li><a href='#'>4...</a>
  <ul>
   <li>41</li>
   <li><a href='#'>42</a></li>
   <li><a href='#'>43...</a>
    <ul  style='background-color: blue'>
     <li>431</li>
     <li><a href='#'>432...</a>
      <ul  style='background-color: gray'>
       <li>4321</li>
       <li><a href='#'>4322</a></li>
      </ul>
     </li>
    </ul>
   </li>
   <li>44</li>
  </ul>
 </li>
</ul>

Depois você coloca a classe menu-hv no UL (ou no div pai de UL) para ativar o menu horizontal com submenus verticais. Para o menu vertical vertical (em pé) a classe é menu-vv.

<ul class='menu-hv'>

Por último é só colocar o código do Ultimate Micox Menu drop-down CSS (UMMDDCSS huahe) no seu arquivo CSS ou em um arquivo CSS separado. O local onde você pode alterar a cor, largura, etc dos itens do menu está indicado no código. Não mexa no resto pra não correr o risco de estragar.

/*
  Menus drop-down horizontal-vertical (hv) e vertical-vertical (vv) até 4 níveis
  by Micox - elmicox.blogspot.com - Ver. 2.0 - 20/02/08 - Creative Commons License
*/    
.menu-hv, .menu-vv { position: relative; margin: 0; padding: 0; display: block; zoom: 1;}
 .menu-hv * ,    .menu-vv * { margin: 0; padding: 0 ; list-style: none}
 .menu-hv li ,   .menu-vv li { position: relative; line-height: 1.2em; vertical-align: top }
 .menu-hv a ,    .menu-vv a { display: block; zoom: 1; line-height: 1.2em }
 .menu-hv li ul, .menu-vv li ul { position: absolute; visibility: hidden  }
 .menu-hv li:hover ul,  .menu-vv li:hover ul,
 .menu-hv li.hover ul,  .menu-vv li.hover ul { visibility: visible }
 .menu-hv li:hover ul ul,  .menu-vv li:hover ul ul,
 .menu-hv li.hover ul ul,  .menu-vv li.hover ul ul { visibility: hidden }
 .menu-hv li li:hover ul,  .menu-vv li li:hover ul,
 .menu-hv li li.hover ul,  .menu-vv li li.hover ul { visibility: visible }
 .menu-hv li li:hover ul ul,  .menu-vv li li:hover ul ul,
 .menu-hv li li.hover ul ul,  .menu-vv li li.hover ul ul { visibility: hidden }
 .menu-hv li li li:hover ul,  .menu-vv li li li:hover ul,
 .menu-hv li li li.hover ul,  .menu-vv li li li.hover ul { visibility: visible }
 /* características horizontal-vertical */
 .menu-hv:after, .menu-hv.after { content: "."; line-height: 0px; clear: both; display: block; visibility: hidden}
 .menu-hv li { float: left; }  
 .menu-hv li ul li { float: none; }
 .menu-hv li ul li ul { position: absolute; left: 100%; top: 0; }
 /* características vertical-vertical */
 .menu-vv { float: left; } 
 .menu-vv li ul { left: 100%; top: 0; }
 /* ****************************************
   ALTERE ABAIXO. defina a largura, cor, formatações, etc, dos itens do seu menu abaixo
   ou apague as linhas se for definir em outro lugar
 */
 .menu-hv li { width: 100px; background-color: yellow }
 .menu-vv li { width: 100px; background-color: yellow }
 .menu-hv li a:hover { background-color: cyan }
 .menu-vv li a:hover { background-color: cyan }

 
/* Micox Pseudo-class-css2 to IE (MXPC). Activate .hover and .first-child in IE 6
   http://elmicox.blogspot.com/2008/03/ativando-hover-e-first-child-no-ie-6-um.html 
   Deixe isto ao final de tudo do seu CSS pois o Webkit não interpreta nada mais abaixo do expression */
* html * { color: expression( (function(who){ if(!who.MXPC){
 who.MXPC = '1';
 if(who.nodeName != 'A'){
  who.onmouseenter=function(){ who.className += ' hover'};
  who.onmouseleave=function(){ who.className = who.className.replace(' hover','')}; }
 (who==who.parentNode.firstChild) ? who.className += ' first-child' : '' ;
} } )(this) , 'auto') }

Pronto! Agora ficou fácil fazer um menu drop down CSS. É só copiar e colar isso aí no código. Não precisa pegar javascript externo, não precisa quebrar cabeça com floats ou displays. É só colocar isto no seu documento e fazer seu menu ul-li.

Os espertos devem ter percebido que dá pra aumentar a quantidade de níveis facilmente adicionando novos níveis onde começa os visibility: hidden né? heheh

Bom, é isso aí. Dúvidas, é só postar lá no fórum. Até a próxima diversão.

Ativando .hover e .first-child no IE 6 - um novo método

2008-03-06T15:56:00.008-04:00

Tamo de volta malucada

Todos aqui devem saber que as pseudo-classes do CSS 2 :hover e :first-child não funcionam direito no IE6 né? A hover só funciona em links.

Porém vossas senhorias já devem conhecer inúmeras ténicas secretas ninja para simular as pseudo classe hover e first-child no IE 6 né? Técnicas com javascript simples, técnicas com libs javascript, arquivo htc, etc

Abaixo eu mostro uma nova técnica que o mico inventou enquanto estava desenvolvendo sua Micox-mini-css-lib (em breve em um blog perto de você).

A vantagem da minha criança é que ela pode ser colocada direto no seu CSS, em qualquer lugar dele (de preferencia no começo). Ela é baseada em javascript dentro do CSS.

Para ativar, você deve usar as classes .hover em conjunto com a :hover OU .first-child em conjunto com a :first-child nos elementos onde deseja o efeito. Tipo assim:

li:first-child , li.first-child { color: red }

Abaixo, o código que faz a mágica e deve ser colocado no ~~começo~~ FINAL do seu css. Quem não entender me pergunta nos comments.

Micox Pseudo-class-css2 to IE (MXPC)

/* Micox Pseudo-class-css2 to IE (MXPC). Activate .hover and .first-child in IE 6 
   Deixe isto ao final de tudo do seu CSS pois o Webkit não interpreta nada mais abaixo do expression
*/
* html * { color: expression( (function(who){ if(!who.MXPC){
 who.MXPC = '1';
 if(who.nodeName != 'A'){
  who.onmouseenter=function(){ who.className += ' hover'};
  who.onmouseleave=function(){ who.className = who.className.replace(' hover','')}; }
 (who==who.parentNode.firstChild) ? who.className += ' first-child' : '' ;
} } )(this) , 'auto') }

/* example */
p:first-child , p.first-child { color: red }
li:hover a , li.hover a { background-color: blue }

"Viiixxxxxx maria, onde eu coloco isso mico?" - Não tema o código Sr.! Apenas coloque ele no ~~começo~~ FINAL do seu CSS. Veja esta página de exemplo e zóie o código fonte dela.

O bom é que esta idéia do expression pode ser usada para outras gambiarras também. Em breve eu devo voltar com mais.

Em breve tô de volta. Té mais.

Fazer um menu com vários níveis. BD + PHP + JS + CSS

2008-02-07T10:27:00.000-03:00

Ae pessoal,

Há um tempo eu tinha criado um esquema e função PHP pra gerar um UL-LI para fazer um menu tipo pai e filhos, sendo que a quantidade de filhos e netos poderia ser infinita.

Hoje deu vontade de sair um pouco do javascript de sempre e postar essa parada aqui no blog. Desde a organização da tabela no Banco de Dados, função PHP pra gerar os UL-LI e finalizando com links pra estilizar este menu UL-LI.

Lá vai:

1) Para o menu (pai e filhos) será necessário apenas 1 tabela com o nome de 'menus'. Só executar a seguinte SQL no Banco de dados:

CREATE TABLE `menus` (
`id` tinyint(3) unsigned NOT NULL auto_increment,
`pai_id` tinyint(3) unsigned NOT NULL default '0',
`ordem` tinyint(3) unsigned NOT NULL default '0',
`visivel` tinyint(3) unsigned NOT NULL default '1',
`nome` varchar(30) NOT NULL default '',
`link` varchar(150) default NULL,
PRIMARY KEY (`id`),
KEY `pai_id` (`pai_id`,`ordem`,`visivel`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT

O SQL acima manda criar uma tabela chamada 'menus' onde o truque está no campo pai_id.

Em cada registro, o campo pai_id irá apontar para o ID de outro registro na mesma tabela, indicando que ele é o seu pai. Se a entrada não tiver pai, o campo pai_id deve ficar com 0 (zero).

- "Ó PÓOOOOI!!"

2) Preencha sua tabela lembrando de colocar visivel=1 para os menus que quer que sejam visíveis e colocando a ordem de cada menu. O campo pai_id indica qual o ID do menu pai, se ele for um menu principal (pai) sem outro pai, este campo deve ficar com '0'.

Exemplo pra fazer o submenu:

comidas
- arroz
- feijao
guloseimas
- chocolate
- maquindonalds
---- sanduiche porco
---- sanduiche pequeno

Teremos:

comidas (pai_id=0)
- arroz (pai_id = id do 'comidas')
- feijao (pai_id = id do 'comidas')
guloseimas (pai_id=0)
- chocolate (pai_id = id do 'guloseimas')
- maquindonalds (pai_id = id do 'guloseimas')
---- sanduiche porco (pai_id = id do 'maquindonalds')
---- sanduiche pequeno (pai_id = id do 'maquindonalds')

3) Adicione a seguinte função à sua biblioteca de funções (você já tem que estar conectado ao bd antes de usar esta função né?):

function gera_menu($cod_ul_pai,$tabs,$id_do_pai){
    //gera um menu ul com submenus
    //by Micox - elmicox.blogspot.com - forum.ievolutionweb.com
    //exemplo: gera_menu("<ul>","    ",0)
    $recc = mysql_query("SELECT * FROM menus WHERE pai_id=$id_do_pai AND visivel=1 ORDER BY ordem");
    $ret = $cod_ul_pai."\r\n";
    if($recc==true){
        while($linha = mysql_fetch_array($recc,MYSQL_ASSOC)){
            if(isset($linha['link'])){
                $href = $linha['link'];
            }else{
                $href = '';
            }
            $ret .= $tabs."    <li><a href='$href'>".htmlentities($linha['nome'])."</a>";
            //testando se tem filhos
                $recfilho = mysql_query("SELECT * FROM menus WHERE pai_id=$linha[id] AND visivel=1 ORDER BY ordem");
                if(mysql_num_rows($recfilho)>0){
                    $ret .= "\r\n".$tabs."        ".gera_menu("<ul>",$tabs."        ",$linha['id'])."    ".$tabs;
                }
            //fim filhos
            $ret .= "</li>\r\n";
        }
    }
    $ret .= $tabs."</ul>\r\n";
    mysql_free_result($recc);
    return $ret;
}

4) Chame a função onde vc quer que gere o menu:

<?php echo gera_menu("<ul>","        ",0) ?>

5) Isso aí irá gerar um menu como este exemplo:

<ul>
  <li><a href='produtos.php?text=3'>Produtos e Serviços</a>
    <ul>
      <li><a href='produtos.php?Gravadores_Monolinha&cat=1&text=14'>Gravadores Monolinha</a></li>
      <li><a href='produtos.php?Gravadores_Multilinha&cat=2&text=15'>Gravadores Multilinha</a></li>
      <li><a href='produtos.php?Outros_produtos&cat=3&text=16'>Outros produtos</a></li>
    </ul>
  </li>
  <li><a href='conteudo.php?Revendas&text=4'>Revendas</a>
    <ul>
      <li><a href='conteudo.php?Brasil&text=17'>Brasil</a></li>
      <li><a href='conteudo.php?Internacional&text=18'>Internacional</a></li>
      <li><a href='conteudo.php?Seja_um_revendedor&text=19'>Seja um revendedor</a></li>
    </ul>
  </li>
  <li><a href='conteudo.php?Clientes&text=5'>Clientes</a></li>
  <li><a href='conteudo.php?Suporte&text=6'>Suporte</a></li>
</ul>

6) Pronto, agora é só estilizar com algum tutorial de menu, treemenu (menu em árvore), menu drop down horizontal, vertical, etc.

Té. Dúvidas, pergunta lá no fórum :)

Desenhando pontos e linhas com javascript puro (sem canvas)

2008-01-31T15:46:00.000-03:00

Bem, infelizmente javascript não tem muitas capacidades de gerar gráficos, linhas, pontos, círculos, etc a não ser com CANVAS (infelizmente não bem suportado por todos os navegadores) ou por POG.

Fazer usando o canvas não teria graça hehe, então fui pro que eu gosto: a velha gambiarra.

Bom, gerar o ponto é fácil:

<style>
.ponto {  background-color: #0000FF; position: absolute; overflow: hidden;}
</style>
<script>
//global que guarda a largura da linha. Quanto maior, mais rápido o processamento.
window['larguraPonto']=2;
function geraPonto(x, y, nome, elempai) {
    //by Micox - www.elmicox.com - 31/01/08
    var pixel = document.createElement('div');
    pixel.id = nome;
    pixel.className = 'ponto';
    pixel.style.width = pixel.style.height = window['larguraPonto'] + 'px'
    pixel.style.left = x + 'px';
    pixel.style.top = y + 'px';
    return elempai.appendChild(pixel);
}
//chamando a função e gerando uma reta vertical
window.onload = function(){ 
 geraPonto(10,4,'ponto1',document.body) 
 geraPonto(10,6,'ponto2',document.body) 
 geraPonto(10,8,'ponto3',document.body) 
 geraPonto(10,10,'ponto4',document.body) 
 geraPonto(10,12,'ponto4',document.body) 
 geraPonto(10,14,'ponto4',document.body) 
 }
</script>

Perceba que eu coloquei algumas características do ponto via CSS e a definição da largura do ponto em uma variável global. Quanto MENOR for o valor da largura do ponto, logicamente irá demorar mais a plotagem do ponto.

Agora pra gerar uma linha inteira terei que usar meus exímios e velhos conhecimentos de matemática geométrica aprendidos no ensino médio hauehea (Vê se eu lembro disso. Lógico que colei do David Betz e dei umas adaptadas).

function geraLinha(x1, y1, x2, y2, nome, elempai) {
    //by Micox - www.elmicox.com - 31/01/08 - adaptado de http://www.davidbetz.net/graphics/
    var longPixel = document.createElement('div');
    if(elempai.constructor==String){ elempai = document.getElementById(elempai);}
    
    if(typeof(window['MicoxLinhas'])=='undefined'){
        window['MicoxLinhas'] = Array(); //este cidadão global irá guardar todas as linhas
    }
    window['MicoxLinhas'][nome] = Array()
    
    var steep = Math.abs(y2 - y1) > Math.abs(x2 - x1);
    if (steep) {
        var t = y1;
        y1 = x1; x1 = t;
        t = y2; y2 = x2;
        x2 = t;    }
        
    var deltaX = Math.abs(x2 - x1);
    var deltaY = Math.abs(y2 - y1);
    var error = 0;
    var deltaErr = deltaY;
    var xStep, yStep, modulo;
    var x = x1, y = y1;
    
    if (x1 < x2) {
        xStep = window['larguraPonto'];
        modulo = +1;
    }else {
        xStep = -window['larguraPonto'];
        modulo = -1;
    }
    
    if(y1 < y2) { yStep = window['larguraPonto']; }
    else { yStep = -window['larguraPonto']; }
    
    var nomeP = nome + x + '-' + y;
    
    if(steep) { window['MicoxLinhas'][nome][x] = geraPonto(y, x, nomeP, elempai);    }
    else { window['MicoxLinhas'][nome][x] = geraPonto(x, y, nomeP, elempai);    }
    
    var fim = modulo * x2;
    
    while( modulo * x < fim) {
        x = x + xStep;
        error = error + deltaErr;
        if(2 * error >= deltaX) {
            y = y + yStep;
            error = error - deltaX;
        }
        nomeP = nome + x + '-' + y;
        if(steep) { window['MicoxLinhas'][nome][x] = geraPonto(y, x, nomeP, elempai);    }
        else { window['MicoxLinhas'][nome][x] = geraPonto(x, y, nomeP, elempai);    }
    }
    return window['MicoxLinhas'][nome];
}

//brincando de desenhar
window.onload = function(){
 geraLinha(20,120,30,100,'minhaLinha1',document.body)
 geraLinha(30,100,60,100,'minhaLinha2',document.body)
 geraLinha(60,100,90,80,'minhaLinha3',document.body)
 geraLinha(90,80,130,80,'minhaLinha4',document.body)
 geraLinha(130,80,160,100,'minhaLinha5',document.body)
 geraLinha(160,100,210,105,'minhaLinha6',document.body)
 geraLinha(210,105,220,120,'minhaLinha7',document.body)
 geraLinha(220,120,20,120,'minhaLinha8',document.body)
 //agora só faltam as rodas haehaheuhaeu
}

Pronto, agora só falta fazer funções pra elipses e curvas hauheuhae. Não tô afim de brincar disso hoje não. Algum dia eu ou alguém faz uma função pra isso.

Percebam, senhores, que coloquei a opção de nomes nas linhas e pontos e coloquei elas dentro de um pai qualquer. Pra quê? Ué, pra poder apagar e mover as ditas cujas.

As funções de apagar:

function removePonto(nomeOuRef){
    //recebe o ID do ponto ou a referencia ao objeto HTML
    if(nomeOuRef.constructor==String){    nomeOuRef = document.getElementById(nome);    }
    nomeOuRef.parentNode.removeChild(nomeOuRef)
    try { delete nomeOuRef; } catch(e) { nomeOuRef = null }
}
function removeLinha(nomeOuRef){
    //recebe o ID da reta ou a referencia ao objeto array
    if(nomeOuRef.constructor==String){ nomeOuRef = window[nomeOuRef]; }
    for(var i in nomeOuRef){
        removePonto(nomeOuRef[i])
        try { delete nomeOuRef[i]; } catch(e) { nomeOuRef[i] = null }
    }
    try { delete nomeOuRef; } catch(e) { nomeOuRef = null }
}

As funções de mover nem precisava colocar aqui pois é aquele básico esquema de mover Divs:

function move(quem){
 //by Micox - www.elmicox.com - 30/01/08
 if(quem.constructor==String){ quem = document.getElementById(quem); }
 //movendo
 window['move'+quem.id] = setInterval( function(){ 
   quem.style.left = (quem.offsetLeft + 5) + 'px'
  }, 50);
}
function para(quem){
 //by Micox - www.elmicox.com - 30/01/08
 if(quem.constructor==String){ quem = document.getElementById(quem); }
 if(typeof(window['move'+quem.id])=='number'){
  clearInterval(window['move'+quem.id])
 }
}

Agora veja um exemplo completo e meu opalão se movimentando aqui.

- "Porra mico, que mané você heim? Não é mais fácil abrir um programa de imagens qualquer e desenhar diboas?"

- Sim meu caro cidadão, porém, digamos que você queira fazer um fluxograma em javascript (aqui você vê o fluxograma finalizado). E aí? Nunca se sabe quando vamos precisar de algo, como diria George Boole.

Té a próxima, malucada.

cssQuery - substituto ao getElementsById e getElementsByTagName

2008-01-17T09:30:00.000-03:00

Todo mundo que programa em javascript se cansa de ter que digitar "document.getElementById" ou "document.getElementsByTagName" (ufa, cansei) toooooooda vez que quer selecionar determinado elemento ou grupo de elementos. É ou não é?

Então, após 3 digitadas destes métodos, agente vai lá e programa uma funçãozinha pra simplificar isso. É ou não é?

Na net existem infindáveis funções pra substituir o 1 ou o 2 (não vou digitar tudo denovo não heahe). Todo mundo tem sua velha função $() ou gE() ou gEid(). É ou não é?

Mas as funções que fazem isso "mais mió de bão" estão dentro de frameworks. O que é uma pena pra quem não usa frameworks.
No meu pouco conhecimento, a melhor atualmente é a do jquery que guenta seletores CSS como parâmetro e outros seletores mó bizarros.

Se você não sabe as facilidades dos seletores CSS, dê uma estudada.

O objetivo deste post do mico é mostrar uma ótima solução pra você que não usar frameworks ou cujo framework ou função não suporte fazer a seleção usando seletores CSS:

cssQuery() do Dean Edwards.

"getElementsByTagName? Pah!"
É assim que o ultra-top-master de javascript começa a explicação (mico paga pau).

Sintaxe:

elements = cssQuery(selector [, from]);

Exemplos:

// retorna todos os parágrafos que são filhos diretos de body
var tags = cssQuery("body > p");

// retorna todos os elementos que tenham o atributo 'href'
var tags = cssQuery("[href]");

// retorna os elementos que o atributo 'href' é igual a '#'
var tags = cssQuery("a[href='#']");
// procura todas as imagens dentro dos links retornados acima
var images = cssQuery("img", tags);

// pega todas as listas
var tags = cssQuery("dl,ol,ul");

// até em xml externos
var tags = cssQuery("my|:root>my|link", myXMLDoc);

// você entende isso?
var complex = "p>a:first-child+input[type=text]~span";
var tags = cssQuery(complex);

Seletores suportados:

    *
    E
    E F
    E > F
    E + F
    E ~ F
    E.warning
    E#myid
    E:link
    E:first-child
    E:last-child
    E:nth-child(n)
    E:nth-last-child(n)
    E:only-child
    E:root
    E:lang(fr)
    E:target
    E:enabled
    E:disabled
    E:checked
    E:contains("foo")
    E:not(s)
    E[foo]
    E[foo="bar"]
    E[foo~="bar"]
    E[foo^="bar"]
    E[foo$="bar"]
    E[foo*="bar"]
    E[foo|="bar"]

Guentado no IE, FF, OP, Netscape e Safari.

E aí? Vai trocar suas velhas $() ??

//Há uma lenda aí dizendo que o próximo Firefox vai suportar o velho $() . Será? Procurei um link e não achei. More informations please.