Washington Patrício

Marca d’agua em campos com JQuery

Washington Patrício — Tue, 17 Apr 2012 15:25:44 +0000

Olá Galera!

Já precisou criar aquele efeito marca d’agua em um campo e se deparou com códigos enormes de javascript, css e html?

Pois agora vou mostrá-lo como fazer-la de maneira fácil, rápida e simples.

Primeiro, a função que será responsável por criar a marca d’agua nos campos que você informar. Aqui eu a chamei de “watermark”. Veja:

$.fn.watermark = function()
{
	return this.each(function() {
		// Atribui a formatação de marca d'agua
		if (!$(this).val()) {
			$(this).css('color', '#ABABAB');
		}

		value = ($(this).val() != '') ? $(this).val() : $(this).attr('alt');
		$(this).val(value);

		$(this).focus(function() {
			$(this).css('color', '#000000');

			if ($(this).val() == $(this).attr('alt')) {
				$(this).val('');
			}
		});

		$(this).blur(function() {
			if(($(this).val() == '') || ($(this).val() == $(this).attr('alt'))) {
				$(this).css('color', '#ABABAB');
				$(this).val($(this).attr('alt'));
			}
		});

	});
}

O uso dela é bem simples. Em tese, ela atribuiu o atributo “Alt” dos campos como um valor temporário no campo formatando-o com a cor “#ABABAB”.
Para usá-la, chame-a e passe os campos específicos no cabeçalho do seu documento. Como no exemplo abaixo:

$(document).ready(function(){
	$('input[name=login_user], input[name=login_password]').watermark();
});

Agora é só informar nos seus campos, através do atributo “ALT” o valor que você quer repassar como marca d’agua.

Não se esqueça de incluir a biblioteca JQuery no cabeçalho do seu documento. Até a próxima!

Preenchendo uma string

Washington Patrício — Fri, 27 Jan 2012 20:12:35 +0000

Faaala Cambada!

Diversas vezes, é comum pegar alguns algoritmos malucos de outros desenvolvedores, que por falta de informação escrevem uma enorme rotina para fazer simples operações.

Hoje vou dar um dica muito experta para você, meu bom e velho amigo desenvolvedor, que sempre inventou maluquices para completar um numero com zeros à esquerda ou à direita.

Se você pensou em fazer um while ou um for continue comigo para eu lhe apresentar uma solução que vai mudar a sua vida! HÁ!
Chega de lenga-lenga e vamos direto ao assunto:

O PHP possui uma função perfeita para isso, é a str_pad.

str_pad — Preenche uma string para um certo tamanho com outra string
string str_pad ( string $input, int $pad_length [, string $pad_string [, int $pad_type]] )
fonte: php.net

Exemplo:

str_pad($n, 4, "0", STR_PAD_LEFT);

No exemplo acima temos a variável $n que sempre terá 4 digitos. Caso seja menor, nossa função irá completar com zeros.

O parâmetro opcional pad_type pode ser STR_PAD_RIGHT (preencher a direita), STR_PAD_LEFT (preencher a esquerda), ou STR_PAD_BOTH (preencher de ambos os lados). Se pad_type não for especificado é assumido que seja STR_PAD_RIGHT.

Pronto! Agora dê adeus aquela complicação e seja feliz. Amém!

#FicaDica ;D

Padrões para introduzir novas ideias

Washington Patrício — Thu, 26 Jan 2012 15:24:12 +0000

Achei fantástica essa apresentação do Daniel Cukier! Ele mostra um caso bem interessante de como quebrar paradigmas e culturas em grande e pequenas corporações, no processo de implantação de novas ideias. #valeoplay!

Imagem PNG com fundo transparente no IE6

Washington Patrício — Wed, 25 Jan 2012 00:09:19 +0000

Olá Galera!

Muita gente questiona ainda sobre dar ou não suporte ao navegador Internet Explorer 6. Eu vejo que ainda existe uma ~~pequena~~ mínima parcela de usuários que ainda insistem a utilizar o IE6, seja por falta de conhecimento, viabilidade técnica ou até mesmo gosto (blérgh).

Eu procuro não me procupar muito com o IE6, mas, em alguns casos que não exigem muito esforço, procuro criar sites e/ou sistemas que rodem ~~perfeitamente~~ no IE6 ainda.

Um exemplo do que falo é o famoso PNG transparente. Em navegadores atuais ficam perfeitos, porem no IE6 ele fica com uma cor meio azulada no lugar do fundo transparente. Uma solução simples para isso, eu encontro no JQuery.

Através do Plugin PNGFIX do nosso amigo Andreas Eberhard é possivel criar uma renderização perfeita do PNG transparente no IE6. Veja como é simples:

1. Faça o download da biblioteca JQUERY e do Plugin PNGFIX
2. Inclua-os entre as tags do teu Html

3. Inclua também a função responsável pela chamada do plugin. Neste exemplo, o PNGFIX será aplicado a todas imagens do documento.

