Marco Gomes

Criador da boo-box. Empreendedor dedicado, nerd veterano, interneteiro profissional, cristão aprendiz, fotógrafo amador, marido apaixonado.

Textos marcados como ‘teoria’

Como se divertir numa sexta-feira

Faz alguns dias que venho conversando com o Dirceu, ninja da boo-box, sobre o Teorema do Macaco Infinito, que diz:

Um macaco digitando aleatoriamente em um teclado por um infinito espaço de tempo irá quase certamente criar um texto qualquer escolhido, como por exemplo o trabalho completo de William Shakespeare.

Fonte: Infinite monkey theorem na Wikipedia

A prova matemática direta já existe, mas mesmo assim hoje de manhã resolvi implementar uma prova palpável, só por diversão :D

Veja a minha implementação do Teorema do Macaco Infinito. O código-fonte está linkado no rodapé da página e pode te ajudar a entender JavaScript e jQuery.

(se alguém rir porque está em JavaScript[bb] vai ter que me mandar uma versão em Erlang[bb]… E se mandar vai se ver comigo!)

Interfaces Modais e Quasimodais

Projeto de Interfaces

Pretendo, a partir de agora, escrever um pouco sobre a construção de interfaces, na minha eterna luta por tornar o mundo um pouco melhor e os computadores mais fáceis de usar… Pra quem não sabe, o boo-box surgiu da pergunta: E se eu pudesse clicar na foto e comprar o All Star que a Gisele Bündchen está usando?

A construção de interfaces é normalmente tomada como frescura por profissionais de outras áreas do desenvolvimento de aplicativos e websites, é comum vermos sistemas extremamente complexos, com mais tabelas no banco de dados que a quantidade de ex-namoradas do programador, processo de produção minuciosamente acompanhado por um profissional de gestão de projetos, seguindo regras ITIL e ISO, mas com interface sofrível e absurdamente não utilizável.

Jef Raskin foi um visionário, fundou o projeto Macintosh e mudou o mundo com suas idéias sobre Interfaces Humanas[bb] (saiba mais na Wikipédia). Um de seus principais pilares era “tarefas simples devem permanecer simples”. Por que ajustar a hora em relógios digitais é tão complexo enquanto em relógios analógicos (de ponteiros), que são mais antigos, é tão fácil? Por que achar aquele doc sobre “A Teoria Cognitiva de Piaget” no seu Windows Explorer é tão mais difícil que achar um documento na sua pasta da faculdade? Tarefas simples devem permanecer simples.

Interfaces Modais facilitam o erro

Interfaces Modais têm seu comportamento alterado de acordo com um comando do usuário. Um bom exemplo é a tecla Caps Lock, você ativa ela sem querer, ou se esquece que ativou, E DE REPENTE SEU TEXTO COMEÇA A GRITAR COM O LEITOR. Teria evitado várias brigas no MSN caso isso pudesse ser deligado. O maior problema é que os usuários esquecem que mudaram o modo da interface e ela passa a se comportar de maneira inesperada. Tenho um amigo progamador que arranca a tecla “Power” de todos os teclados que usa, pra não desligar o computador por engano.

Interfaces Quasimodais dificultam o erro

A solução proposta por Raskin para Interface Modal era a Quasimodal, quasi em grego significa (adivinhe?) quase. Ou seja, interfaces “perto de serem modais”.

Uma interface quasimodal exige que o usuário ativamente mantenha o modo ativado, um bom exemplo é a tecla Shift, eu duvido que alguém tenha “gritado” com seus leitores por “esquecer que estava com o dedo no Shift”. Outro exemplo são os microfones de aviões, aeroportos ou lojas de departamento, caso a ativação seja simplesmente pressionando um botão, podem ocorrer situações em que o microfone fica transmitindo conversas inapropriadas. Se a ativação for pressionando constantemente um botão, esses erros desaparecem, ninguém vai xingar o chefe enquanto estiver pressionando o botão de “transmitindo”.

Outro exemplo de erro em interfaces modais são as janelas de monólogo, famosos alertas usados em websites e programas de desktop, uma janela com uma frase qualquer e somente uma opção: o botão Ok. Quantas vezes eu digitei caracteres insanamente, nervoso por meu “teclado ter parado de funcionar ou o computador estar travado” quando, na verdade, havia um alerta escondido embaixo de alguma janela ou perdido no segundo monitor (quando estou usando dois).

JavaScript Alert
Alerta “monólogo”.

