Um estudante de design que ainda não tem grande embasamento teórico recorre apenas ao seu bom senso, ao gosto ou não gosto. São criativos como uma criança, mesmo que o resultado de um trabalho seja de gosto duvidoso ou kitsch na maioria das vezes.

O estudante cedo ou tarde amadurece e vira um profissional. Devora dezenas de livros, começa a tomar certas decisões de acordo com esse novo aprendizado, desenvolve seu próprio método de criação e adquire um estilo.

Esta semana me deparei com um artigo chamado Life Below 600px que me fez repensar sobre um conceito que eu encarava como uma regra (colocar informação importante numa área que precise de scroll). Uma regra que já estava tão consolidada dentro do meu estilo, que eu esqueci que ela poderia ser quebrada em algum momento.

Gostei muito, porque me fez questionar sobre todos esses conceitos, teses e regrinhas que vemos serem repetidas exaustivamente em artigos e livros por aí. Acredito que regras são importantes, mas temos que lembrar qual o objetivo de cada regra existir e saber (ou procurar) quebrá-las sempre que necessário.

Não ter medo de errar

Tudo isso está relacionado com uma dificuldade em lidar com a frustração de errar antes de acertar e se manter em uma zona de conforto. E essas regras agem como bloqueios mentais para nossa criatividade.

E aí lembramos das crianças, que não tem regras, e tentamos perceber quão densa é essa grade que limitou nossa criatividade e nos separa de nossa infância.

Será tarde demais?

Convido você a revisitar seus conceitos, assim como eu estou fazendo. Vamos errar primeiro e lembrar das regras depois, isso pode render novos e bons frutos. Que tal?

Wireframe é um rascunho com marcações de peso e posicionamento do conteúdo de uma interface. Ele será usado posteriormente pelo designer como guia para desenvolvimento do layout final do website, sistema ou aplicativo.

Ainda vejo muitos profissionais com receio de usar wireframes e alegam que o cliente não entende ou que o trabalho demora mais, mas eu acredito que é uma etapa primordial na criação de uma interface e portanto, levantei alguns pontos que podem ajudar novos profissionais a entender ou incorporar com naturalidade o desenvolvimento desses esboços.

Nunca pule a etapa do wireframe.

Passar pela etapa de wireframe não é trabalhoso e é essencial para o progresso do projeto. Criar um esboço e pensar na navegação antes de ter um layout desenhado pode fazer com que perceba algum erro de usabilidade ou algum bloco de conteúdo que não está sendo exibido com o devido destaque. É muito melhor perceber essas coisas antes, né?

Não tenha medo.

Arquitetos de informação não são necessariamente designers, mas  não saber desenhar não significa que tenha que ter medo de criar wireframes. Supere esse medo e expresse suas ideias no esboço de alguma forma. Desenvolver wireframe é como projetar seu website em voz alta.

Papel e caneta.

Não é porque a interface é digital que todo o processo deve acontecer dentro do computador. Pegue papel e caneta e rabisque muito. Coloque todas as ideias no papel. Você pode recortar pedaços de papel ou usar post-its para reposicionar os blocos de conteúdo com maior facilidade, é uma baita mão na roda.

Teste seu wireframe.

Questione cada interação do seu wireframe. Imagine um usuário específico tentando acessar aquela interface e peça opiniões de outras pessoas da equipe que não participaram diretamente da elaboração dos esboços (por que não incluir o cliente nessa também?). Essa discussão pode levantar pontos importantes que você deixou passar em um primeiro momento.

Inspire-se.

Procure por novos wireframes, compartilhe ideias com amigos que não trabalham com você. Visite sites de referência como o I <3 Wireframes ou até o Flickr.

Existe ainda um projeto chamado Paper Browser, que é um modelo de navegador web com um canvas milimetrado para você imprimir e poder desenhar em cima facilmente. Eu recomendo!

Ferramentas.

Embora eu ainda use o Photoshop para meus wireframes, há quem use programas não muito convencionais, como o Flash. Mas existe também uma grande variedade de ferramentas para auxiliar no desenvolvimento de wireframes que você pode escolher. E a lista não é pequena:

Ferramentas para Desktop (freeware em negrito)

• MockupScreens
• Axure
• Balsamiq Mockups
• Pencil
• FlairBuilder
• ForeUI
• OmniGraffle
• GUI Design Studio
• OverSite
• Microsoft Visio
• FluidIA
• WireframeSketcher
• Justinmind Prototyper
• DENIM
• EasyPrototype
• SketchFlow
• DesignerVista
• MockApp

Ferramentas Online

• iPlotz
• ProtoShare
• MockFlow
• HotGloo
• Mockingbird
• Cacoo
• Jumpchart
• Gliffy
• Lovely Charts
• Lumzy
• JustProto
• Pidoco
• iPhone Mockup

E você, tem alguma dica ou experiência com desenvolvimento de wireframes para compartilhar?

Depois de tanto tempo de sofrimento para fazer uma sombrinha ou bordas arredondadas compatíveis com o IE no CSS, eis que encontro pela internet um arquivo HTC que promete resolver os problemas de compatibilidade do CSS3 nas versões 6, 7 e 8 do temido Internet Explorer.

HTC é sigla para HTML Components, um arquivo que aplica novos comportamentos em HTML Dinâmico dentro do Internet Explorer.

Como funciona?

Você precisa apenas adicionar uma referência ao comportamento pelo arquivo ie-css3.htc na seleção do CSS que tenha propriedades CSS3 como border-radius ou box-shadow. Veja um exemplo:

.caixa {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari e Chrome */
  border-radius: 15px; /* Opera 10.5+
e agora também para Internet Explorer 6+ com IE-CSS3.htc */

  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari e Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+
 e Internet Explorer 6+ com IE-CSS3.htc */

  behavior: url(ie-css3.htc); /* Avisa ao IE para mudar o
 comportamento desta classe e ela passa a entender o CSS3 */
}

Nota: O arquivo HTC precisa estar na mesma pasta do CSS.

Parece um sonho para desenvolvedores, mas é uma pena que a iniciativa não tenha vindo da própria Microsoft.

Faça download do script diretamente neste link.

