Os pontos que surgiram na conversa foram os seguintes:

Falta de foco:

Acreditamos que este seja o principal problema. Em nenhum momento falou-se claramente “isso serve pra aquilo” – só se falou que era um milhão de possibilidades, que as pessoas iam ter orgasmos com os recursos mágicos, só que… Não se falou como. Os exemplos apresentados do que fazer com a ferramenta foram pífios e, até onde eu sei, ninguém fez algo que fosse digno de nota usando o Wave.

Interface diferente “Pero no mucho”:

A idéia vendida foi de uma interface revolucionária. A estrutura ousa muito pouco (repare que a diagramação e distribuição, exceto pela caixa de texto, é quase a do Gmail) e, no pouco que ousou, ficou confuso e sem atrativos – caso do box de texto, que tem um monte de recursos mas nenhum exatamente novo.

Por exemplo pra que diabo fazer uma enquete se pode-se usar um Spreadsheet com o próprio Google Docs com mais recursos e sem todo o ruído visual do Wave ao redor?

Excesso de expectativa

Criou-se muita expectativa de revolução para uma ferramenta que foi lançada inacabada. Mesmo que tivesse uma proposta inovadora, a chance de causar uma boa impressão foi totalmente perdida – muitos usuários não dão segundas chances para ferramentas, especialmente se vierem a se sentir “burros” ao usar.

Alguém lembra do vídeo de uma hora e tra-la-lá apresentando o produto e das pessoas em extase assistindo à demonstração? Até a risada gravada do chaves parecia mais sinceras que aquilo.

Ferramentas tardias

Vários recursos desejáveis relacionados à usabilidade só surgiram muito depois do lançamento, como uma forma de aviso sobre novos waves ou a possibilidade de excluir-se de uma lista Wave (embora implementado é MUITO ruim a navegação e são vários cliques até conseguir).

Tudo bem que melhorias podem sempre ser feitas posteriormente, mas creio que a idéia deles que as pessoas querem ficar conectadas às outras para sempre em tudo que for compartilhável é bem errada – até porque, se verdade fosse, divórcio não existiria.

O Wave não é uma onda, é uma ilha

Na ânsia de tentar ser a nova ferramenta de comunicação da internet, rede social, messenger, email e chat tudo ao mesmo tempo, não foi criada forma alguma de interface com outras ferramentas já existentes. Sequer um RSS.

Entendemos que, de forma até prepotente, o Google tentou apresentar um novo paradigma e romper com todos os antigos – mas foi inocência demais acreditar que pessoas largariam ferramentas que usam há anos e começassem a focar tudo no Wave, e que elas não quereriam integração com mais nada. Por que não uma possibilidade de conectar algo ao Facebook? Por que, no começo, sequer com o próprio Gmail tinha conexão? Já foram adquiridos muitos hábitos nos últimos 15 anos, e uma cultura deste tipo não é jogada para o alto de uma hora pra outra.

Para saber da dificuldade de mudar um hábito é só pensar quanto tempo demorou pro e-mail substituir o fax. Para algumas empresas, aliás, isso ainda é uma realidade.

Documentação ruim / falta de incentivo aos desenvolvedores

Por conta talvez da já citada falta de foco, a documentação voltada a desenvolvedores (que poderiam ter sido umas das fontes de salvação) foi escrita de maneira péssima, tornando a possibilidade de que boas idéias vindas da comunidade minguasse muito.

Poucos heróis aventuraram-se a fazer algo para o Wave, mas a maioria resolveu esperar para ver no que dava antes de perder precioso tempo estudando algo que pudesse dar em água. E deu.

Entrada por convite

Outra coisa que frustrou pessoas: se você já tem Gmail, conta no Orkut, conta no Picasa, Gtalk e etc, por que cargas d’água precisa ser convidado para usar uma ferramenta que, em tese, já é parte das suas aplicações/contas Google? Convites são feitos para coisas que são extremamente desejáveis e, se feitos ao acaso, gera uma expectativa de “é bom valer a pena”. Dá sensação de pagar pra entrar num clube privado e descobrir lá dentro que é só um boteco comum.

Tudo que se propôs a resolver já tinha solução

