O Casulo

Peraí, o que é isso? Da Google? Eu quero! Essa é a pergunta padrão que ouço toda vez que ofereço convites para o Google Wave (ainda em beta fechado). Bom, é natural que as pessoas estejam confusas, pois a ferramenta é realmente complicada à primeira vista. Vou tentar passar por aqui as impressões da minha experiência até hoje. Talvez assim fique menos complicado de entender o seu potencial.

Vamos pelo começo! Que a Google é uma potência, quando se fala em internet, ninguém discute. Qualquer coisa que eles lançam, ou fazem menção, o frenesi é automático: uma enxurrada de tweets, reviews, furos de reportagem…

Ufa! Mas, como toda megacorp, garantir sucesso pleno de todos os seus produtos não é uma verdade plena. Duvida? Basta lembrar do extinto Lively, o projeto com a pegada parecida com o fenômeno passageiro (pelo menos aqui no Brasil) chamado Second Life. Alguém aí ouviu falar desse projeto?

Quer mais? Leia a matéria na íntegra publicada no blog da Revista WebDesign, clicando aqui.

Fala aí pessoal, beleza?

Como com certeza acredito que muitos desenvolvedores perdem um bom tempo tentando desvendar os mistérios ocultos da programação, principalmente quando o mouse wheel do Flash não está funcionando nos browsers… Aí vai uma sugestão:

Tentem retirar o wmode do código Embed do HTML gerado pelo Flash, caso seja possível, e muito provavelmente seus problemas acabaram.

Tá perdido ainda? Calma, eu explico exemplifico:

Caso você esteja usando o EMBED padrão do Flash:

// remova a linha abaixo
<param name="wmode" value="transparent" />

E no caso de você estiver usando o SWFObject

//retirem a parte onde contém o wmode: 'opaque'.
swfobject.embedSWF('site_em_flash.swf', 'flash', '100%', '100%',
 '9.0.45', 'expressinstall.swf', {domain: '*'},{ wmode: 'opaque',
 scale: 'noScale'}, {id: 'website'});

Simples né? Bom, espero que ajude…

Um grande abraço,

Havia preparado o texto para explicação para um cliente, mas achei ,mesmo batido , ainda tão relevante o assunto que publicar por aqui não é nada mal, ainda mais que esse blog está às traças… Uma pena, mas isso é resultado de muito trabalho. E enquanto tem trabalho, está bom demais!

Primeiro, o conceito

O site construido usando Tableless usa as tags do HTML respeitando os seus valores semânticos (de acordo com suas definições pelo órgão regulador W3C).

Além disso, uma vez a web 2.0 sendo uma encorajadora do uso dos padrões web para o desenvolvimento, por que o Tableless, que é um técnica e não uma linguagem que surgiu junto com o amadurecimento da web.

Sendo assim as vantagens, que são inúmeras, contribui para a construção do site que é feita uma melhor separação das camadas de desenvolvimento: apresentação, negocio e estrutura. Facilitando principalmente a leitura entre-navegadores (Cross-Browser) e, no caso do SEO, na interpretação do código pelas ferramentas de busca. Estas últimas “enxergam” o código apenas na camada de conteúdo, não considerando as outras camadas de desenvolvimento o que contruibui largamente na classificação do conteúdo e na mensuração de sua relevência perante às buscas.

Mas na prática, quais as diferenças entre TABLE e TABLELESS ?

Com a utilização das tabelas o site tende a tornar-se mais lento, pois os arquivos ficam mais pesados devido a um número maior de tags que são utilizadas. Abaixo algumas comparações:

Table

_Tamanho de arquivo de 200 linhas: ~ 14Kb
_Consumo de banda a cada 100 visitantes: ~ 1.4 Mb
_Arquivo fica embaralhado e com muitas linhas desnecessárias

Tableless

_Tamanho de arquivo de 200 linhas: ~ 8Kb
_Consumo de banda a cada 100 visitantes: ~ 0.8 Mb
_Arquivo limpo e com menos linhas

• http://migre.me/9zZ2
• http://migre.me/9A5l

Olha só que bacana! Uma galera independente está fazendo uma “campanha” para a Ferrero do Brasil comercializar por estas bandas a famosa “balinha” sabor “Canela”. Existem duas forma de participar da promoção:

1) Entre no site www.euquerotictaccanela.com.br e responda a seguinte pergunta: O QUE VOCÊ SERIA CAPAZ DE FAZER PROTICTAC CANELA SER VENDIDO AQUI NO BRASIL? As 5 melhores respostas levam pra casa um pack com 3 caixinhas da “balinha”.

2) Siga o @tictac_canela no Twitter e em seguida envie por Direct Message a resposta da pergunta: O QUE VOCÊ SERIA CAPAZ DE FAZER PROTICTAC CANELA SER VENDIDO AQUI NO BRASIL? A melhor resposta leva pra casa uma Câmera Fotográfica de 10MP. Bacana néh?!