Fácil, Fácil! Com isso você possui liberdade a vontade para trabalhar com Div sobrepostas com imagens em PNG. Fantástico!

Dúvidas postem nos comentários! +)

Você sabe como funciona um datacenter?

Washington Patrício — Mon, 22 Aug 2011 01:59:42 +0000

Fechando uma conexão com o MySQL com a função mysql_close()

Washington Patrício — Mon, 15 Aug 2011 01:35:43 +0000

A função mysql_close() serve para fechar conexões não persistentes com o MySQL. Atualmente ela nem chega a ser tão necessária de se utilizar, porque as conexões não persistentes com o MySQL são automaticamente fechadas quando o script acaba de ser executado.

Obs.: Se a conexão ao MySQL é criada através da função mysql_pconnect(), o mysql_close() não irá fechá-la por ela se tratar de uma conexão persistente.

Exemplo de uso da função mysql_close():


#Fechamos então a conexão a ele
mysql_close($identificador);
?>
Para maiores informações sobre a função mysql_close(), acesse:
http://www.php.net/mysql_close

Programando PHP

Washington Patrício — Wed, 03 Aug 2011 00:19:45 +0000

Como podem notar em meus artigos anteriores, estou escrevendo coisas básicas do PHP. Achei essa uma boa forma de manter uma certa continuidade nas minhas postagens.

Hoje vamos ver alguns lances iniciais da linguagem PHP. Então se você está iniciando agora, é bom dar uma lida neste post até o fim. Agora você que já é um fera… Leia também! Conhecimento nunca é demais. Então vamos lá!

Para iniciar qualquer script PHP é necessário utilizar os delimitadores de códigos (). Todo seu programa deve estar contido entre esses delimitadores.

Observe que todos os comandos são delimitados por ponto-e-vírgula (;). Isso informa o final de um comando.

Note também que inserimos uma linha iniciada com duas barras. Isso significa que aquela linha é um comentário, e não será interpretada no momento da execução do programa. Há outras maneiras de se comentar um código PHP, como mostra o exemplo abaixo.

No PHP também temos os famoso e muito usados comandos de saída ou impressão (output). São comandos utilizados para gerar uma saída em tela seja em um Console ou em uma Página HTML – se for executado via servidor web (Apache ou IIS).

Washington!';
?>

Generalizando temos os dois comandos de impressão, o echo e o print. Ambos realizam a mesma tarefa porém o echo se torna mais usado por não retornar nenhum valor. Explicaremos isso mais adiante em outro post.

Note também que usamos, na linha 2, um ponto (.). Ele é usado como simbolo de concatenação. Ou seja ele junta o termos entre aspas. Falando em aspas(”), dê uma lida em meu outro post e saiba a diferença em utilizar aspas simples e aspas duplas.

Outros dois comandos de impressão utilizados é o var_dump e o print_f. Eles imprimem o conteudo de uma variável de forma explanativa, ajuda muito na hora de realizar um debug do código. Assim como o echo e o print, o uso de ambos comandos são semelhantes. Veja:

Resultado: array(4) {
[0]=> string(4) "Maçã"
[1]=> string(6) "Banana"
[2]=> string(7) "Laranja"
[3]=> string(5) "Melão"
}

É isso aí pessoal. Hoje vimos como iniciar nosso primeiro programinha PHP! Vimos também como gerar saídas na tela com os comandos de saída ou impressão. Pratique! Tente escrever seus primeiros códigos, em caso de dúvidas ou erros comente aí em baixo ou dá uma ‘tuítada’ pra mim lá no twitter (@waapatricio)

Abraços e inté a próxima!

Off-Post: Em cada comando, costumo linkar com o manual PHP. Vale a pena dar uma lida lá também!

Boas Práticas com MySQL

Washington Patrício — Fri, 08 Jul 2011 01:09:28 +0000

Nessas minhas navegadas da vida… Encontrei um artigo muito bom! Tão bom que resolvi usar traduzir ele e postar aqui! Vale a pena conferir!

Operações de banco de dados tendem a ser o principal gargalo para a maioria das aplicações web hoje. Não é só os administradores de DB (database – banco de dados) que têm de se preocupar com esses problemas de desempenho. Nós, como programadores precisamos fazer a nossa parte por uma estruturação das tabelas corretamente, a escrita otimizada agiliza consultas e melhora o código. Aqui estão algumas técnicas de otimização do MySQL para programadores.

1. Otimizar suas consultas para o cache de consulta

A maioria dos servidores MySQL tem consulta cache habilitado. É um dos métodos mais eficazes para melhorar o desempenho, que é tranquilo e tratados pelo mecanismo de banco. Quando a mesma consulta é executado várias vezes, o resultado é obtido a partir da memória cache, que é bastante rápido.

O principal problema é, ele é tão fácil e escondido dos programadores, a maioria de nós tendem a ignorá-lo. Algumas coisas que fazemos pode realmente evitar que o cache de consulta de executar sua tarefa.

