Limpa o campo aí jQuery!

E ai pessoal! Como estão passando de final de ano? Fala sério, 2010 já vai tarde hein?!

Bom, eu vou bem e para retribuir minha felicidade vou passar pra vocês uma função bem bacaninha. Muita gente, que não teve a curiosidade ou oportunidade de mexer mais a fundo com o nosso querido Javascript (e seu lindo framework jQuery), já me pediu para criar um método capaz de limpar campos que possuam um valor inicial.

A lógica é simples, pensa bem: a página contém um campo de pesquisa com um valor inicial tipo “Faça sua busca aqui!” e toda vez que o usuário clicar, tabular ou focar nesse campo o mesmo deve ficar vazio. Caso o usuário “saia” do campo e não entre com nenhum valor, esse campo deve voltar ao seu valor inicial.

Sacaram?

Tão simples quanto a função jQuery que criei para vocês.

Mas antes de tudo, precisamos carregar o jQuery na nossa página:

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

Pronto! Agora vamos adicionar função clearInput() ao jQuery e mais embaixo chamaremos ela:

/* Função jQuery para limpar o valor inicial de um campo */
(function($){
$.fn.clearInput = function(initVal) {
return this
.focusin(function() {
if ($.trim(this.value) == initVal) {
this.value = “”;
}
})
.focusout(function() {
if ($.trim(this.value) == “”) {
this.value = initVal;
}
});
};
})(jQuery);

