Marcus VBP

Continuando o post passado, segue as minhas opniões sobre as palestras da parte da tarde do 13º Encontro de Web Design.

Palestra 4: O mundo é plano, a cauda é longa... e você ainda é o mesmo? (Chico Baldini) - Uma palestra muito boa do Chico Baldini, da W3haus, sobre um assunto deveras interessante, a Long Tail.

A Cauda Longa é um termo referente à uma parte de um gráfico Popularidade X Produtos onde os dados são classificados de forma decrescente.

Segundo a Long Tail, existem poucos produtos que fazem muito sucesso, e representam uma grande parte do gráfico. Mas existem também uma série de pequenos produtos, que vendem pouco mas tem sua parcela fiel de admiradores, que não podem ser ignorados, pois apesar de pouco populares, juntos acabam representando uma boa parcela do gráfico.

Sua palestra falou que para fazer sucesso e ser bem sucedido, você não precisa estar disputando entre os grandes no "pescoço" do gráfico, mas achar o seu nicho. E se seu nicho for pouco explorado, melhor ainda. Ele mostrou como exemplo a própria W3haus, que após abrir um escritório em Londres, descobriu que existe um nicho na produção de sites voltados para crianças, e foi criada a W3haus Kids.

Esta foi uma das melhores palestras, se não a melhor. Definitivamente, foi a palestra que mais me interessou em saber mais, para tentar aplicar na minha carreira.

Palestra 5: Comunicação Interativa - (Raphael Vasconcelos): Esta foi uma palestra muito divertida, foi a mais aplaudida e provavelmente foi a que mais fez sucesso. Mas ela foi de certa forma polêmica em vários pontos. Raphael Vasconcelos, da Agência Click, falou de como os usuários eles gostam de interação, e que a marca/produto/empresa precisa dar esta interação, e participar dela. Eu concordo com que ele disse nesse ponto.

Só que teve algumas coisas que realmente me incomodaram. Coisas pequenas, mas relevantes. A maioria referentes aos exemplos fornecidos por ele, e da forma que eles foram passados. Tenho certeza que isso é pelo fato que Raphael é Publicitário, e convenhamos, publicitários em geral não entendem o que é internet.

Uma prova disso é que muitas vezes ele se referia a um vídeo como um "site". Ele apresentou vários briefings, e um deles era uma marca de chocolates que queria aumentar as vendas. Então ele mostrou a propaganda que o chocolate vinculava, de gosto duvidoso e até suspeito. E depois mostrou um vídeo sensacional, muito engraçado, onde um gorila tocava bateria. Só isso. Mas chamava muito atenção e é altamente virótico, é evidente que os usuários iriam criar versões remixadas do vídeo. E esse foi o grande sucesso da peça publicitária. Perfeito. Mas isso não é um site. O fato de que provavelmente estava em um domínio na internet e ser exibido no navegador não classifica nada como um site. Se o gorila tivesse sido exibido como comercial de TV (e provavelmente foi)

Outro "site" que ele mostrou foi um vídeo promocional de um carro que não lembro a marca, e o "telespectador" tinha várias opções para tentar desatolar o carro. Definitivamente, muito legal. Muito bem produzidos. A publicidade no Brasil não ganha prêmios internacionais à toa. Só que aquilo não se pode definir como um site.

Vocês devem estar pensando que sou muito chato, mas caras, é meio esquisito ir para um evento de Web Design, e ver o termo web site sendo aplicado de forma tão indefinida e errônea.

O Raphael deu outros exemplos de interatividade nas mãos dos visitantes, como por exemplo um site da Nike (genial) e também um site de vendas de camisas japonês, que ficou muito bom, mas pessoalmente eu não gostei, por motivos próprios.

Mais uma coisa que vou falar da palestra dele, que é para se pensar. Na peça do Carro, ele afirmou que a campanha teve mais de 100 mil e tantas exibições e por isso foi um sucesso, correto?

Não necessariamente.

Não dá para definir o sucesso de qualquer campanha sem analisar os dados mais profundamente. Saber qual o perfil do visitante. Se 80% desses visitantes não tiver capital compatível com o produto, gente meramente atrás de um vídeo engraçado para fugir do trabalho, então na melhor das hipóteses a campanha só fez uma popularição da marca, a tornou conhecida.

Eu confesso que estas impressões são baseadas puramente no achismo. Não sou da área de publicidade e propaganda, sou um tecnólogo. Lido com tecnologia. Posso estar falando um monte de bobagens.

Conclusões finais

