Coisas De Web

Url Amigáveis

2009-03-12T11:38:00.002-03:00

Estou no fast-post, Achei um link que explica como fazer urls amigávei, muito interessante, estou passando para vocês:
URL amigável

Fuiii...

Ate mais

2009-01-16T11:09:00.001-03:00

Olá amigos e amigas,

(Música triste ao fundo)

É com grande pesar no coração, finalizo as atividades por aqui. A partir de hoje, o que vos escreves não mais o fará (gastei todo o meu portuga, espero que não tenha escrito errado). Foi bom enquanto durou, ou não, coloquei alguns códigos que com certeza servirá pra muita gente e pra mim também, inclusive. Porém por diversos motivos, não vou dar continuidade à isso. Pode não parecer, mas gosto muito de blogar, porém meus dotes literários não me deixam fazer algo legal, por isso resolvi dar uma parada, quem sabe um lampejo de talento brote em mim mais tarde e consiga voltar para esse mundo de blogs.

Enfim, isso é um 'até logo'. Tenho um blog antigo, que tenho bastante carinho por ele, estou pensando em escrever lá, quem quiser: 'Que me siga os bons'.

endereço blog antigo: www.gigasolucoes.wordpress.com

Fuiii...

Permitir apenas numeros na caixa de texto

2008-12-31T09:13:00.002-03:00

Último post do ano, não que esse ano tenha aparecido aqui muitas vezes, mas a proposta do próximo ano é melhorar o meu desempenho, no entanto vamos lá à uma função bem simples de restringir caracteres na caixa de texto, no meu caso estava restringindo os caracteres alfanuméricos, existem várias funções, por aí, até melhores que essa, mas para eu não ter que ficar catando futuramente, resolvi postar aqui:

function onlyNumbers(e){
/**
* Autor: Ramon Silva
* Data: 31/12/2008
* Versão: 1.0
*/

keynum = (window.event) ? e.keyCode : e.which;
keychar = String.fromCharCode(keynum);
if (isNaN(keychar) &&
(keynum < 96 || keynum > 105) &&
keynum != 8 && keynum != 37 && keynum != 39) {
return false;
} else {
return true;
}
}

Para usar é só chamar essa função no keydown, da caixa de texto desejada:

$("#txtCep").keydown(function(e){
return onlyNumbers(e);
});

Essa função permite utilizar, as setas também.

FELIZ 2009 À TODOS!!!!!!!!!!!!!!!!

Agora vou nessa pegar um pouco de engarrafamento pra chegar à Copacabana "O melhor ano novo do mundo" (Adoro esses títulos, melhor alguma coisa do mundo. rs)
Fuiii...

Accordion use a vontade

2008-11-23T10:53:00.002-03:00

Accordion é a onda do momento, utilizei alguns, mas os que utilizei não me davam liberdade para customização. Então resolvi fazer o meu accordion que atendessem as minhas necessidades.
Acredito que esteja bem simples de ser utilizado, então coloquei no ar, se alguém precisar já pode utilizar, portanto que deixe os créditos. Críticas e sugestões é só enviar
Para utilizar são necessários as seguintes etapas:

1: Linkar a lib jQuery e o código accordion.
2: Criar o html respeitando algumas seguintes regras.

Um elemento global com um id

Um elemento com a classe box

Dentro do box os seguintes elementos

um elemento com a classe header

um elemento com a classe content

3: Instanciar o accordion, para instanciá-lo, basta passar um json com as configurações desejadas.
var pars = {
id : 'accordion1',
time : 500,
index : 2,
openIt : function(that){
  //configuração da forma desejada
  $(that).find(".seta img").attr("src", "seta_amarela_cima.png");
},
closeOthers : function(that){
  //configuração da forma desejada
  $(that).find(".seta img").attr("src", "seta_amarela_baixo.png");
}
//id do elemento global (obrigatorio)
// tempo de execução da animação (obrigatorio)
// Se quiser configurar qual item do accordion começará expandido, é só enviar o número. Lembre-se, o indice começa de 0
// Quando elemento expandir, se quiser alguma configuração especial essa é a função, por parâmetro é passado o elemento box
// Quando os elementos fecham, se quiser alguma configuração especial essa é a função, por parâmetro é passado o elemento box

accordion(pars);

No json da passagem do parâmetro apenas dois itens são obrigatórios, o id do accordion e o tempo da animação todos os outros, são de acordo com a sua vontade.

Exemplo de uso:

<div id='accordion'>
  <div class='box'>
    <div class='header'>Titulo do box</div>
    <div class='content'>Conteudo da caixa do accordion</div>
  </div>
  <div class='box'>
    <div class='header'>Titulo do box 2</div>
    <div class='content'>Conteudo da caixa do accordion 2</div>
  </div>
</div>

accordion({id : 'accordion1', time : 500});

O link do código que disponlizei encontra-se aqui

Fuiii...

JQuery uma ferramenta essencial

2008-11-17T20:23:00.003-03:00

Yeah, I'm still alive!

Ultimamente, está faltando disposição para continuar postando, com tantas tarefas, acabo deixando o blog para depois e esse depois nunca chega, um pouco dessa falta de disposição é que estou querendo mudar um pouco, esse negócio de ficar escrevendo sempre, não está mais me satisfazendo, estou procurando uma forma diferente, não sei se entro no mundo dos podcast, videocast, ou seja lá o que for.

Hoje, vou reforçar algo que está mais do que reforçado no mundo dos blogs.JQuery, nunca gostei muito da idéia de usar essas libs, na verdade, não usava, pois queria aprendendo colocando a "mão na massa" sozinho e depois sim, quando me achasse apto, escolher uma dessas bibliotecas-que-fazem-tudo. Enfim, não sei se essa é a melhor maneira de aprender, mas posso dizer que aprendi bastante assim. JQuery, é magnífico vai desde seletores, até pequenas animações que são muito simples de serem usadas. O que mais me conquista nessa lib é a simplicidade, pra mim quanto mais simples melhor e falando em simplicidade não consigo imaginar nada melhor que JQuery.

Aqui vai uma lista de 5 coisas que adoro em JQuery:

• atributos do tipo height, que teoricamente, seria necessário duas funções uma de get outra pra set. Utiliza apenas uma função o que define se é set ou get, é a passagem de parâmetro, se passar parâmetro é set, senão é get.

• Os seletores css, por causa deles não sou mais obrigado a colocar id em todos os elementos, é possível encontrar elementos nas páginas de forma fácil e eficiente.

• As funções hover(over, out) e toggle(fn, fn), no primeiro caso, você adiciona o evento de over e out de um elemento de uma forma muito simples e no segundo caso (o qual uso muito), serve para quando um elemento com o evento click possui duas ações diferentes. Por Exemplo, É o caso do interruptor (o botão possui dois estados, ligado e desligado, normalmente)

• E a última, porém não menos importante, são os efeitos que é possível aplicar: show, hide, slideUp, slideDown. Para mim, a melhor é animate. Pois, com essa função você aplica os efeitos que você quiser da forma que quiser, uso muito essa função. Antes, do jquery demorava um pouco, para fazer qualquer tipo de animação, agora não demoro mais do que dois minutos.

Enfim, jQuery para mim é uma biblioteca completa, apesar de muitos não concordarem com isso. A documentação é muito bem explicada, apesar de ser em inglês. E se fosse você e não utiliza jQuery, começaria agora a estudar, muitas empresas, pelo menos aqui no Rio, já estão pedindo conhecimento nessa lib.

Fuiii

Exibir imagem de fundo da tr no Internet Explorer

2008-08-16T11:59:00.002-03:00

Aqui vai uma dica legal, um dia desses estava montando uma página quando me deparei com um

problema:

Construi a seguinte tabela para exibir dados tabulares.


<table>
 <thead>
  <tr>
   <td>Titulo 1</td>
   <td>Titulo 2</td>
   <td>Titulo 3</td>
   <td>Titulo 4</td>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>ln1 col1</td>
   <td>ln1 col2</td>
   <td>ln1 col3</td>
   <td>ln1 col4</td>
  </tr>
  <tr>
   <td>ln2 col1</td>
   <td>ln2 col2</td>
   <td>ln2 col3</td>
   <td>ln2 col4</td>
  </tr>
 </tbody>
 <tr>
</table>

Agora estilizando a linha da tabela:


tr { background:transparent url("images/imgLinha.png") no-repeat; }

O estilo acima não existe mistério, ou pelo menos assim eu pensava, para cada linha da

tabela mandei o css carregar a imagem imgLinha.png como background, só que aí está o

problema, pois por algum motivo que desconheço o IEca não renderiza a imagem pela linha

(tr) e sim pela coluna (td), ou seja, para cada coluna repetia o background não fazendo o

efeito desejado, como não sou burro (não ria), logo pensei: Se em cada coluna repete o

background, definirei o background da coluna como transparente e pronto.


td { background:transparent; }

Só que o IEca cada vez mais me surpreende, simplesmente com o código acima some o

background. Depois de muita pesquisa, encontrei a solução, que é a seguinte:


td { background-position:expression(-this.offsetLeft); }

Com essa expressão, você consegue exibir o background da linha.Achei legal colocar isso

aqui, pois não achei um site em português que tivesse a solução e a considero bem útil.

Fuiii...

SQL In jection - Parte I

2008-06-05T07:15:00.001-03:00

Estou começando à estudar um pouco mais sobre SQL Injection, Code Injection etc, esses conhecimentos são de suma importância para todos os desenvolvedores, pois com medidas básicas de segurança, é possível evitar muitos ataques, claro que se quer evitar todos é necessário um estudo aprofundado e ainda assim não está 100% seguro, pois sempre se arranja um modo de burlar a segurança, a dica é sempre estudar sobre o assunto. Esse é um tema, que você pode usar para o bem ou para o mal e abordarei o tema para tentar se prevenir e não para o uso maléfico, é como eu sempre digo: “Sua cabeça é seu guia”, então ao invés de tentar prejudicar os outros, vamos nos beneficiar com essas informações.

Bom, no tópico de hoje abordaremos um erro que é cometido aos montes por aí, é o de autenticação no site, um SQL inofensivo como esse, pode dar-lhe muita dor de cabeça:

Obs: Nos exemplos utilizarei como código de programação PHP e banco de dados MySQL.


$sql = “SELECT  * 
                FROM  logaUsuario 
             WHERE  login = ‘$login’ AND senha = ‘$senha’“;

Aposto que você já fez um esquema de login parecido com esses muitas vezes (confesso, eu também), pois bem, uma pessoa com um mínimo de conhecimento de SQL Injection consegue entrar no seu sistema com muita facilidade, como sabemos na tabela-verdade, o AND para se ter um resultado verdadeiro é necessário que as duas partes das sentenças sejam verdadeiras, já no OR se apenas um sentença for verdadeira o resultado é verdade, agora que temos essa informação bem definida, vamos alterar um pouco o sql de cima:


$sql = “SELECT  * 
                FROM  logaUsuario 
             WHERE  login = ‘$login’ OR ‘1’=’1’ AND senha = ‘$senha’ OR ‘1’=’1’“;

Após cada um dos testes (login e senha) adicionei um OR ‘1’=’1’, ou seja, se login for igual à um login cadastrado no banco de dados ou 1=1 ( o que temos certeza que é verdade) e senha repetindo o mesmo processo, obteremos sempre uma consulta que retornará resultado. Você deve estar se perguntando agora como adicionar esse OR na consulta, pois bem:

No input de login, colocar a seguinte expressão: ‘ OR ‘1’=’1

No input de senha, colocar a seguinte expressão: ‘ OR ‘1’=’1

Com isso você já consegue retornar todos os valores da tabela logaUsuario. Mas vamos supor que depois desse sql o desenvolvedor fez um teste que somente se logará no sistema se a pesquisa retornar apenas um linha, e esse teste sendo feito pela função mysql_num_rows, bom para isso o procedimento é bem parecido, agora só temos que limitar para que o sql nos retorne apenas uma linha e para fazermos isso:

No input de login, colocar a seguinte expressão: ‘ OR ‘1’=’1

No input de senha, colocar a seguinte expressão: ‘ OR ‘1’=’1’ LIMIT 1 --

Adicionei um LIMIT 1 e o -- (comentário no MySql), precisa-se coloca-lo para ignorar a última aspas que sobrou. Com esses dois passos bem simples, muita gente consegue entrar em um sistema de login. Com essas alterações o sql ficou dessa forma:


$sql = “SELECT  * 
                FROM  logaUsuario 
             WHERE  login = ‘$login’ OR ‘1’=’1’ AND senha = ‘$senha’ OR ‘1’=’1’ LIMIT 1 --‘“;

Com uma medida muito mais simples você pode tirar essa falha do sistema. O grande causador desse estrago foram as aspas, pois através dela o atacante consegue abrir e fechar uma string e adicionar o código que ele quiser em seu sql. Para evitar esse problema, utilize a função nativa do php addslashes() na variáveis, para você que não usa php essa função adiciona ‘\’ (slash) antes de todas as aspas da sua string, agora o atacante não consegue adicionar código malicioso no seu sql.


$login = addslashes($login);
$senha = addslashes($senha);

Espero que saiba usar essas informações de forma inteligente e sem tentar prejudicar os outros. Senão aparecer muitos ataques por aí de sql injections, eu apareço com mais informações sobre o assunto. XD
Saiba isso é apenas o começo.

That’s all Folks!!!

ELPI e EWD - RJ

2008-05-11T18:31:00.002-03:00

Nessa semana participei de dois eventos que ocorreram no RJ e falarei um pouquinho de cada um, mas como diria Jack Stripador, ‘Vamos por partes!’.

Na segunda-feira respondi um desafio no Tableless e ganhei uma par de ingressos para a 10° ELPI (evento que ocorreu na quarta-feira). Este foi o primeiro ELPI em que estive e posso assegurar que será o primeiro de muitos, excelente o evento, a localização, o espaço e a organização foram ótimas, sem contar com as palestras que foram exemplares. Nesse evento, pra mim, teve os seguintes destaques.

Coffee break, Aquilo sim que é um coffee break de respeito, muito bom, a comida é infinita, acaba nunca

As mulheres da plaquinha, só tinha modelo, perfeitas

Palestra da microsoft, essa palestra teve dois pontos altos: um – foi a aparesentação em si, a forma em que foi apresentada, achei interessante, só não conto, pois se você for, vai perder a graça e o outro ponto: o palestrante se negava à todo custo falar a palavra ‘google’, inacreditável.

Palestra do Elcio, ela já era especial antes de começar, pois estava lá por causa do convite dele, mas independente disso, palestra extremamente interessante e o mais incrível é a habilidade dele no VIM, quem já mexeu com linux, sabe o quanto aquilo é chato e vendo-o desenvolver, parece que é simplório, fiquei impressionado com a destreza dele.

Convite que ganhei na webly e aconteceu hoje, infelizmente tive que sair antes do término, evento bacana também, apesar de não ser muito a minha área, mas é sempre bom estar nesse meio, gosto desses encontros, conhecer gente nova, trocar conhecimentos, ganhar canetas ...

Enfim, essa semana foi bem agitada, eventos super-legais, se algum desses passar na sua cidade, recomendo-os.

Fuiii...

Nao propagar a opacidade aos elementos filhos

2008-04-05T17:28:00.007-03:00

Após um longo tempo, aqui estou eu.

Você provavelmente já fez uso da propriedade de opacidade (filter, opacity, -moz-opacity), portanto sabe que todos os elementos filhos do qual você adicionou opacity, herdam o valor dessa propriedade, pois bem outro dia estava desenvolvendo e não queria que o valor da opacidade fosse herdado para os seus filhos, fui ao oráculo (leia-se: google), para tentar resolver esse problema pelo css, pesquisei um pouco e nada encontrei, pelo que pesquisei não é possível impedir essa hereditariedade. Como não tinha muito tempo fiz um script para resolver o problema, é o script que está logo abaixo, porém se você sabe uma forma de impedir essa hereditariedade a dica será muito bem-vinda, pois o código foi a maneira mais prática que encontrei.

Código:


function fundoTransparente ( node, trans, props ){
/**
* Criado por Ramon
* www.coisasdeweb.blogspot.com
**/
 node = ( typeof(node) == "string" ) ? document.getElementById( node ) : node; //Se veio apenas o id, pegarei o nó 
  var newNode = node.cloneNode(false); //Macaco de imitação
  var opacity = node.style.opacity; //Grau de opacidade
  opacity = opacity || node.style.MozOpacity || 1; //Grau de opacidade
 trans = trans || opacity*100; //Transparência que eu quero
  with (newNode.style) { //Configurando o nó
   filter = "alpha(opacity=" + trans + ")";
   MozOpacity = trans / 100;
 opacity = trans / 100;
 position = "absolute";
 top = 0 + "px";
 left = 0 + "px";
  }
 
  newNode.id += "bg"; //Modifico o id do clonado, para id + bg

  node.appendChild( newNode ); //Vamos pra árvore DOM.
  node.style.opacity = 1;
  node.style.MozOpacity = 1;
  node.style.background = "none";
 
 if ( typeof(props) == "undefined" ) return;
 
 for (var i in props){ 
  node.style[ props[i] ] = "none"; //Propriedades recebem o valor none
 }
}

A função é bem simples, recebe 3 parâmetros:

Nó ou id, vc escolhe.

Transparência que você quer (escala de 0 à 100). Opcional

Propriedades (tipo array) que receberão valor none, para o elemento que têm o alpha possa dar o efeito esperado. Por padrão, o background recebe none (para dar o efeito de opacidade).

Para utiliza-lá, basta fazer a chamada dessa forma:


 fundoTransparente("fundo", 40); //Id

 //Ou

fundoTransparente(document.getElementById('fundo'), 40); //Elemento

O segundo parâmetro referente ao grau de opacidade, funciona da seguinte forma:

Se você não passá-lo, a função vai procurar no css do elemento se a propriedade opacity possui algum valor, se possuir esse vai ser o grau de opacidade ( se estiver usando o FF, a função também consegue pegar o valor de –moz-opacity)

Se passar o parâmetro, é o valor que prevalecerá sobre os demais.

Espero que gostem, pois para mim está sendo bem útil essa função, agora com uma linha no javascript, não tenho mais problemas de opacidade ser herdada.

Fuiii...

Construindo um gadget

2008-03-07T21:19:00.002-03:00

Como prometido, aqui estou eu para falar um pouco de como construir um gadget.
Aqui está o link de como fazer a instalação da side-bar que não é o escopo desse post.
Vai lá instalar que eu te espero...

Construir um gadget se assemelha à desenvolver uma página web, com algumas configurações especiais das quais falarei, agora.

Antes de tudo, desenvolva o seu ambiente de desenvolvimento.
Na pasta Gadgets que se encontra dentro da pasta Windows Sidebar, crie uma pasta com o nome do seu gadget com o final .gadget (ex: meuGadget.gadget)

Obs: O .gadget na pasta é obrigatório, senão o windows não consegue identificar o seu gadget.

Pasta criada, teremos agora que desenvolver um arquivo XML contendo as informações básicas do seu gadget.

Código:


<?xml version="1.0" encoding="utf-8"?>
<gadget>
  <name>olaRio</name>
  <namespace></namespace>
  <version>1.0.0.0</version>
  <author name="Ramon Silva">
      <info url=" http://coisasdeweb.blogpot.com" text=" http://coisasdeweb.blogpot.com"/>
      <logo src="logo.png"/>
  </author>
  <copyright></copyright>
  <description>Exemplo de criacao de um gadget</description>
  <icons>
    <icon height="48" width="48" src="logo.png" />
  </icons>
  <hosts>
    <host name="sidebar">
      <base type="html" apiVersion="1.0.0" src="pagina.html"/>
      <permissions>full</permissions>
      <platform minPlatformVersion="1.0"/>
      <defaultImage src="logo.png" />
    </host>
  </hosts>
</gadget>

Explicando:
Tag name -> Nome que aparece na lista de gadgets.

Tag author -> Informações sobre o autordo gadget.

Tag copyright -> Informações de direitos autorais.

Tag description -> descrição do gadget.

Tag icon -> Imagem que será exibido na lista de gadgets.

Tag host name="sidebar" -> Tag obrigatória e não pode ser alterados os valores

Tag base -> A propriedade src é a responsável por setar a página principal do seu gadget

Configurado o ambiente, agora é só se divertir.
HTML:


<html>
 <head>
  <title>Primeiro gadget</title>
 </head>
 <body style="background:#ddd;width:130px;height:67px">
  <marquee><p>Olá Rio!!! :)</p></marquee>
 </body>