/* Aqui vamos chamar o função no campo desejado */
$(function() {
// valor inicial do campo
var initVal = “Faça sua busca aqui!”;
// carrega valor inicial e chamar e limpa o campo quando estiver com focus
$(“#user-field”).val(initVal).clearInput(initVal);
});

No mais é isso galera. Taí mais um código pronto pra vocês!

Ensinamento ninja do dia: jQuery.data()

Um bom ninja é discreto, faz o serviço sem deixar rastros ou qualquer tipo de sujeira. Vamos deixar de lado então toda aquela bagunça que fazíamos com os atributos rel e class de nossas tags HTML, é muito feio quando um aprendiz ninja joga um monte de dados nesses atributos e depois se embola todo pra fazer os splits da vida. Um exemplo comum disso seria:

$(“#teste”).attr(“rel”, “ativo”);

ou

$(“#teste”).addClass(“ativo”);

Até aí não vejo muito problema, afinal estamos passando apenas um dado pro elemento #teste, mas o négocio pega quando se resolve adicionar mais coisa ali:

$(“#teste”).attr(“rel”, “1-foobar-loremipsum-123456-ativo”);

Opa! Pra recuperar algum dado daí só tacando um split agora. Se precisássemos obter o “foobar” daquele rel, por exemplo, faríamos assim:

var nome = $(“#teste”).attr(“rel”).split(“-”)[1];

Ô coisinha feia, em?! Lembrando pessoal: código limpo e não redundante é o primeiro mandamento de um ninja, está acima de tudo. Vamos dar um jeito nisso então! Com o jQuery.data() você pode associar facilmente valores à uma tag HTML, basta passar uma chave e dizer o seu valor. Aquele nosso primeiro exemplo ficaria assim (digamos que ele seja um link):

<a href=”#” id=”teste”>Teste</a>

No Javascript é só fazer isso:

$(“#teste”).data(“status”, “ativo”);

Ou se quisermos associar vários dados:

$(“#teste”).data({
id: 1,
nome: “foobar”,
descricao: “loremipsum”,
cod: “123456″,
status: “ativo”
});

Agora pra obter um valor basta fazer um get normal de jQuery:

var nome = $(“#teste”).data(“nome”);

Ser um ninja é muito mais legal. Ponto.

Scrum e o desenvolvimento ágil de projetos

Saudações manolos!

Sei que já faz um bom tempo que estou devendo posts novos por aqui, mas hoje vou tentar me redimir com um post bem bacana sobre uma metodologia nova (ok, nem é tão nova assim) que está bombando entre as equipes de desenvolvimento de softwares mundo afora: o Scrum.

Vou tentar explicar seu uso e suas terminologias de um jeito bem fácil de entender e, logo em seguida, farei um passo-à-passo de como utilizá-lo na prática.

Ah, se o post ficar muito grande eu divido em duas partes, beleza? Vamos lá então!

O que é o Scrum?

Uma maneira simples de agilizar a gerência de projetos, uma forma de começar já botando a mão na massa e deixar pra ir atualizando a parte analítica (funcionalidade e requisitos) do projeto de acordo com o que vai sendo conferido no decorrer de sua implementação.

Por que usá-lo em sua equipe?

Sabe quando você faz todo aquele “blá blá blá” inicial de análise de requisitos, casos de uso e cia, esperando cobrir todos os problemas apresentados pelo cliente? Quando a gente põe a galera pra programar não é extremamente normal começarem a aparecer vários detalhezinhos que  deixamos passar despercebidos? Pois é, o Scrum parte exatamente da idéia de que nenhuma dessas análises iniciais abrange 100% dos requisitos do cliente. Sem contar que quando tratamos de desenvolvimento de softwares não estamos falando de algo similar à uma linha de produção de carros, esse processo é mais elegante, mais artístico. Isso significa que a implementação de um projeto de software envolve acima de tudo a criatividade da equipe, não se encaixando bem como um processo mecânico e bitolado por uma série de diagramas e casos de uso. Não é difícil perceber porque o Scrum vem ganhando tanta popularidade ultimamente, seus resultados são certos e é muito interessante o fato dele estimular a praticidade, a criatividade e a comunicação da equipe com o cliente.

Mas e aí, como funfa?

Chegamos na parte legal da coisa! Vamos ver como aplicar a metodologia do Scrum em uma equipe de desenvolvimento seguindo quatro etapas.

 

Ciclo do Scrum

 

1. Criar um Product Backlog

O primeiro passo é fazer uma reunião com o Product Owner (geralmente o cliente) para que sejam definidos os requisitos e as funcionalidades principais de todo o projeto, o resultado dessa reunião será o Product Backlog que servirá de base pra a criação de cada Sprint Backlog (veremos no próximo passo). Não há limitações para alteração do Product Backlog pois é comum encontrarmos, durante o desenrolar do projeto, novos pontos e funções que não foram percebidos na primeira reunião.

2. Definir o Sprint Backlog

Para iniciarmos um Sprint é preciso agregar à ele um objetivo, um tempo de conclusão e algumas funcionalidades que serão retiradas do Product Backlog para serem implementadas. Isso é feito através de uma reunião entre o Scrum Team e o Scrum Master chamada de Sprint Planning Meeting, o resultado dessa reunião será um Sprint Backlog. Cabe ao Scrum Master manter e atualizar o Sprint Backlog de acordo com o  que for sendo verificado nas Standup Meetings (veremos no próximo passo).

3. Iniciar Sprint

O Sprint é nada mais que um ciclo de desenvolvimento dentro do Srum visando implementar algumas funcionalidades específicas (Sprint Backlog) dentre todas aquelas contidas no Product Backlog. Vamos pegar um exemplo pra não deixar isso tão abstrato: um sistema de controle de estoque. Cada módulo desse sistema pode corresponder à um Sprint, ou seja, se a equipe resolve começar implementando o módulo de registro de produtos isso vai gerar um Sprint, pois ele trata de algumas funcionalidades específicas dentre todas aquelas desejadas para o sistema.

Em cada dia do Sprint é realizada uma rápida reunião (antes do início das atividades de desenvolvimento) chamada de Standup Meeting, nela a equipe de programadores discute junto ao Scrum Master (e se necessário, o Product Owner) como anda o progresso do projeto, o trabalho a ser realizado, o que tem impedido o avanço do desenvolvimento e então requisitos vão sendo adicionados/alterados no Sprint Backlog.

4. Finalizar Sprint

Quando se termina um Sprint é feita uma avaliação do mesmo através do Sprint Review Meeting, que é nada mais que uma reunião com o Scrum Team, o Scrum Master e o Product Onwer para tratar dos pontos e metas que foram ou não atingidos durante o Sprint. Logo após vem o Sprint Retrospective para apontar possíveis melhoras no que foi desenvolvido e, feito isso, a equipe parte para o planejamento de um novo Sprint reiniciando assim o ciclo de desenvolvimento.

Compressores Javascript e CSS

Para quem, como eu, come CSS e JQuery com pão e manteiga no café da manhã aí vão algumas dicas de compressores para quem tem códigos kilométricos. Ah, só para não ficar nada muito abstrato, o funcionamento deles é  muito simples. Basicamente o código submetido é analisado e otimizado, por exemplo: sempre que possível as aspas dusplas são trocadas por aspas simples nas strings, são retirados espaços, comentários e ponto e vírgulas desnecessários, etc. Bom quem quiser dar uma olhada aí vão alguns compressores bastante utilizados:

CSS: CSS Optmizer e CSS Compressor

Javascript: Javascript Compressor

Flash Killers – Como usar a tag video do HTML5?

E ae pessoal, como vocês estão? Bom, comigo não poderia estar melhor. A cada dia que passa tenho me encantado mais com as novidades do  HTML5 e do CSS3 e, é com toda essa felicidade, que não me faltou motivação para criar uma nova série aqui no blog. Sim, vamos conhecer os Flash Killers (assassinos do flash), aquelas novidades que estão vindo para superar  de vez essa tecnologia que já me cheira a naftalina.

Eu sempre fui meio chato com Flash sabe, nunca tive interesse em pegar pra estudar, parece até que sabia que seus dias estavam contados. Sei lá,  pra mim tudo que dificultasse a dinâmica das informações dentro de um site era (e ainda é) visto com maus olhos. Fazer o que né

Pra quem não acredita que o Flash está entrando pro museu da web, vou mostrar numa série de posts as razões para, definitivamente, não usarmos mais isso que todo cliente quer em seu site (sim, quem nunca escutou um “dar pra fazer aquilo ali se mexer com flash?”, “põe um sonzinho ali também”, etc).

Poisé, nesse primeiro post vou mostrar uma tag nova, uma das novidades mais legais do HTML5, a tag <video>.

Ainda não são todos os navegadores que dão suporte à tag e, dependendo do navegador, o vídeo tem que estar no formato .mp4 (Chrome e Safari por exemplo) ou .ogg (Firefox).

Pra usá-la é muito simples:

<video controls>
<source src=”Audioslave – Cochise.mp4″ type=”video/mp4″ /> <!– MPEG4 para Safari –>
<source src=”Audioslave – Cochise.ogg” type=”video/ogg” /> <!– Ogg Theora para Firefox –>
</video>

O resultado será uma janelinha de streaming de vídeo como essa (Chrome):

Muito bacaninha em? Vale lembrar que a W3C ainda não recomenda o uso do HTML5, mais isso é questão de tempo galera. Uma última dica é você escrever um aviso dentro da tag para que o usuário saiba que o navegador dele não suporta essa tag ainda, tipo:

<video src=”Cochise.mp4″ controls=”controls”>

Ops, seu blog ainda não suporta essa tag

</video>

Se ele usa um IE da vida, será mostrado esse aviso ao invés de renderizar a janela de vídeo.

E aí, gostaram? Vejo vocês no próximo post da série então, grande abraço!

Como melhorar a divulgação de seu site com Meta Tags?

Se você acha que o Google tem sido injusto com seu site, pense duas vezes antes de mandar nosso bom amigo tomar em lugares indesejáveis . As vezes quem pode estar dificultando as coisas é você. Vamos ver então uma maneira bem simples de investir na divulgação de sua página.

O que vou  fazer é ajudar vocês a tornarem seu site (e o conteúdo contido nele) mais visíveis aos olhos do Google. E para isso, vamos dar uma olhadinha nas Meta Tags. Essas tags são escritas no cabeçalho do HTML, ou seja, dentro da tag <head>, saca só:

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”title” content=”Tiago POG” />
etc…
<title>Titulo da página</title>
</head>

Existem vários tipos de Meta Tags, vou passar pra vocês algumas das que mais utilizo e dar uma explicação rápida sobre elas, beleza?

Content-Type

Primeiro vamos definir o tipo do conteúdo (texto/html) e o grupo de caracteres que estamos utilizando (utf-8).

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

Robots

Aqui você diz se quer ou não que os buscadores indexem sua página. Estranho né? Mas dependendo da página pode ser que você não queira indexá-la, um pop-up por exemplo, não tem necessidade. Mas não é o nosso caso, então quando colocamos o valor “index, follow” estamos dizendo que essa página pode ser indexada, e todos os links que seguem nela também. Que ver mais exemplos de robots? Entre aqui.

<meta name=”robots” content=”index, follow” />

Title

Agora vamos apresentar o título de nossa página. Você vai alterar o atributo content das tags de acordo com o seu site. No meu caso, vou deixar o content com o título do meu blog “Tiago POG”.

<meta name=”title” content=”Tiago POG” />

Description

Quando um buscador apresenta seu site, ele vai mostrar uma ou duas frases que resumam o conteúdo do mesmo. E aí que entra o papel da tag description.

<meta name=”description” content=”Blog sobre tecnologia, dicas de programação, performance, música, filmes, café e pão de queijo ” />

Keywords

Opa, chegamos numa tag muito importante.  O que seriam das buscas na web sem essas tais keywords, hein? Poisé, nela você vai digitar a maior quantidade de palavras-chave que identifiquem sua página à engine de busca.

<meta name=”keywords” content=”blog, wordpress, tecnologia, filmes, música, programação, html,  php” />

Author

Vamos dar autoria ao conteúdo com essa tag.

<meta name=”author” content=”Tiago Guedes”>

Language

E se alguém por ai só está atrás de páginas em português? É bom definirmos o idioma do site para facilitar a vida desse alguém.

<meta name=”language” content=”pt-br” />

Pronto pessoal, é só isso. No final das contas nosso cabeçalho de Meta Tags ficará assim:

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”robots” content=”index, follow” />
<meta name=”title” content=”Tiago POG” />
<meta name=”description” content=”Blog sobre tecnologia, dicas de programação, perfonmance, música, filmes, café e pão de queijo ” />
<meta name=”keywords” content=”blog, wordpress, tecnologia, filmes, música, programação, html,  php” />
<meta name=”author” content=”Tiago Guedes”>
<meta name=”language” content=”pt-br” />

Lembrando que não é só isso que garantirá uma boa colocação nos resultados de busca de um Google da vida. A combinação conteúdo bem apresentado + frequência de atualização é muito importante para que seu site esteja lá em cima.

Para que serve o tal do doctype?

Se você usa uma boa IDE para programar suas apps web, com certeza ela faz boa parte do trabalho de criar um bom cabeçalho para definir o tipo de documento e os metadados do seu site. O elemento <!DOCTYPE> é aquele que aparece lááá em cima, o primeiro elemento do seu código-fonte, quer ver? Dá um ctrl + u aí! Até ai beleza, mas pra que serve isso mesmo?

O Doctype é uma definição do tipo de documento (DTD – Document Type Definition) que possibilita que ferramentas (como os navegadores) processem de maneira correta esse documento. Por isso ele já vem lá no início. Definindo esse tipo você está dizendo qual é a estrutura legal, quais são os elementos e atributos que esse documento utiliza,  isso é necessário pois existem várias versões de HTML,  XML, etc…

Recomendo muito  esse post, para quem quer saber qual o doctype utilizar:

http://www.pinceladasdaweb.com.br/blog/2006/12/21/utilize-o-doctype-correto/

E para mais informações, nada melhor que as palavras da W3C:

http://www.w3schools.com/tags/tag_DOCTYPE.asp

Quando usar o === (absolutamente igual)?

Usamos o === em um condicional sempre que o valor de uma variável pode ter mais de um significado. Um exemplo clássico de uso:

$nota = 0;
if (!$nota) echo ‘Não há nota registrada!’;

Nesse caso ele vai imprimir a string “Não há nota registrada”, isso porque a nota que foi igual a 0 pode ser considerada como false dentro de uma estrutura condicional. E é nesse caso devemos fazer assim:

$nota = 0;
if($nota === false) // se a nota for unicamente igual a false
echo ‘Não há nota registrada!’;
else
echo ‘Nota = ‘.$nota;

Pronto, problema resolvido! Nesse segundo caso a saída será a esperada: “Nota = 0″

Novidades para o Chrome

Apesar de ter me decepcionado algumas vezes, principalmente por problemas de interpretação de Javascript e renderização de caracteres especiais, continuo usando o Google Chrome como navegador padrão (apesar de usar o Firefox para muita coisa). Não só pela sua beleza e velocidade, mas pela a facilidade de uso que o navegador oferece.

Para os usuários do Chrome e desenvolvedores web trago boas novas:

Sai atualização para o Google Chrome corrigindo esses e alguns outros problemas de compatibilidade da versão antiga. Para quem não tem o navegador instalado ainda, baixe aqui a nova versão. Para os que já tem instalado, basta acessar “About” e “Update Now” para baixar a atualização.

Web Developer chega ao Chrome. Enfim chega o plugin tão esperado pelos desenvolvedores web! Instale agora o Web Developer em seu navegador e veja como desenvolver websites se torna algo mais fácil.

É galera, a raposa que se cuide…

Top Gun Feelings

Quem nunca assistiu Top Gun e saiu maluco de vontade pra pilotar um caça daqueles? E aquela trilha sonora modafóqui?! Empolgante demais!

Para quem quiser assistir o filme: Download – Top Gun (Dublado)

Eu não aguentei, tive que ir atrás de algum jogo que pudesse satisfazer minhas necessidades pós-filme de sair por aí acima da velocidade do som.

Me deparei então com Tom Clancy´s H.A.W.X.

Que jogo! Para quem estiver afim de pilotar um F-22 em cenários como Rio de Janeiro essa é uma ótima escolha. Além dos ótimos gráficos e joagbilidade, o jogo prende pela variedade de aeronaves e mapas. Quem tiver afim de conferir, ai vai o link do torrent do jogo:

Download – Tom Clancy´s H.A.W.X

Configuração mínima:

CPU: Intel Pentium 4 2.0 GHz/ AMD Athlon XP 2000+ or higher
Operating System: Windows XP (with Service Pack 3) or Windows Vista (with
Service Pack 1)
RAM: 1 GB Windows XP / 2 GB Windows Vista
DVD-ROM: DVD-ROM speed 4x, dual- layer drive
Drive Space: 1.5 GB
Graphics Card: 128 MB DirectX compliant, Shader 2.0 enabled video card
Sound Card: DirectX 9.0 compliant sound card
DirectX Version: DirectX 9.0 or 10.0 libraries (included on disc)

Configuração recomendada:

CPU: Intel Core 2 Duo 6320 / AMD Athlon X2 4000+ or higher
Operating System: Windows XP (with Service Pack 3) or Windows Vista (with
Service Pack 1)
RAM: 2 GB
DVD-ROM: DVD-ROM speed 4x, dual-layer drive
Drive Space: 1.5 GB
Graphics Card: 256 MB DirectX 10.0 compliant video card or DirectX 9.0
compliant card with Shader Model 3.0 or higher (see supported list)
Sound Card: DirectX 9.0 compliant sound card
DirectX Version: DirectX 9.0 or 10.0 libraries (included on disc)
Peripherals: Xbox 360 Controller for Windows

E se você quer se sentir realmente um Top Gun, eu recomendo muito baixar essa música e colocar em loop no seu player:

Kenny Loggins – Highway to The Danger Zone (Top Gun Theme).mp3