Dentre os temas abordados este ano o Espaço de Design terá palestras conceituais sobre cores, criação e inovação com destaque para a apresentação de Luli Radfahrer, mestre de design e inovação digital que raramente aparece aqui pelo Rio de Janeiro. O framework Ruby on Rails, o e-commerce em php Magento e Realidade Aumentada os fortes assuntos que farão parte da área de Tecnologia. Ainda acontecerão Oficinas sobre cloud computing, e-mail marketing, métricas em redes sociais e pagamentos digitais e Desconferências sobre DJango, Games e outros temas.

No intervalo rola aquele networking e depois do evento a galera acaba num happyhour para esfriar a cabeça e ajudar a absorver o que rolou durante todo o dia. Então não deixa de ser uma ótima oportunidade para estudantes e profissionais trocarem experiências sobre web e design de forma geral.

O primeiro evento será realizado no sábado dia 20 de março de 2010, das 9 às 18 horas no Rio de Janeiro (veja no site as datas para os outros estados) e os valores variam de R$ 24 a R$ 74, dependendo da data de inscrição.

Como ganhar um convite?

Para ganhar um convite para o 15º EDTED do Rio de Janeiro, assim como no ano passado, você deve aderir à campanha Update Your Browser seguindo os seguintes passos:

1. Entre no site da campanha updateyourbrowser.net
2. Coloque um botão ou use o código javascript da barrinha em seu site/blog (é por uma causa nobre ;))
3. Faça um comentário aqui neste post dizendo que quer participar do sorteio (na hora de comentar não esqueça da URL do seu site/blog com o botão ou barrinha).

Na segunda-feira dia 15/03/2010 serão sorteados 2 vencedores através do sistema do site random.org e eu publicarei os resultados aqui e no meu twitter @richardbarros – aproveita e me siga por lá também.

Ah! Lembre-se que os convites são para o evento do Rio de Janeiro e que passagens e hospedagem não estão incluídas nessa brincadeira.

Boa sorte e bom evento a todos!

[UPDATE]

Os vencedores são: Victor Procopio e Leo Balter. Vocês devem receber um email da organização do evento em algumas horas, fiquem atentos!

O Wordpress ficou conhecido como uma ótima ferramenta para Blogs, mas com o tempo ela se mostrou uma ferramenta poderosa também para gerenciamento de conteúdo online em geral, desbancando em diversos aspectos os líderes no segmento, como Joomla ou Drupal.

Este não é um post para defender que o Wordpress também pode servir como CMS porque isso todo mundo já sabe (ou deveria saber), mas para abrir sua mente, caro desenvolvedor, para as possibilidades da utilização do Wordpress em outras linguagens além do PHP e do MySQL.

Antes de chegar ao ponto, preciso preparar o terreno com algumas definições que cercam o Wordpress e o objetivo deste artigo.

Este post é apenas um exercício

Não estou defendendo que você deva usar esse mótodo em seus projetos. Fiz esse Post apenas para abrir os horizontes para uma nova possibilidade.

Eu já utilizei Wordpress como gerenciador de conteúdo de um site em Flash uma vez e foi um desafio interessante, mas não é algo que eu acredito que deva ser feito com frequência. Então encare apenas como um exercício de programação.

O que é XML?

Para não deixar nenhum leigo boiando, a eXtensible Markup Language (XML) é uma linguagem de marcação (assim como o HTML) que agrupa conteúdo usando tags.

O XML tem sido muito útil para exportar conteúdo. Isso significa que se você tem qualquer tipo de informações, pode organizá-las e transmití-las usando um arquivo nesse formato.

O interessante é que qualquer linguagem é capaz de criar e ler XML, e desta forma, você pode exportar dados de ASP para JavaScript, por exemplo, usando o XML. Os arquivos de feed (RSS), por exemplo, são um tipo de arquivo XML. Quando você faz AJAX, o javascript geralmente está lendo um arquivo XML, e por aí vai…

Feeds no Wordpress

O Wordpress oferece arquivos de RSS e Atom do conteúdo do seu banco de dados sem precisar de plug-ins ou nenhuma mudança adicional após a instalação. Isso significa que qualquer Post que for criado na administração do WP pode ser disponibilizado pelo Wordpress em formato XML através dos Feeds. Geralmente este conteúdo pode ser acessado no http://www.seusite.com/feed/.

Agora sim, a mágica!

Com as opções de FEEDs que o Wordpress fornece, é possível acessar todos os seus posts e indexá-los em qualquer linguagem de programação. Veja os exemplos de conteúdo que é possível buscar pelo RSS:

Todo o conteúdo

http://www.site.com/?feed=rss2

Apenas a categoria “noticias”

http://www.site.com/category/noticias/feed

Apenas a tag “destaque”

http://www.site.com/?tag=destaque&feed=rss2

Se tudo o que você precisava era de uma ferramenta para gerenciar o conteúdo, o Wordpress já está fazendo isso para você. E agora não importa se sua linguagem será Javascript, Flash ou COBOL, basta ler este XML que você estará acessando o banco de dados do WP.

Uma vez conectado ao XML, o conteúdo pode ser usado da maneira que preferir. Uma lista de posts, uma página de notícias, uma galeria de fotos. Basta reorganizar os posts em novas Categorias e Tags de acordo com sua necessidade e o restante fica a critério da sua criatividade.

A maioria das linguagens mais recentes já possui um XMLParser, uma ferramenta para fazer a leitura do XML. Então, independente da sua linguagem favorita, procure pela documentação do XMLParser respectivo e conseguirá acessar sem problemas esse arquivo RSS gerado pelo Wordpress. Aí fica fácil, não é?

Esse post foi sugerido algum tempo atrás pelos amigos Yogodoshi e Cristianoweb, espero ter deixado as coisas um pouco mais claras.

Mas não é só felicidade. Não basta pegar os arquivos, enviar pelo FTP e partir pro abraço. Existem uma série de itens que precisam ser verificados e algumas regrinhas que podem ajudar a reduzir a dor de cabeça da publicação de um novo site em ambiente de produção.

Nunca coloque um site no ar em uma Sexta-Feira!