A solução, segundo Raskin, são mensagens semitransparentes, que desaparecem após alguma ação do usuário, como movimentar o mouse ou apertar qualquer tecla. Somado a isso podemos ter um log das mensagens, caso o usuário perca a mensagem pode olhar no log e verificar quais foram os avisos que recebeu. Essa solução resolve o problema do falso travamento e melhora a usabilidade, pois você não precisa clicar no inútil “Ok”.

Aviso semitransparente da boo-box
Aviso semitransparente após o envio de e-mail no boo-box

capa de The Human Interface

Você pode conferir as idéias de Jef Raskin no livro “The Humane Interface”[bb], de 2000, onde ele destrincha, com certo humor, os erros das interfaces computacionais que estamos acostumados a usar e propõe boas soluções, mostrando que nem sempre “manter a solução que já vem sendo utilizada” é a solução mais inteligente para um problema.

Além do livro confira também o blog da Humanized, a empresa de Aza Raskin, o filho do gênio, onde ele dá continuidade ao trabalho do pai, que morreu em 2005.

Um bom exemplo de interface que leva em consideração as idéias de Jef e Aza Raskin é o Songza.com (via Cairo Gomes). Projetado pelo próprio Aza, é um sistema que busca músicas pra serem ouvidas facilmente, pegando videos do YouTube e tocando apenas o áudio, preste atenção na facilidade e fluidez de uso da aplicação.

12º EWD Brasília

12o EWD - logo

Quinta-feira o Bruno Psysapiens me aborda no chat por texto do Skype:
_ Vai transmitir o EWD pelo Skype?
_ Se tiver wi-fi disponível… – eu respondi.
_ Evento de web sem wi-fi?
_ É mesmo, tem que ter internet disponível.

Dois dias depois…

Começo perguntando, como um evento de internet pode não ter wi-fi disponível? E o live blogging? e as conferências Skype? Será que eles não se interessam pela divulgação que a blogosfera pode proporcionar?

Hebert Mascarenhas, Baião de Dois:

Título: Sou fã da Gringo e do Grupo Fermento

Demonstração de vários cases de ações online feitas para Brasília. Sites, hotsites, advergames, uso extensivo de Flash. Destaque para uma _vitrine interativa_ feita para a Brasil Telecom, com touch-screen termo-estático e uma aplicação Flash para escolha e comparação de celulares, muito interessante.

Mantras como “tenha sempre em mente o objetivo do projeto”, ou “sempre que possível, use o entreteninmento”, “busque novas soluções”.

Citação ao Rapha: Em uma ação que envolta um game, concentre-se na ação e não no game.

Michel Lent, 10 Minutos Interactive (audio):

Título: WEB 2.0 e as novas fronteiras do mercado e da profissão.

Viemos de um mundo analógico, a 20 anos atrás o mundo era quase que totalmente analógico, com cada aparelho com uma função específica e definida, telefone, rádio, TV, toca-discos.

O CD foi o primeiro meio de informação digital popular. Hoje, 40 anos após a criação dos primeiros dispositivos digitais, a informação está completando um processo de digitalização.

Convergência de dispositivos gera convergência de mídia. Todos os aperelhos podem fazer tudo, a informação está em todo lugar. Não temos mais um mundo de dispositivos, mas um mundo de telas. A informação muda de acordo com a “tela”.

No futuro vamos esquecer a Web, ela é a ferramenta, você precisa se interessar no “porque” do projeto. Num futuro muito próximo as pessoas vão usar a mais internet através de telas pequenas (celular) do que através de telas médias (desktops).

A Web 2.0

O avanço da tecnologia democratizou o poder de publicação e oferta de serviços online. Qualquer pessoa com acesso à Internet tem ferramentas e oferta de serviços para se tornar publicador.

Resumo da Internet

  1. Redes sociais e comunicacao
  2. Producao e consumo de conteúdo
  3. Ferramentas online
  4. Negócios e serviços

A era do ‘eu mídia’:

Na era do eu mídia, os usuários querem se ver acima de tudo. Com a convergência de dispositivos a fronteira entre a Web e outras mídias desaparece.

Especialização e colaboração

Mas o usuário não ‘engole’ coisas mal-feitas por empresas, elas aceitam coisas ‘toscas’ se tiverem sido feitas por outros usuários. Publicidade não pode ser mal-feita se for produzida por agências.

Procure colaborar com gente especializada para um trabalho realmente bem feito.

5 Conselhos

  1. Para os estudantes: conceito e teoria antes, técnica e ferramenta depois.
  2. Para os profissionais: há vida além da agência, o “cliente” também precisa de experts.
  3. Para os clientes: trate seu fornecedor com carinho, ele é seu maior aliado para o sucesso.
  4. Para os jovens empresários: *erro com o dinheiro dos outros*, considere um emprego antes de abrir sua agência.
  5. Para todos nós: Estamos só começando, tem muito mais pro vir.

