Post novo no felipeelia.com.br

Depois de muito tempo fiz meu primeiro post sobre desenvolvimento web no felipeelia.com.br, com algumas dicas para migração de uma solução drupal em um servidor de produção na Locaweb. Tem também uma dica boa pra quem está tendo problemas com o cron, vale a pena dar uma olhada.

Fiquem tranquilos que só vou avisar que postei lá essa vez. 😉 Assinem o rss de lá que vocês ficam sabendo quando tem coisa nova. Aos pouquinhos vou arrumando aquela casa lá e o Melancia vai se livrando do meu lado profissional…

Abraços!

Práticas PHP para um melhor projeto

Muitos profissionais (não só de PHP) acham que só desenvolver basta, é aquela velha e conhecida história “Tá funcionando ? Então tá mais do que bom!”. Acontece que agora é necessário inserir uma nova funcionalidade no seu projeto. E novamente funcionou então tá mais do que bom, até que surge também  o bom e velho BUG o terror de todos os programadores e você se vê em um labirinto que parece não ter saída, e para piorar não é daqueles erros camaradas que indica a linha e o arquivo que originam o erro.

Parece bizarra a história descrita acima, porém ela é muito comum. Que programador nunca passou por isso? E muitas vezes a culpa não é somente dele. Contudo existem formas para minimizar esses acontecimentos, vamos algumas dicas simples:

  • Prefira sempre desenvolver MVC: Isso torna o seu código mais organizado e fácil de manter, imagine que você tem um cadastro de usuários e algo está saindo errado, opa eu sei onde é o problema só pode estar relacionado ao userController (e eu sequer sou vidente).
  • Orientação a Objetos: Se for possível utilize OO (caso não seja pelo menos desenvolva seu código o mais modular possível), dê preferência a composição ao invés de heranças e utilize cuidadosamente os padrões de projeto.
  • Documente seu código: Muitas pessoas dizem que isso é chato, mas acredite: pode ser muito útil não só a você mas à sua equipe também. Tente lembrar o que uma classe ou função faz passados 3 meses sem mexer no código e você entenderá do que estou falando.
  • Faça testes de unidade: Teste de unidades são simples de fazer e executar, melhor de tudo isso é o fato deles prevenirem bugs, inclusive desses que relatei logo no início que não são bugs de sintaxe e sim de regras de negócio.
  • Mantenha um padrão desenvolvimento: Isso é ótimo quando se está trabalhando em equipe. Todos saberão de que se tratam as pastas, arquivos. Tornando ainda mais fácil a identificação de um possível problema.

Essas dicas podem até não eliminar todos os problemas enfrentados em um dia-a-dia do desenvolvimento, porém reduz o número de bugs consideravelmente e também facilita a localização de possíveis bugs.

Bom, sei que o texto não ficou lá muito técnico, o assunto é extenso requer muitos detalhes. Eu quero agradecer ao amigo por me ceder esse espaço, forte abraço a todos.

Mapa do Brasil vetorial – Link pra página de cada estado

Por favor, LEIA o post antes de enviar perguntas. O actionscript abaixo deve ser COPIADO E COLADO no fla.

Agora é possível adquirir o pacote com o swf (já com o actionscript no seu devido lugar), o fla e um pequeno manual de utilização do mapa do Brasil vetorial em flash no meu site. Tá mais barato que um lanche no McDonald’s!

O Victor Costa do Design Labs postou há algum tempo o Mapa do Brasil vetorial (link direto pro arquivo) que tivemos que desenvolver para um dos nossos trabalhos, o Site do IEL (veja funcionando nesta página).

Para usar o flash com as mesmas cores, só trocando os links, você pode copiar o swf e mudar as urls na chamada ao <object> no html – veja o segundo trecho de código deste post para entender melhor. O fla aberto está disponível no post do Victor.

Na versão final incluímos ainda um textfield que exibe a sigla do estado em que o usuário está passando o mouse. Você pode baixar a versão disponível no Design Labs, copiar e colar o código. Segue abaixo o actionscript que inserimos no fla:

this.createTextField("siglaEstado",10,230,10,100,25);
var my_fmt:TextFormat = new TextFormat();
my_fmt.color = 0x20428E;
my_fmt.font = "Verdana";
my_fmt.size = 18;
my_fmt.bold = true;
my_fmt.italic = true;
var siglaEstado:TextField;
siglaEstado.antiAliasType = "normal";
siglaEstado.setNewTextFormat(my_fmt);
function selecaoestados (estado:MovieClip) {
    estado._alpha = 0;
    estado.onRollOver = function () {
        for (var i:Number = 0; i < _level0.siglas.length; i++) {
            if (eval(siglas[i]+'mv') != estado) {
                eval(siglas[i]+'mv')._alpha = 0;
            }
        }
        siglaEstado.text = estado._name.substr(0, 2);
        onEnterFrame = function () {
            estado._alpha += 10;
            if (estado._alpha > 100) {
                onEnterFrame = function(){ null};
            }
        }
    }
    
    estado.onRollOut = function () {
        siglaEstado.text = '';
        onEnterFrame = function () {
            estado._alpha -= 10;
            if (estado._alpha < 0) {
                onEnterFrame = function(){ null};
            }    
        }
    }
    estado.onRelease = function (): Void{
        getURL(eval(estado._name.substr(0, 2)));
    }
}
//chamada função
var siglas:Array = ['AC', 'AL', 'AP', 'AM', 'BA', 'CE', 'DF', 'GO', 'ES', 'MA', 'MT', 'MS', 'MG', 'PA', 'PB', 'PR', 'PE', 'PI', 'RJ', 'RN', 'RS', 'RO', 'RR', 'SP', 'SC', 'SE', 'TO'];
for (var i:Number = 0; i < siglas.length; i++) {
    selecaoestados(eval(siglas[i]+'mv'));
}

E aqui a chamada para o swf:

<!--[if !IE]> -->
    <object type="application/x-shockwave-flash" data="endereco/para/o/flash/Mapa.swf" width="280" height="280">
<!-- <![endif]-->
<!--[if IE]>
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="280" height="280">
         <param name="movie" value="endereco/para/o/flash/Mapa.swf" />
<!--><!---->
          <param name="wmode" value="transparent" />
         <param name="FlashVars" value="AC=paginaAC.html&amp;AL=paginaAL.html&amp;AP=etc..."/>
         <p>Atualize seu navegador para visualizar corretamente o mapa.</p>
    </object>
<!-- <![endif]-->

Qualquer dúvida que ainda não esteja esclarecida no post você pode falar comigo pela página de contato, pelos comentários ou pelo twitter. Abraços a todos!

Estudo do layout gera CSS enxuto e bem feito

Muitas são as formas de começar o desenvolvimento do CSS de um site. Alguns vão fazendo junto com o (X)HTML e outros só depois dele pronto. Este artigo é um complemento à essas abordagens. Aqui você vai entender que é possível adiantar boa parte do CSS antes mesmo do HTML estar pronto.

Com os layouts em mãos você deve identificar tudo o que há de igual. Não tenha medo de perder muito tempo nesta parte, porque perdendo muito tempo aqui você economizará codificando. Existe sempre uma box com títulos na mesma fonte, com mesmo bullet? Os títulos das páginas são iguais? Qual é a fonte predominante do site? Bons designers pensam em layouts estruturados e cabe a você identificar esta estrutura, sendo ideal contar com a colaboração do próprio designer.

Os métodos e os passos podem variar, mas um caminho geral é o seguinte:

  1. Identificar o que é padrão ou pelo menos mais usado no site todo. Fonte predominante (font-family, font-size, color, etc.) podem ser atribuídos já ao body, poupando o trabalho de declarar tudo novamente pra cada elemento filho. É hora de averiguar se um elemento, por exemplo, a maioria dos links do site, também segue um padrão . Especificidades são facilmente sobrescritas, portanto pode ficar tranquilo.
  2. Identificar as áreas do site. Se, por exemplo, o site tem um cabeçalho, uma lateral esquerda e uma região de conteúdo faça o mesmo exercício do passo anterior pra cada uma delas.
  3. Elementos mais isolados. Se existe um certo tipo de box usado em várias áreas diferentes, mas que sempre segue um mesmo padrão é hora de identificá-lo. Veja também cada elemento da box, como título, listas, parágrafos, formulários, etc.
  4. Desempate. Se um elemento é usado de uma forma em duas das três áreas do site esse é o padrão. A forma como ele é usado na terceira área é exceção e, portanto, deve ser declarada separadamente.
  5. Igualdades. Se elemenos diferentes usam o mesmo estilo use vírgulas e declare os formatos uma vez só. Use declarações separadas só para as diferenças.

No primeiro momento é mais proveitoso nem declarar os atributos. Vá colocando no css apenas as chamadas. Exemplo:body {}
a {}
a:hover {}
div#header {}
div#header a {}
div#sidebar-left {}
div#sidebar-left a {}
div#sidebar-left p {}
div#sidebar-left form {}
div.box {}
div.box h2 {}
div.box p {}

Repare que neste momento você já decidiu alguns ids e classes, de acordo com o levantamento feito anteriormente. Na hora de montar o (x)html é só usar os ids e classes certas nos lugares pré-estabelecidos.