Pode até ser que em algum momento entre o briefing e a assinatura do contrato alguém não se tocou que o dia do prazo final era uma sexta-feira, mas isso é exceção. Ninguém em estado perfeito de sanidade (a menos que tenha prazer em trabalhar fins de semana) aceita o agendamento de entrega para o último dia útil de uma semana. Nunca faça isso!

Verifique todos os links.

Pode ser que uma configuração errada de URL’s em links relativos possa ter feito algumas páginas ficarem perdidas. Portanto, verifique se todos os seus links estão funcionando corretamente. Caso o site tenha uma quantidade muito extensa de páginas, existem plugins para auxiliar este trabalho no Firefox, como o Linkchecker. Experimente.

Verifique a variação do layout em todos os navegadores.

Se você conhece os motores (engines) de renderização, sabe que não precisa testar em realmente todos os navegadores do mercado. Uma dica para ter o CSS bem parecido em todos os navegadores é começar com um CSS Reset, um código CSS que zera todas as propriedades padrões e já deixa, de início, todos os browsers renderizando as tags de forma idêntica.

Eu costumo desenvolver no Firefox e depois fazer testes no Chrome e nas últimas versões do Internet Explorer. Se o código estiver validado e estiver tudo Ok nesses, já dá para garantir uma apresentação semelhante em todos os outros browsers. De qualquer forma, ainda tenho aqui Safari e Opera instalados para ajudar nos testes.

Revise o conteúdo

Cuidado para não deixar XXXX, nonononos e Lorem Ipsuns entrarem em nenhuma parte do site. Faça também a revisão ortográfica, existem dezenas de ferramentas que te ajudam com isso.

Imagens de conteúdo também são importantes, lembre-se (caso use) de usar imagens de banco de imagens sem as marcas d’agua e verifique se todas estão aparecendo corretamente e em suas respectivas páginas.

Outra parte do conteúdo que não pode entrar no ar com errata é o rodapé ou seção de contato. Certifique-se de que todos os endereços e telefones estão atualizados. Algumas vezes o cliente muda de endereço ou telefone durante o desenvolvimento de um projeto longo como este.

Lembre-se do CSS media=”print”

Caso não saiba, é possível colocar um estilo CSS somente para o momento que uma página estiver sendo impressa. É a declaração de media=”print”.

<link rel=”stylesheet” type=”text/css” href=”print.css” media=”print” />

Alguns divs não possuem nada de interessante e podem ocupar muito espaço numa folha de papel na hora de sair na impressora, então basta selecioná-los com a folha de estilos de impressão e escondê-los com display: none.  Ainda é possível reduzir a quantidade de cores, de colunas ou até fazer todo um novo estilo, só depende da sua criatividade.

Lembre-se do favicon.

É um detalhe super fácil de resolver e que sempre passa despercebido. Um ícone (favicon) para aparecer na Aba do navegador quando o site é carregado pode ser chamado colocando o seguinte código dentro da  tag <head>:

<link rel=”icon” type=”image/x-icon” href=”/favicon.ico” />

E ainda, que tal um favicon quando abrirem o site pelo iPhone?

<link rel=”apple-touch-icon” href=”/favicon.png” />

E o trabalho só começou.

Este é o mínimo para que esteja tudo acessível aos seus usuários e se já está tudo funcionando, sempre tem o que melhorar.

Repare que agora não é só você e sua equipe acessando o site e que já tem muita gente passeando pela interface que foi criada. Aproveite a oportunidade para monitorar o comportamento dos usuários, fazer testes A/B na interface, aprimorar o SEO e manter o projeto em constante crescimento.

E você, acha que faltou alguma coisa? Comente!

Este artigo representa a minha opinião pessoal sobre a obra.

Design é um termo que acredito ser muitas vezes mal interpretado aqui no Brasil. O principal motivo é o de sua tradução ter sido usada erroneamente por tanto tempo. O Industrial Design invadiu os corredores acadêmicos brasileiros como Desenho Industrial, quando deveria ser tratado como projeto industrial ou planejamento industrial.

O Design do título do livro é desse tipo e não se refere só a desenhos. Os autores tratam o Design como foco do negócio e usam exemplos da Apple, Microsoft, Samsung e até Harley-Davidson para levantar o que é importante no processo de criação e finalização de um produto.

“Design é um processo vivo e contínuo que precisa aprender com os erros, se refrescar e assumir novos riscos o tempo todo.”

O livro mostra a importância de uma empresa ter a cultura voltada para o Design e trata do assunto de forma concisa. O tema é abordado com uma visão mais gerencial e empresarial, ótimo para quem está buscando uma visão de cima para baixo de projetos e planejamento.

À primeira vista “Gestão estratégica” pode parecer um daqueles livros super técnicos e chatos, mas acredite: Não é! É muito interessante conhecer os bastidores de grandes marcas e seus produtos, e ainda, sob uma visão de profissionais que realmente podem falar de inovação.

Suas páginas são bem ilustradas e a diagramação é ótima – realmente me surpreendeu. Embora todos os exemplos sejam de empresas norte-americanas, são cases muito interessantes também para nós brasileiros.

Seu foco está em executivos e empresários e não é exatamente um livro para estudantes de graduação, mas recomendaria para qualquer um que busque uma visão maior do poder do Design em grandes projetos e grandes empresas.

O livro está disponível e pode ser comprado online no Submarino.

Antes de mais nada: Box Models

Box Models são as caixas criadas por um documento HTML para definir os limites do conteúdo e como o CSS vai denhenhá-los na página. Em resumo, são as tags HTML e os critérios para exibição de atributos como border, margin e padding no navegador.

Quando os navegadores Internet Explorer 4 e o Netscape Navigator 4 foram lançados eles calculavam o desenho dos modelos de caixa (a partir de agora chamarei de box model rendering) de maneiras distintas e nenhum deles seguiam os padrões já definidos pela W3C.

Muitas páginas de internet foram desenvolvidas durante este período baseadas apenas na resposta visual do browser para o código HTML e, consequentemente, utilizando um modelo de rendering fora dos padrões para o HTML final.

Navegadores fora dos padrões

Neste período praticamente todas as páginas eram desenvolvidas fora dos padrões web e isso gerou um impasse quando a W3C viu que tava todo mundo fazendo sites de maneira errada e os que a utilização do box model rendering padrão deveria ser responsabilidade tanto dos navegadores quanto dos desenvolvedores.

