Apresentando: bburp!

Pois é, devo confessar que abandonei o A List Apart Brasil... A correria do dia a dia acabou me forçando a reorganizar algumas prioridades, e infelizmente as traduções ficaram fora da minha rotina.

A boa notícia é que nosso colega Will Sales se prontificou a montar outro blog com traduções, só que mais abragente que o ALA Brasil, englobando também artigos da Smashing Magazine e Webdesigner Depot. Trata-se do bburp!, que está no ar desde agosto/2012 e já conta com 7 artigos traduzidos. Para os órfãos do ALA Brasil, recomendo dar uma passada por lá!

Desejo vida longa ao bburp!, que a rotina dos tradutores não os impeça de prestar este grande serviço para a comunidade brasileira de web! Hail bburp!

S.O.S.

Olá a todos! Estou escrevendo para pedir uma ajuda: como vocês podem perceber, estou desde dezembro/2007 sem postar nada aqui, e lhes garanto que não foi por falta de vontade, mas sim de tempo! Assim, queria saber se alguém se candidata como colaborador do ALA Brasil, traduzindo textos do ALA americano. Se alguém se interessar, me mande um e-mail no luciano.rodrigues@gmail.com e combinamos os detalhes.

Abraços!

Obrigado aos visitantes!

PS: Pessoal, algumas pessoas já me escreveram mostrando interesse em participar do ALA Brasil. Para quem mais tiver interesse, vamos combinar o seguinte: me mande um e-mail informando qual artigo você pretende traduzir, pois como temos algumas pessoas interessadas, talvez alguém já esteja traduzindo o mesmo artigo. Depois disso, basta me enviar o texto traduzido com a referência para o original com seu nome e e-mail que deseja que apareça nos créditos do artigo. Assim que possível (2 a 3 dias, no máximo) eu faço a publicação no blog. Fechado??

Interação Homem-Homem

por Sharon Lee

Não é nenhuma novidade dizer que vivemos numa era em que a sobrevivência dos negócios depende da habilidade em se comunicar efetivamente através da internet.

A novidade é a percepção de que somente possuir um website antigo não é o suficiente. A qualidade do seu site e a natureza de seu conteúdo são primordiais e sua habilidade de comunicação com seu público é a chave.

Um bom website é construído em duas verdades básicas – que a internet é uma mídia interativa e que o usuário final é na verdade um ser humano. Em outras palavras, ela deve ser uma experiência. Assim como numa aventura, um pouco de pensamento estratégico é necessário para garantir que a experiência seja prazerosa.

Me Respeite

Lembre-se que a pessoa do outro lado da tela é um ser humano. Eles querem saber que sua empresa os entende.

Separe um tempo para descobrir quem são eles e do que eles gostam. Depois trabalhe seu texto e seu design para atendê-los. Uma analogia com o mundo real seria a aproximação que você faz para iniciar uma conversa numa festa (uma pessoa com quem você espera se tornar amigável). Seria bom você ouvir atentamente aos interesses desta pessoa e ajustar sua conversa a ela. Você não iria chateá-la com uma longa explicação sobre CSS ou Ajax num sábado à noite, iria?

Tente pensar além da demografia e visualize o individual. Muitos briefings contém uma descrição muito abrangente do público-alvo. Durante a reunião de briefing, tente estreitar o foco. Um briefing pode começar com:

Público da Intranet: Agentes de 20 a 50 anos de idade

Isto pode ser dividido num público primário e outro secundário, como abaixo:

Público Primário da Intranet: de 20 a 35 anos (agentes de vendas)

Público Secundário da Intranet: de 35 a 50 anos (gerentes plenos e seniors)

A partir deste ponto, ajuda bastante se você se colocar no lugar do agente e se logar na intranet com um copo de café na mão meia hora antes de começar a procurar suas casas em aberto. Você vê seu desejo de animações em flash desaparecerem como fumaça? Você vê como o “vá direto ao ponto e seja óbvio” se torna uma diretiva? E quanto à necessidade de personalização, para que o agente possa ver o que ele precisa imdiatamente, como por exemplo, compromissos do dia, contatos e seu fluxo de vendas?

Fechando a lacuna entre você e seu público te ajudará a tomar decisões corretas e ajustar o design às suas necessidades.

Me Conte uma História

Utilize uma das maneiras mais antigas e eficazes de transmitir conhecimento em seu site.

Contar histórias é uma maneira rica e interativa de envolver o usuário no design, provocar uma resposta emocional, ou aumentar a experiência de aprendizagem de um usuário. A pergunta a se fazer é:

"Existe alguma maneira mais criativa de apresentar a informação necessária e que aumente o envolvimento do usuário?"

Sites de notícias estão cada vez mais enfrentando este desafio. No passado, uma boa história poderia ser uma única página de texto. Agora ela pode ser enriquecida com multimídia para oferecer formas alternativas de se ver a história, incluindo linhas de tempo interativas, web-cams, animações, áudio e vídeo. Estes elementos podem oferecer ao público um entendimento mais abrangente e profundo sobre o tópico e as questões que o rodeiam.

A coisa mais impressionante em usar a internet para contar uma história é que ela pode ser não-linear – o usuário pode clicar para ver os fragmentos da informação que lhe interesse, ao invés de ver a história toda do começo ao fim. Ao contar uma história através da interação com o usuário, você permite que ele escolha seu próprio caminho de acordo com suas preferências e necessidades.

Me Anime

Conforme a banda larga se torna mais popular, os web designers começam a combinar cada vez mais o design visual com interação e movimento. Seu papel se tornou menos o de um designer e mais o de um diretor de experiências. Para ilustrar as diferenças entre esses papéis, vamos ver como a direção de criação de um design pode ser descrita:

"Para promover seu ponto forte, que é o conteúdo local sobre entretenimento, vamos incluir a paisagem de cada cidade com sua marca."

A direção de uma experiência, por outro lado, precisaria de mais documentação na etapa de conceituação. Um diretor de experiência deve juntar o conteúdo, formular um estilo interativo e orquestrar os elementos criativos sobre os quais a história será contada. Os web designers do futuro podem até precisar escrever situações de experiências, mesclando o processo de design com o de direção de cinema.

Ao entender a experiência do usuário como um todo, os designers podem criar uma experiência rica e sensorial, que podem imergir os usuários e encorajá-los a ficarem completamente envolvidos com o site e seu conteúdo. Quando o objetivo do site é educar, a imersão é muito importante, pois ela pode aumentar a velocidade de aprendizagem e o entendimento geral – principalmente quando os usuários principais de um site são crianças.

Através da imserão, o usuário experimenta prazer e satisfação: qualidades positivas que serão transferidas para sua marca.

Me Inspire

Algumas pessoas acreditam que o web design começa e termina com logotipia. Suas visões são que a identidade visual da marca é facilmente aplicada à web através da transferência de elementos comuns como o logo, as cores e a tipografia.

Realmente, muito do tráfego do seu site serão pessoas que conhecem ou escolheram sua marca no mundo real. Então quando elas entram no seu mundo virtual, é uma boa oportunidade de reforçá-la.

No entanto, seu site pode fazer muito mais que copiar sua identidade. Ele pode encapsular a personalidade da marca, seja ela inspiradora, confiável ou autoritária. Estas características são parte da razão para que seu público tenha escolhido a sua marca.

Durante a filmagem de “Os Desajustados” (Withnail and I), o diretor pediu ao ator principal Richard E. Grant para “manchar a película”, querendo dizer para ele ir fundo, sem meias palavras. É um bom conselho para quando você quer inspirar seu público e fazer com que ele tome uma ação – não seja bem educado, agarre-os pela garganta – e traga vida à sua marca!

Me Encante

Um belo design dará ao usuário a impressão que o site é fácil de usar, mesmo que não seja. Além disso, é mais provável que o design seja usado porque a psique humana é inexoravelmente dirigida pela beleza.

Sites transacionais geralmente falham miseravelmente no campo estético. O pensamento predominante é que é o domínio do consultor de usabilidade – que o design é secundário e geralmente confinado à “coloração” das células.

Ainda assim, processos e páginas altamente complexos podem parecer simples com o estilo correto. O espaçamento se torna muito importante por deixar os olhos do usuário descansarem antes de irem para o próximo bloco de informação. O design pode criar uma ordem e um sentimento de paz e serenidade – atributos positivos quando você está pedindo que seu usuário preencha um formulário extenso. O design profissional também pode aumentar o nível de confiança dos usuários, a característica mais importante para se ater em qualquer site transacional.

Se você não é um profissional de design visual, você pode conseguir confiança e lealdade consultando um designer de alto nível para sites de negócio crítico ou transacionais.

Os princípios de boas interfaces homem-computador são simplicidade, suporte, clareza, encorajamento, satisfação, acessibilidade, versatilidade e personalização. Embora seja essencial manter estes princípios, também é importante simpatizar e inspirar seu público para que ele sinta que você não o está tratando como um usário sem rosto, mas sim como um ser humano. Fazendo isso, você irá aumentar sua afinidade com o design e conseguir atitudes positivas com relação à sua marca, empresa e produto.

-----

Este artigo foi publicado originalmente na edição 240 da A List Apart e pode ser acessado aqui.

Traduzido por Luciano Rodrigues.

Como Fazer a Defesa de um Projeto

por David Sleight

Um dos maiores desafios que qualquer designer enfrenta é articular sua intuição. Explicar com clareza o como e o porquê do projeto – associando palavras a coisas que você acha óbvias – pode ser complicado. Agora tente fazer isso sob pressão, cara a cara com o seu patrão ou cliente que simplesmente não tem tempo para perder.

A boa notícia é que designers já têm o que é preciso para fazer uma apresentação sobre pressão. É algo intrínseco ao trabalho. Um bom design é iterativo, remove-se todo o desnecessário até restar apenas valores reais. Uma boa apresentação, independente do contexto, não tem grandes diferenças. Tudo que é preciso é praticar um pouco para manter o foco durante a reunião.

O sistema amigo

Como diz o velho ditado, a prática leva à perfeição. E não há muito a saber sobre praticar. Não é preciso arriscar a vida ou o projeto. Não é preciso reuniões formais. Apenas perguntar aos colegas “O que você acha?” é suficiente para começar.

Você não tem que concordar com tudo que ouvir. Use as questões dos seus colegas para ter uma visão diferente da sua, veja o trabalho sobre outras perspectivas. Ser detonado pela crítica de outro designer pode ajudar, apesar de ser pura crueldade. Contudo, é melhor escutar antes do que durante a apresentação.

Tente discutir racionalmente todas as críticas. Explique suas decisões. E nunca use “simplesmente funciona”. Pense mais em “esse layout conduz o olhar para as áreas mais importantes da página”. Chegar ao fundo dos porquês é a chave.

Lembre-se, só porque o design pode ser subjetivo não quer dizer que não existem bases. Em algum lugar lá no fundo, você está fazendo decisões enquanto projeta, sejam essas conscientes ou não. O truque é trazer essas decisões à tona.

