El Micox

Dica do Dia: CSS Gradient Generator

2012-01-05T07:20:00.000-03:00

Bom dia nobres senhores e senhoras.

Hoje, venho ao presente blog, repassar um site muito interessante e prático que estava em meus Bookmarks e eu não lembrava até precisar.

Se bem que minha memória nunca lembra de nada mesmo. Aliás, meus recentes problemas de memória (não tão recentes) estavam me deixando preocupado. Eu já havia ido até em neurologista, o qual me pediu um exame de ressonância magnética, do qual eu pulei fora (espero que este meu português cheio de "o qual" e "do qual" esteja correto, afinal estudei orações subordinadas ontem haha).

(Voltando ao assunto secundário do post: ) Porém minhas preocupações passaram quando vi que todos meus amigos que "mexem" com computador o dia inteiro também estavam assim e também após ler uma reportagem na Revista Época dizendo que a internet está sacaneando nossos cérebros. Concordei e fiquei aliviado por, de certa forma, eu ainda ser "normal". Aliás, maldita Ed. Globo que fica renovando as assinaturas sem solicitação.

Qual era o assunto inicial do post mesmo? Ah, CSS Gradient Generator. Desculpem a divagação anterior mas pelo menos serviu pra deixar o post com mais de 1 parágrafo haha.

Agora, pra não tomar muito do seu tempo, serei rápido e deixarei que tire suas próprias conclusões: O Gradiente dos botões deste site foi feito em 30 segundos (e sem imagens de certa forma) graças a este site.

Pra você não precisar abrir link externo, deixo aqui o exemplo:

Sou uma div com
gradiente CSS

Pode me agradecer ou xingar nos comentários.

Selects Multiple NÃO! Checkboxes SIM! Uma campanha pela abolição de selects multiples

2011-12-28T16:45:00.001-03:00

Sabe, eu nunca tinha parado pra pensar sobre isso.

Selects multiples são muito chatos.
Chatos pro visitante - que tem que usar o shift pra escolher mais de um (que visitante sabe fazer isso?)
Chatos pro desenvolvedor - na hora do html e na hora de tratar os dados no server-side (php, asp, etc).
Chatos pra estilizar o visual - Alterar visual CSS de selects é quase impossível.

Quantas vezes já vimos formulários assim:

Escolha as cidades de destino (pressione shift ou control para escolher mais de uma):

O povão gosta de mouse. O povão não gosta de teclado. O povão lá sabe o que é shift ou control?

Se quer uma página acessível não é melhor fazer assim?

Escolha as cidades de destino:

É mais bonito ou não é? É mais fácil pro visitante ou não é?

Olha só como o código é simples:

<style>
/* coloque este estilo em seu arquivo css */
.check-select-multiple {border: 2px inset #DDD; background: white; height: 60px; overflow-y: scroll; width: 300px;}</style>
<div class="check-select-multiple">
<label><input name="cidades" type="checkbox" value="1" />Goiânia</label>
<label><input name="cidades" type="checkbox" value="2" />Palmas</label>
<label><input name="cidades" type="checkbox" value="3" />Fortaleza</label>
<label><input name="cidades" type="checkbox" value="4" />São Paulo</label>
<label><input name="cidades" type="checkbox" value="5" />Salvador</label>
</div>

Veja que não precisamos fazer malabarismos com javascripts nem plugins pra Jquery. É só usar a simplicidade do belo HTML+CSS.

Além da facilidade pro visitante, ainda é infinitamente mais fácil estilizar uma DIV do que estilizar um Select (principalmente nos IEs da vida).

Se você gostou da minha explanação, abrace esta campanha também. Diga adeus ao select-multiple.
Faça um link para esta campanha, compartilhe no twitter, facebook, google-plus, faça bandeiras, passeatas, greve de fome...

Amém.

QuerySelector ou CSSQuery para IE 6 e 7 (e outros navegadores antigos)

2011-12-21T13:11:00.001-03:00

Nobres colegas scripteiros, no maravilhoso mundo da programação, a cada dia a gente se surpreende.

Ontem, durante a programação do Mwords, eu procurava um script de CSSQuery para poder permitir que os usuários do Mwords, escolhessem o elemento alvo com base em seletores CSS. Exemplo: alvo = '#content .post p'.

Lindo né? Assim como no jQuery e outras libs por aí.

As versões que eu achei eram gigantescas (mais de 10k) e a mais recomendada era a do Dean Edwards.
Nunca que eu iria pesar o script do Mwords com 10k só pra ter uma funcionalidadezinha dessas a mais.

Além disso, a maioria dos navegadores modernos já suporta a document.querySelectorAll que permite fazer isso.
O único problemático (pra variar) é o IE (acho que do 8 pra baixo).

Não desisti da minha busca, e acabei encontrando esta pérola da gambiarra feita pelo pessoal do Ajaxian. Funciona maravilhosamente bem e é maravilhosamente pequeno. Um achado digno de glórias ao pessoal do Ajaxian.

Rapidamente adaptei na minha lib, pra usar isto, caso o navegador não suporte a document.querySelectorAll.

Vejam como ficou:

cssQuery = function(sel){ //document.querySelector. sel é o seletor CSS
  //by Micox - http://elmicox.blogspot.com
  var i, res, dqs, d=document;
  if (d.querySelectorAll){
    return d.querySelectorAll(sel);
  }else{ //o IE8 pra baixo e FF 3.5 pra baixo não tem querySelector
    //baseado no fudido script de querySelector do ajaxian http://ajaxian.com/archives/creating-a-queryselector-for-ie-that-runs-at-native-speed
    var head = d.documentElement.firstChild;
    var styleTag = d.createElement("STYLE");
    head.appendChild(styleTag);
    dqs = d.__qsResult = [];

    styleTag.styleSheet.cssText = sel + "{x:expression(document.__qsResult.push(this))}";
    window.scrollBy(0, 0);
    head.removeChild(styleTag);

    res = [];
    for (i in dqs){if (dqs.hasOwnProperty(i)) {
      res.push(dqs[i]);
    }}
    return res;
    }
}
//como usar
var todos_p_destaque_filhos_de_content = cssQuery('#content p.destaque');

Obs.1: Não quis mexer com o prototype do "document" porque uso isso dentro de uma lib minha e iria ficar melhor pra mim assim. Você pode adaptá-la e postar nos comentários se quiser.

Obs.2: Só irá funcionar com seletores NATIVOS do navegador em que estiver. Portanto se for usar um "div>p.classetal" no IE, provavelmente não irá funcionar.

Pequena explicação sobre o truque deste CSSQuery:

Primeiro testo se o querySelectorAll existe no navegador atual (aquele primeiro if). Se existe, então uso ele.
Se não existe, irei adicionar um "style" ao documento.
O conteúdo deste style usa expressions - uma funcionalidade de CSS exclusiva do Internet Explorer que permite embutir scripts dentro das folhas de estilo. Você já deve conhecê-la caso já tenha usado meu velho Ultimate menu drop-down, onde uso expressions pra simular o :hover no IE.
O que foi escrito dentro do style embutido (cssText) é a criação de uma regra onde o seletor é o parametro "sel" passado (o caminho do elemento).
Dentro da regra, eu pego o próprio elemento encontrato (this) e adiciono em uma variável __qsResult.
Simples não? Genial.

(Pra quem quiser ver um exemplo do novo Mwords em funcionamento, olhem este site).

Até mais.

Alternativa melhor ao typeOf em Javascript

2011-10-18T14:33:00.001-03:00

Opa,

Um textinho rápido que li neste link do Angus Croll e que merece ser replicado: Uma alternativa bem melhor ao velho typeOf em javascript.

O typeOf, é um método nativo de Javascript pra retornar o tipo da variável. Assim temos:

typeof "belladonna" //"string"

typeof (2) //"number"
typeof ("a", 3) //"number"
typeof (1 + 1) //"number"

var a;
typeof a; //"undefined"
typeof b; //"undefined"
alert(a); //undefined
alert(b); //ReferenceError

typeof NaN //"number"

typeof {a: 4}; //"object"
typeof [1, 2, 3]; //"object"
typeof null //"object"
typeof new ReferenceError; //"object"
typeof new Date; //"object"
typeof /a-z/; //"object"
typeof Math; //"object"
typeof JSON; //"object"
typeof new Number(4); //"object"
typeof new String("abc"); //"object"
typeof new Boolean(true); //"object"
(function() {console.log(typeof arguments)})(); //object

Bom, olhando os exemplos acima a gente vê que, apesar de útil e muito usado, ele não retorna detalhadamente o que a gente precisa.

A solução? Eu, pessoalmente, sempre usei uma verificação envolvendo a propriedade "prototype" que toda variável tem.

O Angus fez melhor e empacotou em uma função:

var toType = function(obj) {
  return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
}

Comparando com os "object" do typeof padrão teremos as seguintes diferenças:

toType ("a", 3); //"string"
toType({a: 4}); //"object"
toType(null); //"null"
toType([1, 2, 3]); //"array"
(function() {console.log(toType(arguments))})(); //arguments
toType(new ReferenceError); //"error"
toType(new Date); //"date"
toType(/a-z/); //"regexp"
toType(Math); //"math"
toType(JSON); //"json"
toType(new Number(4)); //"number"
toType(new String("abc")); //"string"
toType(new Boolean(true)); //"boolean"

O resto (string, number, undefined) é igual. Só não pode ser usado em variáveis vazias não declaradas, senão dará um "ReferenceError" assim como um alert em algo não declarado.

Gostou?

Funções javascript pra trabalhar com Scroll

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

Ae pessoal, esses dias precisei brincar com a posição da barra de rolagem (scroll) na tela e posicionamento de elementos de acordo com o scroll.

Como quase tudo em javascript, nossos amigos navegadores não ajudam. Ou seja, não é só pegar a documentação, tem toda aquela velha gambiarra pra funcionar em diversos browsers (crossbrowser).

Pra minha alegria, lembrei que eu já tinha brincado com isso na época do velho Mwords, daí fui lá atrás das funções e re-adaptei. Mostrar-lhes-ei agora:

Pegando a posição atual do scroll e retornando em um objeto com as propriedades X e Y:

var w=window, d=document;
//pega a posição atual do scroll
mov.getScroll= function(){
	return {
		x: (w.pageXOffset ? w.pageXOffset : de.scrollLeft ? de.scrollLeft : d.body.scrollLeft) || 0,		
		y: (w.pageYOffset ? w.pageYOffset : de.scrollTop ? de.scrollTop : d.body.scrollTop) || 0	
	};
};
//exemplo de uso
alert('Posição Y do scroll: ' + mov.getScroll().y);

Pegando a posição de determinado elemento na tela:

var w=window, d=document;
//pega a posição correta do elemento na tela
mov.objPos = function(obj) {
	var curl =0, curt = 0;
	if (obj.offsetParent) {
		do {
			curl += obj.offsetLeft;
			curt += obj.offsetTop;
		} while ((obj = obj.offsetParent));
		return {x: curl, y: curt};
	}else{
		return {x: obj.offsetLeft, y:obj.offsetTop};
	}
};
//exemplo de uso
alert('Posição real do elemento "viva" na tela: ' + mov.objPos(d.getElementById('viva') ) );

Fazendo a barra de rolagem se movimentar gradativamente

//variaveis
var micox_mov_height= 50; //de quanto em quanto o scroll se moverá
var micox_mov_fps    = 20; //velocidade que o scroll se moverá
//faz o slide
mov.slide = function(ini,end){
	if(!mov.sliding){	
		mov.sliding = true;
		//setando posição inicial
		var atual = mov.getScroll();
		w.scrollTo(atual.x , ini);
		mov.inter = setInterval(function(){
			var novoY, atual = mov.getScroll();
			if(atual.y < end){
				w.scrollTo(atual.x , atual.y + micox_mov_heigth);
			}else{
				mov.sliding = false;
				clearInterval(mov.inter);
			}
		},1000/micox_mov_fps);
	}
}

Em breve vocês irão ver estas funções fazendo um efeitinho muito legal em um texto de um brodi meu. Linkarei aqui quando acontecer. Aguardem, irá valer a pena.

Bom, tá documentado ae se alguém precisar. Qualquer dúvida é só comentar.

ERR_CONTENT_DECODING_FAILED no Google Chrome

2011-05-10T08:32:00.000-04:00

Eu tive um problema no navegador Google Chrome com o Tadarank.com esses dias.

A página não aparecia no Chrome de jeito nenhum. Exibia um erro:

Error 330 (net::ERR_CONTENT_DECODING_FAILED)

Dando uma pesquisada na net, vi que meu caso poderia ter a ver com encoding Gzip, essas paradas...

Daí resolvi trocando:
header('Content-Encoding: gzip, deflate');

Por
header('Content-Encoding: zlib, deflate, gzip');

Pronto. O problema sumiu.
Talvez esta postagem seja útil pra você.

Como não ser marcado como SPAM ao enviar email pelo PHP - Ativar DomainKeys e SPF no Cpanel

2011-04-12T08:35:00.000-04:00

Oaa

Ae malucada.
Esses dias passei um perrengue com emails do tadarank e com um produto que eu vendia e enviava email automaticamente pros meus compradores.

Nas últimas semanas, um monte de clientes me ligou dizendo que não recebeu o email. Pesquisei e receberam sim, só que tinha ido parar na caixa de SPAM. Todos os emails enviados pelos meus domínios estavam indo pra caixa de SPAM. Tristeza.

Pesquisei e pedi ajuda pra resolver este problema.
Eu mesmo já tinha ajudado muita gente no passado, sugerindo palavras "negras" a serem eliminadas, sugerindo enviar somente se o email for do domínio (ex, se seu site é do domínio www.arroz.com você só pode enviar emails terminados em @arroz.com ), baixar bibliotecas php para email, e outras técnicas que dão uma força boa na resolução do problema, mas não resolvem de vez.

Até que o brodi kyonac da lista de monetização me sugeriu ativar uns lanche chamado SPF e DomainKeys.

É claro que vc irá pesquisar na web o que diabos é isso (afinal você está lendo este tutorial). Numa rápida explicação (chupinhada do Cpanel):

DomainKeys é um sistema de autenticação de e-mail que permite que o correio recebido seja comparado com o servidor de que foi enviado para confirmar que o correio não foi modificado. Isto garante que as mensagens estão chegando realmente do remetente listado e permite que as mensagens abusivas sejam rastreadas com mais facilidade (segundo o Cpanel).

SPF irá especificar que máquinas estão autorizadas a enviar e-mails do(s) seu(s) domínio(s). Isto significa que apenas o correio enviado através deste servidor irá aparecer como correio válido do(s) seu(s) domínio(s) quando os registros SPF são verificados (segundo o Cpanel).

Bom, se quiser detalhar melhor pesquisa no google :P

Em resumo: Ativei estas duas paradas no Cpanel e deixei de ser taxado como Spammer. Simples assim.

Antes de descobrir como ativar isso aí, eu e o Jânio, quebramos a cabeça, pois achávamos que era algo complexo de ser ativado. Abrimos chamado no datacenter e talz...

Felizmente, passeando pelas opções de email do Cpanel achei o menu chamado Autenticação de Email dentro da aba Correio. É só clicar, ativar e ser feliz. Sem complicação nenhuma.

Atualização: O Vinicius indicou um wizard pra gerar o SPF http://www.microsoft.com/mscorp/safety/content/technologies/senderid/wizard (em inglês)

Dúvidas? Comente.

Tada Rank - Avaliações de sistemas de afiliados, hospedagens, webmasters e anunciantes na web

2011-03-11T10:46:00.002-04:00

Opa malucada, beleza?

O mico tava sumido pois tava trabalhando em 3 novos projetinhos.

O primeiro é tipo um Framework PHP/Javascript pessoal, sem complicação, que me ajudará bastante no que eu preciso pra programar sites: Mudar de visual facilmente, facilidade pra exibir tabelas do BD, facilidade pra criar forms que se comunicam com o BD, facilidade pra cadastro/login de usuários, facilidade pra trocar de linguagem do site (pt en es) e facilidade pra validação de campos.

Disso tá saindo o MicoxLib - Quem sabe um dia eu torno ele público.

O segundo, que foi feito com o MicoxLib, era um sistema de compras coletivas com um brodi aqui de Goiânia. Infelizmente o mercado já tá poluído demais. Daí desistimos.

O terceiro, também feito com o MicoxLib, tá online e ele é o assunto dessa postagem:
Tada Rank - Avaliações de sistemas de afiliados, hospedagens, webmasters e anunciantes na web

O objetivo inicial é avaliar os sistemas de afiliados pra ajudar nós webmasters e também os anunciantes.

Acabou que coloquei formas de contato/anúncio para ajudar os anunciantes a não gastarem rios de dinheiro com intermediários e poderem anunciar DIRETAMENTE nos sites que desejarem. Vou até gastar um pouco com Adwords nessa parte.

Futuramente vou colocar pra avaliar hospedagens também.

Acaba que os sistemas de afiliados e as hospedagens também sairão ganhando pois saberão seus pontos fracos.

Se cadastra lá e ajuda a avaliar.

Abaixo, uma lista de alguns sistemas de afiliados cadastrados e links pras suas respectivas pontuações:

Pegando o endereço da URL atual em PHP

2011-02-24T10:26:00.002-04:00

Várias e várias vezes precisamos saber o caminho COMPLETO da url atual em PHP mas as variáveis globais não ajudam.
Seja para inserir em botões do twitter, facebook, etc.

As globais do PHP só informam após o domínio do site (www.qualquercoisa.com), o que muitas vezes não serve de nada para um botão do twitter por exemplo.

Pesquisei na net pra ver se já tinha algo pronto pra eu usar e nada. Só tinha gente gambiarrando com o SCRIPT_NAME , REQUEST_URI ou PHP_SELF que não valem de nada quando você precisa do endereço COMPLETO incluindo o 'http://' (protocolo) e o 'www.qualquercoisa.com' (domínio).

Eu precisava era de algo parecido com o this.location comum no javascript.

Daí resolvi fazer o que sei: gambiarrar também.

Saiu o código abaixo:

$proto = strtolower(preg_replace('/[^a-zA-Z]/','',$_SERVER['SERVER_PROTOCOL'])); //pegando só o que for letra 
$location = $proto.'://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];

echo $location;

Prontinho, espero ter ajudado. Comenta ae.

Botão Twitta Isso Fácil como Favorito no Firefox - sem plugin

2011-01-18T20:12:00.006-03:00

Ae povo. Tô de férias.

Eu tava cansado de querer mandar algo pro twitter e ter que usar complicação de plugins pra firefox ou ver a boa vontade do dono da página de colocar um botão "twite isto" fácil sem burocracia.

Tem alguns que chegam ao absurdo de te pedir até a senha!!! Sai fora.

E o pior é que muitos NÃO REDUZEM O URL!!

Daí resolvi deixar a preguiça de lado e fazer um rapidinho aqui com confirm de javascript e opção pra escrever algo e, principalmente, com redução automática do URL via bitly e topsy.

Não pede sua senha, não fica 2 horas carregando páginas intermediárias e ainda reduz a url.

É só arrastar o link abaixo para seus favoritos do Firefox:

Twitta Isso

Ou, se não der certo arrastando, você pode colocar o favorito manualmente:

Copia o seguinte código (ctrl + C): javascript:(function(){tx=document.title;do{tx=prompt('Digite o texto para aparecer antes do link.\r\nMáximo de 115 caracteres.',tx);if(tx&&tx.length<119){open('http://button.topsy.com/retweet?title='+escape(tx)+'&url='+escape(location));break}}while(tx&&confirm('Seu texto tem mais de 118 caracteres.\r\nNão vai caber.\r\nQuer corrigir?'))})();
Clica com o Botão direito na barra de favoritos e escolher a opção "adicionar novo favorito"
No nome você coloca: Twitta Isso
No Endereço você cola o código que copiou antes.

Prontinho.
Não testei em outros navegadores pra ver o que dá. Sou preguiçoso. Testa ae e me avisa nos comments.

Se quiser dar uma curiada no código é só embelezá-lo no jsbeautifier: http://jsbeautifier.org/
Se quiser, pode me agradecer ou xingar via twitter também hehe: twitter.com/micox

Pegando o 'Ontem' em PHP - 4 métodos

2010-08-26T10:40:00.004-04:00

Esta dica legal peguei do Ninedays blog.

Como calcular o dia de ontem em php. Com uma descrição de 4 formas diferentes pra você escolher a que mais te agrada.

Se você sabe outros métodos interessantes, contribua aí nos comentários.

Adaptando um pouco também dá pra trabalhar com o mês anterior, ano anterior, etc...

Bora:

Método 1 - mktime - O mais lento (até 450%)

echo date("Y-m-d", mktime(0, 0, 0, date("m"),date("d")-1,date("Y")));

Método 2 - subtraindo os minutos - O mais rápido

echo date("Y-m-d", time() - 86400);

Uma variação deste pra ficar mais "entendível" pra saber quantos minutos/horas subtraímos seria usando...

echo date("Y-m-d", time() - (60*60*24) ); //deve ficar um pouquinho mais lento que a forma original

Método 3 - strtotime() yesterday

echo date("Y-m-d", strtotime("yesterday"));

Método 4 - strtotime() -1 day

echo date("Y-m-d", strtotime("-1 day"));

Post rápido. É só isso... Se você sabe outros métodos interessantes, contribua aí nos comentários.

Introduçãozinha sobre Cache web e no servidor

2010-07-13T08:27:00.003-04:00

Um brodi perguntou estes dias sobre esquemas de cache pra deixar a página mais rápida.
Vou tentar explicar de forma resumida e rápida sobre cache em páginas web.
O termo cache designa o ato de guardar uma cópia de algo complexo ou lento para que se possa ter acesso mais rápido a este "algo complexo" futuramente. O cache web pode ser ativado em "várias frentes".
O cache que vou tratar aqui é o "cache web" de páginas web/http, ok? Nada a ver com cache em processador, e outras paradas.

Cache na Frente client

Quando você pede uma página web no seu navegador, ele a exibe, porém , além de exibir, pode ser que ele guarde ela (ou partes dela) "em cache" para caso você acesse ela novamente no futuro. Assim ele exibirá a página mais rápido pois partes dela (como imagens, scripts) estavam guardadas em seu cache interno e não precisaram ser pedidas novamente na rede.
No Firefox do Windows XP, o cache geralmente fica em Documents and Settings\nome_user\Configurações locais\Dados de aplicativos\Mozilla\Firefox\Profiles
Esta foi a "frente client" do cache (conhecido como "cache web") e ela pode ser exercida não só pelo navegador, mas por servidores proxy também, por exemplo.
Como implementar este cache web?
1) Através de meta tags no HTML (meta expires, cache-control, pragma)
2) OU headers enviados pelo script php/asp/jsp (também expires, cache-control, pragma)
3) OU header enviados diretamente pelo servidor web http (apache/IIS/etc) (novamente expires, cache-control, pragma).
Não vou detalhar cada um aqui pois não é o objetivo do post. Usa o google :P
Veja um detalhamento maior sobre cache web aqui, E aqui também (em inglês) Cache via header PHP