É isso, assim vamos tornando a internet mais colaborativa e divertida!

É, se você é como a gente aqui do O Casulo, fissurados por animação, então com certeza você não perdeu a edição 2009 de um dos festivais de animação mais importantes do mundo, o AnimaMundi. Ou se perdeu, tratou de correr pra descobrir com um amigo que foi tudo o que rolou, e catou os videos no youtube, estou certo? Não!? Então alivie-se da culpa. Meu ilustríssimo ex-professor da pós de animação e amigo Ronaldão Oliveira me descolou uma listinha irada (aí embaixo, com comentários do próprio) com os videos que abocanharam os prêmios mais importantes do festival.

1) O vencedor pelo voto popular como melhor curta do festival foi o francês “Mon Chinois”

2) O vencedor pelo júri profissional foi “MUTO” da Itália, mas animado nas ruas de Buenos Aires

3) Esse foi o vencedor na categoria Filme de estudante “Our wonderful nature” do Reino Unido

4) Esse aqui não ganhou prêmio nenhum mas achei muito foda, é todo feito em areia e veio da Espanha “No corras tanto”

5) Pra fechar, meu video, feito por uma turma do segundo grau que o Ronaldo dá aula: “Vai filhão!”

Bom isso aí, divirtão-se.

EventDispatcher nada mais é que um evento de broadcast para configurar Listeners (objetos “escutadores”) que recebem o Evento e chamam a função associada a ele. Um exemplo: se você já usou a classe Key, dá pra ver que não é difícil adicionar um Listener a uma tecla enquanto você configura eventos, como onKeyDown, para ver se determinada tecla já foi acionada pelo usuário. Bom, mesmo se você nunca ouviu falar de EventDispatcher, há uma grande chance de já ter usado componentes e funções que utilizam o addEventListener, e não há dúvida de que você já usou a classe EventDispatcher sem saber. Bom, o objetivo desse mini-tutorial é explicar um pouco o que está por trás dos conceitos e como essa classe pode ser útil em seus projetos.

EventDispatcher possui um grupo de Listeners para cada evento que dá broadcast. Ele é bom quando você precisa de Listeners diferentes para diferentes eventos. Outra coisa que devemos notar é a habilidade do EventDispatcher de ter funções como parte de uma coleção de eventos. EventDispatcher é orientado a eventos, então você pode ter funções que serão chamadas uma vez que o evento é sinalizado ao seu broadcast.

Tá mas isso tudo junto? “Che facciamo, Ronaldo?”

Antes de começar a meter a mão na massa, você deve entender como o broadcast é incializado. Da maneira mais básica: EventDispatcher é simplesmente um container de métodos que são dados a uma instância de broadcasting quando essa é inicializada. Dando uma olhadinha nessa função estática, nós podemos ver como os objetos devem ser configurados para começar a sessão de broadcast.

static function inicializar(objeto:Object):void {
if(_fEventDispatcher == undefined) {
_fEventDispatcher = new EventDispatcher();
}
object.addEventListener = _fEventDispatcher.addEventListener;
object.removeEventListener = fEventDispatcher.removeEventListener;
object.dispatchEvent = _fEventDispatcher.dispatchEvent;
object.dispatchQueue = _fEventDispatcher.dispatchQueue;
}

Executando esse método (inicializar), nós vemos quatro métodos e uma instância do EventDispatcher, que é passada para o objeto que a função recebe como parâmetro. O objeto pode agora chamar esses métodos como se fossem deles – ou no seu escopo. Quando o evento de broadcast começa, o “broadcaster” inicia um loop através de todos os listeners daquele evento e então chama a função associada a ele.

(continua…)

Tipo o final do episódio do Heroes, saca?

Com o ColourGrab você pega o caminho de qualquer imagem na internet, e a partir disso é gerado uma tabela de cores baseada nas cores presentes na imagem. Rápido e facil. E ainda é gerado um Swatch para usar no photoshop, além de uma lista com todas as cores e seus hexadecimais.

http://colourgrab.com/

Com o BabelWith.me você faz uma sala de chat personalizada e distribui a URL para quem você quiser que entre. Depois de cada participante selecionar o seu idioma, a cada mensagem digitada o programa devolve para cada participante a mensagem na linguagem escolhida.

Fica ai a dica de quem quer conversar com pessoas que falam outras línguas sem ter problemas. E é claro, o melhor de tudo é que é de graça.

Os webdesigners que eu conheço (todos eles, inclusive eu) sentem calafrios quando tem que desenvolver um site em HTML e ouvem falar na palavra “Cross-Browser”, tudo porque com a famosa Guerra dos Browsers iniciada há anos atrás ainda não acabou por completo, deu até uma amenizada eu sei, mas ainda há bastante diferenças quando o projeto é visualizado em Browsers como (a mais famosa briga) IE vesus Outros browsers.