Para que a internet seguisse sua evolução normalmente e dentro dos padrões, era necessário que tanto os desenvolvedores de páginas quanto as empresas responsáveis pelos navegadores se comprometessem em respeitar as normas e definições da W3C. Mas esta transição não poderia ser feita de uma hora para a outra, já que todas as páginas ainda estavam utilizando o modelo fora de padrão criado pelos navegadores.

Para sair do impasse e poder implementar os padrões web de desenvolvimento sem prejudicar nenhuma das partes, foi criado um identificador que, através de uma declaração no código HTML, mostraria que tipo de leitura deveria ser feita pelo navegador: o modelo fora dos padrões (Quirks) ou o modelo da W3C (Strict). Este identificador ficou conhecido como Definição de Tipo de Documento HTML ou Doctype.

Doctypes Strict e Transitional

O Doctype Transitional avisa ao navegador que o código HTML atual precisa ser aberto em modo de compatibilidade – dependendo do browser, poderá ser carregado tanto o Quirks quanto o Strict. Ele foi criado para que esse período de transição entre os navegadores antigos e os novos não fosse sentido de forma brusca pelos desenvolvedores. Assim, os navegadores poderiam utilizar o novo box model rendering sem que fizessem todos os sites do mundo ficarem tortos por terem sido testado nos browsers antigos.

O Doctype Strict avisa para o navegador que seu código está limpo, semântico e dentro dos padrões e com isso ele ativa o box model rendering Strict, que foi definido pela própria W3C. Fica muito mais fácil para o navegador entender o código e atribuir o layout das CSS em um HTML bem formado, e além disso, fica muito mais fácil desenvolver HTML/CSS cross-browser quando você já sabe que eles estão utilizando um padrão de leitura do código.

Strict ou Transitional: Qual usar?

A essa altura a resposta já deve ser óbvia. O transitional servia apenas para realizar manutenção de sites muito antigos ou que ainda não possuíam Doctype definido. Se você é um desenvolvedor profissional e está criando ou fazendo manutenção de uma página nova, você DEVE usar o Doctype Strict.

Lembre-se que qualquer dúvida na criação dessas páginas pode ser tirada na própria documentação do HTML ou XHTML. Eu visito essas documentações com mais frequência do que vocês imaginam, o DTD (Document Type Definition) indica até quais tags podem ficar dentro de cada tag e isso é muito importante para conseguir um HTML válido.

A Validação

É realmente necessário validar o código e corrigir todos os seus Warnings e Errors? A resposta é não. Validar é muito bom, mas não é obrigatório. Você pode deixar o código inválido quando trabalha sozinho no desenvolvimento de um site ou consegue controlar o resultado do rendering em todos os navegadores sem maiores problemas, mesmo que possa dar uma dor de cabeça para manutenção no futuro.

A validação se torna muito importante quando o desenvolvimento acontece em um uma grande equipe. Isso porque cada profissional já está acostumado com o box model rendering de cada Doctype, considera que não há erros no HTML para poder montar o CSS e acredita que todas as caixas estão bem formadas para poder manipular com JavaScript/DOM. Neste caso não validar seria um tiro no pé no andamento do projeto.

Conclusão

Este artigo foi adaptado de um estudo que fiz para a escolha do Doctype de um projeto que terá muitos profissionais envolvidos. É maior do que a maioria dos artigos que publico aqui no blog, mas acredito que sua leitura seja obrigatória para qualquer profissional Web que coloca a mão no código HTML. Ainda existem muitos desenvovedores com dúvida em relação as definições de documento HTML, espero ter esclarecido boa parte delas.

If you are an web developer you know how much is annoying and laboured to make cross-browser websites. The first reason to all this frustation is the quantity of users still using Microsoft’s Internet Explorer 6, an old and very outdated web browser, with security issues and none of the new web development standards.

My idea was get all this users to update their browsers at least to the Internet Explorer 7 version. Of course I’m not interested in defend any of these browsers, I just want a better develop enviroment to us all.

Inspired by the savethedevelopers.org work, I created the update your browser website. It provides an piece of a JavaScript code that you put on your website’s HEAD and warn all your users when they are using outdated browsers like the Internet Explorer 6.

I’m so grateful for all the world developers support on this little movement.

Link to the english version of Update Your Browser: http://www.updateyourbrowser.net/en/

Acho que a última vez que conectei na internet foi em 2006. De lá pra cá eu simplesmente estou online. O computador está ligado em casa, o celular está no MSN e o notebook acessa o wireless até da padaria.

Estar online e interagir com pessoas não depende mais de um único software ou rede social. O meu interesse é apenas de que a essa conexão seja realizada. Isso significa que mesmo com tantos sites, navegadores e dispositivos diferentes, no final o que vale para mim, como usuário, é a comunicação.

Novas ferramentas aparecem o tempo todo, mas como são apenas um portal para a comunicação, elas chegam, adotamos naturalmente e em pouco tempo ja estamos usando diariamente sem perceber.

Considerações sobre o ano que passou

Pensando um pouco nisso, decidi fazer uma lista de acontecimentos de 2009  relacionados ao design e desenvolvimento para a web que me trouxeram novos hábitos ou que me provocaram de alguma forma uma mudança de conceitos ou atitudes.

SEO e Buscas

1. Microsoft lança Bing. Sabemos que por hora não vai bater o Google, mas é certo que a Microsoft precisava de uma fatia de mercado maior que a  ínfima do antecessor MSN Search. Só espero que o Google coloque mais buscas nos resultados da busca, hoje sua página está uma vitrine de links patrocinados.
2. Buscas orgânicas baseadas em comportamento do usuário. Eu acredito que o SEO ficará uma ciência muito menos exata do que já não é conforme o algoritmo for influenciado pelo comportamento e escolhas de usuários. Estudar SEO é uma coisa muito cansativa e eu já decidi largar mão das discussões incessantes sobre uso de H1, links e metatags.

Flash

