www.modularhtml.com.br

Um código HTML bem feito precisa ser semântico. Isso quer dizer que você deve marcar um parágrafo com a tag P, uma lista com a tag UL e uma tabela com a tag TABLE. Mas cada desenvolvedor escreve o código semântico do seu jeito. Alguns gostam de envolver tudo com uma tag DIV, outros usam muitas listas (UL/LI) e tem ainda aqueles que não economizam na tag SPAN.

Na maioria dos casos não existe certo ou errado, mas sem uma regra você nunca terá um código padronizado. A padronização permite a reutilização, agiliza a montagem HTML e cria um estilo único entre todos os desenvolvedores de uma equipe, incluindo designers e programadores.

Existem guias de estilo para Jornalismo (Manual de Redação), Design Gráfico (Manual de Identidade Visual) e mesmo para Programação (Padrão de Codificação). Inspirados por um artigo de Anna Debenham na 24ways, resolvemos criar o ModularHTML, um guia de estilo para código HTML semântico e padronizado.

O ModularHTML é formado por uma lista de módulos, pedaços de código HTML que compõem uma página web. Você vai encontrar módulos simples como breadcrumbs e mais complexos como um slideshow de imagens. Ao montar uma página HTML, abra o ModularHTML no browser e copie os pedaços de código para sua página.

Inicialmente seria uma ferramenta de uso interno, mas resolvemos torná-la pública para que outros desenvolvedores possam usar, testar e contribuir. Todo conteúdo do ModularHTML está sob licença MIT e seu código disponível no Github. Acesse a página de demonstração e participe do projeto.

Um profissional freelancer costuma orçar seus projetos pelo número de horas trabalhadas. Essa estimativa é feita através da experiência acumulada em trabalhos anteriores. Sabendo da importância desse controle de horas, como medir o tempo de forma precisa sem que isso se torne uma tarefa chata e burocrática?

Os softwares mais comums de controle de tempo (time tracking) são basicamente cronômetros que você liga e desliga enquanto realiza suas tarefas. Isso pode funcionar nos primeiros dias, mas com o tempo você acaba esquecendo ou cansando de anotar os horários.

Além do controle de tempo, o Paymo permite fazer a gestão completa de um projeto

Existem ferramentas de time tracking que registram automaticamente os segundos que cada aplicativo fica aberto no computador. Isso é interessante para ter uma ideia de como utilizamos nosso tempo ao longo do dia, mas é difícil isolar cada tarefa, principalmente quando você trabalha com diversos softwares.

Eu já uso o Paymo há algum tempo e recentemente eles lançaram o PaymoPlus, uma excelente ferramenta de controle de tempo integrada ao aplicativo. Com ele você pode ter o melhor dos dois mundos: registrar automaticamente o tempo gasto no computador e relacionar cada registro a uma tarefa específica.

Quando vou começar um projeto, eu crio as listas de tarefas no Paymo e durante o trabalho o PaymoPlus registra minhas atividades. No final do dia eu arrasto esses horários para dentro de cada tarefa. É muito simples, rápido e permite um acompanhamento preciso de horas trabalhadas em um projeto.

Detalhe de um wireframe com as marcações das áreas editáveis

Softwares de gestão de conteúdo como WordPress e Drupal permitem que as pessoas tenham mais autonomia sobre o conteúdo do site, sem depender de um desenvolvedor para fazer alterações simples. Mas ter um CMS instalado não significa que tudo pode ser editado em uma página.

Algumas barras de navegação não permitem inclusão de novos itens por questões de espaço, alguns textos são fixos (como o nome da empresa) e se ainda assim fosse possível alterar tudo, o painel de administração teria tantos botões quanto um cockpit de avião.

Em um projeto recente que participei, descobrimos tarde demais que uma área da homepage seria constantemente atualizada pelo cliente. Isso ocasionou atraso e retrabalho. Durante a retrospectiva resolvemos que nos próximos projetos iríamos definir as áreas editáveis na criação do sitemap e detalhar cada página durante a produção dos wireframes.

