Monthly ArchiveOctober 2007



SOS Javascript 31 Oct 2007 05:50 am

SOS Javascript #2 - Edit in place

Recebi do Maicon Carlos, que não me deixou nenhum link para site seu para referenciar o seguinte email:

“Rodrigo..analiso seu blog a tempo e hoje vou sugerir algo….

http://www.nick-dunn.co.uk/files/editinplace/editinplace.htm

um editar em ajax (Edit in Place)….seria interessante pois você poderia adicionar e melhorar seu framework.

particularmente eu estou procurando algo sobre isso, e no brasil não achei nada, vou continuar tentando aqui..se você fazer a gente pode trocar idéias, seria um post interessante na sua coleção de “post’s de qualidade”..

Bom Maicon, primeiro agradeço pelo “posts de qualidade”, e seguindo, neste site eles utilizaram o Prototype Framework, mais uma biblioteca gráfica, e um script personalizado montado sobre essa plataforma, totalizando 72kb de código.

Eu usei no meu script alguns códigos prontos que já tinha, os quais serão base para minha biblioteca javascript, o dia que der…
Estes scripts estão em fs.js

E criei o arquivo editinplace.js para montar a lógica da coisa.

No final o código ficou assim:

// Edit in Place
// Por Fazedor de Site
// http://www.fazedordesite.com
function removeForm(){
	// retiramos o formulario de dentro do span
	$id("form_altera").parentNode.removeChild($id("form_altera"));
}
function mostra(){
	// verificamos se ja existe o formulario
	if(!$id("form_altera")){
		// muda a propriedade CSS display para none para desocupar o espaço
		$id("editinplace").style.display='none';

		// criamos um nome objeto span dentro do pai do span que ja existia
		// no nosso caso o pai é a tag

		$obj.create("span","formulario",$id("editinplace").parentNode);

		// criamos um form dentro do novo span
		$obj.create("form","form_altera",$id("formulario"));
		// setando os atributos do formulario
		$id("form_altera").setAttribute("name","form_altera");
		$id("form_altera").onsubmit = function(){
			$id("editinplace").style.display="";
			effects.fade(null,"editinplace",0,100);
			fsAjax("altera.php","editinplace","Alterando","POST", "form_altera",1,"removeForm()")
			return false;
		}

		// criamos um input dentro do primeiro filho da SPAN de id formulario
		// no nosso caso sera a tag form
		$obj.create("input","valor",$id("formulario").firstChild);
		// atribuimos as propriedades desse input
		$id("valor").setAttribute("name","valor");
		$id("valor").setAttribute("type","text");
		$id("valor").style.width='300px';
		// aqui atribuimos a caixa de texto a string a ser editada
		$id("valor").setAttribute("value",$id("editinplace").innerHTML);

		// inserimos uma quebra de linha
		$obj.create("br",null,$id("formulario").firstChild);	

		// criamos um input dentro do primeiro filho da
		// SPAN de id formulario
		// no nosso caso sera a tag form
		$obj.create("input","enviar",$id("formulario").firstChild);
		// atribuimos as propriedades desse input
		$id("enviar").setAttribute("name","Alterar");
		$id("enviar").setAttribute("value","Alterar");
		$id("enviar").setAttribute("type","submit");
	}
}
function inicia(){
	// quando clicado
	$id("editinplace").onclick = function(){
		// escondemos o SPAN que contém o texto para clicar
		// mandando ir da opacidade 100 a 0 com efeito fade
		// maiores detalhes ver o arquivo fs.js
		effects.fade(null,"editinplace",100,0,"mostra()");
	}
	// pega o evento do mouse sobre o span
	$id("editinplace").onmouseover = function(){
		this.style.background = "#EDF4FC";
		this.style.cursor = "pointer";
	}
	// pega o evento do mouse saindo do span
	$id("editinplace").onmouseout = function(){
		this.style.background = "#FFF";
		this.style.cursor = "";
	}

}
// Ouvinte que aguarda o carregamento da pagina
// ao ser carregado o HTML chama a funçao "inicia"
addEvent(window,"load",inicia);

Este é um exemplo que fiz rapidamente, baseado na idéia, não no código, da sugestão que recebi.

Ou seja, serve para um local ser editado, e é obstrutivo, ou seja, sem javascript, sem edição, porém o conteúdo é visualizado.

Serve para sistemas específicos, mas se acharem que a idéia é interessante podemos evoluir e melhora-la tranquilamente.

Ah, e o nosso script sem compactações ficou com 9,13kb

:D

Sigam o link abaixo para ver a pagina de exemplo e baixar o código:

Edit in place Javascript

follow the white rabbit…

Javascript & Desenvolvimento 30 Oct 2007 06:19 am

Fim do primeiro desafio de linguagens Webly

Para quem não lembra, postei aqui no blog mesmo sobre um desafio de linguagens que estava ocorrendo no forum Webly, onde deveríamos sortear jogos entre 16 seleções pré definidas, até chegar no campeão.

Fiz em Javascript e terminei com 347 caracteres e o código segue abaixo para quem quiser ver:

Comentado:

// Coloca de forma aleatoria o ARRAY e gera aleatoriamente os gols
function c(){
    return Math.floor(Math.random()*6)-1;
}
// Aqui crio uma string, que depois explode com split, vira uma array,
// que mando sortear usando a funcao "c"
t="Itália,França,Alemanha,Portugal,Brasil,Argentina,Inglaterra,Ucrânia,Espanha,
Holanda,Suíça,Suécia,Austrália,México,Uruguai,Gana".split(",").sort(c);

