O principal objetivo dessa edição é atingir gestores, líderes, desenvolvedores, inovadores e fornecedores de serviço de software em geral que, de alguma maneira, desejam contratar e desenvolver produtos de forma ágil em empresas da iniciativa privada e no governo Brasileiro.

Neste ano a Agile Brazil, maior evento de agilidade da América Latina, acontecerá em Brasília-DF nos dias 26, 27 e 28 de Junho de 2013. E as inscrições já estão abertas pelo site: http://www.agilebrazil.com/2013/pt/inscricao/ 

Desconto

Existe um desconto especial para Caravanas/Grupos:

5 a 12 pessoas: 10%
até 30 pessoas: 15%
até 50 pessoas: 25%

Organize seu grupo e inscreva-se.

Agilidade no Governo

Esta edição de 2013 promoverá a integração do ecossistema ágil com o ecossistema do governo, das grandes empresas e das startups. Por meio dessa integração entre esses diferentes ecossistemas, acreditamos que poderemos catalisar mudanças sustentáveis, não por rupturas, mas sim pela interoperação de ideias.

Palestrantes

Este ano o Agile Brazil terá excelentes palestrantes, como por exemplo:

Niels Pflaeging

Edições Anteriores

Em 2010, em Porto Alegre-RS, reunimos no mesmo palco Martin Fowler, Philippe Kruchten, David Hussman e Klaus Wuestefeld, além de mais de 50 outras sessões com os mais experientes agilistas do Brasil.

Em 2011, um evento de mesma dimensão foi realizado em Fortaleza-CE com a presença de Jim Highsmith, Joshua Kerievsky, Vinícius Teles e Kenji Hiranabe.

Em 2012, a conferência foi sediada em São Paulo-SP e reuniu grandes empresas com os mais experientes profissionais do mercado brasileiro de agilidade. Tivemos a presença de Neal Ford, James Shore e Khawaja Shams, Johanna Rothman e Jack London.

Venha Participar conosco do Agile Brazil. O maior encontro de agilidade da América Latina!
Acesse www.AgileBrazil.com.br e faça sua inscrição
Siga-nos no twitter @AgileBrazil e acompanhe nossa hastag #AgileBR
Visite nossa Página no Facebook http://www.facebook.com/AgileBrazil
De 26 a 28 de Junho. Nos vemos em Brasília!

Nos vemos no evento!
Veja mais em: www.agilebrazil.com.br

A ideia inicial é que ele fosse bem simples, o foco foi apenas para treinar o desenvolvimento de aplicativos. Sua funcionalidade é minimalista, você digita um número e o aplicativo converte o número digitado (inclusive os decimais) por extenso.

Convido você a baixar, testar o aplicativo e, é claro, mandar sugestões.

Baixe o aplicativo Por Extenso no Google Play

Abaixo segue algumas imagens do aplicativo:

Tive uma grande dificuldade para importar uma nova unidade certificadora para protocolos seguros para o dispositivo, mas em minhas pesquisas descobri uma forma bem fácil de fazer isso.

Basta acessar o site http://www.realmb.com/droidCert/ e fazer o upload do arquivo da unidade certificadora ou colocar a URL dele.

O sistema vai armazenar o arquivo, e disponibiliza-lo para download com o cabeçalho HTTP no formato “Content-Type: application/x-x509-ca-cert” e pronto, o navegador do seu dispositivo irá identificar o cabeçalho e fará a instalação do certificado.

Nas minhas outras tentativas, tentei colocar o arquivo no cartão SD do dispositivo e instala-lo, mas sem sucesso.

Dica: você pode fazer o upload do arquivo por um computador pois após isso, o site disponibiliza o QR Code para você fazer o download do certificado pelo celular.

Para visualizar os certificados instalados basta acessar: Configurações > Segurança > Credenciais confiáveis > Usuário

Fiz os testes com o JQuery Mobile e constatei que apesar de ainda estar em versão alpha já dá para brincar bastante. Nesse post vou mostrar como fazer algumas telas simples para começarmos a entender como o JQm (JQuery Mobile) funciona.

Algumas pessoas já me perguntaram, como eu faço um site para iPhone, Android, Blackberry e outros smartphones? o JQuery Mobile pode de ajudar (e muito!) a fazer isso.