Quando estiver listando os pontos da apresentação, concentre-se na utilidade como um caminho para explicar suas decisões para a platéia. (E não esqueça que a estética pode ter utilidade também!) Selecione elementos menos importantes no seu design e pergunte a si mesmo “pra que isso serve?”, melhor ainda “para que isso é útil ao usuário”. Se você se esforçar honestamente para responder essas perguntas e terminar sem palavras para respondê-las, é provável que você precise voltar ao rascunho.

Pronto em 30 segundos

Agora que você coletou informações construtivas, é hora de se acostumar a estar na berlinda. Pegue um relógio, veja os segundos passando e mantenha o seguinte princípio em mente: depois que você terminar seu discurso inicial, você só tem 30 segundos para responder a qualquer pergunta.

Dureza? É a realidade (30 segundos é muito mais tempo de conversa do que você pensa!). Às vezes você pode precisar de mais, em outras de menos. O mais importante, no fim das contas, é que grandes silêncios soam muito mal.

Nesse momento é que as informações que você coletou valem ouro. São grandes as chances das perguntas do seu cliente já haverem sido feitas por algum dos seus colegas. Usando os melhores pontos das conversas anteriores, e resumindo eles em algumas sentenças cada um, você estará pronto para lidar com os mais difíceis comentários. Novamente, pense no relógio quando estiver preparando a apresentação e tudo sairá bem.

Se existir algo verdadeiramente genial no seu design que faz com que você se derreta em elogios, é melhor evitar. É importante entender que uma conversa prolongada não é benéfica. Todos somos pessoas ocupadas. Mesmo na rara situação do seu projeto ser a coisa mais importante acontecendo, nunca será a única. Se o tempo extra for desejado, espere que seja requisitado.

Preparando o terreno

A próxima dica não é revolucionária em nada, mas pode ser esquecida com freqüência: separe um tempo para pesquisar sobre sua platéia, mesmo que seja só um pouco.

Você não deve entrar num jato armado sem saber que botões podem causar um incidente internacional, e você certamente não deve ir para uma reunião importante sem saber algo sobre sua audiência. É para o seu próprio bem que você deve descobrir o máximo possível sobre as pessoas que vão estar com você na mesa de reunião. O importante é saber o que é apropriado e diminuir a possibilidade de acontecerem imprevistos.

Existem grandes possibilidade de alguém já conhecer essas pessoas (é estatisticamente certo no caso de ser um cliente interno). Tente acessar a memória da instituição, começando pelo seu supervisor ou por um colega de trabalho. Eles já conhecem o cliente? Já lidaram com ele anteriormente? Caso não, eles poderão indicar alguém que sim. Se você for o chefe (sorte sua!), ou um autônomo, você já estará lidando com alguém da empresa que poderá fornecer referências.

Uma vez que você tenha encontrado sua fonte, investigue sobre coisas relacionadas ao comportamento em reuniões, negociações anteriores, histórias da empresa. Para que fique claro, não seja invasivo. Não há motivo para contratar um detetive particular ou elaborar um dossiê. Basta apenas o suficiente para dar uma noção de como proceder.

Agora que você já sabe alguma coisa sobre o cliente, não enlouqueça tentando antecipar as ações dele. Mantenha-se concentrado no temas principais. Uma forte reputação para uma abordagem conservadora? Quem sabe voltar a usar marcas dançando. Festa do pijama? Tudo bem, pense mais além. Essa previsão de bizarrices que estão por vir impede que você fique ofuscado por extravagâncias do cliente, como fazer reuniões na esteira do escritório (ria enquanto pode – é engraçado até acontecer com você). Imaginar cenários inusitados pode evitar que você fique sem ação diante de algo inesperado.

Resumindo

O mais importante de toda essa preparação é tornar você um melhor designer em todos os momentos, não apenas quando você está na berlinda. Desenvolver uma comunicação limpa e concisa é provavelmente uma das coisas mais importantes que você fará para a sua carreira.

Através da prática, você se tornará mais adepto do ajuste fino da abordagem ao público-alvo. Apesar de que os blocos fundamentais estarão sempre lá. Encontre a mensagem, depois a apresente à sua audiência com clareza e velocidade.

-----

Este artigo foi publicado originalmente na edição 237 da A List Apart e pode ser acessado aqui.

Traduzido por José Pirauá.

Educando seus Stakeholders

por Shane Diffily

Mesmo que machuque admitir isto, a maioria das decisões importantes no desenvolvimento de websites não são feitas por profissionais de design. Elas são feitas pelos donos do negócio e gerentes que nos contratam. Afinal, são eles que têm o dinheiro, então é justo que eles definam as prioridades de web.

Infelizmente, esta situação tem uma grande desvantagem. Ainda que estas pessoas tenham uma boa intenção, elas geralmente estão totalmente desatentas aos fatos que deveriam e realmente influenciam a tomada de decisões na web. O triste resultado é que escolhas de investimento equivocadas são feitas regularmente. Por exemplo, um executivo que ignora o potencial de dispositivos móveis pode aceitar um site que é inacessível em telefones celulares. Do mesmo modo, uma aplicação que é construída sem a consciência das leis digitais pode acabar custando uma pequena fortuna em multas judiciais.

Preparando a cena

Aqueles de nós que fazem suas carreiras em planejamento de sites têm a obrigação de ajudar tais pessoas. Nosso objetivo deve ser equipar os tomadores de decisão com o conhecimento que eles precisam para fazer escolhas sensatas e bem informadas sobre desenvolvimento.

O propósito deste artigo é mostrar a você como fazer isso com um simples processo de educação dos stakeholders (Nota de Tradução: termo utilizado em Gestão de Projetos. Pode se traduzido como “responsáveis”). Isto te permitirá explicar os fatores principais que moldam as convenções da web e ajudá-lo a “preparar a cena” para uma futura tomada de decisão.

Os fatores contemplados neste processo incluem qualquer coisa que diga respeito à liberdade de uma empresa de operar online. Para ajudar, eles podem ser categorizados em dois grupos: fatores globais e industriais e fatores gerenciais e de negócio. (Ambos serão explorados em detalhes logo abaixo.)

Em minha experiência, a melhor maneira de “preparar a cena” é organizar um treinamento onde os principais stakeholders são apresentados aos fatores que influenciam decisões relacionadas à web. Os benefícios de seu esforço educacional se tornarão óbvios assim que o treinamento terminar. Você verá que o discernimento dos stakeholders estará bem mais informado e seguro do que antes; por fim, melhores decisões surgirão das discussões pós-treinamento

Vamos dar uma olhada nos principais fatores que seus stakeholders podem estar perdendo.

Fatores Globais e Industriais

Fatores globais e industriais são aqueles que direcionam o desenvolvimento web ao mais alto nível. Ainda que estes itens geralmente estejam sob a influência somente de grandes empresas, as menores podem ter uma voz se elas agirem em conjunto, por exemplo, através de uma organização industrial. Eles incluem:

• A Lei
• Tecnologia
• Cultura e sociedade digital
• Melhores práticas
• Tendências de indústria e mercado

A Lei

Já que a “ignorância não é defesa”, o cumprimento da lei deve ser prioridade em atividades online. Leis de internet abordam a legislação, diretivas governamentais e julgamentos que têm o poder de influenciar o desenvolvimento.

Felizmente, um conjunto padrão de regulações da web subiu para um nível global. Se você conseguir convencer seus stakeholders a prestarem atenção neste conjunto de regras, pode acreditar que um patamar mínimo de legalidade será atingido.

Dentre as mais conhecidas destas regras estão aquelas relacionadas aos direitos autorais. Falando de forma simples, seu cliente deve se certificar de que todos os gráficos, conteúdo e código foram corretamente licenciados para reprodução (ou produzido “em casa”) antes do uso.

Regulações de privacidade e segurança precisam de uma consideração similar. Endereços de e-mail e detalhes pessoais não podem mais ser utilizados sem permissão. Muitos países possuem longas listas de legislações que controlam a maneira como você consegue, armazena e explora tais informações.

Numa ramificação parecida, diretivas sobre e-commerce exercem um importante papel na regulação de atividades da internet – particularmente diretivas que tratam de direitos do consumidor e impostos internacionais. Na verdade, leis de estelionato online estão se provando difíceis de gerenciar para um público internacional.

Controles sobre a liberdade de imprensa também criam uma série de dilemas gerenciais. Regras sobre calúnia e difamação, racismo e preconceito, e material adulto e obsceno colocam parâmetros significativos sobre o que você pode e (mais importante) não pode publicar. Isto é especialmente relevante se seus stakeholders querem explorar conteúdos gerados por usuários, como em wikis e grupos de discussão.

Finalmente, se seu empregador opera num setor governamental, você não deve esquecer da acessibilidade e outros requisitos que são importantes nesta área, como a legislação de línguas oficiais.

Tecnologia

Algumas equipes de projeto têm feito presunções equivocadas sobre o impacto da tecnologia em sua tomada de decisão – particularmente sobre a frequência de mudanças, que geralmente é subestimada. Se uma escolha de desenvolvimento é feita sem o conhecimento de novas tendências, isto pode levar a uma experiência rapidamente obsoleta para os usuários. Para neutralizar este mal, você deve apresentar aos stakeholders, principalmente aqueles com pouca experiência em web, as tecnologias emergentes e as oportunidades que elas criam. Alguns itens a serem vistos atualmente são:

• Web 2.0 e as experiências enriquecidas que ela está criando.
• A habilidade de usar a internet usando dispositivos móveis.
• O potencial multimídia da banda larga.

Cultura e sociedade online

Mesmo que os efeitos da “revolução da internet” sejam muito exaltados de vez em quando, não há dúvidas de que a sociedade se adaptou bem aos seus benefícios. Isto se reflete nos diferentes públicos que continuam a aparecer na rede. Você deve perder um tempo para explicar essas mudanças aos tomadores de decisão, para que eles possam entender o contexto em que seu próprio site funciona. Por exemplo:

• Quantas pessoas possuem acesso à internet no seu país, região ou mercado?
• Que tipos (e populações) de grupos de interesse especial devem ser considerados, por exemplo, idosos, portadores de deficiência, estrangeiros, etc?
• Como a web é usada para algumas tarefas ou hobbies, como ir ao banco, fazer amigos, compartilhar fotos, fazer telefonemas, etc?
• Existe apoio do governo para projetos que estimulam a “inclusão digital” – ou seja, projetos que facilitam a entrada de pessoas em comunidades desfavorecidas ao mundo digital?

Melhores práticas

Melhores práticas são o conjunto de convenções de desenvolvimento usadas por profissionais que criam conteúdo e serviços para a web. Apesar de não existir nenhum “pacto” sobre estas práticas (mesmo com o esforço do W3C), os leitores do ALA devem estar familiarizados com algumas:

• Preferência para o XHTML como a linguagem de marcação da web.
• CSS para apresentação do conteúdo web.
• ECMAScript para interatividade no cliente.
• As Regras de Acessibilidade no Conteúdo Web (WCAG) do WAI.