1. A morte do Flash? O Flash está vivo graças aos FLVs e a força de sites como o Youtube. Se não fosse isso ele só seria útil em banners – aquelas coisas piscantes que ninguém clica desde 2002.
2. Silverlight. Silver-o-que? Se o Flash já está mal das pontas para desenvolvimento de websites, para que investir em uma ferramenta inacessível e que ainda precisa de instalação de outro plugin?

Design

1. Design centrado no usuário. O usuário está cada vez menos interessado em sites piscantes e animações complexas. Salvo alguns projetos com público bem específico, 2009 foi o ano do layout com foco no conteúdo.
2. Design de Navegação. Coisa que nos anos anteriores era preciso empurrar guela abaixo de clientes, a arquitetura de informação e os temidos wireframes ficaram muito populares em 2009. Isso já mostra um significativo amadurecimento do mercado.

Desenvolvimento

1. jQuery. O jQuery formou uma legião de leigos em javascript, mas é para isso que serve toda IDE e framework, não é verdade? Facilitar a vida.
2. CSS3. Não funciona. Não use. Reclame com a Microsoft.
3. HTML5. É ótimo pelas novas tags e semântica, mas acabou com a padronização exigente de sintaxe que o (x)HTML trouxe. Achei isso um tiro no pé, mas é assunto para um outro post.
4. Wordpress. Quem diria, um gerenciador de blogs se tornando a mais usada ferramenta de gerenciamento de conteúdo. Wordpress mostrou de uma só vez o quanto é forte a comunidade de software livre e o quanto é importante uma interface voltada para a melhor experiência do usuário.

Browsers

1. IE8. O maior anti-clímax do ano. Seu lançamento só serviu para avisar que o desenvolvimento web ficará estagnado por pelo menos mais 2 anos.
2. Google Chrome. Uma ótima surpresa. Navegador super leve que já é o que eu uso para navegar aqui, tanto no Linux quanto Windows. E a belezura ainda vem com renderizador webkit.
3. Firefox. Continua uma ótima ferramenta para desenvolvimento. Mas hoje, só para desenvolvimento mesmo.

Redes Sociais

1. Twitter. Em 2007 eu via discussões políticas e indicações de ótimo conteúdo lá no passarinho azul. Em 2009 tivemos pseudo-celebridades criadas por nós, pseudo-movimentos políticos que não deram em nada e #BBB.
2. Facebook. O Facebook mostrou que pode ser um ótimo Twitter com fazenda.
3. Orkut. O Orkut lança um novo layout com menos funções, dá a opção do usuário escolher entre o novo e o velho e ele escolhe o velho. Vaporware?

Nos anos anteriores muito se dizia sobre o futuro da Web, mas não havia nenhuma conclusão sobre o que iria acontecer realmente. 2009 foi um ano que mostrou melhor o caminho que as coisas vão seguir, mas também mostrou que daqui pra frente o trem não pára mais.

Obviamente, nada disso é absoluto e aproveito para convidá-los a continuar a discussão aqui no espaço dos comentários. Um feliz 2010 a todos e junto com uma promessa de posts mais frequentes convido a conhecerem o novíssimo layout do site.

Esta semana tive um problema de conflito com o uso do SWFObject para usuários que ainda usam Internet Explorer 6. Ao acessar a página o nosso querido browser de 2001 da Microsoft, aparecia um erro “Operação Anulada” e não abria nenhuma parte do conteúdo.

Aí descobri que na verdade é um erro na interpretação do JavaScript. O IE6 não permite inserir conteúdo (append) no <body> se o script não for filho direto do próprio <body>. Complicado? Não importa. O importante é que a solução para isso é muito simples;

Existe um atributo para a tag <script> chamado DEFER, que pode solucionar, veja o que a própria W3C diz:

“When set, this boolean attribute provides a hint to the user agent that the script is not going to generate any document content (e.g., no “document.write” in javascript) and thus, the user agent can continue parsing and rendering.”

Em outras palavras, ele avisa pro navegador que o script não vai fazer o tal do append e ele continua renderizando o site normalmente.

Veja como a aplicação é simples:

<script defer="defer"> /* parâmetros do SWFObject */ </script>

Seria muito bom se ainda não tivéssemos que perder tanto tempo buscando soluções para problemas que só o IE6 tem, não é verdade? Mas isso não significa que deixamos de nos preocupar com seus usuários, afinal a web deve estar acessível a todos, independente de browser, dispositivo ou sistema operacional.

Faço isso por que é o meu trabalho, mas por outro lado não desejo dar suporte para o Internet Explorer 6 para sempre, e por isso criei há mais ou menos 1 ano a campanha Atualize seu Navegador (Updateyourbrowser.net). Caso não conheça, dê um pulinho por lá.

Mas antes de correr para atualizar para a nova versão, você precisa tomar alguns cuidados quanto à compatibilidade e entender o que há de novo por aí.

1. Compatibilidade de Plugins. O Core do WP muda ligeiramente a cada versão, assim como a estrutura de algumas tabelas no banco de dados. Plugins desenvolvidos para versões anteriores precisam ser testados com as novas mudanças e nem todos eles irão funcionar na nova versão (pelo menos não irão até que saia uma atualização do plugin).
2. Compatibilidade de Temas. A mesma coisa que acontece com os plugins, alguns temas podem conter algumas funções ou propriedades que não são compatíveis com a nova versão, neste caso você poderá simplemente ver uma tela branca ou de erro. Então verifique se seu tema está compatível com a versão 2.8

Novidades da nova versão

1. Busca e Instalação de Temas. A nova versão integrou uma busca por quantidade de colunas, cores e até por elasticidade do layout na sessão de gerenciamento de temas. Uma vez escolhido, o tema é baixado e instalado na mesma hora.
2. Editor de Temas. Agora o editor de temas está colorindo tags (syntax highlighting) e fornecendo dicas de propriedades do codex wordpress no próprio editor – da mesma forma que as IDEs de linguagens de programação fazem. Isso será muito útil para quem desenvolve para a plataforma.

   

