DGmike

Desde que o Ederson @peka me apresentou o meadiciona.com adotei como ferramenta de gerenciamento de contas e sempre passei, nos meus e-mails e contatos, o meu perfil do programa. Mas como desenvolvedor, sempre achei que deveria existir uma maneira de conseguir resgatar esses dados de forma fácil.

O meAdiciona.com é uma ferramenta desenvolvida com o intuito de facilitar sua vida. Tudo que você precisa dizer é meadiciona.com/voce.

Não aguentando mais esperar por uma API definitiva, resolvi escrever uma própria parseando o código html do meu perfil e verificando o perfil de alguns amigos, que poderiam ter menos ou mais informações diversas. Descobri também que os contatos como e-mail e texto puro são trabalhados de forma diferente no html gerado no site, sendo que o e-mail simplesmente não é gerado. Ele é passado por um protocolo de segurança não fácil de interpretar (a partir de AJAX) para que robôs (como o meu) não peguem facilmente. Decidi deixar de lado em prol da segurança do meadiciona. Então esta API não foi projetada para pegar os e-mails, ok?!

Para usar, basta requisitar a URL http://util.dgmike.com.br/meadiciona/[perfil].json. Hoje estou liberando apenas JSON e não pretendo liberar outra forma por enquanto, já que esta me serve com bastante tranquilidade. Veja como é fácil pegar essa informação via PHP.

1
2
3
4
5
6
7
8
9
10
11
12
13

$saida = file_get_contents('http://util.dgmike.com.br/meadiciona/dgmike.json');
$perfil = json_decode($saida);
if ($perfil->r) {
    echo '<h3>'.$perfil->data->nome.'</h3>';
    echo '<p>'.$perfil->data->desc.'</p>';
    foreach ($perfil->data->servicos as $servico) {
      if (!$servico->url) continue;
      echo "<a href='{$servico->url}' style='float:left; width: 190px; height:35;text-align:center'>";
      echo "<img src='{$servico->img}' title='{$servico->title}' height='32' />";
      echo "</a>";
    }
    echo '<br style="clear:both;" /><small>Powered by <a href="http://meadiciona.com/dgmike">meadiciona.com</a></small>';
}

O código de como usar a API do meadiciona.com não oficial está disponível no gist do github, caso você queira passá-lo adiante. O resultado está logo abaixo, com o meu perfil, é claro!

Michael Granados (dgmike)

Falar de mim é como falar de você, só que um pouco diferente…

Powered by meadiciona.com

Você deve conhecer o PagSeguro, já venho falando dele por aqui há um tepinho. Existe uma biblioteca de retorno automático para PHP gerada pela Visie, só que o pessoal geralmente tem dúvidas sobre verificar o que o PaSeguro ou quando o PagSeguro irá mandar os dados para validação.

O código básico de implementação é este:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// Aqui vai seu Token
define('TOKEN','0123456789abcdef0123456789abcdef');
 
// Incluindo o arquivo da biblioteca
include('retorno.php');
 
// Função que captura os dados do retorno
function retorno_automatico ( $VendedorEmail, $TransacaoID, 
  $Referencia, $TipoFrete, $ValorFrete, $Anotacao, $DataTransacao,
  $TipoPagamento, $StatusTransacao, $CliNome, $CliEmail, 
  $CliEndereco, $CliNumero, $CliComplemento, $CliBairro, $CliCidade,
  $CliEstado, $CliCEP, $CliTelefone, $produtos, $NumItens) {
 
  // AQUI VOCÊ TEM OS DADOS RECEBIDOS DO PAGSEGURO, JÁ VERIFICADOS.
  // CONFIRA A LISTA DE PRODUTOS E O VALOR COM O QUE VOCÊ TEM NO
  // BANCO DE DADOS E, SE ESTIVER TUDO CERTO, ATUALIZE O STATUS
  // DO PEDIDO.
 
}
 
// A partir daqui, é só HTML:

Como você pode ver, você escreve uma função básica onde você fará tudo o que você precisa fazer no seu banco de dados, como atualizar a quantidade de produtos de uma loja, cancelar ou efetuar um pedido.