Cache na Frente server-side

Já a "frente server-side" atua no servidor web (cache server), pra ajudar o bixo a enviar a página pro navegador com maior rapidez.
Exemplo: Imagine que o navegador pede uma página que exibe uma lista de produtos e preços que está no banco de dados.
O coitado do servidor web terá que ligar o interpretador Php (ou asp ou outro), conectar com o banco de dados, fazer a consulta sql, aguardar o server sql processar a consulta, pegar os dados, formatar em html e só então devolver pro navegador.
Agora imagine que, além da lista de produtos, o server tenha que pegar também o menu do site no banco de dados, as últimas postagens, etc. Será um monte de consultas que deixarão o site lento pra caramba.
Agora imagine que o servidor é inteligente e, além de devolver o html pro navegador, ele também crie um arquivo com este html.
Assim, da próxima vez que algum navegador pedir a mesma página ele não precise fazer aquele monte de consultas sql e talz. É só mandar o arquivo html que estava salvo pro navegador.
Hahá! Seu server ficará aliviado e seu site mais rápido. Simples né?
Nem tanto hehe. Existem sistemas de cache server onde os caras guardam na memória RAM e não em arquivos pra ficar mais rápido ainda (MEMcached). Outros guardam só as consultas sql, outros guardam os arquivos em módulos (módulo menu, módulo option_cidades), etc.
Vai da sua imaginação e do seu sistema...
"Mas, sr mico, e se o conteúdo da página mudar?"
- Bem, é por isso que, nos dois casos citados acima existe o conceito de timeout. O programador HTML/PHP irá especificar um tempo em que o cache será válido.
"Mas, sr mico, no meu site/sistema o sistema de fornecedores cadastra produtos a todo minuto, um sistema de cache não ajudaria muito pois o timeout teria que ser muito pequeno"
- Se seu site tem muitos acessos por minuto, mesmo um cache com validade de 30seg seria de grande ajuda. Uma consulta sql consome muito tempo e processamento. O primeiro visitante destes 30seg iria esperar um pouco, mas o segundo e o terceiro iriam agradecer a velocidade.
Uma implementação simples de cache server em arquivos pode ser vista aqui.
Outras em ASP aqui, Outras em PHP aqui

Conclusão

Pra sites com muitos acessos, sistema de cache são uma puta salvação. E você ainda pode implementar os 2 sistemas de cache em conjunto.
Eu já economizei bastante em servidor web implementando sistemas de cache. Princpalmente em blogs com o plugin super cache do wordpress (e recentemente o db cache reloaded graças ao Janio).
Na época do Mwords, o cache dava uma salvada boa nas trocentas requisições por segundo que tinha.
Devem existir outras frentes, outros modelos, outras formas... Se você souber lembre este mico através dos comentários.

Dois ou mais domínios no mesmo Wordpress

2010-06-23T14:40:00.007-04:00

Opa, depois de anos sumido volto pra deixar guardado uma gambiarrazinha que tive que fazer para poder ter 2 domínios funcionando na mesma instalação do Wordpress. (testado só em wordpress antes do 3.0 )

"Ué, mico, mas não seria só fazer um redirecionamento?"
- Não, neste caso, o cliente quer que o site funcione tanto para www.nomecliente.com.br como para www.produtotal.com SEM MUDAR O ENDEREÇO no navegador, ou seja, sem redirecionamento.

"Mas por que diabos o cliente quer isso? Convence ele do contrário ué"
- O cliente quer isso para ele ficar bem no google na busca pelo produtotal e ainda assim ter seu site com nomecliente.com.br. O cliente tá certo.

"Ah, então não é só fazer um Rewrite no apache pra cuidar disso?"
- Não pois o Wordpress redireciona tudo para o domínio principal para o qual está configurado. Acessos e links. Eu quero mudar os links também.

Bora lá.

Primeira parte:

- Faça sua instalação normal de Wordpress e escolha um dos domínios para ser o padrão. Neste exemplo vou escolher o nomecliente.com.br . Configuro tudo normalzinho como se só existisse o domínio nomecliente.com.br

Segunda parte:

- Vou no arquivo wp-config.php e , depois da definição do DB_COLLATE e do WP_TEMP_DIR, eu coloco:

//hack pro lance de ter 2 dominios
if(strpos($_SERVER["HTTP_HOST"],'nomecliente')===false){
define('WP_HOME','http://www.produtotal.com');
define('WP_SITEURL','http://www.produtotal.com');
}

- O que fiz acima? Testei se o visitante veio digitando nomecliente.com.br . Se veio, o wordpress vai funcionar com o domínio normal que foi configurado na instalação, SENÃO, mudo as variáveis de domínio do wordpress.

Terceira parte:

Pro senhor Google não penalizar o site por CONTEÚDO DUPLICADO eu vou lá na edição do tema do site, no arquivo header.php, e coloco uma META TAG CANONICAL dizendo qual o domínio que deve ser indexado. Neste caso, prefiro que se indexe melhor o "produtotal" do que o "nomecliente".

<link rel="canonical" href="http://www.produtotal.com<?= $_SERVER["REQUEST_URI"] ?>" />

Prontinho. Fácil né? Será que tem alguma outra forma mais fácil e eu tô manezando?
Se eu falei alguma besteira, corrige ae. Dúvidas?

Efeito de digitação em texto com Javascript

2010-03-18T10:42:00.002-04:00

Saca aquele efeitinho em textos que parece que se está digitando? Uma letra aparecendo após a outra.

Pois é. Precisei disso no módulo Mchat do Mwords daí tive que fazer hehe.

- Antes de chamar a função o elemento que vai receber a digitação deve estar vazio (sem texto).
- O "50" que tem lá dentro do setTimeout indica a velocidade da digitação. Quanto menor, mais rápido.
- Implementei um callback (parâmetro cb) pra que você possa definir alguma ação quando a digitação terminar.

Bora:

digita = function(obj,text,callback){ 
 /* faz efeito de digitação no texto. By Micox - elmicox.blogspot.com */
 obj = obj.nodeName ? obj : document.getElementById(obj);
 var len=obj.innerHTML.length;
 if(len<text.length){
  obj.innerHTML = text.substring(0,len+1)
  setTimeout(function(){digita(obj,text,callback)},50);
  if(len==text.length-1 && callback){ callback();}
 }
}

Pra usar:
- obj é o objeto que vai sofrer a digitação. Pode passar a ID do elemento ou o Objeto direto mesmo.
- text é o texto que vai aparecer
- callback é uma função opcional que vai ser executada quando acabar a digitação.

Exemplo:

<div id='cont'></div>
<script>
digita('cont','Opa, sou um texto que está sendo digitado',function(){alert('acabou a digitação')});
</script>

Pegar Busca digitada por visitantes em motores de busca (google, yahoo, bing, etc) via javascript

2010-03-10T15:59:00.005-04:00

Opa, pra ficar guardado aqui no blog pra quando eu (ou alguém mais) precisar:

Uma funçãozinha rápida (que com certeza já existem outras na net) para ver qual foi a pesquisa digitada por um visitante que caiu em seu site feita em motores de busca comuns no Brasil (google, yahoo, bing, uol).

Pegar Busca digitada por visitantes em motores de busca (google, yahoo, bing, etc) via javascript

keyword = function(){
 var dr=document.referrer,q,fq,goo='';
 //se veio de uma busca google/yahoo/etc retorna qual a keyword
 if(dr.match(/ogle\.c|ahoo\.c|bing.c|usca.uol/i)){
  if((q=dr.indexOf('q='))>0){
   fq = dr.indexOf('&',q);
   goo = dr.substring(q+2,(fq>q?fq:dr.length));
  }
 }
 return goo;
}

Pra usar é só chamar a função "keyword":

var palavrachave = keyword();
if(palavrachave){
  alert("Olá visitante, bem vindo ao site tal. Você chegou até aqui procurando por " + palavrachave);
}

Ah, por hoje é só hehehe. Voltemos às brigas com o Mwords e Mchat.

Função Random (aleatório) que não se repete em Javascript - PseudoRandom

2009-12-11T13:58:00.003-03:00

Háaaaaa

Direto tem gente reclamando de funções random, que, muitas vezes não se parecem nada aleatórias.

Tipo hoje, o brodi chamado luis henrique (kakaroto) tava reclamando que o random dele, muitas vezes, repetia o valor que saiu no sorteio anterior.

Ora, a probabilidade do número se repetir em um sorteio é bastante pequena para uma grande faixa de números (tipo 0 a 100) porém é uma probabilidade MUITO alta em faixa pequena de números (tipo 0 a 5).

Ora, se é aleatório, é aleatório. Mesmo que o número já tenha saído da última vez ele tem a probabilidade de sair novamente hehee.

Mas, como muita gente não fica satisfeito com esta possibilidade, bora gambiarrar mais uma vez pra impedir um número de se repetir.

Se este é seu caso, divirta-se com o código javascript abaixo (que eu chamei de 'pseudo-random'):

function pseudoRand(size){
 //gerando o rand de zero a 'size - 1'
 var randa = Math.floor(Math.random() * size);
 //testando se o rand novo é igual ao antigo
 if(typeof(oldrand)!='undefined'){
  while(randa==oldrand){
   //se for igual, eu gero um novo
   randa = Math.floor(Math.random() * size);
  }
 }
 //guardando o ultimo rand em uma var global
 window['oldrand'] = randa;
 //retornando o rand atual
 return randa;
}

Uso

//vai alertar um random de 0 a 3 sem possibilidade de repetir o anterior
alert(pseudoRandom(4))

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.

Contornar vários bugs do IE numa tacada só

2008-01-08T08:28:00.000-03:00

Dean Edwards é o cara.
Pros poucos aqui que não conhecem o site dele, dêem uma visitada geral. Só coisa boa.

Bom, hoje vou me focar na biblioteca IE7 que ele soltou esse ano. Esta biblioteca, magicamente, contorna vários bugs do Internet Explorer e deixa os IE 5, 6 e 7 bem parecidos com o IE8 (ou com o IE 7, você escolhe).

Como assim?

Bem, veja só a descrição:

IE7 is a JavaScript library to make MSIE behave like a standards-compliant browser. It fixes many CSS issues and makes transparent PNG work correctly under IE5 and IE6.

supports the following CSS selectors:
- parent > child
- adjacent + sibling
- adjacent ~ sibling
- [attr], [attr="value"], [attr~="value"] etc
- .multiple.classes (fixes bug)
- :hover, :active, :focus (for all elements)
- :first-child, :last-child, only-child, nth-child, nth-last-child
- :check, :disabled, :enabled
- :empty, :contains(), :not()
- :before/:after/content:
- :lang()
supports imported style sheets
preserves the cascade of the style sheet
does not alter the document structure
does not repeatedly query the DOM tree using JavaScript
uses pure CSS to enforce style sheet rules
supports the W3C box model in both standards and quirks mode
supports fixed positioning (flicker free)
supports overflow:visible
supports min/max-width/height
fixes broken (X)HTML elements (abbr, object)
standardised forms behavior
supports PNG alpha transparency
lightweight script (11KB)
works for Microsoft Internet Explorer 5+ (Windows only)

Tudo isso apenas adicionando o seguinte script no seu XHTML:

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/xx.x/IE8.js" type="text/javascript"></script>

<![endif]-->

Pronto, agora é só usar nos seus novos sites e reduzir a queda de cabelo por causa do IE.
Mas antes, dê uma passadinha lá nos site do projeto, da atualização 2.0 e do google code onde está hospedado e veja as formas corretas de usar.
Depois diga aqui suas experiências (boas ou ruins) com o script :) .

ajaxPost - submeter formulários via Post facilmente

2007-12-28T08:16:00.001-03:00

Ae cidadãos e cidadoas,
Sei que ninguém vai ler essa parada hoje, mas ~~Feliz Natal~~ (atrazado, agora já era) e próspero ano novo. Pois é...
Bom, lembram-se quando eu fiz a velha e boa função pra ajax simples ajaxGet? Pois é...
Lembram-se que o malandro aqui prometeu fazer uma versão pra submeter formulários via 'Post' também? Pois é...
Passados mil anos, o atoa aqui ainda não fez. Mas teve uma boa alma, amigo da criançada, membro do Webly que fez: o Cráudio, ops Klawdyo.
A parada ficou beleza. Ainda não testei 100% pois resolvi usar este ânimo pra fazer logo uma nova função pra ajax ultra-simples.
Então quem quiser submeter formulários via post através de ajax já sabe: usem a ajaxPost do José Cláudio e do Micox. :)
Em breve uma nova função fácil pra ajax englobando submissão simples, de formulários, função de callback (retorno), etc, etc.
I'll be back!

Animação para div aparecer gradativamente (alterando dimensões)

2007-12-14T09:05:00.001-03:00

Hopa.

Que tal ao invés de usar simplesmente o velho "display: block" pra deixar determinada div visível, usar uma animaçãozinha pra dar um efeito especial melhor no seu site.

Veja aqui um exemplo.

Este tipo de coisa está disponível em todo framework javascript que se preze. Mas se você não tá afim de mexer com frameworks, é só adicionar a função abaixo na sua biblioteca:

function aparece(quem,speed){
    //Aparece o 'quem' gradativamente na velocidade especificada em speed (high, normal, slow)
    //by Micox - http://www.elmicox.com/2007/animacao-para-div-aparecer-gradativamente/
    
    if(typeof(quem)=='string'){
        quem = document.getElementById(quem);
    }
    if(typeof(window['micoxApareceGradativamente'+quem.id])!='undefined'){ 
        //esta animação já está em execucao, saio
        return true
    }
     var sty = quem.style;
     sty.visibility = 'hidden'
     var pos_init = sty.position;
     sty.position = 'absolute';
     if(sty.display=='none'){ sty.display = 'block' }
     var alt_init = parseInt(quem.offsetHeight);
     var lar_init = parseInt(quem.offsetWidth);
     var over_ini = sty.overflow;
     sty.overflow = 'hidden';
     sty.visibility = 'visible';    
     sty.height = '0px';
     sty.width = '0px';
    
     if(typeof(quem.timeAparece)!='undefined'){
         clearInterval(quem.timeAparece);
     }
     quem.timeAparece=null;
    
     var loop = function(){
         var alt_atu = parseInt(sty.height);
         var lar_atu = parseInt(sty.width);
         if(alt_atu < alt_init){
             sty.height = (alt_atu + 5) + 'px';
         }
         if(lar_atu < lar_init){
             sty.width = (lar_atu + 25) + 'px';
         }
         if(alt_atu == 0 ){
             sty.position = pos_init;
         }
         if(alt_atu >= alt_init && lar_atu >= lar_init){
             //acabou
             clearInterval(quem.timeAparece);
             delete window['micoxApareceGradativamente'+quem.id];
             sty.height = (alt_init) + 'px';
             sty.width = (lar_init) + 'px';
             sty.overflow = over_ini;
         }
     }
     switch(speed){
         case 'high': speed = 1; break;
         case 'normal': speed = 20; break;
         case 'slow': speed = 40; break;
         default: speed = 10;
     }
     window['micoxApareceGradativamente'+quem.id] = true;
     quem.timeAparece = setInterval(loop,speed);
}