Concordo, muita coisa até pode ser melhor solucionado no Wave, caso por exemplo da função de edição conjunta e compartilhamento de documentos. Mas… As pessoas já faziam isso no Google Docs há anos. E já eram familiares à estrutura “word-like” lá utilizada, afinal, todos já estão bem adestrados desde o win 3.11 a usar aquela estrutura. Não importa o quão mais simples seja a interface, para aquele tipo de solução de editor será, sempre, muito difícil propor algo novo.

Integração demais = lentidão

As possibilidade de juntar tudo e todos é tão grande que por vezes é insustentável manter um wave por muito tempo. Tantos são os aplicativos, replys, icones de participantes, referências internas, referências externas, etc, que só com muita memória RAM você consegue usar o Wave de forma decente.

Puxando a Sardinha para o Chrome

O Google pedia descaradamente para você usar o Wave no Chrome. Sim, é mais do que verdade que o Chrome é um tremendo de um browser, com o melhor “motor” para interpretação de Javascript feito até então, não só o Wave, mas tudo que usa Ajax como base para interface web.

O caso é que o usuário não sabe disso. Se o site está lento, para o usuário a culpa não será do IE6, será do site. Mesmo no Firefox, que é um browser bastante decente, fica insuportável de lento, forçando a usar o Chrome.

Não importa o quão verdadeiro é o fato de que o Chrome lida melhor com Javascript com os outros: a campanha/lavagem cerebral pelo browser da casa sempre vai deixar com aquele fundinho de que foi sabotagem nos outros navegadores (coisa que não foi MESMO). E como tem neurótico a rodo nessa terra, especialmente entre desenvolvedores (isso, aqueles mesmos que poderiam ter salvo aspectos da aplicação), é mais um motivo que afasta os potenciais usuários.

O nome do produto não é “iWave”

Se o google wave fosse produzido pela Apple ou fosse uma app para iPhone, os geeks moderninhos certamente ajudariam a vendê-lo como uma idéia de outro mundo.

Falando mais sério, essa foi outra falha na estratégia do Google: eles tentaram fazer algo que a Apple faz há anos, que é vender qualquer idéia como se fosse revolucionária (mesmo que seja só um iPod grandão com menos recursos que o original).

O lance é que a Apple assume essa postura e o risco do produto não dar certo. Eles perdem com o que não da certo, mas é um risco menor: a Apple conhece bem seu público e já percebeu qual é a forma que eles tendem a agir, então raramente dá uma bola fora (e quando dá sabe exatamente o que falar para o público continuar sentindo-se querido e feliz com o status de ser um possuidor de um produto deles).

Conclusão

De megalomania aos problemas de projeto, é realmente uma pena ver uma ferramenta morrer deste jeito, sem chegar a atingir todo seu potencial. Engraçado, pois uma das coisas que comentamos durante o papo é que, depois de algumas experiências, ela era um bom lugar para juntar material de pesquisa e pequenos Brainstorms (com direito até a descobrir nesse exato momento que há um novo recurso voltado para mind map, que sempre foi um recurso do qual sentimos muita falta).

Quando finalmente achamos o que fazer com a ferramenta o Google decide enterra-la.

Neste artigo, vou mostrar algumas técnicas diferentes CSS3, que alguns dos principais navegadores (mais especificamente Firefox, Chrome, Safari e Opera) já suportam. Com isso ficará evidente a degradação do layout pela falta de suporte dos outros browsers (como por exemplo o Internet Explorer). Usando as extensões específicas disponíveis para cada navegador, muitos dos estilos que estão sendo especificados no CSS3 já podem ser usados hoje!

CSS Vendor Extensions

O CSS permite que os desenvolvedores de navegadores criem implementações proprietárias para os mais variados estilos CSS. Isso permite ao distribuidor do navegador realize implementações próprias para determinada propriedade CSS, mesmo que já padronizado ou especificado, o que não é tão comum nem tão recomendado. Para utilizar no CSS, a propriedade que deseja utilizar para determinado(s) navegador(es) deve ser precedida de um prefixo. Esse prefixo indicará que se trata de uma extensão que somente aquele navegador interpretará.

Alguns browsers com seus prefixos (CSS Proprietary Extensions Scheme):

• Firefox : -moz-
• Safari: -webkit-
• Chrome: -webkit-
• Opera: -o-
• IE: -ms-

A grande vantagem das extensões é que os navegadores podem ir implementando as novas propriedades, como no caso do CSS3. Propriedades essas que já estão previstas, porém não especificadas. Isso certamente acelera a evolução dos navegadores em relação ao suporte às novas propriedades; Prepara os “CSS coders” para a nova forma de trabalhar; e contribui para a especificação oficial do CSS propriamente dita.
Clique se quiser saber mais sobre (CSS Proprietary Extensions Scheme);

