DGmike

Navegando pela internet me deparei com vários plugins, extensões, scripts que trabalham com ajax. Mantenho sempre meus feeds marcados como não lidao para utilizar depois, mas percebi que a lista de não lidos estava ficando um pouco grande, então resolvi escrever este memo para registrar bons scripts que podem ser usados em um futuro distante (ou não).

Várias ferramentas em javascript para você poder usar no seu site/blog/sistema

Tree View para jQuery

Emular um sistema de arvores como o que o windows explorer tem é uma tarefa um pouco complicada se formos parar para colocar imagens diferentes para cada estado (pasta aberta ou não), se quisermos aplicar uma animação a cada ação ou mesmo se quisermos que ela seja dinâmica, atualizando os eventos de cada elemento atomaticamente. Como jQuery é minha biblioteca favorita, este plugin resolve este problema e os mais comuns relacionados a arvores.

Você pode ver vários exemplos de formas de customização no próprio site do desenvolvedor.

Se você pretende fazer uma aplicação com opções, este plugin resolve um de seus problemas.

Time Picker (Experimental)

Um gosto muito de projetos experimentais porque eles podem nos dar uma breve visão de como vão ser os projetos em um futuro próximo. Este projeto é um selecionador de horas – um plugin para jQuery, que trabalha de uma forma diferente, você vai selecionando por partes as horas, minutos e duração (am ou pm). O legal é que é intuitivo e não é necessário ficar clicando em botões desnecessários, só no que realmente é necessário. Bom, fica a dica, mas lembre-se: é um projeto experimental, só use se seus usuários forem cabeça aberta…

Para utilizar este plugin, mais que uma linha de código não é necessário, e você ainda tem uma série de opções para customizar seu novo “relógio”. Confira na página do projeto.

Não gaste seu mouse clicando várias vezes para definir a hora. É o que propõe este script experimental

jCrop

Tá aí a solução para nossos problemas! Que tal criar um sisteminha de upload onde o usuário escolhe qual área da foto ele quer usar no site? Complicado, né? Criar uma div para fazer a area a ser cortada, criar um outro que manipule cada área de onde o elemento será cortado. Dependendo da área, o cursos do mouse deve ser alterado. Sim, é complicado fazer isso. Ainda mais porque tem que interagir com o servidor (aliás, quem vai cortar na verdade é o servidor e não o javascript) e escrever uma função que use a biblioteca GD se for em PHP. Se ainda achou fácil, que tal definir um tamanho mímino para a imagem ou proporção ou mesmo criar uma prévia de como vai ficar depois de pronto?

Para resolver todos esses pontos, existe um plugin para jQuery chamado jCrop que faz o crop com maestria, ele já vem com um script em PHP de exemplo que você pode usar sem problemas para implementar. Eu já usei e aprovo este plugin, o cliente ficou muito satisfeito e queria até implementar em outras áreas.

Cortar imagens no Browser do usuário se tornou uma tarefa fácil

Tem muita coisa legal chegando nos meus feeds, mas muita coisa sem nexo também, então para quem quiser acompanhar o que eu leio sobre ajax, pode assinar meu feed de Categoria Ajax, assim eu filtro, pessoalmente, o que é bom para seus ouvidos.

Uma das dúvidas mais comuns para quem está começando ajax é criar uma função que chame os estados e cidades nacionais. Sempre tenho que explicar uma serie de coisas como objeto httpRequest ou mesmo um mínimo de jQuery.

Pensando nos programadores do Brasil, desenvolvi este script de selects de estado e cidades do Brasil

Pensando nisso, resolvi escrever uma biblioteca que resolva este problema, além de estar disponível em uma única URL (JavaScript, hospedado pelo Google Code”>hospedado no google) no qual qualquer um pode utilizar. Assim, o usuário guarda em cache apenas um arquivo, e se o usuário passar em um site que chama a biblioteca, no próximo site que ele entrar e usar a biblioteca de novo, carregará o arquivo em cache e não precisará fazer o download de novo.

Outra vantagem é que o arquivo possui os estados e cidades no próprio core, assim não é necessário de interação com o servidor, o que deixa a resposta ao usuário mais rápida, deixando-o satisfeito. Ah, e sem falar que ele é crossbrowser e funciona com (ou sem) todas as bibliotecas conhecidas (como jQuery, prototype, dojo ou mootools) por trabalhar com apenas as funções que já existem no javascript.