// atalhos para os textos
a = ["Oitavas de f","Quartas de f","Semif","F"];
f = "inal:";

//atalho para usar quebra de linha
q="n";
// iniciando a variavel que guardara todo o texto que sera exibido
// no final
j="";

// um laço para rodar entre todas as etapas
for(i=0;i<4;i++){
    // coloco quebra de linhas, depois o texto indicando
    // que etapa estamos
    // Oitavas, quartas, semi e final
    j+=q+q+a[i]+f;

    // Inicio array temporario
    w=[];

    // Segundo laço para varrer o array, sortear os gols e
    // eliminar os perdedores
    for(o=0;o
        // enquanto os gols nao forem diferentes fica preso no laço
        while((p=c()+1)==(s=c()+1));

        // Poe o resultado e mostra o vencedor de cada jogo, tudo
        // dentro da string
        // e ainda guarda o vencedor no array temporario “w”
         j += q+t[o]+” “+p+” x “+s+” “+t[o+1]+” - “+(w[o/2] = p>s ? t[o] : t[o+1]);
    }
    // passa o valor do array temporario “w” para o principal “t”
    t=w;
}
// Imprime na tela todos os resultados
alert(j+” campeão”);

Somente o código:

function c(){
    return Math.floor(Math.random()*6)-1;
}
t="Itália,França,Alemanha,Portugal,Brasil,Argentina,Inglaterra,Ucrânia,Espanha,
olanda,Suíça,Suécia,Austrália,México,Uruguai,Gana".split(",").sort(c);

a = ["Oitavas de f","Quartas de f","Semif","F"];
f = "inal:";

q="n";
j="";
for(i=0;i<4;i++){
    j+=q+q+a[i]+f;

    w=[];

    for(o=0;o
        while((p=c()+1)==(s=c()+1));

         j += q+t[o]+” “+p+” x “+s+” “+t[o+1]+” - “+(w[o/2] = p>s ? t[o] : t[o+1]);
    }
    t=w;
}

alert(j+” campeão”);

Loucura total, mas foi muito divertido participar do desafio.

Geral 28 Oct 2007 07:00 pm

Opa Pagerank subindo

Aqui estou eu relaxando de uma semana que realmente foi absurda, trabalho até onde não existia, não pude nem me dedicar muito ao blog, estive participando de uma feira aqui pela empresa onde trabalho, onde ganhamos o Premio Vespucci de Criatividade, embora eu não saiba nem o site deste festival, foi algo interessante, difícil é ficar ouvindo 2 horas de palestras chatas em italiano… mas enfim, como dizia estava aqui relaxando, domingo, a noite, tranquilo, comendo mandioca, importada claro, pois aqui não tem disso, e abro meu blog pra matar a saudade, e não é que o Pagerank foi pra 4, coisa linda, assim do nada, fiquei muito satisfeito e animado, logo prometo uma próxima semana muito mais ativa, podem cobrar!

Enquanto isso, continuo a descansar um pouco..

Agradeço ao Yogodoshi, li seu post, e recebi o convite ao meme e responderei, mas não hoje, hoje é domingo, e domingo deveria ser proibido fazer qualquer coisa.

Geral 23 Oct 2007 06:25 am

Google e suas mensagens de erro

Erro googleEssa pelo menos para mim é inédita.
Que o google tem mensagens de erro das mais estranhas e engraçadas, disso acho que ninguém duvida, mas essa mensagem de erro do Google é realmente esquisita, vejam:

“Desculpe…

… mas não é possível executar essa ação no momento. Estamos recebendo pedidos automatizados de conexão gerados por um vírus ou spyware, e aparentemente seu computador ou rede foram infectados.

Tente acessar essa página novamente dentro de alguns instantes. Ela voltará ao normal assim que possível. Neste ínterim, sugerimos que você use um aplicativo antivírus ou de detecção de spyware para checar se seu computador está livre de vírus e outros softwares predatórios.

Lamentamos o inconveniente. Esperamos sua que você volte ao Google em breve! ”

Não, não é excesso de trafégo na rede, você não fez nada errado, mas para provar que realmente é verdade o que estou escrevendo aqui, que não fiz uma montagem no photoshop, segue o link para a busca que resulta na mensagem de erro.

Boa semana a todos :D

Javascript & Desenvolvimento 17 Oct 2007 12:29 pm

1º Quebra-pau De Linguagens Webly, Are you ready?

Estou postando aqui o link do iEvolution/Webly Fóruns, exatamente no ponto onde fala do Desafio de linguagens Webly.

O objetivo desse desafio será avaliar não só o programador, mas também as facilidades de cada linguagem.

Consiste basicamente em formular um código que pega 16 seleçoes de futebol, de nomes fixos e já informados, ordena-las como se fosse uma copa do mundo.
Começando das oitavas de final, fazer essas 16 fazer um jogo e se eliminarem, indo paras quartas, depois semi, e a final.
O código tem que randomizar as oitavas de final, e os resultados das partidas, sendo que os resultados devem conter valor máximo de 5.

Os detalhes de forma exata poder ver no fórum do iEvolution/Webly Fóruns.

Se você sabe programar em qualquer linguagem participe, não ganha nada além do prazer da disputa, mas é muito divertido.

Ganha quem fizer com menor numero de caracteres, caracteres como o $ do php não contam para equilibrar a disputa.

Eu em Javascript estou com um código até agora de 489 caracteres, tem uma boato rondando por la que algum maluco ta rondando os 300 caracteres, deve ser Python.

Entrem no fórum se informem melhor e escrevam ai como esta o andamento de vocês :D

Next Page »