Leandro Garcia

Google Charts

Eu ja me peguei algumas necessitando incluir gráficos em algumas aplicações que desenvolvi. Cheguei até a desenvolver uma função que gerava gráficos em barra, mas não era muito funcional e, além de de só poder utilizar gráficos em barra não era muito bacana.

Eis que descobri uma ferrmente bem bacana chamada Google Charts.

Mas qual a vantagem?

Basta que você insira uma tag img em seu código e no src dela você coloque um determinado endereço com alguns parâmetros.

Por exemplo.

Olha a url.

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World

Viu como é simples. No site tem a documentação de como se elaborar outros tipos de gráficos.

Outros exemplos.
Acelera

Linha

Pizza

Mapa

Matematica

Radar

Entre Outros

• 1 comentário
• Comentar
• Permalink
• Compartilhe

JSON (JavaScript Object Notation)

Muitas vezes nos deparamos com a necessidade de intercambiar dados entre páginas, servidores ou até mesmo domiínios. A maioria de nós, inclusive eu a não muito tempo atrás, acredita que a única maneira de fazer esse intercambio é através de XML. Mas não é bem assim. Existe o JSON.

O JSON é um formato leve para intercambio de dados.

Mas qual a vantagem em relação ao XML?

Eu vejo três.

1ª – É bem mais leve de ser carregado do que um arquivo XML.

2ª – É mais fácil de se trabalhar

3ª – É Cross Browser*

*Quando usamos XML nos deparamos com um problemão para parsear as informações, as regras de segurança dos browsers. No Firefox, por exemplo, não é possível parsear as informações provenientes de um XML que esteja em um servidor diferente da aplicação, ou seja, se sua aplicação estiver hospedada em www.aqui.com.br, o Firefox só permitirá que você parseie um XML se ele estiver em, por exempo, www.aqui.com.com/esse.xml, agora se estiver, por exemplo em www.outro.com.br/esse.xml, as regras de segurança bloquearão sua aplicação. (Não necessáriamente isso acontece nas linguagens Backend)

Um vez explicado as vantagens do JSON, vamos ao formato.

{"notas" : [
   {"nome":"João", "nota1":8, "nota2":6, "nota3":10 },
   {"nome":"Maria", "nota1":5, "nota2":9, "nota3":8 },
   {"nome":"Pedro", "nota1":2, "nota2":7, "nota3":5 }
]};

No exemplo acima, temos um conjunto de dados chamado “notas” que tem as informações de três alunos, commo nome e notas.

Você pode ir hieranquizando as informaçõe da forma que melhor lhes convier.

Você encontra o JSON na maioria das APIs abertas da Internet, como as do Google, Facebook, Flickr, Twitter, etc.

Mas tudo isso não quer dizer que o XML seja inútil ou não deva ser usado. Cada caso e um caso. Existem casos web a for que se utilizam dos dois formato, outros disponibilizam os dois formatos (Twitter por exemplo)…

Mais informações em http://www.json.org/json-pt.html

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe

Trabalhando com datas em PHP

É apenas uma dica, que par muitos já deve ser velha, mas tenho certeza de que para muitos é uma novidade.

Estou planejando escrever este post com esta dica faz tempo, mas não havia me decidido pela forma com que eu escreveria. Acabei me decidino por uma maneira simples e  direta.

Durante muito tempo, sempre que eu precisava armazenar uma data na base de dados o fazia pela maneira em que nós, brasileiros, escrevemos, ou seja, 22/11/1984 (meu aniversário aliás, se quiser me dar um presente fiquem à vontade. rs), mas percebi que quando precisava comparar datas era um Deus nos acuda.

Lendo na Internet descobri que o mais interessante seria usar o formato Ano-mês-dia, ou seja meu aniversário ficaria 1984-11-22, uma maneira mais fácil de comparar datas e ordenar seus SELECTS.

Para escreve a data de hoje, ao invés de usar:

date('d/m/Y');

use

date('Y-m-d');

Você vai se surpreender como isso vai te ajudar.

Ah, aproveitando, se você precisar armazenar a data de atualização, use o formato datetime.

date('Y-m-d H:i:s');//1984-11-22 22:05:15

Vai aqui uma funçãozinha que eu fiz pra exibir a data no formato brasileiro à partir do formato acima.

function FormataData($date){

$dt = explode('"-",$date');

      return "{$dt[3]}/$dt[2]}/$dt[1]}";

}

Fica a dica.

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe

Desabilitar o Enter em um form com Javascript

Recentemente, estive trabalhando em um sistema com cadastros, quando me deparei com um problema, o Enter.

Não podia Permitir que o usuário desse o action do form ao pressionar o enter, geralemente para mudar de campo.

Pesquisei na Internet, achei algumas opções, mas acabei criando a minha do jeito que eu realmente precisava. Cheguei ao script abaixo.

function arrumaEnter (field, event) {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if (keyCode == 13) {
var i;
for (i = 0; i < field.form.elements.length; i++)
if (field == field.form.elements[i])
break;
i = (i + 1) % field.form.elements.length;
field.form.elements[i].focus();
return false;
}
else
return true;
}