Exemplo de uso (passando o ID):

<span onclick='aparece("apa","slow")'>clica</span>
<div id='apa' style='display: none; border: 1px solid black;'>asdfçlaksdfçl alsjdfçlajsdçlfjaçsldjfçlajsdçflj açlsdfjksd
asdfaslçkdfjçlaj<br />aç jdfljaçsldjkfçlaskjd f<br />lça jçdfljaçsdl fjkçalsjdf çlkajsçdlf</div>

Ou passando a referencia do elemento:

<span onclick='aparece(document.getElementById("apa"),"slow")'>clica</span>
<div id='apa' style='display: none; border: 1px solid black;'>asdfçlaksdfçl alsjdfçlajsdçlfjaçsldjfçlajsdçflj açlsdfjksd
asdfaslçkdfjçlaj<br />aç jdfljaçsldjkfçlaskjd f<br />lça jçdfljaçsdl fjkçalsjdf çlkajsçdlf</div>

Webly dando pendrive

2007-11-28T09:14:00.000-03:00

Hoeeepá, tempo corrido, post curto.

Divulgando aqui no elmicox uma parceria do Webly com a loja Empório Lobo onde nós vamos começar a oferecer brindes aos nossos membros, usuários (membros ou usuários? os dois soam tão feios e com duplo sentido heheh).

Seguinte: a primeira promoção já tá no ar.
Os 3 caras que mais postarem tutoriais de qualidade vão concorrer para ganhar um pendrive 2G da kingston (patrocinado pela Empório Lobo claro).
Quem chegar mais próximo da última dezena sorteada da mega-sena leva o pen.
O primeiro lugar terá uma vantagem lógico.

Este tipo de promoção não é boa não só para o usuário (ou membro?) e não é só boa para o Webly. É bom geralzão pois vamos (pretendemos) ter um novo estoque gigantesco de tutoriais, ajudando o mundo a ser um lugar mais feliz (óoo)!!!

Vão lá malucos, ajudem o mundo a ser mais azul e ainda ganhem um pendrive heheheh.
Se você é preguiçoso e não quer postar tutoriais, pelo menos ajude a divulgar a notícia.

Té.

Evento body onReady sem o uso de libs (DOM)

2007-11-14T14:18:00.002-03:00

Aberta novamente a temporada de postagens heheh.
Um serviço que eu estava fazendo maneirou e acho que posso voltar a ser mais periódico aqui no blog.

Bora lá com o on ready. Leia até o final :)

Bom, grande parte da malandragem que lê este blog usa frameworks e, portanto, devem conhecer as facilidades de uma função/evento on ready. Quem não conhece, vai achar esta postagem muito útil.

Perceba que não estou falando do onreadystate do AJAX nem do onready de iframes e afins, mas de onready no javascript. Continue lendo que entenderá.

Vou copiar aqui algumas descrições do que é o 'on Ready' pra não ter que ficar definindo tudo novamente:

[...] Ready é semelhante ao onload do body, porém ele não espera carregar imagens e objects, ou seja, assim que estiver carregado todo o HTML ela é executada! Muito útil! [...] - jQuery Introdução - Felipe Diesel

[...]onReady é um método automaticamente chamado quando o DOM estiver completamente carregado, garantindo que todos os elementos referenciados na sua aplicação estarão disponíveis quando o script rodar. [...] ( Introdução à bibliteca EXTjs - Fábio Vedovelli )

Nós usamos constantemente o 'window.onload' ou o 'body.onload' pra dizer que devemos iniciar a execução do nosso script. Porém, o evento onload espera tooooooda a tonelada de imagens/objetos/etc serem carregados antes de ser disparado.
Carambola, na imensa maioria das vezes nós precisamos apenas que os elementos HTML estejam carregados. É isso que o on ready faz! Que legal, dãã!

Em muitas bibliotecas este evento já está incluso (EXTjs e jQuery por exemplo), porém quem não usa bibliotecas ou cujas bibliotecas não tem o onready ficam a ver navios.
Tadáaaa: o Mico tem a solução!

"Chega de papo mico, você nunca foi de papo. Mostra logo um exemplo e o maldito script pra onload pra quem não usa bibliotecas."

<script>
//vai funcionar rapidão pois não precisa esperar a imagem, só o carregamento do HTML
bodyOnReady(function(){
 alert('bodyOnReady ' + document.getElementById('teste').innerHTML)
})

//vai funcionar beleza, mas só depois que tooodos os elementos forem carregados
window.onload = function(){
 alert('onload ' + document.getElementById('teste').innerHTML)
}

//vai dar erro pois o elemento 'teste' ainda não foi criado
 alert('alert simples ' + document.getElementById('teste').innerHTML)
 
</script>
<body>
<img src='http://img119.imageshack.us/img119/4050/no20matinhoue1.jpg' alt='imagem (relativamente) grande' />
<div id='teste'>conteúdo da div</div>
</body>

Entenderam a parada aí? Pois é.

"Mas cadê a função bodyOnReady Mico? A parada aí não funcionou pois tá faltando a função bodyOnReady" - Calma, está abaixo. É só adicioná-la em seu script e usar conforme a sintaxe passada no exemplo acima.

function bodyOnReady(func){
 //call the function 'func' when DOM loaded
 //Version 3.0 - 15/10/2008 - based on Jquery bindReady
 //by Micox - www.elmicox.com - elmicox.blogspot.com - webly.com.br
 //http://www.elmicox.com/2007/evento-body-onready-sem-o-uso-de-libs/

    //flag global para indicar que já rodou e function que roda realmente
    done = false
    init = function(){ if(!done) { done=true; func() } }
    var d=document; //apelido para o document
    //pra quem tem o DOMContent (FF)
    if(document.addEventListener){ d.addEventListener("DOMContentLoaded", init, false );}
    
    if( /msie/i.test( navigator.userAgent ) ){ //IE
        (function () {
            try { // throws errors until after ondocumentready                
                d.documentElement.doScroll("left");
            } catch (e) {
                setTimeout(arguments.callee, 10); return;
            }
            // no errors, fire
            init();
        })();
    }
    if ( window.opera ){
        d.addEventListener( "DOMContentLoaded", function () {
            if (done) return;
            //no opera, os estilos só são habilitados no fim do DOMready
            for (var i = 0; i < d.styleSheets.length; i++){
                if (d.styleSheets[i].disabled)
                    setTimeout( arguments.callee, 10 ); return;
            }
            // fire
            init();
        }, false);
    }
    if (/webkit/i.test( navigator.userAgent )){ //safari's
        if(done) return;
        //testando o readyState igual a loaded ou complete
        if ( /loaded|complete/i.test(d.readyState)===false ) {
            setTimeout( arguments.callee, 10 );    return;
        }
        init();
    }
    //se nada funfou eu mando a velha window.onload lenta mesmo
    if(!done) window.onload = init
}

Várias tentativas de fazer o onready também estão disponíveis na net se quiserem testar. Esta aqui é só a minha versão (meio gambiarra pra variar).

Só testei no IE6, FF2 e OP9 e em poucas situações. Em caso de bug, não esqueçam de me avisar. Em caso de melhorias, manda ae.

Quebra pau de linguagens. Qual / Quem é o melhor?

2007-10-25T08:10:00.001-03:00

Planejamos um desafio muito 'matcho' lá no Webly que tá pegando fogo:

1º Quebra pau de linguagens!!

"O programador deverá mostrar toda sua perícia, técnica, raciocínio lógico, pog habilities, QI, KI, cosmo energia, conhecimento e habilidades com sua linguagem favorita. Deverá mostrar aos outros que sua linguagem favorita é a que 'rules', as outras são lixo, verme insolente"

No desafio, o cara escolhe a(s) linguagen(s) que quiser e tem que montar um esquema de campeonato a partir das oitavas de final. Ganha quem fizer com menos caracteres.

Eu tô brincando lá com javascript, mas a parada tá difícil. Apesar de todas as POG tecniques que usei os malucos lá tão beirando os 250 caracteres em outras linguagens. Coisa que só o Quevedo poderá explicar.

Aliás, tem maluco de javascript que tá beirando os 300 caracteres também, enquanto eu ainda tô beirando os 350. Como já disseram lá, o cara deve tá programando em javaspirit e não javascript.

Então vai lá soltar seu kame-hame-há. Só toma cuidado pra não feder muito. Vamo ver se você é bão mermo. Queima a cuca.

Iframe com altura automática de acordo com o conteúdo

2007-09-26T15:26:00.001-04:00

Opa. Post rápido com código pequeno: Auto-dimensionamento de iframe

Editado por causa de um bug no IE.

Script rápido que muita gente procura e fica brigando com códigos gigantescos.
Atenção: só funciona para iframes do mesmo domínio. De outro domínio dá erro de segurança.


<script type='text/javascript'>
function iframeAutoHeight(quem){
    //by Micox - elmicox.blogspot.com - elmicox.com - webly.com.br  
    if(navigator.appName.indexOf("Internet Explorer")>-1){ //ie sucks
        var func_temp = function(){
            var val_temp = quem.contentWindow.document.body.scrollHeight + 15
            quem.style.height = val_temp + "px";
        }
        setTimeout(function() { func_temp() },100) //ie sucks
    }else{
        var val = quem.contentWindow.document.body.parentNode.offsetHeight + 15
        quem.style.height= val + "px";
    }    
}
</script>

uso no onload do iframe:


<iframe id='ha' src='teste.php' onload='iframeAutoHeight(this)' frameborder='0'></iframe>

Simulando position fixed no Internet Explorer (IE) - sem javascript

2007-09-25T10:16:00.002-04:00

Bom, todo mundo sabe que a propriedade position igual a fixed faz com que o elemento fique fixo na janela do browser independente da movimentação da barra de rolagem.

Isto é uma verdade pra navegadores que seguem bem os padrões (OP, FF,etc) mas para o IE (Internet Explorer até o 7) isto não funciona. Simplesmente não funciona.

Como resolver isto SEM JAVASCRIPT só no CSS?

Primeiramente imagine duas divs dentro de um documento:

- Uma das divs tem dimensões de 400x400, tem um texto gigantesco como conteúdo, porém seu overflow é scroll, o que permite que seja possível ler o conteúdo gigantesco.

- A outra div é uma pequena imagem de 25x25 que está posicionada exatamente sobre a div do conteúdo anterior.

...

Bom, se eu mexer a barra de rolagem da div do conteúdo não irá interferir em nada na movimentação da div que tem a imagem. A imagem continuará quieta sobre o texto.

Bingo!! Agora é só aumentar o tamanho da div com conteúdo pra ocupar a janela inteira.

Pra você não ter que quebrar a cabeça eu já deixei o código prontim só pra você inserir no seu documento (e fazer adaptações se achar necessário).

O Exemplo: Simulando position fixed no Internet Explorer - IE

O código pronto

<style type="text/css">
 /* FAZ OS POSITION FIXED NOS NAVEGADORES PADRÃO (não mexa) */
 .fixed { position: fixed !important; }
</style>
<!--[if lt IE 7]>
 <style type="text/css">
  /* FAZ O POSITION FIXED PARA O IE (não mexa).
   Para funcionar o DTD do documento deve estar correto. E não ser quirksMode
   By Micox - micoxjcg@yahoo.com.br - elmicox.com - elmicox.blogspot.com
   */
  .fixed { position: absolute !important; }
  body { height: 100% !important; width: 100% !important; 
      margin: 0 !important; position: relative;  }
  html { overflow-y: hidden !important;  }
  #newbody { position: relative !important; overflow-y: scroll !important; 
       height: 100% !important; width: 100% !important; margin: 0 !important; }
 </style>
<![endif]-->

<style type="text/css">
 /* COLOQUE AQUI O RESTANTE DAS ESTILIZAÇÕES QUE NÃO TENHAM A VER COM POSITION FIXED
    MAS NÃO DECLARE MARGINS, PADDINGS, POSITIONS, DIMENSÕES OU OVERFLOWS PARA HTML, BODY E NEWBODY
 */
 
</style>

Detalhes:

Da mesma forma que está no exemplo, deverá haver um elemento pai chamado newbody que conterá todo o conteúdo não-fixed e, fora deste, deverão estar todos os elementos que desejar que sejam fixed. Olha o exemplo lá que vai entender.

A página não pode ser renderizada no quirks mode, ou seja, deve estar com o document type definition (DTD) correto;

Pode dar boró se alterar margin, padding, posições, dimensões ou overflows para os elementos HTML, body e newbody.

Perceba que não é aproveitamento de bug do IE. É apenas uma técnica que também funcionaria em outros navegadores se fosse necessário usar.

Muitos gringos já falaram sobre a técnica, mas aqui no Brasol parece que ninguém falou ainda. Estranho...:

Comenta aí malucada. Ninguém comenta mais :(

Publicado também no elmicox.com

Poste um tutorial e ganhe em real

2007-09-21T16:05:00.001-04:00

Bem, não é bem assim não. Na verdade você vai ganhar em dólar hahuehau.

É que o Webly / iEvolution tá com um esquema novo aí pra incentivar os postadores/geradores/tradutores de tutorial:

Ganhe dinheiro postando seus tutoriais no Webly, através do seu Google Adsense.

Além de aparecer na home do portal ao ser um top colunista (e ter seu site linkado sem rel-nofollow), você também poderá, a partir de agora, INSERIR SEU CODIGO ADSENSE nos tutoriais que postar no Webly.

Assim, cada pessoa que acessar e ler seu tutorial poderá clicar em SEU ANÚNCIO, gerando ganhos em sua própria conta do adsense - sem intermediários.

Se seu blog tem pouca visitação e você achou que nunca daria pra ganhar uma grana, chegou agora a chance de tentar.

Eu por exemplo, ganhei menos que $50 no adsense aqui no El Micox, por isso nunca cheguei nem a receber. Agora vou ver se, com as visitações do Webly, eu consigo tirar uma graninha a mais.

Se seu blog tem uma visitação boa e bons rendimentos, não custa nada dar uma melhorada né?

Bom, dá uma olhada no anúncio lá e veja se te agrada.

E VAMO POSTAR TUTORIAIS!!! Eu contribuo, tu contribues, ele(a) contribue.

Micox now on Twitter

2007-09-21T10:40:00.001-04:00

Olá povo,

Depois de ler um pouco sobre o twitter, decidi embarcar na parada também e tô gostando pra caramba. É uma espécie de micro-blog (como já definiram por aí).

Motivos:

Sem burocracia - como se tem ao escrever um post de blog
Você viu um link/ tutorial legal? Vai lá e posta
Tá querendo matar o lula? vai la e posta
Fez uma nova postagem no seu blog? vai lá e posta
Teve uma idéia genial? vai lá e posta

O Webly/iEvolution também entrou na parada postando suas novidades.
A marcinha deu os começo, depois fez o meu, depois fez o do webly e o pessoal seguiu...

Dando uma passeada por lá você não fica muito afim de entrar não, mas é só começar a micro-postar pra ver.

Acho que é o sentido real de Web-log afinal, atualmente, todos os (we)blogs tão virando opinologs ou tutologs ou noticiologs, à excessão dos miguxos.

Ah, detalhe. No meu serviço tenho que acessar o Twitter via netvibes, então quem puder me passar o RSS do seu twitter aí pra eu acompanhar...

Link desta postagem no elmicox.com: Micox now on Twitter

Editar CSS no IE e FF simultaneamente com CSSVista

2007-09-21T08:45:00.001-04:00

Hopa.

Que tal editar simultaneamente o CSS no Firefox e no Internet Explorer?
Pode ser uma boa.

Então experimenta o CSSVista aí e me diz o que achou.

Link no novo elmicox.com: Editar CSS no IE e FF simultaneamente com CSSVista

Mercado fechado: idéia de gênio

2007-09-19T15:07:00.000-04:00

Pergunte-se: qual um dos maiores problemas de fazer uma compra no Mercado Livre atualmente?
Você não conhece o vendedor e não tem confiança nele.

Você confia em seus amigos? Sim? Ummm, então que tal comprar e vender coisas apenas através de seus amigos? Como um orkut para vendas e compras? Idéia de gênio.

Esta é a proposta do site que eu acabei de descobrir graças ao Rafael: o Mercado Fechado.

De acordo com a descrição do próprio site:

O MercadoFechado é um serviço on-line totalmente gratuito que tem como objetivo ser um portal para anúncios entre amigos.

Com certeza você já perguntou para algum amigo se ele conhecia alguma pessoa interessada em seu carro. Ou ainda se conhecia alguém que gostaria de vender um violão já que você estava aprendendo a tocar. O MercadoFechado é para isto!

Nossa idéia é proporcionar o encontro de interesses. Amigos que compram encontram amigos que vendem, e vice-versa.

Nele você pode ainda configurar se também quer ver os anúncios dos amigos dos seus amigos, pode dizer o que quer comprar (pra fazerem um mini-leilão) e outras coisas que não fuçei muito.

Este não é um post patrocinado ou nada do tipo. É apenas um post "invejoso": por que eu não tive esta idéia antes? hhahaha

Acabei de receber o email do convite e decidi postar imediatamente.
A base de usuários ainda está baixa pelo que eu ví, mas deve crescer bastante.

[edit]Ah sim, como o Jader bem lembrou no comment abaixo, meu perfil lá é este aqui.[/edit]

Eu acho que essa parada aí tem futuro. Parabéns pra quem teve a idéia e implantou.

geraOptions - populando selects com praticidade - PHP

2007-09-19T10:14:00.000-04:00

Hoeeepáa

Bom, sabe toooda aquela burocracia que agente faz tooooda vez que vai gerar um select-option via PHP?

Pois é, vai parecer óbvio pra maioria dos meus leitores, mas pode ser de ajuda pra alguns: que tal reduzir esta complexidade em apenas uma funçãozinha simples pra chamar rapidamente e não ter que ficar se preocupando com executar a SQL, fazer o while do recordset, fazer o IF pra ver qual option vai ter o selected, etc??

Acredite: isto facilita pra caramba. Reduz a complexidade e o tamanho do código.

A função que gera os options. Guarde em sua biblioteca de funções:

function geraOptions($sql,$campo_valor,$campo_label,$valor_selecionado,$tabs='    '){
//by Nairon JCG - Micox - elmicox.blogspot.com - micoxjcg@yahoo.com.br - 12/01/07

    $reca = mysql_query($sql);
    $opts = "\r\n";
    if($reca){
        while($row = mysql_fetch_assoc($reca)){
        if($row[$campo_valor]==$valor_selecionado){
        $selected = "selected='selected'";
        }else{
        $selected = "";
        }
            $opts .= $tabs."    <option value='".$row[$campo_valor]."' $selected>".$row[$campo_label]."</option>\r\n";
        }
    }
    return $opts;
}

$sql - é a sql pra gerar os options
$campo_valor - o campo na sua tabela do BD que irá doar os valores para os VALUES dos options.
$campo_label - o campo na sua tabela do BD que irá doar os valores para os TEXTOS dos options.
$valor_selecionado - Se tal option tiver o value igual ao $valor_selectionado, ele ficará com selected=selected
$tabs - pra deixar seu código fonte que será gerado mais bonitim...

Exemplo de uso:

echo "<select id='estado' name='estado'>";
    echo geraOptions('SELECT * FROM estados','id_estado','nome_estado',$cod_estado_cliente,'    ');
echo "</select>";

Dúvidas?

PS.:Esta é mais uma funçãozinha que eu tinha feito e esquecido de postar. Como este blog é minha 'guardadora' de funções pessoais, esta não podia ficar de fora né? hehe

PS.2: Esta é a penúltima postagem antes de ir embora para o elmicox.com.

Ativando options disabled no IE

2007-09-19T09:27:00.000-04:00

Ops, uma funçãozinha que eu tinha feito a tempos mas tinha esquecido de postar aqui heheh. Só tinha postado no Webly.

Se você colocar um atributo "disabled" em um option ele deverá ficar desabilitado, ou seja, indisponível. Exemplo:

<select>
    <option>opt 1</option>
    <option disabled='disabled'>opt 2</option>
    <option>opt 3</option>
</select>

Isto acontece bem nos navegadores padrão.
No nosso velho amigo IE (Internet Explorer) não acontece. Teste e veja.

Inspirado pela dúvida do nosso amigo Rafael, fui atrás do problema e não achei solução a não ser fazer uma função pra fazer o serviço completo.
Está abaixo:

<!--[if lte IE 7]>
<script>
function ativaOptionsDisabled(){
    var sels = document.getElementsByTagName('select');
    for(var i=0; i < sels.length; i++){
        sels[i].onchange= function(){ //pra se mudar pro desabilitado
            if(this.options[this.selectedIndex].disabled){
                if(this.options.length<=1){
                    this.selectedIndex = -1;
                }else if(this.selectedIndex < this.options.length - 1){
                    this.selectedIndex++;
                }else{
                    this.selectedIndex--;
                }
            }
        }
        if(sels[i].options[sels[i].selectedIndex].disabled){
            //se o selecionado atual é desabilitado chamo o onchange
            sels[i].onchange();
        }    
        for(var j=0; j < sels[i].options.length; j++){ //colocando o estilo
            if(sels[i].options[j].disabled){
                sels[i].options[j].style.color = '#CCC';
            }
        }
    }
}
window.attachEvent("onload", ativaOptionsDisabled)
</script>
<![endif]-->

Pronto! :)
Obs.: Esta Esta função substitui algum outro evento ONCHANGE que tenha sido colocado antes pra algum option.
Obs.2: Esta é a ante-penúltima postage do elmicox.blogspot antes de migrar pro elmicox.com.

