“Contudo ela gira…”

Segundo um banner na fachada do McDonald’s do Batel, bairro referência aqui de Curitiba, a loja está fazendo 25 anos, ou seja, vem vendendo brinquedos, sonhos e artérias entupidas desde 1990. Fiz uma pesquisa rápida e o primeiro restaurante da rede no Brasil foi fundado em 1979, em Copacabana. Informação (inútil) que só a internet poderia me dar. Continuar lendo “Contudo ela gira…”

O que é podcast?

Este post foi escrito por uma questão de utilidade pública. Podcasts são tão legais e fazem tanto parte da minha vida que é meu dever espalhar a palavra e contar pra tudo mundo sobre eles.

Respondendo resumidamente à pergunta, podcasts são programas de rádio sob demanda.  Assim como o youtube permite assistir a vídeos quando você pode vê-los, diferente da TV que tem programação com horário fixo, assim é o podcast, só que em áudio. Continuar lendo O que é podcast?

Leitor digital (e-reader) x Livros de papel

Em 2007, quando se começou a falar em Kindle, confesso que torci o nariz. Pensava que era impossível ser confortável passar mais momentos olhando uma tela e que bom mesmo era sentir a textura da folha, o peso do livro e etc. Reações comuns de quem vê ameaçado algo que está muito bom do jeito que está. Um tempo depois quis voltar a ler quadrinhos e, como todo mundo lia no tablet e eu não tinha um, comprei na China um aparelho que servia pra isso. Não serviu – a memória baixa tornava lenta demais a dinâmica de navegar pelas imagens -, mas eu ia viajar, o livro que eu estava lendo era pesado e acabei colocando uma cópia digital dele no aparelho. Foi minha salvação. Eu me rendia às vantagens dos leitores eletrônicos. Continuar lendo Leitor digital (e-reader) x Livros de papel

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.

HTML e CSS para e-mails

A produção de html/css para e-mails não é nada trivial e a situação é ainda pior para quem já começou na vida de desenvolvimento para web mexendo com tableless. A tag <style>, por exemplo, não é suportada pelo gmail nem no <head> nem no <body>. Daí já dá pra perceber que o jeito é utilizar todos os estilos inline (usando o atributo “style” dentro de cada tag html).

Outro problema grave: o Outlook 2007 não suporta “float” nem “position” o que nos obriga a diagramar os elementos do jeito antigo, isto é, com tabelas. Outra restrição importante fica com o “background-image” que não é suportado nem pelo gmail nem pelo Outlook 2007, o que nos obriga a usar (argh!) o atributo “background” que não é mais utilizado para o desenvolvimento “normal”.

Resumo da ópera, para que a newsletter que o cliente pediu seja visualizada da forma certa você vai ter que:

  1. Diagramar o html com tabelas;
  2. Escrever todos os estilos em linha e
  3. Utilizar o atributo html (não é o css não hein!) “background”.

No campaign monitor tem uma lista (atualizada hoje por sinal) de todos os atributos suportados pelos diferentes clientes de e-mail, tanto desktop quanto web e mobile.

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.

Pathauto não funciona? Está faltando o módulo Transliteration

O título é bem auto-explicativo né? Se seu site/blog/portal está dando problema toda vez que você salva um node sem desmarcar a opção de gerar “automatic alias” é pode ser porque está faltando o módulo Transliteration. E tenho dito.

ps.: Vale a pena conferir se o problema não é no arquivo i18n-ascii.txt.

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!