3. Sistema de Tags. Assim como era no editor de categorias, você agora pode editar nome, slug e descrição de cada Tag cadastrada no sistema.
4. Melhor Interface de Widgets. A interface de Widgets, que ainda era um pouco confusa até a última versão, está muito mais intuitiva e fácil de usar.
5. Interface de Administração. Agora você pode arrastar e soltar, escolher quantas colunas quer na sua interface e configurar seu dashboard para aparecer exatamente com as informações que preferir, e está muito fácil fazer isso. Lembra um pouco a interface do Netvibes inclusive.

Wordpress é uma ótima ferramenta não só para blogs, como muitos pensam, mas no gerenciamento de conteúdo em geral e vem roubando espaço do Joomla e Drupal principalmente pela sua comunidade de desenvolvedores, que é uma das mais fortes e ativas atualmente.

A nova interface da administração do Wordpress é um exemplo de que a equipe está pensando principalmente no usuário que vai administrar o conteúdo e isso tem se tornado o principal diferencial do Wordpress para todos os seus adversários. Eles que se cuidem.

Mais informações no webdesignbooth.

Esta edição terá palestras de Executivos da Microsoft e Google e mais uma pá de gente legal. Veja local e programação:

09/06 – Rio de Janeiro – Centro de Convenções Sulamérica
17/06 – São Paulo – Centro de Convenções Frei Caneca

Palestras:

Tendências do Mercado de Internet – Gilberto Mautner
Agilidade e Qualidade de Projetos – Fabio Akita
O Google Além das Buscas – Executivos do Google
A Internet Além da Web – Executivos da Microsoft
O Novo Marketing para a Sociedade Digital – Marcelo Tripoli
Estratégias em Sites de Busca: SEO & SEM – Martha Gabriel

As incrições custam R$50,00 revertidos em serviços fornecidos pela empresa e pode ser feitas no próprio site do evento. Eu estarei na edição do Rio de Janeiro e você pode me seguir no Twitter (@richardbarros) para acompanhar durante o evento. Fica a dica =)

Embora nem todos sejam técnicos ou diretamente relacionados com design ou internet, são publicações que de alguma forma me fizeram uma melhor pessoa ou profissional. Espero que lhe seja útil.

Não me Faça Pensar

Este livro é leitura obrigatória para qualquer profissional que trabalhe com internet. Tanto para as áreas técnicas quanto para design ou marketing, o livro é uma cartilha com o essencial de usabilidade e design de interfaces para a web.

Design para a Internet – Projetando a experiência perfeita

Um livro completo que apresenta de forma bem didática todas as etapas de um projeto de website, desde a prototipação de interfaces até os testes de usabilidade com usuários. Mostra ainda alguns exemplos práticos no design de sites de grandes empresas.

Ergodesign e Arquitetura da Informação

Explica com uma linguagem simples e direta o que é a Arquitetura da Informação e como projetar interfaces voltadas para a melhor experiência do usuário. O desafio da pesquisa, testes de usabilidade e toda a questão organizacional do conteúdo dentro da interface.

CSS Mastery – Criando páginas web com CSS

Um dos mais vendidos do mundo sobre CSS, o livro mostra dos conceitos básicos aos mais avançados quando o assunto é Cascading Style Sheet. Pode ser usado como um guia rápido para montagem de layouts em CSS/HTML e possui muitas dicas para criar sites crossbrowser.

Construindo Sites com CSS e (X)HTML

Livro do Maujor, autor que mantém um site em português sobre CSS há vários anos e é uma das maiores referências brasileiras no assunto. Uma abordagem para iniciantes e intermediários que ensina a montar um site dentro dos padrões W3C a partir do zero.

O Homem mais rico da Babilônia

Este livro dá boas soluções para evitar a falta de dinheiro e é uma aula completa de educação financeira. Aprenda a cuidar do seu dinheiro e fazer seu patrimônio sempre aumentar. Siga os conselhos do homem mais rico da Babilônia e nunca mais terá problemas financeiros.

GTD – A Arte de Fazer Acontecer

A versão em português do Getting Things Done, o mais famoso método de motivação e produtividade do mundo. É um livro que ensina como organizar suas tarefas e tirar melhor proveito do tempo no trabalho e na vida pessoal.

Pensar com Tipos

O livro percorre a origem das grandes fontes tipográficas e conta um pouco da história do design de tipos e das técnicas de diagramação. Os ensaios trazem contextualização histórica e teórica que vai das origens da tradição aos impasses nos novos meios de comunicação.

Todos sabemos que é um mercado muito competitivo e ainda tem muita gente se vendendo a preço de feira. A tão temida máfia dos sobrinhos continua atacando e tem muita mão de obra barata fácil de ser encontrada.

Mas não dá para lutar contra isso. Eu não fiz esse post como um guia de como tirar uns trocados fazendo site, estou falando de chegar no primeiro milhão mesmo. Partindo do zero (há!). E trabalhando com web (não ria!).

É possível sim, mas também é um investimento de longo prazo que exige muita disciplina e que você já deveria ter começado a fazer.

1. Saiba mais que ontem.
   O que andas fazendo no seu tempo vago? Se está sendo pago para ficar numa empresa e ficar ocioso por alguns minutos, aproveite para ler blogs da sua área, estudar um tutorial, tentar aprender coisas novas. Você estará em constante aprendizado e ainda estarão lhe pagando para aprender.
2. Seja multidisciplinar.
   Entenda o trabalho dos seus colegas. A troca de experiências é muito importante não só entre profissionais da mesma área. Procure participar de outras atividades sempre que possível, até mesmo assuntos que não sejam diretamente relacionados com sua função. Você pode se tornar uma peça fundamental para a empresa.
3. Seja especialista.
   Eu sei que acabei de falar sobre multidisciplinaridade e que existe muita pressão em saber todos os softwares, ferramentas e linguagens de programação. Mas tenha foco. Não basta ser como um pato, que anda, nada e voa, mas não faz nada direito. Especialize-se em algo que goste de trabalhar e seja o melhor naquilo.
4. Faça Networking.
   Trocar experiências com pessoas que fazem a mesma coisa que você em outras empresas. Encontros, eventos, congressos e até mesmo o twitter ou blogs são ótimas ferramentas para conhecer gente nova na sua área. Acredite, tem muita gente que vai a eventos só para aprender com as palestras e não absorvem metade do que o evento proporcionaria com networking.