Você deve descrever os benefícios destes padrões para os stakeholders: como eles suportam acessibilidade, tornam a manutenção dos sites mais fácil, e habilitam a portabilidade de dispositivos. Com um pouco de sorte, isto deve ser o bastante para convencê-los de que um alto nível de comprometimento com os padrões é de seu interesse, mesmo que isto precise de uma verba extra para treinamento da equipe.

Tendências de indústria e mercado

Esta categoria trata do uso da internet dentro de uma indústria ou mercado específico. Dentre os elementos que você deve revisar com seus stakeholders estão as tendências emergentes, bem como um comparativo dos pontos fortes e fracos da concorrência. Por exemplo:

• Quantos concorrentes estão online?
• Que modelos de negócio eles usam – ou seja, como eles fazem dinheiro?
• Eles estão crescendo? Podem ser usados como referência?
• Há alguma literatura que recomende melhores práticas de web para esta indústria?

Fatores gerenciais e de negócio

Fatores gerenciais e de negócio representam os limites dos quais uma empresa tem o poder de mudar por si só. Na verdade, a influência desses limites nas tomadas de decisões costumam ser mais profundos que os itens já vistos acima. Isto porque agora você tem a chance de ajudar seus stakeholders a ajustar o ambiente para tornar o desenvolvimento mais fácil.

Os três fatores mais importantes a serem explorados são:

• Pesquisa do website
• Práticas e políticas da empresa
• Gerenciamento do website

Pesquisa do website

Como muitos de nós sabemos, a principal razão do fracasso de muitos sites é que verbas inadequadas são alocadas para o desenvolvimento e manutenção. Para evitar isso, você deve dar aos stakeholders uma idéia clara dos compromissos financeiros necessários para garantir um nível mínimo de sucesso.
Uma maneira de explicar os custos de manutenção é relacioná-los a diferentes tipos de website. Isto pode ser feito usando o conceito de “escala do website”. A Escala do Website tem o objetivo de classificar os sites em termos de três parâmetros:

• Tamanho: o esforço necessário para produzir e manter o conteúdo.
• Complexidade: o tipo de tecnologia usada para hospedagem e gerenciamento de conteúdo.
• Atividade: os níveis de tráfego do site.

Os três níveis da escala do site
	Website grande	Website médio	Website pequeno
Tamanho	Muito grande	Médio	Pequeno
Complexidade	Transacional	Dinâmico	Básico
Atividade	Muito tráfego	De médio a grande	Baixo
Exemplo	www.amazon.com	www.alistapart.com	www.diffily.com

Desta maneira, você consegue mostrar que os custos para gerenciar um site de grande-escala são muito maiores que de um site pequeno. Consequentemente, os stakeholders podem estimar o retorno que eles terão para os diferentes níveis de investimento – e evitar pedirem o impossível.

Práticas e políticas da empresa

Políticas são o código legal de uma empresa. Elas são as regras pelas quais a empresa limita o comportamento de seu negócio e de seus funcionários. Você deve pedir que seus tomadores de decisão estudem estes princípios para que eles entendam os limites que eles impõem à operação. Se eles aparentemente causarão problemas durante o desenvolvimento, eles podem ser mudados? Se existirem falhas, uma nova política pode ser criada? Algumas das políticas mais populares a serem consideradas incluem:

• Política de privacidade: as regras pelas quais as informações de consumidores são conseguidas e utilizadas.
• Política de segurança: os mecanismos de criptografia e armazenamento utilizados para os dados.
• Política de marca: os tipos de imagens, cores e outras características que podem ser utilizadas no design.

Gerenciamento do website

Websites fracassados geralmente sofrem de uma falta de clareza sobre como as decisões são feitas. Isto fica mais evidente em grandes empresas onde os julgamentos podem ter uma motivação política, ao invés de serem dirigidas pelos objetivos do site. Como resultado, você precisa rever uma série de sistemas de controle com um stakeholder superior para conseguir chegar a um acordo apropriado. Isto inclui:

• Estruturas e procedimentos de manutenção: a organização e regras pelas quais as operações funcionam, por exemplo, trabalho em equipe, padrões, etc.
• Papéis e responsabilidades: os perfis necessários numa equipe web e suas responsabilidades, por exemplo, editor, designers, programadores, suporte técnico, etc.

Hora da decisão

Agora deve estar claro que uma gama de fatores pode influenciar a tomada de decisões de um website. Mesmo assim, uma simples reunião de cerca de uma hora pode ser o bastante para explicar estes itens em detalhes suficientes para que os stakeholders entendam; a idéia não é transformar seus gerentes e clientes em experts – é simplesmente alertá-los sobre a influência que eles têm no desenvolvimento e os fatores que todos vocês vão ter que considerar.

O ideal seria se organizar par que este treinamento ocorra logo no início de um projeto, antes que planos reais sejam feitos. Fazendo isso, você garante que discussões posteriores se mantenham informadas, focadas, e – mais importante – realísticas.

-----

Este artigo foi publicado originalmente na edição 237 da A List Apart e pode ser acessado aqui.

Traduzido por Luciano Rodrigues.

Protótipos rápidos em CSS com Photoshop

por Casper Voogt

Você precisa fazer alguns protótipos de site para seu cliente. Você gostaria de encontrar um jeito fácil de mostrar estes protótipos em código XHTML e CSS limpos, porque JPGs chapados não contemplam o senso de design, e tabelas recortadas são más. Na verdade, vamos esquecer que as tabelas recortadas já existiram.

Aviso : este artigo é para as pessoas que precisam produzir protótipos válidos e de acordo com os padrões rapidamente, com as ferramentas gráficas que elas já usam. Esta não é uma técnica de produção para quem quer ter o melhor benefício do XHTML criando código estruturado e semântico. Criar código estruturado e semântico, como a A List Apart e a maioria dos adeptos recomenda, ainda leva tempo, esforço e programação na unha.

Editores gráficos WYSIWYG como o Fireworks, GoLive e ImageReady te permitem gerar código HTML, mas o código exportado tende a ser em tabelas ou com posicionamento absoluto. Isso é muito 1999. Tá, então o que estes programas conseguem fazer em termos de produzir um código válido e aproveitável? Mais do que você imagina. Eu vou lhes mostrar um jeito fácil de criar protótipos com o Photoshop, prepará-los para a web com o ImageReady, e depois limpar o código.

Plano de Fundo

Eu tenho que admitir, o Fireworks era uma peça importante no meu arsenal de design até eu começar a levar acessibilidade e os padrões a sério, e acho que não estou sozinho nessa. O problema que eu tive foi que eu só conseguia exportar código HTML usando tabelas, quando o que eu queria na verdade eram divs posicionadas relativamente. Só com rídiculas horas de codificação e doses absurdas de cafeína você conseguia converter aquela tabela em divs relativas, e isso só te rouba tempo em que você deveria estar desenhando outros protótipos ou dormindo. Então por quê começar com uma tabela recortada? O que eu precisava era um jeito de gerar divs posicionadas relativamente – ou, ao menos, um código que fosse próximo o bastante para que não precisasse de séculos até se dar bem com os padrões do W3C. Hoje em dia, isso é surpreendentemente fácil com o ImagReady.

Deixe o ImageReady pronto para o CSS

O Adobe Photoshop CS vem com um ajudante focado em web: o ImageReady CS. O Fireworks é legal para aplicações em vetor, mas nem tanto para trabalhos em bitmap. Ao contrário, o ImageReady foi criado para trabalhar com bitmap, e menos com vetores (apesar disto estar mudando). Usando o ImageReady, você pode exportar os recortes como divs posicionadas absolutamente, que podem ser facilmente transformadas em divs de posicionamento relativo.

Isto siginifica que você pode começar no Photoshop para fazer todas as máscaras mais complexas, efeitos, vetores do Illustrator, filtros, etc., e depois passar para o ImageReady para recortar seu layout. Você deve ter certeza de que seu layout está alinhado pelo canto superior esquerdo; não tente centralizá-lo ainda – isso é um trabalho para o CSS mais tarde. Usando o ImageReady, você pode estilizar seu menu de navegação (a não ser que o esteja fazendo só com texto e CSS) e definir os rollovers. (Para um layout profissional, você deveria se envergonhar de usar os rollovers e ações da Adobe e usar seu próprio Javascript e CSS, mas para um protótipo, está de bom tamanho.)

Corte e Recorte

Use a ferramenta de Slice para criar seus recortes. Assim que terminar, use a ferramenta Slice Select para selecionar e renomear cada seção. Por exemplo, você pode ter um cabeçalho que se tornará uma div posteriormente. O ImageReady o chamaria de “SeuArquivo_1_01”, mas você vai poupar um pouco do seu tempo e dar um nome lógico desde o começo, como “cabecalho”. Você vai usar isso mais tarde quando for editar o CSS. O mesmo vale para a área de conteúdo, eventuais colunas laterais, rodapé, e outras áreas que queira definir.

Intercale entre o Photoshop e o ImageReady até que esteja pronto para testar seu layout num navegador. Então, no ImageReady, vá em File > Preview In > (coloque seu navegador preferido aqui). Veja se seus recortes estão e se comportam como deveriam, e modifique suas configurações de otimização apropriadamente. Os recortes exportados resultarão em JPGs ou GIFs inseridos em divs com a tag img; depois, você pode querer definir algumas imagens como fundo das divs.

Exportando HTML e CSS

Defina suas configurações de saída: vá em File > Output Setting > HTML e deixe as configurações como preferir. Perceba que você pode optar por gerar código XHTML. Clique em Next e confira as configurações em Saving HTML Files.

Clique em Next novamente; você vai cair em Slices. Aqui você pode escolher “Generate CSS”. Perto de Referenced, você verá um menu dropdown que te deixa escolher By ID, Inline ou By Class. Escolha By ID. Você também pode detalhar as convenções de nomenclatura de recortes se preferir.

Exporte seu layout para XHTML / CSS indo em File > Save Optimized As, e escolha um local que faça sentido para você. Perceba que o ImageReady irá criar uma pasta /images no mesmo local em que você salvou o arquivo HTML.

Exemplo do CSS produzido pelo ImageReady

#header {
  position:absolute;
  left:0px;
  top:0px;
  width:800px;
  height:150px;
}

Exemplo do HTML produzido pelo ImageReady
(Quebras de linhas marcadas com »)

<div id="Table_01">
  <div id="header">
    <img id="header" src="images/header.jpg" width="800" »
 height="150" alt="" />
  </div>
  <div id="navigation">
    <img id="navigation" src="images/navigation.jpg" width="200" »
 height="450" alt="" />
  </div>
  <div id="content">
    <img id="content" src="images/content.jpg" width="600" »
 height="450" alt="" />
  </div>
  </div>

Torrada, alguém quer?

Agora nós temos recortes formados por divs de posicionamento absoluto, com o CSS dentro do próprio arquivo HTML. Talvez divs de posicionamento absoluto sejam o que você precisa – se forem, pegue uma xícara de café e relaxe. Se não, vamos dar mais um passo e converter estas divs para posicionamento relativo.

