Blog da Improve It

Mais uma gem no Brazilian Rails

Publicado por Marcos Tapajós há aproximadamente 1 mês.

O Brazilian Rails acabou de ganhar uma gem para lidar com CPF e CNPJ desenvolvida pelo Cássio Marques. Ele fez um post no seu blog explicando como utilizar.

http://tinyurl.com/cpfcnpj

Além dessa nova gem a versão 2.0.8 do Brazilian Rails recebeu algumas pequenas correções feitas pelo Akita e pelo Sergio Brant.

Gostaria de agradecer aos três pelas colaborações.

Tags , , , , ,  | nenhum comentário

Um telefonema vale mais que mil emails

Publicado por Vinicius Manhães Teles há 2 meses.

Há alguns meses nós colocamos no site da Patricia Figueira um formulário chamado "Também quero". O objetivo era permitir que fotógrafos interessados em ter um site como o dela preenchessem seus dados em um formulário e nos enviassem. Quem me deu esta idéia foi o Rafael Lima. Valeu, Rafael!

O "Também quero" foi mudando ao longo dos meses, assim como mudou minha forma de responder os contatos. Hoje são setenta pessoas cadastradas na fila de espera para o Beonthe.net. A maioria absoluta chegou até nós através do "Também quero".

Nas primeiras semanas, eu recebia as informações dos interessados e lhes enviava um email informando que o Beonthe.net estava em desenvolvimento, que seria lançado em dezembro, e que nós avisaríamos assim que estivesse perto do lançamento. Algum tempo depois, resolvi mudar a estratégia e passei a telefonar para as pessoas. A idéia era dizer a mesma coisa, mas eu acreditava que a interação pelo telefone seria mais rica. Desde então, o resultado tem sido incrivelmente positivo.

A coisa funciona assim: eu ligo para o interessado, explico quem sou e que estou ligando em resposta ao interesse que foi manifestado no site da Patricia. Em seguida, peço que a pessoa me explique o que está buscando, em termo de site. A maioria diz que gostaria de ter um site igual ao da Patricia, pois ele já atenderia perfeitamente suas necessidades.

Passada essa apresentação, dou uma explicação geral sobre o trabalho que fizemos para a Patricia e os resultados que ela obteve até o momento (sobretudo em termos de volume de novos negócios). Finalmente, explico o que estamos fazendo em termos de produto e o que a pessoa poderá esperar dele. Por fim, dou duas más notícias: a primeira é que o produto só será lançado em dezembro e a segunda é que o preço também só será divulgado em dezembro.

Nestes papos, tenho aprendido muita coisa. Ja conversei com pessoas de todas as partes do Brasil. É muito interessante escutar sobre o mercado destes fotógrafos, a visão que eles têm de seus negócios, o quanto eles acreditam que a internet poderia ajudá-los e mais um monte de coisas.

Em quase todas as ligações o resultado que obtenho é o mesmo. A pessoa fica feliz por eu ter me dado ao trabalho de ligar e explicar detalhadamente o que estamos fazendo. O papo é informativo, mas ao mesmo tempo, o simples fato de eu escutar o fotógrafo, tentar compreender sua realidade, e mostrar como poderíamos ajudá-lo, faz com que se crie um relacionamento muito mais poderoso que o que seria possível através de um email. Ao fim das conversas, o que mais ouço é eles dizerem que não vêm a hora de começar a usar o produto. Praticamente todos dizem que estão ansiosos e que só não usariam se realmente o valor da mensalidade fosse muito acima de seus orçamentos. Em suma, a sensação que tenho ao final de cada telefonema é que acabei de ganhar um amigo, além de um cliente.

O detalhe interessante é que fazer essas ligações vai totalmente contra a minha natureza. Até prova em contrário, sou extremamente introspectivo. Aprendi a ser sociável, na medida do necessário, mas é muito mais natural para mim lidar com computadores do que ficar de bate-papo com pessoas que não conheço. A conseqüência disso é sentida até mesmo no nível físico. Sempre que faço essas ligações, começo a suar muito. Provavelmente porque isso representa um enorme esforço para alguém com a minha natureza introspectiva. Eu até brinco aqui com o pessoal que a hora das ligações é a hora do suadouro. :-)

