Coisas De Web

Nome:
Local: Rio de Janeiro, RJ, Brazil

Que perguntinha hein?! Mas vamos lá, adoro estudar assuntos relacionados à web, sempre que posso aprendo uma tecnologia, técnica ou linguagem nova. Tento sempre ver quais são as tendências e acompanha-las, enfim eu sou um eterno aprendiz. Deixando o lado profissional, entrando no lado pessoal, sou uma pessoa super gente-boa (pelo menos eu me acho. rs), adoro curtir a night, sair com os amigos, fazer novas amizades e viajar (tem coisa melhor do que isso?) Acho que você já está sabendo demais sobre mim. Fuiii...

quarta-feira, 30 de maio de 2007

Novo Google Maps

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

Marcadores: ,

terça-feira, 29 de maio de 2007

Ferramentas Essenciais de um Web Developer

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

Marcadores:

sexta-feira, 25 de maio de 2007

insertAfter no Javascript

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

Marcadores: , ,

quinta-feira, 24 de maio de 2007

Acentuação no Ajax

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 ('á','à', 'ã', 'â', 'ä', 'õ', ' ò', 'ô', 'è', 'é', ' ê', 'ë', 'ì', 'í', 'ï','ç', 'Á','À', 'Ã', 'Â', 'Ä', 'Õ', 'Ò', 'Ô', 'È', 'É', 'Ê', 'Ë', 'Ì', 'Í', 'Ï','Ç');
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...

Marcadores: , ,

Expressões Regulares no JavaScript

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

Marcadores: ,

Diferentes Includes

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

Marcadores:

A variável $this

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

Marcadores: ,

Métodos e Construtores

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

Marcadores: ,

quarta-feira, 23 de maio de 2007

Classe dos Objetos

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

Marcadores: ,

Conceito de Objeto

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

Marcadores: ,

Abreviação das palavras

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

Marcadores: ,

Tratamento da string URL em PHP

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

Marcadores:

segunda-feira, 21 de maio de 2007

INNER JOIN - SQL

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

Marcadores:

Recursividade - Usar ou não usar?

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

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

Marcadores: , ,

CDATA e suas características

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

Marcadores: ,

Titulo Editável com Javascript

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>

<!-- O css abaixo, é para o página não ficar extremamente tosca, só pra dar um estilozinho, qualquer dúvida vai no post CSS - Parte I -->
<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...

Marcadores: ,

domingo, 20 de maio de 2007

Titulo Editável

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>

<!-- O css abaixo, é para o página não ficar extremamente tosca, só pra dar um estilozinho, qualquer dúvida vai no post CSS - Parte I -->
<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...

Marcadores: ,

O Recomeço...

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