</html>
<html>

É possível fazer uns gadgets bem interessantes, essa side-bar que o Windows implementou no Vista, já foi implementado há muito tempo no Linux (distribuição Kurumin) e acho uma idéia sensacional. Ainda mais agora que posso fazer o meu gadget.

Obs1: Com os gadgets, é possível uma interação interessante com o SO, ainda estou estudando, mas assim que dominar algumas mais, dou uma passada por aqui. ;)
Obs2: Muita gente que conheco pronúncia gadget de forma errônea, então aqui vai uma dica: A pronúncia correta do gadget é gedjiet (desculpeme a ignorância, não sei escrever aqueles símbolos de pronúncias).

Fuiii...

Limite de arquivos css

2008-02-23T19:15:00.003-03:00

Oi galera!

Bom, estou bastante atarefado ai tive uma folguinha e resolvi dar uma passada por aqui.

Esse post será o primeiro da categoria voceSabia, como todos os "você sabia" existentes por aí, são curiosidades que muitas das vezes não trazem informações muito úteis para as nossas vidas, mas nós (pelo menos eu) adoramos ler. Espero que goste.

Você Sabia ?

...que o IEca têm limite de arquivos suportados para as tags < link >?

Isso mesmo, o IEca possui um limite de 30 arquivos linkados com a tag link, passando esse limite, simplesmente ignora os arquivos subseqüêntes, provavelmente você nunca chegará à esse limite e se chegar, há uma grande possibilidade de você ter que rever seu projeto, pois há algo errado, mas pode ser também que seja necessário o uso de todos esses arquivos, nesse caso é preciso usar:

Código:


...
< style >
@ import(enderecoDoArquivo);
< /style >
...

No próximo post, mostrarei como construir um gadget (a sidebar do Windows Vista) utilizando HTML, Javascript e XML.

Fuiii...

Inspecionando propriedades com o watch

2008-01-09T11:17:00.000-03:00

Vamos nessa que o tempo ruge e a sapucaí é grande!
Cada vez que leio um pouco mais sobre desenvolvimento, mas eu vejo que tenho que estudar, isso de certa forma é bom, pois nunca haverá alguém bom o suficiente que não tenha o que aprender é aquela velha frase "Estudar (Ler) é um universo em desencanto", agora que viajamos um pouco voltaremos ao tema. Essa função watch, é muito interessante e não vejo muita gente comentando sobre ela por aí, então resolvi trazer esse assunto. Tomará que para você seja inédito o uso dela, pois fiquei super empolgando quando descobri a engine da coisa.

Watch
Definição: Executa uma função específica quando é atribuído um valor à propriedade observada.
Sintaxe: instObj.watch(propriedade, função);
Obs: a propriedade fica entre aspas dupla (").

No final das contas, ele funciona como um debugador.

Código:


  objeto = {propriedade:"funciona ?"}
  objeto.watch("propriedade", handler);

  function handler (id, velhoVal, novoVal) { 
    //Confirmo se o usuário quer receber o novo valor da propriedade, senão continua com o mesmo valor.
    return (confirm("objeto."+id+" era"+velhoVal+" agora é "+novoVal+". Deseja receber o novo valor?"))?document.write(novoVal): document.write(velhoVal);
  }

  objeto.propriedade = "Claro que sim";

Explicando o código acima:
linha 1 -> Crio um objeto, no qual a propriedade recebe o valor (funciona?)
linha 2 -> Mando o javascript inspecionar a propriedade (propriedade) do objeto (objeto) chamando a função handler.
linha 3 -> a função handler, como pode-se observar possui 3 parâmetros (id, velhoVal, novoVal), são parâmetros padrão e não é possível passar outros parâmetros à essa função (até onde eu sei, pelo menos), onde estes por sua vez são:
. id -> Identificação da propriedade que é inspecionada.
. velhoVal -> O valor antigo da propriedade.
. novoVal -> O valor novo da propriedade.
Obs: Manter a ordem dos parâmetros.
linha 4 -> Texto de exibição
linha 5 -> Essa linha é importante, é o valor que a propriedade irá conter, se você não der um retorno para essa função a propriedade vai ter o valor undefined. Com esse watch pode-se atribuir qualquer valor de retorno à essa propriedade. Chocante né?!

linha última -> Troco o valor da propriedade para o handler ser executado.

Todos os objetos, descendem essa função.

Mais uma coisa, se você não quiser mais "inspecionar" a propriedade usa a função unwatch.

Usando o mesmo exemplo.
Código:


objeto.unwatch("propriedade");

Divirtam-se, pois achei isso o máximo

[UPDATE]
Na linha do retorno do novo valor, pus um document.write para exibir apenas o valor da variável, dessa forma é possível visualizar toda a operação
Como observado pelo Micox, o IEca não dá suporte à essa propriedade
[/UPDATE]
Fuiii...

Desabilitar o menu do botao direito do mouse

2008-01-03T11:18:00.000-03:00

Mais um post fast-fast!
Essa dica é bem massa, se você usa o Yahoo!Mail, já percebeu que ao clicar com o botão direito, o menu exibido não é o do browser e sim do próprio Yahoo!, o menu do browser está desabilitado. Então vamos nessa:


document.oncontextmenu = function () {
  alert("Menu do browser desabilitado");
  return false;
}

Divirta-se!

Fuiii...

Desabilitar o selecionar texto do mouse

2008-01-02T11:41:00.000-03:00

Algumas vezes não queremos que em nossas páginas o "selecionar texto" do mouse fique habilitado, aqui vai uma dica legal pra quem quer desabilitá-lo, infelizmente acredito que não funcione em todos os browsers, testei apenas no IEca e no FF e funfou perfeitamente, quem quiser testar em outro browser, sinta-se à vontade e comente aqui se funcionou. XD


  if (typeof document.onselectstart!="undefined") //IEca
    document.onselectstart=function(){return false}
  else  //FF
    document.body.style.MozUserSelect = "none";

O FF não possui a propriedade onselectstart, o que achei estranho, e o IEca possui.
O FF possui a propriedade MozUserSelect, que pertence apenas à ele.
Não tenho certeza se a propriedade onselectstart é suportada por outros browsers.

Fuiii...

InsertBefore e appendChild

2007-12-30T12:11:00.000-03:00

Último post do ano! :)
Como prometido iremos falar sobre appendChild e insertBefore. Bom, já sabemos que appendChild e insertBefore, não é inclusão do elemento na estrutura html e sim a re-alocação. Os dois possuem apenas essa função, porém funcionam de forma diferentes.

insertBefore
Aloca um elemento no nó pai, anteriormente do elemento selecionado.

Sintaxe:
elemento.insertBefore(elemento_a_ser_alocado, elemento_guia);

Ex:
document.getElementById("meuElemento").insertBefore(document.createElement("DIV"), document.getElementById("elementGuia"));

No exemplo acima, o elemento DIV irá ser adicionado antes do elementoGuia.

Obs.:
Para essa alocação funcionar o elementoGuia, tem que ser filho (direto) do elemento (meuElemento), ou seja, não pode ter nenhum elemento entre elementoGuia e meuElemento.

appendChild
Aloca um elemento no último filho do elemento selecionado.

Sintaxe:
elemento.appendChild(elemento_a_ser_alocado);

