by Luiz Paulo
| dezembro 21, 2008
| No Comments »
O gravatar é um serviço web gratuito para disponibilizar avatar. Esse serviço é muito utilizado em blogs, onde o usuário deixa seu comentário e o avatar aparece automaticamente para facilitar a identificação.
Gravatar é a abreviação de "globally recognized avatar" que significa "reconhecimento global de avatar".
Como exibir minha foto nos comentários?
Para os usuários que querem comentar e deixar "sua marca", a utilização é bem simples. Basta fazer o cadastro no site do gravatar e adicionar uma imagem. O avatar fica relacionado ao seu e-mail, então sempre quando for comentar algum blog, basta colocar o e-mail (que foi cadastrado no gravatar) no comentário que seu avatar será exibido.
É importante informar que nem todos os blogs oferecem esse serviço.
Como disponibilizar gravatar em meu blog?
Existem algumas formas para incluir o gravatar em seu blog, uma delas é criar o seu próprio código no blog e a outra forma é utilizar um plugin.
Exemplo em PHP
O site do gravatar busca sua foto a partir de um MD5 gerado a partir do e-mail cadastrado. Com isso, fica muito simples a utilização. Abaixo você verá um simples exemplo de código gerado em PHP.
<?php
//O E-mail pode ser qualquer um cadastrado no site do gravatar
$mailMD5 = echo md5("lppjunior@gmail.com");
?><img src="http://www.gravatar.com/avatar.php?gravatar_id=<?php echo $mailMD5; ?>&size=50&default=http://blog.lppjunior.com/wp-content/themes/lppjunior/images/default.jpg" />
Nesse exemplo utilizei 3 atributos. Segue a descrição de cada um:
- gravatar_id: Esse atributo é o MD5 do e-mail (a conversão é mostrada no primeiro código PHP acima)
- size: A imagem pode ser baixada em vários tamanhos, nesse caso utilizei o tamanho 50px
- default: Caso o e-mail(MD5) enviado não esteja cadastrado no gravatar, ele retorna uma imagem default. Nesse caso, você pode informar qual será uma imagem personalizada.
Bom, acho que é só... Se esqueci de alguma coisa, por favor me avisem!
Categorias: Artigo, Browser, Desenvolvimento web, Serviços
Tags: , avatar, comment, gravatar, imagem, serviço
by Luiz Paulo
| dezembro 20, 2008
| No Comments »
Favicons são pequenas imagens no formato .ico normalmente possuem o tamanho de 16x16. Essas imagens são utilizadas para facilitar a identificação de um site em abas ou favoritos. Muitos favicons são versões minimizadas de logotipos que fazem referência a marca / imagem da empresa.
Como comentei acima, os mais normal é salvar as imagens em formato .ico , mas alguns browsers também reconhecem o formato .gif.
Inserindo favicon no formato ICO
<html>
<head>
<title>Inserindo favicon no formato ICO</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
...
</body>
</html>
Inserindo favicon no formato GIF.
* Esse formato não funciona no Internet Explorer.
<html>
<head>
<title>Inserindo favicon no formato GIF</title>
<link rel="shortcut icon" type="image/gif" href="favicon.gif" />
</head>
<body>
...
</body>
</html>
Acesse também: 21 melhores geradores de favicon da Internet, você encontrará vários geradores de icones web.
Categorias: Browser, CheatSheet, Desenvolvimento web, HTML
Tags: , Browser, example, favicon, gif, html, icon, tutorial
by Luiz Paulo
| dezembro 4, 2008
| 4 Comments »
Veja abaixo algumas soluções para retirar espaços do início e final de strings.
Exemplos simples
Exemplo curto (funções com expressão regular):
//trim completo
function trim(str) {
return str.replace(/^\s+|\s+$/g,"");
}
//left trim
function ltrim(str) {
return str.replace(/^\s+/,"");
}
//right trim
function rtrim(str) {
return str.replace(/\s+$/,"");
}
alert(trim(" TEXTO "));Exemplo curto (métodos da string com expressão regular):
Essa solução é bem mais elegante!
//trim completo
String.prototype.trim = function () {
return this.replace(/^\s+|\s+$/g,"");
}
//left trim
String.prototype.ltrim = function () {
return this.replace(/^\s+/,"");
}
//right trim
String.prototype.rtrim = function () {
return this.replace(/\s+$/,"");
}
alert(" TEXTO ".trim());Outras soluções
Exemplo longo
function trim (str)
{
var whitespace = ' \n\r\t\f\x0b\xa0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000';
for (var i = 0; i < str.length; i++)
{
if (whitespace.indexOf(str.charAt(i)) == -1)
{
str = str.substring(i);
break;
}
}
for (i = str.length - 1; i >= 0; i--)
{
if (whitespace.indexOf(str.charAt(i)) == -1)
{
str = str.substring(0, i + 1);
break;
}
}
return whitespace.indexOf(str.charAt(0)) == -1 ? str : '';
}Outro exemplo
function isWhitespace(charToCheck) {
var whitespaceChars = " \t\n\r\f";
return (whitespaceChars.indexOf(charToCheck) != -1);
}
//left trim
function ltrim(str) {
for(var k = 0; k < str.length && isWhitespace(str.charAt(k)); k++);
return str.substring(k, str.length);
}
//right trim
function rtrim(str) {
for(var j=str.length-1; j>=0 && isWhitespace(str.charAt(j)) ; j--) ;
return str.substring(0,j+1);
}
//trim completo
function trim(str) {
return ltrim(rtrim(str));
}Caso queira se aprofundar no assunto, aconselho a leitura do artigo Faster JavaScript Trim que mostra vários testes de performance no IE e FF.
Façam bom proveito!
Categorias: Desenvolvimento web, JavaScript, Linguagens
Tags: , code, example, javascript, trim
by Luiz Paulo
| dezembro 3, 2008
| 12 Comments »
Essa semana eu e parte de nossa equipe, passamos por uma situação complicada. Estamos desenvolvendo um projeto relativamente grande que precisa ser entregue até final do ano. Até aí nada de errado!
Esse projeto já está rolando há algum tempo e passou por todos os processos de desenvolvimento (ou quase todos).
Quando chegou a nossas mãos (desenvolvimento), encontramos uma documentação com várias e várias funcionalidades, só que uma delas nos chamou a atenção, pois estava bem complexa. Com definição de regras e sub-regras para chegar a um determinado objetivo. Até que um dia, tive uma dúvida e resolvi perguntar para o cliente, conversamos bastante até chegarmos a um consenso. Depois de 4 horas de reunião, percebemos que essa funcionalidade não precisava mais do que um cadastro "besta".
Me senti exatamente nessa situação:
Depois de tanto trabalho, a funcionalidade pronta, etc. etc. tivemos que refazer (ainda bem que conseguimos recuperar boa parte do código)!
Com esse quadro, fica a questão. Quem errou?
Seria o cliente por não ter conseguido explicar exatamente o que precisava? Do pessoal que planejou/documentou que não soube dar a melhor solução? Ou do desenvolvimento que não gritou antes a respeito da complexidade?
Na minha opinião, o problema não está ligado diretamente a nenhuma das partes. Todos direta ou indiretamente erraram.
Depois de todo esse tempo de desenvolvimento, houve um amadurecimento da idéia, e com isso as coisas se tornaram muito mais simples.
Sim! Com certeza, se lá atrás quando foi planejado, tivessem ficado 5 minutos a mais discutindo, talvez chegassem a esse resultado mais simples, mas não aconteceu. E deu no que deu.
Existe toda aquela discussão de métodos ágeis ("...se estivesse utilizando Scrum isso não acontecia!"), zilhões de técnicas para processos melhores e menos burocráticos. Concordo que talvez não tivéssemos esse problema, independentemente de métodos e processos, precisamos levar em consideração o que comentei acima, nesse tempo houve um amadurecimento da idéia e os clientes perceberam que aquilo definido não era necessário.
Esquecemos do KISS "Keep It Simple Stupid", princípio básico para desenvolvimento.
Enfim, aprendi muito com isso! Acho que todos crescem com esse tipo de situação. Com certeza depois disso, na próxima teremos mais cautela ao definir uma coisa muito complexa, ou não... (rsrsrs)
Categorias: Artigo, Desenvolvimento web
Tags: , desenvolvimento, kiss, planejamento, projeto, scrum
by Luiz Paulo
| novembro 14, 2008
| 15 Comments »
Essa semana, eu precisei de uma solução em Javascript para encontrar o "último dia do mês" ou "quantidade de dias do mês" como preferir. Consultei o Google e encontrei algumas soluções, algumas delas mais simples e outras bem criativas.
Achei o assunto interessante e resolvi divulgar aqui para quem precisar utilizar.
Primeiro vou postar as soluções sérias para o pessoal que está pesquisando e precisa utilizar em seu código
Soluções simples
Exemplo longo (função):
function daysInMonth(month,year) {
var m = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
if (month != 2) return m[month - 1];
if (year % 4 != 0) return m[1];
if (year % 100 == 0 && year%400 != 0) return m[1];
return m[1] + 1;
}Exemplo curto (função):
Aqui está a grande sacada do javaScript, que interpreta o 0(zero) como "o dia antes do dia primeiro" que obviamente é o último dia do mês anterior.
function daysInMonth(month,year) {
var dd = new Date(year, month, 0);
return dd.getDate();
}Exemplo curto (inline):
var lastDay = (new Date(year, month, 0)).getDate();
Soluções criativas
Não se assustem, mas as soluções citadas abaixo funcionam!
Solução utilizando Switch:
function getLastDayOfMonth(month,year)
{
var day;
switch(month)
{
case 1 :
case 3 :
case 5 :
case 7 :
case 8 :
case 10:
case 12:
day = 31;
break;
case 4 :
case 6 :
case 9 :
case 11:
day = 30;
break;
case 2 :
if( ( (year % 4 == 0) && ( year % 100 != 0) ) || (year % 400 == 0) )
day = 29;
else
day = 28;
break;
}
return day;
}Essa é legal
function anoBissexto(anoCompleto)
{
if(!(anoCompleto%4) && (anoCompleto%100 || !(anoCompleto%400))) return true;
return false;
}
function diasNoMes(mes,ano)
{
var var_type=typeof mes;
if(var_type != "number" && var_type != "string") return false;
if(var_type == "number" && (mes > 11 || mes < 0) && !isInt(mes)) return false;
var eng_args_allowed = "january-february-march-april-may-june-july-august-september-october-november-december";
var bra_args_allowed = "janeiro-fevereiro-marçomarco-abril-maio-junho-julho-agosto-setembro-outubro-novembro-dezembro";
var vet_eng_args_allowed = eng_args_allowed.split("-");
var vet_bra_args_allowed = bra_args_allowed.split("-");
var datahj = new Date();
var anohj = datahj.getFullYear();
var dias = [31,anoBissexto(ano)?29:28,31,30,31,30,31,31,30,31,30,31];
if(var_type == "string")
{
indice_eng = keyPosMatch(vet_eng_args_allowed,mes);
indice_bra = keyPosMatch(vet_bra_args_allowed,mes);
if(indice_eng>=0) return dias[indice_eng];
if(indice_bra>=0) return dias[indice_bra];
return false;
}
else return dias[mes];
}Façam bom proveito!
Categorias: Desenvolvimento web, JavaScript, Linguagens
Tags: , calendar, code, date, example, javascript
Próximos posts » 
