Planeta Visie

DGmike: Aprendendo com o técnico: quanto cobrar em um projeto web

Mon, 15 Mar 2010 17:00:09 +0000

Antes de começar este post gostaria de contar uma história que ouvi em algum lugar que não me lembro mais (provavelmente li na internet numa busca qualquer).

Quanto um técnico ganha? Quanto você ganha? Pense nisso.

O sujeito comprou um equipamento caríssimo, que iria agilizar a produção em sua fábrica.

Após 1 mês de uso, o equipamento parou de funcionar.

Chamou todos os seus engenheiros, e nenhum deles conseguiu detectar o problema.

Desesperado, resolveu chamar um técnico de fora da empresa.

O técnico, examinando o equipamento, descobre o problema: um parafuso solto.

Apertou o parafuso, ligou a máquina e esta voltou a funcionar normalmente.

Apresentou a conta de Dez mil dólares.

O dono da empresa ficou espantado, alegou que não tinha como justificar esse preço absurdo, mas mesmo assim resolveu pagar, mediante descrição do serviço na nota fiscal.

O técnico então apresentou a nota fiscal com a seguinte descrição do serviço prestado:

Visita técnica: valor – cortesia

Apertar parafuso: US$ 10,00

Saber qual parafuso apertar: US$ 9.990,00

Recentemente meu apartamento tem passado por modificações, pintura, armário embutido, televisão acoplada e você sabe que quando tem mudança muitas coisas acabam quebrando. Bem, a hélice do meu ventilador de parede quebrou e eu tive que chamar a assistência técnica para arrumar outra hélice e colocá-la no lugar.