Fazendo o css desta forma, do mais abrangente ao mais específico (enfim, do jeito certo), você ganha em manutenção, em velocidade de codificação e em tamanho de arquivo.

O Internet Explorer 8 vai dar certo

Manter o pé no chão é preciso. Infelizmente muita gente não sabe nem o que é navegador, nem browser, e entrar na internet para alguns é clicar duas vezes naquele “ezinho” na área de trabalho. Pra esses a discussão sobre o fim do Internet Explorer 6 simplesmente inexiste. Eles nem Internet Explorer sabem o que é.

Browser e Bowser
Não confunda Browser com Bowser. O IE às vezes é inimigo, mas você não é o Super Mario.

Acho legal a discussão toda pra acabar com o navegador maldito, mas de vez em quando fica tudo muito mv-brasil. Eu uso o firefox como meu navegador padrão, mas conheço muita gente que nem sabe que ele existe. Conheço inclusive ferramentas que – pasmem! – só funcionam no IE.

Tenho uma tese que não vejo ninguém espalhando por aí (deve estar errada), mas publico-a aqui: o IE 7 só não ficou mais popular por que não era possível instalá-lo nos Windows piratas. Isso mesmo. No começo, pra quem não lembra, o IE 7 só podia ser instalado nos Windows originais. Depois a Microsoft colocou a mão na consciência e deixou os usuários piratas, maioria aqui no Brasil, instalarem o novo navegador, mas aí era tarde. Quem tinha tentado e não tinha conseguido simplesmente desistiu. Ficaram com medo da estrela da morte.

Então veio o Internet Explorer 8, que segundo a IDG Now, vai ser disponibilizado pelo Windows Update. Tudo bem, vai ter telinha perguntando se é isso mesmo, se o camarada quer instalar de verdade, mas o usuário não sabe nem o que está acontecendo. Vai na teoria do “Next > Next > Finish” que a Microsoft tanto propagou e vai dar certo. E se der certo mesmo é menos um com o IE 6.

Apesar de tirar só 20/100 no Acid 3 o Internet Explorer 8 está bem melhor. Não é meu navegador padrão, mas ficou assim… decente.

ps.: Atualizei as páginas Porque “Melancia na Cabeça” e Quem é o Elia, vocês viram? Terça-feira tem mais post, [silvio santos]não percaaammm[/silvio santos].

“Criar site” não é certeza de retorno – a não ser que seja feito certo

Outro dia o Victor Costa me mostrou uma ferramenta que eu até então desconhecia (é, ando meio desinformado mesmo) – a ferramenta de palavras-chave do Google AdWords.

Fiz um teste simples pesquisando por site e os termos relacionados com maior procura são site gratis (sem acento mesmo) e criar site. Nada muito assustador, mas as pessoas que procuram por isso merecem algumas explicações. A idéia de criar um site pode ser tida como a salvação da lavoura por alguns empresários com pouca experiência do que é a internet, mas a gente sabe que não é bem assim. O dinheiro investido pode não ter o retorno esperado, o que pode ser bastante frustrante e gerar uma confusão desnecessária na cabeça do contratante que achou que o desenvolvedor era algum pajé milagreiro.

Ao aparecer a idéia de criar um site você precisa resolver o porquê do site. O que você espera ao lançar o site? A internet é o melhor lugar para divulgar o seu conteúdo? Você está ciente que nada acontece de uma hora pra outra?

Resolvido isso é preciso pensar o que colocar no site. Ninguém quer navegar num emaranhado de conteúdo inútil. A história da sua empresa é importante, mas é uma coisa que o usuário vai ler no máximo uma vez. É preciso ter alguma coisa no seu site que seja atualizada com freqüência para que o usuário, ao retornar, veja algo novo e se interesse a voltar novamente depois.

Um caminho a seguir é pensar que o usuário muitas vezes entra no site para procurar o que ele perguntaria pelo telefone como preços, localização, formas de pagamento e se tem estacionamento. Também é possível colocar coisas que não seriam possíveis de informar com exatidão pelo telefone, como fotos da fachada do lugar (ajuda na localização e a sua secretária não informaria ao cliente “Olha, a nossa fachada é verde, tem uns vidrinhos, um coqueiro…”), em uma casa noturna, por exemplo, é possível ver a roupa que os freqüentadores usam, qual é o tamanho do lugar, qual é o tipo de música, se faz aniversários, etc.

Então se você digita criar site no Google querendo milagres não se iluda – me chame.

PNG no IE 6 – Entenda como o problema é resolvido

ATENÇÃO: Para verificar a renderização do png no IE 6 use o próprio Internet Explorer 6 e não o Multiple IE (que por sinal não recomendo pra mais ninguém). Se não tiver acesso a um computador com esse browser é possível testar através do uso de uma máquina virtual.