Como você deve ter percebido, uma grande desvantagem de usar essas extensões é o fato de que acabamos tendo que repetir as propriedades para que funcione em todos os navegadores. É isso ou procurar soluções com javascript, folhas de estilos alternativas entre outras “viagens” para que a manutenção do código continue simples onerando o mínimo de recursos. Tudo bem, não basta falar, vamos mergulhar na direito no CSS3! Nota: os estilos sem um prefixo é a proposta da especificação atual W3C.

Uma nota sobre os Demos nesta página

Todos os exemplos estão nesta página, por isso, se você não está vendo alguns exemplos corretamente (ou nada), então o navegador que você está usando não dá suporte a técnica particular CSS3.

Sombras

O efeito de sombra aceita vários valores. Em primeiro lugar é simplesmente a cor da sombra. Ele aceita quatro valores de “length” e os dois primeiros são os x (offset horizontal) e do y (offset vertical). O valor seguinte é a quantidade de desfoque adicionado à sombra. O valor da quarta e última, é a quantidade propagação da sombra. “Box shadow” também vai aceitar uma palavra-chave “inset” que vai criar uma sombra interna.

box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;

DEMO DE SOMBRA

<p>
<div style="width: 500px; height: 100px; margin-left:50px; color: #FFF;
background-color: #069; padding: 0 7px 0 7px; box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px; -webkit-box-shadow: #333 3px 3px 4px;">
&amp;amp;amp;nbsp;</div><br />
</p>

Gradientes

Gradientes pode ser bastante confuso no início, especialmente quando se comparam as diferenças -moz e -webkit. Com -moz você primeiro definir a direção do gradiente, em seguida, determinar o início e término. Da -webkit tem um pouco mais de código. Primeiro você define o tipo de gradiente. Os próximos dois valores definem a direção. Finalmente, os últimos dois valores definem o início e término da cor do gradiente.

-moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147));

DEMO DE GRADIENTE