5. Pague-se pelo seu trabalho.
   Pegue uma quantia qualquer, seja ela 5, 10 ou 20% do que você ganha e dê de presente para você mesmo. Esse dinheiro deve ficar longe de pagamento de juros ou de produtos que desvalorizam com o tempo como tv, celular, notebook, roupas e todos os outros. Faça um investimento, mesmo que conservador para fazê-lo render. Isto é um conceito básico de educação financeira que pode ser encontrado em diversos livros que você já deveria ter lido, como O Homem Mais Rico da Babilônia ou Pai rico, pai pobre.
6. Goste do que você faz.
   Não quero estragar suas expectativas, mas se você chegou até aqui e não gosta do seu trabalho, você já está perdendo muito tempo. Procure um cargo ou profissão que realmente  dê tesão prazer e  siga cada um dos ítens acima. Isso será reconhecido mais cedo ou mais tarde.

Hora de colher os frutos.

Aproveite as oportunidades e não dê mole para o azar. Com o mínimo de pró-atividade e seguindo ítens acima, projetos maiores, promoções ou novas propostas serão apenas consequência.

Em alguns anos, se ainda não estiver satisfeito com seu salário ou tipo de tarefas de trabalho, imagine a quantidade de conhecimento que já adquiriu e pessoas que conheceu. Terá uma boa base de conhecimento em diversas atividades e poderá criar seu próprio produto, site ou empresa, não é verdade?

E você o que acha disso tudo?

Algumas boas discussões sobre novas tendências foram debatidas e vou levantar aqui alguns dos pontos que acredito que deveriam transcender o evento e chegar a todo desenvolvedor ou designer para se questionarem sobre suas atitudes, escolhas e tecnologias.

Interfaces Ricas – RIA

Aconteceu uma apresentação de cases de grandes e fantásticas campanhas em Flash, super criativas e muito bem exploradas, com o Zeh Fernando defendendo o design emocional e um maior envolvimento do público com esse tipo de campanha. Geralmente sem preocupação com SEO ou Acessibilidade, são peças que conseguem atingir o público-alvo por divulgação em outras mídias ou no boca-a-boca, mas que também não costumam ficar por um longo período de tempo online.  

Enquanto isso (não simultaneamente) em uma outra sala, o PC Silva apresentava de uma forma um pouco mais técnica a utilização do Flex e do Adobe Air para RIA e sistemas tanto web quanto desktop, usando como principal argumento o aumento do uso dessa tecnologia e a facilidade na programação de um código formatado nos padrões XML. 

Gerenciadores de Conteúdo – CMS

Paulino Michellazo levantou a bola para discussão sobre os mais utilizados CMS do mercado e Wordpress, Joomla e Drupal são discutidos minuciosamente para esclarecer que tipo de público ou produto cada um deles melhor atende. Como sempre, Wordpress acaba melhor para blogs, Joomla para sites menores e desenvolvedores um pouco mais safos e Drupal para quem gosta de mais desafios.

Eu, particularmente, já adquiri uma boa experiência com uso de Wordpress como CMS e conheço suas limitações, que são bem poucas. Utilizo como gerenciador de conteúdo não só para sites institucionais como para sites 100% em Flash. Posso afirmar que é possível e muito prático usar o WP, mas não tão fácil quanto alguns imaginam.

Linguagens de programação

Outra discussão que rolou foi sobre semântica de código e técnicas de programação mais ágeis. Foram colocadas em cheque as linguagens mais utilizadas como .NET e Java e a novas e aparentemente promissoras Ruby on Rails e Flex. O código do Ruby on Rails é super semântico e você consegue, além de fazer muito com poucas linhas, entender tudo que está acontecendo somente pelo nome dos objetos e variáveis. É claro que também é possível fazer código semântico com qualquer outra linguagem, mas a arquitetura do RoR é muito ágil e Fabio Akita e Guilherme Chapiewiski defenderam isso com muita competência.

Inovação Digital e o novo Empreendedorismo

Em duas apresentações incríveis, Gui Giardelli defendeu de uma maneira nobre e nacionalista a inovação digital no Brasil e a união das equipes para um movimento de criação mais ativo no país. Não só criação de novas idéias e empresas, mas também de conteúdo e de novas aplicações web. Tarefas que precisam de nada além de um computador com internet e um pouquinho de tempo.

Para a galera de desenvolvimento, fica a dica: Criar um concorrente global para o McDonalds ou Coca-Cola pode ser bem complicado, mas você pode do seu quarto desenvolver um forte concorrente para Orkut ou Youtube. Ou ainda, alguma outra aplicação que seja muito mais útil para a sociedade, tanto global quanto local. Tem muita gente que pode fazer, mas não dá o primeiro passo, vamos dar um gás nisso!

O saldo do evento foi muito positivo, sem contar grandes amigos que reencontrei e outros tantos novos amigos que fiz. A organização merece os parabéns por manter a iniciativa e por ajudar a unir mais ainda os profissionais aqui do Rio de Janeiro. Que venha o próximo!

Obs. As fotos foram retiradas do Flickr da Pathaddad com a devida autorização =)

A Arteccom disponibilizou 5 ingressos para este blog e se você está afim de ir na faixa, é só prestar atenção em como participar.

1. Entre no site www.updateyourbrowser.net.
2. Coloque o código da barrinha ou o botão em seu site ou blog e ajude a divulgar a campanha Atualize seu Navegador (é por uma causa nobre ;))
3. Comente aqui neste post dizendo se pretende ir ao ETI ou ao EWD e preencha corretamente os campos Email e Seu site portfolio ou blog pessoal (já com o código barrinha dentro da tag HEAD ou botão da campanha em algum lugar visível).
4. Será sorteado somente 1 ingresso por pessoa ou site.

Simples assim. Serão sorteados 5 ingressos pelo site Random.org para 5 das pessoas que comentarem este post dentro das regrinhas acima. (A própria Arteccom entrará em contato pelo email preenchido antes do fim da semana).

Muita Atenção: A promoção só valerá para ETI ou EWD do Rio de Janeiro, que acontecerá no dia 28 de março de 2009. Passagem e Hospedagem não estão incluídos. Portanto, se você está em outro estado e quiser participar terá que arcar com todas essas despesas.

