Extreme Programming

Tags: , — September 18, 2007 @ 5:02 pm

Na última sexta-feira meu professor de DSI (Desenvolvimento em Sistemas de Informação) apresentou uma nova abordagem em desenvolvimento de software com a aula mais dinâmica que já tive. Trata-se da Extreme Programming (XP) .

Esta é uma nova metodologia de desenvolvimento de software (com cerca de 8 anos), voltada a interatividade com o cliente, ao trabalho em grupo e a dinâmica. Recomendada para desenvolvimento de softwares com requisitos vagos e que necessitem de constantes mudanças.

É baseada nas seguintes regras e práticas:

  • Planejamento
    • Problemas do usuário
      • São escritos pelos clientes especificando o que o sistema deve fazer por eles;
      • Estes Problemas assemelham-se ao uso de cenários, mas não limitados a descrever uma interface e são expressados em cerca de três sentenças escritas pelo cliente;
    • Plano de Lançamento
      • Após os Problemas serem escritos, encontros são realizados para para criar o Plano de Lançamento;
      • Este Plano de Lançamento especifica que cartões serão implementados para cada lançamento e as datas destes lançamentos;
    • Lançamentos Periódicos
      • O Time de desenvolvimento deve liberar pequenas versões interativas aos clientes periodicamente;
      • No próximo encontro os clientes expõe suas opiniões e satisfações sobre o projeto (Teste de Aceitação), o que permite ao time melhorar este de acordo com as necessidades do cliente;
    • Velocidade do Projeto
      • A Velocidade do Projeto é medida conforme quanto trabalho é realizado no projeto;
      • Para medí-la, simplesmente adicione as estimativas de cada Problema resolvido durante a iteração;
    • O projeto é dividido em Iterações
      • Desenvolvimento iterativo adiciona agilidade ao processo de desenvolvimento;
      • Divida o projeto em cerca de uma dúzia de iterações com uma a três semanas de duração;
      • Mantenha essa duração constante durante o projeto, é esta constante que torna a medida de progresso e o planejamento simples e confiável na XP;
    • Plano de Iteração
      • Uma reunião é feita no início de cada Iteração para criar o plano daquela Iteração, os trabalhos de programação a serem realizados;
      • Problemas são escolhidos pelo cliente para esta Iteração, a partir do Plano de Lançamento, na ordem do mais importante para cliente primeiro;
      • O total de problemas é estimado de acordo com a velocidade do Projeto da última Iteração;
      • Testes de Aceitação falhos e que precisem de reparos também são selecionados;
      • Estes Problemas do Cliente e Testes de Aceitação são divididos em tarefas e anotados em Cartões;
      • Enquanto os Problemas são descritos na linguagem do Cliente, os Cartões são escritos na Linguagem doProgramador;
      • Programadores responsabilizam-se por estes Cartões e estimam quanto tempo suas tarefas levarão para serem completadas (geralmente 1 a 3 dias);
    • Mude os Papéis
      • Os papéis de cada membro do time de programação devem ser trocados constantemente para evitar desperdício de conhecimento e “codificação viciada” destes;
      • Se apenas um membro é capaz de trabalhar em certa área, será um problema se esta pessoa sair do projeto ou você pode acabar com acumulo de tarefas para este;
    • Reuniões em pé
      • Uma reunião em pé é realizada diariamente;
      • Comunicação entre o time de projeto é a intenção desta reunião;
      • O conhecimento de cada um é dispersado e compartilhado, assim como uma visão geral do andamento do projeto;
      • Reuniões em pé tentem a ser rápidas e dinâmicas, e impede que o time distraia-se com futilidades;
    • “Conserte a XP quando ela quebrar”
      • Nào dizemos ’se’ porque obviamente serão necessárias modificações e adaptações para cada projeto;
      • Não exite em descartar as opções que não funcionarem e adicionar novas.

Estas são as práticas da fase de planejamento, não pretendo me extender aqui a ponto de descrever todas as fases, mas vou ressaltar alguns outros pontos importantes:

  • Simplicidade
    • Um projeto simples leva menos tempo para ser desenvolvido que um complexo;
    • Sempre faça o mais simples possível que funcione;
  • O Cliente está sempre disponível
    • Um dos principais requerimentos das Programação XP é comunicação constante com o cliente, preferencialmente face a face;
    • Não apenas para ajudar a equipe de projeto, mas sim como parte da própria equipe;
  • Programação em duplas
    • Toda a programação a ser incluída no projeto deve ser realizada por duas pessoas trabalhando juntas no mesmo computador;
    • Programação em duplas aumenta a qualidade do software sem impacto no prazo de entrega.

É notavel na programação XP que suas práticas são voltadas muito mais para a programação do que para a documentação e planejamento do projeto. Isto pode causar um grande impacto sobre os tabus de que a documentação é até mais importantes que a programação em si. Obviamente a documentação não deve ser descartada, mas também pode ser realizada dinamicamente durante os encontros/reuniões, desde anotações simples até gravação das sessões.

O suporte também não fica prejudicado pela falta de documentação apropriada. Uma vez que o conhecimento sobre o projeto é difundido sobre a equipe, fica relativamente fácil realizar modificações e aprimoramentos.

A imagem a baixo é um diagrama interativo da metodologia de programação XP. Hospedado em http://www.extremeprogramming.org/, que também foi minha maior fonte para este artigo. Leitura recomendada…

Fontes: http://www.extremeprogramming.org, http://en.wikipedia.org/wiki/Extreme_programming, http://pt.wikipedia.org/wiki/Extreme_programming

Ajuda de Contexto com CSS

Tags: , , — August 13, 2007 @ 1:52 pm

Quando construímos sistemas ou administração de sites é muito útil adicionar ajuda de contexto em alguns items (ao passar o mouse sobre um item um pequeno texto explicativo é exibido), mais ou menos assim:

Link com ajudaA ajuda de contexto vai aqui,
aparecendo somente quando o
usuário passa o mouse sobre o link

Existem várias bibliotecas JavaScript para utilizar este efeito, como a Overlib e também script.aculo.us, que tem um efeito parecido. Utilizando Js você tem efeitos mais interessantes, com a ajuda seguindo o mouse, etc, mas se precisar apenas de uma ajuda de contexto simples e leve, podemos fazê-lo apenas com CSS.

O conteito é bem simples…
Crie uma âncora <a>, com um span <span> dentro dela, que não é exibido (display:none), no estado Hover da âncora, o <span> terá ‘display:block’.

Como “um código vale mais que mil palavras”, aqui vai um exemplo:

/* Este é o estilo da âncora e span para o efeito */
 
a.help
{
    text-decoration:underline;
} 
 
a.help span
{
    position:absolute; /* para não alterar o
                         posicionamento da ancora */
    display:none;
} 
 
a.help:hover
{
    background-color:black; /* devido a um bug
                         no ie6 você deve alterar o
                         fundo (na verdade pode usar
                         a mesma cor, mas deve declará-la
                         aqui) do link ao passar o
                         mouse (???),
                         caso contrário o <span> não
                         aparecerá no ie6 */
} 
 
a.help:hover span
{
    display:block; /* por último, o <span>,
                        dentro do </span></span>,
                        fica com 'display:block' ao
                        passar do mouse */
 
     /* os demais estilos deste elemento não são
    necessários, apenas para melhorar o visual
    e você pode alterá-los a vontade*/
    margin-top: 0px;
    margin-left: 10px;
    border:1px solid white;
    background-color:#ffa303;
    color:white;
    text-decoration:none;
    font-size:12px;
}

Após definir o estilo, o código HTML para usá-lo é ainda mais simples:

<a href="#" class="help">
    Link com ajuda
    <span>
        A ajuda de contexto vai aqui,
 
        aparecendo somente quando o
 
        usuário passa o mouse sobre o link
    </span>
</a>

Highslide no Wordpress

Tags: , , , , , , , — August 6, 2007 @ 11:02 am

O highslide é um visualizador de miniaturas feito em JavaScript. Ele exibe as imagens em pop-ups sobre sua página (em html, nao novas janelas), podendo ser movidos ou abertos em sequencia. O efeito visual é melhor que qualquer visualizador de imagens já visto, mesmo em sistemas operacionais. Veja minhas imagens e screenshots para ter uma idéia. Vou mostrar aqui como intalar o plugin para Wordpress e como adicionar automaticamente o highslide a TODAS as imagens do blog, sem precisar editar os posts antigos.

O visualizador de miniaturas Highslide é free para uso não-comercial, e custa $29, dólares para cada domínio deu8m website comercial, então, caso você possua um blog comercial (?) você deverá pagar pelo Highslide.js. Veja a licença.

Primeiramente, baixe e instale o plugin wp-highslide (descompacte-o dentro de uma pasta ‘highslide’ em wp-content/plugins/) e também baixe a biblioteca highslide (copie apenas o arquivo highslide.js para dentro de wp-content/plugins/highslide). Após isso vá em ‘Plugins’ (ou ‘Extenções’, em português), na administração de seu blog e ative o wp-highslide. Com isso você terá o plugins instalado, podendo usar a tag <highslide></highslide> para adicionar miniaturas usando a biblioteca, o que é um saco. Então, para facilitar as coisas, vá em ‘Opções’ e clique em ‘wp-highslide’, ajuste as opções como deseja e em ‘JAVASCRIPT settings’ adicione o seguinte:

Caso seu tema não utilize ‘prototype‘ (um framework JavaScript), adicione no início do textarea o seguinte código:

<script>
src="http://prototypejs.org/assets/2007/6/20/prototype.js"
 type="text/javascript"></script>

E abaixo da linha: ‘hs.preloadImages();’

var elements = $A(document.getElementsByTagName('a'));
elements.each
(
    function(element)
    {
        if(element.href.endsWith('jpg')
            || element.href.endsWith('png')
            || element.href.endsWith('gif'))
        {
            element.className = 'highslide';
 
            Event.observe
            (
                element,
                'click',
                function(event)
                {
                    Event.stop(event);
                    var element = Event.element(event);
                    return hs.expand(this);
                }
            );
        }
    }
)

Isso vai adicionar automaticamente o Highslide a todos os links para imagens da página, inclusive dos posts antigos.

Funções com número variável de argumentos

Tags: , — July 11, 2007 @ 6:25 pm

Quando você não sabe quantos parâmetros uma função deverá receber, pode utilizar uma função com número indefinido de parâmetros (geralmente documentadas como function name ([param [, param [, ...]]])).

Para isto o PHP4 (e posteriores) possui três funções específicas, que obtém o número e quantidade de parâmetros enviados a função, func_num_args(), func_get_arg() e func_get_args(). Estas funções devem utilizadas dentro de sua função. Veja o código a seguir:

/*diz olá a todos os nome enviados
 */
function sayHelloToAll ()
{
    $numArgs = func_num_args();
    $argList = func_get_args ();
    for ($i = 0; $i &lt; $numArgs; $i++)
    {
        echo "Hello {$argList[$i]}n";
    }
}
//imprime:
//'Hello Paulo'
//'Hello Diovani'
//'Hello SamuraiDio'
sayHelloToAll ('Paulo', 'Diovani', 'SamuraiDio');

Você poderá usar um foreach() para navegar entre os parâmetros obtidos em $argList, mas não é recomendável, visto que gerará um erro caso não seja passado nenhum parâmetro a função (a menos que você inicialize a variável previamente).

Caso precise declarar uma função que receba ou não apenas dois ou três parâmetros, no máximo, seria preferível utilizar uma função com argumentos não obrigatórios (post anterior), pois será mais seguro, e você poderá prever melhor o resultado de seu sistema.

<<< Previous Page - Next Page >>>