O formato de arquivos PNG surgiu para substituir o limitado formato GIF, diferindo deste no suporte a canal alfa, no maior número de cores e na alta compressão possível. Por outro lado o Internet Explorer 6, navegador xing-ling ainda muito usado, não dá suporte nativo à transparência do PNG, mas é possível contornar esse problema com uma propriedade CSS.

Não vou publicar nenhuma solução aqui, mas explicar como todas elas funcionam (sim, elas funcionam da mesma forma). Para que a imagem fique transparente você deve sumir com a imagem em si e exibi-la somente com a propriedade filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<caminho_da_imagem>', sizingMethod='image');.

Você pode fazer isso com javascript, com comentários condicionais, com a propriedade CSS behavior ou com uma combinação de todas elas. Aqui no Melancia a logo do cabeçalho é um png e para que ela ficasse do jeito que está usei uma combinação de comentários condicionais e CSS. A imagem está dentro de um span que só existe nos IE < 7, por causa dos comentários condicionais – veja o código-fonte para entender melhor – e nesses navegadores (argh!) a imagem de dentro não é renderizada (display:none) e o span assume sua função.

Para uma solução mais genérica o uso do javascript é mais recomendado, até porque não afeta tanto a acessibilidade. E quer saber do que mais: está mais do que na hora do IE6 começar a sumir.

Para uma solução copy/paste esse site parece muito bom. A do behavior desse site é bem legal também.

Agradeço ao meu grande amigo/irmão Israel Teixeira pela sugestão de tema!

Diminuir taxa de rejeição com conteúdo relacionado no Drupal

A taxa de rejeição de um site é a porcentagem de visitas a uma única página. O usuário entra e simplesmente vai embora. Parece sinal de que seu conteúdo é fraco? Nem sempre.

Para manter o usuário navegando no seu site é preciso mostrar pra ele caminhos que ele possa seguir e mostrar caminhos na web é exibir links. Não pode ser qualquer link, mas links que aquele usuário se interessaria em visitar, ou seja, conteúdos relacionados ao que ele está visualizando.

No drupal existe um módulo que se encarrega de mostrar os conteúdos relacionados usando como referência as tags que você mesmo atribuiu: o Similar Terms. É só instalá-lo e colocar seu bloco no lugar e está feito.

No caso do Melancia na Cabeça foi diferente, o bloco não ficou legal então resolvi editando o node.tpl.php. Inseri um código assim:
<?php if (!$teaser):        
$conteudo_relacionado = similarterms_block('view');
if ($conteudo_relacionado['content']) {
print '<div class="similar-terms"><h3>Veja também:</h3>'.$conteudo_relacionado['content']."</div>";
}
endif; ?>

E o resultado você vê em qualquer um dos posts.

Quanto cobrar em um freelance?

Quem nunca ficou em dúvida sobre quanto cobrar por um trabalho que atire a primeira pedra. O medo de dar um preço absurdamente alto ou absurdamente baixo é muito comum.

O Michel Lent do ViuIsso fez um artigo excelente sobre o assunto no WebInsider e depois de ler o que ele escreveu você não vai precisar ler mais nada sobre o assunto.

Basicamente a fórmula é: preço da sua hora * quantidade de horas previstas. Ficou caro? Não desista, você pode propor para o cliente uma redução de funcionalidades no projeto e assim o preço diminui sem onerar ninguém.

Você tem que aprender uma linguagem nova e não é Python, nem Ruby

Gerentês: quanto mais você souber melhor.

As pessoas tem ao redor de si uma bolha imaginária formada pelo jeito de falar, gestos característicos e gostos de cada uma delas. Para nos comunicarmos melhor com uma pessoa podemos usar técnicas de mimetismo onde nos expressamos do mesmo jeito que nosso interlocutor, usando as mesmas palavras, mesma intonação, mesma posição corporal e aos poucos vamos enviando sinais para, se necessário, mudar o comportamento do outro.

Lidar com pessoas completamente diferentes é desafio para todos os profissionais, mas se você conhecer “o jargão” dos profissionais de cada área o caminho fica menos pior e com certeza um caminho que você quer que seja limpo, largo e curto é a comunicação com o seu gerente. Outra certeza é a de que seu gerente fala um idioma um pouco diferente dos demais: o “gerentês”.

Dominar expressões como briefing, prospect, força tarefa e workaround é essencial para uma boa comunicação com seu gerente. Por outro lado usar linguagem técnica demais (nerdês) com quem não conhece não é um bom negócio: a pessoa fica confusa, por vezes fica envergonhada de não saber o que você está falando e a comunicação vai pro espaço.

Na próxima vez que for conversar com seu gerente pense nisso: Em Roma, como os romanos.