Maurício Moreiria, TV1

Titulo: Usabilidade: visão e processo para implementar projetos com foco no usuário

A usabilidade começou com Jakob Nielsen, e colocou fundamentos muito sólidos, apesar de ter proposto coisas questionáveis ele tem sua importância na garantida.

O que temos de novo na usabilidade é o ambiente. A convergência de mídias, a usabilidade de dispositivos como celular e Microsoft Surface.

Vídeo do Rafinha, sobre o “usuário” da Internet. Imergido num mundo de tecnologia onde produzir conteúdo é muito fácil.

Definindo usabilidade:
“A capacidade de um sistema interativo oferecer a um usuário em um determinado contexto de operação e realização de tarefas de maneira eficaz, eficiente e agradável.”

Profissionais que trabalham com desenhos de interface precisam ter o _foco na necessidade do usuário_ (jargão detectado).

Explicação extensa do papel do arquiteto de informação e do designer.

Cases de usabilidade (boa ou ruim):

  1. Globo.com e seu menu lateral com padrões de cores para diferenciar links para págias internas, menus expansíveis, sub-sites, assuntos.
  2. Globo.com e conversa entre arquiteto e montador HTML para inserção de textos descritivos (title) para links.
  3. Americanas.com e a página 404 customizada e mais amigável.
  4. Flickr e a paginação de thumbnails que deslizam, sumindo conforme você pede mais.
  5. Flickr mecanismo de paginação.
  6. Usabilidoido, mau-uso de ícones na árvore.
  7. Submarino, a busca não pode ser organizada por preço.

Ele disse também: O usuário não lê exaustivamente, ele imprime pra ler depois [heeeeein !?!?!?].

André Matarazzo, Gringo.nu (audio)

Título: O valor da originalidade na Criação Web.

Não tem educação formal em Web. Morou no Canada e Holanda, ficou 4 anos trabalhando com sites institucionais. Ao perceber sua insatisfação com esse tipo de design pra Web, resolveu se enveredar na propaganda e entretenimento na Web.

Propaganda antiga:

Conteúdo interessante
Propaganda chata
Conteúdo interessante
Propaganda chata
Conteúdo interessante
Propaganda chata

Televisão, rádio, revista, etc.

Advertainment

A propaganda vestida de entretenimento. O contato do cliente com a marca é suave e indireto. Se há interesse, existem outros lugares para encontrar mais informações.

Sony Bravia

Milhões de bolinhas coloridas de silicone ladeira abaixo. Pra mostrar que a TV tem cores mais vivas, “like no other”. Poético.

Conteúdo não é texto + foto (já ouvi o Rapha falar isso). Conteúdo é o que as pessoas levam do contato com sua marca. Em marketing tudo é percepção.

Escolha um caminho e ataque com força, como na TV, com a idéia de “cor” eles transmitiram uma mensagem poética.

Processo Gringo

  1. Ideia – noção de budget e timeline
  2. Estrutura/Features – budget timeline
  3. Visual
  4. Produção – Flash, 3D, video, HTML, backend, sons, tagging, etc.
  5. QA (controle de qualidade)
  6. Entrega

Review do 10º Encontro Nacional de Web Design

Vamos à um resumo do 10º Encontro Nacional de Webdesign. Antes de qualquer coisa, entre na página das palestras do site oficial e leia sobre os temas e palestrantes.