Ex:
document.getElementById("meuElemento").appendChild(document.createElement("DIV"));

No exemplo acima adicionei a DIV após o último filho do elemento meuElemento, sendo assim, a DIV passa a ser o último filho do elemento meuElemento.

Considero esses conceitos de vitais importância para quem está iniciando o estudo de DHTML, ísso é só o início, com outros conceitos, você verá que é possível ser feito muito mais coisas interessantes com essas propriedades que falei hoje.

Então é isso, Um próspero ano novo à todos.

Fuiii...

Criando e deslocando elementos DOM

2007-12-20T12:00:00.000-03:00

Depois de muito tempo, estou de volta!
Hoje vou falar de uma dica, que muitos irão achar idiota, outros não. Esses lances de DOM, são muito massa né?! Só que eu sou meio burrinho (rs). Enfim, é algo bem simples, porém nunca tinha me dado conta o quão simples era. Em DOM têm-se o comando:


meuElem = document.createElement("elemento");

O comando acima, cria um elemento html, porém em todos os exemplos que vi na internet até hoje, esse comando era seguido disso:


document.getElementById("meuElemento").appendChild(meuElem);


document.getElementById("meuElemento").insertBefore(meuElem, document.getElementById("meuElemento").lastChild);

Sempre interpretei que os códigos acimas, "cria-se" um elemento dentro do elemento com id de meuElemento, não tinha dúvidas quanto à esse conceito. Porém, ledo engano meu caro, o elemento já tinha sido criado, portanto nesses dois códigos acima, só foram feitos os "deslocamentos" dos elementos. Pensando dessa forma, um monte de coisas que tinha grande dificuldade de fazer, pois se tornavam extensos, podem ser feitos bem rápidos, segue um exemplo muito bom:

Você tem uma aplicação que em um determinado momento, dependendo da iteração com o usuário, o mesmo pega um elemento que é filho de um "pai" e muda de lugar, acarretando na mudança de pai. O que eu um méris mortal fazia?

Sempre soube que a propriedade parentNode, era apenas de leitura. =/
Se eu não posso mudar o "pai", só me resta criar um outro elemento com o pai desejado, mas que tenham os mesmos atributos, com isso acarretava de eu usar, um cloneChild com o "pai" diferente e depois fazer um removeChild.

Viu o trabalhão? Duplico o elemento que eu quero, jogo no pai desejado e excluo o elemento que pertence ao pai que não desejo mais.

Mas com o conceito que falei anteriormente, Seus problemas acabaram. (com muito mais échio) [Concordo contigo, estou no fundo do poço, citar Casseta & Planeta, ninguém merece]

Não preciso de mais nada disso, posso resolver o meu problema direto com o appendChild ou insertBefore, como eles não são os responsáveis pela criação do elemento e sim, apenas, pelo "deslocamento", ou seja, desloco o meu elemento para o pai desejado e pronto.


document.getElementById("newFather").appendChild(document.getElementById("child"));

Viu? Ficou muito mais simples.

"Coisas simples devem parecer simples, coisas complexas devem parecer possíveis."

Obs1: Eu não entrei em maiores detalhes sobre a diferença entre o insertBefore e appendChild, pois esse não era o foco principal desse post, mas em um próximo post, explico com maiores detalhes essas duas propriedades importantíssimas.

Desejo à todos um ótimo natal e semana que vem estou de volta! (pelo menos, assim espero)

Fuiii...

Ajax e Doctype

2007-11-06T08:27:00.000-03:00

Lá no Pinceladas Da Web, tem um artigo muito interessante sobre a questão do doctype junto ao Ajax, sobre os problemas que poderão existir com a implementação, nunca tinha lido uma análise sobre o assunto focando o uso com Ajax, acredito que todos usem DOCTYPE, mas sempre tem um desavisado que ignora.rs

Aconselho ir lê-lo, também tem o link do artigo completo (inglês), muito esclarecedor também.

Fuiii...

Sem Assunto

2007-10-30T08:42:00.000-03:00

Desculpe a minha falta de posts, ultimamente não tenho tempo (mas isso não é desculpa, nesse mundo ninguém tem tempo) e o principal nunca acho um assunto legal, estou totalmente desprovido de criatividade, meu caderninhos de temas para o blog está em branco, então vim dar uma explicação do meu sumiço e assim que eu tiver assuntos interessantes, eu volto pra cá, ou se você tiver alguma dúvida coloca ai que aceito como sugestões e faço um post. XD

fuiii...

E mais um bacuri chega entre nós

2007-10-18T15:56:00.000-03:00

Vamos à um post totalmente "off-topic", ou seja, hoje vou falar de algo extremamente pessoal, se você não está afim de ler sobre um pouco da minha vida, aconselho parar a leitura por aqui.

Hoje nasceu o filho do meu amigo (leia-se:irmão) Preto (não sou racista, é porque assim ele gosta de ser chamado), em situações assim que pensamos (nascimentos, são bom motivos pra pensar) em um flashback de nossas vidas e lembro do dia que conheci-o (claro que isso é força de expressão, nem lembro do que eu comi hoje no almoço), não gostava muito dele era verdade, pois ele era da turma rival, sabe como que é quinta-série, porém ele tinha dois pontos positivos.

Era o único maluco que fazia os cursos de informática que eu fazia.=p

Conhecia bastante garotas, isso era "cool"

Nunca tive muito sucesso com as garotas, então ele era um bom ícone, ai fui aprendendo um truque aqui, outro acolá e agora superei o "professor", ele é quem me pede as aulas agora, enfim tanta coisa passamos juntos nesse nosso pequeno tempo de convivência (8 anos), tantas brigas XD. Estou tão feliz de ter um amigo pai, porque agora eu posso fazer aqueles tipos de piadinhas "você tá feliz?Imagina o pai.", "fez o filho agora assuma. Disso você entende", entre outros.

Estou muito feliz por você Preto, que Deus ilumine a sua vida e a do seu filho, tudo de bom pra ti, brother.

ps: Esqueci de mencionar, nessa foto aí em cima, o cara da esqueda sou eu e o da direita é o Preto (nessa foto sabe-se, porque ele tem esse apelido. XD)
ps2: Depois de ler esse texto, achei que ele ficou meio boiola, por isso quero deixar bem explícito que eu não sou boiola hein.

fuiii...

Mais um que resolve a sobreposicao do elemento select no IE

2007-10-10T23:22:00.000-03:00

Eu sei que a Microsoft é a empresa que as pessoas amam odiar (que incoerência não?!), basta ela pisar um pouco na bola que todos reclamam (inclusive eu), porém há situações que você não pode ter outro sentimento senão ódio por tal empresa. Na minha opinião o pior produto da Microsoft é o Internet Explorer, o qual eu humildimente chamo-o de IEca, ele é o responsável por minhas maiores dores de cabeças no trabalho (e algumas vezes, fora também), é um hackzinho aqui, uma outra "regra" de validação que não obedece e por aí vai. Há muito eu tinha o conhecimento, que mais hora ou menos hora, iria me deparar com o problema da tag select. O quê?!, você não conhece esse problema? Sorte a sua, mas vou te explicar. O elemento <select> simplesmente aparece por cima de todos os outros elementos HTML, que até à uma hora atrás isso pra mim era inexplicável, na verda a explicação é, se me permitem, escrota, mas foi a explicação que li no próprio site da microsoft. Como diria Jack Estripador, vamos por partes.

Procurei uma explicação plausível no site da microsoft o porquê do select sobrepor todos os outros elementos.

Lá explica-se que há duas categorias de elementos: windowed e windowless.

O Problema, o elemento select é um windowed e todos os outros são windowless, ou seja, eu não posso comparar um zIndex de um elemento windowed contra um windowless, pois eles não se entendem o.O (Após ler isso, respirei fundo e me perguntei, por que meu Deus?! Qual é o sentido de todos os elementos serem windowless e o select ser um windowed? Pra mim, isso não faz sentido algum e pra você?, se fizer, por favor, me informa) passado o momento de choque, continuo a leitura da página até o final.

Na página eles mencionam algo que pode ser (na realidade é) a solução do problema:

"This leaves the SELECT element as the only element that is windowed. If you use the preceding code to run the page in Internet Explorer 5.5, when you set the z-index of the SELECT element to a value that is greater than 5, it draws on top of the IFRAME. When you set the z-index of the SELECT element to a value that is less than 5, the IFRAME overlaps it, even though they are both windowless elements."

Vale lembrar que a explicação acima é a partir do IEca 5.5, pois abaixo disso o iframe é considerado um elemento windowed. Pra você que não saca muito de inglês o texto acima fala basicamente que...

"O Iframe é um (talvez o único) elemento que consegue sobrepor o elemento select, quando este por sua vez tiver um z-index maior, ou for renderizado (construído) depois."

Claro que o texto não foi traduzido, apenas escrevi a idéia que o texto dá.

- Poxa legal, mas agora ficou uma dúvida, você não disse que elementos windowed não conseguem comparar z-index de elementos windowless? Então como é que o iframe (elemento: windowless) consegue ficar na frente do <select> (elemento:windowed)
-Pois é... Mas aí a microsoft me sai com essa pérola.

"This is what makes the IFRAME unique: it follows z-index with respect to windowless elements, and it supports z-index with respect to windowed elements like the SELECT element in this case."

Tradução livre (põe livre nisso)
"Isto é que faz o IFRAME único ele consegue respeitar os dois z-indexes sem problemas."

Ou seja, depois disso só podemos chegar à uma conclusão: Erro de implementação. Pois a única explicação que obtive para o IFRAME ter essa característica "única" é que anteriormente ele era windowed e agora é windowless, por consequência (off: pena que ninguém mais usa trema, gostava tanto delas) herdou as características de um elemento windowed.

Apelar pra aquele que tudo-sabe (leia-se:Google)

Solução:

Achei essa página e lá contém 3 soluções, porém só usei uma e funcionou de acordo, nem testei as outras.

Na div que vai ficar em cima do select, inclui-se um iframe recebendo as características css a seguir:


iframe {
display:none;/*sorry for IE5*/
display/**/:block;/*sorry for IE5*/
position:absolute;/*must have*/
z-index:-1;/*must have*/
filter:mask();/*must have*/
width: 100%;/*must have for any big value*/
height: 100%;/*must have for any big value*/;
}

e no html:


 <div>
<!--[if IE]><iframe></iframe><![endif]-->
// O comentário acima o IE lê (só ele mesmo pra ler comentário) e só cria o iframe se for o IE.
</div>

e Shazam, agora a sua div fica por cima do select.

Espero que ajude muita gente, pois pra mim foi uma ajuda e tanta, tentei aqui colocar o conceito todo até chegar no resultado final, pois não vi muito disso por aí, as pessoas só colocam o código, mas não explica todo o desenvolvimento do raciocínio.

Fuiii...

[UPDATE]
Fiz alguns teste em casa, com essas configurações, mesmo você colocando um número de z-index do select maior que o do iframe, o select estará por baixo do iframe (que no nosso caso, visuaremos a div, pois o iframe está oculto), então está avisado! XD
[/UPDATE]

Livro Gratis de Ruby On Rails

2007-10-03T09:55:00.000-03:00

Se você está afim de aprender ruby, assim como eu, essa é uma ótima oportunidade, vi lá no BR-Linux que o Patrick Lenz, está disponibilizando o livro dele, completo, para download em PDF durante 60 dias. já baixei o meu! XD

fuiii...

O Operador Ternario

2007-09-29T09:03:00.000-03:00

Olá navegantes, não sei se vocês já ouviram falar no operador ternário, é algo bem simples, mas que volta e meia esqueço a sintaxe, então resolvi coloca-lá aqui, existe lugar melhor?
Se você não conhece operador ternário é uma forma compacta de fazer um if/else, claro que ele não serve para todo tipo de if/else que você ver por aí (pelo fato dele ser compacto),tem grande serventia para aquele tipo que se testa um valor e dependendo da resposta uma outra variável recebe um ou outro valor. Ex:


function tipoNum ($num) {
 if ($num%2) {
  $tipo = "Número Ímpar";
 } else {
  $tipo = "Número Par";
 }
 return $tipo;
}

No código acima nada demais, verifico se o número é par ou ímpar de acordo com o resto da divisão e uma variável recebe o texto dizendo se ele é par ou ímpar.(obs: não sei se você sabe, mas no teste acima verifico se o valor é verdadeiro e não um número, através do resultado da operação que me retorna 0 ou 1, que também é considerado um valor booleano, apesar do resultado ser um número. Sempre que se souber o valor retornado será um dos dois, posso fazer um teste lógico, sabendo que 1 corresponde à true e 0 à false).

Agora o mesmo código com o operador ternário.


function tipoNum ($num) {
 $tipo = ($num%2) ? "Número Ímpar" : "Número Par";
 return $tipo;
}

Muito mais simples né?!
Nota Mental: Bom, agora já está anotado e quando esquecer a sintaxe é só ir pro meu blog. XD

fuiii...

Inserir Elementos Dinamicamente na tabela

2007-09-25T11:21:00.000-03:00

Um post rápido, Essa semana tentei fazer algo simples, mas levei um suor pra fazer, mas era algo bem simples de ser resolvido, então você pode estar passando por isso, então aqui venho para esclarecer e até porque se no futuro eu esquecer, posso consultar este blog e ter a resposta XD. Estava, eu fazendo um carregamento dinâmico de uma tabela aqui na empresa, montei a tabela bonitinha e parti para o DHTML, para fazer a estrutura da tabela dinâmica, nesta tabela o carregamento se dava de acordo com a necessidade do usuário e era criado as linhas da tabela de forma que o usuário desejar sem e não colocando sempre na última posição, para essa questão simples, fui utilizar a função insertBefore, para minha surpresa isso retornava o seguinte erro:

Nó não foi encontrado

Vi, li e reli a minha tabela e não consegui encontrar o erro, a estrutura da minha tabela estava mais-ou-menos assim:


<table id="myTable">
  <tbody>
    <tr id="row1"><td>row1col1</td><td> row1col2</td></tr>
    <tr id="row2"><td>row2col1</td><td> row2col2</td></tr>
  </tbody>
</table>

e com o seguinte código tentava adicionar uma linha na tabela:


var newRow = document.createElement('tr');
var row2 = document.getElementById('row2');
var aqui = document.getElementById('myTable').insertBefore(newRow,row2);

E nada de dar certo, fui naquele-que-tudo-sabe (leia-se:Google), ainda sim não tinha encontrado uma resposta satisfatória, até que entrei em um site gringo, que tinha um código muito semelhante ao meu, só que o dele funcionava! (Mas devo confessar que nem ele mesmo sabia porque estava funcionando, pois ele disse que para resolver o problema era necessário fazer o clone de um elemento, no caso um tr, e depois fazer a inserção, essa informação não procede!) Até que descobri o meu erro, mas antes de escrever onde estava errando, gostaria de perguntar à você, se com as informções acima você consegue saber onde estava errando, gostaria que arriscasse um palpite, não custa nada, ninguém nasceu sabendo, então não leia as linhas abaixo e dê o seu palpite, depois disso volte para ver a resposta. (não vale ver a resposta antes, hein) Estou confiando na sua honestidade. rs

Que rufem os tambores! Boa Sorte! XD
O erro era que estava tentando fazer a inserção do elemento tr no elemento table e não pode ser feito dessa forma, tenho que fazer a inserção no tbody, ou seja, passei a id da table, para tbody. Uma questão simples de ser resolvida!

fuiii...

This Ou That - Qual Usar

2007-09-11T10:11:00.000-03:00

Desculpem a demora nos posts, mas minha vida está muito corrida, vários projetos, várias coisas pra fazer e o dia infelizmente só tem 24 hrs. Mas como eu sempre digo (ou pelo menos disse uma vez) Vamos embora que o tempo ruge e a sapucaí é grande.

Pois bem, gosto muito de Javascript, mas ele tem certas falhas de implementação (ou assim penso), que não são muito legais, hoje iremos falar do problema com a propriedade this:


function minhaClasse () {
  this.metodo1 = function() {
    this.meuValor = 5;
  }

  metodo2 = function() {
    return 10;
  }
}

Essa é a forma que costumo implementar classes, não que seja a melhor, mas é a forma que gosto de fazer, existem diversas formas, cabe a você, escolher a que mais agradar. Como visto acima, tenho dois métodos:

Metodo 1: Vê-se que a função tem um this na frente o que significa que o método é público. O método seta a variável meuValor um valor de 5 essa variável como pode-se observar ela também é publica, this na frente da variável,(fora do objeto, pode-se pegar o valor dela).

Metodo 2: Essa função não tem o this na frente, ou seja, ela é privada. Quando ela é chamada apenas retorna o valor 10.

Até aqui, Neves, não tem nada demais, o problema vem agora:


function minhaClasse () {
  this.metodo1 = function() {
    return 10;
  }

  metodo2 = function() {
    this.meuValor = 5;
  }
}

Acima inverti o conteúdo das funções, porém não inverti a "indentidade" (metodo1 -> publico; metodo2 -> privado) e por isso daria erro ("função meuValor não identificada"), pois segundo a especificação da ECMAScript, métodos privados não podem chamar métodos, variáveis, ou seja lá o que for, públicos. Para fazer com que o exemplo acima funcione é necessário utilizar um método privilegiado (detalhes, sobre isso em um próximo post).

Resolvendo - Irá ser necessário criar uma variável global à classe que irá receber o valor this, que comumente é chamado de that e toda vez que tivermos uma função privada e necessitarmos utilizar algo público, ao invés de usarmos o this, utilizaremos o that. Exemplificando, pois com essa explicação até eu me enrolei:


function minhaClasse () {
  var that = this;
  this.metodo1 = function() {
    return 10;
  }

  metodo2 = function() {
    that.meuValor = 5;
  }
}

Com essa simples variável é possível resolver o problema!

Espero que isso seja útil para alguém, pois para mim foi muito. Vou ver se no próximo post continuo com algo de objeto.

Fuiii...

Como achar um elemento na pagina

2007-08-20T09:54:00.000-03:00

Vamos lá que o tempo ruge e a sapucaí é grande. Hoje vamos aprender como se pega a verdadeira posição de um elemento na página. Sabemos que existem as propriedades top, left que teoricamente permite-nos sabermos onde ele se localiza, mas engano nosso, poistop, left referenciam apenas a posição em relação ao seu pai e mesmo assim temos dois problemas:

É obrigatório a declaração do top e left, porque senão vem como vazio as propriedades.

Nem sempre o que declaramos no top e left, e a posição "real" dele em relação ao seu pai.

Portanto, vemos que as propriedades top e left, não serão de muita serventia, para nossa salvação existem as propriedades offsetTop, offsetLeft as quais de certa forma nos oferece a posição correta do elemento, logo resolvemos metade do problema, pois essas propriedades oferecem as coordenadas em relação ao seu offsetParent (em cada browser o offsetParent é tratado de forma diferente, dessa vez não é só o IEca que dá problemas), mas ainda sim isso não é um grande problema, pois as propriedades são sempre relativas à seus offsetParent, independente de qual for. Com todas essas informações, já podemos resolver o problema, pois sabemos que o offset nos traz a posição "real" do elemento e é relativo à seu offsetParent, logo precisaremos apenas, percorrer todos os offsetParent deste elemento somando os offsetTop e offsetLeft e voilá.

Code:


function pegarPosicao(obj){
    var left = 0;
    var top  = 0;

    while (obj.offsetParent){
      left  += obj.offsetLeft;
      top  += obj.offsetTop;
      obj    = obj.offsetParent;
    }

    left += obj.offsetLeft;
    top  += obj.offsetTop;

    return {x:left, y:top};
  }

No código acima, pego por parâmetro um objeto qualquer, zero as variáveis que irão ser responsáveis por ter o top e left do objeto, entro no laço de repetição e repito até o objeto não ter offsetParent (podemos entender isso como pai, mas nem sempre ,pra falar q verdade quase nunca, o offsetParent é o "pai" do elemento) e na repetição, somo as propriedades que vão me dar a posição do elemento e o elemento recebe o offsetParent dele. Depois de sair do laço ainda vai ter faltado mais uma repetição, pois o último elemento não tem offsetParent, mas pode ter offsetTop e offsetLeft, então somo esse valor às variáveis e retorno o valor real dele na página.

Obs: Vale lembrar que as propriedades offset, não podem ser setadas, apenas lidas.

Espero que tenham gostado.

Fuiii...

Como Instalar o Ubuntu 3D

2007-08-04T11:54:00.000-03:00

Estou me convertendo para o Linux, confesso que de ínicio achei meio estranho, pois sou muito apegado às teclas de atalho (e a tecla windows, principalmente) e também aquelas nomenclaturas KDE, GNOME, não faziam sentido. Mas como disse-m meu amigo orkut (li na sorte de hoje) "The only good is knowledge and the only evil is ignorance". E agora estou na luz. Se tem uma algo que gosto muito, são efeitos visuais, acho fascinante, quando vejo um efeito legal, entro em estado de torpor, por isso sempre tive vontade de mecher no Mac, infelizmente nunca tive uma oportunidade, porém tenho fé nesse feito. Cortando um pouco o blá blá blá.

Alguns meses atrás fiz um pedido do cd do Ubuntu, estava doido que chegasse em minha casa, porque o ubuntu tem um pacote muito interssante de efeitos visuais e estava doido para testar, depois de perder um monte de dados, 4 formatações e algumas perdas do servidor X (servidor X - é o responsável por fazer a inicialização do ambiente gráfico do Linux), consegui ter a mudança da área de trabalho em 3D ;), se te interessar aqui vai o link da explicação d como instalar o pacote (compiz).

Fuiii...

Upload no PHP

2007-07-24T09:45:00.000-03:00

Entrei em período de férias por isso que estou meio sumido e o pan também está gastando muito do meu tempo, adoro esportes, apesar de não praticá-los muito. rs
Olá galerinha, hoje vamos ver como se faz upload de arquivos no php, é molezinha.

Arquivo HTML:


<form enctype="multipart/form-data" action="/upload.php" method="POST">
    <label for = "arqUsuario">Imagem</label>
    <input name="arqUsuario" type="file" />
    <input type="hidden" name="MAX_FILE_SIZE" value="3000000" />
    <input type="submit" value="Send File" />
</form>

O "tipo" do formulário tem que ser multipart/form-data, para fazer o upload lá no servidor.

Um input do tipo file, responsavel por armazenar o endereço do arquivo na máquina do usuário, junto com ele vem um botão, que no FF o value é Browser, para procurar o arquivo, sem precisar digitar o endereço, porém não sei como mudar as características desse botão :(.

Um input hidden com name MAX_FILE_SIZE, responsável por indicar o tamanho máximo permitido do arquivo que vai ser feito o upload.

E é claro um submit para mandar o arquivo ao servidor e o php armazená-lo.

Agora no arquivo php:


$uploaddir = '/home/meusProjetos/upload/';
$arquivo = $_FILES['arqUsuario'];
$uploadfile = $uploaddir . basename($arquivo['name']);
  if(!eregi("^image\/(pjpeg|jpeg|png|gif|bmp)$", $arquivo["type"])) {
    echo "Arquivo em formato inválido! A imagem deve ser jpg, jpeg, bmp, gif
ou png. Envie outro arquivo";
  } else if($arquivo["size"] > $_POST["MAX_FILE_SIZE"]) {
      echo "Arquivo em tamanho muito grande! Envie outro arquivo";
  } else {
    if (move_uploaded_file($arquivo['tmp_name'], $uploadfile)) {
      echo "Arquivo válido e o upload feito.\n";
      chmod($uploadfile , 0766);
    } else {
      echo "Não foi possivel fazer o upload!\n";
    }
  }
?>

Antes de explicar, o código acima existem algumas observações a serem feitas.
Obs1: No phpconfig, tem que estar autorizado o upload de arquivos, e também, deve ser verificado o tamanho máximo de upload, que por padrão é dois megas, dependendo da sua necessidade terá que aumentá-lo.

Obs2:Quando a página php, é chamada já foi feito o upload do arquivo, porém ele está em uma pasta temporária, o php só vai ser responsável de mudar o diretório e o nome do arquivo.

$uploaddir é responsável pelo endereço definitivo do arquivo.

A variável $arquivo que recebe $_FILES['userfile'], possui todos os valores do arquivo

$uploadfile terá todo o caminho do arquivo

no primeiro if é verificado se o tipo do arquivo é diferente à uma imagem dos tipos (pjpeg|jpeg|png|gif|bmp), se for, ele não move o arquivo para uma pasta definitiva.

A instrução move_uploaded_file é a responsável por mover o arquivo de um diretório temporário para um definitivo (Oh! não me diga).

a instrução chmod(), irá trocar as permissões do arquivo, isso se faz necessário, para visualizar e modificar os arquivos, o 0766 lhe dá permissão de alterar e remover.

Acho que está tudo explicadinho, nos mííííííííínimos detalhes.

fuiii...

SO na Web

2007-07-06T10:07:00.000-03:00

Meu povo e minha pova, tudo que se possa imaginar tem na internet, mas tem algumas iniciativas que merecem destaque, pois bem a idéia de desenvolver um SO na web, não é tão inovadora assim, mas essa aplicação é demais, lembra muito um desktop de verdade, e tem todas as tarefas básicas, incluido um editor de texto, explorer, alguns joguinhos (incluido xadrez no qual estou viciado), para você que desenvolve vale a pena dar uma conferida, porque assim tem-se uma idéia do que é possível fazer, e o melhor de tudo é open-Source, então carpem diem :)

Bom isso é um bom exemplo da tão famosa "web 2.0", no próximo post vou tentar escrever sobre o que penso sobre esse tema.

EyeOs

fuiii...

Programando nos Comentarios

2007-07-03T10:24:00.000-03:00

Isso mesmo que você leu, o IEca (só podia ser ele), te permite programar nos comentários, essa é uma das práticas que uso para resolver problemas de renderização. Tipo float, position, entre outros.

O IEca como todos sabemos, tenta ao máximo não seguir a recomendações da W3C e portanto nos traz muitos problemas na hora de exibir o site da forma desejada, ainda bem que para transpassar esse problema existem várias técnicas, como:

Fazer dois css's, um para o IE e outro para o FF, e no javascript fazer a chamada do css correto.

Colocar uns hacks de underline, antes das propriedades.

Colocar as execessões do IE em comentário condicional.

Fica por conta da sua imaginação.

