O tema desta vez é invenções frustradas, e a disputa está bem forte… Se alguém puder contribuir divulgando, até porque o blog está bem bacana, fique a vontade!

Com a popularização da tecnologia e da Internet ao longo dos últimos anos, temos observado que a rede é usada tanto para fins legítimos como para outros nem tanto assim. Uma mesma tecnologia pode dar acesso a uma grande fonte de conhecimento e conteúdos compartilhados como também pode ser utilizada para causar danos, já seja de maneira consciente ou como parte de um jogo.

Por isto, cada vez mais, o uso cívico e respeitoso da rede torna-se uma questão prioritária. Além da diversão e do aprendizado proporcionados durante a semana de celebração da Campus Party, este é o momento de agir e sermos responsáveis, fazendo nossa colaboração para que a tecnologia seja usada em benefício da humanidade e demonstrando que Internet não é apenas uma rede de computadores,
e sim, de pessoas.

É o momento de iniciar um movimento de conscientização e de iniciar e impulsionar #somethingbetter.

Durante meses, a equipe da Campus Party, junto a colaboradores e amigos de todo o mundo, desenvolveram um manifesto fundacional no qual acordamos em prol de um objetivo concreto e em prol da criação de um projeto maravilhoso, o programa de voluntariado tecnológico “GeeksansFrontieres” . Este projeto atuará em países realmente necessitados. Estamos construindo este ambicioso projeto com organizações amigas.

Como campuseiros podemos ser um coletivo chave para a mudança. Temos o conhecimento, a vontade e um grande alcance, algo que traduz-se em uma grande responsabilidade para conseguir mudar o mundo para o bem. Isto é dito constantemente mas, poucas vezes, temos a chance de transformá-lo em ações concretas. Em outras palavras, esta é uma oportunidade única.

Através do #somethingbetter, unidos, poderemos marcar a diferença na vida de muitas pessoas de forma positiva e a longo prazo.

Durante as próximas semanas, por meio do manifesto fundacional, iniciaremos um processo aberto para determinar ações em conjunto, para levá-las ao cabo e fazer deste mundo um lugar melhor.

Haverá premiação? Sim, claro!

Na categoria Campuseiros Inventam haverá um prêmio de R$100.000 (cem mil reais) para que o campuseiro possa se dedicar durante o ano, a fim de desenvolver seu produto! Uma ótima oportunidade para quem tem uma grande idéia e quer colocá-la em prática.

Além disso, haverá convite para participar de 5 Campus Party a sua escolha: incluindo o bilhete de avião, entrada VIC (Very Important Campusero), acampamento com barraca e 3 refeições diárias.

Para mais detalhes sobre o evento, premiações e inscrição, é só visitar a seção Campuseiros Empreendem no site da Campus Party.

Sintam-se a vontade para opinar e contribuir com suas próprias experiências!

Equipe

O primeiro passo (e mais importante) certamente é a formação da equipe, no qual são definidos os profissionais que contribuirão para a área e deve-se ter em mente quais são os pré-requisitos para preenchê-la.

Procure por pessoas que tenham o mínimo de conhecimento e tenha uma filosofia de trabalho parecida com a sua, ou seja, tenha os mesmos princípios e demonstre facilidade para atender o que se espera do trabalho a ser executado. No meu caso, gosto muito de profissionais que pesquisem, se interessem em aprofundar suas habilidades e busquem maneiras de inovar em seu trabalho.

Infelizmente encontrar bons profissionais hoje em dia ainda é difícil, então uma ótima maneira é pegar alguém “cru” que tenha uma boa base, para ser formado de acordo com as necessidades da equipe / empresa.

Mantendo esses pré-requisitos citados acima, teremos uma base sólida para a equipe, facilitando a continuidade dos procedimentos que citarei na seqüência.

Padrões

Em qualquer equipe é necessário padronização, seja para escrita de código como até organização de arquivos e pastas.

Ao longo destes (quase) dois anos, percebi como é importante essa etapa, já que muitas vezes participamos de um projeto mas, na seqüência, só outra pessoa está disponível para dar continuidade. Então se você conseguir engessar o processo de Desenvolvimento (ou até mesmo Criação), é uma das melhores coisas a se fazer (note que falei em engessar o processo, não o resultado final, algo que impactaria diretamente no trabalho da Criação).

Porém deve-se sempre deixar em aberto espaço para novas possibilidades; acredito que todas as decisões deste tipo devem ser tomadas em conjunto com sua equipe, nunca tomando atitude autoritária, assim todos se sentem importantes como parte não só da execução, mas na evolução do setor.

Documentação

