Pinceladas da Web

Se você pensa em fazer uma economia de banda para a sua aplicação web, utiliza jQuery, então acho bom pensar em carregar o arquivo JavaScript a partir do Google com a utilização de seu CDN (Rede de distribuição de conteúdo). A utilização é muito simples, basta fazer uma chamada para o JavaScript da seguinte forma:

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	// Load jQuery
	google.load("jquery", "1.3");

	google.setOnLoadCallback(function() {
		// Seu código aqui
	});
</script>

Ou então você pode fazer uma referência direta ao arquivo da seguinte forma:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

O que fazemos é utilizar a API de bibliotecas Ajax do Google, mas você não pode fazer isso somente com jQuery, ao utilizar o google.load() da API do Google, você pode ter também acesso a várias bibliotecas JavaScript como: jQuery, jQuery UI, Prototype, script.aculo.us, MooTools, Dojo, SWFObject e Yahoo! User Interface Library.

Outra característica é que você pode especificar a versão que deseja utilizar e se deseja que ela seja carregada “comprimida” ou não

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", "1.3", {uncompressed:true});
</script>

Para aqueles que não sabem, já saiu a versão 1.3 do Framework jQuery. As novidades você pode ver no Release do site.

Você já pensou na possibilidade de obter itens randômicos com jQuery? Já tentou fazer isso e não conseguiu? Eu encontrei no site de Waldek Mastykarz uma maneira muito simples de se fazer isso. Não vou explicar aqui o código pois o autor já fez isso, mas aqui vai a solução:

jQuery.jQueryRandom = 0;
jQuery.extend(jQuery.expr[":"],
{
    random: function(a, i, m, r) {
        if (i == 0) {
            jQuery.jQueryRandom = Math.floor(Math.random() * r.length);
        };
        return i == jQuery.jQueryRandom;
    }
});

Um exemplo de utilização do filtro :random que agora foi criado seria da seguinte forma:

<ul>
    <li>Primeiro</li>
    <li>Segundo</li>
    <li>Terceiro</li>
</ul>
<script type="text/javascript">
    $(document).ready(function() {
        alert($("li:random").text());
    });
</script>

Simples, vejam esse exemplo para um melhor entendimento. A cada refresh na página, ele me traz um item diferente.

A portabilidade das aplicações desktop para a web já não é novidade, mas dessa vez fiquei impressionado ao descobrir que Eric Wahlforss desenvolveu uma cópia fiel do iTunes que roda na web, o The Cloud Player. Ele utilizou as seguintes tecnologias para isso:

• Google App Engine
• Python
• jQuery
• SoundManager2
• SoundCloud API

Lá você possui a opção de criar novas playlists, salvá-las em em sua conta do Google, classificar playlists, além de poder compartilhar com seus amigos.

Os browsers estão ficando a cada dias mais poderosos, e com isso cada vez mais é possível usar e abusar do JavaScript, e foi com isso que James Luterek desenvolveu um mini sistema operacional, o JSOS, que roda no browser utilizando jQuery. O sistema é composto das seguintes opções:

• Botão Start
• Barra de tarefas onde você pode minimizar as janelas e reabrí-las novamente.
• Janelas (Você pode criar, mover, minimizar, maximizar, etc.)
• Mostrar o Desktop com o clique direito do mouse.
• Alterar propriedades do background, Tema, Cor do texto.
• Todas as alterações são salvas em cookies para serem carregadas novamente em uma visita posterior.

Continuar lendo »

O que é CSV?

Comma-separated values (ou CSV) é um formato de arquivo que armazena dados tabelados, cujo grande uso data da época dos mainframes. Por serem bastante simples, arquivos .csv são comuns em todas as plataformas de computador.

O CSV é um implementação particular de arquivos de texto separados por um delimitador, que usa a vírgula e a quebra de linha para separar os valores. O formato também usa as aspas em campos no qual são usados os caracteres reservados (vírgula e quebra de linha). Essa robustez no formato torna o CSV mais amplo que outros formatos digitais do mesmo segmento.

Formalmente, o CSV é um formato de dados delimitado que possui campos (colunas) separados por caracteres de vírgula e registros (linhas) separados por caracteres de quebra de linha. Campos que contêm caracteres especiais (vírgula, quebra de linha ou aspas) devem ser envolvidos em aspas. Entretanto, se uma linha contiver uma única entrada que seja uma cadeia vazia, ela também pode ser envolvida por aspas. Se um campo contiver um caractere de aspas, ele é discernido posicionando outro caractere igual logo em seguida. O formato CSV não requisita uma codificação de caracteres, uma ordenação de bytes ou um formato de terminador de linha.

Exemplo

A tabela acima pode ser ser representada em CSV da seguinte maneira:

1997,Ford,E350,"ac, abs, moon",3000.00
1999,Chevy,"Venture ""Extended Edition""",,4900.00
1996,Jeep,Grand Cherokee,"MUST SELL!
air, moon roof, loaded",4799.00

Fonte: Wikipédia

Integrar CSV com jQuery

Acompanhando o blog de um amigo, descobri que existe um plugin para jquery que através dele você pode ver de forma amigável arquivos CSV na web, o csv2table. Sua utilização é relativamente muito simples, basta ter o jquery na página juntamente com a utilização do plugin, após é só chamar a função com o local do arquivo e onde ele deve ser aberto na página, exemplo:

<script src="./js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="./js/jquery.csv2table-0.02-b-1.9.js" type="text/javascript" charset="utf-8"></script>

<div id="view0"></div>
<script>
$(function(){
  $('#view0').csv2table('./data/Book12.csv');
});
</script>

Você por um acaso já viu aqueles contadores de caracteres restantes em formulários e não teve a menor idéia ou saco pra fazer aquilo, pois bem, procurando no google achei um plugin para jQuery que faz isso de uma forma bem simples, mas sua aplicação é somente a inputs, não sendo aplicado a textareas:

jQuery.fn.counter = function() {
  $(this).each(function() {
    var max = $(this).attr('maxlength');
    var val = $(this).attr('value');
    var cur = 0;
    if(val) // value="", or no value at all will cause an error
      cur = val.length;
    var left = max-cur;
    $(this).after("<div class='counter'>"
      + left.toString()+"</div>");
    // You can use something like this to align the
    // counter to the right of the input field.
    var c = $(this).next(".counter");
    c.width(40);
    c.css("position","relative");
    c.css("top",-$(this).height()-8);
    c.css("left",$(this).width()+8);
    c.css("background","yellow");

    $(this).keyup(function(i) {
      var max = $(this).attr('maxlength');
      var val = $(this).attr('value');
      var cur = 0;
      if(val)
        cur = val.length;
      var left = max-cur;
      $(this).next(".counter").text(left.toString());
      return this;
    });
  });
  return this;
}

Continuar lendo »