Essas são as três que conheço e considero legais, excluindo a segunda, pois colocando esses hacks o css não valida e é sempre bom tentar validar, infelizmente nem sempre isso é possível :(. Bom, prefiro trabalhar com o desvio condicional (muitas das vezes), pois, normalmente, só tenho que se alterar algumas propriedades, não são todas. Mas em algumas situações a melhor opção é testar o tipo de browser e carregar o css correto para o browser, sem mais lenga-lenga, vou mostrar como é uma estrutura do comentário condicional, agora vê se pode comentário condicional, só rindo mesmo. rs:


<!--[if IE]>
<style>
html {overflow:auto;}
</style>
<![endif]-->

Ás vezes é necessário especificar a versão do IE, pois a cada versão ele renderiza diferente.
Dentro das tag style, você já sabe, é como se estivesse no css e faz-se as alterações necessárias.

fuiii...

COMMIT e ROLLBACK no SQL

2007-06-29T10:34:00.000-03:00

Sql é um assunto do qual gosto bastante, então sempre que posso dou uma pincelada no tema. Pois bem, no sql tem duas cláusulas muito interessantes COMMIT e ROLLBACK.

COMMIT - Responsável por efetivar a transação corrente, pois quando se trabalha com um banco de dados em que vários usuários vão utilizá-lo ao mesmo tempo, tem que se efetivar a operação, pois sem o COMMIT a alteração não será visualizada para as outras "sessões", salvo se a sessão em que fez a alteração for fechada, o que por sua vez, traria muitos prejuízos, pois outros usuários iriam trabalhar com um banco de dados desatualizado e podendo até causar redundância de dados.

ROLLBACK - Desfaz a última alteração.

Quando desenvolvemos um sistema, tentamos fazer todos os tratamentos de erros possíveis, mas não podemos esquecer da astúcia do usuário, ele sempre consegue arranjar um jeito de fazer m... no sistema e descobri um bug que você nem imaginava ser possível, por isso existe os tratamentos de erros e se tratando de um banco de dados essa preocupação tem que triplicar. Como mencionei anteriormente essas duas cláusulas são muito interessantes, ainda mais utilizando Stored Procedure, Quando se faz uma operação no BD (INSERT, UPDATE, DELETE), este por sua vez retorna se a operação foi ou não bem sucedida. A partir daqui podemos imaginar como podem nos ser úteis as cláusulas. Exemplo:


SQL>insert into alunos (matricula, nome) values (4, 'Yusuke Urameshi');

1 row created.
SQL>IF @@ERROR <> 0 ROLLBACK ELSE COMMIT
Commit complete.

No código acima verificamos, se a inserção foi bem-sucedida, se for efetiva a inserção no bd, senão desfaz a inserção.

Agora vem aquele apelo básico, para você comentar.

Fuiii...

Comportamento Fora Da Estrutura

2007-06-26T10:06:00.000-03:00

"Verdade é algo temporal e pessoal", essa é a minha versão da verdade, pois de tempos em tempos quando achamos que algo é a verdade absoluta e não tem como mudar, descobrimos que estávamos enganado a respeito disso e nos perguntando como poderiamos ser tão tolos.

Depois dessa introdução (um tanto quanto, nada haver) vamos ao que interessa, pois bem outro dia estava lendo os meus feeds quando vi esse post, lá no Refatorando Padrões. Onde o Carlos afirmava que não concordava com todas as chamadas de funções no javascript, de início achei a idéia absurda e se já não tivesse lido alguns posts dele, com certeza não iria ler o post até o fim, pois para mim, até aquele momento, fazer as chamadas de funções pelo javascript é senso comum.Logo após a leitura do post começou uma pequena discussão (diga-se de passagem, bem proveitosa), onde cada um defendeu o seu ponto de vista e no final das contas ficamos onde começamos, eu defendendo a chamada de funções pelo javascript e ele chamar a função pelo html. Como disse anteriormente, a verdade é algo relativo e cada um tem a sua versão da verdade, dentro de um limite e razões para tal. Agora tentarei defender a minha verdade. Let's Go:

Chamada da função pelo html:


      <input type="button" value="botão" id="meuBotao" onclick="meuEventoAqui()" />

Chamada da função pelo Javascript:

Arquivo HTML:


    <input type="button" value="botão" id="meuBotao" />

Arquivo Javascript:


window.onload () {
   document.getElementById("meuBotao").onclick = function () {
     meuEventoAqui(); //ou o meu código, não preciso fazer a chamada de outra função posso programar diretamente aqui.
   }
}

Olhando esse pequeno trecho, talvez você esteja me achando um louco em pensar que defendo a forma de atribuir eventos pelo javascript, pois dessa forma gerou 5 linhas à mais no meu código e da forma que o Carlos defende, chamo a função diretamente no evento e pronto problema resolvido! Pois bem, vamos às razões que me levam a preferir chamar pelo javascript:

Chamando todas as funções pelo javascript, não se mistura comportamento com estrutura.

Para fazer a manutenção de código, vc não precisa modificar estruturalmente (html), pois está tudo no javascript e dessa forma não é necessário fazer a mudança de dois arquivos, é necessário apenas a mudança no javascript (o que é mais coerente)

No final das contas o seu código não irá crescer tanto assim, mas as poucas linhas que geram a mais, com certeza é compensado com a facilidade da manutenabilidade (nem sei se essa palavra existe. rs)

Você pode usar a sua estrutura (html), em várias páginas, pois como só tem a estrutura, sendo necessário apenas trocar o javascript, sem maiores problemas.

Todos os eventos (ou a maioria deles) estarão no window.onload, portanto não é necessário ficar caçando elementos no seu html, para colocar as funções, tudo estará mais organizado para adicionar código, ou mudá-lo

Porque eu gosto desse jeito, talvez essa seja a mais importante ;).

Bom, essas são as minhas razões à acreditar que chamando as funções pelo javascript é melhor, mas a verdade não é absoluta e cabe à você decidir isso, então o que proponho é estudar ver as diferenças entre cada forma e escolhe-la, de acordo com a sua necessidade e depois me contar qual foi a escolha e me dizer as razões. Talvez, até possa mudar de opinião.

fuiii...

Função eval()

2007-06-19T09:23:00.000-03:00

Função extremamente interessante do Javascript e no entanto não vejo ela sendo muito explicada por aí e ela é uma daquelas funções que você sempre precisou, mas vc não sabia disso.

Definição:
Converte uma string em código JavaScript e executa-o, claro se for um comando válido.

Código:
eval('comando_string')

Conheci-a há pouco tempo, porém estou apaixonado, ela é uma poderosa ferramenta para códigos bem dinâmicos e códigos que possuam poucos kbs. Vamos à um exemplo de aplicação bem simples e com isso já dá para notar como é legal:

Tenho um menu com vários itens (Home, Contatos, Portifólio, Fotos, Blog, Quem Somos e por ai vai) esses links são carregado por AJAX e em cada um desses links existe um botão voltar existe uma rotina da chamada de página correspondente (vamos supor também que não conheço a solução do problema de histórico do Bernardo Rufino, nem a do JulioGreff) e para efetuar essa volta, tive a "brilhante" idéia de quando um item do menu é clicado, armazeno o valor desse item à uma variável, e esta por sua vez só vai armazenar o valor de um item (histórico de um), então quando pressiono o voltar ele testa o valor dessa variável e chama a função correspondente ao item, ou seja, a variável recebe o valor do penúltimo item clicado e carrega a página (penúltimo item, porque o último é o link em que estamos :)), E assim ficou meu código:


document.getElementById("meubotaovoltar").onclick = function () {
    if (historicode1 == "home") { //historicode1 é minha variável que recebe o valor do último item clicado
       location.href="home.htm"; //faz a chamada da página
    } else if (historicode1 == "contatos") {
       location.href="contatos.htm"
    }
    // E assim sucessivamente...
}

Aí em cima nenhum mistério, fiz um teste para cada um dos valores depois faço um location para a página correspondente.

Já com o uso do eval() todas essas linhas são substituídas por apenas uma (pode acreditar). Como disse anteriormente a função eval() Converte uma string em código JavaScript e executa. Como se pode notar o valor que a variável armazena é similar ao valor da página em que vai ser redirecionada, a única alteração é o sufixo (viu como as aulas de português são importantes, sei até falar bonito) ".htm". Let's Go:


document.getElementById("meubotaovoltar").onclick = function () {
    eval("location.href="+historicode1+".htm");
}

Entendeu?! Independente do valor da variável historicode1 o Javascript irá chamar a página certa (claro, se a página existir e se atribuiu o valor correto da variável).

Agora é fácil perceber o potencial dessa instrução, sempre onde tiver uma lista de coisas similares à fazer, essa instrução te ajuda muito, pois normalmente quando se tem uma lista dessa você atribui o valor das funções, ou seja lá o que esteja atribuindo, de forma semelhante, diferenciando apenas um pedaço do nome e esse por sua vez pode ser passado por parâmetro, não tendo mais a necessidade de você testar cada valor.

Fuiii...

Dúvidas, Críticas, Sugestões... Estou aqui para isso!

Submeter com a tecla Enter no Internet Explorer

2007-06-15T10:01:00.000-03:00

Amigos e amigas, mais uma vez aqui estou para falar de um, dos vários "bugs" do IEca, pois bem estava feliz da vida de ter resolvido algumas coisas chatas em relação ao IEca, estava tudo funfando legal, mas você sabe, alegria de pobre dura pouco, e alegria de desenvolvedor testando o seu código no IEca, dura menos ainda.

Fui submeter uma pesquisa teclando o Enter e o IEca não submetia, aliás ele submetia, mas não interpretava o que tinha que ser feito. Estranho não?! Ainda bem que para resolver esse problema é bem simples, existe um elemento html que se chama button, não estou falando do input, ele funciona de forma semelhante ao input, com muito mais opções e é a solução do meu problema.

Características:

Aceita três tipos de botões button, submit e reset.

Tem que abrir e fechá-lo

Pode-se colocar uma imagem

É imprencídivel que coloque algum texto no botão, pois é ilegal (segundo a W3C), que coloque apenas uma imagem

Semelhante ao input coloca-se o value, para submeter os dados

Uso do elemento:


<button type="submit" name="submit" value="submit">Enviar<img src="http://www.blogger.com/icons/send.gif" alt="Enviar" /></button>

Existem outras formas de fazer essa submssão funcionar, fica a seu critério escolher uma, mas eu gosto dessa solução e vc?

Fuiii...

E se os sistemas Operacionais fosse linhas aereas?

2007-06-14T13:19:00.000-03:00

Muito divertido, uma analogia de que se os SO's fossem aviões.

Link

ps: Está em inglês.

fuiii...

JSON e AJAX uma dupla do barulho II

2007-06-08T09:12:00.001-03:00

Esse post, vai ser só pra ilustrar uma das várias formas de montar a
estrutura de JSON, no lado do server-side, como exemplo vou usar php.
Existe frameworks para isso, então fica a seu critério se vai usar um framework ou desenvolver um code para isso (o que é bem simples e acredito que não há necessidade de um framework). Pois bem, como disse
anteriormente, JSON, até o uso eval, é apenas uma string, logo é só
montar uma string com os padrões. Relembrando o padrão:


var myJSONObject = {"bindings": [
        {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},
        {"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},
        {"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}
    ]
};

Então agora é só montar a estrutura, no meu caso não vou me guiar pelo nome
da propriedade e sim pelo número da coluna, logo o nome das minhas
propriedades são, coluna1, coluna2, coluna3..., . Vamos lá.


    $tot ='';
    foreach ($arr_sql as $row){
      $linha = '';
      $i=0;
    foreach($row as $col) {
    if (! empty($linha)) {
          $linha .= ", ";
    }
    $linha .= "\"coluna$i\":\"$col\"";
      $i ++;
    }
    if (! empty($tot)) {
      $tot .= ", ";
     }
      $tot .= "{ $linha }";
    }
    $tot .= "{\"meuRet\": [$tot] }";
    echo $tot;
  }

Utilizei o foreach, pois a minha resposta do bd, retorna um array. Código feito, Viu como é simples, agora faça da maneira que lhe der na telha :).

Agora a forma que vc vai usar o retorno é simples. Provavelmentes esse JSON retornou algumas linhas, então, especifique a linha e a propriedade que deseja exibir.


var MyObjJson = eval ('('+http.responseText+')'); //Vai pegar o valor de retorno e transforma-lo em um objeto
alert (MyObjJson.meuRet[0].coluna0); // Mostra o valor da propriedade da coluna0, da linha 0 do objeto meuRet

Se você teve a paciência de ler até aqui, lanço-lhe um desafio, existem duas maneiras de montar uma estrutura JSON, aqui fiz uma que é propriedade, valor, quero saber se você consegue fazer da outra forma, OK?! O desafio está lançado.

Referência:
JSON.org

fuiii...

JSON e AJAX - Uma dupla do barulho

2007-06-03T11:52:00.000-03:00

JSON(Javascript Notation Object), é muito legalzinho, imagina só todos os browsers dão suporte sem precisar hackear nada, isso é uma magavilha, ele também é suportado por várias linguagens,.Provavelmente se nunca usou JSON, deve estar perguntando o porque de usá-lo? E quando?

Suponhamos:
Quando fazemos qualquer aplicação em AJAX, aplicação que de fato necessite de AJAX e não por modismo, e queremos pegar o retorno da requisição temos duas opções, ou podemos fazer que o javascript retorne uma array, ou podemos fazer um XML, para estrutura dos dados. Porém nenhuma das duas formas me satisfaz muito, pois se eu fizer um array, eu tenho que separar linhas das colunas com separadores e essa idéia de fazer separadores não é muito legal e com XML é até uma boa opção, mas ele é um pouco pesado em relação ao JSON, ou podemos fazer de outra forma que desconheço, mas deve existir. Vou usar um exemplo de JSON com AJAX, então vamos nessa.

JSON é uma estrutura de fácil entendimento, tanto para o humano quando para a máquina, é leve e como disse anteriormente é suportado por todos os browsers. Podemos construir uma estrutura JSON de duas formas.

Um coleção de nomes e valores. Objeto


var myJSONObject = {"aluno": [
        {"nome":"Yusuke", "nota1": 8.5, "nota2": 4},
        {"nome":"Kuabara", "nota1": 7, "nota2": 3},
        {"nome":"Ryei", "nota1": 7.5, "nota2": 6}
    ]
};

Uma coleção de valores. Array

Var myJSONArray =[8.5, 7, 7.5]

Sabido essas duas formas de construir um JSON, basta você adaptar à sua necessidade de uso, ou array, ou objeto. Outra coisa que esqueci de mencionar, quando usa a notação de objeto (primeiro exemplo), o javascript ainda não interpreta como tal, por isso tem que fazer uso da função eval().

var jsonObject = eval('(' + myJSONObject + ')');

Agora você tem um Objeto.

Exemplo com AJAX, não vou colocar a estrutura toda do AJAX, pois esse não é o foco, mas se você não sabe montar ou não entende a estrutura é só comentar, que volto no tema. OK?! Pois bem:

Estrutura dos dados retornados


