diogobaeder - Antigos

Como alguns já devem estar sabendo, estou mudando com a Priscilla para um apê novo. Quem já passou por isto sabe que é uma experiência e tanto - procurar o apê, negociar (e sacar as nuances de negociação de imóvel), cuidar da documentação, reformar...

Bom, é trabalhoso, mas mesmo assim a experiência é muito interessante e regozijante. Conseguimos um apê totalmente cru - sem piso, pintado todo de branco, sem luz, apenas com espelhos de interruptor/tomada, pias e louça. O bacana disto é que é o cenário perfeito pra gente reformar da forma que a gente quer - vamos poder escolher cores de parede, piso, armários etc -.

Bom, conforme a gente for avançando, vou postando novos artigos, aqui... de repente a experiência pode ser construtiva pra outras pessoas que estejam querendo mudar. :-)

Fui!

Embora o CSS seja uma linguagem de estilização de fácil compreensão, sempre tem algum truque interessante para aprender e que vá ajudar na hora de montar layouts de páginas Web, principalmente quando você quer chegar num resultado visual e com as propriedades normais da linguagem não é possível. (Alerta: evitem hacks, exceto quando se fazem realmente necessários!)

Um desses resultados desejados é margem superior de um elemento de exibição em bloco ("display: block"), mas tendo como referência a parte inferior do último elemento acima dele. O que acontece quando elementos dentro deste elemento de cima são postos a flutuar, com, digamos, um "float: left"? PAM! (Som de mensagem de erro do Ruindows) O elemento de cima pára de considerar a altura real dos elementos flutuantes e deixa de ser referência efetiva para a margem superior do elemento de baixo. Isto às vezes é um efeito muito indesejado, pois a caixa blocada é sobreposta pelos elementos flutuantes.

Existe uma primeira alternativa que funciona muito bem: é o famoso clearfix. Ele se apresenta de diversas maneiras, e o que costumo usar é um elemento blocado vazio com um mero "clear: both", pois, assim, este elemento não-flutuante é empurrado pelos flutuantes, e a caixa envoltória volta a considerar a altura composta por seus elementos internos. Esta solução é simples e fácil de entender quando encontrada, mas apresenta um problema: é preciso inserir um elemento extra na marcação, o que quebra a semântica do código de marcação.

No entanto, durante um papo após uma apresentação de produto que fiz na reunião de webmasters do UOL, recebi uma dica muito bacana de um amigo de lá, o Renato Rodrigues (salve, Ambi!): "overflow: auto". Só. Simples, funcional. Sem quebra de semântica. ;-)

Como funciona: você aplica esse par propriedade-valor no elemento contêiner dos flutuantes, e ele volta a considerar a altura composta por eles. Problema de margem superior do elemento abaixo resolvido.

Só que, ainda assim, é importante considerar uma coisa: você deve ter precaução usar este truque em conjunto com uma altura definida e fixa da caixa-contêiner, caso contrário ela passará a ter barras de rolagem - neste caso, é melhor se ater ao clearfix, mesmo... -.

Acabo de resolver um bug que estava me incomodando neste site. Toda vez que a interface é manipulada, aqui, as configurações de janelas são persistidas em cookies; Acontece que, cada vez que os dados eram persistidos por mim mesmo, eu não conseguia mais acessar o módulo administrativo, e, aparentemente, as configurações deste site estavam afetando outros sites quando usando o Google Chrome. Bizarro.

A solução exata eu não sei qual foi, mas tomei duas medidas para tentar chegar nela: reduzir o tamanho da string construída para cada config de janela, e remover caracteres estranhos dos nomes dos cookies (estava usando ":" e "-" dentro deles). Não sei qual dos dois foi decisivo para a solução, mas foram duas boas práticas que já deram um ótimo resultado. Além de reduzir o tráfego de rede - pois a cada requisição para páginas eles são enviados no cabeçalho HTTP -. ;-)

Coloquei meu site no ar estes dias, e, embora já estivesse esperando isto, acabei achando-o um tanto lento para carregar e construir toda a interface - o principal motivo é todo esse lance das janelas e preparação para persistir as modificações do usuário -.

Comecei a explorar o que meu servidor de hospedagem (WebFaction) oferece, e seguir as guidelines do Yahoo! e do Google para tentar otimizar o carregamento de arquivos de mídia - leia-se CSS, JavaScript e imagens -.

Um dos passos mais importantes foi usar um servidor alternativo ao Apache, o ngynx, que é excelente para servir conteúdo estático - veja aqui a comparação entre os dois neste contexto -.

Outro passo foi usar um domínio diferente do meu original para carregar as mídias; Pelo fato de elas serem carregadas em outro domínio, os cookies não são enviados na requisição nem recebidos na resposta HTTP.

Em conjunto, estas duas medidas fizeram com que houvesse uma melhoria gritante de performance no site. Porém, ainda desejo criar uma forma de fazer compressão automática de JavaScript e CSS, usando o YUI Compressor. Quando tiver resultados, postarei aqui novamente!

Vamos tocar, com a Hijos, no recital do Paulão, batera da banda... cara, faz tempo que não toco com eles, confesso que estou nervoso e ansioso... preciso estudar que nem um doido pra me reabilitar... hehehe...

Este website foi feito em Django. Confesso que estou apaixonado tanto pela linguagem Python quanto pelo framework; Nunca tive tanta facilidade de criar uma aplicação web, e tão rápido! :-) Enfim, recomendo a todos que desenvolvem nesta área... muito bom mesmo!