Essa simples mudança agilizou a instalação do CMS pois deixamos de nos preocupamos em com áreas que não seriam atualizadas e atendeu melhor as expectativas do cliente na administração do site.

Fazer a retrospectiva depois de terminar um projeto web (ou uma fase) é importante mesmo que você não trabalhe com metodologias ágeis. É bem simples: reúna a equipe e discuta o que funcionou, o que deu errado e o que pode ser feito para melhorar o processo.

Uma dinâmica interessante que aprendi com o pessoal de Scrum é a do mural com os pontos positivos e negativos:

• Cada membro da equipe recebe uma caneta e um bloco de post-it
• Todos anotam os pontos positivos e negativos, um em cada post-it
• Os post-its devem ser colados em um mural, separados entre pontos positivos e negativos
• Um voluntário agrupa os post-its com opiniões similares e lê cada conjunto em voz alta
• Os assuntos são discutidos um a um e são anotadas possíveis soluções

Lembre-se que não há culpados, o objetivo é celebrar os acertos, detectar as falhas e discutir o que pode ser melhorado no futuro. A partir do próximo projeto (ou fase) já comece a aplicar as melhorias combinadas na última reunião de retrospectiva.

No vocabulário da maioria das pessoas, design significa aparência. É decoração de interiores. É o tecido de cortinas, do sofá. Mas para mim, nada poderia estar tão longe do significado de design. Design é a alma fundamental de uma criação humana, que acaba se expressando em camadas externas sucessivas do produto ou serviço.

Playboy, 1987 – via gizmodo.com.br

Você acaba de editar um arquivo de CSS e quando vai testar no browser percebe que nada mudou. Depois de perder alguns minutos tentando desvendar o mistério, descobre que outro desenvolvedor abriu o mesmo arquivo no servidor e sobrescreveu seu código. Se você trabalha em agência web já deve ter passado por esse tipo de problema. Se você é freelancer, provavelmente já sofreu com isso ao compartilhar um ambiente com outros desenvolvedores.

Esse artigo explica como criar um ambiente compartilhado para desenvolvimento web utilizando ferramentas que tornam o seu trabalho mais fácil, prático e profissional. Esse processo é útil para compartilhar com outros desenvolvedores (front-end ou programador), mas também serve para trabalhar sozinho utilizando máquina diferentes (em casa e no trabalho, por exemplo).

Antes de explicar o processo, vamos fazer uma breve introdução sobre GIT e Dropbox. Se você já está familiarizado com esses aplicativos, pule direto para a seção Criando um repositório no Dropbox.

Introdução ao GIT

GIT é um tipo de sistema de controle de versão desenvolvido por Linus Torvalds (sim, o mesmo do Linux). Um sistema de controle de versão é um aplicativo que gerencia as versões de um ou mais arquivos, muito utilizado no desenvolvimento de softwares e que vêm se popularizando também entre desenvolvedores web. Existem outros tipos de sistemas de controle de versão como o CVS, Subversion, Bazaar, Mercurial e outros.

De uma forma bem resumida o GIT funciona assim: após criar um repositório GIT em um computador qualquer desenvolvedor pode clonar esse repositório para sua máquina, editar os arquivos e enviá-lo novamente para a origem. O software fará o controle das versões e caso dois desenvolvedores alterem o mesmo arquivo, as alterações serão comparadas e consolidadas em um único arquivo.

Você não precisa saber linha de comando para usar o GIT, aplicativos como o Gitbox fazem o trabalho sujo por você

Depois de baixar e instalar o GIT (Mac ou Windows) é comum utilizá-lo através de linha de comando, mas se você é designer, como eu, e gosta de apertar botões recomendo o Gitbox (para Mac) ou a própria GUI que vem junto com o msysgit para Windows.

Nota: Essa é uma introdução rápida, feita por um designer que não utiliza os termos técnicos corretamente. Caso você queira uma explicação mais precisa, consulte a documentação oficial.

Introdução ao Dropbox

Dropbox é um excelente serviço gratuito para compartilhamento de arquivos. Além da versão web, você pode instalá-lo no Mac, Windows ou Linux. Ele funciona como uma pasta de 2G dentro do seu computador que pode ser acessada e compartilhada facilmente com outros usuários.

O Dropbox fica invisível depois de instalado no computador, se comportando como uma pasta comum no seu HD

Nota: Se você não tem uma conta no Dropbox, cadastre-se por esse link e me ajude a ganhar 250M de espaço extra!

1º Passo – Criando um repositório no Dropbox

Baixe e instale o Dropbox, crie uma pasta com o nome do seu projeto e dentro dela uma pasta vazia chamada, por exemplo, “www” “repo.git”. Baixe e instale o GIT e a GUI de sua preferência (Gitbox ou msysgit). Abra o aplicativo e clique em adicionar um repositório. O GIT criará uma pasta oculta dentro da “www” “repo.git” chamada “.git”.

2º Passo – Compartilhando o diretório com os outros desenvolvedores

Clique com o botão da direita sobre a pasta “www” “repo.git” e selecione Dropbox > Share This Folder. Inclua o email dos desenvolvedores do seu grupo que devem ter uma conta Dropbox associada a esse email. Se tiver dúvidas de como fazer isso, acesse a página de ajuda do Dropbox.

3º Passo – Trabalhando localmente e realizando commits

Abra novamente a sua GUI do GIT e selecione “clonar um repositório”. Selecione a pasta onde você vai trabalhar localmente (no Mac eu costumo usar a pasta “Sites”). O repositório master será sua pasta local e a origem será o repositório compartilhado no Dropbox.

Edite localmente os arquivos (use o Xampp para rodar PHP e MySQL na sua máquina) e quando terminar realize um commit para consolidar os arquivos e depois envie essas alterações para o repositório origem através do comando PUSH. Os outros desenvolvedores trabalharão da mesma forma e o repositírio origem no Dropbox terá todas os arquivos atualizados.

Usando o GitHub como alternativa ao Dropbox

O GitHub é uma ótima alternativa para compartilhar um ambiente de desenvolvimento em GIT. Para repositório públicos o uso é gratuito, mas para repositórios fechados é preciso pagar pelo serviço. Eles lançaram recentemente uma fácil e prática GUI chamada Github for Mac.

Conclusão

Pode parecer um pouco complicado no início, mas trabalhar com GIT é bem simples e você logo se acostuma. Depois de passar pela curva inicial de aprendizado você terá uma ambiente compartilhado eficiente e com um ótimo histórico e documentação das alterações realizadas. Dúvidas? Deixe um comentário que eu tentarei responder.

UPDATE: Como lembrou o Eder Prado nos comentários, os arquivos HTML da sua pasta local não aparecem normalmente na pasta do Dropbox, eles ficam compactados dentro da pasta .git.

A nova interface da página inicial de busca

O Google apresentou sua nova interface com o lançamento do Google+. Ela será aplicada gradualmente em todos os produtos da empresa, mas já pode ser vista nas páginas de busca, no Calendário e no Gmail (usando o tema “Preview”).

É uma revolução para uma empresa conhecida por testar 41 variações de azul e que sempre seguiu a filosofia do design funcionalista (forma seguindo a função). Um dos responsáveis por isso é Andy Hertzfeld, membro da equipe que criou o primeiro Apple Macintosh e atualmente responsável pelo design do Google+.

A nova interface é fundamentada em três princípios: Foco, Flexibilidade e Facilidade.

• Foco: Se você estiver na pesquisa do Google, enviando um e-mail ou olhando um mapa, sua única preocupação deve ser conseguir o que deseja. Nosso trabalho é oferecer as ferramentas e os recursos para que você alcance seu objetivo de maneira rápida e fácil. Com as mudanças de design que ocorrerão nas próximas semanas e meses, vamos colocar em primeiro plano as coisas que importam para você, tirando tudo que atrapalhar da frente. Até mesmo alterações simples, como estabelecer cores mais fortes para botões ou ocultar botões de navegação até que você precise deles, podem ajudar a focalizar apenas no que você necessita no momento.

• Flexibilidade: No começo, havia praticamente apenas uma maneira de usar o Google: em um computador de mesa com um monitor de tamanho normal. Mais de uma década depois, basta você dar uma olhada, no escritório ou em sua casa, nos celulares, tablets, televisores e monitores de alta resolução para ver uma infinidade de maneiras de acessar a web. O novo design permitirá, em breve, uma transição sem transtornos de um dispositivo para outro, com uma experiência visual sólida. Nosso objetivo é oferecer esta flexibilidade sem sacrificar estilo ou função.

• Facilidade: Nossa filosofia de design é combinar poder com simplicidade. Queremos manter o visual simples e limpo. Mas, por trás do design aparentemente simples, usamos novas tecnologias, como HTML5, WebGL e os navegadores mais novos e rápidos, para garantir que você tenha todo o poder da web em suas mãos.

via googlebrasilblog.blogspot.com

A atual complexidade dos websites e aplicativos torna cada vez mais abrangente a função de um designer dentro do processo de desenvolvimento web. Arquitetura de informação, usabilidade, interface gráfica, HTML, CSS, e até JavaScript são habilidades comuns para um profissional com poucos anos de experiência. O conceito de UX (User Experience) expande ainda mais essa esfera de atuação.

Essa visão abrangente do processo tem transformado designer em ótimos gestores. Na 37signals, por exemplo, cada time é formado por 2 programadores e 1 designer, sendo este também responsável pela gestão do projeto.

Cindy Chastain, diretora de criação da R/GA, fez uma interessante analogia comparando o trabalho do designer ao de um diretor de cinema, que é responsável por manter o conjunto e a harmonia na produção do filme.

Para Aarron Walter, da MailChimp, o designer acaba sendo um diplomata dentro do projeto, negociando cada alteração e traduzindo o idioma de cada departamento. Ele deixa claro que essa função não supre a necessidade de um gerente de projeto, principalmente com relação a controle de orçamento, prazos e relação com o cliente.

Acredito que designers tendem a ser mais generalistas porque precisam olhar o projeto como um todo. Um arquiteto de informação precisa testar a usabilidade do início ao fim do projeto, um designer de interface precisa participar da montagem HTML e verificar a instalação do CMS.

Com a frase “Redesign must die”, Louis Rosenfeld, autor do famoso livro do urso polar, abriu sua apresentação no UX London 2011.

Rosenfeld afirma que websites são sistemas adaptativos complexos e que pequenas melhorias constantes funcionam melhor do que mudanças radicais. O redesign acaba sendo uma fuga para a falta de entendimento dos problemas reais e não desaparecem quando o novo site entra no ar.

Eu concordo com a crítica do Rosenfeld, mas ainda acho que em alguns casos críticos um redesign é necessário (sites antigos e desatualizados ou com baixa audiência).

Além da apresentação no Slideshare, selecionei alguns tweets durante o evento:

(…) Todos os novos funcionários da Zappos passam pelo mesmo treinamento da nossa equipe de atendimento ao cliente (call center), independentemente do departamento ou cargo. Você pode ser um contador, um advogado ou um desenvolvedor de software – irá passar pelo programa de treinamento do mesmo jeito.

No final da primeira semana de treinamento, fazemos a mesma oferta para todos. Oferecemos 2.000 dólares para saírem (além de pagar o tempo que foi trabalhado), e a oferta vale até o final da quarta semana. Nós queremos ter certeza de que os funcionários estão aqui por mais do que apenas o salário.

Queremos pessoas que acreditem em nossa visão de longo prazo e que pretendam ser parte de nossa cultura. Em média, menos de 1% acabam aceitando a oferta.

via blogs.zappos.com