Apesar de suar a camisa, literalmente, continuo ligando para os interessados porque o resultado é fantástico e cada vez mais gosto de escutar o que eles têm para contar. Além disso, de um modo geral, o feedback deles tem nos mostrado que estamos no caminho certo e isso, naturalmente, nos deixa ainda mais motivados. Ao mesmo tempo, isso tem criado em mim um sentimento cada vez maior de responsabilidade e até uma leve apreensão sobre o que estamos criando. Percebo que estamos fazendo algo que pode se tornar bastante grande e mais significativo do que estejamos imaginando neste momento. É uma percepção ao mesmo tempo assustadora e empolgante. O fato é que cada vez mais acordo preocupado em começar a trabalhar logo e com o maior cuidado possível para que tudo funcione na hora em que for lançado.

Há pouco mais de uma semana tínhamos cinqüenta pessoas na fila de espera. Agora são pouco mais de setenta e todo dia chega mais gente. Acho que teremos um ótimo número na época do lançamento. O overhead de ligar para cada uma dessas pessoas não é desprezível. É comum eu passar de 15 a 25 minutos no telefone com cada uma. Portanto, isso toma um tempo razoável do meu dia. Não sei se vai dar para continuar com esta prática. Mas, tanto quanto possível, tentarei manter a prática.

Essa história toda me fez comprovar mais uma vez aquilo que eu sempre falava nas minhas apresentações de XP: que o meio de comunicação tem importância fundamental nos resultados que buscamos. A riqueza de cada uma dessas ligações me faz pensar que, assim como uma imagem vale por mil palavras, um telefonema pode muito bem valor por mil emails.

Tags ,  | 9 comentários

Integration Plugin no Github

Publicado por Marcos Tapajós há 2 meses.

Acabamos de migrar o Integration plugin para o Github. As instruções de instalação podem ser conferidas na página do projeto em:

http://integration.rubyforge.org/

A página do projeto no Github é:

http://github.com/tapajos/integration

Tags , , , ,  | 3 comentários

Margens na tag HR: um caso resolvido

Publicado por Leandro Mello há 3 meses.

Basicamente, o tapa na cabeça que faz o IE se comportar direitinho é o display: block. Depois dessa, você põe a margem que quiser no <hr />.

Sou dos que usa a tag <hr /> para dividir seções. É semanticamente mais coerente do que separar usando as próprias bordas dos divs, fica melhor quando se vê o HTML sem CSS, essas coisas que já se discute à beça por aí. Aprendi a apreciar sua utilidade.

Mas o fato é que é enjoado dar estilo a esta tag. Para cada browser devem-se editar atributos diferentes para se alcançar um mesmo efeito. Enfim, com algum jeitinho, deixa-se o <hr /> com a mesma cara em todos os browsers.

O que mata mesmo, o que deixa fóruns de cabelo em pé é a tal margem que fica em volta do <hr /> no IE. A margem no IE é teimosa, indestrutível, incontrolável, inestilizável. Por todo lugar que eu procurasse, as pessoas decidiam seguir com as margens mesmo, e os mais persistentes chegavam ao ponto de inserir o <hr /> num <div> para conseguir dar o estilo que quiserem. Ou seja, uns desistiam muito fácil, outros recorriam a medidas desesperadas para fazer a coisa de qualquer jeito.

Um dia encontrei dois posts que se aproximavam da solução. Sozinho, nenhum dos dois resolvia o caso. Mas juntando os dois funcionava! Fiz os testes e, de fato, misturando os dois raciocínios eu conseguia a medida que eu quisesse em qualquer browser que fosse — até zero. Mas, numa jogada um tanto infeliz, não salvei os posts nos favoritos, nem salvei o arquivo de testes. Uma resposta bastante procurada, e eu a perdi de bobeira...

Este artigo é sobre o meu caso: eu queria usar o <hr /> livre de divs sem sentido, e com margem zero; até no IE. E, sobretudo, o artigo é para deixar a resposta num lugar seguro e ao alcance de todos. Agora que eu lembrei a solução, não perco mais.

“Pescotapa”