{"aluno": [
        {"aluno":”Yusuke”, "nota1": 8.5, “nota2”: 4},
        {"aluno":”Kuabara”, "nota1": 7, “nota2”: 3},
        {"aluno":”Ryei”, "nota1": 7.5, “nota2”: 6}
    ]
};

Função retorno do AJAX:


function retorno(){
container = document.getElementById("container"); // o elemento que vai exibir o resultado

if (request.readyState == 4) {//verifica se o estado de completo
  
if (request.status == 200) {//verifica o status da requisição


var myJSONObject = eval('(' + request.responseText + ')');

//joga o retorno para o elemento que vai exibi-lo

conatiner.innerHTML = "Nome : " + myJSONObject.aluno[0].nome +"\nNota1 : "+ myJSONObject.aluno[0].nota1+"\nNota2 : "+ myJSONObject.aluno[0].nota2;
container.innerHTML += "Nome : " + myJSONObject.aluno[1].nome +"\nNota1 : "+myJSONObject.aluno[1].nota1+"\nNota2 : "+myJSONObject.aluno[1].nota2;
container.innerHTML += "Nome : " + myJSONObject.aluno[2].nome +"\nNota1 : "+myJSONObject.aluno[2].nota1+"\nNota2 : "+myJSONObject.aluno[2].nota2;
}
}
}

Viu como é simples, porém há ainda uma questão e ela é. Como vou fazer com que o meu código server-side (php, asp, ...) monte a estrutura de dados retornados?

To be Continued...

Update
Quando falei em notação de array, foi só para ilustrar como iria ficar os objetos, pois no exemplo de array ele se torna um objeto também, após o usa da function eval()

Novo Google Maps

2007-05-30T10:10:00.000-03:00

Eu sei que o tema desse blog, é mais voltado para o desenvolvimento, outro dia estava conversando com o meu colega e ele disse-me que estava colocando muitos assuntos no blog e tinha que ser mais específico, na hora eu concordei com ele, porém depois analisei e acho que colocar um plus não faz mal a ninguém, então estou trazendo mais esse assunto e no final das contas o blog é meu e faço o que quero nele. rs

Pra Google dominar o Mundo, só falta colocar a bandeira, pois o que possui de recursos não está no gibi, eu tentei uma vez catalogar todos os serviços, mas desisti são muitos, e agora tem mais um recurso que estou boquiaberto, todos conhecemos o Google Maps, mas agora eles implementaram no Google Maps, um tal de street View (visualizador de rua) e é isso mesmo que está pensando, você visualiza a rua como se estivesse nela e mais, você pode rotacionar a câmera 360 graus, é como se você estivesse na rua. Muito legal, por enquanto só tem fotos dos EUA, mas logo logo vai ter as fotos daqui do Brasil. Eles são demais.

Link

ps: Antes que comecem a falar, as fotos não são ao vivo.

Agora eu vou nessa, porque quero brincar um pouquinho.

fuiii...

Ferramentas Essenciais de um Web Developer

2007-05-29T09:05:00.000-03:00

Esse assunto é tema de todo blog e aqui não poderia ser diferente, uso no trabalho e em casa algumas ferramentas que auxiliam muito no processo de desenvolvimento e sem isso seria muuuuuuuuuuuuuito complicado desenvolver qualquer coisa. Então fiz um top 5 das ferramentas que uso, não vou disponibilizar o link, pois não tenho. I'm Sorry!

5 - DOM Inspector - Muito útil se você utilizar javascript, te ajuda muito a localizar os elementos. Muito Legal1

4 - Web Developer - Ainda não utilizei todos as opções dessa ferramenta, mas ajuda-me bastante, especialmente, porque tem uma função para trocar a resolução da tela, então posso ver direto do browser como vai ficar a página em diferentes resoluções. Bom!

3 - PHPLookup - É lógico que é apenas para quem trabalha com PHP, você faz a pesquisa e vai diretamente para a informação do manual. Muito Bom!

2 - IETab - Talvez pela comodidade que essa ferramenta me traz deveria ser a campeã, mas no trabalho eu não consegui instalar (acho que não tem suporte ao linux) mas em casa uso muito e bani o IE de vez. Espetacular!

1 - Error Console - É a grande campeã, sem o error console eu não seria nada, uso muito para o javascript, está certo que já inventaram uns debugadores de javascript por ai, mas não experimentei ainda e confesso que estou muito satisfeito com essa ferramenta. Íncrivel!

E você que já utilizou algumas delas, o que acha da minha lista? Acha que tem outras melhores do que essa?
Se você nunca usou experimenta!

Obs: Essa lista é para quem usa um browser de verdade (FF), pelo fato dele ser open-source nos traz essas facilidades. Apesar de gostar muito do Opera, pois na minha opinião ele é mais "inteligente", porém esses add-ons do FF me acostumaram muito mal, não tem como larga-lo.

Fuiii...

insertAfter no Javascript

2007-05-25T10:29:00.002-03:00

Que o javascript é uma poderosa ferramenta, não há dúvidas, porém tem certas coisas no javascript que não entendo, Vejamos:

Imagine o windows explorer, quando você clica no botão (+) ele abre a raiz para ver as subpastas da raíz correto? Então, na página que eu estou montando o efeito é parecido, porém as "subpastas" estão numa div e tenho que construi-la dinâmicamente (por causa do acesso ao banco de dados), a qualquer momento as informações das subpastas podem mudar. No início do desenvolvimento, pensei logo em utilizar o appendChild.

document.getElementById("meuDiv").appendChild("DIV");

Porém ele só adiciona um elemento (no caso, uma div) no final de uma lista de elementos (no caso, ele seria o último elemento do div meuDiv) e isso não me servia, pois eu tinha que colocar o elemento imediatamente após a linha em que foi clicado o botão (+), como de costume lá vou eu no google procurar a solução, achando a função insertBefore (inserir antes).

document.getElementById("meuDiv").insertBefore("DIV", document.getElementById("linhadoMeuDiv[1]"));

Bom até aqui meio caminho andado, pois ele adiciona agora a div onde eu quero, porém ele adiciona o elemento antes da minha linha, ou seja, o meu efeito "windows explorer" funcionava de cabeça para baixo.

Eu falando para mim.
_ Se tem insertBefore, logicamente vai ter insertAfter e meu problema vai estar resolvido, já posso pular para outros problemas.

E adivinha só, não existe essa função, tive então que procurar por uma solução lendo um pouco sobre DOM, logo fiz isso:

document.getElementById("meuDiv").insertBefore("DIV", document.getElementById("linhadoMeuDiv[1]").nextSibling);

Agora sim problema resolvido, aquela propriedade nextSibling, vai para o próximo elemento. Ao invés de pegar o elemento linhadoMeuDiv[1], vai para linhadoMeuDiv[2], depois de pensar um pouco ainda havia um problema.

Vamos supor que o meu div tivesse 10 linhas e eu pressionasse o botão (+) da décima linha, como é que eu iria passar para o próximo elemento se não havia? Ou seja, no último elemento iria me retornar vazio.

Obs: Só essa linha funcionou no firefox, porém é uma maneira errada de funcionar e isso pode interferir de alguma forma no código.

Criei uma função para evitar esse erro. A lógica é bem simples, eu verifico se o botão que pressionei pertence à última linha, se pertencer eu uso o appendChild senão eu uso insertBefore, aqui vai o código:


function insertAfter (Pai, Irmao, elemento, index="" ) {
 if (index != "") irmao = irmao+"["+index+"]";
 if (document.getElementById(Pai).lastChild.id == document.getElementById(irmao).id) {
  novoElemento = document.getElementById(Pai).appendChild(elemento);
 } else {
  novoElemento = div_plano.insertBefore("DIV", document.getElementById(irmao).nextSibling);
 }
 return novoElemento;
}

insertAfter("meuDiv", "linhaMeuDiv", "DIV", 1).setAttribute("id","DivSubLinha["+numero+"]");

função prontinha para você usar, só precisa passar os parâmetros:

Nome do elemento pai.

Nome do elemento da linha. (no meu caso, a linha em que foi clicado o botão)

Nome do elemento que vai ser adicionado. (ex: div, input, select,...)

o último parâmetro é opcional, pois no meu caso como eram várias linhas a única diferenciação entre elas era o número , pois todas tinham o mesmo nome, é claro. A minha separação foi feita por colchetes, ali fica à gosto do freguês, é só trocar da forma em que você está indexando.

Depois de criar o elemento, eu iria usá-lo, então tinha que saber o id para trabalhar com ele. Usei o setAttribute (setar atributo).

setAttribute("nomePropriedade", "valorPropriedade");

Essa função tem dois parâmetros o primeiro é o nome da propriedade do elemento (ex: id, name, value...) e o outro é o valor da propriedade.

Eu vi um tutorial muito bom sobre DOM e estou passando aqui o link, o problema é que está em inglês, mas vale a pena se esforçar um pouco para ler, isso se você não souber.

Espero que tenha sido útil e comentem please.

Fuiii...

Acentuação no Ajax

2007-05-24T13:15:00.000-03:00

Sabemos (ou pelo menos deveríamos saber) que o grande Boom do segundo semestre de 2006, foi Ajax todos os blogs possíveis e imagináveis abordavam o tema, era muita empolgação, todos os sites tinham que ter Ajax, em pouco tempo perguntavamos como poderíamos existir sem o tal Ajax ;), até que no final do ano com o intensivo uso de Ajax, vimos que não é as mil maravilhas. Percebemos que Ajax não é perfeito, como todas as coisas, e começaram a ter movimentos com grandes críticas ao Ajax, eu simpatizo com ele, mas como tudo na vida, na medida certa. Enfim, não estou aqui pra julgar o pobre coitado e se você quer ler mais sobre isso, na internet tem um monte de blogs que abordam o tema e no meu blogroll, que ainda vou fazer, também tem alguns que abordam. Como sempre, ou na maioria das vezes, vim apenas trazer o código.
Só fiz essa introdução, pois não tinha falado sobre isso e como todo bom anfitrião tenho que fazer as honras.

Cenário:
Nesse novo emprego, estamos implementando uma parte do site que utiliza ajax, para pesquisa em banco e como era de se imaginar esbarrei no problema de acentuação, e eu logo foi ao senhor-que-tudo-sabe (leia-se: Google), afim de uma resposta e a que mais achei foi de mudar o header da página server-side (no meu caso, php) e client-side (javascript e o HTML), para ISO-8859-1 (creio que a numeração seja essa) e vi um post muito bom lá no Elmicox (se você não conhece esse blog, não sabe o que está perdendo, ele saca muito só não passei o permalink, pois eu não salvei-o) logo fui testar, e para minha surpresa não deu certo, continuei a minha busca e nada encontrei, até que nós mesmos resolvemos a questão de uma maneira muito simples e de uma forma alternativa que achei muito legal e como disse simplérrima (isso ficou meio gay), a solucão baseia-se em substituir os caracteres acentuados, por aqueles códigos de acentuação do html e depois retornar essa troca para o javascript e os valores o html interpretar automaticamente a acentuação, vamos ao que interessa:
.
no PHP:


function html_scape($strIn) {
 $arr_procura = array ('á', 'à', 'ã', 'â', 'ä', 'õ', 'ò','ó', 'è', 'é', 'ê', 'ë', 'ì', 'í', 'ï', 'ç', 'Á', 'À', 'Ã', 'Â', 'Ä', 'Õ','Ò', 'Ó', 'È', 'É', 'Ê', 'Ë', 'Ì', 'Í', 'Ï', 'Ç');
 $arr_troca = array ('&aacute;','&agrave;', '&atilde;', '&acirc;', '&auml;', '&otilde;', ' &ograve;', '&ocirc;', '&egrave;', '&eacute;', ' &ecirc;', '&euml;', '&igrave;', '&iacute;', '&iuml;','&ccedil;', '&Aacute;','&Agrave;', '&Atilde;', '&Acirc;', '&Auml;', '&Otilde;', '&Ograve;', '&Ocirc;', '&Egrave;', '&Eacute;', '&Ecirc;', '&Euml;', '&Igrave;', '&Iacute;', '&Iuml;','&Ccedil;');
 return str_replace($arr_procura, $arr_troca, $strIn);
}

Pega-se por parâmetro a string que contém os caracteres que irão ser trocados. (Utilizei o retorno do sql, para o javascript).
A array $arr_procura, recebe os caracteres que vão ser procurados ( no nosso caso os acentuados).
A array $arr_troca, recebe os caracteres que vão ser trocados (no nosso caso aquele código html).
Após manda-se retornar a troca dos caracteres através da função str_replace.

Obs: Poderíamos utilizar um array bidimensional para fazer a troca, pois um array complementa o outro, mas para fins de melhor entendimento fiz duas arrays.
Como disse anteriormente, os arrays se complementam,logo você tem que manter a ordem do posicionamento dos caracteres que vão ser trocados.

Obs2: No meu caso os caracteres especias, são apenas, os acentuados, então o meu array ficou dessa forma, mas você pode alterar esse array da forma que for necessário pra ti, respeitando , é claro, o posicionamento nos dois arrays.

Update:
No outro blog o micox, fez uma observação muito interessante, no php tem uma função nativa que converte automaticamente os caracteres para o código html, dessa forma é bem mais simples de resolver o problema, a função é html_entities($string).

Comentem, please...

fuiii...

Expressões Regulares no JavaScript

2007-05-24T09:35:00.000-03:00

No javascript, que atualmente é a minha menina dos olhos, pois trabalho com ele o dia todo e até estou simpatizando com ele. Considero que no javascript é muito interessante ter esse conceito, pois facilita muito o trabalho do desenvolvedor, para fazer validação de formulário. Em expressões regulares, trata-se de procurar em uma string, toda a ocorrência da expressão declarada, com isso podemos buscar uma informação de um texto (string) onde queremos, ou fazer um padrão de string aceito para o campo determinado, essa parte é muito interessante para se fazer validação, no entanto o intuito desse post não é ensinar as expressões regulares em si, e sim como utilizar essa poderosa ferramenta com o javascript.

No javascript existe a função RegExp.