Para utilizar o JQuery mobile você precisa incluir três coisas no seu HTML:

• Script do JQuery (O mesmo usamos nos outros posts) – http://code.jquery.com/jquery-1.5.min.js
• Script do JQuery Mobile (onde estão os métodos específicos para mobile) – http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js
• CSS da interface do usuário (UI) para JQuery Mobile – http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css

Você pode baixar um arquivo compactado com o JS, o CSS com as imagens da UI da versão mobile clicando aqui e depois é só baixar o JQuery 1.5 aqui

Vamos ao primeiro exemplo de um index.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Primeira Página</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
</head> 
<body> 
<div data-role="page">
    <div data-role="header">
        <h1>Primeira página</h1>
    </div>
    <div data-role="content">	
        <p>Essa é sua primeira página para dispositivos móveis</p> 
    </div>
</div>
</body>
</html>

Para ver o exemplo funcionando clique aqui.

Você deve estar se perguntando, mas que atributo data-role é esse?
A partir do HTML5 você pode colocar metadados nas suas tags usando o data-*
Está disponivel nesse outro post informações sobre esse assunto…

Então a essência do JQuery Mobile é basicamente essa, utilizar o atributo data-* para as diferentes funcionalidades e aparências.

Alguns atributos data-* que podem ser utilizados nas diferentes tags:

• data-role
• data-theme
• data-icon
• data-transition

Esse post foi apenas para apresentar esse novo recurso que a comunidade desenvolvedora do JQuery está preparando, espero fazer posts mais aprofundados sobre esse assunto em breve.

Lembre-se que o JQuery Mobile ainda está em versão alpha, ainda não é uma boa idéia usa-lo em produção

Caso tenha interesse de ver meus testes, acesse por seu celular endereço:

http://www.mauriciofaustino.com/mobile/

Algumas das promessas do HTML5 são:

• Reduzir a necessidade de plugins externos (como o Flash)
• Melhor manipulação de erro
• Mais marcação para substituir o script
• HTML5 deve ser independente do dispositivo

No tópico Mais marcação para substituir o script encontrei um atributo muito interessante, o data-* que serve para adicionar metadados na sua tag.

Ou seja o data-* permite definirmos nossos próprios atributos da tag…

Por exemplo, se estivéssemos desenvolvendo um HTML para a página de comentários de uma foto (como nos sites de relacionamento) seria perfeitamente válido fazer algo desse tipo:

1
2
3
4
5

<li class="comentario" data-nome="Maurício Faustino" 
data-cidade="Brasília" data-estado="DF"
data-pais="Brasil" data-lang="pt-br">
  <b>Maurício Faustino disse:</b> <span>Muito bonita essa foto!</span>
</li>

Nesse código criamos nossos atributos de metadados do comentário, como o nome, cidade, estado, país e língua em que o autor postou a mensagem.

A vantagem disso é que além do código ficar mais limpo e intuitivo podemos utilizar esses atributos tanto no CSS quanto no Java Script.

Se nós quisermos colorir cada comentário com as cores do país do autor basta fazer isso:

1
2
3
4
5
6
7
8
9

.comentario [data-pais=Brasil] {
	color: yellow;
	background-color:green;
}
.comentario [data-pais=Japao] {
	color: red;
	background-color:white;
}
...

O que antes era feito enchendo as tags de classes, agora é possível utilizando a tag data-*

Outra aplicação é no javascript, temos acesso a esses atributos, podendo inclusive altera-los.

No JQuery, utilizamos a função $(elemento).data() para usar e modificar esse atributo.
Assim podemos fazer algo do tipo:

1
2
3
4
5

$(".comentario").click(function() {
	if($(this).data("pais")=="Brasil") {
		alert("Comentário de um Brasileiro");
	}
});

Assim podemos ver que o HTML5 veio para ajudar e facilitar!

Fique a vontade para fazer comentários, críticas e sugestões sobre o post…

Dia 28 de janeiro de 2010 foi oficialmente lançado a versão 1.4 do JQuery. Essa versão veio com algumas novidades muito interessantes. Dediquei esse post para mostrar uma das inovações dessa versão.

Para quem usa AJAX com JQuery a algum tempo, deve conhecer o plugin Livequery.
Esse plugin permite que o desenvolvedor faça um .bind() em um evento de um elemento, e o bind permaneça mesmo se o DOM for atualizado.