Primeiro, faça uma cópia do HTML gerado pelo ImagReady e abra-o no seu editor preferido (Dreamweaver, BBEdit, ou qualquer outro). Você provavelmente vai querer jogar suas divs para dentro e para fora de uma div externa para controlar melhor seu protótipo. O ImageReady exporta os recortes de CSS como divs e as coloca numa div externa chamada “Table_01”. Renomeie esta div (para “container”, por exemplo) e coloque um estilo CSS que achar adequado. Se você não precisa de uma div externa, só delete a div “Table_01” e seu código de CSS.

Depois, mude todas sus outras divs para posicionamento relativo tirando as declarações de posicionamento absoluto e deixando-as herdar o primeiro. Preste bastante atenção nos seus floats e clears. Você poderia tentar mudar todas as divs de uma vez, mas uma maneira mais precisa de fazer isto é mudar uma de cada vez e checar o comportamento de cada uma.

Para divs que contenham imagens, decida quais devem ser imagens de fundo em CSS e quais realmente merecem uma tag img. Alguns recortes (uma área de conteúdo, por exemplo) podem ter uma única cor e talvez devam ser configurados com um estilo CSS sem nenhuma imagem. Configure a cor de fundo geral da página usando sua folha de estilos. Se este fosse um layout para produção, você provavelmente moveria seu CSS para uma folha de estilo externa, mas isto pode ser loucura para protótipos de uma única página. Valide seu código e você está pronto para continuar.

Exemplo de CSS convertido e limpo

#header {
  float: left;
  clear: right;
}

Você vai precisar adicionar declarações apropriadas de largura e altura se a imagem deste elemento se tornar uma imagem de fundo numa futura revisão.

Exemplo de HTML convertido e limpo
(Quebras de linhas marcadas com »)

<div id="header">
  <img src="images/header.jpg" alt="" name="headerimg" width="800" »
 height="150" id="headerimg" />
</div> 

Fluxo de Trabalho

Quando você precisar revisar o protótipo, você pode simplesmente fazer suas alterações gráficas no Photoshop e no ImageReady e re-exportar o arquivo HTML, sobrepondo o original e suas imagens na subpasta /images. Mas antes disso, tenha certeza que salvou seu HTML convertido e limpo com um nome diferente para que ele e sua folha de estilo apontem para as novas imagens sem correr o risco de ser sobreposto pelo novo arquivo exportado.

-----

Este artigo foi publicado originalmente na edição 231 da A List Apart e pode ser acessado aqui.

Traduzido por Luciano Rodrigues.

12 Lições para Aqueles com Medo do CSS e dos Padrões

por Ben Henick

Quando eu conheci as Cascading Style Sheets no outono de 1998, eu estava tentando fazer coisas legais – fazer este negocinho mexer, fazer aquele outro mudar de cor – e foram mais 6 meses para que eu começasse a usar o CSS para controlar a apresentação ao invés do comportamento.

Eu levei dois anos para quebrar a confortável prisão dos layouts com tabelas, e mais dois para poder produzir layouts em CSS que foram originalmente pensados em tabelas.

Apesar de ser forçado neste período a trabalhar com obras de arte tão obsoletas como o Netscape 4.0 e IE 5.0 para Windows, a moral da história é bem clara: eu levei muito tempo para atingir proficiência genuína em CSS.

Existem muitos livros e artigos excelentes por aí, incluindo muitos escritos pelos colaboradores desta publicação. Enquanto a maioria destes trabalhos guia o desenvolvedor inexperiente por layouts desafiadores e ensinam com exemplos reais, poucos deles percebem que usar CSS para criar sites de acordo com os padrões requerem um pensamento que é desconhecido para muitos desenvolvedores experientes. Este requisito enfraquece muita gente talentosa, e por dois anos eu estive procurando pelas palavras que vão curar a dor delas.

As frustrações que eu ouço de outros desenvolvedores sobre o CSS são somente um eco daquelas que eu tive por anos. Como conseqüência eu gosto de pensar que consigo me relacionar, e estou escrevendo para transmitir as lições mais importantes que aprendi até agora.

Lição No. 1: Tudo que você sabe está errado… um pouco

Como estamos no mesmo barco, quero frisar que se você está começando a trabalhar com CSS, tudo que você aprendeu até agora provavelmente parece inútil, ou pior que isso. Este é um problema que deve ser jogado pela janela e atirado com a maior velocidade possível.

O que não será afetada é a sabedoria que você já adquiriu em assuntos como design, otimização, experiência do usuário, programação e gerenciamento de projeto. No entanto, os conceitos em que você está acostumado a utilizar este conhecimento mudam – às vezes drasticamente – quando você muda para as técnicas de produção de acordo com os padrões.

Como resultado, o melhor a fazer é limpar sua ficha. Jogue fora suas crenças e expectativas. Aproveitando, jogue fora as crenças e expectativas de todo mundo. Arregace as mangas e aprenda algo novo. Quando se trata de layout e produção, tente remover as palavras "mas" e "deveria" do seu vocabulário profissional por um tempo. Substitua-as por "como" e "por que" – e se comprometa a atingir os objetivos do seu projeto.

No nível de implementação, esta lição é sobre as diferenças entre o código com tabelas e o código semântico:

Tabelas x Semântica
Tabelas	Semântica	Implicações
Linear	Hierárquico	Desenhe para a informação, não apesar dela.
Processual	Funcional	Coloque as coisas onde elas pertencem.
Baseada no local	Baseada no Contexto	Deixe o código descrever o que é alguma coisa, antes que ele diga onde ela está.
Define restrições	Define domínios	Você não precisa empurrar os limites, porque eles se adaptarão às suas necessidades.

Finalmente, não se esqueça que existem coisas que as tabelas conseguem fazer, e existem coisas que o CSS consegue fazer. Algumas dessas capacidades são mutuamente exclusivas, e isto não diminui o poder do CSS.

Lição No. 2: Não vai ficar exatamente igual em todo lugar a menos que você queira um pouco de stress... e talvez nem assim

Existe um número absurdo de diferenças entre os engines de renderização, e as especificações do W3C sancionam estas diferenças. Você pode ajustar, refinar, hackear, e desistir, mas se você quer preservar sua vida social, você vai aprender a relevar as pequenas diferenças – e convencer os participantes do seu projeto a fazerem o mesmo.

Lição No. 3: Você será forçado a escolher entre o ideal e o praticável

A vida e o trabalho normalmente se tornam uma série de compromissos, especialmente quando as coisas estão em transição. O melhor que você pode fazer para usar os compromissos a seu favor é planejar efetivamente.

De tempos em tempos, no entanto, você deve esperar por situações em que será forçado a escolher o menor dos males , ou talvez até situações em que não tenha escolha. Sites que são incapazes de passar em testes de validação e acessibilidade vão acontecer, e você será forçado a aceitar estes contratempos mesmo quando suas convicções contrárias estiverem absolutamente corretas.

Aprecie os objetivos do seu site. Conheça as políticas do local de trabalho. Decida o que é mais importante para você como profissional. Aceite que as decisões de outros feitas sobre suas objeções, muito menos que aquelas feitas sem sua interferência, não refletem em nada no seu conhecimento ou integridade (apesar de refletirem na sabedoria com que você escolhe seus clientes). Escolha seu terreno, faça suas batalhas... e lute com aqueles que você pode realmente vencer.

Lição No. 4 (agradecimento a Antoine de Saint-Exupéry): Perfeição não é quando não há nada a acrescentar, mas quando não há nada a retirar

Quando se produz código para um site de acordo com os padrões, é muito fácil se prender ao jeito de fazer as coisas com tabelas e criar uma abundância de elementos dentro de outros. Mesmo que à primeira vista pareça senso comum adaptar o código ao design, isso te faz perder o foco da produção de acordo com os padrões.

Não force nada, e não acrescente código a não ser que o contexto peça isso. Foque na informação antes. Se você tem diversas instâncias de conteúdo que compartilham o mesmo propósito ou classificação, não hesite em colocá-los em divs ou spans que tenham uma classe nomeada de um jeito que descreva aquele propósito ou classificação. Se você quer colocar conteúdo num elemento que é comum a todas as suas páginas, a maioria das pessoas não te culpará.

Pelo contrário, se você está ficando louco com as divs porque você precisa de uns truques para preencher algumas coordenadas do layout (ou tem algum outro tipo de requisito de apresentação), é possível que você não esteja pensando em seu design como um todo. Como conseqüência, seu código ficará ainda mais difícil de atualizar do que aquele com tabelas que você está tentando substituir.

Remova tags sempre que possível... enquanto mantém a próxima lição em mente.

Lição No. 5: Alguns sites são o cúmulo dos extremos

Em muitos casos, a pessoa responsável pelo design de um site não tem responsabilidade por mais nenhum aspecto de sua implementação. Quando combinada com a falha em criar ambientes adequados para o site e suas seções, esta falta de contabilidade resulta num compendium de muitas páginas, e conseqüentemente, muito mais trabalho para os produtores.

É por experiência própria deste escritor que este problema é muito mais comum em projetos pequenos do que em grandes, o que leva estes projetos pequenos a explodirem o orçamento. Eu convido o leitor a considerar as implicações do fato.

Sempre que possível, encoraje os designers com quem trabalha para respeitarem a imperativa da consistência. Se seu encorajamento não tem efeito, certifique-se de colocar um id único no body de cada página do site, e curta o lado bom: não há dúvida que você tem sua vida.

Lição No. 6: Maiores tempos de produção são inevitáveis

Os fabricantes de navegadores tiveram cinco frenéticos anos para trabalharem num entendimento uniforme e razoável de renderização de tabelas, e esta tarefa foi facilitada pelo fato de que antes do Gecko e do KHTML serem lançados, a maioria das engines de renderização tinha muito em comum – o Mosaic gerou o Netscape mas também foi licenciado para a Microsoft .

O estado da tecnologia de renderização de CSS é comparável à de tabelas em 1998... então dê um tempo, e teste muito bem seus layouts enquanto isso.

A boa notícia é que o tempo necessário para testar e depurar seus layouts são pagos depois do lançamento com a redução do tempo de manutenção, extensões e revisões.

Lição No. 7: A ordem coerente e sensível do código é o melhor de tudo

Se você entrega um trabalho que pode ser lido corretamente quando os estilos são removidos, sua coerência vai te retribuir muitas vezes mais. Esta prática traz muitos benefícios, como:

• Um estilo único para impressão substitui páginas de "versão para impressão".
• Folhas de estilo são mais fáceis de documentar, normalizar e gerenciar.
• A interferência de códigos e scripts em templates diminui.
• A navegação pelo site com o teclado fica muito menos dolorosa.
• Quando o site é remodelado, não há necessidade de reordenar todo o conteúdo de novo.

Lição No. 8: Seletores com descendência são o início e o fim de regras de CSS genuinamente poderosas