Bom, felizmente tem gente que se preocupa mais do que só desenvolver browsers e codificações que não se falam entre si, sim eu to falando de testadores de projetos cross-browsers. Recentemente a Adobe lançou um escrito (ao que me parece) em Flex o aplicativo web simula acessar um determinado site usando browsers diferentes para facilitar a correção e detecção de erros entre plataformas, tanto sistema operacional quanto browsers.

O nome da ferramenta é Adobe BrowserLab, é dá pra fazer “split” da tela testando o site simultaneamente em Firefox e IE7, por exemplo. Acho que eles ainda vão incluir outros browsers mas a idéia parece bem promissora e útil principalmente pros que tem na web o seu ganha pão.

http://browserlab.adobe.com/

E ae? O que c achou do BrowserLab, fala aí pra gente?

A gente que desenvolve site fica sempre catando listinhas de dicas pra auxiliar o nosso trabalho, eu mesmo sempre to dando uma olhada na Smashing Magazine que volta e meia publica umas dicas iradas. Bom, eu também sempre quis fazer a minha, sabe esse espírito de querer compartilhar conhecimento realmente faz um bem danado.

Mas vamo parar de blabla, e direto pro o que interessa. Eu preparei uma listinha baseada num estudo que a gente aqui da Kaus, são coisas teoricamente simples mas que uma vez aplicada no projeto, cara, é batata. Sucesso total. Mas diferente de outras listas similares que você pode encontrar na web por aí, vou tentar não me prender às ações técnicas e sim na visão do projeto web como um todo.

1) Aplicações de SEO (Search Engine Optimization)

Acho que ultimamente é um dos termos mais comentados na web. SEO para os menos entendidos são um conjunto de técnicas e métodos de acompanhamento de um site, da construção à publicação. SEO é pra vida toda. Sim, ele é.
Aqui você pode obter informações bacanas sobre o assunto.

2) Técnicas de usabilidade na navegação

Aqui temos o calcanhar de Aquiles de 80% (tô chutando, tá? Mas é quase isso…) dos projetos web que estão hoje publicados na rede que encontramos por aí. Muito negligenciado o assunto de nome bonito cuida de um assunto igualmente bonito, que é a experiência do usuário. Mas aí a wikipédia explica melhor do que eu.

“usabilidade normalmente se refere à simplicidade e facilidade com que uma interface, um programa de computador ou um website pode ser utilizado.” (wiki: http://pt.wikipedia.org/wiki/Usabilidade)

3) Estudo da arquitetura de informação para o melhor uso do conteúdo

Taí outro assunto que a galera se esquece, informação organizada. Bom, em pouquissímas palavras é isso que a Arquitetura de Informação é (ou deve ser). Um site com um pouco mais de 5 páginas de links tem um grande potencial pra virar uma grande bagunça.

Aqui tem uma matéria bacana sobre o assunto.

4) Utilização de ferramentas webanalytics (Google Analytics, ou outra de sua preferência)

Bom, o motivo é simples, você implementa as melhorias, consequentemente você quer ver os resultados. É aí que o webanalytics entra em ação.

Vê aqui o link bacana que eu separei.

5) Campanha online

Eu já até ouvi gente dizer que publicidade na internet não dá em nada, mas pelo que eu vejo aqui no trampo não é verdade isso. Já fizemos umas comparações de projetos com e sem campanhas e é impressionante o resultado. Uma vez bem planejada por uma equipe que conhece bem do assunto uma ação dessa pode fazer crescrer muito mais que 100% do número absoluto de visitas de um projeto web. Vale link patrocinado, Banner, e o novato Cros-Content, pra fisgar mais visitantes (usuários) para seu projeto.

Mas aí você vai ficar se perguntando, como é que eu vo saber se a campanha que eu fiz deu (ou tá dando certo)? Ow! Tags pô! Lembra do WebAnalytics, que eu falei lá em cima? Então, são ferramentas como elas que se faz mensuração (essencial) de resultados de onde, como o usuário chegou ao seu site e mais importante, se gerou cliques (ou conversões para os entendidos).

6) Análise de comportamento da marca nas Redes Sociais

Sabe aquele ditado: “Falem mal mas falem de mim?” (hahauhaua) pois bem aqui está a importância desse tipo de análise, pois depois de tantas ações (campanhas, seo, usabilidade, arquitetura…) a repercussão é consequencia. E hoje em dia com o crescimento de redes sociais (como o Orkut, Twitter, Facebook…), não é muito dificil de você encontrar um camarada falando do seu site pro outro no Twitter por exemplo. O pulo do gato é saber absover críticas e elogios em soluções e ações para estreitar o relacionamento com o cliente, usuário ou visitante, e já tá mais do que comprovado que marca que conhece seu público só tem a ganhar.

Bom, acho que é isso. Se você, concorda ou descorda de algum item, vai lá, toma coragem e comenta aí embaixo.

Abs.