[UPDATE] Como foram poucos participantes, eu nao quis deixar ninguem de fora. Todos os 7 receberao convites (na verdade o convite ja deve estar em sua caixa de email). Confirmando:

• Daniel Cobalto – ETI
• Pedro Cardoso – ETI
• Bruna Morato – EWD
• Dan Alvares – ETI
• Danilo Cyrino – ETI
• Leonardo Carlos – EWD

Eu estarei no EWD, qualquer coisa me procurem por la para batermos um papo ;) Abracos!

A Microsoft lançou oficialmente o Internet Explorer 8 e, embora ainda não tenha incorporado praticamente nenhuma das novas propriedades do CSS3, ele já interpreta todo o CSS 2.1 e passou no teste do ACID2, o que já é alguma coisa.

Algumas pessoas já reclamam que estão tendo problemas de renderização com o CSS no IE8. O Browser está mais próximo dos padrões e portanto, você provavelmente tem em mãos um código fora dos webstandards ou com muitos CSS Hacks.

Se você tem pressa, existe uma maneira de fazer o Internet Explorer 8 emular a página com o render exato do IE7. E isso pode ser feito apenas colocando uma META TAG no código HTML. Veja como:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Obviamente você não deve se acostumar a esta solução. Corra atrás de desenvolver dentro dos padrões e comece testando seus sites em browsers com melhor renderização, como o Chrome, Safari ou Firefox.;

Não é fácil de entender o motivo pelo qual a empresa se mantém tomando esse tipo de decisão em uma época de softwares livres e dezenas de outros concorrentes de peso ganhando mercado a cada dia, como o Google Chrome, Mozilla Firefox e até o Apple Safari que já tem uma versão estável que roda em Windows.

Olhando dessa forma, só o fato de não haver notícias de um IE8 para Mac ou Linux já parece um grande tiro no pé, mas a gente entende (ou finge que entende) que é a estratégia da empresa e que eles não precisam ou ligam para isso.

Além do mais, as novidades do novo navegador só serão novidade para quem nunca saiu do Internet Explorer. Estão com um serviço chamado Activities que permite integração aos demais serviços Microsoft como Live Maps ou Hotmail e um sistema de pesquisas na tela, movimentação de abas e alguns outros fru-frus que já existem nos browsers concorrentes há algum tempo.

A boa notícia para eles é que já fizeram alguns testes de velocidade no carregamento de alguns sites e o IE8 tem trazido ótimos resultados de performance, carregando algumas páginas em velocidade superior aos concorrentes Chrome e Firefox.

Renderização

O CSS 2.1, que ainda estava com suporte incompleto nos IE’s anteriores, recebe finalmente suporte total na nova versão (pelo menos é o que diz a empresa). Usando informações recolhidas na Biblioteca da MSDN, elaborei uma lista com propriedades e seletores CSS que não eram aceitas na versão 7 e estarão disponíveis agora na versão 8.

Pseudo-Classes

1. :active - Para quando o elemento estiver ativo
2. :focus – Para quando o elemento receber foco
3. :lang() - Permite especificar regras para idiomas diferentes dentro do código.
4. Infelizmente não foi inserido suporte para nenhuma pseudo-classe do CSS 3, como first-child, last-child ou nth-of-type()

Pseudo-Elementos

1. :after - Para conteúdo gerado após determinado elemento
2. :before - Para conteúdo gerado antes de determinado elemento
3. Infelizmente não foi inserido suporte para nenhum pseudo-elemento do CSS 3, como ::first-letter ou ::first-line

Propriedades

1. list-style-type – Adicionados novos marcadores como decimal-leading-zero, lower-greek e lower-latin.
2. font-weight, white-space e word-spacing – Propriedades agora renderizam normalmente e sem limitações.
3. quotes - Quotes permite adicionar caracteres como “aspas” dinamicamente em alguns elementos HTML através do CSS.
4. border-style - Agora com suporte completo, é permitido usar o valor Hidden.
   
5. caption-side - Suporte completo
   
6. empty-cells – Para exibir ou esconder células vazias em tabelas HTML.
7. display – Display: table, table-inline, table-row e os demais agora funcionam.
8. top, right, bottom e left - Agora com suporte completo.
9. z-index - Agora com suporte completo.
10. outline - Borda usualmente pontilhada de quando clica com o mouse em um link, agora pode ter o estilo editado no IE8.

Se pensarmos que este novo navegador ainda vai demorar alguns anos para se popularizar (o IE6 é de 2001 e está aí até hoje) e que a Microsoft não implementou quase nada do CSS3 no seu IE8, é com muito pesar, meus caros amigos, que afirmo que ainda ficaremos mais um bom tempo com uma grande limitação na criação de páginas com CSS e ainda estaremos usando alguns CSS Hacks exclusivamente para o navegador queridinho da Microsoft por um bom e longo tempo.

Ele conta que quando começou a criar roteiros para suas apresentações stand up sofria de um problema sério de acumulação de tarefas e quanto mais perto o dia do show ficava, maior a pressão e menos ideias apareciam.

Então criou essa corrente de motivação, que consiste em pegar um calendário e marcar um “X” no dia em que fez alguma coisa pelo projeto. Você pode ter criado dezenas de páginas ou apenas uma linha, o importante é fazer o projeto andar.

Após alguns dias você terá um calendário cheio de marcações de X em sequência. “Don’t brake the chain” [não quebre a corrente] – diz o comediante, principalmente porque se você deixar de andar com o projeto por somente um dia, fica muito difícil voltar a trabalhar nele.

Seinfeld afirma também que quando trabalha um pouco diariamente tem resultados de melhor qualidade que se sentasse pra escrever 100 piadas em um dia.

Funciona porque é motivador, mantém você pensando no projeto e cria hábitos diários. Você pode até praticar em uma aplicação web do Smarterfitter baseada nessa ideia de Chain Calendar.

Eu conheci sua corrente de produtividade no site Lifehacker alguns anos atrás e já utilizei em diversos projetos pessoais que não conseguia terminar. Hoje em dia sempre que algum projeto pessoal é vítima de procrastinação eu recorro à ele e funciona muito bem.

Faz um teste aí depois me conta o que achou.