<p>
<div style="width: 500px; height: 100px; background-color:#2e3192;
background: -moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(linear, left top, left bottom, from(#069), to(#036));">
&amp;amp;amp;nbsp;</div><br />
</p>

RGBA

O método de cor RGBA realmente é mais fácil do que pode parecer à primeira vista. Leva quatro valores e na ordem em que estão: a quantidade de vermelho, a quantidade de verde, de azul e do nível de opacidade. Em vez de usar cor em (#) hexadecimal, defina o modo de cor em RGB, quanto o nível de opacidade pode se ver a cor transparente. A opacidade aceita valores entre 0 e 1. Com 0 sendo completamente opaco e 1 sendo a cor real definida. O exemplo abaixo tem um valor de opacidade da .5 fazendo com que o elemento fique com 50% de transparência. RGBA na verdade não necessita de qualquer das extensões do navegador.

background-color: rgba(0, 54, 105, .5);

DEMO DE RGBA

<p>
<div style="width: 480px; height: 80px; text-align: center;
padding: 10px; background-color: rgba(0, 54, 105, .5);">
Este elemento está com 50% de transparência </div><br />
</p>

HSL

Junto com RGBA, CSS3 pode tornar o modelo de cor HSL disponível para nós. Isso poderia dar-nos todo um arsenal de cores e tons. Neste modelo de cor, HSL (H = tonalidade, S = saturação, L = luminosidade). Tonalidade é um grau na “roda de cores”, enquanto a saturação e a luminosidade são valores percentuais das cores.

background-color: hsl(209, 41.2%, 20,6%);

DEMO HSL

<p>
<div style="width: 480px; height: 80px; padding: 10px;
background-color: hsl(209, 41.2%, 20,6%);"> &amp;amp;amp;nbsp; </div><br />
</p>

Cor da Borda

Com este estilo, você deve definir border-top border-right border-bottom e border-left separadamente para obter o efeito abaixo. Você vai perceber que eu tenho definido uma borda de 8px juntamente com 8 cores diferentes para cada estilo de cor da borda. Isso porque a mesma quantidade de cores tem de coincidir com a quantidade de pixels na definição da borda.

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors:    #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors:   #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors:  #555 #666 #777 #888 #999 #aaa #bbb #ccc;

DEMO COR DA BORDA

<p>
<div style="width: 500px; height: 100px;
background-color: #2e3192; border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;">
&amp;amp;amp;nbsp; </div><br />
</p>

Seleção Cor do Texto

Devo dizer que mudar a cor de seleção de texto é um recurso muito bacana. Com o pseudo-elemento ::selection, você pode alterar a color e background quando o usuário destaca um elemento de texto. O ::selection foi removido do projecto CSS3 atual, mas deixa a esperança que irão adicioná-lo novamente mais tarde!

::selection {
background: #3C0; /* Safari */
color: #90C;
}
::-moz-selection {
background: #3C0; /* Firefox */
color: #90C;
}

DEMO SELEÇÃO DE TEXTO

<style type="text/css">
<!--
#textSelection { width: 500px; }
/* Safari */
p.selection::selection { background: #3C0; color: #90C; }
/* Firefox */
p.selection::-moz-selection { background: #3C0; color: #90C; }
-->
</style>
<div id="textSelection">
<p>Selecione o texto para ver o efeito deste recurso! Selecione o texto para
ver o efeito deste recurso! Selecione o texto para ver o efeito deste recurso!
Selecione o texto para ver o efeito deste recurso! Selecione o texto para ver o
efeito deste recurso! Selecione o texto para ver o efeito deste recurso! Selecione
o texto para ver o efeito deste recurso! Selecione o texto para ver o efeito deste
recurso! Selecione o texto para ver o efeito deste recurso! Selecione o texto para
ver o efeito deste recurso! Selecione o texto para ver o efeito deste recurso!
Selecione o texto para ver o efeito deste recurso! </p>
</div>

Transformação

Com o estilo “transform”, você pode fazer os elementos “crescerem”, quando o mouse estiver sobre o elemento. Com um valor acima de 1 o elemento irá aumentar de tamanho. Por outro lado, com um valor abaixo de 1 fará com que o elemento diminuir de tamanho. Junto com o “scale” o “transform” tem muitos diferentes formas de uso. Visite a página do desenvolvedor do Firefox para ver o que mais você pode usar. (https://developer.mozilla.org/En/CSS/-moz-transform)

-moz-transform: scale(1.15);
-webkit-transform: scale(1.15);

DEMO DE TRANSFORMAÇÃO

<style type="text/css">
<!--
#transform ul { list-style:none; background:none; }
#transform ul li{ width: 200px; color:#FFF; list-style: none; padding: 5px;
background:none; background-color: #069; border-bottom: #036 solid 1px; }
#transform li a:link { color: white; }
#transform li:hover { -moz-transform: scale(1.15); -webkit-transform: scale(1.15);
background-color: #003669; }
-->
</style>
<div id="transform">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">A Empresa</a></li>
		<li><a href="#">Produtos</a></li>
		<li><a href="#">Serviços</a></li>
		<li><a href="#">Contato</a></li>
	</ul>
</div>

Layout Multi-column

Com este novo estilo de “layout multi-column”, podemos dar ao nosso texto um “estilo jornal”. Implementar isto é muito simples em relação ao modo “tradicional” de se fazer com CSS. Primeiro eu especifico quantas colunas eu quero, o tipo de regra que eu quero para separá-las, e como que “espaçamento” eu quero entre as colunas. Simples não?

-moz-column-count:3;
-moz-column-rule: solid 1px black;
-moz-column-gap: 20px;

DEMO DE MULTI-COLUMN

<style type="text/css">
<!--
#multiColumns {
	-moz-column-count:3;
	-moz-column-rule: solid 1px black;
	-moz-column-gap: 20px; }
-->
</style>
<div id="multiColumns">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Resumo

Espero que todos estão tão animado com o CSS3 como eu estou. Ele nos dá mais poder tanto para webmasters quanto para desenvolvedores, e em muitos aspectos muito mais simples. Agora, se nós pudéssemos chegar em todos os navegadores e dizer para apoiá-lo seria fantástico! O que eu mostrei são apenas algumas das novas características potenciais do CSS3. Se você quiser obter mais informações, dicas e/ou ajuda, eu aconselho a visitar todos os sites abaixo:

* CSS: Current Work (http://www.w3.org/Style/CSS/current-work)

* CSS3.info (http://www.css3.info/)

* Mozilla CSS Extensions (https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions)

* The WebKit Open Source Project (http://webkit.org/)