Este é um item que pode estar junto com os Padrões, mas acredito que seja melhor analisado separadamente.

A documentação é uma etapa necessária durante todo o projeto: ao receber os layouts, o ideal é que eles sejam documentados, ou seja, sejam definidas todas as variações que o Designer definiu para que ao iniciar o Front End, já esteja tudo previsto com antecedência.

Já durante o projeto é interessante criar uma planilha (ou outra forma qualquer de controle) que mostre o andamento, mostrando o que já foi feito, o que falta e até mesmo itens que são necessários para que a atividade seja concluída. Isso vai ajudar, principalmente, a equipe de Planejamento, prevendo se tudo será entregue no prazo ou haverá atraso no cronograma.

Além disso, a boa documentação do código garante que ele será compreendido por outros membros da equipe (por exemplo, no setor de Back End), o qual precisará entender como tudo foi estruturado para integrar com o sistema desenvolvido. Isso tudo também está ligado diretamente aos Padrões adotados pela equipe!

Processos

Se você já teve aulas básicas sobre Administração, deve ter ouvido falar sobre a metodologia dos 5S, para melhor organização do ambiente de trabalho. Em qualquer área a formalização dos processos é muito importante e, é claro, que na equipe de Desenvolvimento Front End não seria diferente.

A modularização do trabalho ajuda a aumentar o rendimento, organizando as atividades em etapas, por exemplo:

1. Validação do layout;
2. Mapeamento dos elementos e planejamento do HTML;
3. Desenvolvimento HTML;
4. Corte das imagens (já utilizando padrão para nome de imagens);
5. Desenvolvimento CSS;
6. Validação das páginas nos browsers requeridos;
7. Desenvolvimento jQuery;
8. Validação dos comportamentos nos browsers novamente.

É obvio que o processo pode variar de equipe para equipe, mas este é um pequeno exemplo de como as atividades podem ser organizadas, dependendo do tipo de projeto requerido.

Além do processo interno no Desenvolvimento Front End, deve-se haver uma boa integração com as outras equipes da empresa (ex: Planejamento, User Experience, Criação, Desenvolvimento Back End, etc.), criando uma sincronização de como os conteúdos devem chegar para vocês e como seu trabalho deve ser entregue para a próxima equipe, prática que também diminui os possíveis problemas e imprevistos que podem aparecer durante o projeto!

Por fim é extremamente válido criar um processo de QA para todos os setores, garantindo que o projeto seja entregue sem bugs e diminua as possibilidades de refação.

E você tem outras formas de organização? Compartilhe através dos comentários

Segue abaixo a apresentação que fiz no EDTED do ano passado, aqui em Curitiba:

O problema é que devemos ter organização tanto na metodologia de trabalho, como no aproveitamento de tempo, assim não gastamos tempo desnecessário com refação e nosso orçamento acaba condizendo mais com a realidade!

Para aqueles que já estão iniciando, ou até mesmo quem já tem uma boa experiência, mas busca melhores soluções de trabalho, vou indicar algumas ferramentas que facilitam (e muito) meu trabalho no Mac:

Coda: editor de códigos

Quando mudei para a plataforma Mac passei um bom tempo procurando a solução definitiva, que ficasse no nível do que tenho com o PSPad (para Windows).

Acabei encontrando o Coda, já citado aqui anteriormente, o qual possui os pré-requisitos que julgo serem extremamente necessários para meu trabalho render o esperado:

• Envio de arquivos por FTP, permitindo atualizar arquivos remotamente de forma automática
• Snippets (ou Clips, como são chamados no aplicativo)
• Fácil administração de projetos
• Plugins
• Find / replace em múltiplos arquivos
• Find / replace de múltiplas linhas

Além de outros tantos recursos interessantes que apresentei neste vídeo.

Preço: U$99

FileZilla: cliente FTP

Já conhecido no mundo do Windows, FileZilla é um cliente FTP que cumpre bem com seu objetivo básico.

Há a possibilidade de criação de contas para cada site, facilitando sua organização.

iBiz: time tracking

Depois de alguns projetos finalizados percebi que deveria contar o tempo gasto em cada atividade, para comparar com o orçamento feito ao cliente e mensurar se estava lucrando ou perdendo dinheiro.

iBiz é a melhor solução que encontrei até o momento, já que possibilita uma ótima organização de clientes e, dentro deles, projetos distintos. Dentro de cada projeto podemos inserir atividades e listas do que fazer (to do list).

Os clientes podem ser sincronizados com contatos na Agenda do Mac, além das tarefas serem sincronizadas com o iCal, outra funcionalidade bem interessante!

Além disso, podemos aplicar um valor por hora e fazer a conta final, baseado no tempo gasto. É uma boa alternativa para quem faz manutenção, por exemplo.

Há outras diversas opções como a contagem de tempo gasto em cada aplicativo aberto, assim podemos saber se realmente estamos sendo produtivos ou não!

Preço: U$39,99

Automator: tarefas automáticas

Automator foi uma grata surpresa encontrada no Mac. Aplicativo que já faz parte do sistema, possibilita uma gama enorme de fluxos de trabalho que otimizam seu tempo.

Por exemplo, com o auxílio do Automator criei um aplicativo que executo sempre no início de um novo projeto. Defino um nome para este novo site e, automaticamente, são criadas pastas para o html, layouts, conteúdo, scripts, etc., apenas com um clique!

Esse é só um exemplo, mas você pode automatizar envio de e-mails, tratamento de imagens, entre tantas outras tarefas… Há uma página específica com download de ações no site da Apple.

Para quem ainda não entendeu muito bem, o Automator executa “macros” no sistema operacional, assim como fazemos em editores de texto. Além disso podemos mesclar com AppleScript, assim desenvolvemos um aplicativo realmente completo!

Adobe Kuler: paleta de cores

Dificuldades para a definição da paleta de cores do seu site? Adobe Kuler é um serviço muito conhecido, o qual funciona como uma rede social para compartilhar paleta de cores, servindo como inspiração.

Para automatizar o processo de criação, a Adobe disponibilizou o Kuler em Adobe Air, assim você pode instalá-lo e rodá-lo diretamente no Mac (ou PC). Conectando-se ao serviço podemos fazer pesquisas nas paletas e importá-las diretamente para o Photoshop!

É uma verdadeira mão na roda para os Web Designers!

VMWare Fusion: rodando Windows no Mac

Infelizmente nós, Web Developers no mundo Mac, ainda não podemos deixar de usar o Windows, já que devemos testar nossos sites no Internet Explorer e Firefox. Também cito o Firefox, pois há diferenças de renderização, mesmo que pequenas, entre a versão para Mac e Windows.

VMWare Fusion se mostrou uma ferramenta extremamente confiável para essa tarefa, além de sua praticidade, não sendo necessário reiniciar a máquina para entrar no Bootcamp.

Falando em Bootcamp, o VMWare Fusion permite que os dois utilizem a mesma instalação do Windows, poupando espaço no hd!

Também há opções para otimizar seu desempenho como a quantidade de memória utilizada, processamento, drives, etc. Enfim, é a solução definitiva para quem quer testar seus sites no Internet Explorer, mesmo desenvolvendo em um Mac.

Preço: U$79,99

Outros programas que também utilizo e dispensam apresentação são: Safari (e seu Inspetor Web), Photoshop, Illustrator, suíte de aplicativos iWork e Microsoft Office.

Caso você tenha outras opções ou indicações, compartilhe conosco enviando seu comentário!

Após usar TextMate e CSSEdit, encontrei o Coda e testei durante seu período de avaliação… Foi o suficiente para comprá-lo! A licença custa U$99 e pelo que oferece vale muito, ainda mais se compararmos ao Dreamweaver.

Resolvi gravar um vídeo (screencast) demonstrando algumas qualidades do aplicativo mas, obviamente, há diversas outras funcionalidades interessantes que optei por não mostrar:

Após descobrir estas e outras qualidades, percebi que o melhor editor de códigos para Mac OS é o Coda, principalmente após descobrir que ele fazia find/replace de múltiplas linhas em diversos arquivos

Um dos grandes problemas do Microformats é a falta de divulgação por parte dos desenvolvedores e, talvez por isso, não é tão comum vermos projetos comerciais utilizando a técnica, mesmo que seja tão simples de usá-la. Desta forma seu futuro foi colocado em questão, já que o HTML 5 está sendo cada vez mais discutido e, com isso, muitos imaginam que os Microformats não terão mais utilidade… Será? Analisemos cada uma das partes para tirarmos nossas conclusões!

HTML 5

A quinta versão do HTML vem aí para solucionar diversos problemas que surgiram com a crescente diversidade de aplicações disponíveis na Internet. Cada vez mais é necessário termos tags específicas para ramificar nosso conteúdo e, desta maneira, classificá-lo mais especificamente, a fim de que humanos e máquinas o compreendam corretamente.

Para isso foi criada uma série de novas tags para facilitar a aplicação do conteúdo e, por que não, do CSS também. Seguem alguns exemplos:

• section – Como o nome diz, representa uma seção do documento ou artigo, por exemplo, que pode englobar um header e um footer;
• nav – Esta é uma das tags mais interessantes, já que foi criada especificamente para o menu do site ou uma simples navegação de links. Vale ressaltar que essa tag não elimina o uso de ul já que serve como elemento pai destas listas;
• article – Pode representar um post de um fórum, blog, notícia de jornal, etc.;
• aside – A definição dessa tag parece um pouco subjetiva; uma aplicação concreta seria a definição de um termo de determinado artigo. Por exemplo, se você está escrevendo sobre uma nova tecnologia, pode envolver um bloco de texto com a tag aside com uma pequena dissertação sobre ele, servindo como um conteúdo complementar, sem fazer o usuário sair do artigo;
• header – É o cabeçalho de uma seção, podendo englobar diversos títulos (leia-se h1, h2, h3 e assim por diante);
• footer – Rodapé da seção, contendo informações como autor do conteúdo, copyrights, data de postagem, etc.

Obviamente temos diversas outras novas tags disponíveis no HTML 5, mas estes são alguns exemplos que mostram bem o “espírito” desta nova versão, oferecendo maior flexibilidade para nosso código em relação a sua semântica.

O grande problema do HTML é que foi criado com o intuito de exibir as informações na Web, mas com o tempo foi crescendo a necessidade de criarem tags para estilização, até que os Web Standards fossem amplamente usados. Por isso confio muito na próxima versão do XHTML que, desde seu início, já foi construído da maneira correta, de certa forma “forçando” o desenvolvedor a escrever seu código corretamente, extinguindo totalmente as tags que representam estilização visual. Mas essa discussão deixamos para uma próxima oportunidade!

Microformats

Como foi dito no início deste artigo, a aplicação dos Microformats é bem simples: usam-se nomes pré-estabelecidos para id’s e classes que, desta forma, atribui significado aos elementos.

Porém muita gente acha que este padrão pode morrer no momento que o HTML 5 se tornar realidade mas, analisando os fatos mais profundamente, dá para concluirmos que isso não irá acontecer, já que cada lado tem um foco diferente.

O princípio dos Microformats é solucionar problemas específicos, tomando como base outros padrões como o vCard, iCalendar, usados há vários anos.

A partir do momento que este formado surgiu para aplicarmos em determinadas ocasiões, fica fácil compreendermos a diferença deste caso com as novas tags implementadas no HTML 5. Enquanto um se preocupa com as diversas aplicações surgidas durante toda a evolução da Internet, o outro se atém a aplicações localizadas oferecendo um detalhamento tão grande que seria quase inviável com tags e/ou atributos novos!

Por isso aconselho a todos estudarem as novidades do HTML 5 (apesar de achar que este é o “assunto da moda” e acreditar mais no XHTML 2) e continuarem atentos aos padrões estabelecidos nos Microformats, pois devido sua simplicidade e foco, é uma prática viável tanto em projetos pessoais como profissionais.

• IE 8 Compatibility – Meta Tags, Http Headers, User Agent Strings etc etc – Este artigo mostra variações que podemos utilizar nos headers de nosso site para mudar o comportamento do Internet Explorer 8. Interessante conhecermos antes de começarmos a desenvolver para ele, dependendo da necessidade de cada site.
• Vertical Centering With CSS – Excelente artigo que mostra 5 métodos para fazer alinhamento vertical pelo CSS. Sabemos que não é nada fácil como aplicar valign numa célula de tabela, mas pode quebrar um galhão!
• 12 resources for getting a jump on HTML 5 – Como diz neste artigo, o mundo ainda não está preparado para usar o HTML 5, mas para podermos chegar neste ponto, temos que conhecê-lo. Então, esta página serve como referência a diversos outros sites com textos sobre o assunto. Obrigatório!
• Web Standards Test: Top 100 Sites – Zeldman resolveu fazer uma pesquisa dos 100 sites mais populares da Internet (via Alexa) e concluiu que apenas 25% deles usam os Web Standards. Veja uma pequena análise dos sites mais bem colocados.
• Como testar o site no IE6, IE7 e IE8? – Artigo que apresenta algumas maneiras de testar seu site nas diversas versões de Internet Explorer, para acabar de vez com o problema nos testes!
• 10 Rare HTML Tags You Really Should Know – Lista de 10 tags HTML que, na grande maioria, são esquecidas mas podem acrescentar muito valor e qualidade ao nosso código, se bem utilizados!

Como de costume, o evento acontece no dia 9 de Abril, e o project.47 participará novamente!

Caso queira automatizar o processo, pode-se utilizar um plugin para WordPress que faz tudo sozinho