Como havia dito na primeira parte da resenha, achei o evento positivo sim, apesar de alguns pontos baixos. Eu ia reclamar que o evento é muito atrelado à parte visual e publicitário da profissão, e esquece de coisas que têm muita importância, como SEO, o aumento crescente do aspecto social da internet, as startups, web services... Mas eu me lembrei que é um evento de WEB DESIGN, então vou ficar quietinho :-p

Como de Praxe, posto aqui minhas opiniões à respeito do 13º Encontro de Web Design, cuja etapa da cidade de Recife (capital de Pernambuco) eu participei. Este foi o primeiro EWD que eu participei, então a única coisa que tenho para comparar são as opiniões dos blogs que eu visito e que participaram dos eventos passados.

Visão geral do evento (organização, estandes, sorteios, etc): De uma maneira geral eu gostei do evento. Foi muito bom encontrar com amigos, ex-professores, ex-colegas de trabalho e muita gente da área que você não conhece. Houveram atrasos nas palestras e outros contra-tempos, mas não lembro de ter parcipado de um evento que não tivesse inconvenientes do tipo. Os atrasos e problemas estavam dentro do esperado.

Várias empresas marcaram presença com estandes: IG, PagSeguro, UOL Host, HostNet, LocaWeb, Tecla, Verisign e CobreBem, além da própria Arteccom com a revista Web Design, todas com seus brindezinhos (geralmente canetas e blocos de anotações, algo sempre útil em eventos - O PagSeguro deu uma bolinha anti-stress e a Verisign uma camiseta) e sorteios. Tive até a sorte de ser sorteado pela Verisign, e ganhei um caneca e um porta-retratos (não, não era digital, era um simples analógico - mas é lindo).

Estivemos bem servidos de água e café. Faltou apenas um lanchinho, mas dada a quantidade de pessoas, eu acho que talvez até que houvesse algum, mas acabou antes de eu perceber sua existência. O único ponto negativo que posso levantar é o espaço pequeno onde os estandes ficaram confinadoos. Apesar de podermos andar livremente pelo Hotel, ninguém se afastava muito, e a maioria das pessoas ficava no cubículo dos estandes. Ainda bem que não levei o notebook, ele seria um fardo pesado, e eu não teria a oportunidade de utilizar.

Palestra 1 - Flashback! (Ronaldo Gazel): A primeira palestra foi bem interessante. Eu sempre achei que nos cursos técnicos e superiores de Web Design, sempre falta uma cadeira de história da arte, para mostrar toda a carga artística e histórica que o Design carrega. Teoria sempre é bom, mostra que criar não é apenas desenhar vetores ou pixels. Apesar do que acabei de dizer, o palestrante diz que algo só é arte porque alguém diz que é. Como exemplo ele mostrou um mictório que foi assinado por um artista e colocou em uma mostra. A idéia que ele quer passar é que não podemos deixar de inovar. Apesar de que para mim, uma privada sempre será uma privada.

O assunto é interessante, mas não nego que é um assunto enfadonho, e muitas pessoas bocejaram durante a palestra, inclusive eu, mas é normal depois que você viaja 2 horas em uma Van.

Tenho algo para reclamar desta palestra e também das outras, e muitas pessoas vão achar que é implicância minha por não curtir a tecnologia. Mas o Ronaldo e outros palestrantes mostraram alguns sites para exemplificar o que queriam passar, e todos eram sites em Flash. Não é que eu tenha realmente algo contra o Flash, mas da forma que se mostra nos eventos, parece que o caminho natural da Web é esta tecnologia, e quem trabalha de verdade com web sabe que não é assim que a banda toca. Ronaldo Gazel falou tanto em criatividade, mas não mostrou nenhum site que não fosse exclusivamente em Flash. Será que ele quer dizer que um site em HTML não pode ser criativo?

Palestra Virtual de 15 minutos sobre o Joomla (Ricardo Accioly): Uma palestra curta, e sem interatividade, mas levantou pontos interessantes que valeriam a pena pensar a respeito. Não uso o Joomla, mas não tenho nada contra o mesmo. O palestrante, Ricardo Accioly da NOIX, falou de alguns tabus e preconceitos a respeito do uso de CMS. Por exemplo, ele disse que o Joomla, assim como qualquer outro CMS moderno, é totalmente flexível e não vai matar ou impossibilitar o layout do seu site. Teve um ponto que o Ricardo não falou, mas tenho certeza que falaria se estivesse ali ou se tivesse mais tempo.

Quando as palestras da manhã terminaram e estávamos saindo para almoçar, comentei com um colega lá que utilizava um CMS, e ele disse que criava os próprios códigos, e que mexer com o código dos outros não era com ele. Não discuti com ele mas notei que este também é um preconceito de muitos desenvolvedores e programadores, praticamente o mesmo levantado pelos designers. Isso é assunto para um post.

