Posts Tagged ‘Prototype’

Ruby on Rails usando o jQuery ao invés do Prototype

3 Comments
Postado em 09 jun 2009
Categoria(s) Ruby on Rails, jQuery

Eu gosto mais do jQuery acho ele mais leve, mais funcional e com efeitos melhores.

Vou mostrar como substituir o Prototype e colocar o jQuery no seu lugar.

Instalação do plugin jRails:

ruby script/plugin install http://ennerchi.googlecode.com/svn/trunk/plugins/jrails

No layout da sua aplicação remova o uso do Prototype, remova a linha abaixo, caso ela exista:

<%= javascript_include_tag :defaults %>

Agora adicionei as bibliotecas javascripts entre as tags heads:

...
  <head>
    ...
    <%= javascript_include_tag "jquery" %>
    <%= javascript_include_tag "jquery-ui" %>
    <%= javascript_include_tag "jrails" %>
  </head>
...

Pronto! Fazendo isso o jQuery está disponível e compatível com o Ruby on Rails, ou seja, todos os helpers javascript usarão agora o jQuery como framework javascript.

O plugin jRails sobrescreve os helpers javascript para usar o jQuery.

Se você gostou desse texto e acha que ajudou você, me recomende: Recommend Me.

  • Share/Bookmark
Tags: , , , , , , , , , , , , , , , , , , , , , , , ,

Criando menu drop down em javascript usando o framework Prototype

No Comments
Postado em 16 jan 2009
Categoria(s) JavaScript, Prototype

Hoje eu precisei construir um menu drop down em javascript. Procurei na internet vários tipos de menus, encontrei alguns que só funcionavam com ul e li, outros eram complexos demais e na verdade o que eu queria e colocar o mouse em cima de um link e fazer aparecer um div com os itens do menu :-). Acabei decidindo por implementar o meu próprio sistema de menu com a ajuda desse artigo: http://javascript-array.com/scripts/simple_drop_down_menu/.

