Demo / Download

Depois de quase dois anos da versão 0.5, consegui um tempo para fazer mudanças importantes no pet project upSoonXML. A maior novidade desse release é que agora ele fala inglês e português. Escolhi também colocar o inglês como língua padrão, por ser mais universal para um projeto de código aberto.

Lista completa de melhorias da versão 0.9 (Commit):

• Now full HTML5;
• Internationalization: Now supporting English (default) and Portuguese out of the box;
• Configurations are now in a separate file. Less clutter;
• Mobile phone enhancement with CSS media queries (iPhone/Android);
• trim() all variables set by user;

Ah e o repositório mudou de casa, do Google Code agora para o GitHub. Se você olhar o código PHP vai notar que ele está funcional mas precisa de melhorias, já que não sou programador. Confira a lista de issues abertos e planejados para as próximas versões, quem sabe você não pode ajudar com uma linha de código? :)

Obrigado ao Adriano Melo e ao Grupo de Usuários de Linux do CIn pelo convite. Aprendi muito também.

Ah, para quem não estava lá, o título dos slides é devido ao tempo da viagem entre Recife e Natal também ser de 4 horas. E as moças aí da capa alternativa são as misses PE e RN respectivamente. :)

• Download do material (5.4 MB)
• Arquivos online (Google Chrome / Safari / Webkit)

Um amigo perguntou: Se o Mac é tão fácil de usar, onde você vai conseguir dicas? Ele está certo ao falar que é fácil, mas todo sistema operacional tem seus truques e aquilo que parece ser fácil para alguns pode não ser para todos. Além disso, existem bons softwares saindo todo dia pra plataforma.

Se você usa ou está pensando em comprar um Mac, vai lá conferir as dicas Apple. E mesmo se você não gosta do “bla bla bla da maça” ainda pode aproveitar o melhor blog de tecnologia atual.

Junte essa expertise do Google ao fato dos Desenvolvedores Web serem criaturas mal entendidas e que não estão acostumados a terem coisas fáceis e que funcionam logo de primeira. A demora na finalização de novos padrões como o HTML5 e CSS3 e a medonha era do Internet Explorer 6 falam bem do nosso sofrimento. Então, crie um ambiente lindo para esses carentes e eles serão seus escravos. Não quero pagar de profeta do apocalipse da liberdade na Web, mas o Google está criando essa dependência e parece que ninguém está vendo.

O que o Google Font API tem a ver com isso tudo?

Por que a gente só usa Verdana, Arial, Helvetica, Tahoma, Trebuchet MS? Com a limitação técnica de alguns browers (Firefox até pouco tempo não aceitava embedded fonts) e problemas com licença de uso das fontes, ficamos dependentes dessas famílias que já vem instaladas nos sistemas operacionais mais populares. A questão é que o Google está usando um problema para o qual já existe solução para ganhar poder por meio da dependência.

Trocando limitação por limitação + dependência

A solução do Google para nossa limitação de escolha é um diretório de fontes opensource tão limitado quanto as opções que usamos hoje. Imagine um cenário onde grandes sites começam a usá-las. Isso vai influenciar os menores e só serve para criarmos um novo leque de “fontes padrão”. E o pior de tudo é que a nova pasta C:\Windows\Fonts será um dos servidores da empresa de Mountain View. Eu sei que podemos baixar as fontes e apontar o link do @font-face para a pasta do projeto, mas é exatamente aí que o Google usa sua estrutura e popularidade para criar a vantagem do cache e bancar de bom moço. O mesmo acontece quando ele oferece seus servidores para criar um cache de arquivos JavaScript de frameworks famosos, como o jQuery. É uma ótima iniciativa para projetos pequenos, porém realmente queremos usá-la em grandes sites de nossos clientes, deixando-os dependendo dos servidores de uma empresa já tão dominante?

Na minha opinião o único problema que o Google resolve no caso das fontes é o de licença de uso. Eu realmente não acho uma boa idéia começar a usar essas fontes em projetos comerciais usando o @font-face com link nos servidores do buscador. Nós podemos muito bem continuar otimizando nossos próprios servidores e criar nosso próprio repositório, centralizando as fontes que mais usamos em nossos projetos. Não teremos a vantagem da disseminação que os servidores deles tem para criar cache nas máquinas dos usuários, mas pensando bem um arquivo de fonte com 30 ou 40k é bem menor que muita imagem que usamos nos nossos sites. É só não exagerar e fugir do grande irmão.

Antes de estruturar o sitemap e os wireframes, que tal dar uma analisada como ficaria o sitemap novo com a mesma estrutura que o blog atual tem?

O antes

• Acessibilidade
• AI
• Brasil
• Cultura
• Dicas e Resenhas
• Faculdade
• Geral
• Navegadores
• Opensource
• Postuxos
• Software
• Tecnologia
• Usabilidade
• Vídeos
• Web
• Wenetus
• WordPress

São 17 categorias que na verdade nada organizam, isto é exatamente o resultado de um site/blog sem foco. Tenho 5 anos de blog e 4 são deste site (tinha um blogger vergonha alheia) e quanto mais o tempo passava, mais me enrolava para classificar o meu conteúdo. Não houve planejamento. Em função disso não sabia exatamente o que ia escrever amanhã, poderia escrever sobre tudo. Pra mim, hoje esse blog poderia ter só a categoria “Geral”, não faria diferença.

Para a nova versão pensei até em usar só tags para resolver o problema, mas ai vou cair no risco de não obedecer o foco que quero dar, preciso de uma estrutura amarrada pra isso. E algumas coisas realmente podem ser reaproveitadas e outras podem ser agrupadas da estrutura atual.

O depois

Pensando no planejado para o público, olhando o conteúdo das principais categorias, e também dando uma olhada nos blogs de profissionais web por ai, cheguei a seguinte solução:

• Dicas
• Resenhas
• Misc (Brasil, Cultura, Faculdade, Geral)
• Mercado (Navegadores, Opensource, Software, Tecnologia)
• Postuxos
• Vídeos
• Web & Interface (Acessibilidade, AI, Usabilidade)
• Wenetus
• WordPress

Sobraram 9 categorias, uma boa enxugada. Resolvi separar as resenhas das dicas, pois vou tentar dar um foco maior à dicas para desenvolvimento e produção de projetos web. Ia excluir a categoria “Postuxos” por ser uma piada sem graça e por existir o Twitter para desabafar e falar besteiras, mas ela da um toque pessoal e às vezes 140 caracteres não são suficiente. Então temos a versão final da lista do sitemap com outros pequenos ajustes:

Ai passei isso para o organograma:

Mas ai eu analisei e pensei, por que o Início já não poderia ser o Portfolio? O organograma final:

Pronto, é hora dos wireframes.

Não vou criar um inventário de conteúdo, não faz muito sentido quando eu mesmo sou o cliente e estou trabalhando sozinho. Mas em projetos do dia-a-dia é uma das fases que mais evita furos no escopo por parte do cliente e também o retrabalho, ou seja, não ignore a planilha de inventário para levantamento do conteúdo.

Wireframes

É importante agora, no início desta fase, ter um e apenas um objetivo fixo em mente para poder começar acertando, mesmo que você tenha mais de um objetivo no projeto foque no principal para começar. O meu será: Estrutura simples para apresentar a mim e meu trabalho. Então vamos tentar cortar da mente toda essa baboseira de blog que rodeia essa versão atual. É importante ir para o papel antes de abrir qualquer programa gráfico. Vá por mim, o resultado é muito melhor. A primeira tentativa:

*PEEEEN* – Depois de terminar essa versão eu só tinha uma coisa na cabeça: “Mas que merd* é essa?”. Isso não passa nem perto do simples e minimalista que tenho em mente. Mas o sono era o problema, tive uma semana pesada de reuniões e madrugadas de trabalho. Nada como “dormir no problema”.

No outro dia fui à caça de inspiração e percebi que realmente o modelo de blog/life streaming não queria sair da minha mente e eu precisava abraçar de vez o objetivo de criar uma coisa que fosse realmente simples. Comecei do zero e inclusive tomei outra decisão-chave para o conteúdo: a home será em inglês. O motivo é que acredito (nesse caso específico) que usando o inglês na home consigo atingir um público mais amplo com meu portfolio divulgando também a Wenetus. E minha proposta é tratar a home realmente como uma coisa especial e bem separada do blog, que continuará em português. Também tive a idéia de dividir a publicação deste redesign em 2 fases jogando primeiro a home nova no ar, deixando o blog intácto na primeira fase, mas isso é papo pra depois.

Usando o template para OmniGraffle do sistema de grid 960gs consegui chegar numa estrutura que finalmente me agradou:

De cara já me apresenta rapidamente com um texto curto (algum erro de ingles?), relevante e com vários links. Continuando já mostra uma área grande com um slideshow não só com imagens mas também já com detalhes dos trabalhos e as abas para filtrar.

Sacrifiquei do texto da descrição a faculdade, realmente não acrescentava muito no momento. Dessa home eu só não estou mostrando a solução que estou pensando para o Twitter, pois quero que seja um fator surpresa no lançamento. :) O que você achou? (Eu sei, em tempos de Twitter ninguém vai responder a um texto tão grande). Próxima etapa: O layout!

Faça o download do PDF completo

Principais recursos e melhorias desse release:

1. Ajax no formulário;
2. Compatível com IE 6, 7 e 8;
3. Nova opção para informar a data prevista para o lançamento do site (Opcional);
4. Nova opção para escolher não indexar a página em mecanismos de busca como o Google;
5. Nova opção para usar o Google Analytics apenas informando o código UA-XXXXX;
6. Formulário agora é exibido quando o JavaScript está desabilitado;
7. A configuração de logotipo agora recebe uma URL, se estiver vazia o sistema oculta a imagem;
8. É possível ocultar o título e subtítulo, ou os dois sem precisar editar o HTML;
9. Otimizações gerais no código.

• Demo
• Download

Eu que sou um wallpaper freak e apaixonado por minimalismo já baixei quase todos. Mais dicas de links eu posto lá no Twitter.

• simples e minimalista
• útil
• menor número possível de arquivos
• folderless (nada de pastas)
• SGBDless :P (nada de configuração de SGDB)
• visual universal
• divertida de usar

O objetivo mesmo é criar uma página ágil e simples até a morte de configurar usando XML como banco de dados, dando ao usuário a opção de informar seu e-mail para quando o site for lançado você consiga avisá-lo.

Lembrando que não sou programador, portanto não ria do meu PHP. É exatamente por isso que estou abrindo o código. Vamos lá participar no Google Code? :) Se não tiver interesse em colaborar, ainda assim pode usar no workflow dos seus projetos web:

• Demo
• Download

1. Redesign: Preparando a nova versão deste site

Num redesign, ao estudar o público que já consome seu conteúdo é interessante não esquecer de pensar no novo público que ainda não conhece o site e que será seu alvo, mas primeiro escolhi estudar quem já o conhece. Por onde começar? O melhor é mesmo analisar suas estatísticas de acesso para diagnosticar as características de quem sempre volta e tentar observar oportunidades. Há várias ferramentas para isso, algumas oferecidas pelo próprio servidor de hospedagem, uso o popular Google Analytics. Olhemos alguns dados do último ano:

Novos x Antigos

14,66% dos visitantes são aqueles que voltam ao blog, um pouco mais de 84 mil visitas e ficaram em média 00:01:32 navegando. Eles serão o foco da análise por enquanto. Mas bateu a curiosidade: de onde vêm esses 85,34%? Depois do Google, os dois maiores responsáveis por jogar visitantes aqui foram o Google Images e Twitter. Engraçado que o Orkut está na lista mesmo eu não participando ativamente da rede, parece que os links postados por outras pessoas nos tópicos das comunidades sobre web trazem bons resultados, pelo menos a longo prazo.

Recursos de navegador/dispositivo

Voltando o foco aos que retornam, a grande vantagem de se fazer um redesign é poder analisar os recursos dos dispositivos usados por eles para assim decidir tecnicamente quais tecnologias podemos usar, e que não eram aplicadas antes ou quais podemos descartar (sim, estou falando especificamente do Internet Explorer 6). Filtrando o seguimento do Analytics por quem retorna, o quadro de navegadores no último ano fica:

Entre os navegadores o Firefox teve um desempenho fantástico, 60,37% contra 20,74% do Internet Explorer (ainda bastante gente). E se formos um pouco mais fundo, nesse ano, foram apenas 430 visitas usando Internet Explorer 6, dentre os que voltam ao blog. Sim, menos de 450 em um ano inteiro. Se você é um deles, infelizmente vai ter que aceitar que não é um número expressivo o suficiente para exigir abraços, flores e chocolates. Pra mim os bugs do IE6 oficialmente são passado depois destes dados, me desculpem mas vocês serão ignorados para o bem da maioria esmagadora que usa browser moderno e para o bem dos meus futuros cabelos brancos. Claro que tenho a sorte de ter um público nerd, isso fez a diferença. Outra coisa que me ajudou a decidir derrubar o suporte ao IE6 foi a atitude do Youtube de fazer o mesmo. Ainda nos navegadores, não dá pra passar batido o desempenho do Chrome, que em tão pouco tempo de vida já tem mais de 10% das visitas, metade de todas as versões do Internet Explorer.

Não vou entrar nos pontos de sistema operacional, versão do Flash ou Java. São coisas que não fazem tanta diferença para meu objetivo. Só é interessante apontar que em 1 ano o blog só teve 52 visitas de pessoas usando iPhone/iPod Touch, ou seja, ainda não é um público que mereça uma versão exclusiva. Mas da forma que estou pensando a interface a experiência de toque deve melhorar consideravelmente e a falta de visitas pode ser justamente por hoje não ser uma experiência tão legal.

Legal mesmo é ver que nos últimos tempos nós designers ganhamos muito espaço nos monitores. Entre os que retornam, cerca de 2% usaram resolução 800 x 600 ou menor. E entre todos os visitantes esse número é um pouco menor que 5% do total. Então o layout para 1024 de largura continuará firme e forte e o tamanho grandes das fontes está a caminho.

Redesign do conteúdo

Quando pensamos em mudar a linha editorial de algum site hoje, não é possível fazer isso com sucesso sem analisar o que as pessoas estão procurando nos mecanismos de busca (AKA Google) e acabam caindo nele.

Não há nenhuma surpresa. O buscador de Mountain View ainda é a grande fonte de novas visitas daqui. São 66,72% do total e dentre os buscadores ele tem a “pequena” marca de 98,90%. E afinal o que procuram? Nesse último ano os 25 termos mais procurados entre novos visitantes foram:

Definitivamente o WordPress é o rei do conteúdo do blog para quem chega do Google, isso já me ajuda a pensar em alguma idéia específica para esse público, mas definitivamente não será o foco do meu conteúdo. Pretendo focar mais em assuntos de design, interface homem-máquina e desenvolvimento web em todas as fases, incluindo atendimento e planejamento que aprendi a gostar na marra. :) Também pretendo soltar mais material experimental como ícones, wallpapers e criar pet-projects que brinquem com a API de redes sociais.

Definindo o público alvo

Já deu uma geral no público cativo? É hora de preparar uma estratégia para atingir também o que você define como público alvo da nova versão. No meu caso eu defini 2 tipos de público e adicionei o que o destino (Google) me reservou:

• Empresas de médio e grande porte interessadas em contratar a Wenetus pelos trabalhos do meu portfolio;
• Designers de interface, estudantes ou já atuantes no mercado de 16 a 40 anos;
• Público geral interessado em dicas para WordPress

Defini os 40 anos para os designers, pois acho que não sei falar direito no blog com o público mais velho que 40. Eu poderia trabalhar com técnicas de formatos de persona, mas sinceramente? Pra um projeto de redesign de blog pessoal/profissional eu não quero chegar a tanto.

Com essa linha definida estamos prontos para seguir em frente e pensar a arquitetura da informação do redesign ficando nos 3 públicos definidos. Próxima parada é sua majestade o conteúdo, sitemap e protótipos/wireframes.