Decidi hospedá-lo no servidor do google porque assim é mais improvável que hajam problemas de servidor em qualquer servidor que eu hospede. Para instalá-lo em seu site, coloque a seguinte instrução entre suas tags head.

1

<script type="text/javascript" src="http://cidades-estados-js.googlecode.com/files/cidades-estados-v0.2.js"></script>

Coloque este código (ou algo parecido) no seu html, para poder referenciar para a biblioteca.

1
2

Estado: <select id="estado" name="estado"></select>
Cidade: <select id="cidade" name="cidade"></select>

A forma mais simples de ativar a biblioteca é esta, usando o objeto dgCidadesEstados passando os objetos que serão serão usados como select de estados e cidades respectivamente. Veja um exemplo.

1
2
3

window.onload = function() {
  new dgCidadesEstados(document.getElementById('estado'), document.getElementById('cidade'), true);
}

O projeto é opensource, então se sua cidade não está na biblioteca, por favor me informe que eu mesmo colocarei no projeto.

[update]

No total, são 5.560 cidades cadastradas na biblioteca, a diferença é que não está colocado cada um em uma linha (como em instruções SQL) e sim cada estado em uma linha, o que diminui consideravelmente o tamanho do arquivo, se o seu Banco de Dados tiver mais que isso, por favor envie um comentário que procurarei atualizar o banco o mais breve possível.

[update 21/06/2009]

Vi que o pessoal está com dificuldades no retorno dos dados do servidor para o JavaScript, acontece que na versão encontrada no google code existiam exemplos e documentação necessário. Então decidi “puxar” essa informação para cá, afim de ajudar quem cai aqui de pará-quedas.

Recuperando os dados

Para fazer o sistema recuperar uma informação dada anteriormente, basta passar os parâmetros estadoValue e cidadeValue dentro do construtor.

1
2
3
4
5
6

new dgCidadesEstados({
  cidade: document.getElementById('cidade2'),
  estado: document.getElementById('estado2'),
  estadoVal: 'SP',
  cidadeVal: 'São Paulo'
});

Ou então passando como atributo value em sua tag select (ou input como descrito mais abaixo).

1
2

<select id="estado1" value="TO"></select>
<select id="cidade1" value="Araguaína"></select>

1
2
3
4

new dgCidadesEstados({
  cidade: document.getElementById('cidade1'),
  estado: document.getElementById('estado1')
});

Obstrusividade?! Não!

Não é preciso que você escreva uma tag select, você pode executar usando um input que será substituido pelo select necessário. Para ativar esta opção, basta passar o parâmetro change.

1
2

<input type="text" name="estado3" id="estado3" value="MG" />
<input type="text" name="cidade3" id="cidade3" value="Viçosa" />

1
2
3
4
5

new dgCidadesEstados({
  cidade: document.getElementById('cidade3'),
  estado: document.getElementById('estado3'),
  change: true
});

Charset?!

Você não precisa se preocupar em codificação de caracteres, o cidades-estados-js é disponibilizado nas versões Latin (ANSII) e UTF-8. Para isso, basta alterar a forma como você chama a biblioteca.

1
2

<script type="text/javascript" src="http://cidades-estados-js.googlecode.com/files/cidades-estados-1.0-utf8.js"></script>
<script type="text/javascript" src="http://cidades-estados-js.googlecode.com/files/cidades-estados-1.0.js"></script>

Dê preferencia a usar o charset utf-8, mas se seu sistema não aceitar essa codificação ou você usa DreamWeaver? e nem sabe o que é isso, provavelmente você vai precisar da versão em ASCII. ;D

Nota: Vale a pena ler o artigo sobre intercacionalização de caracteres da w3c que explica mais sobre codificação, inclusive o utf-8.

O ruhanbidart publicou no viva o linux um script em javascript que resolve muitos problemas, principalente para lojas virtuais. Esse script faz uma requisição no site dos correios e usa a função callback, que você pode reescrevê-la como desejar, manipulando o resultado como melhor lhe convir.

Então você pode criar sua função callback:

function trataFrete(frete) {
alert('O valor total é R$' + frete.preco_postal);
}

E rodar a função do script:

Correios.calcular(trataFrete, null, '33000-000', '33000-001', 5);