No JQuery 1.4 foi implementado o metodo .live() o que faz com que agente não precise mais do plugin.

Um exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="exemplosBind">
<h3>Exemplos Bind</h3>
<a class="botaoBind" href="#">Botao usando metodo Bind</a>
 
</div>
 
<hr />
 
<div class="exemplosLive">
<h3>Exemplos Live</h3>
<a class="botaoLive" href="#">Botao usando metodo Live</a>
 
</div>

em nosso javascript:

1
2
3
4
5
6
7
8
9
10

$(function () {
	$(".botaoBind").bind("click", function () {
		novoBotao = $(this).parent().clone();
		$(".exemplosBind").append(novoBotao);
	});
	$(".botaoLive").live("click", function () {
		novoBotao = $(this).parent().clone();
		$(".exemplosLive").append(novoBotao);
	});
});

No Exemplos Bind, o primeiro botão tem o evento, mas os outros botões criados por ele não tem o evento.
Já no Exemplos Live, todos os botões (inclusive os inseridos dinamicamentes no DOM) estão com o evento.

Isso é muito util tambem para quando estamos trabalhando com Ajax.

Você pode ver esse código funcionando clicando aqui.

Para ver outras novidades do JQuery 1.4 veja esses posts:

• A nova maneira de criar elementos
• Ligando múltiplos eventos a um elemento
• Eventos focusin e focusout
• Atrasos nas animações com a função delay()
• Recortando” um elemento da DOM com detach()

Um muito legal que tive que fazer foi da disciplina de Cálculo II onde o desafio era elaborar um programa que calculasse a integral definida usando a definição (e não usando o Teorema Fundamental do Cálculo)  usando um refinamento que o usuário pode controlar dizendo em quantas partes quer dividir o intervalo de integração [a,b]

Como sempre resolvi ir um pouco alem do desafio, fiz um programa que calcula a integral aproximada junto com o esboço do gráfico de várias funções, e resolvi esse problema usando apenas recursos de XHTML e JQuery.

Você deve estar pensando… “Ele usou algum recurso para gerar imagens com javascript”. Mas por incrivel que pareça não usei nada desse tipo. Fiz o gráfico apenas com CSS e DIVS.

Clique aqui para ver a aplicação.

Caso alguem se interesse pelo código, ou se tiver alguma pergunta deixem comentários ou e-mails. Responderei assim que possível.

Queria mandar meus agradecimentos aos amigos Marcello Brandão, Maurício Madalozzo e ao professor Luís Cláudio que me ajudaram nesse projeto.

Mas você não sabe quantos telefones essa pessoa tem. Então precisamos que ela possa adicionar campos nesse formulário, vou mostrar uma forma bem fácil de você resolver esse problema usando novamente a biblioteca JQuery.

No nosso index.html faremos nosso formulário…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Exemplo</title>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="aplicacao.js"></script>
	</head>
 
	<body>
		<div style="border:1px solid #CCC; background-color:#EFEFEF; padding:0 20px;">
			<h1>Exemplo Campos Din&acirc;micos</h1>
			<p>Esse arquivo &eacute; parte de um arquivo feito por Maur&iacute;cio Faustino para mostrar como um formul&aacute;rio com campos din&acirc;micos</p>
 
		</div>
		<div style="width:500px; margin:auto;">
 
			<form action="mantemPessoas.php" method="post">
				<fieldset>
				<legend>Dados Pessoais</legend>
				<p>
					<label for="nome">Nome da Pessoa</label>
					<input id="nome" type="text" name="nome" />
				</p>
				<p>
					<label for="dataNascimento">Data de Nascimento</label>
					<input id="dataNascimento" type="text" name="dataNascimento" />
				</p>
				</fieldset>
				<fieldset>
				<legend>Telefones</legend>
				<div class="telefones">
				<p class="campoTelefone">
					<input type="text" name="telefone[]" />
					<a href="#" class="removerCampo">Remover Campo</a>
				</p>
				</div>
				<p>
					<a href="#" class="adicionarCampo">Adicionar Telefone</a>
				</p>
				</fieldset>
 
			</form>
			<a href="http://www.mauriciofaustino.com/2009/04/adicionar-campos-dinamicos/">Voltar para o post.</a>
		</div>
	</body>