Normalmente o pessoal pergunta, como ver o que o PagSeguro está mandando, como fazer para escrever um código não vendo o que está vindo. Bem, você não vai ver nunca o que está acontecendo na tela do seu navegador. Para você ver o que está acontecendo, escreva em um arquivo de texto os dados que estão chegando no seu POST e também se ele foi validado ou não.

Vamos definir uma função de Log bem simples.

1
2
3
4
5

function pgs_log($msg)
{
  $msg = date('[d/m/Y H:i:s] ') . $msg . "\n\n---\n";
  file_put_contents ('pagseguro.log', $msg);
}

Agora, vamos implementar o nosso log.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

function pgs_log($msg)
{
  $msg = date('[d/m/Y H:i:s] ') . $msg . "\n\n---\n";
  file_put_contents ('pagseguro.log', $msg);
}
if ($_POST) {
  pgs_log('Recebendo dados via POST, estes dados serão verificados pelo PagSeguro: '.print_r($_POST, true));
}
// Aqui vai seu Token
define('TOKEN','0123456789abcdef0123456789abcdef');
 
// Incluindo o arquivo da biblioteca
include('retorno.php');
 
// Função que captura os dados do retorno
function retorno_automatico ( $VendedorEmail, $TransacaoID, 
  $Referencia, $TipoFrete, $ValorFrete, $Anotacao, $DataTransacao,
  $TipoPagamento, $StatusTransacao, $CliNome, $CliEmail, 
  $CliEndereco, $CliNumero, $CliComplemento, $CliBairro, $CliCidade,
  $CliEstado, $CliCEP, $CliTelefone, $produtos, $NumItens)
{
    $data = func_get_args();
    pgs_log('Dados verificados com sucesso! Dados formatados no retorno: '.print_r($data, true));
 
    // AQUI VOCÊ TEM OS DADOS RECEBIDOS DO PAGSEGURO, JÁ VERIFICADOS.
    // CONFIRA A LISTA DE PRODUTOS E O VALOR COM O QUE VOCÊ TEM NO
    // BANCO DE DADOS E, SE ESTIVER TUDO CERTO, ATUALIZE O STATUS
    // DO PEDIDO.
}

E voilà! Você verá no seu arquivo pagseguro.log o seguinte resultado:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

