Poucas palestras se destacaram nos dois dias.
Primeiro dia com falta de organização tremenda. Nos crachás não existia o nome de cada participante, houve um atraso enorme no credenciamento. Até 4 dias antes do evento, só tinha 250 participantes. Na última hora, o número quase dobrou, e pelo visto eles não tiveram suporte para esse número de pessoas.
E o pior de tudo, wifi, só se você pagar! 60 reais por 2 dias! (update: O valor inicial era de 20 reais a hora!) Evento de internet sem internet, que lindo. Evento que custa 1200 a entrada (ou 850 se você comprou antes do dia 27). Simplesmente ridículo.
Mas calma que isso ainda piora, o coffe break foi bom, mas o almoço foi praticamente igual o coffe break, mas com uma variedade maior e com uma mesa de doces. Eu esperava um almoço de verdade, e não simples lanchinhos. No segundo dia não teve coffe break na parte da tarde e nem teve comida no coquetel!
O workshop de landing pages teve um limite para 100 pessoas! E não tinha nenhum lugar que avisasse isso. Vi uma fila se formando, e pensei: Só pode ser coisa de paulista, que adora fila. Fui no banheiro e quando voltei, não pude entrar pois estava cheio! Mais de 200 pessoas para ver o workshop, e somente 100 vagas. Muita falta de planejamento.
Outro absurdo, foi determinadas palestras terem somente 10 minutos de duração. Certos assuntos é impossível cobrir tudo em tão pouco tempo!
Outra coisa ruim foi que determinadas palestras foram praticamente inúteis. Pelo visto para ver uma SMX boa eu vou precisar ir para a versão advanced fora do Brasil.
Mas felizmente teve palestras boas. No dia 1, foi só a de linkbuilding que foi excelente, mas infelizmente só teve 45 minutos para a palestra! 3 palestrantes com 10 minutos cada para falar de linkbuilding, e depois 15 minutos de perguntas e respostas. Ainda bem que conseguiram tirar leite de pedra e o workshop foi bom, Menos o do mercado livre, que achei bem fraco.
Agora que o “rant” inicial passou, vamos a um passo a passo do evento:

Dia 1:

O primeiro dia foi muito mal organizado. Só tinha 2 pessoas fazendo o credenciamento, o que resultou num atraso de 1 hora ou mais. Por um lado isso foi bom, pois eu calculei mal o tempo de deslocamento do transporte público paulistano, além de eu ter confundido o horário de credenciamento do dia 1 com o dia 2, o que fez com que eu chegasse meia hora atrasado.

Começou uma apresentação corrida com cada organizador, coisa de 1 minuto cada: Tomy Lorsch, Rafael Fernández Tamames e Thiago Bacchin. Bola fora para o Rafael Fernández e para o meu espanhol: Não consegui entender nada do que ele falou o evento inteiro. Ele fala muito rápido, e eu não entendia nada. Pelo menos ele não fez palestra nenhuma, e as únicas falas dele eram sobre quem iria ser o próximo palestrante, ou quanto tempo iria ter de intervalo.

Depois foi um keynote da Susan Humphries, Head of Asia Pacific Latin America Sales Product Operations do Google
Keynote bom e interessante. Ela comenteou sobre image search, tecnologia speech to text e diversos outros aspectos de busca.

Na parte de pergunta ela sempre falava “That’s a great question!”, e meio que se esquivava das perguntas quando respondia.
Depois de ver todos os palestrantes, eu percebi que o “That’s a great question” é algo que todo norte americano fala. Como se fosse uma mania deles.

Logo depois foi o keynote do Barnney Pell, CEO da Powerset, falando sobre busca semântica, e sobre a ferramenta de busca semântica deles (www.powetset.com). Muito interessante, muito mesmo! Atualmente ele só busca na wikipedia, e brincando no site você percebe o seu potencial. Ele estava visivelmente muito feliz, provavelmente porque a compra da companhia dele pela Microsoft tinha se concretizado a poucos dias. Se eu fosse CEO de uma startup que começou em março, e é comprado pela Microsoft 5 meses depois, eu também estaria muito feliz!

Um exemplo que ele utilizou: Ele mostrou uma frase, depois separou ela por sujeito, substantivo e verbo, e fez relações com cada bloco.
ex:

Lula está no hospital tratando da pneumonia.

Nesse caso ele sabe que Lula = presidente, pneumonia é a doença e que ele está tratando ela no hospital. E que essa tecnologia só é possível hoje por causa do poder computacional atual, que ela seria impossível a alguns anos atráz.

Avançado - Search Engine Friendly: Desenvolvendo sites amigáveis aos Sites de Busca

Falaram o básico, até o básico demais

Avançado: Workshop Link Building

Foi bom, mas o tempo foi muito, muito curto. Palestra de linkbuilding de somente 10 minutos! Um Absurdo.
Depois foi uma palestra falando da Tecnisa, eu achei muito, mas muito interessante, pois trabalho para o concorrente deles =P
Terminou com uma palestra do Mercado Livre, que eu já não me recordo de muitos detalhes.

Avançado: O que há de novo com os algoritmos?

Médio. Fico devendo um update para colocar mais detalhes.

Avançado: CSS, Ajax, Web 2.0 & Sites de Busca sem conflitos

Foi uma piada. O cara do google até foi irônico com o fato de ter que fazer uma palestra de 10 minutos. Falou sobre flash indexável.
Depois foi um cara falando sobre css, mas não teve nada de útil.

Avançado: Workshop Landing Pages

Vide reclamação no início do post.

Fui ver a palestra: “Resultados do planejamento eficiente de Search Marketing”, e fiquei metade do tempo digitando esse texto.

Business & Intermediário: Otimização de campanhas de Links Patrocinados: como melhorar suas conversões
Jabé, Jabá, Jabá. Já disse que teve Jabá?

Avançado: Workshop Clinica SEO

Fraco. Não vi nada de novo. Bill Hunt pegou diversos endereços com a platéia e começou a fazer uma análise SEO deles. Bola fora para algum engraçadinho na platéia que passou um site pornô para ele analizar.

Dia 2:

Quebrei algumas leis da física para poder chegar no evento - culpa do tranporte público paulista -, e por causa disso perdi os primeiros 5 minutos do Keynote da Melanie Mitchell.

Keynote da Melanie Mitchell e Keynote do Ettore Leale (Yahoo):
Sinceramente, não lembro muito bem como foi o keynote dos dois. Vou fazer uma força para lembrar e depois dou update nessa parte.

SEO & Analytics: WebStandards e Usabilidade para SEO

Foi bom, mas infelizmente nada de novo para mim.

SEO & Analytics - Conteúdo é Rei: Como fazer do seu conteúdo o rei dos rankings

Teve uma das melhores palestras do dia, a do Rob Snell, e a próxima do apontador também foi muito boa, mostrando a estratégia do apontador de gerar conteúdo. Essa palestra chamou tanta a atenção, que todas as perguntas foram para o palestrante! Mesmo a paletra do Rob Snell ter sido uma das melhores do evento inteiro.

SEO & Analytics - Black Hat SEO: O que não fazer

Na minha opinião, só a palestra do Bill Hunt foi interessante, a outra não foi média. Teve até um conteúdo duplicado entre as duas.

SEO & Analytics - SEO Tools: As melhores ferramentas de SEO

Piada do dia.
Palestra da Motoko: SEO para o Mercado Asiático?!?, só serviu de curiosidade, para saber que o Google ainda não domina o mercado asiático e que os caracteres orientais sofrem na área de Keyword.
A outra palestra foi um cara mostrando Extensões do firefox e sites com ferramentas free para SEO. E me chamam um cara de fora do Brasil para apresentar isso? Não comentou das ferramentas que eu mais uso, as da SEOMoz (Trifecta e keyword difficult), o Advanced Web Ranking e o Advanced Link Manager.

SEO & Analytics - A busca Universal e seus efeitos
Minha memória sobre essa palestra já está falha.

SEO & Analytics - A importância de Métricas eficazes nas suas campanhas

Palestra de uma mulher da webtrends, falando que iria ser demitida porque não recomendava o uso do webtrends para todo mundo, e depois foi o cara do Google, que fez uma enquete perguntando quem usava Google Analytics: 99% da sala respondeu que sim.

Business & Intermediário: Google University - Onde Buscar por Mais Resultados?

Resumo da palestra: Os produtos do Google são a reposta para a vida, o universo e tudo mais (que eles estão errados, pois o correto é 42).
Palestra média. Falou sobre adwords, analytics, inside search e optimizer. Definitivamente eu deveria ter ido na que falava sobre jovens e mídia social.
Pelo menos ganhei um cupom para fazer a prova do GAP, algo que eu vou fazer em 3 semanas, e economizo 50 dolares.

E em resumo foi isso. Apesar das partes horrivelmente ruins da SMX, algumas coisas foram boas. Agora é esperar a do ano que vem, e que eles não repitam os mesmos erros!

Para um resumo muito melhor e bem humorado do que foi a smx, eu recomendo veementemente a ouvir o podcast do pessoal do searchcast. Só um aviso, não ouça no trabalho, porque você vai ter que segurar as risadas. E são 1 hora e 22 minutos de risadas!

Principais tags, ou as tags mais usadas:

div: como o nome indica, é um elemento que fará a divisão de algo. É um elemento sem significado algum (isso é importante) e do tipo block.

Tio, Tio, o que é esse tipo block. Pequeno padawan, continue lendo até o final da lista dos elementos mais usados que depois eu explico tudo.

span: Outro elemento que faz divisão de algo. É um elemento sem significado algum e do tipo inline.

p: O elemento p é um parágrafo. É usado para fazer… Parágrafos!! É um elemento do tipo block.

h1, h2, h3, h4, h5 e h6: O h vem da palavra Header. Cabeçalho. Eles são usados para títulos. Só deve existir 1 h1 na página, normalmente o nome do site + uma pequena descrição ou a descrição mais importante do site. É o título mais importante. A ordem de importância vai caindo conforme os números. O uso do h2 até o h6 requer somente o bom sendo. Elemento do tipo block.
ex: h2 - títulos de seções, h3 - categorias, titulos de páginas internas, h4 - subtítulos de paginas internas

table: Tabelas. Serve para usar em dados tabulares. elemento do tipo block.
thead, tbody, tfoot, th: table head, table body, table footer, table header. Servem para dar sentido a tabela. E para ter mais liberdade na hora de aplicar o css.

a: Vem da palavra anchor, âncora. É um link. Altura padrão: 14px. elemento do tipo inline.

img: Imagem. elemento do tipo inline.

Listas: Por favor, leia esse artigo Ele explica tudo sobre listas de uma forma simples e eficiente.

Tio, Tio, mas eu não sei inglês Tio. Bem, problema seu O mercado de trabalho é cruel, pequeno Padawan, boa sorte.

Como estou de bom humor, um resumo do resumo:

Listas: Se não faz sentido ter bullets perto de um item, então não é uma lista.

São 3 tipos de lista:
dl (definition list)
ol (ordered list)
ul (unordered list)

dl: Atualmente é usado para qualquer tipo de par item-valor(es). Detalhe para o negrito em atualmente.

ul e ol: Se trocando a ordem dos itens também se troca o sentido da lista, então é uma lista ordenada. Caso não troque o sentido, é uma lista não-ordenada.

ex:
ul - Ingredientes de uma receita
ol - Descrição de como preparar uma receita
dl - FAQ da receita

fim do resumo

Com isso termina a lista dos elementos mais usados.

Tio, Tio, mas só isso? Sim, só isso. Simples, não?

Semana que vem tem mais!

Cenas dos próximos capítulos:

- Semântica
- Simplicidade. Quanto mais simples e enxuto, melhor e mais fácil será trabalhar no código.
- Diferença entre display: inline e display: block;
- Principais bugs do IE6 e seus fixes;
- Porque usar em, o que é em.
- Nomenclatura de classe e IDs

Críticas e Sugestões? Comente!

Em alguns também segue pequenos comentários sobre cada projeto. Eu também tomei a liberdade de excluir da lista os projetos que o pessoal da manutenção ou os programadores “destruiram” o código XD

http://home.dgabc.com.br/ (Fev-2008)
Esse site deu trabalho. Muito trabalho. Mas foi uma ótima experiência. O site inteiro é totalmente gerenciável, e o administrador escolhe entre 32 (+ ou -) tipos de templates possíveis, para cada bloco.

http://www.telewinshop.com.br/ (Jan-2008)
Esse e-commerce foi um site muito interessante de fazer. Layout 100%, que inicialmente não era, mas no final do projeto tive que adaptar e foi super simples.

http://www.ficsa.com.br/ (Feb-2008)
Site institucional, muito simples e fácil de fazer. Foi muito rápido também.

http://www.dietaantiinflamatoria.com.br/ (Feb-2008)
Outro site simples e muito fácil de fazer.

http://www.editoragente.com.br/ (Nov - 2007)
Esse site deu muito trabalho. Teve algumas mudanças no meio do projeto, o que só dificultou um pouco a entrega. Mas no final ocorreu tudo ok.

http://www.leilaomoha.com.br/ (Oct-2007)
Segundo hotsite para a EA Games. Outro site que deu gosto de fazer, e também foi fácil.

http://www.thesims2bonvoyage.com.br/ (Set-2007)
Primeiro hotsite para a EA Games. Essa não foi tão prazeroso de fazer quanto o do Medal of honor, e deu um pouco mais de trabalho.

http://www.avipam.com.br/ (Aug-2007)
Nesse site eu tive um pouco de trabalho, especialmente com a transparência do submenu e o bg das áreas internas.

http://www.sharpener.com.br/ (Dez-2006)
Primeiro e-commerce que eu trabalhei. Deu um pouco de trabalho.

Os sites abaixo eu não lembro nada de especial que tenha me marcado durante a realização dos projetos, então por enquanto fica só um link:
http://www.autofax.com.br/ (Jul-2007)
http://www.transauto.com.br/ (Apr-2007)
http://www.canon.com.br/ (Feb-2007)
http://www.jumpnext.com.br (Jan-2007)
http://www.aprseguros.com.br (Dez-2007)
http://www.tkl.com.br/ (Nov-2006)
http://www.5asec.com.br (Oct-2006)
http://www.itaiquara.com.br/ (Set-2006)

Explicação detalhada:
O png é descartado como opção de escolha, pois ele apresenta diferença nas cores entre os outros formatos no IE6. É uma diferença pequena, mas dependendo do lugar que você colocar o png, fica muito aparente.

Então a opção fica entre o gif e jpeg, com o png sendo usado somente para casos de transparência.

Eu sempre uso jpeg-60 (jpeg-high no photoshop), pois é a melhor relação qualidade/tamanho para jpeg. E para gif eu uso o padrão de 128 cores.

Ao escolher entre o tipo de formato, eu levo em conta os fatores abaixo:

- É uma imagem formada por texto? Então dependendo do tamanho final eu uso gif, pois a perda de qualidade é menor. Fica menos borrada a imagem.

Exemplos: Itens de um menu, imagens usadas em títulos com técnicas de image-replacement.

- É uma imagem formada por muitos detalhes de gravura e fotos? Primeiro eu vejo se o tamanho da imagem como gif é muito grande e se ele ultrapassa a quantidade de 128 cores do gif. Em 80% dos casos essa resposta vai ser sim, então eu salvo como jpeg-60.

Exemplos: Fotos de pessoas, paisagens, etc e imagens muito coloridas.

- Para imagens que vão ser usadas em repetição de background ou bullets, eu sempre utilizo gif, pois dificilmente ele vai ter mais que 128 cores na imagem, e o tamanho vai ser menor.

- Em imagens para email o conceito muda um pouco. O tamanho da imagem importa muito. Normalmente eu salvo como jpeg-45 ou menos, sempre prestando atenção na qualidade da imagem e fazendo um comparativo entre gif e jpeg para ver qual fica com tamanho menor e maior qualidade.

Verifico o psd, e para minha infelicidade, vejo que a fonte não é uma fonte padrão para a web.
Começo a fazer uma lista sobre o que tentar fazer no menu. Pelo modo como estava o menu, ele parecia ser gerenciável. Então eu descartei as técnicas de background-replacement.
Sobraram duas alternativas: siFR e conversar com o cliente para mudar a fonte. Fiquei brincando por 40 min com o siFR, e a combinação site 100% com o flash do siFR não ficou boa.
Depois de perder 40 minutos nisso, eu fiz algo que deveria ter feito antes, e perguntei se o menu era gerenciável. E ele não era. Nota mental: Deixar a preguiça de segunda de manhã de lado e sempre tirar as dúvidas antes de iniciar algum projeto.

Desse modo eu comecei a recortar as imagens para fazer um background-replacement.
Após recortar e salvar todas os 10 itens do menu, percebi que faltava o estado hover deles. Como no photoshop não tinha nenhum estado hover, comecei a fazer o padrão de link, deixar o texto com text-decoration: underground. Iria salvar 2 imagens, uma para cada estado, juntar elas e trocar o estado delas no :hover com background-position. Simples.

A visão dos próximos 20 minutos de tédio que seria pegar os 10 itens do menu, deixar eles com underline, salvar as imagens novamente e depois juntar todas, desencadeou uma epifania!
Ao invés de fazer mais 10 imagens e juntá-las para o menu, eu peguei cada imagem, fiz um traço transparente embaixo de cada texto, e no :hover eu somente dei uma cor de fundo para o link. Voi-lá! E está pronto um menu com imagem e um :hover comum de text-decoration: underline.

Como algo visual vale mais que mil palavras, segue abaixo um link com exemplo!

Exemplo de um css menu, utilizando uma única imagem com detalhes transparentes e o fazendo o hover com um background-color.

Testado no IE6, IE7, Firefox, Safari e Opera, somente no windows.
O único ponto contra dessa técnica é que a imagem não pode ter mais nenhum tipo de transparência.

A uns 6 meses atraz eu passei a adotar o ‘em’ para as fontes, em todos os sites que eu estruturo.

ex:

html { font-size: 62.5%; }

body { font-size: 1em; }

Do modo acima, como a fonte padrão dos browser é 16px, a fonte de tudo fica como 10px, ou seja, 1em = 10px. Então nos outros elementos, se eu quiser a fonte como 13px, eu faço 1.3m.

Se o usuário aumentar a fonte padrão do browser, tudo aumenta também. Útil para quem não consegue ler direito.

Há um pequeno problema com isso, já que um elemento filho herda o tamanho da fonte do elemento pai, e setando um valor em ‘em’ para os 2 elementos, o tamanho da fonte do elemento filho não vai ser o que você espera.

Até hoje eu não tinha tido um retorno de ganho de tempo com isso. Até hoje! O atendimento veio com um pedido: “O cliente ligou desesperado! Precisa aumentar a fonte de todo o site! Urgente!” (incrível como tudo é urgente!).

Modificação necessária: somente 1 linha no css

body { font-size: 1.1em; }

Ahh, que maravilha. E um viva às unidades relativas.

Quando o site citado for ao ar eu coloco o endereço aqui! Por enquanto ele está em produção, então o NDA ainda conta.

ps: Vergonhosamente o meu blog não usa isso ainda. Está tudo em px mesmo XD

ps: espero não ter que explicar a tirinha para muita gente!

Depois de muita enrolação, finalmente terminei o tema do blog.

É o primeiro tema de wordpress que faço, e meu segundo layout de um site!

Ainda estou procurando por bugs, e agora só falta testar no IE6. Talvez o tema mude novamente em breve, porque minha idéia é fazer com que cada categoria tenha uma imagem característica, e as cores do blog sejam baseadas nessa imagem. Igual ao site do Dave Shea.

Até breve!

update: Já achei um bug no IE6, que faz com que a borda abaixo do post e o link para os comentários desaparecer. Correções em breve!

Foram dois hotsites para promoções de jogos da EA Games:

Promoção The Sims 2 Bon Voyage

Promoção Medal of Honor: Airborne

A minha colaboração nos 2 projetos foi o xhtml e css! Como são hotsites pequenos, eles foram simples e rápidos de fazer, com poucos problemas cross browser.

Pessoalmente, o site do Medal of Honor foi o mais fácil de fazer e o que ficou melhor. O do The Sims teve algumas mudança no meio do projeto, que ocasionaram pequenos problemas na hora de fazer certas partes do html. Além de que eu não gosto de The Sims e já joguei todos os Medal of Honor anteriores

Quanto a validação do Html dos 2 sites:
Nenhum dos 2 passa na validação. Mas são erros simples e com pouco impacto, como usar & no lugar de &. Porém, depois que você começa a trabalhar com sites grandes, e em uma agência onde várias pessoas irão mecher no código e que o prazo de entrega é curto, certas coisas se tornam muito difíceis de controlar. Deve existir um lugar perfeito, onde existam programadores e principalmente uma equipe de manutenção que não destrua um código bem feito. Enquanto eu não acho esse lugar, eu me contento em ensinar todo mundo ao meu alcance na empresa em que trabalho!

Se você comparar o código html do site da empresa, que foi feito antes de eu entrar na área que estou agora, com os sites que foram feitos desde outubro/2006 até hoje, tem uma diferença da água para o vinho!

Mudar o modo que a maioria das pessoas trabalha é difícil, mas é um bom desafio!

ps: Eu abomino o FCK Editor. Ele gera código obsoleto e desnecessário na página. Infelizmente ele é amplamente usado aqui no trabalho, e as minhas sugestões de usar um novo não foram aceitas.

Fiquei um tempo pensando do porque as imagens não estarem funcionando corretamente, mas não cheguei a nenhuma conclusão.
No horário de almoço resolvi terminar o post sobre css framework, e após postar e conferir os trackbacks (blogueiro é curioso!), vi o comentário n. 241 do post sobre css reset reloaded do Eric Meyer, que coincidentemente era exatamente o problema que eu estava tendo!

No final, a solução que eu tomei foi a seguinte:

- Tirar o img do reset principal, e fazer um exclusivo para ele, removendo a regra problemática, a vertical-align: baseline;

Problema resolvido!

E agora, voltando a procurar por um editor web fácil de usar por clientes leigos e por programadores, e que gere um código bom…