Quando você começa a transição do layout baseado em tabelas para uma produção de acordo com os padrões, é comum não só enlouquecer com elementos contentores (nota: não consegui achar uma palavra melhor para "container"... se alguém souber, me ajude, rs) , mas também sair colocando classes e ids para todo lugar.

É claro, você geralmente não precisa. Por exemplo, imagine um elemento criado para conter os links de navegação. Um erro comum de iniciantes é construir tudo com divs, o que ofende os puristas porque fazer isso dificulta as coisas para usuários de leitores de tela.

Já que as divs não são a solução ideal, podemos usar listas não-ordenadas. Leitores de tela aceitam comandos para evitá-los. Portanto, um "bom" elemento de navegação é uma lista não-ordenada de links. Um desenvolvedor consciente pode colocar um id na lista para efeitos de posicionamento, e classes nos links, para que eles possam ser distinguidos de todos os outros links do documento.

No entanto, neste cenário, somente o id é necessário. O corte em questão pode ser feito com o uso de um seletor descendente:

#nav a {
color: red;
}

Em português, este seletor diz: "todos os links dentro de #nav devem ser vermelhos."

Aí vai um exemplo mais complicado:

#bodycopy blockquote.critical {
float: right;
width: 30%;
padding: .5em;
margin: .5em;
}

Os atributos nesta regra devem ser aplicados a blockquotes com a classe critical, mas que também estejam dentro de #bodycopy. Isto permite tanto que blockquotes limpos dentro de #bodycopy e blockquotes parecidos no #sidebar sejam estilizados diferentemente, e ainda minimizando o número de classes e ids a serem usados.

Assim sendo, seletores descendentes permitem que você reduza o número de classes e ids no código e possa prestar mais atenção no contexto do que seria possível sem estes seletores.

Quando usados em conjunto com imagens de fundo e propriedades de layout, os seletores descendentes tornam possíveis efeitos que as tabelas nem sonham em fazer.

Lição No. 9: No mundo real, os hacks de CSS levarão seu projeto para a linha de chegada

Sim, hacks de CSS são um pouco desrespeitosos quanto às intenções por trás da tecnologia. Sim, hacks introduzem a possibilidade de pesadelos quando surge uma mudança maior... como a que acontecerá quando o IE 7 for lançado. Sim, o assunto é uma expectativa esperando para acontecer.

Este escritor tem uma atitude clara sobre o assunto. Tendo a chance de escolher entre inventar desculpas para seu cliente do por quê alguma coisa parece estranha no seu navegador ou simplesmente corrigi-la, a segunda escolha atinge o objetivo com muito menos dor e tempo. Quando usados de maneira inteligente e com as devidas precauções, os hacks de CSS tornam a vida muito mais fácil!

Lição No. 10: Dar um jeito nos bugs de renderização é como jogar Whack-a-Mole

Com isso, quero dizer que quando um bug de um navegador é corrigido, ele geralmente resulta na exposição de outro bug em outro navegador (ou numa versão diferente do mesmo navegador). Quando isto acontece, prepare-se para voltar atrás e examinar toda sua regra... se não todo seu projeto.

A boa notícia é que geralmente há uma saída para esta situação aparentemente sem chances, sendo que a maioria pode ser encontrada com uma boa busca na web. Positioniseverything.net é uma referência valiosa nestes casos.

Lição No. 11: Quando você está mergulhado em problemas de layout com CSS, certifique-se da largura (width) e da altura (height) da água, flutue (float) sem se debater, e fique livre (clear) dos problemas

Quando você está trabalhando com layouts com colunas, surpresas inconvenientes são comuns. O melhor jeito de conseguir um layout com colunas esteticamente plausível e com uma ordem do código sensível é usar o atributo float. No entanto, para que isto funcione bem, todas as suas colunas devem ter larguras (width) definidas e, em alguns casos, alturas (height) definidas também. Sem esta largura e altura, o layout é renderizado de qualquer jeito.

Além disso, você pode estar ignorando a Lição 4 para criar o layout com sucesso. Porém, este é um dos compromissos que eu mencionei – um compromisso que deve ser feito somente depois que você tentou tudo que pôde para fazer de outro jeito.

Lição No. 12: Imagens de fundo fazem a diferença entre a decoração simples e a chamativa

Graças aos imprevistos do modelo de caixas (box model) do CSS, misturar dimensões fixas e proporcionais num layout – em outras palavras, tentar um layout líquido com muitas bordas – é certamente o caminho para o desastre (ou pelo menos, um considerável infortúnio). No entanto, você pode criar a ilusão desta mistura criando imagens de fundo bem compostas e referenciando-as corretamente na sua folha de estilos. Auto experimentação é recomendada, principalmente com relação ao comportamento das bordas.

Outra tarefa comum para a qual eu acredito que as imagens de fundo são apropriadas é a substituição de títulos com textos em forma de imagem. Apesar de controversa, a prática de combinar o background-position e o text-indent torna possível dar aos mecanismos de busca e aos leitores de tela o que eles precisam, e ainda manter a experiência visual de alta qualidade que a maioria dos designers tanto almeja.

Só para constar, os céticos devem saber que ainda estou par encontrar algum usuário de computador que navega pela web com o CSS habilitado e as imagens desabilitadas. Ainda que este cenário leve a um intrigante exercício intelectual, estou bem confiante de que isto tem pouca relação com a maneira com que as pessoas geralmente navegam pela web no mundo real.

Para Concluir

O barulho em torno da Web 2.0, CSS, e milhares de outros assuntos de tecnologia de ponta podem se tornar um chato zunido para aqueles menos preparados para as mudanças na indústria por causa de hábitos de trabalho adotados com boa fé anos antes. Eu espero que a experiência que estou compartilhando possa ajudar alguns de vocês a encontrar o caminho de volta para o topo da pirâmide – que é onde a web precisa de você.

-----

Este artigo foi publicado originalmente na edição 224 da A List Apart e pode ser acessado aqui.

Traduzido por Luciano Rodrigues.

O Alfabeto de um Standardista

por Jack Pickard

É importante notar que existem dois tipos principais de standardistas, o Pequeno Standardista (Standistus minori followum), que segue os padrões perfeitamente e sempre se reporta à autoridade dos grandes nomes no mundo dos padrões, e o Grande Standardista (Standistus argumentatavum maximus) que já é um dos grandes nomes do mundo dos padrões, ou pelo menos acredita ser. Este grupo está sempre preparado para defender sua posição, mesmo que do outro lado não tenha ninguém com uma posição contrária.

A de Accessibilidade

Isto significa o quão facilmente alguém com deficiências pode acessar seu site (apesar de algumas definições também incluirem universalidade). Os dois padrões de acessibilidade mais usados são o WCAG 1.0 e a Seção 508. O Pequeno Standardista coloca selos em seu site para indicar qual nível de testes automáticos ele passou, enquanto o Grande Standardista não gosta do uso de selos, e insiste em conferir cada ponto manualmente.

B de Berners-Lee

Nenhum alfabeto de qualquer coisa relacionada à web está completo sem mencionar Tim Berners-Lee, o homem que criou a World Wide Web. Assim que os standardistas terminam de reverenciar o poderoso TBL, eles geralmente passam um tempo te presenteando com suas frases favoritas. Muitos standardistas acreditam que qualquer coisa dita por Tim Berners-Lee é mais importante e mais correta que qualquer coisa que possa ser dita por qualquer outra pessoa. Podem existir importantes e significativos trechos de informação como “O poder da Web está em sua universalidade. Acesso a todos independente de deficiências é um aspecto essencial.” Mas é importante lembrar que Tim não é um ser supremo, apesar da referência que frequentemente lhe é atribuída.

C de CSS

A única maneira de apresentar seu site, se você quer ser capaz de andar de cabeça erguida sem que as pessoas zombem da sua cara. Para compreender o que você pode fazer só com formatação em CSS, visite o CSS Zen Garden.

D de DOCTYPE

Suas páginas precisam de um DOCTYPE para garantir que os navegadores vão saber manipular o código que elas contém. Existem formulações diferentes de HTML, e seu DOCTYPE vai dizer para o navegador de seus usuários qual delas você está usando para que suas páginas possam ser exibidas corretamente. Ou pelo menos, o mais correto que o navegador permitir. Se você não usar o DOCTYPE corretamente, você estará ativando o Modo Desastrado (Quirks Mode), e se verá sendo expulso da Guilda dos Padrões. A não ser que esteja fazendo isso por brincadeira.

E de Encoding (Codificação)

Um documento HTML deve especificar o tipo de codificação de caracteres que está sendo usado, o que dirá ao navegador como exibir aquele documento (isto também é necessário para validar o documento). As codificaçções de caracteres mais comuns para o Inglês e outras línguas da Europa Ocidental (incluindo o Português) são a UTF-8 e a iso-8859-1, que podem ser especificadas pelo seu servidor ou no cabeçalho do documento usando <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />. Mas você já sabia disso, não é?

F de Firefox

O Firefox é um navegador de código livre disponibilizado pela Mozilla. Ele provavelmente é o navegador mais usado depois do Internet Explorer. Este é o navegador escolhido por muitos standardistas, mas o fato de que muitas pessoas ouviram falar dele e estão o usando obviamente afasta alguns standardistas, que acabam usando o Opera ou o Safari.

G de Grayscale (Tons de Cinza)

Um standardista procura diferentes métodos para garantir que seu site é acessível para todos. Um método bem visual para testar se o contraste de suas cores é o suficiente para que usuários daltônicos as distinguam é converter tudo para uma versão em tons de cinza. Uma ferramenta que tem esta funcção é o GrayBit, chamado assim porque ele torna um pouco cinza os sites que você vê.

H de Handcoding (Programar na mão)

Acredita-se que todos os standardistas olham com desprezo as pessoas que usam editores HTML para produzirem suas páginas, ridicularizando-as e insistindo que tudo deveria ser programado na mão. Sem sentido. Um standardista somente se sentiria superior a você, e não iria te banalizar ou te bater a não ser que seu editor WYSIWYG não produza código de acordo com os padrões.

I de Internet Explorer

O Internet Explorer é o navegador mais usado pela vasta maioria dos usuários de internet. Ele não suporta os padrões tão bem quanto as últimas versões do Mozilla Firefox e do Opera, e tem uma porção de hacks de CSS escritos para tentar fazer com que a coisa funcione como você deseja. Lógico, o Grande Standardista iria se rejeitar a usar algo tão inelegante como um hack, então simplesmente considera que se o Internet Explorer não renderiza conforme a especificação, isso é problema deles. A última versão, IE7, promete trazer uma melhora significativa.

J de Joe Clark

Joe Clark é um jornalista e consultor de acessibilidade que mora no Canadá. Ele é sempre passional, frequentemente tem opinião formada, frequentemente argumenta, raramente diplomático e raramente errado. O Pequeno Standardista regularmente lê Joe Clark para entender no que ele deve acreditar; o Grande Standardista tenta se atualizar com a opinião de Joe, para que possa ser visto como alguém que concorda com ele em muitas questões, porém mantendo alguns desacordos para mostrar que tem sua própria opinião. Seus leitores também acompanham seu blog para verem exemplos intrigantes de tipografia e palavras interessantes como skiamorph.