[19/06/2009 16:53:08] Recebendo dados via POST, estes dados serão verificados pelo PagSeguro: Array
(
    [TransacaoID] => e9b6ef2f4b0f873e6f2a5831d39d803b
    [TipoFrete] => FR
    [ValorFrete] => 0,00
    [Anotacao] => Pagamento gerado pelo ambiente de testes
    [DataTransacao] => 19/06/2009 
    [VendedorEmail] => email_cobranca@teste.gov.br
    [Referencia] => AFB-580
    [CliNome] => nome
    [CliEmail] => email@cliente.com.br
    [CliEndereco] => Rua dos Bobos
    [CliNumero] => 0
    [CliComplemento] => 
    [CliBairro] => Paytown
    [CliCidade] => Payland
    [CliEstado] => AC
    [CliCEP] => 01234567
    [CliTelefone] => 99 55555555
    [NumItens] => 4
    [ProdID_1] => A27
    [ProdDescricao_1] => Mapa da cidade
    [ProdQuantidade_1] => 1
    [ProdFrete_1] => 0,00
    [ProdExtras_1] => 0,00
    [ProdValor_1] => 27,90
    [ProdID_2] => B720
    [ProdDescricao_2] => Bala Freegells
    [ProdQuantidade_2] => 12
    [ProdFrete_2] => 0,00
    [ProdExtras_2] => 0,00
    [ProdValor_2] => 0,80
    [ProdID_3] => A90
    [ProdDescricao_3] => Caderno decorado
    [ProdQuantidade_3] => 5
    [ProdFrete_3] => 0,00
    [ProdExtras_3] => 0,00
    [ProdValor_3] => 16,30
    [ProdID_4] => C230
    [ProdDescricao_4] => Tomada simples
    [ProdQuantidade_4] => 16
    [ProdFrete_4] => 0,00
    [ProdExtras_4] => 0,00
    [ProdValor_4] => 1,70
    [TipoPagamento] => Pagamento
    [StatusTransacao] => Completo
)
 
 
---
[19/06/2009 16:53:08] Dados verificados com sucesso! Dados formatados no retorno: Array
(
    [VendedorEmail] => email_cobranca@teste.gov.br
    [TransacaoID] => e9b6ef2f4b0f873e6f2a5831d39d803b
    [Referencia] => AFB-580
    [TipoFrete] => FR
    [ValorFrete] => 0.00
    [Anotacao] => Pagamento gerado pelo ambiente de testes
    [DataTransacao] => 19/06/2009 
    [TipoPagamento] => Pagamento
    [StatusTransacao] => Completo
    [CliNome] => nome
    [CliEmail] => email@cliente.com.br
    [CliEndereco] => Rua dos Bobos
    [CliNumero] => 0
    [CliComplemento] => 
    [CliBairro] => Paytown
    [CliCidade] => Payland
    [CliEstado] => AC
    [CliCEP] => 01234567
    [CliTelefone] => 99 55555555
    [produtos] => Array
        (
            [0] => Array
                (
                    [ProdID] => A27
                    [ProdDescricao] => Mapa da cidade
                    [ProdValor] => 27.9
                    [ProdQuantidade] => 1
                    [ProdFrete] => 0
                    [ProdExtras] => 0
                )
 
            [1] => Array
                (
                    [ProdID] => B720
                    [ProdDescricao] => Bala Freegells
                    [ProdValor] => 0.8
                    [ProdQuantidade] => 12
                    [ProdFrete] => 0
                    [ProdExtras] => 0
                )
 
            [2] => Array
                (
                    [ProdID] => A90
                    [ProdDescricao] => Caderno decorado
                    [ProdValor] => 16.3
                    [ProdQuantidade] => 5
                    [ProdFrete] => 0
                    [ProdExtras] => 0
                )
 
            [3] => Array
                (
                    [ProdID] => C230
                    [ProdDescricao] => Tomada simples
                    [ProdValor] => 1.7
                    [ProdQuantidade] => 16
                    [ProdFrete] => 0
                    [ProdExtras] => 0
                )
 
        )
 
    [NumItens] => 4
)
 
 
---

E com isso você já consegue desenvolver sua aplicação normalmente. Fora que fica mais prático de entender o que está acontecendo no seu servidor.

Olá pessoal!!!

Bem, eu sei, tenho andado muito sumido por aqui. São muitos projetos e muitas aulas para lecionar. Engano de quem pensa que isso é ruim. Pelo contrário. Ontem um aluno meu me disse o seguinte: “em plena crise global você está com tantos projetos, isso é bom”

Anyway. Tenho trabalhado muito com o sistema de pagamento PagSeguro e minhas impressões sobre essa incrível ferramenta são muito positivas. Hoje fiquei pensando. “Pô, o PagSeguro é tão simples de trabalhar, nem prescisa de um sistema em PHP/Python/Ruby on Rails/.Net/Java/C++/Perl/etc. Na verdade é possivel resolver o problema apenas com JavaScript.”

Então com café e biscoito “na ideia” (ideia agora não tem mais acento, argh!) resolvi tentar resolver o problema criando uma biblioteca na qual designers consigam criar sua própria loja de forma simples e dinâmica tendo apenas que configurar com seus dados e informar seus produtos separados por categorias. O resultado você pode conferir na minha lojinha de demonstração.

A configuração não é um bicho de sete cabeças. Ao baixar o arquivo .zip você receberá cinco arquivo e uma pasta. Eis a estrutura:

index.html - Arquivo onde roda sua loja
configuracoes.js - Arquivo de suas configurações junto ao pagseguro. Como o e-mail, tipo de frete, imagem do botão, etc
loja.js - Seus produtos estarão listados aqui
pagseguro.js - Enfim a biblioteca que faz tudo funcionar :D
style.css - Apenas o CSS que dará um gás na sua loja
imagem/ - Pasta onde ficarão as imagens dos produtos

Agora, como diria o Jack: vamos por partes.