Code contest: Mega Sena acumulada

2007-09-06T08:50:00.000-04:00

Vindo do blog do Bermon (que provavelmente vai ser o vencedor), eu tinha que dar uma contribuição JavaScript para o desafio do Macaco chefe né? (Por favor, sem piadinhas. Ele não é chefe do mico hehehehh)

Mesmo sabendo que não ia nem chegar perto dos vencedores, não podia deixar o Javascript de fora da brincadeira hehe.

O desafio:

"Escrever em qualquer linguagem de programação um programa que realize 100.000 sorteios de um numero entre 1 e 60 e mostre na tela os 6 mais freqüentes.
Ganha quem fizer o programa com o menor numero de linhas possíveis, lembrando que a linha considerada é a linha da unidade léxica da linguagem, portanto a seguinte linha em Java seria considerada duas: int i =0; sysout(i); "

Os malucos do Ruby conseguiram fazer em 1 linha (incluindo o bermon nos 'malucos').
Com javascript eu tentei de várias formas porém eu só consegui fazer com 2 linhas:

for(var i,ra=new Array(),j=0 ; j<10000 ; j++,i=Math.round(59*Math.random())+1,ra[i]= (typeof(ra[i])=='undefined') ? ra[i]=i+" "+1  :  ra[i]=i+' '+(parseInt(ra[i].split(' ')[1]) + 1)) {  }
document.write(ra.sort(function(a,b){return b.split(' ')[1] - a.split(' ')[1]}).slice(0,6).join(' vez(es)\n<br />'));

Se não valer assim, aumento um pouquinho (também é bom pra verem melhor o que foi feito).

for(var i,ra=new Array(),j=0 ; j<10000 ; j++, i = Math.round(59*Math.random())+1)
    ra[i] = (typeof(ra[i])=='undefined') ? ra[i]=i+" "+1  :  ra[i]=i+' '+(parseInt(ra[i].split(' ')[1]) + 1);
document.write(ra.sort(function(a,b){return b.split(' ')[1] - a.split(' ')[1]}).slice(0,6).join(' vez(es)\n<br />'));

Caso não seja aceito da maneira acima, há também uma forma mais extendida que ficaria com 6 linhas (esta já está beeeem mais entendível pra qualquer um, caso queiram explicações é só perguntar).

var ra = new Array();
for(j=0;j<10000;j++){
 i = Math.round(59*Math.random())+1;
 ra[i] = (typeof(ra[i])=='undefined') ? ra[i]=i+" "+1  :  ra[i]=i+' '+(parseInt(ra[i].split(' ')[1]) + 1);
}
document.write(ra.sort(function(a,b){return b.split(' ')[1] - a.split(' ')[1]}).slice(0,6).join(' vez(es)\n<br />'));

Agora é pra todo mundo entender.

var ra = new Array(); //declaro o array
for(j=0;j<10000;j++){ //loop 10000 vezes
 i = Math.round(59*Math.random())+1; //faço o sorteio de 1 até 60 e jogo no 'i'
 //abaixo vou incrementar quem foi o índice do array sorteado
 //devido a deficiências de pegar o indice de um array em javascript
 //vou ter que guardar o índice no primeiro caractere pra splitar depois
 if(typeof(ra[i])=='undefined'){ 
  ra[i]=i+" "+1; //se ra[i] ainda não existir crio ele
 
 }else{ //se já existir, incremento ele 
  ra[i]=i+' '+(parseInt(ra[i].split(' ')[1]) + 1);
 }
}
//faço a ordenação de acordo com uma função específica 
//que pega só o que tem depois do espaço
ra.sort(function(a,b){return b.split(' ')[1] - a.split(' ')[1]})
//dou um slice pra pegar os 6 primeiros e uno eles com o join.
//jogo o resultado na tela
document.write(ra.slice(0,6).join(' vez(es)\n<br />'));

hehe, Engraçado. Viram como um código de 11 linhas pode virar só 2? hehe
Será que alguém consegue fazer com menos linhas aí no javascript? Bora ae, cai pra dentro. heheheahe

PS.: O engraçado é que ontem eu só consegui chegar a 7 linhas. Hoje que vieram umas inspirações heheh.

PS.2.: Este ainda não é o último post do elmicox.blogspot antes de migrar para o elmicox.com. Vocês não precisam mudar seus feeds. Eu vou alterar pelo feedburner.

Eu estou vivo! vivoo!!!

2007-08-29T16:26:00.000-04:00

Olá pessoal.

Bom, como os foristas já perceberam, eu já estou de volta das minhas férias.

A caixa de emails está lotada, comentários do elmicox estão cheios esperando 'mim' ler e os 'pessoal' que eu faço freela devem estar querendo me matar.

Este post de agora é só um postzinho de aviso. É que na minha residência nova ainda estou sem telefone (e sem internet).

Em breve, farei um post de verdade que 'incrusive' será o último do elmicox.blogspot. A partir daí já irei para o elmicox.com que ganhei do Ademir. Já estava passando da hora.

Vou ver se faço um scriptão bem útil pra abrir lá com chave de ouro.

Enquanto isso vou me complicando aqui com os emails pra responder, serviços pra finalizar, memes pra fazer, etc.

Té logo povo. Obrigado por não terem abandonado a assinatura do elmicox mesmo eu tendo ficado tanto tempo sem postar heheh.

Atenção com a tag button

2007-07-23T22:51:00.000-04:00

Todos sabem que eu curto muito a tag button em detrimento de input-type-submit ou input-type-button.
Afinal, a tag input é usada pra um pá de outras coisas enquanto a button é só button e pronto (além de ainda aceitar HTML dentro dela).
Com a button fica muito mais fácil estilizar, 'scriptar', pá e talz.

Mas hoje, durante o dia, passei por um estranho bug que eu não sabia o que era no site que tô finalizando. Agora à noite mim descobrir qual ser o problema: Pra tag button, ao submeter um formulário, o IE manda como value da tag button o que está dentro dela e não o que está no atributo value.

Um código vale mais que 10 palavras:

<form action='' method='get'>
    <button type='submit' name='teste' value='FF e OF vao enviar este value'>O IE vai enviar este value</button>
</form>

Apesar disto, continuo preferindo o button.

Hou, o rapaz aqui vai entrar de recesso e só volta daqui a um mês. Então, não me xaropem com dúvidas no email não ok? Manda lá pros doido do fórum ou então espera 'mim' voltar.

Tchau

Micox no Top 6 do Smashing Magazine em Javascript

2007-07-10T08:37:00.000-04:00

Aeeee hehehe
Ego moment novamente.

Graças ao ilustríssimo senhor Canha, eu fiquei sabendo que tive na lista dos melhores de maio/junho de 2007 do Smashing Magazine.

Olha só que beleza, já imaginou que honra? heheh Fiquei muito feliz.

Mesmo meu script de upload assíncrono precisando de correções para funfar no Safari, o negócio fez sucesso. É por isso que eu digo e repito: bloguem códigos em inglês também. A gringaiada prestigia mermo.

Inclusive tô recebendo a ajuda de um gringo (Jakob Dam Jensen) pra adaptar meu script de upload para o jquery. Vamo ver o que dá.

Ah, desculpem o sumiço ("sumida grande" não), é que o serviço tá brabo. Ainda não terminei a loja virtual em 3 línguas que tô brigando. Sou enrolado e lento demais, por isso vou me aposentar dessa parada de desenvolvimento.

Ou, quem puder aí, ajuda a divulgar o Dia C!

Valeus malucaiada. Té mais.

Dia C! O iEvolution agora é Webly

2007-07-10T08:09:00.000-04:00

Opa,

Finalmente chegou o tal Dia C anunciado aqui no ElMicox e em outros blogs também.

O fórum ao qual me dedico e vivo torrando a paciência de vocês para se cadastrarem lá agora evoluiu de iEvolution para Webly.

Eu torro a paciência de vocês gratuitamente? Não! É porque o negócio é bom mesmo. É um fórum diferente, é um fórum mais humano agora. Grande parte do que eu sei ou desenvolvo, devo a idéias postadas em fóruns. Esta é minha grande inspiração.

Qualquer cidadão pode ajudar lá: seja respondendo, perguntando ou postando tutoriais.
Ah, o processo pra postar tutoriais no portal do Webly é facílimo, basta postar no fórum.

Assim, além de contribuir divulgando conhecimento para o universo, você ainda pode ter sua página linkada na página do portal Webly caso esteja entre os Top colaboradores. E o link não tem rel='nofollow' hehehe

Além da mudança da marca, vários tutoriais EXCLUSIVOS foram postados lá pela nossa equipe.

Cadastre-se no Webly carambola! Mas não basta se cadastrar, tem que participar.

Ver código fonte digitando um endereço na barra

2007-07-04T08:04:00.000-04:00

Ae, povo sumido (que não comenta mais heheh).

Achei uma parada interessante (novamente no anieto2k pra variar) que te permite ver o código fonte de uma página digitando uma porrada de doidura na barra de endereços.

Não sei se pode ser útil algum dia, mas que é interessante é. heheh

O código é este pequeno aqui:

javascript:var%20sourceWindow%3Dwindow.open%28%27about%3Ablank%27%29%3B%0Avar%20newDoc%3DsourceWindow.document%3B%0AnewDoc.open%28%29%3B%0AnewDoc.write%28%27%3Chtml%3E%3Chead%3E%3Ctitle%3ESource%20of%20%27%2Bdocument.location.href%2B%27%3C/title%3E%3Cmeta%20name%3D%22viewport%22%20id%3D%22viewport%22%20content%3D%22initial-scale%3D1.0%3B%20user-scalable%3D0%3B%20maximum-scale%3D0.6667%3B%20width%3D480%22/%3E%3Cscript%3Efunction%20do_onload%28%29%7BsetTimeout%28function%28%29%7Bwindow.scrollTo%280,1%29%3B%7D,100%29%3B%7Dif%28navigator.userAgent.indexOf%28%22iPhone%22%29!%3D-1%29window.onload%3Ddo_onload%3B%3C/script%3E%3C/head%3E%3Cbody%3E%3C/body%3E%3C/html%3E%27%29%3B%0AnewDoc.close%28%29%3B%0Avar%20pre%3DnewDoc.body.appendChild%28newDoc.createElement%28%22pre%22%29%29%3B%0Apre.appendChild%28newDoc.createTextNode%28document.documentElement.innerHTML%29%29%3B

Micox News 2

2007-07-03T08:28:00.000-04:00

Hoepaa

1) Ajax pros aspeiros: Ajaxed - Um framework ajax para ASP. By Ajaxian.

2) jQuery 1.1.3 - 800% mais rápido. Vou baixar e testar. Mais seletores, melhorias em animações, efeitos e eventos, e outras coisas. By Ajaxian.

3) O Dia C está chegando...

4) 3D Tomb II - Joguim interessante com canvas. Lento, porém talvez um precursor hehe. By Anieto2K.

5) Não, não vou falar de porcaria de iPhone aqui não heheh. O povo não sabe mais falar de outra coisa. Excesso cansa. (mais aqui e aqui)

Tchau.

Testes dos gringos no Script Word-wrap

2007-07-02T07:11:00.000-04:00

heheh, vale dar uma olhada. A gringaiada olha se meu script tá funcionando na própria página. hhahheh

Ah, como não tem nada neste post vou aproveitando pra agradecer ao Ademir pela grande ajuda que ele vem fazendo no novo elmicox.com. Achei muito comédia o template que ele usou. Muito bom hhehe.

Em breve este blog sai do blogger.

Script word-wrap para Firefox - versão revisada

2007-06-14T10:24:00.001-04:00

Hoeee,

Dei uma corrigida no meu antigo script pra quebrar palavras grandes no Firefox.
Agora testado no Firefox e no Opera. Não tem mais bugs com elementos filhos ou pais.
E também ficou mais fácil de usar.

O Firefox não quebra grandes palavras como o Internet Explorer. O IE tem uma propriedade CSS chamada word-wrap que pode ser setada para 'break-word' pra dar uma quebrada nas palavras grandes. Firefox e Opera não tem suporte a esta propriedade.
Este script simula esta propriedade nos elementos que tiverem sua classe igual a "word-wrap".

Como usar :

1. Baixe o script em http://naironjcg.googlepages.com/micoxWordWrap.js (4kb)

2. Chame este script no seu documento html: <script type='text/javascript' src='micoxWordWrap.js'></script>

3. Coloque a classe 'word-wrap' nos elementos (ou pai de elementos) que você irá querer quebrar palavras grandes.

Examplo:

<head>
<script type='text/javascript' src='micoxWordWrap.js'></script>
<style>
#url {
width: 400px;
padding: 20px;
border: 1px solid green;
}
</style>
</head>
<body>
<div style='width: 350px; border: 1px dotted green;' class='word-wrap'>
 <h3>Class word-wrap used just on some parent:</h3>
 <p>Normal words Normal words Normal words Normal words Normal words </p>
 <p>BigWordBigWordBig<br />
  WordBigWordBigWordBigWordBigWordBigWordBigWordBigWordBigWordBigWordBigWordBigWordBigWordBigWordBigWordBigWord</p>
 <p><a href='http://elmicoxcodes.blogspot.com'>BigWordAroundedByLink(tagInside)<br />  BigWordAroundedByLink(tagInside)BigWordAroundedByLink(tagInside)BigWordAroundedByLink(tagInside)BigWordAroundedByLink(tagInside)</a></p>
</div>
<div style='width: 350px; border: 1px dotted green; padding: 20px;'>
 <h3>Class word-wrap used directly in children tags:</h3>
 <p class="word-wrap">Normal words Normal words Normal words Normal words Normal words </p>
 <p class="word-wrap">BigWordAroundedByLink (tagInside)BigWordAroundedByLink(tagInside)BigWordAroundedByLink(tagInside)BigWordAroundedByLink(tagInside)BigWordAroundedByLink(tagInside)</p>
 <p class="word-wrap"><a href='http://elmicoxcodes.blogspot.com'>BigWordAroundedByLink (tagInside)BigWordAroundedByLink(tagInside)BigWordAroundedByLink(tagInside)BigWordAroundedByLink(tagInside)BigWordAroundedByLink(tagInside)</a></p>
</div>
<div id='result'>aaa </div>
</body>

Pronto. Por hoje é só pessoal!

Vota neste link lá no DZone.

Bugs, comenta ae povo. Té.

Se você quiser ver meu script e fazer as alterações que desejar:

/**
 * Micox Word Wrap 2.0 
 * elmicoxcodes.blogspot.com - www.ievolutionweb.com - micoxjcg@yahoo.com.br
 * Creative Commons License - creativecommons.org
 * 
 * Description:
 * Wraps large words in Firefox and Opera.
 * Works just like the word-wrap: break-word; CSS property in Internet Explorer
 *
 * Usage:
 * 1) Include this JS file in your page. Example: 
 * 2) Set 'word-wrap' as the classname of the elements that you want to word break. Example: 
 *
**/