</html>

Lembrando que você precisa ter o arquivo da biblioteca jquery na mesma pasta do seu index.

O nosso aplicacao.js ficaria assim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

$(function () {
	function removeCampo() {
		$(".removerCampo").unbind("click");
		$(".removerCampo").bind("click", function () {
			i=0;
			$(".telefones p.campoTelefone").each(function () {
				i++;
			});
			if (i>1) {
				$(this).parent().remove();
			}
		});
	}
	removeCampo();
	$(".adicionarCampo").click(function () {
		novoCampo = $(".telefones p.campoTelefone:first").clone();
		novoCampo.find("input").val("");
		novoCampo.insertAfter(".telefones p.campoTelefone:last");
		removeCampo();
	});
});

Vamos explicar o que foi feito:

Linha 1 - Define o código JQuery que será rodado no carregamento da página.

Linha 2 - Declara uma função chamada removeCampo.

Linha 3 - Tira qualquer função que esteja setada para ser executada quando o elemento com a classe removerCampo seja clicado.

Linha 4 - Quando um elemento com a classe removerCampo for clicado executará a seguinte função.

Linha 5 - Teclara uma variavel i igual a zero.

Linha 6 - Para cada p com a classe campo telefone dentro de um elemento com a class telefones executará a seguinte função.

Linha 7 - Incrementa a variavel i (a linha 5 e 6 servem para contar quantos p.campoTelefone existem dentro do elemento com a classe telefones).