K de Konqueror

Konqueror é parte do KDE e aclamado por ter sido o primeiro navegador a passar no Acid2test para suporte a CSS (apesar de ser aclamado também por ter falhado ao aplicar uma regra corretamente). No entanto, não-standardistas podem não ter ouvido falar dele por não ser um dos navegadores mais populares. O Konqueror foi criado para ser usado, e está incluso na maioria dos sistemas Linux, o que significa que muitos profissionais de TI nunca nem ouviram falar dele. Muitos standardistas ouviram falar, e uma pequena porcentagem já realmente o usou. Cuidado com estas pessoas.

L de Leis

Adotar os padrões web, principalmente aqueles relacionados à acessibilidade, é geralmente uma boa idéia para reduzir o risco de ser processado por uma pessoa irritada e com deficiência. Em muitos países, existem leis específicas que tratam disso – nos EUA existem a ADA e a Seção 508, na Inglaterra existe a DDA, e a Austrália possui seu próprio DDA. O primeiro caso legal tratando sobre a acessibilidade na web foi posto por Bruce Lindsay Maguire, que processou o Comitê de Organização dos Jogos Olímpicos de Sydney por não disponibilizar um site acessível.

M de Mac e Microsoft

Muitos standardistas de ambos os tipos vão insistir que você deve usar um Mac, porque eles são mais seguros, são geralmente melhores, e são mais bonitos. Mais, eles não foram criados pela Corporação Hostil que é a Microsoft. No entanto, não é obrigatório que um standardista odeie a Microsoft, e muitos deles a defendem porque muitas vezes ela é perseguida só por serem “o cara”. Muitos standardistas até lhe dizem que você deve usar os produtos da Microsoft porque eles são fáceis de usar, todo mundo usa, e vamos ser francos, você não quer ser o Sr. Nerd sozinho no seu canto, quer? Isto certamente não é justo. O fato de usar um Mac não o torna o Sr. Nerd, este privilégio é reservado aos standardistas que insistem em rodar tudo numa plataforma Linux.

N de Nielsen

Dr. Jakob Nielsen é o pai da usabilidade na web, e o homem por trás da coluna quinzenal alertbox. Ele é bastante controverso, mas é extremamente pesquisado e lido. Na verdade ele é tão lido que o Pequeno Standardista de Usabilidade, com seu desejo de seguir uma grande autoridade, não se faria a pergunta “O que Jesus faria?”, mas sim “O que Nielsen diria?”. Assim como Joe Clark, o Grande Standardista não se permitiria ser visto seguindo cegamente e insistiria em ler as evidências antes de tentar apresentar suas próprias conclusões.

O de Open Source (Código Livre)

Código Livre é um método de desenvolvimento de software onde o código está acessível para ser acessado e, teoricamente, modificado por qualquer pessoa. Na prática, existe uma série de diferentes licenças disponíveis que podem restringir o uso (por ex: você não pode desenvolver a partir de um produto gratuito existente e depois cobrar por seu produto). O Firefox, que é produzido pela Mozilla Corporation, é provavelmente o mais conhecido exemplo de um produto de código livre. Muitos standardistas preferem o conceito do software livre do que o desenvolvimento fechado porque acreditam que todos devem ser livres para contribuir para a web. Por outro lado, alguns standardistas estão felizes em usar tanto código livre como fechado, seja porque não acreditam nesta ideologia, ou porque não têm o tempo, o conhecimento ou a inclinação para desenvolver software e estão perfeitamente satisfeitos em deixar qualquer outra pessoa fazer isto por eles.

P de PDF

Arquivos PDF costumavam ser vistos como a maldição da vida de um standardista, pois eram muito difíceis de se fazerem acessíveis. Tradicionalmente, o documento de texto puro era associado a uma pilha de imagens e cores de fundo e era jogado na web sem nenhum semblante de acessibilidade. Felizmente, as novas versões do PDF incorporam muitas características de acessibilidade, então este não é mais o caso. Hoje, é possível tornar documentos PDF acessíveis, então agora eles são apenas quase jogados na web sem nenhum semblante de acessibilidade.

Q de Q uirks Mode (Modo Desastrado)

Quirks Mode é um dos dois modos que os navegadores (mais recentes) podem usar para renderizar seu CSS, sendo o outro o modo Padrão. Não fornecer um DOCTYPE siginifica que suas páginas são renderizadas no modo desastrado. Fornecer um DOCTYPE de HTML 4.01 ou posterior corretamente (isto é, não só incluir o nome, mas também a URL) normalmente significa que você está no modo Padrão (ou modo Quase Padrão, pelo menos). Porém, vale lembrar que o uso do prólogo XML <xml version="1.0" encoding="UTF-8"> antes da declaração do DOCTYPE dispara o modo desastrado no Opera 7 e no IE6 – apesar de dizerem que este comportamento foi consertado no IE7. Henri Sivonen criou uma referência muito útil que mostra como combinar DOCTYPES com modos disparados.

R de Recomendação

Quando o W3C produz uma especificação, ela passa por vários estágios, do Rascunho até a Recomendação final. Na terminologia do W3C, Recomendação não significa “você provavelmente deveria fazer isso”, mas sim “isto é o que dizemos que você deveria fazer”. Uma Recomendação do W3C é equivalente a um padrão em muitas outras indústrias.

S de Seção 508

A Seção 508 do Ato de Reabilitação (EUA) requer que quando agências Federais desenvolvem, protocolam, mantêm ou usam tecnologia eletrônica e de informação, elas devem cumprir uma série de regras que garantem que esta tecnologia atinge pelo menos um nível mínimo aceitável de Acessibilidade.

T de Testes

O Pequeno Standardista garante que suas páginas validam e que elas podem ser verificadas pelo Cynthia Says ou alguma outra ferramenta de testes para o nível de Acessibilidade que está querendo atingir. O Grande Standardista insiste que para ser realmente acessível, o site deve ser testado manualmente, o CSS também deve ser validado, testes reais com usuários reais devem ser conduzidos, e que o site ainda precisa ser testado além de um Internet Explorer rodando num PC com Windows XP. Isto não significa que o Grande Standardista vai necessariamente conduzir estes testes, ele percebe que neste nível é mais importante ser capaz de ensinar aos outros.

U de Universalidade

Universalidade é o princípio de que seu site deve ser acessível para qualquer dispositivo, independente do tipo de navegador, plataforma operacional, resolução de tela, etc. O Pequeno Standardista às vezes inclui isso como parte de sua imagem mental do que a acessibilidade significa (“acessível a todos”). O Grande Standardista insistiria que este tópico seja separado e arquivado dentro de universalidade, e ficaria de fato um pouco triste se você continuasse confundindo os dois conceitos (Se é o que você quer, sinta-se à vontade – vale a pena também citar a “tag alt”, que sempre os desaponta também).

V de Validação

Validação é um processo geralmente conduzido pelo Serviço de Validação de Código do W3C que garante que seu código confere com o DOCTYPE que você especificou para seu documento. Um documento válido é essencial para passar pelo WCAG para o padrão Duplo-A. O Grande Standardista também vai insistir que seu CSS é validado usando o Serviço de Validação CSS do W3C, e também vai ficar atento com qualquer bug do validador.

W de WCAG

O WCAG é o padrão internacional de acessibilidade na web, e é produzido pela Iniciativa de Acessibilidade para Web do W3C. A versão 1.0 das regras é bem conhecida e utilizada, mas estão precisando de atualizações. A versão 2.0 está em rascunho mas não teve uma boa recepção dos standardistas.

X de XHTML

O Pequeno Standardista vai sempre procurar usar XHTML em seus documentos – provavelmente XHTML 1.0 Transitional – porque eles sabem que o XHTML é mais moderno que o HTML 4.01, então eles querem ser vistos usando a última tecnologia. O Grande Standardista tem uma das duas perspectivas: usar XHTML 1.1 como application/xml+xhtml ou simplesmente usar HTML 4.01 Strict. Só para explicar, o Grande Standardista tem um ponto: HTML 4.01 Strict não permite o uso de atributos de apresentação e elementos em desuso na especificação do HTML 4.01, enquanto as duas formas de DOCTYPE Transitional permitem.

Y de Your Standards Need You (Seus Padrões Precisam de Você)

… para irem além do topo, e virarem máquinas de guerra nas trincheiras. Se você realmente se importa com padrões, então você deve estar preparado para falar deles, seja discutindo sobre eles no seu blog, no site de sua empresa, procurando artigos sobre os padrões em todo lugar, participando de fóruns e tentando ajudar os outros, e ajudando a contribuir quando as pessoas que desenvolvem os padrões pedirem por opiniões. No entanto, saiba que quando você dá sua opinião, por mais inofensivo ou incontroverso que você possa achar que esteja, alguém em algum lugar vai usar esta oportunidade para te lançar uma crítica dura e injusta e te fazer parecer um idiota (e o que é pior, eles podem estar certos em alguns pontos). Você pode baixar sua cabeça e simplesmente seguir outras pessoas, ou criar uma carcaça e continuar a mostrar suas opiniões para todos, independente de quem sejam, ou que estejam ou não interessados nelas. A decisão é sua, e este é provavelmente o principal critério que vai determinar se você é um Pequeno ou um Grande Standardista.

Z de ... hm .. Zebra?

Bom, sejamos sinceros, não há niguém de renome no mundo dos padrões que tenha o nome começando com a letra Z, há? Desculpe, Jeffrey o quê?

-----

Este artigo foi publicado originalmente na edição 223 da A List Apart e pode ser acessado aqui.

Traduzido por Luciano Rodrigues.

PS: Desculpem por ter ficado tanto tempo sem postar... Estava numa correria muito grande. Agora pretendo voltar com mais frequência. Abraços!

Mais Barato sobre o Melhor: Porquê os Clientes Preferem Menos

por Adam Schumacher

Todos já passamos por isso. Um cliente vem até você procurando por um website. Eles sabem o que eles querem e você sabe o que você pode fazer. Você trabalha numa proposta. Você usa algumas madrugadas e muitos potes de café escrevendo e desenhando o que você considera ser um grande website. Você orgulhosamente passa sua proposta por fax (com prints das telas), senta e espera pelo inevitável telefonema.

Mas ele nunca vem.

Muitas semanas se passam até que, por curiosidade, você entra no domínio dele. Para sua terrível surpresa, um site feio e barato vagarosamente se forma em seu monitor. O ícone de alerta aparece no canto inferior esquerdo enquanto erros de Javascript se amontoam. O banner grosseiro e serrilhado dolorosamente se carrega no topo da página enquanto os botões multi-coloridos de navegação aparecem um por um na lateral da página. Rapidamente você rola para o final da página, esperando que este seja o site antigo e eles ainda estejam procurando por um novo design. Seus medos se tornam realidade quando você vê que a última atualização foi na semana passada!