<input onkeypress="return arrumaEnter(this, event)" maxlength="60" name="emitente" type="text" />

Linha a linha

function arrumaEnter (field, event) { - Nome da funcção, que recebe o campo e o evento utilizado

var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode; – Recebe o evento utilizado

if (keyCode == 13) { – Se a tecla é o Enter

var i; - Cria a variável

for (i = 0; i < field.form.elements.length; i++) – Roda todos os camposdo form

if (field == field.form.elements[i]) - Se o campo utilizado é o atual

break; Para

i = (i + 1) % field.form.elements.length; – Adiciona 1 ao campo atual

field.form.elements[i].focus(); – Dá um foco no próximo campo

return false; – Retorna Falso, ou seja, não permite o submit

else – Caso contrário

return true; – Permite o Submit

onkeypress=“return arrumaEnter(this, event)” – Chama a função

Veja

download

• 2 comentários
• Comentar
• Permalink
• Compartilhe

Otimizando o JS. Diminuir o uso do getElementById

Anteriormente, eu escrevi a respeito de otimização do css a fim de reduzir tempo de carregamento das páginas e tráfego.

Dando sequência, vamos otimizar o JS.

…

Quando estamos trabalhando em um grande projeto, é comum termos que utlizar diversas vezes a sintaxe getElementById. Porém, ao invés de para cada situação escrevermos toda a sintaxe, podemos criar uma pequena função para isso.

Como?

Não Otimizado

function mudacor(id){

document.getElementById(id).style.color = '#990000';

}

function mudacorTexto(id){

document.getElementById(id).style.color = '#990000';

}

function mudacorspan(id){

document.getElementById(id).style.color = '#990000';

}

Otimizado

function $(id){ return document.getElementById(id); }

function mudacor(id){

$(id).style.color = '#990000';

}

function mudacorTexto(id){

$(id).style.color = '#990000';

}

function mudacorspan(id){

$(id).style.color = '#990000';

}

Explicando

No exemplo acima, ao invés de eu escrever 3 vezes esta sintaxe, escrevi apenas uma. Em um projeto grande, é muito provável que você precise utilizar bem mais vezes essa sintaxe. Com esta simples função, podemos economizar muitos kbytes em trafego, pois reduzimos o tamanho do JS. Porém, não é apenas essa a vantagem, deixando o código mais enxuto, fica mais fácil de, posteriormente, o analisarmos para efetuarmos uma alteração ou correção.

Clique aqui e veja

Download

• 1 comentário
• Comentar
• Permalink
• Compartilhe

PHP: Trabalhando com horários – Fuso

Recentemente, peguei um projeto para desenvolver, onde eu deveria trabalhar com horário. Até ai tudo bem, no entanto eu teria que trabalhar com o horário do servidor, aí veio o problema.

Costumo utilizar um servidor que fica localizado nos Estado Unidos e o Fuso horário diferente. O que fazer?

Uma vez que você aprende é fácil, mas demorei um pouquinho a descobrir.

O PHP tem uma função interna que faz isso pra a gente, só devemos setar o local pra o qual desejamos setar o fuso.

A função é date_default_timezone_set()

Como usá-la?

Basta colocá-la no inicio da página em que você vai trabalhar com horário.

date_default_timezone_set('Brazil/East');<!--–– São Paulo ––-->
?>

Mas Garcia, estou trabalhando para uma empresa que fica em Portugal o que fazer?

Simples, altere as propriedades.  Aqui tem a lista de todos os fusos.

Veja em funcionamento

Download

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe

Maxlength no Textarea, é possível?

Não e sim. Vou explicar.

Não, pois não existe qualquer atributo HTML para a tag que delimite no número máximo de caracteres que um textarea pode ter.

Sim, pois com javascript tem como isso ser feito. Abaixo a função.

function limita(campo){
var tamanho = document.form1[campo].value.length;
var tex=document.form1[campo].value;
if (tamanho>=124) {
document.form1[campo].value=tex.substring(0,124);
}
return true;
}

Essa função conta quantos caracteres tem no textarea e não permite que enhum outro seja inserido.

Linha a linha

function limita(campo){ – Declara a função e receb uma variável com o nome do campo(textarea) em que você quer que a função atue.

var tamanho = document.form1[campo].value.length; – Declara uma variável (tamanho) e insere nela a quantidade de caracteres do textarea.

form1 – O nome do formulário, neste caso está declarado name=”form1″

[campo] – O nome do campo, textarea

value – O conteúdo

length – Quantidade de caracteres

Ou seja, o campo do formulário form1 contém x caracteres.

var tex=document.form1[campo].value – Declara a variável text e recebe o conteúdo do textarea.

if (tamanho>=124) { – Pergunta se a variável tamanho(quantidade de caracteres) é maior que 124

document.form1[campo].value=tex.substring(0,124); – Insere dentro do campo o conteúdo  recebido na variável tex com a quantidade máxima de caracteres

substring – Extrai o conteúdo  de uma variável, no caso tex, entre os delimitadores, ou seja, do caractere 0 até o 124

Link funcionando

download

• 1 comentário
• Comentar
• Permalink
• Compartilhe

Trabalhando com querystring e Javascript

Resolvi escrever o post anterior, pois percebi que algumas pessoas que estão começando com internet ou programação não sabiam o que era. Meu intuito em principio era falar apenas sobre como trabalhar com querystring no javascript.

Quando trabalhamos apenas com a interface de um projeto, ou com um site sem backend, não temos acesso a linguagens Servidor (ASP, JSP, PHP…). Isso se torna um problemão quando nos pedem que determinada página realiza uma ação, como por exemplo um alert, apartir do clique em uma outra página. Ficou confuso? Vou tentar melhorar.

Uma página, vou chamar de teste, ao ser aberta exibe um texto escrito “teste”, e mais nada. Uma segunda página, chamarei de index, exibe um link direcionado para a página “teste”, mas o projeto requer que após o clique no link, ao acessar a página seja exibido um alert dizendo “trabalhando com querystrings”. Como fazer isso? Com querystrings. Como? Utilize  a função abaixo.

function QueryString(variavel){
   var variaveis=location.search.replace(/\x3F/,"").replace(/\x2B/g," ").split("&")
   var nvar
   if(variaveis!=""){
      var qs=[ ]
      for(var i=0;i<variaveis.length;i++){
         nvar=variaveis[i].split("=")
         qs[nvar[0]]=unescape(nvar[1])
      }
      return qs[variavel]
   }
   return null
}

Explicando linha por linha:

function QueryString(variavel){ – define a função com o nome

var variaveis=location.search.replace(/\x3F/,”").replace(/\x2B/g,” “).split(“&”) – cria uma variável onde são pegadas todos itens da query.

var nvar - caria uma variável

if(variaveis!=”"){ - pergunta se a variável que criamos anteriormente com os itens da query tem conteúdo

var qs=[ ] - Cria uma variável array chamada qs

for(var i=0;i<variaveis.length;i++){ – faz um looping para percorrer todas as variáveis encontradas na query

nvar=variaveis[i].split(“=”) – define o valor da variáve

qs[nvar[0]]=unescape(nvar[1]) – define o valor para cada iten do array } - fecha o loop;

return qs[variavel] – retorna o que encontrou. Agora você tem como pegar os itens da query, mas ainda não está funcionando, pois você precisa chamar esta função de alguma maneira. Vou chamá-la através de uma escrita.

<script>
document.write('A query é:' + QueryString('id') )
</script>

A variável id chamada é a que passamos via barra de endereços. Ex.

http://tutoriais.leandrogarcia.com/query/query.html?id=1

Vai ser exibido na tela A query é: 1 Abraços.

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe

Querystring

Quem programa em qualquer linguagem backend para internet (ASP, PHP, Colffusion, ,NET…) conhece o que é uma querystring, mas para quem não conhece vou dar uma pequena explicação:

Querystring é a maneira utilizada para passarmos parametros para outras páginas através da barra de endereços sem a necessidade de um formulário.

Como é usado?

A estrutura é simples e não varia de linguagem para linguagem. Veja:

nomedapagina.html?variavel=conteudo&id=1

nomedapagina.html – é o endereço da página, pode ser qualquer extensão Web, PHP, ASP, ASPX…;

? – Esse é o x. É com o ponto de interrogação (?) que dizemos ao browser, ou às linguagens, que a partir dalí não é mais a página, mas sim uma variável;

variavel – é o nome que você dá, pode ser qualquer coisa. É muito comum utilizar “id” para passar um identificador;

conteudo – o que você quer passar para a outra página

& – outro ponto importante, o & indica ao browser, ou a linguagem, que a partir dalí haverá uma outra variável, ou seja, você pode passar mais do que uma variável por este método.

Um conselho: Evite passar variáveins em demasia desta maneira, pois o usuário consegue ver o conteúdo o que em algumas ocasiões deixa as aplicações mais vulneráveis.

Espero que seja útil.

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe

Tabela ASCII

Eu cheguei a usar essa tabela algumas vezes quando programava para desktop, depois não mais precisei, porém acredito que seja interessante termos em mão caso precisemos.

Segundo o wikipedia

ASCII (acrônimo para American Standard Code for Information Interchange, que em português significa “Código Padrão Americano para o Intercâmbio de Informação”) é uma codificação de caracteres de sete bits baseada no alfabeto inglês. Desenvolvida a partir de 1960, grande parte das codificações de caracteres modernas a herdaram como base.

A codificação define 128 caracteres, preenchendo completamente os sete bits disponíveis. Desses, 33 não são imprimíveis, como caracteres de controle atualmente obsoletos, que afetam o processamento do texto. Exceto pelo caractere de espaço, o restante é composto por caracteres imprimíveis.

Link da tabela

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe