Desenvolvedores Web costumam ter grandes problemas para debugar JavaScript. Enquanto programas como a extensão FireBug do Firefox fazem milagres para debugar, o programador ainda precisa colocar sucessivos alert()s para descobrir os valores que suas variáveis assumem em determinados pontos. Certo?

Errado!

Estava pesquisando agora a pouco algumas funções de js no MDC quando fiquei meio curioso com o modo como os exemplos de código eram mostrados e, em especial, de uma função print(). Como no fragmento a seguir:

var names = "Harry Trump ;Fred Barney; Helen Rigby ;";
print(names);
var re = /\s*;\s*/;
var nameList = names.split(re);
print(nameList);

Ora, bolas! Javascript não pode imprimir nada em stdout, então, como pode existir uma função print()?

Então que, pesquisando mais um pouquinho, cheguei ao SpiderMonkey Javascript Shell.

O SpiderMonkey é o mecanismo interpretador de Javascript do Gecko, escrito em C, e utilizado em vários produtos Mozilla, como o Firefox, por exemplo e a boa notícia é que ele provê também um Shell para executar js em linha de comando.

Com isso fica extremamente fácil criar e testar scripts para usar posteriormente. Veja o exemplo a seguir:

diovani@debian-websul:~$ js
js> var frase = 'Hello World!';
js> var tamanho = frase.length;
js> var teste = frase + ' tem ' + tamanho + ' caracteres.';
js> print(teste);
Hello World! tem 12 caracteres.
js>

Para instalar o SpiderMonkey JS Shell no Debian GNU/Linux basta executar o comando:

# aptitude update && aptitude install spidermonkey-bin

Após a instalação, basta executar em um terminal o comando $ js para entrar no Shell interativo:

Para entrar no shell interativo use o comando:
$ js

Para executar os scripts de um arquivo (foo.js) use:
$ js -f foo.js

Para executar os scripts de um arquivo (foo.js) e entrar no shell interativo (muito útil para carregar funções ou bibliotecas) em seguida use:
$ js -f foo.js -f -

Mas mesmo para outras distribuições, e até mesmo Windows, deve ser extremamente fácil instalá-lo. Veja o link abaixo para a Documentação do Javascript Shell e exemplos de uso:

Link: Introdução ao Shell Javascript

Se você gostou deste artigo, inscreva-se em meu RSS feed!

Após um bom tempo sem postar venho com uma recomendação.

Não faz muito tempo, em meu post sobre Delphi e Visual Studio como IDEs para PHP falei no Eclipse, agora venho fazer um resumo e recomendação sobre esta IDE.

O Eclipse é uma IDE produzida inicialmente para Java, mas que possui plugins para diversas outras linguagens, assim podendo ser usado para desenvolvimento em C/C++, Ruby, Python, e claro, PHP. Acontece que o Eclipse é, ao meu ver, a segunda melhor IDE para programação com PHP, perdendo apenas para o Zend Studio, porém, livre, mais leve, e até mesmo com mais recursos, isso porque você pode adicionar mais ferramentas para editar arquivos HTML, JS, SQL, e até fluxogramas e ferramentas gráficas.

Ademais ele conta com um excelente controle de projetos, ajuda de contexto (inclusive para classes definidas pelo usuário) e suporte a controle de versão com CVS ou SVN.

O Eclipse pode ser adquirido pelo website oficial ou em distribuições customizadas para diversas linguagens. Eu recomendo o EasyEclipse para PHP, que pode ser aquirido aqui. Lembrando que mesmo as distribuições podem ser customizadas para adicionar mais e mais recursos. Ele também pode ser instalado via ap-get no Debian ou Ubuntu, mas as distribuições customizadas parecem bem mais completas e funcionais.

Recomendado!

Se você gostou deste artigo, inscreva-se em meu RSS feed!

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

Se você gostou deste artigo, inscreva-se em meu RSS feed!

Uma ótima novidade para usuários Windows…

A JCX Software lançou recentemente uma extensão para usar o MS Visual Studio como uma IDE para PHP, trata-se do VS.Php.

Sempre achei, apesar de minha aversão a Microsoft, o Visual Studio uma ótima ferramenta de desenvolvimento, sendo muito fácil de usar e debugar programas, agora, com esta adição, PHP torna-se uma alternativa a ASP.NET para os desenvolvedores familiarizados com o Visual Studio.

Outra ótima novidade é o recente Delphi para PHP. Trata-se de um ambiente visual RAD para desenvolvimento Web com PHP, otimizado para PHP 5. Para exemplificar, imagine contruir formulários web, menus, e requisições do mesmo modo que criamos formulários em Delphi ou VB.net (ou usando Glade para interfaces GTK).

Reconheço que fiquei especialmente curioso e entusiasmado com o lançamento do Delphi para PHP, é uma pena que não tenho como testar a ferramenta pessoalmente (quem tiver a experiência comenta aqui, plz). Minha dúvida é se Delphi para PHP pode ser usado para criar aplicações Desktop com a API do Windows…

Para mais informações e Download/Aquisição visite as páginas abaixo:

VS.php
Delphi for PHP

Se você gostou deste artigo, inscreva-se em meu RSS feed!

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>

Se você gostou deste artigo, inscreva-se em meu RSS feed!

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.

Se você gostou deste artigo, inscreva-se em meu RSS feed!