// Cache de consulta não trabalha
$r = mysql_query("SELECT * FROM utilizador WHERE signup_date username> = CURDATE()");
// Funciona cache de consulta!
$hoje data = ("Ymd");
$r = mysql_query("SELECT * FROM utilizador WHERE signup_date username> = '$hoje'");

A razão do não funcionamento da cache de consultas na primeira linha é o uso do CURDATE () . Isso se aplica a todos os não-determinista funções como NOW () e rand (), etc … Como o resultado de retorno da função pode mudar, o MySQL decide desativar o cache de consulta para essa consulta. Tudo o que precisava fazer é adicionar uma linha extra de PHP antes da consulta para impedir que isso aconteça.

2. Seu Consultas EXPLAIN SELECT

Usando a palavra-chave EXPLAIN pode lhe visualizar o que está fazendo o MySQL para executar sua consulta. Isso pode ajudar a detectar pontos de congestionamento e outros problemas com a sua consulta ou estruturas de tabela.

Os resultados de uma consulta EXPLAIN mostrará que os índices estão sendo utilizados, como a tabela está sendo gerada e classificada etc …

Dê uma query SELECT (de preferência um problema complexo, com associações), e adicionar a palavra chave EXPLAIN na frente dele. Você pode apenas usar o phpMyAdmin para isso. Ele irá mostrar os resultados em uma tabela legal. Por exemplo, digamos que me esqueci de adicionar um índice a uma coluna, que junta-se realizar a:

Após adicionar o índice para o campo group_id:

Agora, em vez de varredura 7883 linhas, ele só irá digitalizar 9 e 16 linhas a partir de 2 tabelas. Uma boa regra é multiplicar todos os números nas linhas “coluna”, e seu desempenho de consulta vai ser um pouco proporcional ao número resultante.

3. LIMIT 1 ao começar uma linha exclusiva

Às vezes, quando você está consultando as tabelas, você já sabe que você está procurando apenas uma linha. Você pode estar buscando um registro único, ou você pode apenas ser apenas verificando a existência de qualquer número de registros que satisfaçam a cláusula WHERE.

Em tais casos, acrescente LIMIT 1 à sua consulta pode aumentar o desempenho. Desta forma, o mecanismo de banco irá parar a verificação de registros após ele encontrar apenas 1, em vez de atravessar toda a tabela ou índice.

// Eu tenho todos os usuários do Alabama?
// Ao invés de...
$r = mysql_query("SELECT * FROM user WHERE state = 'Alabama'");  
if (mysql_num_rows($r) > 0) {  
     // ...
// Tente...
$r = mysql_query("SELECT 1 FROM user WHERE state = 'Alabama' LIMIT 1");   
if (mysql_num_rows($r) > 0) {  
    // ...  
}

4. Índice dos Campos de Pesquisa

Os índices não são apenas para as chaves primárias ou chaves únicas. Se não houver nenhuma coluna na sua tabela que você irá procurar por, você deve índice quase sempre eles.

Como você pode ver, esta regra também se aplica a uma seqüência parcial de pesquisa como “last_name LIKE ‘a%’”. Ao pesquisar a partir do início da seqüência de caracteres, o MySQL é capaz de utilizar o índice na coluna.

Você também deve compreender que tipos de pesquisas não podem usar os índices regulares. Por exemplo, ao procurar por uma palavra (por exemplo, “WHERE post_content LIKE ‘%apple%”), você não verá um benefício de um índice normal. Você será melhor usar pesquisa fulltext MySQL ou construir sua própria solução de indexação.

Site vê semelhança em logos de Dilma e Obama

Washington Patrício — Mon, 04 Jul 2011 00:13:34 +0000

O Design on The Rocks enxergou semelhança entre os logotipos das campanhas presidenciais de Dilma Rousseff e do norte-americano Barack Obama. Publicou um post (http://www.designontherocks.com.br/?p=34409) e depois o retirou do ar. No lugar, deu uma explicação dizendo que vai esperar para comparar os logos de todos os candidatos.

O blog guardou as imagens postadas pelo site Design on The Rocks:

É parece que o designer seguiu as mesmas tendências. Pode ser pura coincidência… Mas que parece, parece!

fonte: UOL Política

Iniciando.

Washington Patrício — Sun, 03 Apr 2011 23:51:24 +0000

Finaaaaaalmente… estou ~~iniciaando~~ voltando com meu blog!
Nessa minha vida muito corrida, quase não sobra tempo pra expor meus trabalhos e ter um tempo dedicado a mim. Mas graças ao WordPress, conseguirei disponibilizar meu portifólio, expor minhas idéias e projetos.

Vou lançar alguns tutoriais e novidades pra galera iniciante aí. Assim como vocês também me iniciei lendo muuuuita matéria na internet e
graças a isto hoje consigo trabalhar de forma bem profissional.

Se quiser sabe mais sobre mim pode ler a página Sobre, lá tem uma breeve explicação de quem sou e o que faço.

Bom então é isso né pessoal!