Mas por que? Sua página era linda! Era funcional! Tinha tudo que eles queriam e mais! O que poderia tê-los levado a esta monstruosidade de website? Por que?

Mercado pequeno – problemas grandes

Se você tem sorte, você nunca viu isso. Talvez a empresa tenha contratado alguém melhor. Como designer, eu não ficaria ofendido se eu fosse honestamente superado. Se um dos meus clientes prospectados terminasse com alguém como Kioken, eu sentiria um tremendo orgulho de estar na mesma lista. Infelizmente, o mercado em que trabalho não chega ao domínio de Kioken. Meu mercado é a Dakota do Sul e eu já vi mais sites do que eu já produzi terminarem no FrontPage 97.

Na edição 100, Chris McGregor escreveu sobre alunos de quinta série que fazem sites. Bem, por aí, um aluno de quinta série que sabe HTML é realmente um web designer e, pior, um concorrente. Mas por quê algum negócio deveria se preocupar com isso?

Dinheiro é sempre um ponto

Eu não acho que exista algum designer por aí que não tenha ouvido a palavra verba. Todos têm uma. Nenhuma tão proeminente, no entanto, como as de pequenos negócios querendo colocar a cara na web. O funcionário que eles nomearam como o “cara de tecnologia” passou tempo suficiente na web fazendo anotações do que é “legal” ou “útil”, para que eles saibam o que eles querem – porque eles simplesmente não sabem.

Quando eles chegam a você, eles têm uma lista de coisas e muitos exemplos para te mostrar. No entanto, os sites que eles te mostram como “idéias” são entidades como sony.com ou vw.com. Estas empresas tinham a verba e os recursos para fazerem sites espetaculares. A Lanchonete do Bill não tem.

Ainda assim, você concorda em se delimitar à verba deles. Você faz até um acordo com eles ignorando seu valor por hora. Você sacrifica seu tempo pessoal para criar um layout inspirado. Você faz tudo que pode para ficar dentro da verba e manter todos felizes. Mesmo assim, tudo nunca é o bastante.

Às vezes o cliente vai ficar paralisado, não importa o que você faça. Eles vão receber sua proposta e ir direto para a última linha. Se é mais do que eles esperavam, eles provavelmente nem vão ler o resto da proposta. Aquelas longas horas de trabalho não-pago farão a viagem de três segundos até o rodapé, e isto será o fim. Existe um famoso ditado militar: “Lembre-se, o avião em que você voa foi feito pelo menor preço.” Os militares podem ser capazes de voar com o menor preço que encontrarem, mas os negócios na web não deveriam.

É claro, o dinheiro não é o único problema para clientes menores e menos sofisticados. Sua porposta poderia estar dentro de suas posses, mas ainda assim terminar na mesma pilha de papel usado. Se dinheiro não é o problema, o que é?

Tema o desconhecido

Quando você começa a usar palavras como “ColdFusion”, “Flash”, “acessibilidade”, “interatividade” e “integração com banco de dados”, isto pode amedrontar o cliente. Bill, da Lanchonete do Bill, conhece pouco além de lanches. Ele não faz idéia do que movimenta a web e o que estas tecnologias significam. Ele pode conhecer e-mail e alguns websites que o “cara de tecnologia” mostrou a ele, mas qualquer coisa além disso o intimida, e intimidação geralmente é igual a medo. Se você assustar seu potencial cliente, ele ficará igualmente paralisado (veja acima).

Como evitar assustar o cliente? Bem, às vezes é melhor guardar estas palavras para você. Não tente impressionar ninguém com seu vocabulário. Sinceramente, eles não precisam saber que a animação se dá através de ActionScript, nem a diferença entre páginas HTML e CFM. Você sabe a diferença e isso é o que importa.

Se eles perguntarem, porém, você tem que explicar a eles cuidadosamente para evitar que eles se assustem ou que se sintam estúpidos. É uma linha tênue. Você não quer deixá-los no escuro, mas você também não quer amedrontá-los.

Ok, mas e se sua proposta estava bem abaixo do limite e você não usou nenhuma dessas palavras tecnológicas e eles ainda pegaram a proposta mais baixa? O que aconteceu?

Pontos imbatíveis

Às vezes você não pode ganhar. A Lanchonete do Bill pode cruzar com um amigo de um amigo que diz: “Sim, eu faço seu site se você me der molho de graça!”. O Bill não pode recusar, principalmente depois de ver sua proposta deslizar pelo fax. (Você ficaria surpreso ao saber que isso ocorre tantas vezes.) Ou o filho de dez anos do Bill pode ter a idéia de fazer o site. Quando você trabalha num mercado pequeno com negócios ainda menores, qualquer coisa pode acontecer.

Algumas empresas de web design por aí têm formulas prontas para websites. Uma delas foi a de “4 páginas por $600”. Bom, quando você paga $600 por um site, você recebe um site de $600. Estas chamadas “empresas de design” são aquelas que simplesmesmete perpetuam o espiral negativo do mais barato sobre o melhor. Elas são suas concorrentes e têm uma lista crescente de clientes que infestam a web com sites de design e qualidade ruins.

Existem, no entanto, maneiras de derrubá-las com seu próprio jogo.

O coração da fera

Então, o que você pode fazer para vencer? Bom, existem algumas coisas para manter em mente quando se trabalha num mercado pequeno. Você pode ter que cortar suas horas ou trabalhar com os números para ficar abaixo da verba.

Você pode ter que simplificar o vocabulário da sua proposta para não assustar o cliente.

Você pode até ter que prometer menos e entregar mais (um método que geralmente funciona a seu favor).

O que quer que faça, não comprometa os ideais de seu negócio ou seus escrúpulos pessoais quando se trata de conseguir o cliente. Nunca pegue um trabalho se sabe que perderá dinheiro. Isto é simplesmente mau negócio.

Se você conseguir manter o preço com sua proposta de site bem desenhado, funcional e acessível, você já fez mais do que imagina. Todo negócio que se baseia em sites mau construídos e gerenciados, não está fazendo nada além de levar a web para baixo consigo.

O futuro da web está com os desenvolvedores e designers; mas o que acontece quando o trabalho vai para desenvolvedores e designers que não se importam com o futuro da web? A web continua estagnada, ou pior, vai para trás.

Desenvolvedores e designers que só se preocupam em aumentar sua lista de clientes são tão perigosos quanto os clientes que os contratam. Às vezes você tem que ajudar o time e sacrificar algum tempo, esforço e dinheiro para manter a web na direção certa.

A responsabilidade não está somente com você. Depende que os negócios empurrem a web para frente. Se a Lanchonete do Bill não estivesse preocupada com o mais barato, e aceitasse seu site bem desenhado, super-funcional e facilmente gerenciável, Bill poderia aumentar o nível de desenvolvimento web na área. E então entra a sua responsabilidade de manter o nível alto.

-----

Este artigo foi publicado originalmente na edição 114 da A List Apart e pode ser acessado aqui.

Traduzido por Luciano Rodrigues.

Anonimato e Comunidades Online: A Identidade Conta

por John M. Grohol

Muitos websites populares como a Wikipedia oferecem pouca diferenciação entre a experiência e ferramentas disponíveis para usuários registrados e para os visitantes anônimos. Muitos usuários ativos de tais websites podem, portanto, ser virtualmente desconhecidos para seus servidores. Como a maioria das equipes de infra sabe, geralmente as pessoas que você não conhece e que simplesmente "aparecem" de vez em quando são as que podem criar as maiores dores de cabeça. Como os recentes escândalos da Wikipedia demonstram, esta decisão evidencia muitas dores de cabeça no gerenciamento de sites. Programas de associados bem desenhados podem permitir aos gerentes de comunidades neutralizar os problemas antes que eles atinjam os noticiários nacionais. Este artigo oferece um entendimento do por quê a identidade online é importante e seis passos para ajudá-lo a construir comunidades online mais fortes.

Anonimato pode causar o caos numa comunidade

Anonimato é uma faca de dois gumes quando se fala de comunidades online. Enquanto o anonimato pode permitir que as pessoas se sintam mais livres e desinibidas para discutir tópicos que poderiam ser embaraçosos ou estigmáticos, ele também pode ser o maior inimigo da comunidade. O anonimato permite que as pessoas se escondam atrás de seus computadores para dizerem o que quiserem sem muitos transtornos. Psicólogos sabem que comunidades online são muito mais desinibidas do que uma comunicação cara-a-cara. Combine esta desinibição com o anonimato e você tem uma receita para o desastre.

Alguns websites descobriram maneiras muito inovadoras para permitir o anonimato, mas ainda assim filtrar comportamentos negativos que geralmente o acompanham. O Slashdot, uma antiga comunidade de tecnologia, tem há muito tempo um sistema de moderação que permite a usuários registrados votar na qualidade dos comentários do artigo. Assim, mesmo que um usuário decida postar alguma coisa anonimamente (por qualquer razão), aquele comentário ainda pode ser considerado de qualidade suficiente para ser lido por outros usuários.

"Pseudonimato" - o anonimato que esconde uma pessoa atrás de um personagem online através de um nome de usuário. Muitos usuários de internet possuem um número de diferentes identidades que eles usam na rede, para permitir que eles explorem diferentes aspectos de seu personagem, interesses ou hobbies. Mas o pseudonimato é também a chave para os sistemas de associados, já que ele permite que membros da comunidade aprendam a identificar outros membros que eles gostem ou não baseados em seus comportamentos ou personalidade. Sistemas pseudônimos lançam um equilíbrio entre a necessidade das pessoas de esconderem suas identidades na rede enquanto permitem construir uma reputação sobre estes usuários. Estes sistemas têm se demonstrado muito bons para comunidades online.

As pessoas constroem reputação sobre seus nomes de usuários, então suas reputações se tornam algo que elas valorizam e protegem. Membros que têm um investimento em algo da sua comunidade têm muito menos chances de destruir tal investimento através de um comportamento impróprio ou negativo.

Liberdade para as massas

Vamos usar a Wikipedia como exemplo. Até recentemente, eles eram um sistema quase completamente aberto e sem cadastro. Não há nenhum sistema formal de conferência que garante que a informação é fato, muito menos se é um boato ou uma ficção. Esta é seu ponto mais forte e também um dos mais fracos. Ele se baseia no pequeno número de outros usuários que visitam o site para atuarem como editores. Geralmente se acredita que a Wikipedia oferece um conjunto de informações confiáveis que se compara a outras fontes de informação similares. Mas antes de implementar seus atuais requisitos de cadastro, qualquer um podia – e fazia – adicionar qualquer coisa ao site, de qualquer qualidade, e sem nenhuma consequência ou medo de ser descoberto por comportamento anti-social. Pelo fato de a Wikipedia não se importar com quem eram seus usuários, ela só tinha ferramentas limitadas e ineficazes para corrigir sérios problemas da comunidade (como bloquear completamente um artigo para que ninguém mais pudesse editá-lo.)