function wrap(quem){
 var larg_total,larg_carac,quant_quebra,pos_quebra, over_orig;
 var elementos,quem, pai, caracs, texto, pai_texto, display_orig, wid_orig;
    
    if(quem.nodeType==3){
  //elemento tipo texto. tenho que verificar se o pai dele tá quebrando
  
  if(quem.nodeValue.replace('\n','').replace('\t','').trim()==''){
   //se o textNode for vazio, não prossigo
   return true;
  }
  
  pai = quem.parentNode;  
  texto = quem.nodeValue;   
  
  //pegando a largura setada oficial
  display_orig = pai.style.display;
  over_orig = pai.style.overflow;
  wid_orig = pai.style.width;
  pai.style.display="block";
  pai.style.overflow="hidden";
  larg_oficial = pai.offsetWidth;
  
  //pegando a largura real total
  pai.style.display="table";
  pai.style.width = "auto"; //para o Opera
  pai.style.overflow = "visible";
  larg_total = pai.offsetWidth;
  //alert("texto: " + texto + " \r\n larg_oficial:" + larg_oficial + " \r\n larg_total:" + larg_total)
  pai.style.overflow = over_orig;
  
  if(larg_total>larg_oficial){ //se o pai do text tá extrapolando, quebro o text
   pos_quebra = 0;
   caracs = pai.textContent.length;
   //recalculando a largura real tirando os espaços pra poder calcular
   // direito a largura dos caracs e quando vou quebrar
   
   quem.nodeValue = pai.textContent.replace(/ /g,"Ø") + " ";
   larg_total = pai.offsetWidth;
   pai.style.display = display_orig;
   
   larg_carac = larg_total / caracs ;
   quant_quebra = parseInt(larg_oficial/larg_carac) - 2; 
   quant_quebra = quant_quebra>0 ? quant_quebra : 1 ;
   quem.nodeValue = '';
   
   while(pos_quebra<=caracs){
    quem.nodeValue += texto.substring(pos_quebra,pos_quebra + quant_quebra) + " "
    pos_quebra = pos_quebra + quant_quebra;
   }   
  }
  pai.style.display = display_orig;
  pai.style.display = over_orig;
  pai.style.width = wid_orig;
  
 }else if(quem.childNodes.length==1 && quem.childNodes[0].nodeType==3){
  //é o último do nível e o único filho é texto
  texto = String(quem.innerHTML); //salvando o original
  
  
  /*quem.innerHTML = " "  
  display_orig = quem.style.display;
  quem.style.display="block";
  larg_oficial = quem.offsetWidth;
    
  quem.style.display="table";
  quem.innerHTML = texto;
  larg_total = quem.offsetWidth;*/
  
  //pegando a largura setada oficial
  display_orig = quem.style.display;
  over_orig = quem.style.overflow;
  wid_orig = quem.style.width;
  quem.style.display="block";
  quem.style.overflow="hidden";
  larg_oficial = quem.offsetWidth;
  
  //pegando a largura real total
  quem.style.display="table";
  quem.style.width = "auto"; //para o Opera
  quem.style.overflow = "visible";
  larg_total = quem.offsetWidth;
  //alert("texto: " + texto + " \r\n larg_oficial:" + larg_oficial + " \r\n larg_total:" + larg_total)
  quem.style.overflow = over_orig;
    
  if(larg_total>larg_oficial){ //quebrando quem extrapolou
   pos_quebra = 0;
   caracs = texto.length;
   //recalculando a largura real tirando os espaços pra poder calcular
   // direito a largura dos caracs e quando vou quebrar
   quem.innerHTML = quem.innerHTML.replace(/ /g,"Ø");
   larg_total = quem.offsetWidth;
   larg_carac = larg_total / caracs ;
   
   quant_quebra = parseInt(larg_oficial/larg_carac) - 2; 
   quant_quebra = quant_quebra>0 ? quant_quebra : 1 ;
   quem.innerHTML = ""
   
   while(pos_quebra<=caracs){
    quem.innerHTML += texto.substring(pos_quebra,pos_quebra + quant_quebra) + " "
    pos_quebra = pos_quebra + quant_quebra;
   }
   
  } 
  quem.style.display = display_orig;
  quem.style.display = over_orig;
  quem.style.width = wid_orig;
  
 }else if(quem.childNodes.length>0){
  //se tiver mais que um filho, vou ter que executar de filho em filho nele
  for(var i=0;i<quem.childNodes.length;i++){
   wrap(quem.childNodes[i]);
  }
 }
}
function wordWrap(){  
    var elementos = document.body.getElementsByTagName("*") 
 
    if(navigator.appName.indexOf("Internet Explorer")>-1){
        for(var i=0; i<elementos.length;i++){
            if(elementos[i].className.indexOf("word-wrap")>-1){
                elementos[i].style.wordWrap = "break-word";
            }
        }
    }else{
        for(var i=0; i<elementos.length;i++){
            if(elementos[i].className.indexOf("word-wrap")>-1){
                wrap(elementos[i]);
            }
        }
    }
}
String.prototype.trim = function() { //Trim ambas direcciones
   return this.replace(/^[ ]+|[ ]+$/g,"");
}
function bodyOnReady(func){
 //call the function when DOM loaded
 //http://www.elmicox.com/2007/evento-body-onready-sem-o-uso-de-libs/
 //by Micox - www.elmicox.com - elmicox.blogspot.com - webly.com.br
 if(!(document.body==null)){
  func();
 }else{
  var func_rep = func;
  setTimeout(function(){ bodyOnReady(func_rep) },100);
 }
}

bodyOnReady(wordWrap);

Ranking da capa do Rec6 e Rec6 em fóruns

2007-06-11T14:27:00.000-04:00

Hoeee,

Ranking do Rec6

O Rec6, 'juntador' de notícias que eu frequento, acabou de divulgar uma lista oficialzona mesmo contendo os domínios que mais levaram notícias à capa deles de janeiro a maio de 2007.

Parabéns a toda galera listada lá, que contribui em levar informações à cabeça do mico.

Rec6 em fóruns IPB (bbcode)

Eu não tinha falado antes, mas aproveito esta oportunidade aqui pra citar uma nova ferramenta que o Rec6 disponibilizou (tem tempo) e foi feita por djô: Botão do Rec6 em fóruns IPB.

Esta ferramenta dará a possibilidade de usuários de fóruns colocarem o botão de votação do Rec6 em seus tópicos. Ela é colocada através de um BBcode. Dessa forma, os tópicos de notícias ou tutoriais de determinado fórum poderão ter mais visilidade graças ao Rec6.

Eu acredito que isto trará muitos usuários novos ao Rec6.

O BBCode do Rec6 já está em uso a um bom tempo lá no iEvolution e posso dizer que é um sucesso no fórum.

Por hoje é só pessoal.

Ajax Compilation - compilação de técnicas e ferramentas

2007-06-11T10:12:00.000-04:00

Muito bão, compensa mesmo darem uma olhada: Ajax Compilation - compilação de técnicas e ferramentas

by Anieto2k

Javascript DOM Inspector para IE - colaboradores

2007-06-10T23:13:00.001-04:00

Javascript DOM Inspector para IE - em busca de colaboradores.

Comecei a brincar de fazer um DOM explorer usando javascript.
Motivo? Fazer um dom explorer pra ajudar agente a resolver os boró no Internet Explorer e Opera (afinal já temos o ótimo firebug no FF que não precisa de substitutos).

Tentando desenvolver um aqui. Ajude também se vc sacar de javascript.

Eu dei os começo mas vou dar uma parada pra ir agilizando meus serviços.

Acredito que será útil pra quem desenvolve muito com javascript.

Té

SynthaSite: editor WYSIWYG - primeiras impressões

2007-06-06T14:23:00.000-04:00

Bom, passeando pelo Ajaxian, me deparo com este editor WYSIWYG online: SynthaSite.

Lá vou eu esperimentar o bixo, principalmente porque tenho vontade de fazer algo parecido no futuro :-).
Ele vêm com a promessa de não precisar instalar mais nenhuma ferramenta no computador pra precisar editar algum site, seja sozinho ou com uma equipe. Tentar aposentar editores wysiywyg desktop.

Primeiramente fui fazer o cadastro, que é absurdamente simplificado e rápido. Ótimo. Já pensei "beleza, o negócio deve ser bão".

Só que, logo em seguida, começou a complicação: abre-se um popup na minha tela inteira que demora mil anos pra carregar. Aliás, tudo lá após o login tava demorando pra carregar.

O ajax usado parecia nem fazer sentido, visto a lentidão ao processar uma simples tarefa de clique de mouse. Assim eles não conseguem aposentar os editores desktop não viu...

Além disso, pecaram na complexidade. Muitas coisas, muitos menus, porém nada de simplicidade. Não achei nem onde editava o código fonte, não achei como criar página com extensão php, etc (tá certo que nem procurei muito também né).

Acho que fizeram o bixo voltado pra novatos dependentes em excesso de editores visuais apenas. Se não fosse a lentidão pode até ser que eles conquistassem este mercado. Mas, sei não. Não aposto neste bixo aí não.

Testem lá. Talvez tenham mais sorte que eu.

Função limpa texto pra virar URL

2007-06-06T08:25:00.000-04:00

Ó, esta é pra quem não frequenta o fórum e o portal iEvolution, afinal quem já frequenta, já viu ela em uso.

Hoje mostro uma função PHP pra variar um pouco né? Ficar só sempre no JavaScript aqui no blog deve ser meio chato pra muitos de vocês. Lets go.

Muitas vezes, principalmente quando estamos trabalhando para deixar nossas url's amigáveis (aqui outros exemplos de friendly url) nos deparamos com alguns links nossos gerados a partir de banco de dados que contém: acentos, cedilha, pontuações, etc.

Isso em um link pode dar boró né?

O wordpress e o blogger têm suas próprias funções pra isto muito mal feitas. Elas desrespeitam nossa beeela língua (hehe) e simplesmente removem os caracteres que têm acento. O que? Acha que isto não dá problema? Lembre-se que "quem tem céu, tem medo".

Pra resorver este póbrema o mico aqui tentou fazer uma funçãozinha.

Função que gera uma texto limpo pra virar URL:

limpa acentos e transforma em letra normal
limpa cedilha e transforma em c normal, o mesmo com o ñ
transforma espaços em hífen (-) (chama hífen mesmo né?)
tira caracteres invalidos e pontuações

Por exemplo, temos o texto "O cabeçudo & a máfia é ônti. O cabeçudo & a máfia é ônti.htm"

Que queremos que vire a url "o-cabecudo-a-mafia-e-onti-o-cabecudo-a-mafia-e-onti.htm"

1) Pegue esta minha função

function geraUrlLimpa($texto){
    /* função que gera uma texto limpo pra virar URL:
       - limpa acentos e transforma em letra normal
       - limpa cedilha e transforma em c normal, o mesmo com o ñ
       - transforma espaços em hífen(-)
       - tira caracteres invalidos
      by Micox - elmicox.blogspot.com - www.ievolutionweb.com
    */
    //desconvertendo do padrão entitie (tipo á para á)
    $texto = html_entity_decode($texto);
    //tirando os acentos
    $texto = eregi_replace('[aáàãâä]','a',$texto);
    $texto = eregi_replace('[eéèêë]','e',$texto);
    $texto = eregi_replace('[iíìîï]','i',$texto);
    $texto = eregi_replace('[oóòõôö]','o',$texto);
    $texto = eregi_replace('[uúùûü]','u',$texto);
    //parte que tira o cedilha e o ñ
    $texto = eregi_replace('[ç]','c',$texto);
    $texto = eregi_replace('[ñ]','n',$texto);
    //trocando espaço em branco por underline
    $texto = eregi_replace('( )','-',$texto);
    //tirando outros caracteres invalidos
    $texto = eregi_replace('[^a-z0-9\-]','',$texto);
    //trocando duplo espaço (underline) por 1 underline só
    $texto = eregi_replace('--','-',$texto);
    
    return strtolower($texto);
}

2) Use a danada

$tes = "O cabeçudo & a máfia é ônti. O cabeçudo & a máfia é ônti.htm";
  $tes = geraUrlLimpa($tes)."html";
  echo $tes."
";
  //irá gerar o-cabecudo-a-mafia-e-onti-o-cabecudo-a-mafia-e-onti.html

Se alguém quiser corrigir o wordpress usando minha função e linkar pro pessoal saber como implantar a modificação, acho que será de grande ajuda para os users do wordpress não terem mais medo de dar o céu aos outros heheh.

Dúvidas, pergunta lá no tópico do fórum ok?

Ego moment

2007-06-05T21:02:00.000-04:00

O brodi NGhorta me passou esta página da revista www.com.br deste mês pra eu dar uma bizuiada e ficar feliz:

Destes 2 citados aí, eu fiz o da acentuação.

Infelizmente, não fico 100% feliz pois não citaram os nomes dos autores. Mas nem tudo é perfeito né hehehe

Bugs float e display table no IE e FF

2007-06-05T15:44:00.000-04:00

Opa, dica rápida.

Edit 27/08/07 - Atenção: leia o post até o final onde está a solução do Chessman pois ela é a mais aconselhável.

Às vezes quando agente tá brincando com algum elemento ou pai de elemento que tem float: left ou display: table acontecem alguns bugs estranhos.

No Firefox, às vezes, o float não funciona quando se dá Control + F5, porém fica tudo beleza se você der um F5.
No Internet Explorer o pai do elemento simlesmente some. Vai entender.

Eu acredito que estas loucuras sejam bugs.

Aqui um exemplo de um cidadão com o problema.

Algumas soluções pra estas loucuras incluem um elemento fantasma (ou wrapper) no final da div pai com um clear both.
Outras sugerem colocar um display inline em quem tá com o float.

Eu vou entrar pro rol das soluções possíveis e tentar mostrar mais outra:

Tenta definir a largura e altura do elemento pai dos elementos com float.
Pode ser em porcentagem mesmo. Apenas defina. Se não der certo no pai dos floats, tente no avô dos floats também.

Aqui pra mim deu certo. Talvêz pra você dê certo também.

Edit: Uma perfecta (e inédita acredito eu) solução para este problema do bug foi feita pelo amigo de fórum senhor TheChessMan. Aqui o post onde ele desenvolveu inicialmente a solução. Parabéns chess.

Fui.

Entrevista com djô

2007-05-30T22:10:00.000-04:00

Hoeee

É nóis no DVD!

Tamo sem postar mas não tamo morto não.

I'll be back

O começo dos meus CSS

2007-05-09T09:01:00.000-04:00

Heloou comédias, mais um post da série "eu estou vivo".

Como muitos já sabem tô fazendo uns projetos aí que tão exigindo muito do meu tempo daí o blog tá meio parado aqui. Mas quando eu voltar já sabem que terão toneladas de códigos afinal, é nos serviços que surgem novos códigos.

Hoje, mostrando pra vocês o que costuma sempre estar no início dos meus arquivos CSS. Estas declarações servem pra padronizar algumas coisas nos navegadores e tornar mais fácil o desenvolvimento do site. Tudo é pra reduzir diferenças em navegadores.

Faça um teste no próximo site que fizer. Coloque estas declarações e verá que muitas "diferenças" simplesmente não acontecem nos navegadores. Mas não simplesmente copie e cole. Dê uma lida pra entender o que eu fiz.

Incluí também algumas classes padrão que eu costumo usar.

* { margin: 0; padding: 0; /* padronizando nos navegadores */ }

