E não é que voltei...

Salve, salve!

Senti falta disso aqui, de volta em casa, vamos arrumar essa bagunça.

Muito tempo passou, muita coisa mudou e o twitter 'tomou de assalto' o mundo dos blogs, no momento estou ignorando isso e voltando com várias ideias.

Claro que seria mais fácil criar um novo blog e ignorar todas as coisas que, agora discordo, porém acho legal deixar as coisas por aqui pra ser possível ver a minha evolução profissional e quem sabe inspirar alguns iniciantes.

Vamos deixar de papo furado e começar os trabalhos.

Fui que fui!

Ate mais

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

Ú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

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

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

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

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

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

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

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