Palestra 1: Software Livre e PSL-Brasil, Diego Viégas – Coordenador Geral de Modernização e Informática – Ministério das Cidades Foto do Diego Viégas
Como eu disse após a apresentação, não é exatamente fácil fazer uma palestra super excitante para falar de Software Livre e PSL-Brasil.
O maior problema, na minha opinião, foi que a projeção no telão se resumiu a texto puro e alguns gráficos. O Diego estava com um laptop rodando Debian e Gnome, deveria ter mostrado softwares ligados à Webdesign funcionando, deveria ter sido mais experimental e menos teórico.
Ele fez muito bem em não se mostrar extremista, destacando a crença da comunidade que o software proprietário não precisa desaparecer e que é possível que os dois modelos co-existam em harmonia.
A palestra foi bastante esclarecedora e cumpriu seu propósito, que era explicar afinal o que é o Software Livre.
Palestra 2: Propaganda Interativa – até onde vai a Internet?, Raphael Vasconcellos – AgênciaClick Brasília Foto do Raphael Vasconcellos
O grande momento do dia, o Rafa arrebentou! E não estou falando isso porque ele é Diretor de Criação e Planejamento da AgênciaClick, ele sempre age como nosso amigo, não teria receio em apontar defeitos em sua apresentação.
No telão foram mostrados imagens, texto, animações e, principalmente, vídeos, muitos vídeos.
Foi discutido como pode ser feita propaganda (realmente) interativa na Web, foram mostrados cases de várias agências, nacionais e internacionais, foram mostrados também cases da AgênciaClick (óbvio).
Entre outros cases da AgênciaClick foram mostrados o do Stilo Connect e o da Brasil Telecom GSM que o Fábio Assunção ligava para o celular de um amigo/amiga.
Entre outros cases de outras agências foram mostrados Subservient Chicken e Super Bonder Reality Show.
A apresentação foi descontraída e informal, como uma conversa ao pé do monitor, com certeza a melhor do dia, valeu muito mais que o valor da inscrição.
Palestra 3: Web Standards, Everaldo Bechara – iLearn Foto do Everaldo Bechara
Aí está um campo minado para fazer palestras… Tem como falar bem de código tag soup e layout baseado em tabelas? Não. Quem não conhece o assunto talvez tenha pensado: esse cara só fala bem de Web Standards e tableless, e só destrói o lindo método que eu faço meus sites a 7 anos! Que cara mais imparcial! É como eu já disse: Campo Minado!
Além da dificuldade natural do tema, o palestrante ainda dificultou, projetando texto puro e alguns poucos screenshots de páginas Web. Incrivelmente monótono.
Como foi discutido depois, faltaram comparações entre layouts e códigos de páginas tableless e não tableless, simulações de páginas Web Standard acessadas com dispositivos alternativos e instruções de montagem de páginas que seguem os padrões.
A palestra foi bastante focada em acessibilidade, tanto para portadores de necessidades especiais quanto para não portadores dessas necessidades. Mas não houve nenhum tipo de demonstração, apenas teoria (exatamente o contrário do aconselhável para o evento). Outros focos de atenção especial foram a economia do consumo da banda de transferência e universalidade dos formatos padrão, como XML e XHTML.
A palestra foi boa, pórém, poderia ter sido BEM melhor. Acho que faltou um pouco de informalidade e mais demonstrações de que os tais Padrões Web não são nada do mal.
Palestra 4: Flash, RIA, Workflow de projetos e dispositivos móveis, Vladimir Nunan – Macromedia Foto do Vladimir Nunan
Já vi algumas palestras do Vladmir e com certeza esta foi muito abaixo do nível das anteriores, ele estava num dia ruim, com certeza.
Até agora alguns que assistiram a palestra devem estar meio confusos, entre outras incongruências, ele disse que o Flash é difícil e que HTML é ruim.
Tinha um papagaio de pirata ao lado dele que foi apelidado de Catatau, ele foi apontar no telão onde estava aparecendo uma informação em um certo aplicativo que deveria ter interface intuitiva, pra quê apontar onde está algo em uma interface intuitiva? Além disso ele parou a apresentação bem no meio, para mostrar certos jogos que ele tinha feito, mas sem explicar nada, só mostrando que é possível fazer joguinhos em Flash.
No último iSeminar a melhor apresentação foi a do Vladimir, dessa vez foi a única que não foi boa, totalmente confusa. Quem o viu pela primeira vez agora deve estar com uma imagem totalmente errônea da competência dele como profissional e construtor da Web, afinal, ele é super competente e eu sei disso, mas dessa vez bateu trave e saiu pela linha de fundo.
Palestra 5: Mesa redonda com os palestrantes
A mesa redonda foi bastante produtiva e instrutiva, poderia ter durado mais tempo.
As perguntas da platéia foram bastante pertinentes e o respeito mútuo dos participantes da mesa foi exemplar, eu achei que iria voar penas, que nada, foi algo totalmente respeitoso e exemplar, por isso eu achei que deveria ter durado mais.
Destaques para o reconhecimento da importância do Flash da parte do professor Everaldo Bechara (Web Standards) e do reconhecimento do poder do HTML por parte parte do Vladimir Nunam (Flash e RIA).
Diego Viégas (Software Livre) comentou sobre o péssimo momento político que o SL está passando no Brasil, com a saída do Sérgio Amadeu do ITI.
Foi interessante também a pergunta do mesmo Diego para o Rafa: O que você acha dos bloqueios que se pode fazer aos meios de propaganda convencional na Web, como banners e pop-ups?* O Rafa discorreu sobre a filosofia da AgênciaClick de que a propaganda na Web não é só banner e pop-up e o quanto é dificil colocar informação em um espaço tão pequeno quanto os 468 x 60 pixels do fullbanner. Quando o Diego estava achando que nao ia ouvir uma resposta coerente, o Rafa fechou com a declaração do dia: Eu vou achar é bom caso isso tudo seja 100% bloqueado algum dia, vai me obrigar a buscar outros meios de chegar ao usuário para vender o produto/serviço do meu cliente.*

