Twitter signin com jQuery

De fato o twitter trouxe sua contribuição para a WEB. Não estou falando apenas do simples porém eficaz negócio de mensagens curtas, mas também do seu design e funcionalidades.

Basta olharmos para a nova homepage com um design limpo e fácil que inspira muitos outros serviços a fazerem o mesmo. Sendo assim notamos no canto superior direito da página inicial do Twitter e veremos o sinal no botão que será suspenso o formulário de login.

Assim, Lam Nguyen ensinou como criar um login drop down com estilo Twitter utilizando jQuery aqui.

jQuery Tools

Esta biblioteca(jQuery Tools) contém seis das ferramentas mais úteis do Javascript disponíveis para um site de hoje. A beleza desta biblioteca é que todas essas ferramentas podem ser usadas juntas. No final, você pode ter centenas de elementos diferentes e novas maneiras de usar a biblioteca.

Esta biblioteca é de código fonte aberto e de licensa  dupla, MIT e  GPL 2 .

O pacote contém uma série de demos, incluindo:

• Tabs
• Tooltips
• Expose
• Overlay
• Scrollable
• Flashembed

JavaScript Cheat Sheet (Standart, jQuery, MooTools, Prototype …)

Seguindo os post´s de guias e referências, segue mais um unindo vários Cheat Sheet´s de frameworks em JS.

- JavaScript Standart Cheat Sheet

Logicamente organizado em métodos DOM, funções, expressões regulares, etc . É fácil de usar e uma grande referência para todos os usos comuns JavaScript. Clique aqui para baixar.

- jQuery Visual Map

Tenho certeza que esse é bastante conhecido. Apenas não pude deixa-lo de fora. Clique aqui para vizualizar.

- MooTools Cheat Sheet

Para aqueles que preferem o MooTools que  jQuery, segue esse guia baseado no MooTools 1.2. Clique aqui para vizualizar.

- Prototype Cheat Sheet

É um excelente recurso para aqueles que utilizam Prototype.js e inclui uma referência visual para deslocamentos e dimensões. Clique aqui para vizualizar.

WordPress Cheat Sheet´s Help Reference

O WordPress Help Sheet é o mais útil guia se você for um programador de temas para o WP. É um guia de referência rápida para as mais comuns sintaxes utilizadas no WP. Apenas os mais necessários e  mais comuns trechos estão incluídos, clique aqui para baixar o pdf.

Já aqueles que criam temas WordPress regularmente, WPCandy criou uma avançada ferramenta de ajuda. Contém os codigos mais utilizados para temas que requerem funcionalidades adicionais. Qualquer criador de temas profissionais deveria ter este guia na mão clique aqui para baixar o pdf.

E para finalizar, segue uma checklist para desenvolvimento de temas WP. A lista abrange tópicos gerais (como informação e imagens), componentes do blog (como feeds RSS), timestamps, bem como a categoria de página navegação.

São no total 9 itens:

• General
• Stylesheets
• Browser Compatibility
• Pages
• Styled Everything?
• Standard CSS Classes
• Validate
• WordPress Code
• Blog Elements

Clique aqui para fazer o download da WP Theme Check-List.

FireQuery 0.3

FireQuery é uma das coleções de acessórios que existem para Firebug que analisa o jQuery.
Características:

* Expressões jQuery são apresentadas no Console do firebug e DOM Inspector
* Os dados jQuery são anexados na primeira classe cidadãos
* Elementos em jQuery são destacados
* JQuerify: permite-lhe escrever jQuery em qualquer página

Página Oficial:  http://firequery.binaryage.com/
Ou baixe em complementos do firefox.

** requer Firebug 1.3+

Jcrop: O Crop-plugin em JQuery

** Essa é uma tradução não oficial do manual do plugin Jcrop. Para mais informações e download visite o site oficial.

Jcrop é a maneira fácil e rápida de adicionar imagem para a sua aplicação web. Ele combina a facilidade de uso típico de um plugin jQuery com a poderosa plataforma crop-engine em DHTML. Licença FREE – MIT

Visão geral:

* Atribuição não-obstrusiva para qualquer imagem
* Suporta travamento de proporção
* Suporta definição de MINSIZE / MAXSIZE
* Desfazer a selecção feita, ou enquanto se deslocam
* Teclado nudging(com detalhes do crop) para apoio à selecção
* Características da API para criar interactividade, incluindo animação

* Suporte para CSS

Compatibilidade Cross-browser

* Firefox 3
* Safari 3
* Opera 9.5
* Google Chrome 0.2.x
* Internet Explorer 6+

- Primeiros passos

* Faça o download da versão atual do Jcrop
* Coloque os arquivos em seu servidor web para que você possa solicitar-los de sua página
* Você também deve ter instalado a biblioteca  jQuery

Dentro da tag <head> você precisa carregar os arquivos necessários. Isso inclui:

* Biblioteca jQuery
* Jcrop Javascript
* Jcrop estilo CSS
* Protótipo da função

Ficando assim:

<script src="js/jquery.pack.js"></script>
<script src="js/jquery.Jcrop.pack.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />

<script language="Javascript">
    jQuery(function() {
        jQuery('#cropbox').Jcrop();
    });
</script>

Vamos supor que nossa imagem esteja assim:

<img src=”flowers.jpg” id=”cropbox” />

Por padrão, o Jcrop se comporta assim como nesse exemplo1.

O jcrop possui 2 eventos:

onSelect -> chamado quando a seleção estiver concluída

onChange -> chamado quando a seleção está se movendo

Função de eventos:

<script>
     // Lembre de chamar com jquery(window).load(...)
     // Senão, o jquery pode não inicializar a propriedade

	jQuery(document).ready(function(){

		jQuery('#cropbox').Jcrop({
			onChange: showCoords,
			onSelect: showCoords
		});
	});

	function showCoords(c)
	{
		jQuery('#x').val(c.x);
		jQuery('#y').val(c.y);
		jQuery('#x2').val(c.x2);
		jQuery('#y2').val(c.y2);
		jQuery('#w').val(c.w);
		jQuery('#h').val(c.h);
	};

</script>

Veja o Exemplo2

Para mais exemplos e informações, acesse o site do manual oficial

Ajax Instant Messenger

Fala galera!
Encontrei esse sistema feito em ajax com auxílio da biblioteca Prototype.
Se resume em um sistema no estilo MSN bem feito, bonito e simples de usar e modificar.

Download Aqui!

Vamos configurar a sua instalação:

1°- Abra o arquivo config-sample.php e preencha os campos relacionados à conexão com o BD.

// MySQL Database Configuration
$sql_user   = 'user';
$sql_pass   = 'pass';
$sql_host   = 'localhost';
$sql_db     = 'ajaxim';

// This is the prefix for the ajax im MySQL tables -- this can usually be left alone.
// (If upgrading from a version < 3.1, set the prefix to '')
define('SQL_PREFIX', 'ajaxim_');

$maxBuddyIconSize = 100; // in KBs, set to 0 to disable uploads

Depois de feito, renomeie o arquivo para config.php

2°- É opcional, porém caso deseje mudar alguns parâmetros de configuração como titulo do sistema, tamanhos e talz... acesse o arquivo js/config.js.

3°- Mude a permissão de pasta buddyicons/ para CHMOD 0777.

4°- Execute no Browser o install.php e siga as intruções.

5°- Após tudo feito, delete os arquivos install.php e update.php

E pronto! Agora é só adpatar e utilizar esse sistema em qualquer lugar.

Ler arquivos CSV com jQuery

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.

Ex:

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

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

No blog de Antonio Basilio Neto, ele demonstra 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-2.8.js” type=”text/javascript” charset=”utf-8″></script>
<script>

$(function(){

$(’#view0′).csv2table(’./data/Book12.csv’);

});

</script>

Prototype vs. jQuery

Prototype vs. jQuery, quais desses Frameworks JavaScript utilizar? Isso é um tipo de discussão que ocorre constantemente entre os desenvolvedores. Utilizar jQuery, devido seu slogan chamativo: “The Write Less, Do More”, ou utilizar Prototype, com seu arsenal de utilidades? Coisas desse tipo são explicadas nesses slides desenvolvidos por Remy Sharp, onde é feita uma comparação entre: funções, seletores, manipulação do DOM, eventos, Ajax e detecção do browser.