img { border: 0;}
fieldset { display: block; border: 2px ridge #FFF; padding: 10px; /* padronizando nos navegadores */ }
ul, ol { margin-left: 10px; /* padronizando nos navegadores */}
input[type=hidden]{ display: none !important; visibility: hidden !important; /* esconde mesmo inputs hidden no FF */}
button { border: 1px outset #AAA;}
form button { text-align: center; margin: 5px auto; display: block; }
form ul { list-style: none; margin-left: 0; }
fieldset label { display: block;}
fieldset .radios label { display: inline; }
p { margin-top: 5px; }

/* padronizando tamanhos de cabecalho em todos os browsers */
h1 { font-size: 250%;}
h2 { font-size: 200%;}
h3 { font-size: 150%;}
h4 { font-size: 120%;}

/* classes costumeiras */
.ak { text-decoration: underline; /* access keys */ }
.u { text-decoration: underline; /* textos underline */}
.secoes { display: none; /* exibe nomes das seções se o CSS estiver desativado */ }
.img-left { float: left; }
.img-right { float: right;}
.erroinfo { background: #FFCCCC;}
.erro { background: #FF0000;}

Té mais povo.

Micox na Alemanha, nos EUA e no Japão

2007-04-19T07:20:00.000-04:00

Maaais um post rápido (tô cheio de serviço 'uai').

No meu blog em ingrêis, no código do upload, tenho trocado idéia com um cara chamado Fritz.
Hoje ele me manda um email agradecendo e dizendo que meu script auxiliou pra caramba o chat online dele a fazer uploads sem atrapalhar a conversa.

Não sei se já tinha falado também, mas o senhor miCRoSCoPiC^eaRthLinG fez um plugin conversor pro Wordpress usando minha solução pro innerHTML-select-option e também agradeceu publicamente.

Só tenho a dizer que postar meus códigos em inglês é muito mais gratificante.
Lá o pessoal reconhece a ajuda e o serviço de forma muito mais rápida e transparente.
Nada dessa cultura arcaica que a maioria dos desenvolvedores brazucas têm de esconder o código e guardar pra sí só como se ele tivesse feito tudo sozinho.
Nada de retirar os créditos do código.
Nada de mentir pro chefe falando "olha o que eu fiz", sendo que pegou o script da net.

Lá o agradecimento é público.

Em poucos dias de elmicoxcodes (e com poucos códigos) tive uma repercussão surpreendente, com gente até do Japão.
O conselho do vovô desta vêz é: "Se você tem oportunidade de postar seus códigos em inglês, faça".

Eu só não mudo de vez pro elmicoxcodes porque meu inglês é péssimo. Sorte de vocês huaehauhehu.

Brincadeira pessoal, aqui eu posso falar abobrinha, lá acho que não é uma boa.

Até a próxima. Quando eu acabar este freela vai ter muito código novo por aqui.

htmlEntities, array_search e strip_tags para JavaScript

2007-04-11T14:37:00.000-04:00

Ae pessoal, tô cheio de serviço, fazendo um freela aí pra uma empresa de gravação telefônica, por isso tô meio sumido.

Pra que vocês não pensem que me sequestraram, vou postar umas duas funções que desenvolvi enquanto estava fazendo o site desta empresa. Rapidim pra saberem que (ainda) tô vivo.

Coisas simples, mas úteis às vezes: Array_search e htmlEntities para Java Script (lembram-se dessas funções do PHP?).

Estas funções também foram postadas por mim no novo portal temporário do iEvolution ('temporário' pois temos um concurso pra que os users façam o design do portal). Este portal tem uma filosofia inovadora de que todo mundo pode ser colunista-colaborador, basta postar seu tutorial no fórum respectivo.
Quisemos (ou estamos tentando) fazer um portal-fórum bem 'à lá Web 2.0'.

Bem, também tô devendo um post agradecendo as ajudas que todos me deram. Já achei um ótimo serviço de hospedagem-domínio e um ótimo designer.
Depois eu faço esta postagem e migro pro novo El Micox. O tempo tá curto.

Bora lá.

htmlEntities para Javascript

Postado originalmente em: htmlEntities para Javascript
Quase igual a do PHP, só que pra javascript.

Às vezes é necessário agente converter alguns caracteres acentuados para sua entidade HTML correspondente.
Assim você não precisa ficar quebrando muito a cabeça com o charset. HTMLEntities são entendidos geral.

Quem mexe com PHP já conhece bem uma função que faz isso: htmlEntities.

Quem precisar de algo mais ou menos equivalente pra JavaScript, eu fiz uma funçãozinha aqui.
A diferença principal da minha função é que eu transformo via número do código ASCII da letra.

Por exemplo: no htmlEntities do PHP o 'ã' irá virar ã
Na minha função abaixo irá virar ä

No final, fique tranquilo, irá aparecer o 'ã' normalmente na página (de acordo com meus cálculos).

Teste aí e veja:

function htmlEntities(texto){
       //by Micox - elmicox.blogspot.com - www.ievolutionweb.com
    var i,carac,letra,novo='';
    for(i=0;i<texto.length;i++){
        carac = texto[i].charCodeAt(0);
        if( (carac > 47 && carac < 58) || (carac > 62 && carac < 127) ){
            //se for numero ou letra normal
            novo += texto[i];
        }else{
            novo += "&#" + texto[i].charCodeAt(0) + ";";
        }
    }
    return novo;
}

Exemplo de uso:

document.getElementById('div_teste').innerHTML = htmlEntities('coração de porquio');

array_search para Javascript

Mais uma função baseada no PHP.
Agora é a array_search pra javascript.

Esta função procura por um valor em um array e retorna sua chave correspondente caso seja encontrado

function array_search(busca,oarray){
     //by Micox - elmicox.blogspot.com - www.ievolutionweb.com
    //ve se determinado valor existe no array e retorna sua chave
    for(var i in oarray){
        if(oarray[i]==busca){return i;}    
    }
    return false;
}

Exemplo (procuro o valor arroz dentro do array comidas e retorno sua chave):

var onde_esta_o_arroz = array_search('arroz', comidas);

Strip tags em javascript

Extra-post rapidim: strip_tags em javascript (baseada neste post).

Tira tags HTML de uma string.

var stringa = '<b>teste</b> <em>teste2</em>';
function strip_tags($text){
 return $text.replace(/<\/?[^>]+>/gi, '');
}
alert(strip_tags(stringa)); //vai mostrar 'teste teste2'

Acabou, agora vou sumir novamente pra terminar meus jobs.
Té mais macacada. Bugs, comenta ae. Dúvidas, vocês já sabem onde se deve perguntar né?

Criatividade e conhecimento (e jogos JavaScript)

2007-04-03T08:08:00.000-04:00

Vendo o resultado do concurso dos 4K planejado pelo Elcio para fazer propaganda pra Visie, não pude deixar de ficar impressionado com o que a união de criatividade e conhecimento é capaz de criar com 4K. Realmente o Michel Humberto tá de parabéns pela criatividade.

Aproveitando que agente tá falando de jogos em JavaScript mesmo, bora postar alguns ae pra vocês matarem o tempo (e estudarem o código fonte se forem nârds mesmo):

O arkanoid - que eu já falei aqui.
Esse experimento aqui é inacreditável (pena que não descobri como atirar - acho que não dá) - descoberto no Acorda pra Web. Feed assinado depois de ler este post. (Se você tem um site/blog pequeno leia também sobre o SQLite )
No site Kabloc tem alguns, mas devem ser da "old school" pois tem alguns bugs :(
Aqui tem mais (infelizmente não são online. Tem que baixar)
Testador de reflexo (simplim mas divertido heheh)
Forca básico do Walter Cruz.
Chega. Vai trabalhar. Se conhecer outros, posta nos comments aí.

Update: Sites Indicados nos comentários:

RayCaster - Pelo Leandro
Efeitos impressionantes. Talvez o melhor de todos. Tem até uma galeria de fotos muito doida aí. 3D pra dar a impressão que vc tá em uma galeria de verdade - Indicada via fórum pelo flaviotomazio
kalaha - pelo Cau Guanabara
Por djô:

Blogging from heaven

2007-04-03T07:02:00.000-04:00

Depois de ficar um tempo sem ler meus feeds, ontem fiquei sabendo que um dos blogueiros que eu lia e que lia o El Micox faleceu.

É triste ficar sabendo de uma coisa dessas.

Não o conhecia muito, tinha trocado alguns emails com ele, lido alguns comments dele aqui e comentado lá no blog dele (que eu lia muito - foi um dos meus primeiros feeds cadastrados).

Bem, só o que podemos falar é: Esteja em paz, Aldemir.

Accordion Menu (menu sanfona)

2007-04-02T10:30:00.000-04:00

Opa pessoal, desculpe o sumiço. Em breve posto os ótimos resultados que tive no meu pedido de ajuda. Muita gente mesmo. Valeus povo.

Agora um tutorialzinho rápido pra saberem que tô vivo e usando JQuery. Convertam-se também! Amém.

Tutorial de como fazer um accordion menu (menu sanfona) rapidamente e de forma não obstrusiva, crossbrowser (IE, FF, OP) e com pouca digitação de código.
Pergunta: "a tradução seria 'menu acordeão' ?!?".

Clique aqui pra ver uma página de demonstração do accordion menu .

Este tutorial foi postado inicialmente no fórum iEvolution. Cadastre-se, contribua, encha de perguntas lá. Vou ficar esperando.
O tuto foi adaptado de uma videoaula do site do oficial do JQuery.

Came to work soldier:

1) Você tem sua página com sua lista dt-dd-dl normal:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
 <title>DL Demo</title>
 <style>
 body { font-family: Arial; font-size: 16px; }
 dl { width: 300px; }
 dl,dd { margin: 0; }
 dt { background: #F39; font-size: 18px; padding: 5px; margin: 2px; }
 dt a { color: #FFF; }
 dd a { color: #000; }
 ul { list-style: none; padding: 5px; }
 </style>
</head>

<body>
<dl>
 <dt><a href="/">jQuery</a></dt>
 <dd>
 <ul>
  <li><a href="/src/">Download</a></li>
  <li><a href="/docs/">Documentation</a></li>
  <li><a href="/blog/">Blog</a></li>

 </ul>
 </dd>
 <dt><a href="/discuss/">Community</a></dt>
 <dd>
 <ul>
  <li><a href="/discuss/">Mailing List</a></li>
  <li><a href="/tutorials/">Tutorials</a></li>

  <li><a href="/demos/">Demos</a></li>
  <li><a href="/plugins/">Plugins</a></li>
 </ul>
 </dd>
 <dt><a href="/dev/">Development</a></dt>
 <dd>
 <ul>

  <li><a href="/src/">Source Code</a></li>
  <li><a href="/dev/bugs/">Bug Tracking</a></li>
  <li><a href="/dev/recent/">Recent Changes</a></li>
 </ul>
 </dd>
</dl>
</body>
</html>

2) Você baixa o jquery.

3) Você inclui o arquivo externo do jquery no seu documento.

<script type="text/javascript" src="jquery.js"></script>

4) Adiciona este script ao head da sua página:

 <script>
 $(document).ready(function(){
  $("dd:not(:first)").hide();
  $("dt a").click(function(){
   $("dd:visible").slideUp("slow");
   $(this).parent().next().slideDown("slow");
   return false;
  });
 });
 </script>

5) Prontim. Totalmente não obstrusivo, limpo, rápido, bonito, etc etc blábláblá.

Aposto que se interessou pela JQuery heim? Veja uma introdução sobre o bixo aqui também (link pedido descaradamente pelo meu 'padrinho' no jquery Vitor Prado heuaeh - mas o site do cara é bom mesmo pra aprender. Passeia lá).

Dúvidas? Manda pro fórum que agente gosta de responder. Somos doidos. Eu não respondo por email :-)

O Micox já te ajudou? Ajude o Micox

2007-03-26T16:26:00.000-04:00

Hopa. Algum código do Micox já te ajudou?? Chegou a sua vez de retribuir: ajude o Micox!!

No alto da minha modéstia, vendo inúmeros depoimentos de pessoas no Brasil e exterior que foram salvas por meus códigos, ganharam grana, desenvolveram benefícios para a humanidade, tiveram empregos mantidos, casamentos salvos, etc etc etc, resolvi também mendigar uma ajuda pois ninguém é de ferro né? hehehe

Antes que pensem que ganho dinheiro com o blog aqui, gostaria de falar que ele é como um passatempo e guardador de códigos pra mim. Os meus rendimentos com o AdSense aqui são uma piada, não cheguei nem nos 40 dólares. Nada anormal, visto que meu site não é visitado por paraquedistas do Google que clicam sem pensar e sim por gente inteligante que sabe onde está clicando.

Mas você pode me ajudar. "Como" ?

Formas de ajudar o Micox:

1) Design pro El Micox

"Sou designer e quero ajudar. Essa parada sua aqui é muito feia"

Faz um design ae. Bom, a estrutura de links é praticamente a mesma, só que eu quero colocar uns 5 links (um pouco mais importantes) na horizontal. Algo que tenha a ver com primatas e códigos. De fácil leitura. Você vai ganhar um link especial aqui no meu blog, tipo "design feito por fulano".
Todos que mandarem idéias terão elas postadas aqui (se quiserem, é claro) e linkadas para seu site/blog.

2) Facilidades pra cadastro

Muitos dos atuais fiéis daqui já sabem que eu detesto fazer sistema de cadastro, forms, inputs, etc. É um saco ter que mexer com validação, tanto server-side (php+banco de dados) quanto client-side (javascript), criar form, validar form, validar dados e por aí vai.

Andei pesquisando algumas bibliotecas PHP aí, mas muitas são complicadas demais ou só servem pra um tipo específico de site. O que eu quero é simples: facilidade na hora de fazer sistemas de cadastro no BD. Facilidades na validação, na geração do form e inputs, facilidade na hora de testar os tipos dos dados, tanto na parte do javascript quanto na parte do PHP.

Se você souber de algo, vai me ajudar muito.

3) Hospedagem e domínio

Cansei do blogger. É lento, sem recursos, difícil de mexer com comentários, etc etc etc ("etc é coisa de quem não tem neurônios suficientes" - dizia minha mãe). Atualmente já não me importo em perder meu Pagerank 4. É a vida, não posso ficar eternamente nesta lentidão aqui.

Primeiramente gostaria de informar que não tô afim de gastar 30 conto mensais e nem qualquer grana com hospedagem. Eu sei que existem outras empresas aí que fornecem o serviço por até 30 contos anuais e me interesso por isso. Mas já que hoje tô aqui pra pedir, não custa nada pedir ajuda aqui também né. Se você é dono de algum provedor, de alguma empresa que queira patrocinar o El Micox (e ter o devido banner aqui) as portas estão escancaradas.

4) Dinheiro na conta

Bom, se você quiser depositar uns 10 conto, 20 conto, ou quem sabe até uns 300 eu não vou achar ruim te passar os dados pra depósito na Caixa Econômica Federal não. Não custa nada. Lembre-se que eu já posso ter salvado seu emprego hhahehehehe.

Banco: Caixa economica
Operação: 13 (poupança)
Agencia: 1575
Conta: 00669424-3
Fav.: ieu mermo (Náiron JCG)

5) Não me encaixo em nenhum dos ítens acima

Ué então você tem 3 opções:

Comentar aí pra me deixar mais feliz em saber que tem gente que lê este blog
Reler o terceiro parágrafo desta postagem (abaixo da imagem), mas sem exageros. :assobiando:
Deixar um link textual pro El Micox ou fazer uma postagem agradecendo no seu blog/site
Colocar meu banner discreto no seu site (sério mesmo)

[modéstia off] Em breve, novos códigos pra salvar vossos empregos e vidas profissionais.[modéstia on]
Té mais povo.

Flash?!? Não, apenas JavaScript 2 - Em busca da paz

2007-03-26T08:11:00.000-04:00

Pesquisando sobre uns frameworks de JavaScript aí, achei outra página que considero interessante mostrar aqui.

Neste caso é dentro do site da Adobe (sim, a mesma que atualmente cuida do Flash). Bizarro de louco.

Trata-se de um dos efeitos da biblioteca para JavaScript da Adobe, o Spry. Lá na página deles você vê uma galera de outros efeitos interessantes (muito interessantes por sinal). Realmente dá uma cara de "flash" para as aplicações Web.

Pelo pouco que olhei, parece se tratar de uma biblioteca apenas para efeitos visuais, sem muitas facilidades pra tratamento de eventos, ajax, etc. Pra mim não irá servir muito, talvez algum de vocês se interesse.

Eu vou preferir a jQuery, indicada pelo Vitor Prado em minha postagem anterior. Estou me convertendo a ela. Amém!!

Flash?!? Não, apenas Javascript + CSS

2007-03-23T13:18:00.000-04:00

Post rápido pra recomendar a todos que visitem o site do William Grasel.

Surpeendam-se com as potencialidades do JavaScript + CSS.

Teoricamente, JavaScript pode fazer quase tudo que outras linguagens fazem, contanto que não mexa com arquivos locais e nem com recursos de hardware da máquina.

Ainda aguardo o dia em que encontrarei (ou me indicarão) uma biblioteca/framework de javascript para facilidades de programação como efeitos em gráficos, etc. Assim como temos várias em Java e outras linguagens.

PS.: Ah, pra quem não percebeu em minhas postagens com código, eu instalei o Google Code Prettifier. Como eu não tô afim de sair indo em tooodos meus posts e alterando as tags 'pre' para receberem a class 'prettyprint' eu fiz uma pequena alteração e comentei a linha 'if (cs.me && cs.className.indexOf('prettyprint') >= 0)'.

Té logo povo.

Como trato meus visitantes e Como eu blogo

2007-03-19T20:54:00.000-04:00

Hello micofriends.

Hoje vou me ativar um pouco novamente na comundade blogueira.

Há um tempo ae (muito tempo, diga-se de passagem), o brodi Vinicius Krolow me perguntou comé que eu trato meus visitantes. A vida corrida do cotidiano mundano atual da sociedade moderna consumista me impediu de postar a resposta antes ("blá, desculpa esfarrapada mico" heheh). Hoje, finalmente to postando a resposta hehe.

Imagem: a vida corrida do cotidiano.

A Érica Akira também me perguntou recentemente "Como eu blogo" (lá do Japão, olha só). Como eu considero os dois assuntos relacionados (e como sou preguiçoso), resolvi postar os dois memes juntos.

Bora lá mico. (PS.: Esse elemento bonito da foto aí de cima sou eu mesmo em momento de profunda concentração na resolução de um problema de JavaScript)

Como eu trato meus visitantes

Bom, podemos dizer que eu tenho 2 tipos de comentários: os que comentam sobre as postagens e os que perguntam coisas técnicas.

Primeiramente eu já informo que gosto de responder tudo. Se você já comentou alguma vez aí algo importante, pode voltar e olhar que o mico respondeu, agradeceu, etc, etc.

"Segundamente", graças as complicações do novo Blogger, quando alguém comenta, eu não tenho acesso ao email do "comentador", só ao perfil do blogger dele. E ainda tenho que dar sorte se quiser ver o blog da pessoa, pois, por padrão, o perfil do blogger de todo mundo é bloqueado até que seu dono libere. Uma porcaria. Não sai do blogger ainda pra não perder meu querido pagerankzinho.

Daí eu sou obrigado a responder só nos comentários mesmo. A não ser quando a pessoa me informa seu email. Daí eu respondo nos comentários e aviso no email da pessoa.

Quanto às perguntas técnicas, eu procuro redirecionar ao fórum, pois é um saco ter que ficar lendo código em comentário de blog (ou em email). Mas mesmo assim, eu tento acompanhar o desenvolvimento da pessoa até o final. Eu não abandono.

- "Por favor, me ajude com meu script mico"

Como eu blogo

Bom, aí já complica a parada.
Eu sou lento demais nesse negócio de escrever. É por isso que vocês não vêem tantos posts aqui no El Micox. Este post por exemplo, até o momento, está levando 1 hora pra ser escrito. Enfim, não tenho o dom de blogar. Não sei nem qualé a diferença dessas parada de pingbáquio, traquibáquio, crezebéquio, etc.

O motivo inicial (e até hoje) deste blog é eu postar alguns códigos que desenvolvo, tanto para servir para mim mesmo (como um repositório dos meus próprios códigos) quanto pra ajudar as pessoas do mundo em prol da paz mundial (a parte da paz mundial é brincadeira).

Quando eu faço um código muito bão, que sei que o pessoal é cheio de dúvida, que não tem muitas coisas parecidas na net, ou que vá facilitar o progresso da humanidade, eu vou e perco algumas horas minhas blogando aqui.
O mesmo vale pra algumas dicas interessantes e curiosidades que eu vejo na net.

Enfim, é um repositório de código pra mim e pra outros desenvolvedores.

Tenho preguiça de ficar explicando o código. Daí tento colocar bastante comentário nos scripts.

Já chega macaco, cansei de ler

Pra dar continuidadeo pros 2 memes eu chamo uma galera do JavaScript. Não sei se eles já blogaram alguns desses memes, mas tá aí o convite. Não é obrigatório postar, é só um convite hehe:

Update: Lembrei de mais um brodi do JavaScript: Leandro Vieira.

Té mais micofriends.

Debugger Javascript e Teste de velocidade de seletores

2007-03-13T10:20:00.000-04:00

Ae, minha assinatura dos feeds do anieto2k tá sempre me trazendo ótimas novidades .

Dessa vez eu trago a vocês 2 coisas muito interessantes:

Javascript Developer Tools - Ferramenta online que te permite debugar e pausar seus Javascripts sem instalar nada. Isso é ótimo no desenvolvimento. Ainda te permite comprimir seu código (removendo espaços e enter'es) ou descomprimir (identando e colocando quebras de linha). Muito bom mesmo.
Teste de velocidade de seletores - O nome já diz tudo. Visite e veja.

Té a próxima povo.

Help pro Aldemir

2007-03-13T09:58:00.000-04:00

Ae, post emergencial. Navegando em alguns blogs hoje, ví que um brodi blogueiro (leitor aqui do El Micox) tá precisando de help. É o Aldemir.

Se vc mora em São Paulo, o cara tá precisando de sangue.

O nome completo dele é Aldemir Silva Ferreira.

Beneficiência Portuguesa fica na Rua Maestro Cardim, número 769, no bairro do Paraíso.

Pra ver se vc pode doar ou não, dá uma olhada no post do meio-bit.

É a blogosfera fazendo algo bom em vez de só ficar falando mal da Microsoft.

Sem querer ser insensível mas o cara vai tá com um super-pagerank quando sair dessa (e vai sair) heheh. Sorte ae velho.

Upload Assíncrono (iframe como AJAX) - 1 função simples

2007-03-12T13:46:00.002-04:00

Olá povo, conforme prometido, tô postando aqui uma função pra você fazer upload bem parecido com ajax (não é ajax!!). Função simples e fácil de usar.
Ela faz um upload assíncrono, ou seja, não recarrega a página toda (assim como o AJAX).
Quem usa alguns serviços do google como o GMail ou o GooglePages já conhece este recurso muito bem.

Editado 14/01/09: Já há uma nova versão disponível.
Veja em valeus.net/micox/micoxUpload2.htm (ainda não está muito bem testada).

Upload usando apenas AJAX não é viável no ambiente da Internet pois, por motivos de segurança, os navegadores por padrão não dão acesso ao sistema de arquivos para o JavaScript (se quiser descobrir como ativar esta característica não padrão, leia aqui, mas acredito não ser muito útil ajax upload dessa forma).

Esta minha função utiliza técnicas que envolvem iframes, mas não vou dar explicações aqui não. Explicações sobre como desenvolvi a função serão dadas em um novo post. Este post aqui é só para o código.

Ah, sim, no próximo post mostrarei também uma função um pouco mais customizável já pra quem entende melhor de JavaScript.

Testado no Firefox 2.0, Internet Explorer 6.0 e Opera 9.1. Pelamordedeus, quem puder testar em outros navegadores aí e quiser citar a experiência, faça este favor à humanidade e cite a experiência nos comentários. Obrigado.

1) Coloque o código abaixo em um arquivo chamado micoxUpload.js

/* funçõezinhas padrão pra facilitar */
function $m(quem){
 //apelido só pra não ficar repetindo o document.getElementById
 return document.getElementById(quem)
}
function remove(quem){
 quem.parentNode.removeChild(quem);
}
function addEvent(obj, evType, fn){
 //o velho do elcio.com.br/crossbrowser
    if (obj.addEventListener)
        obj.addEventListener(evType, fn, true)
    if (obj.attachEvent)
        obj.attachEvent("on"+evType, fn)
}
function removeEvent( obj, type, fn ) {
  if ( obj.detachEvent ) {
    obj.detachEvent( 'on'+type, fn );
  } else {
    obj.removeEventListener( type, fn, false ); }
} 
/* a que faz o serviço pesado */
function micoxUpload(form,url_action,id_elemento_retorno,html_exibe_carregando,html_erro_http){
/******
* micoxUpload - Submete um form para um iframe oculto e pega o resultado. Consequentemente pode
*               ser usado pra fazer upload de arquivos de forma assíncrona.
* Use a vontade mas coloque meu nome nos créditos. Licença Creative Commons.
* Versão: 1.0 - 03/03/2007 - Testado no FF2.0 IE6.0 e OP9.1
* Autor: Micox - Náiron JCG - elmicox.blogspot.com - micoxjcg@yahoo.com.br
* Parametros:
* form - o form a ser submetido ou seu ID
* url_action - url pra onde deve ser submetido o form
* id_elemento_retorno - id do elemento que irá receber a informação de retorno
* html_exibe_carregando - Texto (ou imagem) que será exibido enquanto se carrega o upload
* html_erro_http - texto (ou imagem) que será exibido se der erro HTTP.
*******/

 //testando se passou o ID ou o objeto mesmo
 form = typeof(form)=="string"?$m(form):form;
 
 var erro="";
 if(form==null || typeof(form)=="undefined"){ erro += "O form passado no 1o parâmetro não existe na página.\n";}
 else if(form.nodeName!="FORM"){ erro += "O form passado no 1o parâmetro da função não é um form.\n";}
 if($m(id_elemento_retorno)==null){ erro += "O elemento passado no 3o parâmetro não existe na página.\n";}
 if(erro.length>0) {
  alert("Erro ao chamar a função micoxUpload:\n" + erro);
  return;
 }

 //criando o iframe
 var iframe = document.createElement("iframe");
 iframe.setAttribute("id","micox-temp");
 iframe.setAttribute("name","micox-temp");
 iframe.setAttribute("width","0");
 iframe.setAttribute("height","0");
 iframe.setAttribute("border","0");
 iframe.setAttribute("style","width: 0; height: 0; border: none;");
 /* Não usei display:none pra esconder o iframe
    pois tem uma lenda que diz que o NS6 ignora
    iframes que tenham o display:none */
 
 //adicionando ao documento
 form.parentNode.appendChild(iframe);
 window.frames['micox-temp'].name="micox-temp"; //ie sucks
 
 //adicionando o evento ao carregar
 var carregou = function() { 
   removeEvent( $m('micox-temp'),"load", carregou);
   var cross = "javascript: ";
   cross += "window.parent.$m('" + id_elemento_retorno + "').innerHTML = document.body.innerHTML; void(0); ";
   
   $m(id_elemento_retorno).innerHTML = html_erro_http;
   $m('micox-temp').src = cross;
   //deleta o iframe
   setTimeout(function(){ remove($m('micox-temp'))}, 250);
  }
 addEvent( $m('micox-temp'),"load", carregou)
 
 //setando propriedades do form
 form.setAttribute("target","micox-temp");
 form.setAttribute("action",url_action);
 form.setAttribute("method","post");
 form.setAttribute("enctype","multipart/form-data");
 form.setAttribute("encoding","multipart/form-data");
 //submetendo
 form.submit();
 
 //se for pra exibir alguma imagem ou texto enquanto carrega
 if(html_exibe_carregando.length > 0){
  $m(id_elemento_retorno ).innerHTML = html_exibe_carregando;
 }
 
}

2) Inclua (chame) este arquivo no seu HTML

<script type="text/javascript" src="micoxUpload.js"></script>

3) Os parâmetros na hora de chamar a função são:

form - o form a ser submetido ou o ID de algum form que queira submeter.
url_action - url pra onde deve ser submetido o form. Tem a mesma função do parâmetro "action" de um form.
id_elemento_retorno - id do elemento que irá receber a informação de retorno.
html_exibe_carregando - Texto (ou imagem) que será exibido enquanto se carrega o upload
html_erro_http - Texto (ou imagem) que será exibido se der erro HTTP.

4) Pronto. Agora você várias formas de ativar o upload assíncrono. Vou exemplificar aqui 3 formas dentre as várias possíveis:

4.1) Uso básico. Você chama o upload a partir de um button (ou um input-type-button) em um form qualquer:

<legend>Uso b&aacute;sico</legend>
  <form>
    <input type="file" name="nome_qualquer" />
    <div id="recebe_up_basico" class="recebe">&nbsp;</div>
    <button onClick="micoxUpload(this.form,'upa.php','recebe_up_basico','Carregando...','Erro ao carregar'); return false;" type="button">testa</button>
  </form>
</fieldset>

4.2) Ativando o upload quando o campo file perde o foco (onblur):

<fieldset>
<legend>Uso no blur do input</legend>
  <form>
    <input type="file" name="nome_qualquer" onblur="micoxUpload(this.form,'upa.php','recebe_up_onblur','Carregando...','Erro ao carregar')" />
    <div id="recebe_up_onblur" class="recebe">&nbsp;</div>
  </form>
</fieldset>

4.3) Agora uma forma que deixará seu form/upload acessível mesmo que o javascript esteja desabilitado:

<fieldset>
<legend>Uso não intrusivo</legend>
    <form action="upa.php" target="_blank">
    <input type="file" name="nome_qualquer" onblur="micoxUpload(this.form,'upa.php','recebe_up_3','Carregando...','Erro ao carregar')" />
    <div id="recebe_up_3" class="recebe">&nbsp;</div>
  </form>
</fieldset>

Pronto. Customize aí agora e bora "uploadar". Bugs, erros, comenta ae.
Por favor, DÚVIDAS SOMENTE NO FÓRUM !!

No próximo post, a explicação e uma versão mais customizável pra quem já entende de JavaScript.

Tag fieldset é inline no IE

2007-02-27T14:04:00.000-04:00

Ae pessoal,

Brigando aqui com o script pra Upload Assíncrono, percebi uma coisa que eu não sabia e que merece ser citada rapidamente aqui.

Veja esta minha página em navegadores padrão e depois no Internet Explorer.

antes

Uso básico

depois

Parece que, para o IE, o elemento fieldset é inline. ?!?!

Então, assim como se costuma definir "* { margin:0; padding:0; }", não se esqueça de definir "fieldset { display: block; }" no início de todos os seus CSS também pra evitar qualquer tipo de problema "misterioso".

Não ví nenhum site falando a respeito, se alguém souber algum link pra indicar, falae.

Agora, de volta ao trabalho. Té mais.

Arkanoid só no JavaScript

2007-02-22T16:29:00.000-03:00

Opa. Post rápido pra saberem que eu tô vivo.

Bom, hoje vou falar de um joguinho feito inteiramente em DHTML. Só CSS, JavaScript e HTML.

Lembram-se do Arkanoid? Pois é. Fizeram ele online ralando no JavaScript. Usaram um pouco de flash mas é SÓ para fazer os sons.

Muuuito louco.

O site: http://www.schillmania.com/arkanoid/arkanoid.html
Sobre o projeto: http://www.schillmania.com/content/projects/dhtml_arkanoid/
Onde descobri: Anieto2K. Ótimo blog sobre o mundo JavaScript - em espanhol.

Informo também aos meus fieis (que eram 180 semana passada e agora caiu pra 120 segundo o FeedBurner) que estou desenvolvendo uma função simples pra Upload de arquivos assíncrono. É como o AJAX só que não usa o XMLHttpRequest.

Tô brigando com o IE aqui. Já já eu posto a função. Fiquem espertos.
Quem tiver precisando disso urgente aí, me manda um email que eu já passo a função beta mesmo.

Gostaria de ressaltar que: dúvidas, joguem no fórum iEvolution. Lá é mais fácil de desenvolver do que por email.

Por hoje é só. Té mais.

Web Developer tools no IE, OP e FF

2007-02-07T14:15:00.000-03:00

Atualmente todo desenvolvedor web que se preze conhece a incrivelmente salvadora WebDeveloper toolbar do Firefox. Em conjunto com a espetacular Firebug (excesso de adjetivo né? heh) e com com o DOM inspector, o desevolvedor pode achar exatamante onde está o erro/problema e corrigir de forma ultra-fácil. Seja problema no HTML, CSS ou JavaScript.

A bagaça começa a ficar complicada quando o problema SÓ acontece ou no Opera ou no Internet Explorer.
Estes dois navegadores não tem algo como um DOM inspector do Firefox ou as duas extensões citadas antes.

Mas eles tem umas ferramentazinhas que quase dão pro gasto: Opera developer tools e Internet Explorer Developer Toolbar Beta 3.

Internet Explorer Developer Toolbar Beta 3

Eu já tinha ele ha um bom tempo mas não tinha usado. Daí ontem baixei a versão nova (Beta 3), atualizada agora em janeiro.

Instalei o bixo no meu IE6, e como já devem imaginar, não chega aos pés do trio do Firefox (Webdeveloper, Firebug e DomInspector). Mas dá pros gastos. Na hora do aperto com o IE talvez ajude.

Ah, não cliquem nesse primeiro botão aí (chamado "select element by click") pois costuma travar o IE (pra variar).

Algo que chamou a atenção foi o fato de a extensão ter dado um visualizador de códigos descente pro IE.

Opera Developer tools

Os fãs do Opera que me desculpem, mas essas ferramentinhas aí conseguem ser pior que a IE Developer Toolbar beta 3 (que nome pequeno).

Tão mais pra Opera Gambiarra tools.

Além de serem um saco de usar, não mostram nada sobre a principal complicação do Opera que é o suporte ao JavaScript. Ou seja, como o Opera tem um ótimo suporte aos padrões e ao DOM (exceto JavaScript) esta ferramenta aí não vai ajudar muito não.

O IE Dev Toolbar eu recomendo instalar pois pode te ajudar algum dia, mas estas ferramentas do Opera aqui não compensa perder tempo não.

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

Eeeeexta post: Há também o Web Accessibility toolbar para o IE, que parece ser porreta, mas o mico aqui não teve muito tempo de testar não.

Se você tá sem assunto pra fazer uma postagem nova no seu blog, aproveita ae e fala melhor dessa toolbar ae. Parece que a danada tem até negócio pra JavaScript. Me pareceu bem completa.

Ah, fala das outras duas aí acima também que eu nem falei quase nada né? "Pode crê mico, pode crê. ".

Té mais povo.

Micox News

2007-02-07T08:08:00.000-03:00

Opa opa.
Um resuminho rápido de novidades que eu ví por aí que merecem ser postadas antes de eu começar a cuspir códigos.
Sei que o pessoal vem aqui no El Micox em busca de códigos e não de novidades, por isso decidi resumir tudo neste único post ("pode crê").

Leia até o fim. É rapidão e tem muita coisa interessante!

Conversor universal de mídias online

O danado se propõe a converter diversas mídias em diversas outras mídias (ac3, aiff, mp3, mp4, ogg, wma, etc, etc etc).
E tudo isso online, sem instalar porcaria nenhuma no seu computador, sem ter que ficar horas procurando programas chatos. Confere ae: Conversor universal media-convert.

By Lucasbr no fórum iEvolution.

Getting Real em português

Bom, tá todo mundo falando sobre este livro ae sobre desenvolvimento escrito pelo povo que desenvolveu o Ruby on Rails. Dae tava navegando pelos meus feeds e o Raphamaster me mostra um link pro bixo traduzido. Como meu inglês ainda não é lá essas coisas, vai ficar mais fácil pra eu poder ler o tal do livro.

Edite sua página direto no Browser

Desenvolve em linguagem server-side (php, asp, jsp, etc) e fica difícil de acompanhar como é que tá ficando seu layout?
A cada alteração que você faz, tem que ficar vendo se ficou bonito?
Tem que imaginar o design só olhando infinitos laços (for, while) direto no código?
Seus problemas acabaram!!

Graças a uma postagem do Pinceladas, descobri uma técnica básica (mas genial) do anieto2k.
É só abrir a página desejada e digitar no navegador o seguinte endereço:

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Pronto, agora você pode editar textos, redimensionar imagens pra ver como fica melhor seu layout.

Compare tudo o que quiser

Nesse período de Web2 agente vê zilhões de serviços novos, a maioria copiada de idéias gringas. Bom, mas achei uma interessante.
Que tal comparar "qual a banda mais famosa" (na web)? Qual framework ajax é mais fácil? etc, etc?
É isso que o ComparaTudo se propõe a fazer.

Você digita algumas palavras chave e ele pesquisa na net onde tem mais ocorrências combinando aquelas palavras.
Acredito que a pesquisa dele seja baseada no Google, sei lá.
Pode apresentar alguns resultados falhos e alguns errinhos ainda, mas a idéia em sí é ótima e o visual do site é muito bom.