Depois que perdi de vista os posts e as semanas se passaram, tudo o que eu lembrava é que o Internet Explorer precisava de um tapa na cabeça: era um atributo nada intuitivo e totalmente inesperado, que surpreendentemente o fazia acordar para a realidade. Basicamente, o tapa na cabeça que faz o IE se comportar direitinho é o display: block. Depois dessa, você põe a margem que quiser no <hr />.

Vai entender. O <hr /> já é um elemento em bloco. Tem toda a cara de elemento em bloco. Pula linha em cima, pula linha embaixo, não tem nada de inline. E é por isso que os fóruns tanto rodam atrás de uma solução: poucos suspeitariam que é necessário lembrar a ele que de fato é um bloco. Dizer display: block seria redundante e desnecessário. Mas o danado do IEca faz questão disso para se dar conta de que “ah, é, é verdade...”.

Como aconteceu comigo:

Vamos ao meu caso. Eu pretendia inserir umas tags <hr /> no site da fotógrafa Patricia Figueira, como experimento para implementação futura no próprio site e em nosso produto em desenvolvimento, o beonthe.net.

O primeiro passo foi inserir tags <hr /> nos espaços entre cabeçalho, conteúdo principal e rodapé. Vamos ao HTML:

<div id="header">
  (conteúdo do cabeçalho)
</div>
<hr />
<div id="main_content">
  (conteúdo principal)
</div>
<hr />
<div id="footer">
  (conteúdo do rodapé)
</div>

E logo surgiu a linha cinza entre os divs. Ficou assim:

Safari: O hr foi inserido corretamente.

Opera: O hr também foi inserido corretamente.

Firefox: O hr foi inserido corretamente como os outros.

Internet Explorer 7: O hr foi inserido corretamente, mas deixou margens que afastaram os conteúdos dos divs.

Internet Explorer 6: O hr foi inserido corretamente, mas também deixou as mesmas margens que afastaram os conteúdos dos divs.

(Ah, o IE...)

Linhas inseridas, eu queria que cada divisória tivesse as seguintes características:

A primeira tarefa é simples. Na folha de estilos application.css, usamos:

hr {
  clear:      both;
}

Nota: Depois vi que, para limpar de fato os floats do div#main_content, foi necessário pôr os hr’s dentro do #main_content, em suas extremidades, e não adjacentes a ele. Mas isto é papo para toda uma outra discussão e, para efeito de ilustração, vou continuar exibindo os hr’s como se estivessem entre o #main_content e o #header.

Agora vem a segunda tarefa: limpar os espaços que a linha gera no IE. Mas, como dito antes e tantas vezes blogs afora, a margem do hr no IE é turrona, implacável, indelével, inoxidável. Tem gente tentando de tudo: margin: 0, padding: 0, line-height: 0, font-size: 0, até overflow: hidden. Zerar as margens até ajuda com os browsers que seguem os padrões, mas nada acaba com o espaçamento no IE.

Então, em nosso application.css, cuidemos dos browsers inteligentes para garantir que não haja margens:

hr {
  clear:      both;
  margin:     0;
}

A explicação para as margens insistentes do IE é a seguinte: o IE renderiza o <hr /> com uma margem vertical de 7px a mais do que os outros browsers. Ou seja, se você escreve...

hr {
  clear:      both;
  margin:     7px 0;
}

... Você tem num browser decente o esperado: Exatamente 7px de espaço para cima e 7px para baixo.

E no IE, uma soma do que você inseriu mais a margem nativa: 14px para cima e 14px para baixo (7 + 7).

“Ora”, posso pensar, “Então é só escrever margens negativas para o IE”. Seria o intuitivo, mas o IE não trata de coisas como “o intuitivo”. Não funciona: o IE tira a margem superior, mas jamais elimina a margem inferior! Veja: O hr fica zerado em cima, mas o espaço de baixo dobra: ele assumiu os 7px de cima!

O pulo do gato

Entra na nossa folha de estilos application.css o atributo display: block:

hr {
  clear:      both;
  margin:     0;
  display:    block;
}

Este é o último atributo em que eu pensaria para eliminar margens. Não sei explicar por que dá certo. É contra-intuitivo. É redundante. É idiota. E mesmo assim (ou talvez por isso mesmo) faz o IE acordar.