Palestra 3 - Saindo da superfície: soluções estratégicas (Irving Suna): Uma palestra bem legal do cara da Fishy. Ele falou que sites não podem ter apenas uma aparência legal, mas também devem aproximar o cliente/marca/produto com o seu público. Nada que já não se sabe, mas é sempre bom ressaltar, especialmente para os que acham que uma carinha bonita é o suficiente para ganhar o cliente. Ele mostrou vários exemplos, tanto de sites de jogos em flash, para meninas, quanto o site do Plaza Shopping.

Pessoas, este artigo se tornou grande demais para escrever, mais tarde eu faço a parte dois!

Faz muito tempo que eu não escrevo sobre CSS ou mesmo tutoriais de caráter geral no blog.

Parte da culpa disso é o tempo, mas também tem o fato que hoje, layouts utilizando CSS são a norma, e não há tanta necessidade de divulgar os Padrões Web. Além disso, existe material extenso espalhado pela rede, e não quero ficar replicando este conteúdo.

Contudo, esta semana eu parei para estudar um tema do meu gerenciador de conteúdo preferido (sim, é o Drupal), pois descobri que um problema que acontece eventualmente em meus layouts CSS, não ocorre no tema.

Existe várias maneiras de se resolver o mesmo problema usando CSS, e provavelmente o meu problema não afeta todos os desenvolvedores de internet. Contudo, a minha forma de criação de layouts de 3 colunas é uma das mais comuns, então esse problema eventual (que na verdade não é um problema, é o comportamento esperado, mas é um pé no saco) deve afetar várias pessoas

Que problema seria este? É que quando você cria um layout de três colunas (duas menores laterais e 1 central, mais larga), você pode colocar elementos com a propriedade clear:both na coluna central, ou seu layout irá quebrar.

Descrição do problema passo-a-passo

1. Você cria um layout simples em CSS, de três colunas, que tem a seguinte estrutura:

e utilizando o seguinte CSS para formatar:

O resultado até agora pode ser visto aqui.

2. Você adiciona uma caixa, feita com uma div de dimensões fixas e com float: left. Só que como é uma div flutuante, a caixa excede as dimensões do seu container. Veja um exemplo aqui.

3. Eu não quero que isso aconteça. Quando você não quer que um elemento flutuante invada ou ultrapasse um elemento, você pode usar a propriedade clear. clear: left impede elementos flutuantes à esquerda do elemento formatado, clear: right à direita, e both de ambos os lados. Eu posso aplicar clear: both (ou left, ou right) a por exemplo, àquela linha "hr" que sucede a caixa. Só que isso faz com que o hr seja exibido apenas depois das colunas laterais (que são posicionadas com float), gerando um buraco enorme na página. Veja um exemplo.

Uma solução alternativa seria definir uma altura mínima à div que engloba a caixa, mas esta solução não é muito boa, especialmente se você está lidando com elementos de tamanho variável.

A solução Passo-a-Passo

A solução é bem simples. Em vez de simplesmente tentar contornar o problema, vamos mudar a forma como a página é construída. O resultado vai ser o mesmo.

1. Pegue a mesma estrutura da página utilizado nos exemplos 1, 2 e 3, e adicione mais uma div, englobando a coluna central. Eu chamei esta div de "center".
2. Posicione as colunas laterais naturalmente, ou seja, utilizando float.
3. Aplique uma margem negativa esquerda e direita à div center equivalente às larguras totais das divs laterais. Aplique também à esta div a propriedade float: left e width: 100%.
4. Na div da coluna central (que eu chamei de conteudo), adicione uma margem esquerda e direita equivalente às larguras totais das divs laterais.

Basicamente só seria necessário este procedimento para que o layout funcione certinho, mas infelizmente devido à interpretação equivocada do modelo de caixa do IE6, talvez seja necessário adicionar um CSS Hack, que pode ser feito colocando um "_" no início da propriedade, ou o mais recomendado, utilizar um arquivo à parte e usar comentários condicionais para inserí-lo na página. Antes que eu esqueça, vejam o resultado no exemplo 4.

Obviamente, ambas as formas de criar o layout estão corretas, e possuem as suas vantagens e desvantagens. A que eu utilizava anteriormente é muito mais simples de ser feita, mas apresenta seus problemas com elementos com clear. A segunda é mais complexa, requer mais divs e mais linhas de CSS, mas não tem problema com clear. Fica como mais uma opção para desenvolver o layout.

A sim, antes que eu esqueça, a solução apresentada aqui funcionou em todos os navegadores (testado usando o site Browsershots), e também funciona com layout fluido e com layout de apenas duas colunas.