Na comparação da biblioteca ajax mais famosa, por exemplo, adicionem o "Micox" para comparação lá.
Minha função fácil aparece com 98,25% (primeirão hehahe). Acredito que é por ter pouca ocorrência de "Micox" na Web.
O algoritmo deles deveria verificar a quantidade de ocorrências também pra não haver este tipo de discrepância (se bem que foi uma discrepância boa para o mico heheh).
Outro erro, é que não salvou meu nome na pesquisa lá. Se você entrar novamente nesta comparação, o "Micox" não estará mais lá. :(

Descoberto na área de divulgação do fórum iEvolution.

//Calma que as notícias tão acabando. Continua lendo ae caramba.

Lançado o El Micox international tabajara

Opa. Visando a dominação do mundo eu lancei o El Micox Codes - blog em inglês do Micox.
Como meu conhecimento de inglês não é lá essas coisas, só postarei os códigos.
Ou seja, se você não quer ficar lendo este tipo de baboseira de notícia e só quiser os códigos, é só ir pro MicoxCodes.

Se você é uma alma caridosa e quiser corrigir meu inglês "nas coxa" lá é só me mandar um email, comment, etc.
//Ah, vota no Digg do bixo lá vai, vai...

Campanha: Blogs - mídia de credibilidade (abandone os portais)

Sensibilizado por um post no techbits, e pelo drama da garota sem fio, eu gostaria de alguém com maior cacífe bloguístico que eu lançasse uma campanha tipo "Leia blogs - abandone os portais", sei lá...
Lançar figurinha pra todo mundo colocar no blog e toda aquela coisa virótica que os blogs fazem.

A muito tempo que minhas principais fontes de informação são os blogs e não os malditos portais, que só colocam notícias sem links, sem futuro, sem nada.
Acho que tá faltando à galera blogueira do Brasil, fazer uma união nessa forma.

Tá cheio de post disperso sobre o assunto, mas nenhuma união pra fortalecer o "movimento" ("pode crê véio").

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

Bom, acho que agora acabaram as notícias. Vai trabalhar rapá!

InnerHTML em Select Option

2007-01-29T07:46:00.000-03:00

Opa.

Seguindo uma postagem do Julio Greff sobre o velho problema (bug) do IE ao trabalhar com innerHTML e a tag select, vou mostrar aqui minha solução que eu já tinha feito na época da minha função simples pra ajax.

Edit 28/08/2007: Segunda versão corrigindo bugs pra ativar o selected, classes e styles no IE também

Pequena explicação do problema: às vezes, é necessário agente preencher uma tag select com options através de innerHTML. Pra variar, o IE dá problema com isso. Tá certo que innerHTML não é uma propriedade DOM padrão, mas se o Internet Explorer decidiu implementar ela, deveria, pelo menos, ter implementado direito hehe. Bah, deixa de reclamação mico.

Exemplo:

document.getElementById("meu_select").innerHTML = "<option value='1'>não</option> <option value='2'>funfa</option>";

O script acima deveria colocar dentro da select chamada "meu_select" duas opções ("não" e "funfa"). Só que isso não funfa no IE. O jeito certo então é adicionar através de appendChild!!!

Mas, calma, não se desespere, não será necessário você ficar quebrando a cabeça com infinitos appendChild. O Mico resolveu o problema pra você. Basta adicionar minha função abaixo no seu script e chamá-la passando 2 parâmetros: o ID do select que você quer preencher e o innerHTML que você quer colocar dentro deste select.

A função vai cuidar de tudo, como se você estivesse setando através da propriedade innerHTML mesmo, inclusive os atributos do option.

Exemplo de uso (baseado no exemplo anterior que não funfava):

var inner = "<option value='1'>Agora</option> <option value='2'>funfa</option>"; 

select_innerHTML(document.getElementById("meu_select"),inner);

A função mágica que faz isso. Adicione copie no seu script:

function select_innerHTML(objeto,innerHTML){
/******
* select_innerHTML - corrige o bug do InnerHTML em selects no IE
* Veja o problema em: http://support.microsoft.com/default.aspx?scid=kb;en-us;276228
* Versão: 2.1 - 04/09/2007
* Autor: Micox - Náiron José C. Guimarães - micoxjcg@yahoo.com.br
* @objeto(tipo HTMLobject): o select a ser alterado
* @innerHTML(tipo string): o novo valor do innerHTML
*******/
    objeto.innerHTML = ""
    var selTemp = document.createElement("micoxselect")
    var opt;
    selTemp.id="micoxselect1"
    document.body.appendChild(selTemp)
    selTemp = document.getElementById("micoxselect1")
    selTemp.style.display="none"
    if(innerHTML.toLowerCase().indexOf("<option")<0){//se não é option eu converto
        innerHTML = "<option>" + innerHTML + "</option>"
    }
    innerHTML = innerHTML.toLowerCase().replace(/<option/g,"<span").replace(/<\/option/g,"</span")
    selTemp.innerHTML = innerHTML
      
    
    for(var i=0;i<selTemp.childNodes.length;i++){
  var spantemp = selTemp.childNodes[i];
  
        if(spantemp.tagName){     
            opt = document.createElement("OPTION")
    
   if(document.all){ //IE
    objeto.add(opt)
   }else{
    objeto.appendChild(opt)
   }       
    
   //getting attributes
   for(var j=0; j<spantemp.attributes.length ; j++){
    var attrName = spantemp.attributes[j].nodeName;
    var attrVal = spantemp.attributes[j].nodeValue;
    if(attrVal){
     try{
      opt.setAttribute(attrName,attrVal);
      opt.setAttributeNode(spantemp.attributes[j].cloneNode(true));
     }catch(e){}
    }
   }
   //getting styles
   if(spantemp.style){
    for(var y in spantemp.style){
     try{opt.style[y] = spantemp.style[y];}catch(e){}
    }
   }
   //value and text
   opt.value = spantemp.getAttribute("value")
   opt.text = spantemp.innerHTML
   //IE
   opt.selected = spantemp.getAttribute('selected');
   opt.className = spantemp.className;
  } 
 }    
 document.body.removeChild(selTemp)
 selTemp = null
}

Bugs? Grita nos comments ae. Dúvidas? Joga no fórum e me avisa.
Não se esqueça de conferir também a solução do Julio para este problema.

Objetivos / Resoluções 2007

2007-01-25T08:48:00.000-03:00

Oooaa.

Bom, já terminei de responder todos os comentários/emails/perguntas feitas na minha ausência (acho, se eu tiver esquecido alguma comentem ae), então navegando no meu netvibes eu descobri qual será meu primeiro post pós-férias: fui tagueado pelo brodi Bruno Dulcetti.

Achei que não ia entrar na brincadeira, mas acabei sendo convidado a aumentar o monstro criado pelo Bruno Alves.

Fiquei honrado em ter sido citado ao lado de power blogueiros que eu admiro muito e agora vou fazer parte da árvore também hehe.

Bom, chega de papo. Tão aí meus objetivos pra 2007. Tomara que eu consiga:

Desenvolver meus diversos outros projetos para a internet
Ter uma festa de casório tranquila (sim, sim, to indo... hehe)
Transformar o iEvolution no fórum de desenvolvimento Web mais forte da net.
Aprender a organizar melhor meu tempo (o principal).
Pro blog (me permitam detalhar):
- Implantar o novo layout
- Versão em inglês
- Inúmeras postagens que eu tenho na cabeça
- Inúmeros códigos pra postar

Agora vou indicar uma galera muito boa que eu leio e recomendo:

Tá um pouco atrazado (já devia ser resoluções pro carnaval hehe) mas bora lá.

Voltando aos poucos das férias

2007-01-23T14:28:00.000-03:00

Ae pessoal,

Após umas regenerativas férias e após conseguir um modem emprestado da LGCom (sim, emprestado por tempo indeterminado), o mico tá voltando aos poucos ao trabalho.

Tá cheio de email pra ler, feeds pra ler, mensagens em diversos fóruns pra ler, comentários aqui no blog esperando resposta, dúvidas, etc.

Peço paciência de quem me mandou algum email ou mensagem no blog. Tô lendo aos poucos.

Também gostaria de informar que já fiz o novo visual do blog, agora é só implantar no blogger. Até que ficou bonitim.

Já já eu volto com tudo nos tutoriais. Calma ae povo. :)

Férias

2007-01-16T16:34:00.000-03:00

Ou pessoal, post rápido. Tô sumido por que tô de férias e tô sem modem. Logo logo volto à ativa. Desculpem a pressa ae.

TCC sobre WebStandards / Tableless

2007-01-04T14:33:00.000-03:00

Opa pessoal, como prometido vou postar finalmente meu Trabalho de Conclusão de Curso (TCC) de Tecnologia em Redes de Comunicação do CEFET-GO sobre Padrões Web.

Editado 18/10/07: Corrigindo o link.

Vale lembrar que já re-aprendi melhor muitos dos conceitos escritos no trabalho. Ênfase na parte do Histórico da Web e do HTML que foi uma das partes mais difíceis de fazer e organizar (eu já havia apresentado uma prévia deste histórico em um dos meus primeiros posts aqui no El Micox).

De forma a facilitar o entendimento, tentei dividir/basear a metodologia Web Standards através de três pilares principais:

Utilização dos padrões definidos pela W3C;
Acessibilidade e universalidade;
Separação entre conteúdo (XHTML), apresentação visual (CSS) e comportamento (JavaScript/ECMAScript);

O Resumo / Abstract do trabalho foi:

O trabalho apresenta a metodologia Web Standards para o desenvolvimento de páginas Web. Tal metodologia baseia-se no uso correto dos padrões definidos pela W3C (World Wide Web Consortium). Esta forma de desenvolvimento se contrapõe a um método de desenvolvimento bastante comum atualmente, que utiliza tabelas para montar a estrutura da página. Na metodologia dos padrões Web os elementos da página são utilizados com o propósito definido pela W3C. É prezada usabilidade e a separação entre elementos de conteúdo, visuais e de comportamento. Como, neste modelo de desenvolvimento, as tabelas não são utilizadas para montar a estrutura da página, mas apenas em dados tabulares, criou-se o termo Tableless, em contrapartida à técnica que utiliza tabelas.

O trabalho está organizado em 8 capítulos:

No cap. 1 é feita a introdução do trabalho e uma breve descrição de cada capítulo.
No segundo capítulo apresentamos alguns conceitos sobre a Web, bem como o seu histórico. E, por fim, as principais diferenças entre o HTML e o XHTML.
No terceiro capítulo descrevemos o método de desenvolvimento que utiliza tabelas na montagem da estrutura da página e seus principais problemas.
No quarto capítulo apresentamos a solução para estes problemas utilizando a metolodogia Web Standards, seus princípios básicos e seus benefícios.
No quinto capítulo exemplificamos o desenvolvimento de uma página baseada nos padrões Web.
No sexto capítulo apresentamos uma comparação entre o método de desenvolvimento com tabelas e o método baseado na metodologia Tableless.
No sétimo capítulo descrevemos as principais dificuldades para uma maior adoção dos padrões Web.
No oitavo capítulo apresentamos as conclusões e as sugestões para trabalhos futuros.

A apresentação do trabalho vocês já conheceram, agora o link para o texto em PDF é este aqui:

Web Standards - Os Benefícios do desenvolvimento Web baseado na metodologia Tableless.

Até que enfim terminei essa guerra do TCC. Ufs carambolas.

Vocês já sabem né? Críticas, dúvidas, sugestões é só comentar que eu sempre vejo e respondo. Té.

Pontuação negativa no Rec6 já!

2007-01-03T13:39:00.000-03:00

Movimento a favor da pontuação negativa no Rec6, já!

Motivos - não - faltam.

Espero que eu não seja o único que queira este recurso. Então votem aí!!

//Aos meus visitantes que não querem nem saber do Rec6, mas sim dos meus códigos ajax, javascript, WS e dicas, me desculpem. :-) Logo logo tô de volta.

Bugs CSS no IE7

2007-01-03T07:27:00.000-03:00

Sim, bugs mesmo, e não falta de suporte aos padrões (isso todo mundo já sabe).

Uma listinha:

O mais legal é que a página de feedback do IE tá fora do ar. Eles realmente se importam com os desenvolvedores.

Bom, eu não baixei o Internet Explorer 7 por pura preguiça e falta de necessidade. Também tem a questão que eu não quero perder meu IE6, mas não tô afim de fazer aquelas mágicas complicadas pra usar o IE6 e o IE7 ao mesmo tempo (se alguém souber uma mágica facim e que funcione, me passa ae :-) ).

Quem achava que o IE7 viria nos salvar do IE6 deve estar muito triste. Agora, em vez de ter que se preocupar só com um (1) navegador ruim, temos que nos preocupar com dois (adiciona 1 à conta aí quem testa pro IE5 também).

Só nos resta torcer pro IE7 ser pouco baixado. Assim teremos que fazer menos testes e teremos menos preocupações.

Força para o mundo não-IE! Mesmo que o povo do FireFox seja só 14%, estes 14% fazem muito mais barulho na web pois são hard-users de tecnologia e internet, como disse o Elcio do Tableless.

Caixa Econômica Federal corrige i-Banking

2006-12-29T08:12:00.000-03:00

Lembram-se da minha reclamação de que a Caixa Econômica Federal queria, de certa forma, que eu gastasse R$500,00 em licença do Windows para que eu pudesse usar o Internet Banking dela?

Então, graças a diós (não sei se foram graças às minhas reclamações), ela resolveu a questão.

Agora, ela identifica o navegador do usuário e, só solicita a instalação do tal plugin se ver que o cara já está usando o Internet Explorer.

Como eu tinha reclamado antes, achei justo fazer este novo post informando que eles resolveram o problema.

Bom para nós usuários.
Espero que algúem tenha levado um CR lá no depto. de tecnologia da Caixa. :-)

//Ah, terminei meu TCC sobre WebStandards. Já publiquei a apresentação e estou esperando o ano novo pra publicar o texto em PDF aqui pra vocês.

Rec6 - Botão de número de votos já mandando o título

2006-12-21T15:24:00.000-03:00

Opa.

Sei que estou falando demais nesse Rec6 mas, olhando minha postagem anterior, ví que dava pra fazer um upgrade que ia auxiliar a toda comunidade que tem o botão de número de votos do Rec6 no seu site.

Bom, no capítulo anterior (heheh postagem anterior), vimos que não precisamos ficar presos ao layout oferecido pelo script do Rec6 e aprendemos também a guardar em uma variável JavaScript a quantidade de votos de qualquer link no Rec6.

Mas, ví que, ao clicar no link do botão oferecido pelo script, só vai a URL da página para a indicação, não vai o título automaticamente. O que dá trabalho a nosso visitante que indica o post (ou a nós mesmos quando somos nós que indicamos). Temos que escrever toooodo o título (ou usar a técnica milenar do Ctrl+C Ctrl+V).

Chega de blablablá, o truque consiste apenas em alterar o href dos 2 links presentes no botão, via JavaScript. Simples não? Por que o mico não pensou nisso antes? Mico burro.

O script deles gera um botão sem o parâmetro 'titulo', nosso script adiciona ao link do botão o atributo 'titulo'. É claro que pra fazer isto cada botão precisa estar dentro de algo (div) que tenha um nome único (ID). Mão na massa:

<div class="cod_syxt" id="cod_syxt_js">
 <script language="JavaScript" src="http://rec6.via6.com/link.php?action=widget&url=http://sua_url" type="text/javascript"></script>
</div>
<script>
 links_rec6 = document.getElementById("cod_syxt_js").getElementsByTagName("a");
 ptos = links_rec6[0].innerHTML;
 links_rec6[0].href = links_rec6[0].href + "&titulo=" + "Seu Titulo";
 links_rec6[1].href = links_rec6[1].href + "&titulo=" + "Seu Titulo";
</script>

Se você tiver mais de um botão na mesma página, tem que usar alguma coisa pra dar um nome diferente pra cada div pai dos botões. Eu usei os IDs das postagens. Veja abaixo.

Pro pessoal do Blogger:

<div class="cod_syxt_css" id="cod_syxt_js_<$BlogItemNumber$>">
 <script language="JavaScript" src="http://rec6.via6.com/link.php?action=widget&url=<$BlogItemPermalinkUrl$>" type="text/javascript"></script>
</div>
<script>
 links_rec6 = document.getElementById("cod_syxt_js_<$BlogItemNumber$>").getElementsByTagName("a");
 ptos = links_rec6[0].innerHTML;
 links_rec6[0].href = links_rec6[0].href + "&titulo=" + "<$BlogItemTitle$>";
 links_rec6[1].href = links_rec6[1].href + "&titulo=" + "<$BlogItemTitle$>";
</script>

Não sei muito de WordPress mas arrisquei aqui:

<div class="cod_syxt_css" id="cod_syxt_js_<?php the_ID(); ?>">
 <script language="JavaScript" src="http://rec6.via6.com/link.php?action=widget&url=<?php the_permalink(); ?>" type="text/javascript"></script>
</div>
<script>
 links_rec6 = document.getElementById("cod_syxt_js_<?php the_ID(); ?>").getElementsByTagName("a");
 ptos = links_rec6[0].innerHTML;
 links_rec6[0].href = links_rec6[0].href + "&titulo=" + "<?php the_title(); ?>";
 links_rec6[1].href = links_rec6[1].href + "&titulo=" + "<?php the_title(); ?>";
</script>

Veja esse negócio funcionando ao passar o mouse sobre o botão que tem aqui no meu blog (aproveita e clica heheh). Veja na barra de status que, além do parâmetro 'url', agora também temos o parâmetro 'titulo'.

Bugs? Grita nos comentários ae. Té. (Agora acho que já acabaram minhas postagens sobre Rec6).

Codigo

2006-12-21T10:50:00.000-03:00

A essência: www.codigo.com

Muito profundo isso. Profundo e recursivo. heheheaheh
//O menor post da história do 'El Micox'.

Rec6 - Pegando o número de votos de qualquer postagem

2006-12-19T15:25:00.000-03:00

Opa pessoal,

Lembram-se da minha reclamação do botão do Rec6 com código feio?

Pois é. O tópico ficou 1 dia e meio em primeiro lugar no Rec6, mandei mensagem para os caras do syxt, mas nada de alguém mostrar alguma solução (como escolha de skins para o botão, ou uma página para recuperar o valor diretamente, ou pelo menos, um código menos feio). Daí, nós mortais, temos que nos virar pra resolver a questã. hehehee

Implantei a solução no meu blog, quase que eu esqueço de falar pra vocês aqui comé que foi, mas lembrei: pegando o número de votos ~~do seu post~~ de qualquer post no Rec6 via JavaScript.

Bora ao trabalho.

Bom, primeiramente identei este belo código gerado pelo script do Rec6:

<div style="font-family: Trebuchet MS, Tahoma, Verdana, Arial; background-image:url(http://rec6.via6.com/imagens/pontos_bg.gif); background-repeat:no-repeat; text-align:center;width:57px;height:80px;padding:3px 2px 3px 2px; line-height:normal;" valign="top"> <div style="color: #ffc317; font-size: 21px; margin: 0; padding: 0"> <a href="http://rec6.via6.com/link.php?nv=1&url=http://elmicox.blogspot.com" style="text-decoration:none; color: #ffc317;font-size: 21px; "> 0 </a> </div> <div style="color: #ffc317; font-size: 12px; margin: 0; padding: 0"> Pontos </div> <div style="margin: 10px 0px 0px 0px; color: #A5A5A5;"> <a href="http://rec6.via6.com/link.php?url=http://elmicox.blogspot.com"> <img src="http://rec6.via6.com/imagens/botao_subir.gif" border="0" /> </a> </div> </div>

Fica melhor assim né?

<div style="font-family: Trebuchet MS, Tahoma, Verdana, Arial;
  background-image:url(http://rec6.via6.com/imagens/pontos_bg.gif); background-repeat:no-repeat;
  text-align:center;width:57px;height:80px;padding:3px 2px 3px 2px; line-height:normal;" valign="top">
  <div style="color: #ffc317; font-size: 21px; margin: 0; padding: 0">
    <a href="http://rec6.via6.com/link.php?nv=1&url=http://elmicox.blogspot.com"
      style="text-decoration:none; color: #ffc317;font-size: 21px; ">
      0
    </a>
  </div>
  <div style="color: #ffc317; font-size: 12px; margin: 0; padding: 0">
    Pontos
  </div>
  <div style="margin: 10px 0px 0px 0px; color: #A5A5A5;">
    <a href="http://rec6.via6.com/link.php?url=http://elmicox.blogspot.com">
      <img src="http://www.syxt.com.br/rec6/imagens/botao_subir.gif" border="0" />
    </a>
  </div>
</div>

Agora já fica fácil perceber que pra pegar o número de votos via JavaScript é só pegar o innerHTML da primeira tag A.
Pero antes, agente tem que colocar uma div ao redor do script, para nomeá-la e ser possível chegar ao código gerado do script do Rec6.

Ficará assim:

  <div id="cod_syxt">
    <script language="JavaScript" src="http://rec6.via6.com/link.php?action=widget&url=<$BlogItemPermalinkUrl$>" type="text/javascript"></script>
  </div>
  <!-- pegando a quantidade de pontos no Rec6 e jogando na var ptos -->
  <script>ptos = document.getElementById("cod_syxt").getElementsByTagName("a")[0].innerHTML;</script>

Veja que eu coloquei uma div ao redor do script (chamada cod_syxt). Daí todo código javascript gerado pelo Rec6 ficará aí dentro. Depois é só buscar o primeiro elemento A e guardar na variável chamada "ptos".

Como usar a variável "ptos"? Ué, do jeito que você quiser.
Por exemplo, assim:

<p>Olá, tenho <script>document.write(ptos)</script> pontos no Rec6. <a href="link_do_rec6">Clique aqui</a> para aumentar meus pontos</p>

Beleza né? Sem mexer com PHP ou com plugin (é claro que existem ótimos plugins para o Wordpress do Rec6 se quiser usar).

Se ainda quiser, também pode mexer ou ocultar o código gerado do Rec6 via CSS.
Por exemplo:

#cod_syxt { display: none; /* oculta o botão do rec6, mas a variável ptos continua valendo */}

#cod_syxt { width: 63px; margin: 4px 10px; float: left; /* coloca o botão à esquerda do texto */}

(Perceba que se pode pegar a quantidade de votos de qualquer link, é só mudar o link.)

Se procura dicas sobre como inserir o código do Rec6 no wordpress ou blogger, veja este post.

Dúvidas, erros ou comentários posta ae :)