Agora sim, podemos repensar a questão das margens negativas. Então corrigimos o application.css:

hr {
  clear:      both;
  margin:     -7px 0;
  display:    block;
}

E voilà! Finalmente, um <hr /> sem margens! Não é ilusão! É possível eliminar totalmente as margens de um hr no IE!

Comentário condicional:

O problema de usar margens negativas é que os browsers inteligentes as interpretam como elas são — negativas: Margens negativas no Safari.

Temos que definir um comportamento para cada tipo de browser.

O que eu costumo usar são comentários condicionais. Há quem diga que eles são maus, mas até agora só têm me ajudado.

Vamos ao <head> no HTML. Lá inserimos uma condição para o IE:

<!--[if IE]>
  <link href="/stylesheets/application_ie.css" media="all" rel="stylesheet" type="text/css" />
<![endif]-->

Ela serve para chamar uma folha de estilo com regras específicas para o Internet Explorer: application_ie.css.

Nesta nova folha application_ie.css, aplicamos as margens negativas que tínhamos até então:

hr {
  margin:     -7px 0;
}

E pronto. Esta é a única regra que diferencia o <hr /> nos browsers inteligentes e no Internet Explorer. Agora podemos zerar as margens no nosso application.css:

hr {
  clear:      both;
  margin:     0;
  display:    block;
}

E o resultado é: consenso! Nos browsers inteligentes: (Aparência do hr no Safari. É a mesma do IE!)

... e no IE: (Aparência do hr no IE6. Agora o hr de todos os browsers tem a mesma aparência.)

Acabamento

Resta a terceira tarefa, que é deixar invisíveis as linhas divisórias. Isso é fácil com visibility: hidden:

hr {
  clear:      both;
  margin:     0;
  display:    block;
  visibility: hidden;
}

O que vai fazer com que o <hr /> fique invisível, mas ainda ocupando o espaço que ocupava antes, de modo que fica uma lacuna de 2 pixels entre o cabeçalho e o conteúdo principal: O hr agora sumiu, mas ainda ocupa o espaço que ocupava antes. Temos que nos livrar da lacuna.

Nota: Usar display: none não é útil neste caso porque cancela o atributo clear: both. E nós queremos que ele quebre os floats. Neste caso, é melhor ficar com visibility: hidden.

Nos browsers decentes, esta lacuna é devida à espessura da borda. Bordas de 1px em volta de um elemento com altura zero resultam em 2px de altura total. Um aributo de borda deve resolver:

hr {
  clear:      both;
  margin:     0;
  display:    block;
  visibility: hidden;
  border:     none;
}

A lacuna some no Safari e no Opera. Mas Firefox e IE precisam de mais uma forcinha. Lembre-os que a altura do elemento deve ser nula:

hr {
  clear:      both;
  margin:     0;
  display:    block;
  visibility: hidden;
  border:     none;
  height:     0;
}

No Firefox resolve. Mas no IE a lacuna, em vez de sumir, fica reduzida a 1px (Ah, o IE...). Isso porque nele as bordas não são definidas pelo atributo border, mas pelo atributo color (já mencionei que o IE não trata de coisas como “o intuitivo”?). Como não dá para “zerar” a cor para sumir com a lacuna, o jeito é retocar as margens que deixamos no application_ie.css, contribuindo para as margens negativas com 1px em cima ou em baixo:

hr {
  margin:     -8px 0 -7px 0;
}

E eis o resultado final: Em todos os browsers, uma linha divisória sem margens e invisível. Missão cumprida.

Conclusão

Este foi o meu caso bem específico com a tag <hr />. Se você for uma das pessoas que se descabelavam por causa das margens teimosas no IE, saiba que há solução. Não é preciso desistir e adaptar seu precioso layout para se conformar com as margens, nem é preciso inserir a tag num <div> só para ela. Boas práticas já!

Espero ter contribuído para diminuir sua dor de cabeça. A resposta está agora aqui, para todo o mundo. E breve você a verá implementada no site da Patricia Figueira e no beonthe.net. Mas se este post não resolver o seu caso específico, escreva. Vamos juntos pensar em soluções para dominar o <hr /> — e, quem sabe, só quem sabe, o Internet Explorer.

Tags , , , ,  | 3 comentários