Como no meio do caminho estávamos pintando o quarto, decidi pedir para o técnico que veio em casa para colocar a hélice para passar o fio da tomada para o ventilador – menos de um metro, e fazer a instalação (passar o fio por dentro do tubo do ventilador. Não precisava nem fazer instalação elétrica, o ventilador já estava instalado, bastava apertar os parafusos na parede e passar o fio. Eis que ele me solta: “O custo desse serviço é de R$ 50,00 e eu precisarei voltar aqui outro dia para fazê-lo.” Claro que ele não falou com essas palavras, mas o resumo é esse. Respirei fundo e falei: “Não, ok! Pode deixar que eu faço.”

Bem, isso me fez refletir muito sobre o meu trabalho. E a pergunta inicial é “quanto devo cobrar sobre o meu trabalho“. Procurei, pesquisei, me informei com pessoas mais experientes e descobri o seguinte: não existe formula certa para o cálculo. Conversei com algumas pessoas e cheguei a um consenso de como fazer um orçamento sem ter prejuízos e o cliente ainda sair satisfeito pagando um valor justo.

Imagine a seguinte situação: A vizinha – dona de um restaurante, pergunta para você: “quanto custa fazer um site?” (isto já me aconteceu algumas vezes) e a pessoa não espera que você diga, “Passa na minha empresa depois para tomarmos um café e analisarmos sua situação, talvez cheguemos a um consenso comum em que você e eu sairemos satisfeitos com a proposta.” Muitas pessoas que recebem esse tipo de pergunta nem tem empresa para poder dar essa resposta – apesar de parecer a resposta mais sensata, então acabam soltando um numero aleatório qualquer, “sei lá… mil reais”. É aí que está a falha, você não sabe quanto trabalho vai levar, então quanto você deve cobrar? O que acontece é que depois de fechado o trabalho você se vê na condição de fazer tudo o que o cliente deseja: barba, cabelo e bigode. Tudo pelo preço já embutido. Oras, um site é um site, né?

Bom, não é uma fórmula nem a pura verdade. Cada um faz seus orçamentos como achar melhor, mas da forma como vou explicar talvez ajude você a não entrar em enrascadas ou a … Por incrível que pareça e mesmo parecendo chato, peça um tempo para orçar qualquer que seja o projeto. Analise o que será feito, o que deve ser implementado e comece a somar. Somar horas.

Encontre a solução que o cliente precisa e faça um projeto e leve menos de um dia para fazer isso, afinal você ainda não está sendo pago para trabalhar e mantenha uma boa aparência para o cliente, aparente ser ágil assim ele começa a pegar confiança em você. E estime por alto quanto você pode demorar a cada tarefa. Imaginemos a seguinte situação:

Quero implementar PagSeguro em minha loja. Minha loja só vende três produtos e não pretendo vender mais do que isso tão cedo.

Ok, uma implementação dessas não precisa de integração com o retorno automático nem implementação com uma linguagem server-side, podemos usar o PagSeguro com carrinho PagSeguro sem problemas. Quanto tempo para implementar? Um design de um botão, html simples para três produtos, jogar no ftp: trinta minutos. Coloquemos um nível de dificuldade que pode-se encontrar como o cliente não gostou do botão, o ftp que o cliente passou não funciona, mapear a URL de onde fica o botão, problemas de conexão… esta tarefa na verdade pode gerar um trabalho de uma hora. Então é isso, o trabalho terá o custo de uma hora.

Com as horas contadas, verifiquemos o valor que você deve cobrar, um valor justo, em cima do tempo que você vai gastar e não um chute de quanto você acha que o projeto inteiro leva.

Para gerar o valor de cada hora, precisamos saber, quanto você pretende ganhar em um mês? Digamos, R$ 5.000,00. Em um mês existem 26 dias úteis (30 menos 4 sábados menos 4 domingos) e cada dia possui 8 horas úteis o que totaliza em 208 horas. Peguemos esse valor de R$ 5.000,00 e dividimos pelos 208 horas, total de R$ 24,00.

Achamos um valor médio de trabalho, mas isso não é o valor ideal, ainda. Você não consegue pegar clientes todos os meses, existem meses em que você passa fome sem cliente algum, então você deve fazer uma média de tempo de vacas magras, digamos adicionar 10% no valor de cada hora. Também precisa adicionar os gastos que você terá durante o projeto, gastos que muitas vezes você não percebe que está tendo como por exemplo, energia elétrica ou desgaste de máquina, mais 10% dá conta do recado. E ainda temos o fato que você precisar de uma emergência como o fato de você adoecer e precisar contratar alguém para terminar o projeto no seu lugar, 20% deve resolver. Logo, os R$ 24,00 por hora ganham 50% de juros e temos o valor final de R$ 36,00 a cada hora de trabalho.

Imaginemos que você leve 4 dias para fazer aquele site da vizinha e você cobrou um valor de R$ 1.000,00 na lata. Para cada dia você trabalhou o equivalente a dez horas para conseguir manter o prazo, então você levou na verdade 40 horas de trabalho. Na ponta do lápis, você gastou R$ 1.440,00 e ganhou R$ 1.000,00 então você tomou um prejuízo de R$ 440,00. Quase 50% do projeto. Se você tivesse adoecido ou tivesse tido problemas com a familia você não conseguiria bancar as despesas e você ganhou apenas o que trabalhou, sem lucro algum. Isso quer dizer que você trabalhou de graça e não poderá tomar um sorvete por isso.

Na faculdade eu aprendi a ter ódio por “sobrinhos” porque eles cobravam o valor muito abaixo do que um projeto pode ter, por exemplo, minha vizinha conseguiu fazer um site para ela no valor de R$ 300,00. Impossível competir com meu valor de quase R$ 1.500,00. A diferença é estupidamente alta. Mas (!) mesmo não gostando desses pré-profissionais, depois que terminei a faculdade acabei cobrando o valor de um sobrinho para muitos projetos e em todos eles acabei tendo mais despesas do que lucros.

Coloque no orçamento que enviará ao cliente um descritivo de cada trabalho que você irá fazer, mostrando que cada pequeno pedaço do software dele tem um custo para você e quanto isso vale. Descreva bem, este documento poderá ser usado como base para que o cliente não te peça coisas a mais e você tenha um resaldo do que foi acordado. O fatorW tem escrito bastante coisa interessante sobre orçamentos e dicas para orçar seus projetos, vale a pena dar lida no que ele tem a dizer sobre o mercado na internet.

Hoje consigo montar um orçamento que me agrade um pouco mais e é justo – assim como o técnico, que eu consigo ficar satisfeito com o quanto estou trabalhando. E se o cliente dizer “você cobra muito caro”, na verdade ele não está querendo o meu serviço, que posso dizer que é de qualidade e vale o preço que cobro (ah, aprendi isso a duras penas) e nesse caso, é preferível que ele fique com o sobrinho e não comigo. Muitas vezes esses clientes depois de tentar abaixar o preço ao máximo se acham no direito de implicar com tudo e dizer que está pagando por isso, mas isso é outra conversa.

E você, como faz o orçamento para seus clientes?

Tableless.com.br - Web Standards com Arroz e Feijão: Processos e Adoção de Padrões

diego@tableless.com.br (Tableless.com.br) — Wed, 03 Mar 2010 16:36:38 +0000

HTML 5 ou CSS 3 já podem ser usados? Quando o HTML 5 será lançado?
Estou ouvindo demais essas perguntas. A resposta que darei, vai servir para as duas perguntas e para perguntas futuras sobre outras recomendações do W3C.

Para termos uma visão melhor, você precisa entender como o W3C funciona.

Padrões e Recomendações

O W3C é um órgão que regulamenta, cria e desenvolve linguagens para publicação de conteúdo na internet. Há uma diferença muito grande entre padrão e recomendação. O W3C não faz padrões, ele recomenda métodos e linguagens. Uma recomendação se torna padrão porque há a aderência da comunidade. Normalmente uma recomendação do W3C vira padrão, porque o W3C está lá para isso, eles trabalham para que seja assim. Entretanto, você pode criar uma linguagem como o HTML, e submeter para a aprovação do W3C ou fazer o “marketing” dela sozinho e torcer para que a comunidade de desenvolvedores e fabricantes de browsers o apóiem. Isso é difícil de fazer, mas não impossível. Aconteceu com o pessoal do WHATWG com o HTML 5. Um grupo de desenvolvedores estavam descontentes com o caminho que o W3C estava tomando em relação ao XHTML 2 e ao HTML. Então resolveram criar um grupo para escrever um novo padrão da linguagem HTML. O W3C se convenceu e adotou o padrão do HTML 5 que eles estavam escrevendo.
Claro que esse grupo foi inspirado por desenvolvedores da Apple, Mozilla e Opera, mas isso foi só um detalhe.

Processo de adoção

O W3C recomenda métodos e linguagens, o mercado acata e vira um padrão. Uma idéia do W3C, assim que nasce, não é já indicada para uso. Para que isso aconteça há um processo de aprovação e testes. Esse processo é dividido por passos:

1. Working Draft
2. Last Call
3. Candidate Recommendation (CR)
4. Proposed Recommendation (PR)
5. W3C Recommendation (REC)

No Working Draft o W3C publica um documento para a comunidade e grupos de membros do W3C. Trate isso como uma ideia rascunhada no papel, onde eles estão perguntando para todos os interessados se é interessante e vale a pena continuar.

No Last Call, o W3C publica os deadlines do projeto, e pede para que todos os grupos de trabalho que de alguma forma estão envolvidos naquele projeto, enviem seus reviews. Há uma fase dentro do Last Call onde o W3C pede para o público, que somos nós, enviar reviews e idéias sobre o assunto.

No Cadidate Recommendation, o W3C já acredita na tecnologia proposta. Ela foi largamente revista por técnicos de dentro e fora do W3C e por todos os grupos de trabalho envolvidos no processo. Nesse ponto, há o começo da experiência de implementação dessa nova tecnologia. Normalmente alguns browsers já implementam essa ideia para que possa ser utilizada por desenvolvedores mundo afora.

Depois dessa fase, entramos na Proposed Recommendation. Nessa fase a recomendação é enviada para o W3C Advisory Committee para que eles aprovem a adoção final que será um novo padrão no mercado. Entenda que nesse meio tempo, há um processo de testes, implementação e desenvolvimento muito criterioso. É o mundo inteiro testando e sugerindo revisões para que a tecnologia seja realmente interessante e inteligente o suficiente para suprir as expectativas.

Quando essa especificação é aprovada, chegamos ao último estágio, onde a idéia inicial vira uma Recomendação. Aí sim os fabricantes de browsers e desenvolvedores poderão utilizar em seus projetos.

Para ficar mais fácil imaginar, tente pensar em um calhamaço de papel. Nesse calhamaço contém um manual de instruções de uso, implementação e detalhes técnicos de como os browsers devem renderizar as instruções, instruções de como os desenvolvedores devem aplicar e escrever o código.
Engraçado que tudo isso gira em torno de ideias escritas, revisadas e reescritas. Claro que eles fazem testes reais em browsers reais durante todo o processo. Por isso há integrantes de todos os browsers nas equipes para representar cada um dos browsers do mercado. É um trabalho conjunto.

Mas e aí, podemos ou não usar?

Durante muito tempo o CSS foi lançado em versões. Hoje temos 2 versões completas (CSS 1 e 2) e uma revisão (CSS 2.1). O time de desenvolvimento do W3C lançavam atualizações fechadas, ou seja, para haver um lançamento oficial, a especificação do CSS teria de ser totalmente desenvolvida, testada e aprovada. O CSS e o HTML passavam inteiros por todos os processos acima. Por isso, os lançamentos de atualizações no HTML e no CSS eram tão demorados.
Hoje, a aprovação do CSS3 está sendo feito por módulos, assim como o HTML5. Há uma equipe para cada uma das principais propriedades do CSS. Por exemplo, há uma equipe que trabalha exclusivamente para o desenvolvimento do background no CSS3. Quando essa equipe acha que já fez um bom avanço, a propriedade de background, separada do resto da linguagem, passa por todo aquele processo que conhecemos no começo do artigo. Isso facilita a adoção dos browsers e dos desenvolvedores.

Por isso que hoje, mais do que nunca, é necessário que os desenvolvedores pratiquem o Graceful Degradation e do Progressive Enhancement. Pode ser que um browser não suporte uma determinada propriedade porque deu foco para outra propriedade. Isso faz com que a taxa de incompatibilidade de browsers aumente. Se levarmos em conta que os browsers estão mais espertos e suas atualizações estão sendo mais breves, isso não será grande problema. Nosso problema atual é exatamente browsers antigos que não recebem mais atualização. O IE6 está deixando de ser esse caso. A taxa de utilização do IE6 já está bem abaixo do IE7. Claro que em alguns casos isso não é motivador porque trata-se de público específico ou cliente interno. Mas a grande maioria do mercado já está sem essa sombra.

Querendo ou não, essa nova forma de o W3C lançar atualizações em módulos, mexe com a dinâmica do mercado. Não apenas os browsers precisam de atualizações rápidas, mas o desenvolvedor também. Cada uma das atualizações lançadas, minimizam o tempo de trabalho, melhoram o processo de desenvolvimento e priorizam a qualidade de código. Outro passo importante para o desenvolvedor é entender que o site que ele escreve, é portável para qualquer tipo de dispositivo. O desenvolvedor é uma espécie de mensageiro. O conteúdo precisa entregue em diversos meios, e é o desenvolvedor que possibilita isso.

Alguns links para que você conheça mais sobre o processo estão abaixo. Isso tudo pode ser encontrado no site do W3C. Basta ler.

fechaTag: utf8_decode em Javascript

Mon, 01 Mar 2010 15:40:29 +0000

Navegando por aí, acabei esbarrando no blog do meu amigo Marcos Rossow (nossa, quanto tempo!)

E encontrei esse post: JavaScript UTF-8 Decode, com um código tirado daqui: JavaScript utf8_decode.

Tem duas coisas que me incomodam nessa abordagem. A primeira é essa mania que muita gente tem, particularmente programadores PHP, de tratar UTF-8 como um "código alienígena" e ISO-8859-1 como normal e padrão. Alô, ISO-8859-1 é usado por parte do mundo. Não dá para escrever hebraico, mandarim, japonês, árabe ou russo com isso. ISO-8859-1 é uma das diversas tabelas de caracteres que existem mundo afora. E Unicode é a única maneira sensata de escrever um sistema que possa ser usado aqui e na China.

A segunda coisa que me incomoda é a quantidade de código. Não testei profundamente, mas tenho a impressão de que o código abaixo resolve o problema:

function utf8_decode(t){ return decodeURIComponent(escape(t)) }

DGmike: Frete com PagSeguro: simples!

Wed, 24 Feb 2010 18:18:53 +0000

Eu participo do Fórum iMasters onde de vez em quando publico algumas informações e dicas sobre PagSeguro. E também respondo alguns e-mail sobre dúvidas e perguntas sobre os meios de integração com a plataforma. Um desses e-mail foi sobre cálculo de frete. A resposta foi tão satisfatória que decidi escrevê-la no fórum do iMasters e publicá-la aqui.

Calculo de Frete usando o PagSeguro

As lojas normalmente tem um sistema de cálculo de frete próprio como FEDEX ou mesmo usando uma API própria que conecta nos correios. Daí você faz um carrinho de compras onde indica um frete para o cliente e você quer que o PagSeguro use esse valor de frete que você passou. (ao invés de usar o cálculo do PagSeguro)

Para resolver esse problema configure o frete no PagSeguro da seguinte forma: Frete adicional com valor fixo com valor fixo definido para zero. Passe o valor de frete com o valor que a loja calculou apenas para o primeiro item.

Para entender melhor ou simplesmente ver quais são as outras opções possíveis, veja a matéria original no fórum do iMasters.

Tableless.com.br - Web Standards com Arroz e Feijão: Produtividade: editores e snippets

diego@tableless.com.br (Tableless.com.br) — Thu, 18 Feb 2010 09:35:53 +0000

Não é muito difícil ser produtivo. Em muitas palestras e aulas, me perguntam como o desenvolvedor client-side (ou qualquer outro) pode melhorar sua performance e desenvolver melhor, mais rápido e com qualidade. Além de muito treino, existem outros pontos que se utilizados da maneira correta, podem agilizar seu trabalho. Um destes pontos é o seu editor de código.
Você já parou para conhecer seu editor? Muitos desenvolvedores simplesmente ignoram a existência das features que seu editor carrega. Simplesmente instalam e digitam código. Desenvolvedor que é desenvolvedor, gasta tempo aprendendo seu editor.

Quando eu utilizava Windows, experimentei dezenas de editores. Foram muitos mesmo. Comecei pelo Notepad, passei pelo Homesite e CoffeeCup. Antes de migrar para Mac, eu estava utilizando EditPlus, mas estava tendo uma quedinha pelo NotePad++. Os dois são muito bons, embora faça um pouco de tempo que o EditPlus não tenha uma atualização.
Quando migrei para Mac, comecei utilizando o BlueFish. Gostei, mas não fui com a cara. A mesma coisa aconteceu com o BBEdit. Foi aí que encontrei o Textmate e depois o Coda. Gostei dos dois. Utilizei durante muito tempo o Coda por conta do seu FTP. Embora o Coda seja completíssimo, o TextMate me ganhou.

Toda essa migração de editores não foi da noite para o dia. Quando eu realmente gostava de um editor, eu o utilizava por muito tempo. Alguns desenvolvedores trocam de editor como trocam de roupa. Não é saudável. Você acaba não conhecendo suas especialidades e limitações. Você não tem tempo para se acostumar com a interface. E isso tudo prejudica sua produtividade. Eu recomendo que você tenha um editor predileto e fique apenas com ele.

Snippets

Eu gostava do Editplus por que ele era um dos únicos editores para Windows que tinham um configurador de Snippets decente (e olha que nem era muito bom). O Textmate tem um gerenciador de snippets invejável e foi por isso que fiquei com ele e não com o Coda.

Na maioria dos editores, os snippets te ajudam com código repetitivo. Eles autocompletam e inserem códigos que são repetitivos para que você não perca tempo redigindo. Mas pára por aí. Você sempre tem que digitar um bocado de código mesmo quando o snippet te ajuda no trabalho pesado. Claro que você tem a possibilidade de configurar e personalizar os seus snippets. Mas muitos dos desenvolvedores não querem parar para criar uma biblioteca de snippets que os ajudem realmente no trabalho pesado do código. É aí que entra o Zen Coding, uma biblioteca completa que lhe permite escrever pouco código e obter o máximo de resultado.

A sintaxe do Zen Coding é baseado em CSS. Você escreve “seletores” de CSS para obter código HTML.
O Zen Coding foi feito pelo Sergey Chikuyonok (em russo). Veja abaixo um vídeo demo de como funciona:

Pra quem não quiser ver o vídeo: a idéia é que uma linha como essa:

div#header &gt; h1.logo &gt; a {logo do site} &lt; ul.menu &gt; li.item-$*5 &gt; a

Retorne este código:

<div id="header">
<h1 class="logo">
        <a></a></h1>
<ul class="menu">
	<li class="item-1">
            <a></a></li>
	<li class="item-2">
            <a></a></li>
	<li class="item-3">
            <a></a></li>
	<li class="item-4">
            <a></a></li>
	<li class="item-5">
            <a></a></li>
</ul>
</div>

Os programadores da Visie me mostraram estes dias um outro projeto criado pelo Rico Sta. Cruz chamado SparkUp. O Sparkup foi inspirado no Zen Coding. Mas tem uma coisa ou outra diferente. Abaixo veja um vídeo introdutório:

Se você é iniciante, entenda que você precisa aprender HTML primeiro. É interessante que você saiba o que cada tag faz, qual sua função e suas características. Aconselho o uso destes snippets apenas para desenvolvedores que já são fluentes em HTML. Não adianta você escrever em Sparkup, mas não saber do que se trata cada tag que foi jogada ali. Isso pode te transformar em um desenvolvedor analfabeto.

O Sparkup tem apenas suporte para Textmate e VIM, por enquanto. Já o Zen Coding tem suporte completo para Aptana, Coda, Espresso, Textmate, editArea, Visual Studio, Komodo Edit/IDE. Sem contar com suporte parcial para os editores TopStyle, Sublime Text, GEdit, Dreamweaver CS4, UltraEdit, BBEdit e Emacs.

Para baixar o Sparkup visite seu projeto no GitHug.
Para baixar o Zen Coding, visite seu projeto no Google Code.

Se você é um desenvolvedor de verdade, você deve conhecer seu editor de códigos. Não importa qual ele seja, contanto que você o conheça do começo ao fim, saiba suas limitações e saiba utilizar suas vantagens para minimizar o tempo de produção.

fechaTag: Hein?

Wed, 10 Feb 2010 20:03:21 +0000

Trecho de código legado (ASP) que pegamos aqui:

if len(request("price")) = 3 then valorTotal = left(request("price"),1) elseif len(request("price")) = 4 then valorTotal = left(request("price"),2) elseif len(request("price")) = 5 then valorTotal = left(request("price"),3) end if

Jênio.

DGmike: Palestra PagSeguro na Impacta

Fri, 05 Feb 2010 14:08:48 +0000

No sábado passado realizei uma palestra na Impacta sobre como implementar uma loja virtual do nada com ajuda do PagSeguro da UOL. Esta palestra já está na terceira versão, eu já a apresentei no PHP-Minas e PHPConference no ano passado. Eu sempre dou um upgrade entre uma apresentação e outra ou corto coisas que não são importantes, mas o conteúdo é basicamente o mesmo.

Foram abordados os temas controle de versão, PDO, Frameworks, motivação, KISS (keep it simple, stupid!) e desenvolvimento ágil.

Eu gosto muito dessa palestra em particular porque demonstra como você pode (e deve) ter sistemas grandes implementados com poucas linhas de código, bastando usar a essência do PHP. Hoje o PHP pode ser considerado uma linguagem bem estável e com grandes recursos que em muitos casos usar um Framework completo é algumas vezes perda de tempo, valendo mais a pena usar a essência da linguagem.

Sala cheia (duas) na palestra sobre PagSeguro na Impacta

Também gosto pra caramba de implementar PagSeguro em palestras por ser simples. Em menos de vinte minutos explicativos é possível demonstrar como implementar PagSeguro com direito a retorno automático e dicas de segurança na hora de implementar. É muito satisfatório ver o quanto é rápido, simples e fácil implementar vários meios de pagamento de uma só vez. Com a segurança de “pishing”, fraude, reembolso e muitas outras vantagens que o PagSeguro disponibiliza.

A palestra esteve bem cheia, foram necessárias duas salas e uma conexão de áudio e vídeo para que todos possam ver a palestra. Dentre o pessoal consegui ver o @caferrari – dono do projeto vortice framework, e o @rodrideme – ex-funcionário da Visie e sua namorada @alazanscarol. Muito bom ver esse pessoal.

Enfim a palestra foi ótima e o código-fonte do projeto está no trac para qualquer um estudar. Para ver a palestra, basta vê-la no SlideShare. Espero que tenha mais palestras como esta pois acredite em mim, não é a mesma coisa assistir a palestra e vê-la no SlideShare, é completamente diferente.

Da argila ao forte: como desenvolver uma loja com PagSeguro

View more presentations from Michael Castillo Granados.

fechaTag: Exportando MySQL para CSV

Thu, 04 Feb 2010 18:14:18 +0000

Criei agora um pequeno script para resolver um problema meu, um exportador de base de dados MySQL para arquivos CSV. Resolvi compartilhar:

MySQL2CSV

Para baixar, você vai precisar do git. No Ubuntu, para instalar, faça:

$ sudo apt-get install git-core

Depois, para baixar:

$ git clone git@github.com:elcio/mysql2csv.git

Isso vai criar a pasta mysql2csv, com o script dentro. Você pode copiá-lo para a pasta /usr/local/bin/ e dar permissão de execução se for usar com muita freqüência:

$ cd mysql2csv $ sudo cp mysql2csv.py /usr/local/bin/mysql2csv $ sudo chmod +x /usr/local/bin/mysql2csv

Se fizer isso, vai poder chamar, em qualquer diretório:

$ mysql2csv host user passwd dbname

Tableless.com.br - Web Standards com Arroz e Feijão: Google Apps não suportará mais IE6

diego@tableless.com.br (Tableless.com.br) — Tue, 02 Feb 2010 11:58:08 +0000

Recebi hoje um email do Google explicando que em 2010 eles irão deixar de suportar o IE6. Vitória!
Contar com o IE6 na cartilha de suporte é subutilizar o HTML5 e JavaScript. Aqui mesmo na Visie, temos projetos que o HTML5 e CSS3 seriam a resposta, mas ainda não podemos utilizar por causa do IE6, IE7 e em alguns casos o IE8.

Deixar de suportar o IE6 é questão de sobrevivência. E para matar o IE6, nós precisamos evoluir. Cabe a nós educar o usuário. Formar um mundo novo.

Abaixo segue o email recebido do Google.

Dear Google Apps admin,

In order to continue to improve our products and deliver more sophisticated features and performance, we are harnessing some of the latest improvements in web browser technology. This includes faster JavaScript processing and new standards like HTML5. As a result, over the course of 2010, we will be phasing out support for Microsoft Internet Explorer 6.0 as well as other older browsers that are not supported by their own manufacturers.

We plan to begin phasing out support of these older browsers on the Google Docs suite and the Google Sites editor on March 1, 2010. After that point, certain functionality within these applications may have higher latency and may not work correctly in these older browsers. Later in 2010, we will start to phase out support for these browsers for Google Mail and Google Calendar.

Google Apps will continue to support Internet Explorer 7.0 and above, Firefox 3.0 and above, Google Chrome 4.0 and above, and Safari 3.0 and above.

Starting this week, users on these older browsers will see a message in Google Docs and the Google Sites editor explaining this change and asking them to upgrade their browser. We will also alert you again closer to March 1 to remind you of this change.

In 2009, the Google Apps team delivered more than 100 improvements to enhance your product experience. We are aiming to beat that in 2010 and continue to deliver the best and most innovative collaboration products for businesses.

Thank you for your continued support!

Sincerely,
The Google Apps team

Email preferences: You have received this mandatory email service announcement to update you about important changes to your Google Apps product or account.

Google Inc.
1600 Amphitheatre Parkway
Mountain View, CA 94043

fechaTag: Rodando comandos do sistema operacional com cache no Python

Mon, 01 Feb 2010 16:41:00 +0000

Código simples, mas que pode ser útil para alguém não ter que escrevê-lo de novo (arquivo runcached.py):

import os,time cachepath='cache' timeout=360 def runcached(cmd): filename=os.path.join(cachepath,str(hash(cmd))) if os.path.isfile(filename): if time.time()-os.path.getmtime(filename)<timeout: return open(filename).read() t=os.popen(cmd).read() open(filename,'w').write(t) return t

A função runcached roda comandos do sistema operacional, e faz cache do resultado por 6 minutos. Para alterar o tempo do cache, basta mudar a variável timeout. Por exemplo, para cachear por 10 horas:

import runcached runcached.timeout=36000 r=runcached('lynx --source http://www.tableless.com.br')

WillianFernandes.com.br: Como gerar validações client-side em projetos Rails usando jQuery Validator com ClientValidations

Fri, 29 Jan 2010 17:43:47 +0000

Estou fazendo uma nova aplicação aqui na empresa e teremos muitos formulários. Para não precisar criar um script de validação para cada formulário, fui atrás de um plugin que gerasse as validação JavaScript automáticamente, com base nas validações do modelo.

Sem maiores problemas, encontrei o plugin Live Validations. Ele faz tudo o que preciso, quer dizer, quase tudo.

Alguns dos formulários dessa aplicação são Nested Model Form e o Live Validations não suporta esse tipo de formulário.

Sendo assim, resolvi fazer meu próprio plugin, chamado Client Validations. O que ele faz é basicamente ler as validações definidas no Model e traduzi-las para JavaScript usando jQuery Validator.

Instalação

script/plugin install git://github.com/willian/client_validations.git

Como o Client Validations depende do plugin Validation Reflection, preciaremos instalar ele também:

script/plugin install git://github.com/redinger/validation_reflection.git

E por último basta instalar o jQuery e o jQuery Validator:

Não esqueça de carregar o jquery e o validator no seu HTML:

<%= javascript_include_tag 'jquery-latest.min.js', 'jquery.validate.min.js' %>

Supondo que temos o modelo abaixo:

class Task < ActiveRecord::Base
  validates_presence_of :name
end

E o formulário desse modelo:

<% form_for(@task) do |f| %>
  <%= f.error_messages %>
 
  <p>
    <%= f.label :name %><br />
    <%= f.text_field :name %>
  </p>
  <p>
    <%= f.submit 'Create' %>
  </p>
<% end %>

Tudo o que precisamos fazer para a validação client-side funcionar é adicionar o helper client_validations no formulário. Ficará assim:

<% form_for(@task) do |f| %>
  <%= f.error_messages %>
 
  <p>
    <%= f.label :name %><br />
    <%= f.text_field :name %>
  </p>
  <p>
    <%= f.submit 'Create' %>
  </p>
  <%= f.client_validations %>
<% end %>

Provavelmente você receberá a seguinte mensagem de validação:

translation missing: en, activerecord, attributes, task, name can't be blank

Para resolver esse problema, basta criar o arquivo de internacionalização em config/locales.

O plugin ainda está na versão 0.1.0 e muita coisa pode ser feita para melhorá-lo. Se tiver alguma sugestão, crie um comentário ou use a página do GitHub: http://github.com/willian/client_validations

Tableless.com.br - Web Standards com Arroz e Feijão: Porque é a web que comanda

diego@tableless.com.br (Tableless.com.br) — Wed, 27 Jan 2010 11:30:56 +0000

A AppStore fez sucesso. Bastante. Por vários motivos: um deles foi por conta da remuneração do desenvolvedor. Teve gente que ganhou milhares de dólares sozinho vendendo aplicações por 99 centavos. Obviamente isso chamou a atenção de muita gente, que começou a fazer aplicações enlouquecidamente para ganhar alguns trocados. Consequentemente um grande números de aplicações que não precisam ser instaláveis no aparelho, apareceram. Vários desenvolvedores não perceberam que dependendo do seu sistema, ele não precisa ser desenvolvido exclusivamente para ser instalado na plataforma do iPhone.

Hoje, aparelhos como o iPhone, que tem um browser com um bom suporte a HTML 5 e CSS 3, possibilitam criar sistemas e aplicativos baseados em web, com características, designs e comportamentos idênticos aos de aplicações instaláveis nos aparelhos. E o melhor, podem ser utilizados de qualquer lugar, pela web. Outro ponto negativo é que desenvolver para iPhone/iPod Touch é um bocado burocrático. Você precisa ter o SDK que só funciona no OS X, e você precisa aprender Objective C para programar os Apps para Apple. Em contrapartida, para fazer um App baseado em Web, onde seus clientes acessarão o sistema diretamente pelo browser do aparelho, é preciso saber Javascript, HTML 5 e CSS 3. Se você já é desenvolvedor Web, você já sabe desenvolver para iPhone, iPod Touch, Android e qualquer outro dispositivo similar.

Se você gosta dos efeitos de transição dos aparelhos, você pode fazê-los sem problemas utilizando JQuery ou CSS 3. Há até um plugin de JQuery chamado JQTouch, que permite fazer efeitos idênticos ao do iPhone. Esse plugin foi pensado exatamente para funcionar em Mobile Safari e outros aparelhos com browsers avançados, como no Android.

Um caso sobre o que estamos falando é a aplicação do Itaú. Se você tem um iPhone, baixe o aplicativo pela AppStore. Ao abrir o aplicativo, perceba que o sistema não faz nada além de mostrar o site do Itaú. É muito mais interessante e barato ensinar o usuário a visitar o site em vez de procurar um aplicativo e instalar. Não é necessário nem divulgar um endereço mobile do site – esse aliás é outra discussão.

Obviamente, há exceções. A maioria dos jogos, se não todos, e alguns sistemas disponíveis funcionam melhor (ainda) se forem instalados no aparelho. Mas a grande maioria dos sistemas, principalmente aqueles que o usuário simplesmente insere ou verifca informações e dados, podem ser servidos diretamente pela web.

No caso do iPhone, os sistemas que utilizam recursos do aparelho, como por exemplo fazer o aparelho vibrar, bluetooth, bateria, GPS e etc, precisam ser instalados. Isso não se aplica a alguns mobiles da Nokia que são baseados na plataforma WRT.
A plataforma WRT permite que você desenvolva aplicativos utilizando Javascript, HTML e CSS. E por meio de Javascript, você pode ativar os recursos que ter utilizar no aparelho. Nesse caso, há uma vantagem em cima do iPhone: você não precisa aprender Objective C. Basta saber Javascript, CSS e HTML.

O cenário de hoje é interessante. Tudo o que o desenvolvedor sempre sonhou em utilizar de HTML 5 e CSS 3 pode ser aplicado no desenvolvimento para web mobile. Os browsers estão mais espertos e a cada dia trazem novidades interessantes para melhorar o desenvolvimento dos padrões e da web. Realmente, daqui pra frente, é um novo mundo que se forma. Um mundo tão ou mais complexo que o desenvolvimento web para desktops como conhecemos hoje. Pra mim, é mais apaixonante.

Guidelines de User Experience da Apple.
Forum Nokia – Web Runtime

Blog da Visie: Dicas de produtividade

Fri, 22 Jan 2010 12:38:43 +0000

Alguém me perguntou no Formspring que dicas eu daria para aumentar a produtividade no desenvolvimento web. Minha resposta:

0. Paixão pelo que faz
1. Padrões web
2. Um bom framework (estou me divertindo com web2py)
3. Linguagens dinâmicas (uso Python)
4. Testes automatizados (TDD/BDD…)
5. Controle de versão
6. Scrum
7. Pair Programing
8. jQuery
9. Um bom editor de código (eu uso Vim)
10. Unix (facilita muita coisa)
11. Deploy automatizado
12. Investir em melhorar seus skills: medir tudo o que faz, participar de um coding dojo, testar novas ferramentas, ler, contribuir num projeto open source…

Espero que seja útil.

Você pode ler um pouco mais sobre boa parte desses assuntos em nosso PDF sobre produtividade.

Sem posts relacionados

Tableless.com.br - Web Standards com Arroz e Feijão: Versionamento inteligente para mobiles

diego@tableless.com.br (Tableless.com.br) — Wed, 20 Jan 2010 12:31:53 +0000

O iPhone fez a festa dele. Todo mundo gostou do que viu e usou. Acontece que não só de iPhone vive o homem, e há pessoas por aí que não gostam do aparelho por motivos diversos. Há mercado para todos e por isso é natural que apareçam outros aparelhos com novos sistemas. Acontece que o lançamento do iPhone criou uma moda de criar versões dos sites específicas para ele. No começo isso foi ótimo. Mas agora, isso priva diversos celulares similares ao iPhone de terem uma boa experiência de navegação. É o caso de usuários de Android.

O Android é o novo sistema operacional para mobiles do Google. Até para um AppleBoy, como eu, o sistema é interessante. Tem a interface bem acabada, app’s amigáveis e etc. Ele faz muito bem o papel dele. O Engine de renderização do browser dele é WebKit. O mesmo engine que o Safari Mobile utiliza. E não estou falando de versões antigas do Webkit como alguns outros celulares utilizam. O Android utiliza as versões mais atuais do Webkit, com suporte extenso a CSS e HTML. Portanto, um site que teoricamente foi feito apenas para iPhone, pode ser visualizado da mesma maneira pelos usuários de Android.

Aí entra outra questão: provavelmente você deve ter pensado que seria apenas fazer um script de detecção de browser, capturando as visitas de Safari Mobile e Android e pronto. É aí que você se engana. Já há vários outros aparelhos que estão utilizando engines parecidas e que podem renderizar sua “versão de iphone”. Exatamente por isso, que você precisa fazer um filtro por características e não por browser. Fazemos isso utilizando Media Queries.

As Media Queries permitem fazer um pequeno filtro, onde definimos as características do dispositivo que acessará a página. Com isso, podemos definir um CSS específico para aquele grupo de dispositivos que se encaixaram no seu filtro. Veja um exemplo abaixo:

1 2	<link rel="stylesheet" href="style.css" type="text/css" media="screen and (min-width:481px)"> <link rel="stylesheet" href="mob.css" type="text/css" media="screen and (max-width:480px)">

A media que fiz é muito simples de ser entendida. A primeira linha engloba dispositivos que tem tela colorida, com uma resolução de largura mínima de 481px, isso inclui seu monitor, notebook e etc. A outra linha engloba dispositivos com uma largura máxima de 480px, ou seja, iPhones, Androids e dispositivos que seguem esse mesmo esquema de resolução e etc.

Dessa forma, você filtra os dispositivos e não os browsers dos aparelhos. Isso previne que algum celular, tão bom quanto o iPhone e o Android fiquem de fora de ter uma boa experiência de uso. Quer fazer um teste interessante? Se você estiver utilizando um browser que aceita media queries, redimensione a janela para uma largura menor que 480px. Você verá o Tableless chaveando os estilos automaticamente. Perceba que alguns elementos são reformatados e outros retirados do layout.

O filtro ainda não está completo porque não estamos contemplando os aparelhos que não aceitam meda queries, mas são mobiles. Para isso, usaríamos os Media Types, com valor de handheld. Embora celulares que aceitem os Media Types não tenham um bom suporte de CSS, podemos fazer pelo menos uma formatação de texto, cor e background. Celulares que utilizam Opera Mini, terão uma ótima experiência.

É sempre aquela mesma velha idéia: dar a melhor experiência para todos os meios de acesso. Sempre.

Tableless.com.br - Web Standards com Arroz e Feijão: Simuladores de Browsers Mobiles

diego@tableless.com.br (Tableless.com.br) — Wed, 20 Jan 2010 12:31:25 +0000

Antigamente não existiam simuladores dos pequenos celulares. Na verdade, não precisava. Você provavelmente usava WAP. Quando começamos a utilizar CSS e XHTML para fazer sites mais decentes para os mobiles, tudo ficou mais complicado, você precisava ter um aparelho para fazer testes. Em muitos casos era simples resolver utilizando o Opera no desktop mesmo, mas em forma de visualização mobile/handheld. Contudo, você estava desenvolvendo para apenas aparelhos com Opera. Não havia, por exemplo, um simulador de IE Mobile. Nem precisa, é horrível, e atualmente, a maioria utiliza Opera.

Para fazer sites para os iPhones e Androids da vida, não há segredo, já que eles aceitam tudo e mais um pouco de CSS e HTML. Você consegue ter homogeneidade ao desenvolver. Mesmo assim, para ter certeza, seria interessante você testar o site em um aparelho. Por isso, há simuladores que emulam o ambiente dos aparelhos. É o caso do iPhone e do Android.

Para aprender mais sobre o simulador do Android, visite a página oficial sobre o emulador deles. Assim você aprende como ele funciona, as funções, instalação e etc. O simulador pode ser instalado em Windows, Mac ou Linux.

O simulador para iPhone é só para quem tem Mac. Infelizmente a Apple ainda não liberou o SDK para outros sistemas. Uma pena, porque não só de mac vive o homem, e a maioria dos devs utilizam Windows ou Linux. Mesmo assim, você pode baixá-lo e utilizá-lo para testar qualquer site ou arquivos locais.

O pessoal da Nokia também disponibiliza vários emuladores. Contudo, aconselho que você utilize apenas o browser de S60, que é o melhor deles hoje em dia. Os browsers dos S60 suportam Webkit, mesmo não sendo a versão mais atualizada, é possível fazer muita coisa interessante, entretanto, há haver alguns erros de compatibilidade por conta do engine desatualizado.

WillianFernandes.com.br: Pair Programming – Por que e como usar?

Mon, 18 Jan 2010 14:01:10 +0000

Pair Programming é, para mim, a melhor forma de trabalhar em equipe. Facilita a comunicações e impede que o conhecimento de uma funcionalidade/lógica fique somente com um desenvolvedor.

Trabalhando em Pair foi fácil perceber a evolução das pessoas como profissionais. Um profissional Jr. rapidamente ganhava experiência, adquiria habilidades e virava fluente na linguagem, ou seja, treinar a equipe usando Pair foi muito mais simples e barato para a empresa.

Mas, essa é minha opinião. Muita gente compartilha comigo esse mesmo sentimento, mas muita gente torce o nariz quando escuta as palavras Pair Programming juntas.

Mas como começar com Pair Programming?

Não adianta impor sua equipe a trabalhar assim. Mas antes de aceitar um não da equipe, é interessante testar e analisar a aceitação de todos.

Quando trabalhava na WebCo (Abril Dgital), resolvemos usar a Programação em Par. Foi fácil convencer todos, pois, no nosso caso, ~~todos~~ a maioria que torciam o nariz nunca tinham usado Pair, ou seja, não tinham argumentos.
No começo havia discussões, stress, mas com o tempo todos foram percebendo os ganhos que estávamos tendo com a adoção e virou regra da empresa utilizar Pair 100% do dia. Quando entrevistávamos alguém, um dos requisitos era a pessoa não ter nada contra ao trabalho em equipe, principalmente ao Pair.

Mas isso tudo poderia ter sido um tiro no pé. Por isso precisamos estudar caso à caso.
Hoje trabalho numa empresa que somente EU trabalhei com Pair Programming. Tive muitas barreiras para quebrar, principalmente dos gerente, mas felizmente consegui convencê-los e vou começar com Pair na minha equipe.

Como uso Pair Programming

Como uso Scrum para gerenciar o processo do desenvolvimento, ficou fácil dividir as duplas do Pair. No Daily Meeting, quando definimos o que faremos hoje, também definimos com quem faremos Pair. E durante o dia todo não trocamos de par, apenas revezamos, de tempos em tempos, o driver e o navigator. Esse revezamento pode ser feito marcando em um cronometro que avisará quando a troca ocorrerá, ou simplesmente quando a dupla julgar necessário (o que eu prefiro).

No dia seguinte, um das pessoas do par continua na história e a outra pessoa escolhe em qual história trabalhará e com quem fará par. O mesmo ocorre com os outros pares. Ou seja, assim conseguimos manter uma boa rotatividade. A idéia é que o maior número de pessoas possam trabalhar juntas durante o Sprint.

A dinamica

História 1: Juca - Pedro História 2: Lucas - Thiago História 3: Maria - Carla1º Dia

História 1: Juca - Carla História 2: Lucas - Pedro História 3: Maria - Thiago2º Dia

História 1: Carla - Thiago História 2: Lucas - Juca História 3: Maria - Pedro3º Dia

E assim por diante…

Baby steps

Como disse, hoje estou começando com Pair na minha equipe, ela será uma cobaia dentro da empresa. Tendo bons resultados, poderemos expor para as outras equipes também dotarem o uso do Pair Programming.

Resumindo…

Não adianta impor, de cara, que toda a empresa adote o uso do Pair, escolha uma equipe madura, pense pequeno e, dando tudo certo, vá expandindo até que isso vire uma cultura dentro da empresa.

Respeite a opinião dos outros, aceite a derrota e mude de empresa se for o caso. Mas não faça inimigos tentando evangelizar algo. Acredite, não vale a pena. Se for necessário, peça ajuda. Tem muita gente na internet usando Pair.

DGmike: PagSimples: faça combranças facilmente com o PagSeguro

Sun, 17 Jan 2010 21:38:57 +0000

Você, assim como eu, já deve ter se deparado com o problema de gerar uma cobrança para alguém através da internet e não queria entrar no painel de controle do PagSeguro e mandar aquele e-mail padrão que eles enviam quando fazem uma cobrança.

Ao invés disso você quer que ele acesse uma url única (bit.ly e tinyurl.com, por exemplo) para que ele possa fazer o pagamento via PagSeguro. Assim você pode fazer o e-mail formatado como você desejar. Talvez você considere essa mesma formula para mandar scraps via Orkut/FaceBook/Twitter/Skype/etc com cobranças ou pagamentos sem que você tenha a necessidade de escrever um formulário nos padrões do PagSeguro.

Existem inúmeras possibilidades para o PagSimples, use com moderação

Acontece que nem sempre você pode inserir HTML onde você gostaria que as pessoas lhe dessem dinheiro, como um link do youtube. Então faça uma cobrança no PagSimples e mande para quem você quiser.

Veja como é simples: http://pagsimples.dgmike.com.br/p/4b537c4bb8aed

O PagSimples é mais um projeto de uma madrugada (como diria o Marco Gomes) escrito com o Ice-Baby que foi desenvolvido a partir de uma conversa que tive com o Elcio dentro de um taxi.

Tableless.com.br - Web Standards com Arroz e Feijão: Colocar Rodapé fixo no fim da página

diego@tableless.com.br (Tableless.com.br) — Tue, 12 Jan 2010 18:14:01 +0000

Você já precisou ter o rodapé fixo no fim da página algum dia. Normalmente os clientes chatos acham feio aquele rodapé terminando no meio da página quando há pouco conteúdo. Há uma técnica no CSS que resolve isso. Não funciona no IE6, já aviso agora. Na verdade, tem um jeito de funcionar, mas não quero te acostumar mal.

Lembrando que você pode fazer isso facilmente com JQuery.

Suponha que você tenha o código HTML:

<!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" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
	<title>Tableless.com.br</title>
</head>
 
<body>
 
<div class="geral">
	<div class="header">
		HEADER
	</div>
	<div class="aside fleft">
		ESQUERDA
	</div>
	<div class="aside fright">
		DIREITA
	</div>
	<div class="content">
		<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin augue erat, ullamcorper pulvinar malesuada ultricies, mollis non magna. Curabitur quis nisi ut ligula ultricies gravida. Suspendisse elit justo, vulputate in facilisis sed, tristique id nisi. Maecenas risus quam, suscipit eu vehicula ut, ultricies in neque. Donec gravida tristique turpis ut interdum. Donec lacinia nisi id enim lacinia sit amet facilisis est ullamcorper. Curabitur ipsum libero, sollicitudin nec rhoncus quis, congue non ipsum. Etiam at eros dolor. Mauris non erat vitae leo faucibus fermentum. In consectetur, diam eget faucibus dignissim, urna justo pretium dui, nec eleifend neque velit vitae odio. Nam et tristique turpis. In dictum commodo sem ut dignissim. In convallis quam non tortor posuere sed ornare nulla pulvinar. Suspendisse placerat turpis in tortor rutrum nec mollis nulla posuere. Integer tellus est, rhoncus ut sagittis eget, mattis a velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque gravida posuere orci nec ornare. Donec elit nulla, aliquam eget cursus a, commodo sed odio.
		</p>
		<p>
		Duis id metus enim, sed dignissim magna. Quisque dapibus pulvinar diam eget adipiscing. Ut aliquet ipsum quis lorem elementum lacinia. Vestibulum feugiat ultrices orci, vel sollicitudin nibh rutrum eu. In gravida tincidunt ornare. Aenean vestibulum leo eu orci egestas semper. Proin euismod dapibus tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse rutrum purus eget lectus ultricies a consectetur ante laoreet. Phasellus ullamcorper gravida risus vitae convallis. Curabitur ante lorem, faucibus in tincidunt quis, ullamcorper at lectus. Fusce fermentum blandit varius. Donec a quam id massa bibendum commodo sit amet vel felis. Sed magna nibh, convallis nec dignissim non, vestibulum adipiscing ipsum. Mauris cursus fringilla tortor eu feugiat. Vivamus vestibulum dapibus justo, porttitor luctus nisi posuere at. Nunc mi elit, suscipit id venenatis at, suscipit nec purus. Donec malesuada fringilla tempor. Pellentesque vehicula diam a magna commodo sagittis. Nulla facilisi. 
		</p>
	</div>
	<div class="footer">
		FOOTER
	</div>
</div>
 
</body>
</html>

E o seguinte CSS:

*  {
	margin:0;
	padding:0;
}
 
html, body {height:100%;}
 
.geral {
	min-height:100%;
	position:relative;
	width:800px;
}
 
.footer {
	position:absolute;
	bottom:0;
	width:100%;
}
 
.content {overflow:hidden;}
.aside {width:200px;}
.fleft {float:left;}
.fright {float:right;}

Na linha 6, você faz com que as tags body e html tenham 100% de altura. Isso fará com que o rodapé entenda que o limite dos dois elementos seja o final da janela do navegador.

Na linha 8, defino que a largura mínima do div GERAL, que é o div que envolve todo o site, seja de 100%. E defino um position: relative; para que o footer seja referenciado por ele.

Na linha 14, eu defino um position: absolute; e bottom:0; para footer, forçando sempre para o final do div.
Se houver pouco conteúdo o Rodapé fica lá embaixo, se houver muito, o rodapé desce junto com o conteúdo.

Funciona em IE7+ e em bons browsers.

Link para o arquivo de exemplo: Footer fixo no Rodapé

Tableless.com.br - Web Standards com Arroz e Feijão: Convertido – Menu (Livraria Cultura)

diego@tableless.com.br (Tableless.com.br) — Tue, 12 Jan 2010 14:18:18 +0000

Fazer menus com CSS é relativamente simples. Não precisamos de muitas linhas de código para fazer um menu totalmente personalizado. O Menu da Livraria Cultura é feito com Tabela. Na verdade, todo o site deles é feito com Tabelas, mas esse é outro assunto.

Você pode ver o menu deles aqui.

O Código HTML do menu deles é:

 
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
	<td><ul id="jsddm">
		<li id="mainmenu-livro" style="height: 22px; width: 79px;">
 
				<a href="/scripts/cultura/index.asp?sid=89120138612112390515516911&amp;k5=2FEC93B&amp;uid="><img src="imagem/_topo/abas/novo_livros.gif" alt="Livros" border="0"></a>
			<ul id="mainmenu-livro-sub" style="padding: 5px; background: rgb(11, 161, 176) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; position: absolute; width: 69px; z-index: 350; margin-top: -2px; list-style-type: inherit; list-style-image: inherit; list-style-position: inherit; visibility: hidden;">
<li>
<a style="color: rgb(255, 255, 255);" href="/scripts/cultura/index.asp?lingua=POR&amp;sid=89120138612112390515516911&amp;k5=2FEC93B&amp;uid=">Português</a>
<a style="color: rgb(255, 255, 255);" href="/scripts/cultura/index.asp?lingua=ING&amp;sid=89120138612112390515516911&amp;k5=2FEC93B&amp;uid=">Inglês</a>
<a style="color: rgb(255, 255, 255);" href="/scripts/cultura/index.asp?lingua=ESP&amp;sid=89120138612112390515516911&amp;k5=2FEC93B&amp;uid=">Espanhol</a></li><li>
<a style="color: rgb(255, 255, 255);" href="/scripts/cultura/index.asp?lingua=FRA&amp;sid=89120138612112390515516911&amp;k5=2FEC93B&amp;uid=">Francês</a></li><li>
<a style="color: rgb(255, 255, 255);" href="/scripts/cultura/index.asp?lingua=ITA&amp;sid=89120138612112390515516911&amp;k5=2FEC93B&amp;uid=">Italiano</a></li><li>
<a style="color: rgb(255, 255, 255);" href="/scripts/cultura/index.asp?lingua=ALE&amp;sid=89120138612112390515516911&amp;k5=2FEC93B&amp;uid=">Alemão</a>
 
</li>
			</ul>
		</li>
	</ul>
		</td>
	<td><a href="/scripts/videos/index.asp?sid=89120138612112390515516911&amp;k5=2FEC93B&amp;uid="><img src="imagem/_topo/abas/b_dvds2.gif" alt="DVDs" border="0"></a></td>
	<td><a href="/scripts/musica/index.asp?sid=89120138612112390515516911&amp;k5=2FEC93B&amp;uid="><img src="imagem/_topo/abas/b_cds2.gif" alt="CDs" border="0"></a></td>
	<td><a href="/scripts/games/index.asp?sid=89120138612112390515516911&amp;k5=2FEC93B&amp;uid="><img src="imagem/_topo/abas/b_games2.gif" alt="Games" border="0"></a></td>
                               <td><a href="/scripts/hotsites/index.asp?sid=89120138612112390515516911&amp;k5=2FEC93B&amp;uid="><img src="imagem/_topo/abas/novo_sitesesp.gif" alt="Hotsites" border="0"></a></td>
 
	<td><a href="/scripts/eventos/index.asp?sid=89120138612112390515516911&amp;k5=2FEC93B&amp;uid="><img src="imagem/_topo/abas/novo_eventos.gif" alt="Eventos" border="0"></a></td>
	<td width="100%"></td>
</tr>
</tbody></table>

Eu não encontrei qual seria o pedaço do CSS referente ao menu, por isso eu não vou colar aqui.

O problema da versão do menu deles é que é todo feito com imagens e usa muita tabela. Há também código CSS inline. Isso prejudica leitores de tela, prejudica Google, e manutenção.
A versão que sugerimos é feita utilizando a técnica Image-Replacement. Segue abaixo o código HTML:

<div class="nav">
	<ul>
		<li class="navlivros"><a href="#">Livros</a>
			<ul>
				<li><a href="#">Português</a></li>
				<li><a href="#">Inglês</a></li>
				<li><a href="#">Espanhol</a></li>
				<li><a href="#">Francês</a></li>
				<li><a href="#">Italiano</a></li>
				<li><a href="#">Alemão</a></li>
			</ul>
		</li>
		<li class="navdvd"><a href="#">DVDs</a></li>
		<li class="navcd"><a href="#">CDs</a></li>
		<li class="navgames"><a href="#">Games</a></li>
		<li class="navsitesesp"><a href="#">Sites especiais</a></li>
		<li class="naveventos"><a href="#">Eventos</a></li>
	</ul>
</div>

Abaixo o Código CSS:

* {
	margin:0;
	padding:0;
	list-style:none;
}
 
.nav {padding:10px;}
 
.nav ul li {float:left; position:relative;}
 
/* Define que todos os submenus aparecem quando passarmos o mouse no LI "pai" */
.nav ul li:hover ul {display:block;}
 
/* Define o estilo dos links */
.nav ul li a {
	float:left;
	height:22px;
	text-indent:-9999px;
	overflow:hidden;
	background-position:center center;
	background-repeat:no-repeat;
}
 
/* Adiciona o background e a largura nos elementos do menu */
.nav ul li.navlivros a {width:79px; background-image:url(imagem/_topo/abas/novo_livros.gif);}
.nav ul li.navdvd a {width:79px; background-image:url(imagem/_topo/abas/b_dvds2.gif);}
.nav ul li.navcd a {width:79px; background-image:url(imagem/_topo/abas/b_cds2.gif);}
.nav ul li.navgames a {width:79px; background-image:url(imagem/_topo/abas/b_games2.gif);}
.nav ul li.navsitesesp a {width:149px; background-image:url(imagem/_topo/abas/novo_sitesesp.gif);}
.nav ul li.naveventos a {width:109px; background-image:url(imagem/_topo/abas/novo_eventos.gif);}
 
/** Define que a UL do submenu está escondida por default. E define o visual do submenu */
.nav ul li ul {
	display:none;
	background:#00A2B0;
	width:70px;
	position:absolute; top:22px; left:0px;
	padding:4px;
}
 
/* Resetamos todo o estilo dos links do submenu. Isso poderia ser evitado se o IE7 conhecesse seletores complexos ou com JQuery */
.nav ul li ul li a {
	font:13px verdana, arial, tahoma, sans-serif;
	background-image:none !important;
	text-indent:0;
	float:none;
	color:white;
}
 
.nav ul li ul li a:hover {text-decoration:none;}

Veja o resultado do menu reconstruído aqui.

O Submenu na versão original, eu fiz utilizando apenas CSS. Testei em Firefox e IE7/8. Funciona que é uma beleza. Sem Javascript, sem JQuery, nem nada.
Se o IE7 já conhecesse seletores complexos, não precisaríamos resetar todos os links dos submenus como fizemos na linha 35.
O Código CSS, embora pareça longo, ele está organizado para ser fácil de adicionar outros elementos.

Sempre que escrever um CSS, pense sempre no futuro. Um CSS para resolver um problema imediato, normalmente tem menos código. Mas ele resolve apenas aquele problema específico. Se você fizer um CSS abrangente e pensando no futuro, seu código fatalmente vai ficar maior. Mas você terá menos retrabalho ao fazer as alterações futuras. Eu prefiro.

Pegue aqui os dois códigos para estudar: Reconstrução Menu Livraria Cultura

Reconstruindo o menu da Livraria Cultura.

Tableless.com.br - Web Standards com Arroz e Feijão: Convertidos de volta

diego@tableless.com.br (Tableless.com.br) — Tue, 12 Jan 2010 14:17:42 +0000

Quem conhece o começo do Tableless.com.br, lembra dos “Convertidos do Tableless”. Os convertidos era uma área no Tableless onde eu reimplementava as homes de grandes sites utilizando HTML e CSS. Era uma época onde ninguém fazia websites sem tabelas, ninguém usava CSS direito e o HTML era feito “nas coxas”. Era uma época também que os desenvolvedores duvidavam da possibilidade de fazer websites apenas com CSS, posicionando e diagramando os elementos sem tabela. Por isso, tive a idéia de criar um movimento onde o objetivo não era dar tapas na cara, mas apenas aprender e ensinar. Mostrar que até mesmo websites que foram pensados para tabela, podiam ser feitos com CSS, sem grandes problemas e o mais interessante, compatível com a maioria dos browsers.

Os convertidos do Tableless não existe mais. Algumas empresas que tiveram seus sites convertidos, acharam que o Tableless estava copiando seus layouts e etc. Mandaram uma cartinha extrajudicial, fazendo com que tirássemos seus sites (convertidos) do ar. Bem, fizemos isso e para evitar outros problemas, retiramos toda essa seção do ar.

Hoje, os Convertidos antigos não iriam fazer muito sentido, já que atualmente todos os sites são “Tableless”. Entretanto, o código de muitos sites são feitos de uma maneira, vamos dizer assim, não adequada. Por isso, levantarei a questão aqui novamente, mas farei o seguinte: durante algum tempo, pegarei partes de grandes sites conhecidos, recodificarei de uma maneira que eu acho que seria a ideal, e publicarei aqui os resultados.

Deixo bem claro que isso não passa de um estudo. Publicarei aqui os resultados para dividir com vocês o conhecimento adquirido e também ouvir as opiniões de vocês leitores.
Se houver algum desenvolvedor que trabalha nas empresas que citarei daqui pra frente, por favor, pode entrar em contato comigo se preferir. Vamos conversar em como a Visie pode ajudar você a resolver problemas.

Você já pode ver o primeiro Convertido: Convertido – Menu (Livraria Cultura).

Uploads from Fernando Sergio!: Alegria que me mata!

Mon, 11 Jan 2010 13:27:22 +0000

Planeta Visie

DGmike: Aprendendo com o técnico: quanto cobrar em um projeto web

Tableless.com.br - Web Standards com Arroz e Feijão: Processos e Adoção de Padrões

Padrões e Recomendações

Processo de adoção

Mas e aí, podemos ou não usar?

fechaTag: utf8_decode em Javascript

DGmike: Frete com PagSeguro: simples!

Tableless.com.br - Web Standards com Arroz e Feijão: Produtividade: editores e snippets

Snippets

fechaTag: Hein?

DGmike: Palestra PagSeguro na Impacta

fechaTag: Exportando MySQL para CSV

Tableless.com.br - Web Standards com Arroz e Feijão: Google Apps não suportará mais IE6

fechaTag: Rodando comandos do sistema operacional com cache no Python

WillianFernandes.com.br: Como gerar validações client-side em projetos Rails usando jQuery Validator com ClientValidations

Instalação

Tableless.com.br - Web Standards com Arroz e Feijão: Porque é a web que comanda

Blog da Visie: Dicas de produtividade

Sem posts relacionados

Tableless.com.br - Web Standards com Arroz e Feijão: Versionamento inteligente para mobiles

Tableless.com.br - Web Standards com Arroz e Feijão: Simuladores de Browsers Mobiles

WillianFernandes.com.br: Pair Programming – Por que e como usar?

Mas como começar com Pair Programming?

Como uso Pair Programming

A dinamica

Baby steps

Resumindo…

DGmike: PagSimples: faça combranças facilmente com o PagSeguro

Tableless.com.br - Web Standards com Arroz e Feijão: Colocar Rodapé fixo no fim da página

Tableless.com.br - Web Standards com Arroz e Feijão: Convertido – Menu (Livraria Cultura)

Tableless.com.br - Web Standards com Arroz e Feijão: Convertidos de volta

Uploads from Fernando Sergio!: Alegria que me mata!

fechaTag: Porque meu GPS não fala com a web?

Zamana.eti.br: WRT ou Web Runtime

Zamana.eti.br: Esquecido, sumido, entre outros

Uploads from Fernando Sergio!: [Wireframe] Amapro Maternal

Uploads from Fernando Sergio!: [Freela] Amparo Maternal

Uploads from Fernando Sergio!: Fotolab Book

Uploads from Fernando Sergio!: [Kahek] Tecnoambi

Uploads from Fernando Sergio!: [Freela] Della Photo

Uploads from Fernando Sergio!: [Freela] Della Photo

Tableless.com.br - Web Standards com Arroz e Feijão: 2010

WillianFernandes.com.br: Programador Lento x Produtividade x Cultura

Igor Escobar // Blog: Inscreva o seu grupo na Zend

Igor Escobar // Blog: Pense Fora da Caixa

fechaTag: Navegação rápida com o Google Public DNS

WillianFernandes.com.br: Ambiente de desenvolvimento Ruby on Rails no Mac OS Snow Leopard

O Vim

MacVim

Ruby on Rails

Atualizando o RubyGems

Atualizando suas gems

Atualizando o Ruby on Rails

MySQL

Testando tudo

Igor Escobar // Blog: Um pouco sobre certificações (W3C)

Uploads from Fernando Sergio!: Logotipo - Fernando Sergio

Uploads from Fernando Sergio!: [Agência Eko] Seboso - Logotipo

Uploads from Fernando Sergio!: [Agência Eko] Dixie Toga - Newsletter Natal

Uploads from Fernando Sergio!: [Visie] Bookess - Proposta de Layout

Uploads from Fernando Sergio!: [Visie] Proposta de Layout

Uploads from Fernando Sergio!: [Zip Planet] Brincando e Criando - Proposta de Layout

Uploads from Fernando Sergio!: [Zip Planet] TV Zip - Proposta de Layout

Uploads from Fernando Sergio!: [Kahek] Newton e Finato - Proposta de Layout

Uploads from Fernando Sergio!: [Kahek] Ciclos Academia - Proposta de Layout

Uploads from Fernando Sergio!: [Freela] Proposta de Layout

Uploads from Fernando Sergio!: [Centralize] Tintas São Carlos - Proposta de Layout

Uploads from Fernando Sergio!: [Centralize] Antonio Marcos e Vinícius - Proposta de Layout

Uploads from Fernando Sergio!: [Agência Eko] Baggio Advocacia - Proposta de Layout

Uploads from Fernando Sergio!: [Agência Eko] Studio S3D - Proposta de Layout

Uploads from Fernando Sergio!: [Agência Eko] Blinda Glass - Proposta de Layout

Igor Escobar // Blog: Manifesto Slow

O que é o Manifesto Slow?

Igor Escobar // Blog: William Bonner fala sobre o Twitter

DGmike: IcePHP agora é IceBaby

fechaTag: Ubuntu 9.10 boota rápido!

Igor Escobar // Blog: 10 Dicas JavaScript e Boas Práticas

1. Use o atributo defer para indicar o uso scripts externos no IE

2. Use o CData Section para previnir erros de validação XHTML Strict