Do começo:

Uma variável qualquer tem que receber o valor da expressão regular
re = new RegExp("\\[(\\d+)\\]");

Como exemplo, a variável é instância e utilizei a ER que fiz no trabalho, tinha que procurar por uma lista de elementos o seu número index, e este por sua vez estava entre colchetes.

Logo após uma variável irá receber a execução da ER em uma determinada string
minha_er = re.exec("Nesse exemplo estou procurando por uma ocorrência de [1]");

Quando se faz isso, a varável minha_er torna-se um array de 2 elementos, independente de quantas ocorrências da ER contiver no texto, pois ele para de procurar na primeira ocorrência, onde o primeiro elemento da array (posição 0), vai retornar, [1] e o segundo elemento (posição 1) vai retornar, 1.

Obs: Não estudei essa função a fundo, então não posso confirmar, se passando outro parâmetro a função irá continuar a busca, afim de retornar os outros elementos, acredito, que há uma forma de trazer mais elementos para esta array, porém como disse anteriormente, não estudei-a a fundo, se você souber, os comentários são sempre muito bem-vindo.

Vou colocar o code, aqui sem comentários para poder copiar:


window.onload = function () {
re = new RegExp("\\[(\\d+)\\]");
minha_er = re.exec("Nesse exemplo estou procurando por uma ocorrência de [1]");
alert ("Nesse exemplo estou procurando por uma ocorrência de [1]");
alert (Posição 0:"+ minha_er[0]+" e posição 1:"+minha_er[1]);
}

Agora é só se diverti, um pouco.
Espero que tenha gostado.

Fuiii...

Diferentes Includes

2007-05-24T09:30:00.001-03:00

Feriadão, hoje sendo meu dia, (dia do trabalhador, cof cof), vou escrever um post bem relax, sobre algo que, sempre, tive uma certa curiosidade mas nunca li para saber maiores detalhes.

No PHP, temos instruções para incluir um arquivo em outro, normalmente usa-se a instrução include(), porém há outros como o require, require_once, include_once e não sabia a diferença entre eles, mas hoje deixei a preguiça pro lado e fui ler sobre o assunto, creio que em muitas situações pode ser bem útil saber qual instrução utilizar.

Todos funcionam de forma semelhante, a única diferença, até que se prove o contrário, é que no require, quando há algum erro ele retorna um Fatal Error, ou seja, interrompe o processamento da página e isso não acontece no include e também tem diferença na ordem em que se inclui os arquivos.

Observação:
Um erro de interpretação no arquivo incluído não causa a parada do processamento em versões do PHP anteriores a PHP 4.3.5. A partir desta versão, causa.

Vale lembrar que existem as suas derivações require_once e include_once, cada qual comporta-se de forma semelhante aos seus derivadores, porém o script é executado apenas uma vez. Esses dois já são para um uso mais restrito, pois não é sempre que você tem a convicção de que o script vai ser executado apenas uma vez.

fuiii...

A variável $this

2007-05-24T09:21:00.000-03:00

Estamos acabando a série de POO, espero que esteja gostando, hoje falaremos sobre a variável $this, anteriormente utilizei-a, porém não expliquei o uso. Agora se concentre bastante nas minhas próximas palavras, pois isso irá mudar a sua vida, se você não tem nervos de aço é melhor trocar de blog (por favor, não faça isso, foi só força de expressão), respire fundo que agora vou explicar-lhe. Que rufem os tambores...

A variável $this representa o próprio objeto. (pode acreditar é só isso, porém vou falar mais sobre isso pra encher lingüiça, porque senão o post vai ficar muito pequeno.)

Pois bem, toda vez que temos a variável $this dentro de uma classe, a variável $this se refere ao objeto em si.

Utilizando o exemplo do post anterior:


Class conta {
var $saldo;
Function conta{ // construtor
        $this -> saldo = 50;
}
Function ver() { //método
 Return $this -> saldo;
}

Function credito($valor){ //método
 $this->saldo += $valor;
}
}

$minhaconta = new conta;

No exemplo acima, o objeto minhaconta, quando instanciado vai receber o valor do saldo (por causa do construtor) e assim acontece com todos os outros métodos, pois todos eles referenciam ao objeto com a variável $this.

Qualquer dúvida, é só falar

Fuiii...

Métodos e Construtores

2007-05-24T09:16:00.000-03:00

Continuando...

Método

Podemos pensar no método como uma função, pois na verdade é isso, o que diferencia um método é o fato dele se encontrar em uma classe. Nele há toda a implementação da rotina para aquela classe, quase todas as classes são compostas por um conjunto de métodos (funções), na verdade diria todas, mas sempre aparece algo diferente por aí, então já viu. Exemplo:


Class MinhaClasse {
Function MeuMetodo () {
/* Código */
}
}

A function MeuMetodo é o nosso método.

Agora que você sabe tudo de métodos, vamos a mais um conceito chamado de construtor.

Construtor

Construtores são métodos executados no momento em que se instância um objeto, para se ter um construtor, basta que coloque o nome do método com o mesmo nome da classe à que pertence. Muito utilizado para inicializar variáveis. Ilustrarei isso tudo com um exemplo, diga-se de passagem todos usam esse exemplo.


Class conta {
var $saldo;
Function conta{ // construtor
        $this -> saldo = 50;
}
Function ver() { //método
 Return $this -> saldo;
}

Function credito($valor){ //método
 $this->saldo += $valor;
}
}
?>

$minhaconta = new conta;

O código acima representa três tarefas, bem simples, da conta de um banco, quando abro um conta (instancio o objeto), automaticamente tenho 50 de crédito na conta, pois utilizei um construtor o qual no momento em que instancio o objeto tenho 50 de crédito, e tenho dois outros métodos que me permite, ver o saldo (function ver) e depositar crédito (function credito).

Como diria aquele coelhinho da Warner
Isso é tudo pessoal.

Fuiii....

Classe dos Objetos

2007-05-23T16:49:00.000-03:00

Aqui estou eu, continuando a série de POO, já falamos anteriormente sobre objeto e iremos tratar hoje sobre a classe dos objetos.

Classe

Descreve um conjunto de dados estruturados e caracterizados por propriedades comuns. Uma classe é um conjunto de objetos que têm as mesmas operações (métodos), falei bonito agora.

Imagine uma turma (classe) qualquer, pois bem nessa turma possuem alunos (objetos). E nessa turma os alunos têm interesses comuns, portanto vão estudar as mesmas matérias (métodos). Nisso em que se baseia a classe, claro que há exceção, nem todos os alunos (objetos), necessitam ter as mesmas matérias (métodos) a cursar, mas ainda sim pertencem a mesma turma(classe).

Também existe o conceito de herança que é um pouco mais complicado, vou ficar por esse conceito por enquanto.

Ou seja

Uma classe de objetos pode ser definida como a descrição de um grupo de objetos mediante um conjunto de uniforme de atributos e serviços. Agora que estamos com bastante conceito, nada melhor que um bom exemplo:

Class Nome_da_classe {
Var $variavel1;
Function metodo_da_classe ($parametro) {
/* Corpo da Função (método) */
}
}

$objeto = new Nome_da_classe;

Criamos uma classe contendo um método (function) e depois instanciamos (inicializamos) o objeto, e trabalhamos com o objeto.

It's that all fulks!

Essa parte você já sabe, eu peço que você comente e agradeço por ter lido o post todo (essa parte é nova).

Fuiii...

Conceito de Objeto

2007-05-23T16:47:00.000-03:00

Vamos colocar um pouco de conceito aqui, Existe um tipo de programação chamada Programação orientada por objeto (ou POO, para os mais íntimos), como o próprio nome diz, faz-se a programação com foco nos objetos, de fato considero-a melhor de programar, não só eu, como muitos “fazedores” de códigos, ultimamente esse tipo de programação anda crescendo muito, também não é por menos, porém há muitas pessoas que preferem a programação linear por ser tratar de uma programação mais fácil de ser desenvolvida. Sem dúvidas, a programação linear não possui tantos conceitos como o POO, porém esses conceitos, existem pra facilitar a vida do fazedor e não pra complica-la, pois para fazer uma alteração no código fica muito mais fácil e se quiser utilizar uma parte do código de um programa em outro, também é mais simples.

Já expus a minha opinião em relação a isso, mas vou deixar claro que isso não quer dizer que a minha opinião é a verdade absoluta, pois existe ninguém melhor do que você mesmo pra dizer o que você prefere. :)

Dentre os vários conceitos, colocarei os principais para começar a desenvolver nesse tipo de programação e cada qual vai estar em um post distinto. Classe, Objeto, Método, Construtor, A variável This e quem sabe Sub-Classe. E como exemplo utilizarei PHP, pois gosto mais dessa linguagem.

Objeto

A parte mais importante da programação orientada por objeto, é o objeto, pois o que seria dela se não tivesse um objeto?, Em outras palavras "O objeto é O cara" ("O Cara", para quem não sabe é uma expressão com sentido daquilo ser o melhor, no nosso exemplo o objeto é o melhor), Muitos lugares definem o objeto como algo real, de fato em muitos casos será esse seu objeto, algo que se pode pegar, apertar, acariciar, é melhor parar por aqui. Porém, iria mais fundo nesse conceito, passando de tudo que é real, para uma entidade lógica que contém dados e código, com o qual manipulamos os dados, por exemplo:

Um sonho, posso considerá-lo um objeto?
Pode, pois em um sonho você pode compreender, esquecer, interpretar, jogar no bicho etc.

Vamos à outro exemplo:
Um conta de banco, pode-se sacar, efetuar um pagamento, depositar, conseguir um empréstimo, aborrecer-se com o banco com as tarifas altas etc.

Esses dois exemplos são muito bons, pois não existem no mundo real (só ideologicamente), mas mesmo assim podem ser um objeto, como percebe-se, os dois objetos tem em comum operações feitas a partir dele e à essas operações damos o nome de métodos (falaremos disso mais tarde).

Para utilizar um objeto é necessário instanciá-lo (iniciar):

$objeto = new nome_da_classe

O operador new é o responsável pela inicialização do objeto e para isso também temos que colocar uma classe referente à ele.

Espero ter conseguido ilustrar bem o conceito de objeto, qualquer dúvida comenta e senão tiver dúvida comenta também, se gostou comenta e senão gostou comenta também, enfim o importante é comentar. :)

Fuiii...

Abreviação das palavras

2007-05-23T16:42:00.000-03:00

Hoje li um post no Revolução e etc, que chamou-me a atenção, então resolvi fazer um fast-post, existe um tal elemento abbr, que a função dele é fazer uma abreviação de uma palavra, e se passar o mouse por cima da palavra aparece uma etiqueta com o significado completo da palavra, através da propriedade title, o uso dela é bem simples:

CSS
<abbr title="Cascading Style Sheets">CSS</abbr>

Só pra variar o IEca não dá suporte a esse elemento. Como de costume, existe maneiras de transpassar por esse problema, aqui vai uma delas:



Function abbrToSpan(){
 var newSourceCode;
  if(isIE){
    newSourceCode           = document.body.innerHTML;
    newSourceCode           = newSourceCode.replace('<ABBR','<SPAN class="abbr">');
    newSourceCode           = newSourceCode.replace('</ABBR>','</SPAN>');
    document.body.innerHTML = newSourceCode;
  }
}

window.onload = function(){
 abbrToSpan();
 /* other onloads */
}

isIE = (document.all) ? true:false;

Aqui vai o link do código.

O código é bem simples, substitui as tags abbr por tags span com a classe abbr, que ela por sua vez, vai estar configurada no css (estilo).

Entendido o assunto, vou estende-me um pouco mais, existem diferenças entre abreviações, há aquelas que se fala letra por letra da abreviação (CSS, HTML, PHP etc), mas há aqueles onde formam uma palavra (Modem, ALCA, ONU etc) e para esse segundo grupo utilizamos a tag acronym o qual funciona de forma semelhante:

ONU
<acronym title="Organização das Nações Unidas">ONU</acronym>

Esse é suportado pelo IEca 6.

Conclusão:

Não há problema de utilizar o acronym em tudo, a não ser que você tenha problemas com códigos "sujos".

Referência:
Maujor

Fuiii...

Tratamento da string URL em PHP

2007-05-23T16:40:00.000-03:00

Ufa! Até que enfim, tem php na área.

Algumas vezes nós passamos os dados de um formulário html, pelo método GET e quando vamos pegar esses valores, algumas vezes, não vem da forma que enviamos, pois a url é codificada, então aqui vai uma dica de como codificar/decodificar esses dados.

Função urlencode

String urlencode(string texto); // Responsável por codificar a string

Função urldecode

String urldecode(string texto); // Responsável por decodificar a string

Obs: As regras pra codificar os dados, são as seguintes:

O caracter espaço é substituído por +

Todos os outros caracteres não alfanuméricos, são substituído por % sucedido pelo correspondente código da tabela ASCII.

Fuiii...

INNER JOIN - SQL

2007-05-21T16:15:00.000-03:00

Mudando um pouco de ares, irei falar de SQL (Structured Query Language), nesse post irei falar de uma função em que se ouve muito falar, apresento-lhe INNER JOIN. Vou considerar que você tenha alguma noção de SQL.

INNER JOIN

Em muitos casos, você poderá precisar apresentar um resultado o qual não está em apenas uma tabela, então você utiliza o INNER JOIN para fazer esse relacionamento das tabelas, fazendo da seguinte forma, como você sabe, ou deveria saber, quando duas tabelas estão interligadas, de alguma forma, precisa-se de um campo comum entre ambas (chave estrangeira).

Por exemplo:

Tenho uma escola com várias unidades e criei uma secretaria virtual. Nessa secretaria virtual, tenho os alunos cadastrados, porém eu preciso saber qual é a unidade em que esse aluno estuda. Possuímos aqui pelo menos duas tabelas, Aluno e Unidade, onde o relacionamento é um-para-muitos, porque um aluno só pode estar matriculado em uma unidade, porém uma unidade possui vários alunos. Eles se relacionam da seguinte forma, a tabela aluno tem um campo que se relaciona diretamente com o campo do código da unidade na tabela unidade, não sendo obrigatório os dois campos terem o mesmo nome, sendo apenas obrigatório os dois terem o mesmo tipo, se você não conhece SQL pode parecer complicado, mas posso assegurar-lhe que não é.

É nesse caso, em que o INNER JOIN vai ser usado, Veja:

$SQL = "SELECT Aluno.nome, Unidade.unidade";

Seleciona o campo nome da tabela aluno e campo unidade da tabela unidade

$SQL .= " FROM Aluno";
A origem é a tabela Aluno. Isso significa que a tabela Aluno é o lado UM de um relacionamento, e com isso, A pesquisa é feita mais rápida;Você poderia colocar a tabela Unidade como origem.

$SQL .= " INNER JOIN Unidade";
A tabela Aluno será ligada a tabela Unidade.

$SQL .= " ON Aluno.cod_unidade = Unidade.cod_unidade";
Faz-se aqui o relacionamento das tabelas.

$SQL .= " ORDER BY Aluno.Nome";
Coloquei que a pesquisa vai ser exibido na ordem alfabética dos nomes dos alunos.

Ps.: Fiz essa pesquisa com o php, por isso está lá um .=, pois isso no php significa que estou concatenando a string SQL.

*Foi um exemplo simples, claro que nesse exemplo precisaria de mais tabelas.

Junto com o INNER JOIN, existem ainda o LEFT JOIN e o RIGHT JOIN, que funcionam de maneira semelhante. O INNER JOIN, faz o relacionamento entre duas tabelas e depois exibe o que está nas duas tabelas, já o LEFT JOIN faz a mesma coisa, porém só exibe os dados da tabela da esquerda (a primeira tabela que foi declarada) e o RIGHT JOIN, dou-lhe uma bala juquinha se você acertar...

Exatamente o que você pensou, faz o mesmo que o LEFT JOIN, porém exibe apenas os dados da tabela da direita (a segunda tabela que foi declarada).
Com isso despeço-me, até a próxima

Fuiii...

Recursividade - Usar ou não usar?

2007-05-21T16:08:00.000-03:00

Olhando a estatística de visitas no blog, percebi, que muitas pessoas visitaram, com a seguinte pesquisa “recursividade” e eu tinha falado antes que abordaria o assunto, então trago à tona esse assunto, recursividade é uma técnica que trata-se da função chamar ela própria. exemplificando:

Function fatorial( n )
{
if( n==0 )
return 1;
else
return n * factorial(n-1);
}

No exemplo acima, irá ser feito o cálculo da fatorial do número n, ao invés de usarmos um comando de repetição, faz-se várias chamadas dela mesma. Recursividade usa mais memória, pois está chamando a própria função várias vezes. Claro que em um exemplo como esse, você utilizaria um comando de repetição, mas há situações as quais o uso recursivo da função vai cair como uma luva.

Tem que tomar-se o cuidado de terminar a recursividade.

Qualquer dúvida é só postar.

Fuiii...

addEventListener ou será AttachEvent

2007-05-21T16:06:00.000-03:00

addEventListener, documentado pela W3C, é uma forma de atribuir evento a um determinado objeto.

Sintaxe:

objeto.addEventListener(evento, funcao, captura)

A função é executada, quando o evento do objeto é acionado. E o último parâmetro indica se os eventos ocorridos dentro da função deverão iniciar a chamada para outros eventos. Exemplificando:

window.addEventListener("load", function() { alert("Olá Mundo."); }, true);

Esse é um exemplo simples de uso, quando a página estiver sendo carregada exibimos um alert na tela, com a mensagem, típica, "Olá Mundo.". No entanto, o excelentíssímo IEca, não irá rodar isso. Apesar, da W3C ser responsável pela padronização da web, o IEca não reconhece essa função, para isso a microsoft inventou o AttachEvent, que funciona de forma similar. Abaixo vai o código para os dois tipos de browsers:

function OlaMundo(){
alert("Olá Mundo!");
}

function addEvent(obj, evType, fn){
if (obj.addEventListener) // Usuário Inteligente
obj.addEventListener(evType, fn, true)
if (obj.attachEvent) // Usuário do IEca
obj.attachEvent("on" + evType, fn)
}

addEvent(window, "load", OlaMundo());

Até aqui, sem problemas, tirando uma questão simples, porque fazer isso se eu posso perfeitamente atribuir evento no HTML? Como no exemplo:

<input name="meubotao" onclick="Minhafuncao();" type="button" />

O motivo é o acoplamento (acoplamento não é legal). Em Web Standards a premissa é separar aparência(CSS), de estrutura(HTML) e de comportamento(Javascript), dessa forma você consegue separar estrutura de comportamento.

Fuiii...

CDATA e suas características

2007-05-21T16:00:00.000-03:00

CDATA - Antes não dava muita importância à CDATA, podes crer eu era louco, mas com o decorrer do tempo, percebi que isso estava em todos os lugares, era só eu ver um código com XML que lá estava o , perdoe-me a expressão, maldito CDATA, com o tempo aprendi a canalisar a minha raiva e transformei essa raiva em motivos para estuda-lo (tá legal eu viajei um pouquinho, mas eu gosto de ser dramático). Seções CDATA são usadas para preservar blocos de texto que seriam interpretados. As seções CDATA começam com a string "<![CDATA[" e terminam com a string "]]>". A string ']]>' não pode ocorrer dentro da seção CDATA. Essa foi uma definição que eu vi muito na net, porém essa informação é incompleta, pois com o CDATA, você pode trabalhar com expressões regulares ( expessões regulares para quem não sabe, normalmente é um padrão utilizado para se fazer uma busca e também pode-se ser usado para construir um padrão para uma string), Segue abaixo um exemplo de ER, de uma string cpf, onde determina o que deve haver na ER (expressão regular):
([0-9]{3}\.) {3} -([0-9]) {2}

Parece um bicho de sete cabeças, mas é molinho. E você pode fazer esse tipo de coisa com o CDATA, imagina a infinitade de possibilitades que tem-se com isso.

Não vou colocar um exemplo prático aqui, pois eu acredito que só vou complicar, irei passar dois links bons, um fala sobre apenas Expressões Regulares e o outro expressões regulares com CDATA.

Expressões regulares

Expressões Regulares com CDATA

ps: Utiliza-se muito E.R. para fazer a validação de campos como e-mail, cpf, rg etc.

Fuiii...

Titulo Editável com Javascript

2007-05-21T15:57:00.001-03:00


<html>
<title>Título editável com JavaScript</title>

<style type="text/css">
#titulo {
font-size:36px;
font-face: "Comic Sans MS";
color:#400;
}
</style>
<script type="text/javascript">

//Quando carregar a página ele chama essa função

window.onload = function(){
function editartitulo(){

// A linha abaixo ele procura "um" elemento que tenha a id titulo, que no nosso caso o elemento é um span

var span = document.getElementById('titulo');
span.onmouseover = function(){

// ele chama essa função quando o mouse passa por cima dele (span).

this.style.background = '#000000';

// troca a cor de fundo.

this.title = "Clique"

// coloca uma tag, para o usuário saber onde clicar.


}
span.onmouseout = function(){

// Função executada quando o mouse sai de cima do span.

this.style.background = '';
}
span.onclick = function(){

// Função executado ao clicar do mouse (no span, é claro)

var texto = this.firstChild.nodeValue;

// Aqui começa a parte interessante, ele joga dentro da variável texto, o conteúdo do "primeiro filho", do span, que no caso é o texto contido nele, através da propriedade nodevalue.

var input = '<input type="text" value="'+texto+'">';

// Via código, como já disse antes, criamos um elemento input do tipo caixa de texto, por padrão é o conteúdo da variável texto.

this.innerHTML = input;

// inclui o input dentro do span

var cxtexto = this.firstChild;

// isso é uma forma que muita gente usa, inclusive eu, para não ficar chamando o elemento pelo "nome completo" (this.firstChild). como todo bom brasileiro, criamos apelidos para isso.

this.onclick = null;
this.onmouseover = null;
cxtexto.select();

// Isso é firula, é pra você não precisar selecionar tudo o que está dentro da caixa de texto, para depois digitar o que queira.

cxtexto.onblur = function(){

// Função executada quando a caixa de texto perde o foco.

this.parentNode.innerHTML = this.value;

//o pai da caixa de texto (no caso, o span), recebe o valor da caixa de texto.

document.title = this.value;

// O título do documento, recebe o valor da caixa de texto

editartitulo();

}

//Abaixo vai um plus do código, eu vi no site do O Básico da Web, é pra você poder, apertando a tecla enter, fazer a entrada do texto que você digitou. :)
// é bem simples, toda vez que você digitar algo, verifica-se qual é o código da tecla na tabela ASCII, se foi igual ao enter, código 13, a caixa de texto perde o foco.

cxtexto.onkeypress = function(e){

var keynum;
if(window.event) // IE
keynum = window.event.keyCode;
else if(e.keyCode) // Netscape/Firefox/Opera
keynum = e.which;
if (keynum == 13) this.blur();
}
}
}
editartitulo();
}
</script>

</head>
<body>
<center><span id="titulo">Edite este título</span></center>

</body>
</html>

fuiii...

Titulo Editável

2007-05-20T11:07:00.001-03:00

Eu queria ter postado ontem, porém por motivos de força maior, não pude fazê-lo.
Depois de ter enchido a tela de explicações sobre DOM, talvez não tenha elucidado uma maneira legal o uso de DOM, lembrei-me de um site o qual gosto NetVibes, lá tem várias coisa legais, mas uma me chamou a atenção, talvez pelo fato de aparentemente ser bem simples, mas isso não vem ao caso, pois bem, quando você entra no site, pode-se editar o título da página, estou falando dos dois títulos, da página e do browser, resolvi, então arregaçar as mangas e colocar o tico-teco para funcionar. O resultado, foi o seguinte:

<html>
<title>Título editável com JavaScript</title>

<style type="text/css">
#titulo {
font-size:36px;
font-face: "Comic Sans MS";
color:#400;
}
</style>
<script type="text/javascript">

//Quando carregar a página ele chama essa função

window.onload = function(){
function editartitulo(){

// A linha abaixo ele procura "um" elemento que tenha a id titulo, que no nosso caso o elemento é um span

var span = document.getElementById('titulo');
span.onmouseover = function(){

// ele chama essa função quando o mouse passa por cima dele (span).

this.style.background = '#000000';

// troca a cor de fundo.

this.title = "Clique"

// coloca uma tag, para o usuário saber onde clicar.

}
span.onmouseout = function(){

// Função executada quando o mouse sai de cima do span.

this.style.background = '';
}
span.onclick = function(){

// Função executado ao clicar do mouse (no span, é claro)

var texto = this.firstChild.nodeValue;

// Aqui começa a parte interessante, ele joga dentro da variável texto, o conteúdo do "primeiro filho", do span, que no caso é o texto contido nele, através da propriedade nodevalue.

var input = '<input type="text" value="'+texto+'">';

// Via código, como já disse antes, criamos um elemento input do tipo caixa de texto, por padrão é o conteúdo da variável texto.

this.innerHTML = input;

// inclui o input dentro do span

var cxtexto = this.firstChild;

// isso é uma forma que muita gente usa, inclusive eu, para não ficar chamando o elemento pelo "nome completo" (this.firstChild). como todo bom brasileiro, criamos apelidos para isso.

this.onclick = null;
this.onmouseover = null;
cxtexto.select();
// Isso é firula, é pra você não precisar selecionar tudo o que está dentro da caixa de texto, para depois digitar o que queira.

cxtexto.onblur = function(){

// Função executada quando a caixa de texto perde o foco.

this.parentNode.innerHTML = this.value;

//o pai da caixa de texto (no caso, o span), recebe o valor da caixa de texto.

document.title = this.value;

// O título do documento, recebe o valor da caixa de texto

editartitulo();

//recursividade, em outro post eu explico isso

}

//Abaixo vai um plus do código, eu vi no site do O Básico da Web, é pra você poder, apertando a tecla enter, fazer a entrada do texto que você digitou. :)
// é bem simples, toda vez que você digitar algo, verifica-se qual é o código da tecla na tabela ASCII, se foi igual ao enter, código 13, a caixa de texto perde o foco.

cxtexto.onkeypress = function(e){

var keynum;
if(window.event) // IE
keynum = window.event.keyCode;
else if(e.keyCode) // Netscape/Firefox/Opera
keynum = e.which;
if (keynum == 13) this.blur();
}
}
}
editartitulo();
}
</script>

</head>
<body>
<center><span id="titulo">Edite este título</span></center>

</body>
</html>

ps: Não seria necessário colocar o código no javascript para o onmouseover e onmouseout para trocar a cor de fundo do span, bastaria colocar hover no css, mas o nosso excelentissímo IEca não aceita.

Como diria a minha vovózinha, mamão-com-açúcar. Só mais uma coisa, como deve ter percebido, usa-se muito a variável this, e eu não comentei sobre o uso dela, é que isso já é um assunto, para os próximos posts.

ps: Eu não coloquei no título para não assustar, mas isso é um exemplo de DHTML.

fuiii...

O Recomeço...

2007-05-20T10:02:00.000-03:00

Nesse novo blog tudo continua como antes, com algumas modificações, tomará que goste das modificações, mas ainda tem muita coisa para ser mudada e você sabe como é mudança, tem muita coisa para ser feita, Desculpe pelo transtorno, mas já já trarei assuntos interessantíssimos aqui. Dúvidas, sugestões, críticas comentei aqui, sempre é muito gratificantes os comentários. Agora vou continuar com a mudanças de posts.

ps: Sou totalmente desprovido de imaginação, então não estranhe o nome do blog e també sou muito preguiçoso, vou trazer apenas alguns posts do meu outro blog. :)

fuiii...