configuracao.js

Nesse arquivo você deve colocar as configurações de sua conta e do seu carrinho PagSeguro. A principal configuração é o seu e-mail. O mesmo e-mail que você cadastrou-se no pagseguro.

1
2
3

configuracoes = {
email       : 'INFORME SEU E-MAIL CADATRADO NO PAGSEGURO',
moeda       : 'BRL', // Atualmente o PagSeguro só suporta (BRL) Brasil - Real

Deixei para você decidir qual será a moeda usada porque não vai que um dia o PagSeguro trabalha com Dolar, né? Então a configuração já está lá e funcionando, só que se você passar outro valor, o PagSeguro mandará um erro para seu cliente, e nós não queremos isso, né?

As configurações sobre o frete são opcionais e devem atuar com o sua configuração no admin do PagSeguro. Se você quiser que seja um frete único para todos os itens você deve passar a informação aqui.

1
2
3
4
5
6
7
8
9

// Configurações sobre o frete
tipofrete   : 'EN', // Se esta opção for definida (é opcional),
// use frete nas configurações para frete unico por
// item ou um tipo de frete para cada produto
//
// Aqui você deverá informar EN para PAC ou SD para Sedex
// Não se esqueça de definir suas opções no seu Admin do PagSeguro
frete       : 2,
peso        : 2, // Sim, ele aceita float 2.4 e inteiro, a biblioteca já converte pra voce em 240 ou 200 :D

* nota: quando digo um frete único quero dizer que os correios irão cobrar um valor único para cada item então, se a pessoa te pede dois itens (do mesmo produto ou não) esse valor será multiplicado por dois.

A próxima configuração será onde deverão atuar cada área da sua loja. Passe os IDs que você achar melhor. O legal é que você pode escrever o HTML como desejar que a biblioteca colocará cada parte em seu determinado lugar.

1
2
3
4

// Abaixo, coloque as referencias aos seus elementos do HTML
id_menu     : 'menu',
id_main     : 'main',
id_carrinho : 'carrinho',

Agora, com relação às imagens de cada produto. Cada produto deverá ter um código identificador (ou id), um para cada tipo de produto, logo uma câmera fotográfica deverá ter um id diferente de câmera fotografica digital. Se você setar esse valor como true, a biblioteca irá procurar por imagens na pasta imagem da seguinte forma: [codigo_de_identificacao].[extensao]

Logo, você pode definir a extensão que suas imagens terão, pode ser gif, bmp, jpg, jpeg, png, fique à vontade. O único problema é que todas as imagens devem ter a mesma extensão.

1
2
3
4
5

// Gostaria de inserir imagens aos seus itens.
// Os arquivos devem estar dentro da pasta imagem
// no formato [id].[formatoimg]
imagem      : true,
formatoimg  : 'jpg',

Botão de compra, você pode adicionar qualquer imagem nesta parte, já deixei preparado para você as imagens padrão do PagSeguro. Aconselho a usar essas imagens porque elas estão no PagSeguro, se acontecer de o PagSeguro estar offline o usuário verá uma imagem de erro e saberá que não conseguirá efetuar a compra por qualquer que seja o motivo.

1
2
3
4
5

// Endereço do botão de compra
//imgBotao    : 'https://pagseguro.uol.com.br/Security/Imagens/btnComprarBR.jpg',
//imgBotao    : 'https://pagseguro.uol.com.br/Security/Imagens/btnConcluirBR.jpg',
imgBotao    : 'https://pagseguro.uol.com.br/Security/Imagens/btnFinalizar.jpg',
//imgBotao    : 'https://pagseguro.uol.com.br/Security/Imagens/btnConcluir.jpg',

Para escolher o botão basta descomentar a linha e comentar a linha descomentada.

E, por último, configure a categoria que aparecerá ao abrir a página, ou seja, a home de sua loja. Você verá mais par frente que você separa seus produtos por categoria. O nome da categoria deve ser exatamente igual ao nome da categoria que você informou. Isso quer dizer que “MAIÚSCULAS” é diferente de “maiúsculas” ok ;D

1
2
3
4

// Abaixo, informe o primeiro grupo a ser mostrado na loja
// Não se esqueça! Este valor é case-sensitive, ou seja Maiúsculas é diferente de MAIÚSCULAS
inicio     : 'Bebê'
}