Para fazer o menu eu usei o framework JavaScript Prototype (http://www.prototypejs.org/).

Mãos a obra!

Carregue na página o framework Prototype:

1

<script src="/javascripts/prototype.js" type="text/javascript"></script>

Eu montei o menu e submenu com a seguinte estrutura HTML:

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

<!-- begin: menu -->
<div id="menu">
<ul>
	<li class="item1" id="menu1"><a href="#">INFORMA&Ccedil;&Atilde;O</a></li>
	<li class="item2" id="menu2"><a href="#">CAPACITA&Ccedil;&Atilde;O E APERFEI&Ccedil;OAMENTO</a></li>
	<li class="item3" id="menu3"><a href="#">EDITORA</a></li>
</ul>
</div>
<!-- end: menu -->
 
<!-- begin: submenu -->
<div id="submenu">
  <!-- begin: submenu 1 -->
<div id="submenu1" class="submenu" style="display:none;">
<ul class="column1">
	<li><a href="#" class="item111">Institucional</a></li>
	<li><a href="#" class="item112">Produtos</a></li>
	<li><a href="#" class="item113">Trabalhe Conosco</a></li>
	<li><a href="#" class="item114">Receba nosso news</a></li>
	<li><a href="#" class="item115">Contato</a></li>
</ul>
<ul class="column2">
	<li><a href="#">Podcasts</a></li>
	<li><a href="#">RSS</a></li>
	<li><a href="#">E-commerce</a></li>
	<li><a href="#">TV</a></li>
	<li><a href="#">Vantagens</a></li>
</ul>
<ul class="column3">
	<li><a href="#" class="item131">Artigos</a></li>
	<li><a href="#" class="item132">Calend&aacute;rio de Cursos</a></li>
</ul>
</div>
<!-- end: submenu 1 -->
  <!-- begin: submenu 2 -->
<div id="submenu2" class="submenu" style="display:none;">
<ul class="column1">
	<li><a href="#" class="item211">Institucional</a></li>
	<li><a href="#" class="item212">Produtos</a></li>
	<li><a href="#" class="item213">Trabalhe Conosco</a></li>
	<li><a href="#" class="item214">Receba nosso news</a></li>
	<li><a href="#" class="item215">Contato</a></li>
</ul>
<ul class="column2">
	<li><a href="#">Podcasts</a></li>
	<li><a href="#">RSS</a></li>
	<li><a href="#">E-commerce</a></li>
	<li><a href="#">TV</a></li>
	<li><a href="#">Vantagens</a></li>
</ul>
<ul class="column3">
	<li><a href="#" class="item231">Artigos</a></li>
	<li><a href="#" class="item232">Calend&aacute;rio de Cursos</a></li>
</ul>
</div>
<!-- end: submenu 2 -->
  <!-- begin: submenu 3 -->
<div id="submenu3" class="submenu" style="display:none;">
<ul class="column1">
	<li><a href="#" class="item311">Institucional</a></li>
	<li><a href="#" class="item312">Produtos</a></li>
	<li><a href="#" class="item313">Trabalhe Conosco</a></li>
	<li><a href="#" class="item314">Receba nosso news</a></li>
	<li><a href="#" class="item315">Contato</a></li>
</ul>
<ul class="column2">
	<li><a href="#">Podcasts</a></li>
	<li><a href="#">RSS</a></li>
	<li><a href="#">E-commerce</a></li>
	<li><a href="#">TV</a></li>
	<li><a href="#">Vantagens</a></li>
</ul>
<ul class="column3">
	<li><a href="#" class="item331">Artigos</a></li>
	<li><a href="#" class="item332">Calend&aacute;rio de Cursos</a></li>
</ul>
</div>
<!-- end: submenu 3 --></div>
<!-- end: submenu -->

Implementei o seguinte JavaScript que faz o menu drop down funcionar:

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

Event.observe(window, 'load', initMenuSystem);
 
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
 
function initMenuSystem() {
  configMenuItem('menu1', 'submenu1');
  configMenuItem('menu2', 'submenu2');
  configMenuItem('menu3', 'submenu3');
}
 
function configMenuItem(menu, submenu) {
  $(menu).observe('mouseover', function() {
    mopen(submenu)
  });
 
  $(menu).observe('mouseout', function() {
    mclosetime();
  });
 
  $(submenu).observe('mouseover', function() {
    mcancelclosetime();
  });
 
  $(submenu).observe('mouseout', function() {
    mclosetime();
  });
}
 
function mopen(id) {
  mcancelclosetime();
 
  if (ddmenuitem) {
    ddmenuitem.hide();
  }
 
  ddmenuitem = $(id);
  ddmenuitem.show();
}
 
function mclosetime() {
  closetimer = window.setTimeout(mclose, timeout);
}
 
function mclose() {
  if (ddmenuitem) {
    ddmenuitem.hide();
  }
}
 
function mcancelclosetime() {
  if (closetimer) {
    window.clearTimeout(closetimer);
    closetimer = null;
  }
}

Pronto! Ufaaa!

  • Share/Bookmark
Tags: , , , , , , , , , , , , , , , , , , , , , , , ,

Populando um combobox através de um resultado em JSON usando o framework javascript Prototype

2 Comments
Postado em 04 dez 2008
Categoria(s) JavaScript, Prototype

Vou mostrar como popular um combobox de cidades através de um resultado em JSON, usando o framework javascript Prototype.

Eu tenho um formulário com dois comboboxs um de estado e outro de cidade, quando o usuário selecionar o estado é buscada as cidades através de um webservice que retorna um JSON.

Meu formulário:

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

<form name="exemplo" id="exemplo" method="post">
  <table>
    <tbody>
      <tr>
        <th><label for="state">Estado</label></th>
        <td>
          <select id="state" name="state">
            <option value="0"/>
            <option value="1">AC</option>
            <option value="2">AL</option>
            <option value="3">AM</option>
            <option value="4">AP</option>
            <option value="5">BA</option>
            <option value="6">CE</option>
            <option value="7">DF</option>
            <option value="8">ES</option>
            <option value="9">GO</option>
            <option value="10">MA</option>
            <option value="11">MG</option>
            <option value="12">MS</option>
            <option value="13">MT</option>
            <option value="14">PA</option>
            <option value="15">PB</option>
            <option value="16">PE</option>
            <option value="17">PI</option>
            <option value="18">PR</option>
            <option value="19">RJ</option>
            <option value="20">RN</option>
            <option value="21">RO</option>
            <option value="22">RR</option>
            <option value="23">RS</option>
            <option value="24">SC</option>
            <option value="25">SE</option>
            <option value="26">SP</option>
            <option value="27">TO</option>
          </select>
        </td>
      </tr>
      <tr>
        <th><label for="city">Cidade</label></th>
        <td>
          <select id="city" name="city"></select>
        </td>
      </tr>
    </tbody>
  </table>
</form>

Para todo o código javascript abaixo funcionar, é necessário ter as bibliotecas javascripts do Prototype incluídas na página.

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

<script language="JavaScript">
// Quando ocorrer o evento onchange no combobox chama a função getCitiesByStateId
$('state').observe('change', function() { getCitiesByStateId() });
 
/**
 * Busca todas cidades de um estado
 * @param object obj
 *  Informações do elemento
 */
function getCitiesByStateId()
{
  var state = $('state');
 
  if (state.value > 0)
  {
    var url = '/url_do_seu_webservice_que_vai_retornar_o_json/state_id/' + state.value;
    makeRequest(url, 'city');
  }
}
 
/**
 * Realiza a requisição ajax para o webservice
 * obtém os resultados e preenche o combobox
 * @param strung url
 *  Url da requisição
 * @param string combobox_fill_id
 *  Combobox para ser preenchida
 */
function makeRequest(url, combobox_fill_id)
{
  new Ajax.Request(url,
  {
    method: 'get',
    onLoading: function() { loadingComboBox(combobox_fill_id) },
    onSuccess: function(transport)
    {
      if (200 == transport.status)
      {
        var response = eval('(' + transport.responseText + ')');
        fillComboBox(combobox_fill_id, response);
      }
    }
  });
}
 
/**
 * Preenche a combobox com os valores de retorno
 * @param string name
 *  Combobox a ser preenchida
 * @param object response
 *  Objeto de resposta
 */
function fillComboBox(name, response)
{
  cleanComboBox(name);
 
  $(name).insert(new Element('option', {value: ''}).insert(''));
  response.each
  (
    function(pair)
    {
      $(name).insert(new Element('option', {value: pair.id}).insert(pair.name));
    }
  );
}
 
/**
 * Remove todos os elementos da combobox
 * @param string name
 *  Id da combobox para limpar
 */
function cleanComboBox(name)
{
  $(name).descendants().invoke('remove');
}
 
/**
 * Exibe a mensagem de aguarde... na combobox enquanto os dados estão sendo requisitados
 */
function loadingComboBox(name)
{
  cleanComboBox(name);
  $(name).insert(new Element('option', {value: ''}).insert('Aguarde...'));
}
</script>

O código acima não precisa de muitas explicações, já está bem dividido em funções e comentado.

O meu webservice retorna um JSON no seguinte formato:

1
2

[[3037,"Abati\u00e1"],[3038,"Adrian\u00f3polis"],[3039,"Agudos do Sul"],[160,"Almirante Tamandar\u00e9"],[3040,"Altamira do Paran\u00e1"],[3043,"Alt\u00f4nia"],[3041,"Alto Paran\u00e1"],[3042,"Alto Piquiri"],[3044,"Alvorada do Sul"],[3045,"Amapor\u00e3"],[3046,"Amp\u00e9re"],[3047,"Anahy"],[3048,"Andir\u00e1"],[3049,"\u00c2ngulo"],[3050,"Antonina"],[3051,"Ant\u00f4nio Olinto"],[174,"Apucarana"],[163,"Arapongas"],[3052,"Arapoti"],[3053,"Arapu\u00e3"],[3054,"Araruna"],[173,"Arauc\u00e1ria"],[3055,"Ariranha do Iva\u00ed"],[3056,"Assa\u00ed"],[3057,"Assis Chateaubriand"],[3058,"Astorga"],[3059,"Atalaia"],[3060,"Balsa Nova"],[3061,"Bandeirantes"],[3062,"Barbosa Ferraz"],[3064,"Barrac\u00e3o"],[3063,"Barra do Jacar\u00e9"],[3065,"Bela Vista da Caroba"],[3066,"Bela Vista do Para\u00edso"],[3067,"Bituruna"],[3068,"Boa Esperan\u00e7a"],[3069,"Boa Esperan\u00e7a do Igua\u00e7u"],[3070,"Boa Ventura de S\u00e3o Roque"],[3071,"Boa Vista da Aparecida"],[3072,"Bocai\u00fava do Sul"],[3073,"Bom Jesus do Sul"],[3074,"Bom Sucesso"],[3075,"Bom Sucesso do Sul"],[3076,"Borraz\u00f3polis"],[3077,"Braganey"],[3078,"Brasil\u00e2ndia do Sul"],[3079,"Cafeara"],[3080,"Cafel\u00e2ndia"],[3081,"Cafezal do Sul"],[3082,"Calif\u00f3rnia"],[3083,"Cambar\u00e1"],[170,"Camb\u00e9"],[3084,"Cambira"],[3085,"Campina da Lagoa"],[3086,"Campina do Sim\u00e3o"],[3087,"Campina Grande do Sul"],[3088,"Campo Bonito"],[3089,"Campo do Tenente"],[159,"Campo Largo"],[3090,"Campo Magro"],[162,"Campo Mour\u00e3o"],[3091,"C\u00e2ndido de Abreu"],[3092,"Cand\u00f3i"],[3093,"Cantagalo"],[3094,"Capanema"],[3095,"Capit\u00e3o Le\u00f4nidas Marques"],[3096,"Carambe\u00ed"],[3097,"Carl\u00f3polis"],[166,"Cascavel"],[161,"Castro"],[3098,"Catanduvas"],[3099,"Centen\u00e1rio do Sul"],[3100,"Cerro Azul"],[3101,"C\u00e9u Azul"],[3102,"Chopinzinho"],[3103,"Cianorte"],[3104,"Cidade Ga\u00facha"],[3105,"Clevel\u00e2ndia"],[171,"Colombo"],[3106,"Colorado"],[3107,"Congonhinhas"],[3108,"Conselheiro Mairinck"],[3109,"Contenda"],[3110,"Corb\u00e9lia"],[3111,"Corn\u00e9lio Proc\u00f3pio"],[3112,"Coronel Domingos Soares"],[3113,"Coronel Vivida"],[3114,"Corumbata\u00ed do Sul"],[3116,"Cruzeiro do Igua\u00e7u"],[3117,"Cruzeiro do Oeste"],[3118,"Cruzeiro do Sul"],[3115,"Cruz Machado"],[3119,"Cruzmaltina"],[164,"Curitiba"],[3120,"Curi\u00fava"],[3121,"Diamante d'Oeste"],[3122,"Diamante do Norte"],[3123,"Diamante do Sul"],[3124,"Dois Vizinhos"],[3125,"Douradina"],[3126,"Doutor Camargo"],[3127,"Doutor Ulysses"],[3128,"En\u00e9as Marques"],[3129,"Engenheiro Beltr\u00e3o"],[3130,"Entre Rios do Oeste"],[3131,"Esperan\u00e7a Nova"],[3132,"Espig\u00e3o Alto do Igua\u00e7u"],[3133,"Farol"],[3134,"Faxinal"],[3135,"Fazenda Rio Grande"],[3136,"F\u00eanix"],[3137,"Fernandes Pinheiro"],[3138,"Figueira"],[3140,"Flora\u00ed"],[3139,"Flor da Serra do Sul"],[3141,"Floresta"],[3142,"Florest\u00f3polis"],[3143,"Fl\u00f3rida"],[3144,"Formosa do Oeste"],[152,"Foz do Igua\u00e7u"],[3145,"Foz do Jord\u00e3o"],[3146,"Francisco Alves"],[153,"Francisco Beltr\u00e3o"],[3147,"General Carneiro"],[3148,"Godoy Moreira"],[3149,"Goioer\u00ea"],[3150,"Goioxim"],[3151,"Grandes Rios"],[3152,"Gua\u00edra"],[3153,"Guaira\u00e7\u00e1"],[3154,"Guamiranga"],[3155,"Guapirama"],[3156,"Guaporema"],[3157,"Guaraci"],[3158,"Guarania\u00e7u"],[168,"Guarapuava"],[3159,"Guaraque\u00e7aba"],[3160,"Guaratuba"],[3161,"Hon\u00f3rio Serpa"],[3162,"Ibaiti"],[3163,"Ibema"],[3164,"Ibipor\u00e3"],[3165,"Icara\u00edma"],[3166,"Iguara\u00e7u"],[3167,"Iguatu"],[3168,"Imba\u00fa"],[3169,"Imbituva"],[3170,"In\u00e1cio Martins"],[3171,"Inaj\u00e1"],[3172,"Indian\u00f3polis"],[3173,"Ipiranga"],[3174,"Ipor\u00e3"],[3175,"Iracema do Oeste"],[3176,"Irati"],[3177,"Iretama"],[3178,"Itaguaj\u00e9"],[3179,"Itaipul\u00e2ndia"],[3180,"Itambarac\u00e1"],[3181,"Itamb\u00e9"],[3182,"Itapejara d'Oeste"],[3183,"Itaperu\u00e7u"],[3184,"Ita\u00fana do Sul"],[3185,"Iva\u00ed"],[3186,"Ivaipor\u00e3"],[3187,"Ivat\u00e9"],[3188,"Ivatuba"],[3189,"Jaboti"],[3190,"Jacarezinho"],[3191,"Jaguapit\u00e3"],[3192,"Jaguaria\u00edva"],[3193,"Jandaia do Sul"],[3194,"Jani\u00f3polis"],[3195,"Japira"],[3196,"Japur\u00e1"],[3197,"Jardim Alegre"],[3198,"Jardim Olinda"],[3199,"Jataizinho"],[3200,"Jesu\u00edtas"],[3201,"Joaquim T\u00e1vora"],[3202,"Jundia\u00ed do Sul"],[3203,"Juranda"],[3204,"Jussara"],[3205,"Kalor\u00e9"],[3206,"Lapa"],[3207,"Laranjal"],[177,"Laranjeiras do Sul"],[3208,"Le\u00f3polis"],[3209,"Lidian\u00f3polis"],[3210,"Lindoeste"],[3211,"Loanda"],[3212,"Lobato"],[165,"Londrina"],[3213,"Luiziana"],[3214,"Lunardelli"],[3215,"Lupion\u00f3polis"],[3216,"Mallet"],[3217,"Mambor\u00ea"],[3218,"Mandagua\u00e7u"],[3219,"Mandaguari"],[3220,"Mandirituba"],[3221,"Manfrin\u00f3polis"],[3222,"Mangueirinha"],[3223,"Manoel Ribas"],[3224,"Marechal C\u00e2ndido Rondon"],[3225,"Maria Helena"],[3226,"Marialva"],[3227,"Maril\u00e2ndia do Sul"],[3228,"Marilena"],[3229,"Mariluz"],[151,"Maring\u00e1"],[3230,"Mari\u00f3polis"],[3231,"Marip\u00e1"],[3232,"Marmeleiro"],[3233,"Marquinho"],[3234,"Marumbi"],[3235,"Matel\u00e2ndia"],[3236,"Matinhos"],[3237,"Mato Rico"],[3238,"Mau\u00e1 da Serra"],[3239,"Medianeira"],[3240,"Mercedes"],[3241,"Mirador"],[3242,"Miraselva"],[3243,"Missal"],[3244,"Moreira Sales"],[3245,"Morretes"],[3246,"Munhoz de Melo"],[3247,"Nossa Senhora das Gra\u00e7as"],[3248,"Nova Alian\u00e7a do Iva\u00ed"],[3249,"Nova Am\u00e9rica da Colina"],[3250,"Nova Aurora"],[3251,"Nova Cantu"],[3252,"Nova Esperan\u00e7a"],[3253,"Nova Esperan\u00e7a do Sudoeste"],[3254,"Nova F\u00e1tima"],[3255,"Nova Laranjeiras"],[3256,"Nova Londrina"],[3257,"Nova Ol\u00edmpia"],[3258,"Nova Prata do Igua\u00e7u"],[3259,"Nova Santa B\u00e1rbara"],[3260,"Nova Santa Rosa"],[3261,"Nova Tebas"],[3262,"Novo Itacolomi"],[3263,"Ortigueira"],[3264,"Ourizona"],[3265,"Ouro Verde do Oeste"],[3266,"Pai\u00e7andu"],[3267,"Palmas"],[3268,"Palmeira"],[3269,"Palmital"],[3270,"Palotina"],[3271,"Para\u00edso do Norte"],[3272,"Paranacity"],[167,"Paranagu\u00e1"],[3273,"Paranapoema"],[155,"Paranava\u00ed"],[3274,"Pato Bragado"],[169,"Pato Branco"],[3275,"Paula Freitas"],[3276,"Paulo Frontin"],[3277,"Peabiru"],[3278,"Perobal"],[3279,"P\u00e9rola"],[3280,"P\u00e9rola d'Oeste"],[3281,"Pi\u00ean"],[176,"Pinhais"],[3283,"Pinhal\u00e3o"],[3282,"Pinhal de S\u00e3o Bento"],[3284,"Pinh\u00e3o"],[3285,"Pira\u00ed do Sul"],[156,"Piraquara"],[3286,"Pitanga"],[3287,"Pitangueiras"],[3288,"Planaltina do Paran\u00e1"],[3289,"Planalto"],[154,"Ponta Grossa"],[3290,"Pontal do Paran\u00e1"],[3291,"Porecatu"],[3292,"Porto Amazonas"],[3293,"Porto Barreiro"],[3294,"Porto Rico"],[3295,"Porto Vit\u00f3ria"],[3296,"Prado Ferreira"],[3297,"Pranchita"],[3298,"Presidente Castelo Branco"],[3299,"Primeiro de Maio"],[3300,"Prudent\u00f3polis"],[3301,"Quarto Centen\u00e1rio"],[3302,"Quatigu\u00e1"],[3303,"Quatro Barras"],[3304,"Quatro Pontes"],[3305,"Quedas do Igua\u00e7u"],[3306,"Quer\u00eancia do Norte"],[3307,"Quinta do Sol"],[3308,"Quitandinha"],[3309,"Ramil\u00e2ndia"],[3310,"Rancho Alegre"],[3311,"Rancho Alegre d'Oeste"],[3312,"Realeza"],[3313,"Rebou\u00e7as"],[3314,"Renascen\u00e7a"],[3315,"Reserva"],[3316,"Reserva do Igua\u00e7u"],[3317,"Ribeir\u00e3o Claro"],[3318,"Ribeir\u00e3o do Pinhal"],[3319,"Rio Azul"],[3320,"Rio Bom"],[3321,"Rio Bonito do Igua\u00e7u"],[3322,"Rio Branco do Iva\u00ed"],[3323,"Rio Branco do Sul"],[3324,"Rio Negro"],[3325,"Rol\u00e2ndia"],[3326,"Roncador"],[3327,"Rondon"],[3328,"Ros\u00e1rio do Iva\u00ed"],[3329,"Sab\u00e1udia"],[3330,"Salgado Filho"],[3331,"Salto do Itarar\u00e9"],[3332,"Salto do Lontra"],[3333,"Santa Am\u00e9lia"],[3334,"Santa Cec\u00edlia do Pav\u00e3o"],[3335,"Santa Cruz de Monte Castelo"],[3336,"Santa F\u00e9"],[3337,"Santa Helena"],[3338,"Santa In\u00eas"],[3339,"Santa Isabel do Iva\u00ed"],[3340,"Santa Izabel do Oeste"],[3341,"Santa L\u00facia"],[3342,"Santa Maria do Oeste"],[3343,"Santa Mariana"],[3344,"Santa M\u00f4nica"],[3347,"Santana do Itarar\u00e9"],[3345,"Santa Tereza do Oeste"],[3346,"Santa Terezinha de Itaipu"],[3348,"Santo Ant\u00f4nio da Platina"],[3349,"Santo Ant\u00f4nio do Caiu\u00e1"],[3350,"Santo Ant\u00f4nio do Para\u00edso"],[3351,"Santo Ant\u00f4nio do Sudoeste"],[3352,"Santo In\u00e1cio"],[3353,"S\u00e3o Carlos d
o Iva\u00ed"],[3354,"S\u00e3o Jer\u00f4nimo da Serra"],[3355,"S\u00e3o Jo\u00e3o"],[3356,"S\u00e3o Jo\u00e3o do Caiu\u00e1"],[3357,"S\u00e3o Jo\u00e3o do Iva\u00ed"],[3358,"S\u00e3o Jo\u00e3o do Triunfo"],[3359,"S\u00e3o Jorge d'Oeste"],[3360,"S\u00e3o Jorge do Iva\u00ed"],[3361,"S\u00e3o Jorge do Patroc\u00ednio"],[3362,"S\u00e3o Jos\u00e9 da Boa Vista"],[3363,"S\u00e3o Jos\u00e9 das Palmeiras"],[175,"S\u00e3o Jos\u00e9 dos Pinhais"],[3364,"S\u00e3o Manoel do Paran\u00e1"],[3365,"S\u00e3o Mateus do Sul"],[3366,"S\u00e3o Miguel do Igua\u00e7u"],[3367,"S\u00e3o Pedro do Igua\u00e7u"],[3368,"S\u00e3o Pedro do Iva\u00ed"],[3369,"S\u00e3o Pedro do Paran\u00e1"],[3370,"S\u00e3o Sebasti\u00e3o da Amoreira"],[3371,"S\u00e3o Tom\u00e9"],[3372,"Sapopema"],[150,"Sarandi"],[3373,"Saudade do Igua\u00e7u"],[3374,"Seng\u00e9s"],[3375,"Serran\u00f3polis do Igua\u00e7u"],[3376,"Sertaneja"],[3377,"Sertan\u00f3polis"],[3378,"Siqueira Campos"],[3379,"Sulina"],[3380,"Tamarana"],[3381,"Tamboara"],[3382,"Tapejara"],[3383,"Tapira"],[3384,"Teixeira Soares"],[158,"Tel\u00eamaco Borba"],[3385,"Terra Boa"],[3386,"Terra Rica"],[3387,"Terra Roxa"],[3388,"Tibagi"],[3389,"Tijucas do Sul"],[172,"Toledo"],[3390,"Tomazina"],[3391,"Tr\u00eas Barras do Paran\u00e1"],[3392,"Tunas do Paran\u00e1"],[3393,"Tuneiras do Oeste"],[3394,"Tup\u00e3ssi"],[3395,"Turvo"],[3396,"Ubirat\u00e3"],[157,"Umuarama"],[3397,"Uni\u00e3o da Vit\u00f3ria"],[3398,"Uniflor"],[3399,"Ura\u00ed"],[3400,"Ventania"],[3401,"Vera Cruz do Oeste"],[3402,"Ver\u00ea"],[3403,"Vila Alta"],[3404,"Virmond"],[3405,"Vitorino"],[3406,"Wenceslau Braz"],[3407,"Xambr\u00ea"]]
  • Share/Bookmark
Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Como foi o Yahoo! Hack Day 2008 no Brasil

1 Comment
Postado em 10 nov 2008
Categoria(s) Reflexões

Pessoal,

Eu e o Nei nesse final de semanas participamos do Yahoo! Hack Day e construímos essa aplicação: http://www.patrickespake.com/hacktrip/web/ busque por cidades internacionais.

O objetivo da nossa aplicação era buscar informações sobre uma determinada cidade, mostrando informações sobre hotéis, notícias, restaurantes, dúvidas, trips, fotos e mapa.

Para construir o projeto nós usamos o symfony, svn (unfuddle.com), Prototype, Scriptaculous e algumas Api’s do Yahoo descritas abaixo:

1. Para Hotéis nós usamos a api: Yahoo local (http://developer.yahoo.com/local/) essa api é meio estranha não funciona muito legal, os parâmetros de configuração na documentação não funcionam como o esperado e as vezes trazem uns destinos malucos, funciona +- para destinos internacionais;
2. Para Restaurantes usamos a api: Yahoo local mesmo problema descrito acima;
3. Para Notícias usamos a api: BOSS (http://developer.yahoo.com/search/boss/), essa api foi mais tranquila de usar e a documentação está funcionando legal para ela, ela server para fazer buscar dos resultados do mecanismo de busca do Yahoo para uma determina string, fotos e notícias;
4. Para Trips usamos a api: Travel (http://developer.yahoo.com/travel/) essa api é bem enrolada, ela disse que trás uma porção de coisas e na verdade só traz trips marcadas pelas pessoas;
5. Para Fotos usamos a api: Flickr (http://developer.yahoo.com/flickr/) essa api permite puxar fotos uma determinada tag e conjuntos de tags ficou um recurso interessante para puxar fotos de uma determinada cidade, mas ela é meio enrolada na parte que informa onde essa api pode ou não pode ser usada;
6. Para Mapa usamos a api: Google Maps, nós tentamos usar a api de mapas do Yahoo, mas ela é muito ruim e o mapa é feio para caramba, se contar que a gente mandava setar os marcadores no mapa e algumas vezes ele se perdia, nós construímos dois mapas um com o Yahoo e outro com o Google e mandamos setar os marcadadores o do Yahoo alguns marcadores ficaram errados. Essa api de mapa deles é meio bichada.

Uma coisa legal que a gente fez foi implementar a api do geonames.org, essa api permite buscar cidades no mundo inteiro, nós usamos ela para fazer o autocomplete do campo de busca, você digita o nome da cidade e ele começa a buscar as informações de geo desse destino.

A minha conclusão sobre as Api’s do Yahoo! são as seguintes:

Elas são ruins, não são muito boas, falta documentação de qualidade e muitas vezes elas tem um comportamento estranho. As únicas api’s que parecem ser melhores são as do Yahoo! Respostas, Delicious e Flickr, as demais são meio problemáticas. O mais interessante é que a gente conversou com várias pessoas do Yahoo! sobre essas deficiências e eles nós aconselhavam a usar as api’s do Google ou de outros, é molé. Eu esperava que eles falassem que as api’s deles tem problemas e estão trabalhando para melhorar, mas na verdade não.

Bom na verdade eu esperava mais em termos de tecnologia legal deles, e fiquei meio desencatado para usar essas Api’s. Muitas só permitem sugar informações e não permitem interação.

O Nei perguntou sobre as Api’s Local e Travel e os caras nem sabiam que existiam, teve que aparecer um dev gringo para testar e descobrir algumas informações para a gente.

No geral os outros devs do evento também tiveram a mesma sensação que a nossa, essas críticas eram os comentários gerais do evento e até nas apresentações dos projetos o pessoal aproveitou para criticar esses problemas.

Eu acredito que o evento acabou tendo um efeito contrário, ao invés do pessoal querer usar as api’s do Yahoo eles agoram sabem todos esses problemas e perderam o interesse.

Para quem tiver interesse pode baixar o projeto: http://www.patrickespake.com/hacktrip.tar.gz

Abraço.

  • Share/Bookmark
Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Usando Event.observe no Framework Javascript Prototype

No Comments
Postado em 07 out 2008
Categoria(s) JavaScript, Prototype

No Prototype existe a função Event.observe, essa função serve para adicionar uma função a uma determinada ação, por exemplo você deseja que sempre que a tela seja carregada uma função javascript seja disparada você pode fazer algo assim:

1
2
3
4
5
6

Event.observe(window, 'load', init, false);
 
function init()
{
  alert('Olá');
}

Essa função Event.observe associa a página/janela (window) com o evento onload (load), e chama a função javascript init quando esse evento ocorre, desta forma sempre quando a página for carregada a função init() será chamada.

  • Share/Bookmark
Tags: , , , , , , , , , , ,
← Previous Entries