Onde, os parâmetros são:

1. A referência (sem aspas) à função de callback
2. Código do tipo de entrega que será calculada. Daí, temos:
   • 40010 (SEDEX) (Padrão)
   • 40290 (SEDEX Hoje)
   • 40215 (SEDEX 10)
   • 40045 (SEDEX a Cobrar)
   • 81019 (e-SEDEX)
   • 44105 (MALOTE)
3. Cep de origem no formato NNNNN-NNN
4. Cep de destino no formato NNNNN-NNN
5. Peso da encomeda

Essa é a configuração básica, você ainda pode escolher entre mão própria, valor declarado e optar em adicionar o serviço de aviso de recebimento. O retorno para o callback é um belo json neste formato:

{
'servico': 40010,
'servico_nome': SEDEX,
'uf_origem': 'MG',
'local_origem': 'Capital',
'cep_origem': '33030645',
'uf_destino': 'RJ',
'local_destino': 'Interior',
'cep_destino': '25770970',
'peso': 10,
'mao_propria': 0,
'aviso_recebimento': 0,
'valor_declarado': 0,
'tarifa_valor_declarado': 0,
'preco_postal': 73.7
}

O código da biblioteca pode ser encontrado no próprio site do viva o linux.

Mudanças sempre são boas. Mesmo que a gente passe por momentos ruins a gente sempre aprende muita coisa com mudanças.

Este ano está sendo um ano muito louco e cheio de mudanças para mim. No final do ano passado o @elcio me convidou para fazer parte da familia visie. De lá para cá muita coisa mudou. Aprendi a linguagem python, mudei do Rio de Janeiro (Campos para ser mais exato) para São Paulo (capital), fiquei um tempo de favor na casa do meu amigo @rzamana. Comecei a desenvolver o IcePHP que, um dia se Deus quiser, vou concluir. Fui a ótimos eventos de web, infelizmente alguns não tinham internet liberada. Adiquiri um belo laptop cce que estou levando para todos os lados. Assisti meu primeiro filme em 3D, o que foi o máximo.

Nestes últimos meses tenho passado por momentos de muito sobe e desce. Primeiro, escrevi um artigo para uma revista e agora há pouco comecei a escrever para um site que eu sempre fui fã, um site onde eu praticamente aprendi a escrever de verdade. Com ajuda do Elcio fiz um projeto muito legal em python, onde o pessoal está aprendendo um bocado sobre python, ajax, tableless, javascript.

Também conheci um carinha muito legal que me ensinou algumas coisas sobre a vida. Hoje sei muito bem que as coisas não são caras, elas tem o valor que devem ter, basta não exagerar na dose. No bar, uma cerveja não é para beber até cair no chão sem noção do que pode acontecer, mas simplesmente degustar o belo sabor que a bebida tem.

Não foram apenas mudanças em minha vida, mas na vida das pessoas que estão ao meu redor também mudou muita coisa. Alice, por exemplo passou um tempo desempregada, fazendo um monte de entrevistas, entrou em uma empresa onde ela aprimorou, e muito, sua escrita e semântica. Esta semana ela está em uma empresa nova, não na área que ela gosta, mas com boas chances de crescimento em outras áreas. E o mais legal é que ela conseguiu todos esses meritos sem ajuda de ninguém, muitas vezes nem minha, devido a minha falta de tempo.

O rafael também mudou duas vezes de emprego, trabalhou em uma empresa grande e hoje está melhor colocado em outra empresa. Não tão grande quanto a outra, mas o importante é que está feliz fazendo o que melhor sabe fazer. Ah sim, ele também escreveu um ou outro artigo.

A visie também mudou, não só fisicamente mas estruturalmente, o campus mudou, o site mudou, a equipe mudou e até contratamos um carinha lá do Rio, que está de mudança para cá.

Fiquei muito tempo sem postar no meu blog por conta de tantas mudanças, mas estou voltando com muitas novidades, muita coisa nova que aprendi durante esse tempo off. Primeiro, o meu blog mudou. Não só de layout como era costume, mas de endereço também. Estou com um servidorzinho onde o ponto vermelho está alocado e também estou entrando no ramo de aluguel, ainda não tenho valores mas em breve teremos mais detalhes. Me segurem, esta nova fase não vai ser mole!!!