* Nota: O padrão do javascript é aceitar que você coloque virgulas no último item de um objeto (nosso objeto de configuração por exemplo), mas o internet explorer acha que isso é um BUG, quebrando assim o script então a última configuração deverá estar sem a vírgula.

loja.js

Ah sim! Os produtos. Esses não tem mistério nenhum. Você deve trabalhar com o formato JSON para criar os seus elementos. Mas vamos devagar, você aprenderá como é facil configurar sua loja.

Primeiro, definimos a nossa loja:

1
2
3

loja = {
 
}

Com isto já temos uma loja e podemos adicionar categorias.

1
2
3
4
5

loja = {
'Bebê': [],
'Eletro-portáteis': [],
'Câmeras digitais': []
}

E para cada elemento, você deve seguir o modelo, mas preste atenção do BUG do Internet explorer: não coloque vírgula no último item do objeto. Para fazer a sua loja iniciar com uma determinada categoria aberta, coloque o nome dessa categoria no arquivo configurações, mas lembre-se! “Mamãe” é diferente de “mamãe” que é diferente de “Mamae” ;D

Agora, os produtos. Para cada categoria você deve colocar seus produtos, então vamos adicionar dois produtos ao nosso objeto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

loja = {
'Bebê': [
{
'id'    : '00001',
'descr' : 'Chupeta doce',
'valor' : 3.4
},
{
'id'    : '00002',
'descr' : 'Chupeta salgada',
'valor' : 4.8
},
{
'id'    : 'A12MF5',
'descr' : 'Chupeta amarga',
'valor' : 4
}
],
'Eletro-portáteis': [],
'Câmeras digitais': []
}

E pronto! Sua loja está montada coloque quantos produtos você achar conveniente. Lembre-se, que nesta parte você também não pode colocar virgula no último elemento, já que o Internet Explorer implica com isso.

Se você definiu, nas suas configurações, a biblioteca deverá produrar por imagens no formato PNG você deverá ter as seguintes imagens na sua pasta imagem: 00001.png, 00002.png e A12MF5.png

Para cada item você pode passar um valor de frete e valor de peso, mas se você passar para um, deve passar para todos.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

loja = {
'Bebê': [
{
'id'    : '00001',
'descr' : 'Chupeta doce',
'valor' : 3.4,
'peso' : 0.53,
'frete' : 4.3
},
{
'id'    : '00002',
'descr' : 'Chupeta salgada',
'valor' : 4.8,
'peso' : 0.7,
'frete' : 5
}
]
}

Você também deve fazer a configuração no arquivo de configurações do tipo de frete. Se você definir o valor de frete único nas suas configurações a biblioteca irá ignorar os valores de frete e passará a atuar com frete único.

Obviamente, esta biblioteca trabalha com o tipo “Carrinho Próprio” já que no “Carinho PagSeguro Brasileiro” não podemos enviar mais de um produto de vez, mas não se preocupe, isso não quer dizer que você tem que tratar retorno automático e etc. Ah, sim, não se esqueça de cobrar pelo frete seja ele por peso ou por valor de frete fixo.

Agora que você já tem sua loja funcional, use sua criatividade para criar um belo layout e comece hoje mesmo a lucrar com sua loja PagSeguro. Quem quiser, pode inclusive colocar o link de suas criadas com esta biblioteca para ver qual é a melhor. Abraços!

A biblioteca foi montada em menos de um dia de trabalho, logo, podemos ver como o sistema de pagamento nos permite que trabalhemos de forma rápida e simples. Como se não bastasse, em apenas um dia foi possivel criar uma loja completa e funcional com direito a pagamento via boleto, cartões de crétido, débito em conta e tudo o que tem direito.

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.

Com este guia você tem todas as funções jQuery reunidas em um só lugar. Adicionei também um exemplo básico da utilização/marcação/sintaxe da biblioteca. Você pode baixar também a versão em PDF para imprimir e carregar no bolso