O pessoal da área de Interface da AgênciaClick compareceu em peso e a Arquitetura da Informação, Engenharia e Design também estavam representados, fechamos uma fileira do auditório. Encontrei muita gente legal por lá, entre eles o Newton Vagner (que me impressionou pela juventude) e o grande Fabricio Art (que já deveria ter entrado no mercado de Web faz tempo!).

Parabéns a Artecom e a todos os parceiros pela realização do evento. Eles estão ajudando a tornar o desenvolvedor de Websites um profissional mais respeitado.

* Adaptado, recuperado da memória.

Preconceito

É normal eu estar andando na rua e ouvir algum ignorante vomitar um comentário estúpido sobre “os crente”. Mais comum ainda é a eterna – e não totalmente mentirosa – comparação entre pastores e ladrões. Dolorido mesmo é estar em uma roda de amigos e ouvir ataques abertos à minha escolha, como projetos de abrir igrejas para ficarem ricos, simulações ridículas de exorcismos, comentários estúpidos por alguém estar de terno e coisas assim, vindas do meu próprio povo (às vezes me pergunto se um bando de asnos são realmente ‘meu povo’).

Até músicas existem! O Gabriel o Pensador que o diga, igreja de enganar otário é tudo igual, meu ovo pra você, manda muito mal às vezes. Filmes também, (não) veja Amarelo Manga, além de ruim é preconceituoso.

Lembro-me de algumas vezes ter visto pessoas com aparência de católicos praticantes[1] usarem o termo “protestante“. Protestante é a puta que te pariu, eu não protesto contra nada[2], sou EVANGÉLICO, com todas essas letras bonitas que você está vendo!

E é assim desde que me lembro ser gente. O pior é que sempre tenho que engolir essas atrocidades totalmente calado, como se não estivesse no lugar, o mínimo que posso dizer é que trata-se de algo revoltante.

Alguns reclamam do nosso hábito de pregar nossa crença pelos quatro cantos do mundo. Mas como iríamos fazer crescer a religião se não a espalhássemos? A Rede Globo de Televisão tenta enfiar seu ‘catolicismo-espírita‘ pela minha goela abaixo todos os dias e ninguém vem me defender, mas o pastor da Record chuta uma Aparecida de gesso e faz-se o maior escarcéu (em horário nobre!). Fodam-se, a estátua era dele, ele bota fogo se quiser. Um dos princípios do capitalismo, que foi derivado da ‘Teoria Liberal’ de John Locke, é: O direito á propriedade privada é natural do homem e foi garantido por Deus quando o Mesmo deu o Éden a Adão, ou seja, se ele comprou, é dele, o cara passa vaselina e enfia no rabo se achar que deve. Ponto[3].

Tem gente que se corta e se chicoteia todo, tem gente que vende tudo o que tem e vai morar em um mosteiro no Tibet, tem quem beije os pés de estátuas de barro, tem quem ore 5 vezes ao dia, tem quem se explode, tem quem cante mantras, tem quem cole pedrinha na testa, tem quem faça tudo isso junto, tem quem não faça coisa alguma, tem quem dê o dízimo e vá à igreja 3 vezes por semana. Difícil aceitar isso?

Se você faz piadinhas com qualquer religião, por favor, pare com isto. A partir de hoje não vou mais tolerar nenhum tipo de brincadeira ou comentário maldoso com nenhuma religião, a reação pode ser desde algumas palavras de cunho moral até minha retirada do recinto, depende do meu humor e de quem é o engraçadinho.

Mas você já ouviu aquela piada do judeu que encontrou o hindu comendo carne de porco? Há há há!

[1] Odeio ter que usar a expressão ‘católico praticante’, pra mim, católico que não vai à igreja não é católico e pronto, ‘não praticante’ é só jogada de marketing para engordar estatísticas mentirosas.

[2] Tá, eu protesto contra várias coisas, mas meus protestos não constituem uma religião.

[3] Sim, eu estou com bastante raiva no momento em que escrevo estes parágrafos.