Linha 9 - Se i for maior que 1 (se esse não for o unico elemento dentro da div telefones.

Linha 10 - Remove o pai do link clicado, ou seja, o p.campoTelefone.

Linha 14 – Executa a função removeCampo().

Linha 15 - Quando um elemento com a classe adicionarCampo for clicado.

Linha 16 – Clona o primeiro p com a classe campoTelefone e insere em uma variável que chamei de novoCampo.

Linha 17 - Procura dentro do elemento novoCampo um input e seta o value dele como vazio.

Linha 18 - Insere o elemento novoCampo depois do ultimo p com a classe campoTelefone.

Linha 19 - Executa a função removeCampo.

E está feito nosso componente de adicionar campos de telefone dinamicamente. Se você não entendeu porque eu tieve que executar a função removeCampo duas vezes, leia o artigo AJAX – Primeiros Problemas onde tem uma explicação melhor sobre esse assunto.

Estive recebendo muitas dúvidas dos visitantes do blog sobre como pegar os telefones no arquivo PHP que vai receber as informações desse formulário…

Segue um exemplo simples para pegar o resultado:

1
2
3
4
5
6
7

<?php
$telefone = $_POST['telefone'];
$quantidade = count($telefone);
for ($i=0; $i<$quantidade; $i++) {
	echo  "Telefone: ".$telefone[$i]."<br />";
}
?>

Explicando…

Linha 2 - Pega as informações que foram passadas via POST pelo formulario. (no caso do PHP, ele ja identifica o [] no atributo name do input e identifica como um array)

Linha 3 - Pega a quantidade de telefones que tem no array.

Linha 4 - Faz um laço para varrer todo o array de telefones.

Linha 5 - Mostra cada telefone.

Quando esse formulário for submetido você receberá em seu PHP um array de telefones.

Gostaram?

Você pode ver esse exemplo funcionando clicando aqui.

Vamos exemplificar, vamos fazer um index.html com o seguinte código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Exemplo</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
		<script type="text/javascript" src="aplicacao.js"></script>
	</head>
	<body>
		<div id="menu">
			<ul>
				<li><a href="#" id="pagina1">Pagina 1</a></li>
				<li><a href="#" id="pagina2">Pagina 2</a></li>
			</ul>
		</div>
		<div id="conteudo">
			<p>Essa &eacute; uma pagina com um <a href="#" id="link">link</a></p>
		</div>
	</body>
</html>

Agora temos uma página html simples, vamos para o javascript, novamente usando a biblioteca JQuery.

vamos criar o arquivo aplicacao.js com o seguinte código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(function () {
	$("#pagina1").click(function () {
		$("#conteudo").load("conteudos.html #conteudo1");
		return false;
	});
	$("#pagina2").click(function () {
		$("#conteudo").load("conteudos.html #conteudo2");
		return false;
	});
	$("#link").click(function () {
		alert("Você clicou no link");
		return false;
	});
});

Vamos explicar as linhas:

Linha 1 - Define o código JQuery que será rodado no carregamento da página.

Linha 2 - Quando o elemento com id pagina1 for clicado executará uma função.

Linha 3 - Carrega o conteudo do elemento com id conteudo1 do arquivo conteudos.html (ainda vamos criar esse arquivo) para dentro do elemento com id conteudo.

Linha 4 – retorna falso, para o fluxo padrão do html para links não ser executado.

Linha 6 - Quando o elemento com id pagina2 for clicado executará uma função.

Linha 7 - Carrega o conteudo do elemento com id conteudo2 do arquivo conteudos.html (ainda vamos criar esse arquivo) para dentro do elemento com id conteudo.

Linha 8 – retorna falso, para o fluxo padrão do html para links não ser executado.

Linha 10 – Quando o elemento com id link for clicado executará uma função.

Linha 11 – Alerta o usuário que ele clicou no link.

Linha 12 – retorna falso, para o fluxo padrão do html para links não ser executado.

Criando o arquivo conteudos.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
			"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Exemplo</title>
	</head>
	<body>
		<div id="conteudo1">
			<p>Esse &eacute; o conteudo da primeira pagina</p>
			<p>Essa tambem &eacute; uma pagina com um <a href="#" id="link">link</a></p>
		</div>
		<div id="conteudo2">
			<p>Esse &eacute; o conteudo da segunda pagina</p>
			<p>Essa tambem &eacute; uma pagina com um <a href="#" id="link">link</a></p>
		</div>
	</body>
</html>

Pronto, está feito nosso AJAX que carrega conteudos. Mas ainda tem um problema, os links que foram carregados através do AJAX não devem estar funcionando.

Isso acontece porque a linha 10 do nosso aplicacao.js foi executada quando a página foi carregada, ou seja, o evento só foi adicionado para os elementos DOM que estavam no documento naquele momento, o que veio depois, não sofreu alteração.

Uma forma de resolver isso é executar novamente a chamada pro evento da seguinte forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

$(function () {
	$("#pagina1").click(function () {
		$("#conteudo").load("conteudos.html #conteudo1", function(){
			$("#link").unbind("click");
			$("#link").bind("click", function () {
				alert("Você clicou no link");
				return false;
			});
		});
		return false;
	});
	$("#pagina2").click(function () {
		$("#conteudo").load("conteudos.html #conteudo2", function(){
			$("#link").unbind("click");
			$("#link").bind("click", function () {
				alert("Você clicou no link");
				return false;
			});
		});
		return false;
	});
	$("#link").click(function () {
		alert("Você clicou no link");
		return false;
	});
 
});

Substituindo esse código no aplicacao.js resolveremos esse poblema, o que eu fiz foi setar uma função para ser executada depois que o ajax for concluído, ou seja, quando o nosso novo elemento esteja no DOM.

Eu usei unbind e depois bind para caso o link estivesse em outro lugar da pagina que não seja onde o ajax carregou o evento nao seja adicionado duas vezes, o que faria com que nossa função seja executada duas vezes resultando em 2 alerts.

Outra forma de resolver isso seria usando o plugin livequery, mas esse tutorial vou deixar para um próximo post.

Você pode ver um exemplo funcionando aqui.

Creative Commons são tipos de licenças idealizadas para permitir a padronização de declarações de vontade no tocante ao licenciamento e distribuição de conteúdos culturais em geral (textos, músicas, imagens, filmes e outros), de modo a facilitar seu compartilhamento e recombinação.

Ou seja, apartir do momento que eu disse que os artigos do meu blog são licenciados pela Creative Commons você pode copiar, distribuir, complementar ou executar as obras sobre algumas restrições. No caso do meu blog você pode fazer essas coisas desde que mantenha o crédito ao autor e que não seja para uso comercial.

O primeiro contato que tive com o Creative Commons foi em 2007, em um evento Open Source que participei em Curitiba. Eu achei uma ideia genial pois incentiva o compartilhamento e colaboração simultânea para a melhoria de uma obra, sem ficarmos presos nas limitações do copyright.

O vídeo abaixo explica melhor como funciona essa idéia…