Membro versus visitante

Quando você estabelece uma relação com membros, você tem mais chances de conseguir informações valiosas e úteis e um comportamento responsável por parte deles. Eles estão engajados no serviço exatamente porque eles são membros. E ser um membro, como a American Express tem glorificado por décadas, tem seus privilégios. Se há pouca diferença entre o membro de um website e um visitante comum (por exemplo, eles podem fazer praticamente as mesmas coisas), então a maioria dos usuários tem pouco incentivo para se tornar um membro (ou um "usuário cadastrado", na linguagem web).

A recente reação da Wikipedia à revelação de que pessoas do Congresso estavam editando as biografias de seus políticos (e a de seus oponentes) também é muito marcante. Sua única escolha era bloquear o acesso de edição para blocos inteiros de endereços de IP (endereços de IP identificam computadores específicos conectados à internet a qualquer momento). A Wikipedia, sem saber quem realmente são seus usuários colaboradores, tinha muito pouco controle sobre o acesso de seu bem mais precioso – sua informação. Então eles tiveram que bloquear todo mundo deste bloco de IP´s, incluindo usuários inocentes. Os usuários que estavam agindo responsavelmente e dentro das regras da Wikipedia também foram bloqueados se estavam acessando o site de outro escritório daquele mesmo prédio. (Desde então o bloco foi interrompido.)

Associação das antigas

Programas de associados são bem conhecidos no mundo da antiga web. A maioria tem três categorias:

• Visitante
• Usuário registrado (ou "membro")
• Administrador ou moderador ("usuário privilegiado")

Você pode ter diferentes níveis de usuários registrados, membros pagantes, etc., mas estes sistemas de três categorias são os mais comuns. Um usuário registrado é alguém que fez algo a mais que um visitante para confirmar sua humanidade – informou um endereço de e-mail, clicou num link de verificação, algo assim.

Associação é um filtro

Se programas de associados fossem tão difíceis de se completar, ninguém jamais teria adquirido alguma coisa da Amazon ou do eBay ou se tornaria um membro de sua comunidade preferida. As pessoas se encorajam feliz e espontaneamente nesse tipo de cadastro quando elas prontamente entendem o benefício dado a elas por se registrarem – adquirir um produto, poder postar num fórum, etc. Um cadastro não precisa ser difícil, e as pessoas vão rapidamente preenchê-lo se forem devidamente motivadas.

Se o benefício do cadastro não for óbvio, como é o caso da Wikipedia, a maioria não o fará. Sem a súbita barreira psicológica do registro para editar ou incluir artigos, a Wikipedia foi capaz de construir um vasto banco de artigos rapidamente. A desvantagem é óbvia depois que sabemos: grande quantidade, qualidade desconhecida. Mas este modelo não é apropriado e não vai funcionar para qualquer coisa na internet.

É verdade que programas de associados garantem que você não saiba nada da pessoa além do que ela queira – um enderço de e-mail falso, um pseudônimo, etc. Mas não é a qualidade das informações do cadastro que importam, e sim o processo em si. Ao exigir que os usuários tomem uma ação afirmativa (que exigem um esforço mínimo de sua parte), isto elimina o típico causador de problemas de um usuário interessado. O registro também melhora a percepção dos benefícios de se cadastrar em seu site (mesmo que seja tão simples como postar na comunidade ou ler um artigo). O registro não previne problemas na comunidade, mas ele certamente apresenta uma pequena mas importante barreia psicológica que afasta muitos agitadores de plantão.

Seis passos para melhorar comunidades online através da associação

Tendo cuidadosamente observado dúzias de modelos de comunidades online durante a última década, e gerenciando algumas, eu separei uma série de idéias que geralmente resultarão em comunidades mais fortes com o tempo.

1. Conheça seus usuários

Uma comunidade que "conhece" seus membros através de um perfil de cadastro é mais forte. Ela pode facilmente moderar os posts de um membro, ou se comunicar com ele (por outras maneiras além de e-mail) sobre problemas ou coisas de seu interesse. Ao invés de respostas radicais para situações que surjam (como barrar blocos inteiros de IP), comunidades que conhecem seus membros podem oferecer respostas mais específicas para comportamentos problemáticos.

2. Cadastro simples não é um peso a mais

Alguns sites preferem não ter um sistema de cadastro porque eles vêem o cadastro como uma barreira para o usuário obter uma gratificação imediata do site. Enquanto estes sites obtêm o benefício a curto prazo de aumento de atividade, eles sacrificam o conhecimento sobre seus usuários. Muitos usuários web não têm nenhum problema em se registrar num site se os benefícios da associação são claramente informados e o cadastro é simples.

Falta de conhecimento do usuário também pode complicar as decisões da comunidade mais tarde. Por exemplo, a Wikipedia faz uso de algumas ferramentas (como bloqueio de IPs, e a Vendal Fighter) para resolver as guerras de edição que ocorrem entre os membros, às vezes fazendo com que alguns artigos sejam protegidos ou bloqueados. Estas não são soluções elegantes e poderiam ser menos necessárias se um programa de associados fosse adotado desde o início.

3. Segmente seu sistema de cadastro

A maioria dos usuários fará o cadastro num site se eles entenderem os benefícios, mas somente se o sistema de cadastro em si for simples e direto. Pedir que um usuário preencha um formulário de 20 questões ao invés de um de 3 vai reduzir significativamente os cadastros para qualquer site. Peça que o usuário preencha um pequeno formulário básico para criar um registro – nome de usuário, endereço de email, senha (e confirmação da senha). Você pode adicionar um texto em CAPTCHA se precisar. Qualquer coisa mais complexa para um cadastro inicial prejudicará seus usuários em realmente usar seu site.

Uma vez cadastrado, você pode pedir ou exigir (se for valente) que o usuário preencha um perfil completo. Gerlamente os usuários farão isso se eles visitam o site mais que uma vez e querem estabelecer e divulgar sua identidade para outros usuários. Exigir um perfil completo pode fazer com que muitos usuários não retornem ao seu site. Um simples pedido e um lembrete, geralmente na forma de uma mensagem particular no site, são suficientes para que a maioria dos usuários entrem com mais informações sobre si.

4. Verificar o endereço de e-mail do usuário ou não?

Muitos sistemas de cadastro de comunidades oferecem a opção de exigir a validação do endereço de e-mail, enviando para o usuário um link que deve ser clicado para "validar" o e-mail. Enquanto este sistema funciona para muitos sites, ele pode não ser apropriado para qualquer negócio ou comunidade. Este processo garante um e-mail válido e funcional somente por um pequeno período. Se para você é importante ter uma forma de contato com seus usuários fora do ambiente da comunidade (por exemplo, se eles pagaram por um serviço seu), você pode considerar exigir esta validação adicional.

Se você implementar um sistema de verificação, existem alguns pontos a serem lembrados. Primeiro, um pequeno número de endereços de e-mail se tornarão inválidos rapidamente. Algumas pessoas usam um endereço fictício só para esse tipo de cadastro. Outros endereços se perdem com o tempo porque as pessoas mudam de e-mail. Essa validação também desencoraja alguns usuários de completar o cadastro. Por último, alguns usuários não poderão completar o cadastro porque programas anti-spam barram o e-mail de confirmação; usuários que não vêem o e-mail de confirmação geralmente até esquecem que se cadastraram.

5. Ofereça um sistema de avaliação ou reputação

O eBay e a Amazon entendem o valor de sistemas de reputação. No eBay, a reputação de um membro guia outros usuários para decidir se uma oferta é confiável ou não. Apesar da simplicidade de uso, o sistema de reputação é uma das bases do crescimento e da popularidade do eBay. Na Amazon, o sistema de reputação permite que usuários julguem o valor dos comentários de outras pessoas. Ele também oferece uma importante ferramenta para que os usuários façam julgamentos de valor de suas aquisições.

Em comunidades mais tradicionais, sistemas de avaliação e reputação podem ter várias formas. O mais simples é o número de posts feito na comunidade. Quanto mais posts um membro fizer, mais "senior" ele se torna. A data de cadastro também pode ser usada como um indicador do nível do membro. Sistemas mais complexos permitem que membros votem uns nos outros, e alguns sistemas combinam estas técnicas.

A maioria das pessoas valoriza suas avaliações e a reputação que elas constroem na comunidade. É um investimento, como um fundo de aposentadoria privada. Uma vez que os membros investem em sua reputação, eles dificilmente cometerão algum abuso.

Sistemas de reputação também podem estar vinculados a um sistema de responsabilidades, assim, aqueles com reputações elevadas podem obter maiores acessos ou responsabilidades dentro da comunidade. Aqueles com reputação baixa podem receber um acesso restrito ao sistema ou ao serviço, oferecendo a eles um incentivo para que eles subam sua reputação. (Este tipo de vínculo não vai funcionar para qualquer site.)

6. Mantenha a comunicação fluindo

Comunidades online geralmente têm problemas porque elas não são claras sobre suas expectativas em relação aos membros, e porque elas se comunicam numa "linguagem de marketing". Você pode definir suas expectativas de uma forma mais eficaz numa única página com as regras da comunidade do que num acordo de serviço de 12 páginas. Os usuários precisam entender o que eles podem fazer que causará problemas e que tipo de ação será tomada. Eles receberão um aviso por usar algo profano, ou uma suspensão de três dias? Voce pode criar bons modos simplesmente deixando que seus usuários saibam de ante-mão o que você espera deles e o que eles podem esperar de você.

Sua comunicação com os membros da comunidade deve ser clara, direta e frequente. Se a informação é poder, compartilhar simples informações pode ser uma ação muito poderosa numa comunidade. Por exemplo:

Recentemente nós descobrimos um pequeno problema com nossos formulários, mas já resolvemos a questão.

Não diz praticamente nada de valor aos usuários. Isto poderia ser melhor escrito assim:

Ontem descobrimos um erro de programação que nos impedia de gravar os nomes de novos usuários que se cadastraram entre 12/02/06 e 13/02/06. Nós contactamos todos os usuários afetados para que eles soubessem do problema, e nenhuma outra ação é necessária. Nós já resolvemos o problema e pedimos desculpas por qualquer incoveniente que possamos ter causado.

Assim como os usuários aprenderam a valorizar o poder e a facilidade de se comunicarem uns com os outros, eles ainda gostam de uma comunicação e interação frequente com os donos, representantes e gerentes do site.

Sumário

Os sistemas de associação não são nenhuma panaceia, e não vão deter uma pessoa que está realmente disposta a desmantelar seu site. Mas eles realmente oferecem um importante avanço para conectar a comunidade de um website a uma pessoa real, e esta pessoa a suas ações. Este processo de cadastro também funciona para limitar os efeitos desinibitórios do comportamento online – ou pelo menos dos mais negativos – e cria uma súbita mas importante diferença psicológica entre um visitante anônimo e um membro conhecido da comunidade. Uma pessoa que está integrada à comunidade através de um sistema de associação tem menos chances de abusar da comunidade.