Olá amigos, é com muito prazer que venho aqui anunciar o lançamento  do site da Top Lab, minha empresa de consultoria digital. Após quase 2 anos, em que saí da Globo.com para me aventurar no mercado, e muitos percalços e aprendizados, finalmente posso considerar que a aventura se iniciou. Não vou me alongar na questão das adversidades que passei (ficará para um próximo artigo), mas percebo que hoje estou muito mais maduro para enfrentar os desafios que estão por vir. Obrigado a todos os amigos pela torcida e em especial, ao amigo Raphael Arlon que topou encarar essa pedreira comigo.

Acesse: www.toplab.me

Seguindo a linha de artigos com dicas para o Sinatra, desta vez vamos aprender como criar um XML de Sitemap, aquele arquivo que descreve as URLs do seu site com o objetivo de facilitar a indexação dos mecanismos de busca. Assim com o Rails, o Sinatra também conta com um grande número de desenvolvedores que produzem gems para facilitar a nossa vida, e nesse caso, vamos usar a gem xml-sitemap.

gem install xml-sitemap

Após instalar a gem, precisamos declarar no Sinatra uma rota que será responsável por responder as requisições do arquivo de Sitemap.

get '/sitemap.xml' do
    require 'xml-sitemap'
end

Chegou a hora de descrever as URLs de seu website. Vou colar aqui agora uma cópia do que fiz no site da Top Lab, para efeito de exemplo:

get '/sitemap.xml' do
    require 'xml-sitemap'
 
    map = XmlSitemap::Map.new('toplab.me') do |m|
      m.add '/sobre'
      m.add '/servicos'
      m.add '/projetos' , :priority => 0.2
      m.add '/blog'     , :priority => 0.2
      m.add '/contato'
    end
 
    map.render
end

Logo após instanciar o objeto XMLSitemap::Map com a url que desejamos, adicionamos as nossas URLs. Podemos alterar a prioriddade das URLs com o atributo :priority. Após declarar todas as URLs e fechar o bloco de declaração, basta chamar o método render do objeto que foi instanciado.

Para saber tudo dessa gem, vá ao Github e veja todos os detalhes de configuração dela: https://github.com/sosedoff/xml-sitemap

Olá amigos. Esta é uma dica rápida para quem desenvolve websites com WordPress. Um dos requisitos que alguns clientes nos pedem é remover as páginas estáticas do site nos resultados de busca do WordPress. Para fazer isso, adicione em seu tema, no arquivo functions.php o seguinte código:

function SearchFilter($query) {
	if ($query->is_search) {
		$query->set('post_type', 'post');
	}
	return $query;
}
add_filter('pre_get_posts','SearchFilter');

Esse código realiza a filtragem dos resultados, permitindo exibir apenas os ítens que são páginas.

Webdesign é um assunto que sempre me atraiu, mas a falta de talento não me permitia desenvolver a fundo esse interesse. Os anos se passaram e a experiência do convívio com interfaces aumentou meu conhecimento na matéria. Não me considero ainda um bom webdesigner mas entendo que tenha ultrapassado a barreira das noções básicas. E como precisamos sempre estudar, compartilho com vocês uma apresentação feita pelo webdesign belga Johan Ronsse, abordando detalhes que devemos levar em consideração ao desenvolver interfaces. Aproveite e compartilhe.

Essa dica vai para os que aproveitarão o carnaval para estudar. Deixo aqui uma apresentação/palestra do meu amigo Cayo Medeiros, vulgo @yogodoshi, com explanações sobre o processo de gamificação em um projeto digital. É uma apresentação bem completa e aborda praticamente todas as nuances deste processo. Bom canaval a todos.

Olá pessoal, estou de volta com artigos técnicos. Sim, eu havia dito que não publicaria novos textos técnicos, mas nesse período em que estive buscando motivações para escrever, concluí que o que sei fazer melhor é compartilhar com vocês as descobertas que faço no meu dia-a-dia. Sendo assim, vamos falar de uma dica simples e útil para os profissionais que desenvolvem websites com WordPress.

Frontend

Compartilhando um pouco de como funciona o processo de desenvolvimento de um website com WordPress na Top Lab, primeiro começamos pelo desenvolvimento da camada de Frontend. Podemos entender como Frontend a junção de HTML + CSS + Javascript. Para fazer uso de boas práticas de desenvolvimento, como reuso e otimizações, utilizamos Sinatra na manutenção dos projetos de Frontend.

Entretanto, os websites em WordPress tem algumas particularidades em relação a CSS, pois a ferramenta gera códigos HTML com CSS padrão. Por isso, precisamos utilizar esses estilos em nosso projeto de Frontend no intuito de validar o código com o cliente sem futuras adaptações no processo de desenvolvimento do tema. A lista de estilos padrão esta disponível no próprio site do WordPress. Copie e inclua em seu projeto de Frontend e comece a customizar com os estilos certos.

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}
 
.aligncenter, div.aligncenter {
    display:block;
    margin: 5px auto 5px auto;
}
 
.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}
 
.alignleft {
    float:left;
    margin: 5px 20px 20px 0;
}
 
.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}
 
a img.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}
 
a img.alignnone {
    margin: 5px 20px 20px 0;
}
 
a img.alignleft {
    float:left;
    margin: 5px 20px 20px 0;
}
 
a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}
 
.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}
 
.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}
 
.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}
 
.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}
 
.wp-caption img {
    border: 0 none;
    height: auto;
    margin:0;
    max-width: 98.5%;
    padding:0;
    width: auto;
}
 
.wp-caption p.wp-caption-text {
    font-size:11px;
    line-height:17px;
    margin:0;
    padding:0 4px 5px;
}

Por enquanto é só, mas aguardem novidades técnicas nesse mesmo canal. Espero a contribuição dos amigos para enriquecer os temas aqui abordados.

O ano terminou e é chegada a hora de olhar para trás, analisar os resultados e planejar o próximo ano. No ínicio de 2011, fiz uma previsão sobre o mercado web aqui no blog. Apontei alguns nichos em que nós desenvolvedores e prestadores de serviço poderíamos atuar e obter bons resultados. Ao longo do ano algumas dessas previsões se fizeram corretas e outras nem tanto. A seguir, vou discorrer sobre meu ano de 2011 e como estou me planejando para este novo ano.

Retrospectiva 2011

Ano passado foi complicado e de muito aprendizado, e seu início já demonstrara as primeiras surpresas que aconteceriam  no decorrer de seu curso. Como não me preparei em 2010 para me tornar freelancer, os primeiros meses de 2011 foram marcados pela escasses de trabalho. Tradicionalmente no Brasil, o ano comercial só começa a acontecer depois do Carnaval, então como eu não havia definido nenhum job no final de 2010, fiquei apenas nas tratativas até Março. E isso prejudicou todo meu fluxo de caixa do ano. O aprendizado dessa história é: feche negócios até Dezembro e garanta trabalhos para o período de férias, pois sem uma boa rede de contatos, fatalmente você ficará sem job.

Como dito acima, a coisa do freelancer começou a engrenar em Março, com a continuidade na prestação de serviços na Célula Z (onde trabalhei no segundo semestre de 2010 logo após sair da Globo.com), rede social para empreendedores e profissionais liberais. Com um trabalho fixo por um período de tempo maior, surgiu a  possibilidade de aumentar o network e se envolver com mais calma em novos negócios. E nesse processo, comecei a maturar a ideia de abrir minha empresa e também a buscar um sócio que fosse designer. Encotrei o sócio, conseguimos um primeiro cliente mas a experiência final dessa história não foi das melhores. Meu sócio não estava comprometido como eu, e em negócios, esse enredo só pode resultar em desastre. Além disso, esse cliente inicial abusou do crédito de ser ‘primeiro cliente’ (cuidado ao iniciar um negócio e topar com esse tipo de cliente, que abusa da sua fragilidade para estuprar prazos e orçamentos). Por fim, não entregamos no prazo e criou-se aí um cenário de crise. Para entregar ao menos uma parte do trabalho, decidi contratar um designer. O cliente em questão não enxergou valor no trabalho entregue e não efetuou o pagamento combinado, resultando em uma dívida que foi absorvida por mim, pois meu sócio acabou pulando do barco.  Nessa história toda, fica mais um aprendizado: para ter um sócio, é preciso estar em sintonia 100%, se isso for possível. Se não for assim, não tenha sócio.

No último trimestre de 2011 as coisas começaram a mudar devida a eu ter conseguido criar uma boa parceria de trabalho (agência Visiva). Com essa nova pespectiva, pude repensar e redirecionar a Top Lab para o curso de novos negócios, parcerias e realizações. Uma delas foi poder contar com o trabalho do meu grande amigo de escola Raphael Arlon que esta metendo as caras nos códigos e correndo atras do tempo perdido. Com certeza essa parceria foi uma das minhas maiores vitórias no ano.

Observação: não posso esquecer de um outro grande parceiro que tive esse ano, que foi o Mauro Amaral, da Contem Conteúdo.

2012 e as novas perspectivas

Este ano novo será de grandes desafios. Além de estruturar a minha empresa de consultoria e produtos digitais (Top Lab), estarei a frente como administrador de uma empresa familiar, a Pavão Chocolates. Serão sem dúvida 2 grandes desafios e eu já comecei a me preparar para eles: fiz inscrição nos cursos gratuitos do Sebrae e espero ganhar experiência em administração de negócios. No segundo semestre estou estudando a possibilidade de enfrentar uma graduação formal de uma grande universidade (é um grande desejo estudar na ESPM). Além desses desafios profissionais vou encarar novos desafios pessoais também, como por exemplo, morar novamente em São Gonçalo após viver 2 anos em Copacabana. Foram 2 anos morando com amigos em que aprendi intensamente sobre como conviver com as diferenças. Acredito ter melhorado bastante como ser humano e espero seguir nesse curso. Por fim, para esse ano espero melhorar também minha qualidade de vida, dando mais atençao para saúde, corpo e mente: com esses 3 ítens em harmonia, acredito no sucesso dos próximos anos.

Espero que este ano novo seja cheio de possibilidades e muito sucesso a todos vocês que estão presentes ou passaram pela minha vida. E se precisar de alguma coisa, conte comigo. Feliz ano novo.

Após um mês de intenso trabalho, perdendo algumas madrugadas e finais de semana, venho aqui anunciar o lançamento de mais um projeto pessoal. Colocamos no ar (o parceiro Bruno Neves e eu) no final da última semana o Bazine, comunidade on line dedicada a brechós virtuais e seus fãs.

Objetivo do Bazine

Como dito acima, pretendemos ser o local apropriado para que donos de brechós físicos e on line se encontrem com seus fãs. Para isso, criamos uma ferramenta de fácil utilização, onde o dono do brechó poderá adicionar produtos, caprichar em suas descrições e enviar por upload belas imagens. Além disso, o brechozeiro ganha uma URL única no site, funcionando como sua loja exclusiva. Em breve, teremos diversas customizações disponíveis para quem assinar o Plano Profissional.

Fase atual

Ainda estamos em fase beta, entendendo como funciona o mercado de brechós e como as pessoas consomem esses produtos. Já temos diversas funcionalidades planejadas em nosso Road Map, e esperamos que no início de 2012 possamos lançar a versão 1.0 do projeto.

Onde queremos chegar ?

Esperamos que o Bazine seja a principal plataforma quando alguém pensar em brechós on line. Para isso, sabemos que existe uma longa trajetória de desenvolvimento de funcionalidades focada no brechozeiro e de exposição de seus produtos. Estamos dedicados em oferecer a melhor plataforma possível para que a interação entre vendedores e compradores seja a mais harmônica possível.

Faz tempo que não publico nada técnico, não é ? Pois lá vai uma dica rápida porém bastante útil para quem não desenvolve mais módulo de autenticação em seus sistemas. Faz tempo que a maioria dos meus projetos pessoais utiliza o Facebook como sistema de autenticação. E essa facilidade foi possibilitada pela utilização da gem Omniauth. Entretanto, como o Facebook não possui Sandbox, era muito chato ter que ficar alterando a URL de retorno da Facebook App a todo momento que eu queria fazer alterações locais.  Além disso, não é nada inteligente fazer isso.

A solução

Tirei algumas horas pra pensar e seguei a seguinte solução:

1) Crio uma aplicação nova no Facebook, com a minha url de ambiente local setada;
2) Adiciono a seguinte linha no initializar do Omniauth:

if Rails.env == 'development'
  provider :facebook, 'xxxxxxxx', 'xxxxxxxxxxxxxxxxxxxxxxxx', :setup => true
else
  provider :facebook, 'yyyyyyyy', 'yyyyyyyyyyyyyyyyyyyyyyyy', :setup => true
end

Acredito que tenha demorado a chegar nessa solução pela inexperiência em fazer integrações. Mas é vivendo que se aprende, não é mesmo ? Até a próxima!

Quando um cliente solicita um orçamento para realizar o seu projeto digital, seja um projeto ‘do zero’, novinho em folha, ou um redesign do seu projeto atual, eu fico muito feliz. Essa felicidade não é causada só pela questão financeira, que obviamente é importante, mas seu motivo principal é a possibilidade de lançar um novo projeto digital com a minha personalidade, com o que eu acredito que seja útil e agregue valor ao cliente e gere novos negócios a ele. Por outro lado, fico muito triste quando alguma empresa que passa por essa possibilidade de melhorar seu projeto digital, o faz de modo errado. E esse é o assunto deste artigo, considerando o novo projeto digital criado para o time do meu coração, o Vasco da Gama.

Um pouco de história e o projeto anterior

Assim que o novo presidente do CRVG assumiu o clube após período nefasto em que o Sr. Miranda esteve no comando, trataram de melhorar o projeto anterior de website. Mesmo como grandes falhas de usabilidade e distribuição visual de seus elementos, com ítens claramente pouco trabalhados e pouco inspirados, como menu entre outros elementos internos necessitando de maiores cuidados, a diferença com o website anterior foi gritante. As informações eram facilmente encontradas por meio de componente de busca, era utilizado no website SEO, havia integração com Facebook Comments, e o website pela primeira vez correu o risco de se tornar o veículo principal do clube. Digo isso, pois o site mais acessado pelos torcedores do Vasco é o veículo não-oficial NetVasco. Quando anunciaram mudança de visual e projeto digital, fiquei bem esperançoso com a possibilidade do clube ter um projeto referência para o mundo, tendo em vista a rica oferta de informações que o Vasco da Gama possue, mas errei completamente na minha previsão.

Screenshot retirada via Web.Archive.Org

O novo website

Não gostaria que minha paixão falasse mais alto nesse momento, tendo em vista que sou vascaíno sadio (e não doente, como alguns dizem), mas o meu primeiro sentimento quando acessei o novo website foi constatar a ausência de vida desse novo projeto. Ele foi baseado quase que estritamente numa paleta monocromática com tons de cinza, levando aspecto pesado ao design. Percebe-se claramente que o cabeçalho, barra de elementos sociais e menu não se comunicam, passando a mesma impressão de falta de cuidado anterior (no antigo projeto) com os elementos principais. Indo para parte do conteúdo, percebe-se mais ainda a falta de cuidado no encaixe das áreas da homepage, com fontes pouco trabalhadas e acabamentos desleixados. Analisando as matérias, os widgets sociais estão mal dispostos no header do conteúdo e retiraram a integração com os comentários, limitando a viralização. Além disso, o site perde em SEO, quando optaram por utilizar um sistema que gera links dessa maneira (http://www.vasco.com.br/site/index.php/noticia/conteudo/300#.Tqc0l5yYMwI).

No aspecto positivo, o clube criou uma timeline com as informações mais importantes do clube, dispostas ao longo dos acontecimentos (http://www.vasco.com.br/site/index.php/linha_do_tempo).

Screenshot do projeto atual

Conclusão

Para finalizar, gostaria de enfatizar a minha decepção com este novo projeto. Como dito anteriormente, foi desperdiçada a chance de criar um projeto que pudesse se tornar referência para o mundo, devido ao nivel ruim dos websites de clubes de futebol. Perdemos mais uma vez a chance de resolver nossos problemas digitais, não só pela questão visual, mas também pela oportunidade de ter investido em outras funcionalidades. Criamos um novo projeto, adicionamos apenas uma funcionalidade nova, e continuamos com os problemas anteriores. E isso é muito pouco pro clube mais popular do mundo, o Clube de Regatas Vasco da Gama.