Pinceladas da Web

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 »

O Framework jQuery está se tornando a biblioteca JavaScript mais popular dos últimos tempos, isto é fato, até a Microsoft irá utilizá-la no .NET futuramente. Sua utilização é extremamente simples, com ela você pode tem suporte ao DOM, eventos, Ajax, animações e várias outras coisas. Nesse vídeo de apresentação de John Resig (criador da jQuery) mostrado no AJAX Experience 2008 Conference você vai ficar conhecendo um pouco mais sobre a jQuery e irá aprender a fazer animações e construir um accordion do zero.

Via: Digital Skraps.

Para criar máscaras com jQuery, iremos usar o plugin Masked Input, com apenas uma linha de código podemos criar qualquer tipo de máscara.

Para começar, caso não tenha o jQuery, faça o download do mesmo, após isso pegue o Masked Input, e apenas inclua-los em sua página.

Agora vamos criar as máscaras que precisamos.

jQuery.noConflict();
(function($) {
$(function() {
$('.mask-data').mask('99/99/9999'); //data
$('.mask-hora').mask('99:99'); //hora
$('.mask-fone').mask('(999) 999-9999'); //telefone
$('.mask-rg').mask('99.999.999-9'); //RG
$('.mask-ag').mask('9999-9'); //Agência
$('.mask-ag').mask('9.999-9'); //Conta
});
})(jQuery);

Repare que estou setando as máscaras para “classes”, no site do autor é usado “ids”, mas isso não é muito legal, caso tenha dois campos de telefone numa mesma página, teriamos que mecher no javascript, pois não pode haver “id” repetidos na mesma página.

Agora pra implemetar as máscaras é só incluir as classes setadas nos inputs dos formulários.

<input type="text" name="fone1" class="mask-fone" />
<input type="text" name="fone2" class="mask-fone" />
<input type="text" name="rg" class="mask-rg" />
<input type="text" name="cpf" class="mask-fpc" />

E pronto, já esta funcionando, repare que caso você erre, é possível alterar sem ter que apagar tudo, geralmente algumas máscaras, como a do Banco do Brasil, não deixa editar pelo meio do campo, temos que apagar e digitar tudo de novo, se não tudo que for digitado vai para o final do campo.

Para facilitar, recomendo colocar o código que gera as máscaras no final do código do plugin, sim no mesmo arquivo, assim você não precisa ficar refazendo, e é só incluir e usar.

Se você já trabalhou com os efeitos de fadeIn & fadeOut da biblioteca jQuery já deve ter reparado que os elementos em que esses efeitos são aplicados (No Internet Explorer), principalmente textos, ficam com as fontes pixeladas, em algumas situações chegando a acontecer de o texto ficar em negrito e após a execução do efeito ele voltar ao normal. Se tratando de Internet Explorer, nem a Microsoft sabe o por que disso acontecer.

Já tive vários problemas desse tipo e até então não havia encontrado a solução, mas acabei encontrado uma solução muito interessante no site de Kevin Leary que consiste simplesmente em adicionar uma cor de fundo ao elemento que será aplicado o fade.

Acessem esse exemplo com o Internet Explorer e vejam o erro acontecer. Provavelmente esse erro acontece com outras bibliotecas JavaScript, portanto, fica aí a solução.

[Update]Encontrei aqui uma outra solução muito interessante.[/Update]