O que todos falam até certo ponto é verdade, é muito difícil parar e fazer o seu próprio site/portfólio. Você nunca está satisfeito com o resultado, sempre está querendo refazer tudo e no fim nunca termina. Eu quis evitar o óbvio e apesar de não estar 100% contente com o resultado, cumpri a meta de entregá-lo para o “cliente”, que no caso, sou eu mesmo.

Essa foi a filosofia que adotei para desenvolver o projeto e não desistir. Fazer do zero, rascunhar um briefing, detalhar o mapa do site, criar a identidade visual (logo), wireframe das áreas, layout estático e a implementação do mesmo.

Por onde começar?

É o momento mais difícil, mas sempre deu certo com clientes e terceiros. Ponha no papel tudo que tem que ser feito e o que estiver lá será o rascunho da sua lista de tarefas do projeto.

Cores, identidade visual

Nesse meio tempo, a empolgação me fez dar vida ao primeiro rascunho da identidade visual. Logo já matei dois “coelhos” numa cajadada só (pobres coelhos). Achei as cores ideais: vermelho, branco e preto. A seta é para dar o sentido de tocar, reproduzir, seguir adiante. Para mim fez um puta sentido, mas ainda não estava satisfeito (como sempre).

Eu acabei voltando várias vezes e retocando o logo, cheguei nisso:

Mais simples, e para não pirar e refazer tudo, parti para a próxima etapa. Observação: com clientes acontece coisa pior.

Rascunho e Wireframe

Hora de partir para o rascunho e wireframe das área do site, que descrevi no mapa, Home, Portfolio, Sobre e Contato. A intenção dessa etapa é posicionar os elementos sem se preocupar com a formatação e aparência deles. Um grid ajuda muito nessa hora, recomendo este, 960 Grid System.

Mão na massa e no editor também

Hora de dar vida ao wireframe. As cores e o logotipo fazem muito mais sentido agora. Quase todas as telas tiveram seus layouts desenhados, isso tudo para facilitar a vida do cara que vai codificar o front-end, no caso, eu mesmo.

Som, A, B, HTML, CSS ok?

Hora de codificar, hora de cansar o braço e “sofrer” um pouco. Mas calma lá, com o layout todo pensado vai ser muito mais confortável. Dessa forma o código flui como acordes bem treinados de uma boa música.

Design responsivo (Responsive Web Design), WordPress, HTML5, CSS3, less

Uma das minhas maiores motivações de criar esse site foi por em prática o que havia lido e estudado com o design responsivo (Responsive Web Design) e o conceito de Mobile First. Isso é, o site se ajusta conforme a resolução e dispositivo do usuário, tornando o seu uso mais fácil. O site é primeiro projetado para celulares, e depois para desktop. Pensando dessa forma fica mais fácil separar e otimizar o site para cada dispositivo. Para o CMS, utilizei novamente o WordPress, só que dessa vez com o tema framework HTML5 Bones. Esse tema é um excelente boilerplate HTML5 e totalmente otimizado para WordPress, facilitando muito a vida do desenvolvedor com seus arquivos .less (muito útil para tornar o CSS dinâmico no desenvolvimento) etc.

Vários recursos novos do CSS3 e HTML5 estão presentes no projeto com Graceful degradation (Degradação suave) para os navegadores mais antigos (IE7+).

HTML pronto, WordPress funcionando? Testes e mais testes

Codificado e funcionando no WordPress, hora dos incansavéis testes em navegadores, resoluções, dispositivos, celulares, sistemas operacionais, ufa…

Mobile ok!

Conteúdo e publicação

Com os testes realizados e ajustes feitos (muitos como sempre para o Internet Explorer), chega a hora de alimentar o site e finalmente o publicá-lo. Muito do atual conteúdo é do antigo site, e o portfolio está sendo alimentado aos poucos, tenho diversos projetos, cases, que nunca foram divulgados e logo logo estarão por lá. Prometo!

Conclusão

Estou satisfeito de ter atingido o meu objetivo, criar um novo site com todos os processos normais que um cliente teria, mesmo que ainda não tenha sido perfeito ou esteja inacabado (muito do conteúdo ainda precisa ser revisado, alguns ajustes etc). Antes desistiria no meio do processo, só por se tratar de um site pessoal, ou correria para entregar qualquer coisa.

Casa de ferreiro, espeto de pau, aqui não.

Veja o meu portfolio

Mais sobre mim

Tecnologias e ferramentas utilizadas:

• HTML5
• CSS3
• Responsive Web Design
• Mobile First
• Sublime Text 2
• LESS e Less Compiler
• Codekit
• Bones Theme WordPress Responsive
• WordPress
• PHP

Tem algum mensagem, crítica ou sugestão? Seu comentário é bem vindo.

O objetivo inicial era traduzir tudo e futuramente criar nosso próprio documento, com ideias melhoradas e outras correções que achamos necessário. Mas para começar, traduzimos o documento na sua íntegra. Creio que é interessante para quem precisa de um caminho a seguir num projeto web. Me ajudou muito há alguns meses atrás e acho que agora em português fica mais útil ainda para outros desenvolvedores front-end.

A tradução ainda precisa de uma revisão geral, principalmente nos capítulos finais. Se puderem me ajudar a corrigir o que acharam meio sentido, eis o link com o estágio atual:

http://andrecomws.com/lab/code-standards/

Também está disponível no Git Hub, para quem quiser dar um fork, abrir uma issue etc:
https://github.com/haggen/code-standards

Espero que seja útil para vocês.

25 de novembro é um dia especial para o maior projeto colaborativo do Muse. Nesse dia será lançado o DVD feito pelos fãs brasileiros do show realizado em abril, na U2 360 Tour.

Após 7 meses de trabalho intenso, chega a hora de dar a luz a mais de 1 hora e meia de transmissão dos 3 shows da banda realizados em abril desse ano. Todos ângulos filmados diretamente do público e editados cuidadosamente pelo mesmo criado do famoso projeto Radiohead Rain Down, Andrews F.G.

Tanto o download do DVD, como o show na íntegra (em HD) será disponibilizado no dia e em diversos formatos. Um site reformulado está a caminho também.

Então fique esperto, dia 25 de novembro, #MUSEDVDBR no ar.

Realmente sempre me surpreendo ao buscar sobre o projeto Rain Down na web. Toda vez que procuro pelo termo no Google, encontro alguma coisa nova ou vários links que citam o projeto como inovador e pioneiro. É muito bom saber que quase após 3 anos do show do Radiohead no Brasil, nada foi tão marcante quanto aquela apresentação da banda e como os vídeos desse projeto o deixaram eternamente frescos na memória das pessoas que estiveram lá.

Mas um dos resultados me chamou muito atenção nesses dias, encontrei um trabalho de TCC para um curso de Comunicação Social – Jornalismo baseado em toda história de criação, produção e conceito do Projeto Rain Down. O trabalho foi realizado por Leonardo Araújo e Dannilo Duarte para a Universidade Estadual do Sudoeste da Bahia, de Vitória da Conquista, Bahia.

Localizei o documento no formato PDF e notando em seu texto, é citado que ele foi apresentado no XIII Congresso de Ciências da Comunicação, em Maceió/AL, em junho desse ano.

É emocionante saber que o Rain Down alcançou tanto prestigío, agradeço novamente pela dedicação e divulgação.

Alguns trechos interessantes do trabalho:

“Trata-se de uma espécie de “artesanato digital”, conforme o termo cunhado por Barbrook e Schultz (2007) em um manifesto divulgado na Web. São trabalhos que dialogam com os produtos da indústria cultural, ao mesmo tempo em que se revelam bastantes distintos da formalidade ou dos compromissos com uma produção anterior, na medida em que flertam com novas linguagens disseminadas em escala global. ”

“É preciso emitir em rede, entrar em conexão com outros, produzir sinergias, trocar pedaços de informação, circular, distribuir” (Lemos, 2009, p. 40).”

“Em Rain Down, pela primeira vez, nada foi combinado ou organizado anteriormente, nem passou pelo filtro “de qualidade” do artista. Não havia nenhum acordo das pessoas filmarem o show para um DVD. As imagens foram feitas de forma espontânea, capturando as diferentes percepções de quem estava na apresentação. A edição também foi totalmente realizada por um admirador da banda. ”

“Percebe-se que assim como o Rain Down surgiu de maneira não planejada, a produção feita pelas redes telemáticas é, muitas vezes, fruto de experimentação dos indivíduos que povoam o ciberespaço e que esse ciclo de mudanças continua em curso. Por ser uma experiência conduzida pela própria comunidade, é interessante acompanhar as mudanças e delineamentos da produção cultural nesses novos ambientes para que seja possível desfrutar de todas as suas potencialidades.

O documento pode ser baixado na íntegra por aqui (.pdf – 363 KB)

Vídeos

Novo projeto criado dentro da Corenzan, reestruturando o site da escola Focus Fotografia que já está há quase 40 anos no mercado. O novo site da instituição foi escrito com HTML5/CSS3 em cima de um WordPress. Com navegação fácil e layout agradável, foi uma das primeiras experiências com clientes usando novas tecnologias.

Acessar o site

Mais um vídeo do projeto colaborativo Muse DVD BR 2011.

http://www.youtube.com/watch?v=yr9Kdv5MziY

O HTML:

O CSS:

Exemplo: http://jsfiddle.net/andrewsfg/QyBpZ/1/

Compatibilidade: Chrome, Safari, Opera, Firefox, Internet Explorer (8,9). Infelizmente a versão 7 do IE não dá suporte aos pseudos elementos, e eu sei como isso é broxante meu caro.