Marco Gomes

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

Textos marcados como ‘navegador’

Workspace, um ambiente de desenvolvimento web no navegador

Workspace logo Post relâmpago e não revisado sobre um serviço que me deixou impressionado, do tipo “como ninguém pensou nisso antes?”: Workspace (péssimo nome, diga-se de passagem), a proposta é que seja um ambiente de desenvolvimento completo, acabo de testá-lo, por enquanto são editores de texto e um gerenciador de arquivos FTP. Rodando dentro do seu navegador.

É simples, diga o endereço dos seu servidores FTP, as senhas e os nomes de usuário. Os arquivos vão ser listados numa janela, clique em um deles, edite-o e salve-o, pronto, o arquivo já está em seu server, modificado como vc queria, sem upload, sem pedido para sobrescrever. A versão atual dos editores colore o texto de arquivos nas linguagens mais comuns, HTML, CSS, JavaScript, PHP entre outros.

O serviço tem muita chance de dar certo, imagine as situações em que uma coisa assim pode salvar sua vida, viagem, coisas do escritório sendo ajustadas em casa e vice-versa, alterações de texto diretamente no site sendo feitas pelo redator. Agora é esperar a coisa amadurecer, ganhar recursos, opções de compartilhamento de sites, quem sabe até editor WYSIWYG.

A maior vantagem das aplicações que rodam no navegador é não precisar baixar/configurar nada, simplesmente funciona, é lento, mas se for bem programado pode salvar vidas.

Eu não me importo com o Internet Explorer

No more IE hacks

Alguns dias atrás fiquei sabendo de uma campanha muito interessante: No more IE hacks. A campanha aconselha que você não ajuste seus trabalhos para funcionar no IE, simplesmente faça o que os Padrões Web recomendam e coloque um aviso dizendo que no IE podem ocorrer problemas inesperados.

Eu já faço isso à um tempo aqui mesmo neste blog, se você nunca acessou pelo IE, saiba que aparece um aviso no canto superior esquerdo com uma propaganda de um outro navegador que está longe de ser perfeito, mas é muito melhor e interpreta corretamente os PNG transparentes que eu uso no layout.

A página da campanha tem uma resposta à quem vem com o super engenhoso argumento: nenhum navegador é 100% compatível com os Padrões Web

Some people would argue that no browser is 100% standards compliant, that may be the case but any developer who has done cross browser testing knows that the difference between standard compliance in browsers such as Firefox/Opera and IE is equivalent to night and day.

(tradução livre) Algumas pessoas podem argumentar que nenhum navegador é 100% compatível com os Padrões Web, pode até ser mas qualquer desenvolvedor que tenha feito testes cross-browser sabe que a diferença entre compatibilidade com Padrões em navegadores como Firefox/Opera e IE são equivalentes à noite e dia.

gotstress?, minha mais recente criação, não funciona no IE 6, no IE 7 funciona perfeitamente. Isso rendeu uma discussão infinita na lista Blogosfera, segundo um personagem muito respeitado pela comunidade blogueira brasileira, minha aplicação precisa funcionar no IE 6 mesmo que meu público-alvo não use esta versão.

A campanha é boa pra mostrar que tem gente que pensa como eu: quem usa IE 6 que troque de navegador ou, na pior das hipóteses, atualize pra versão 7 que é menos pior.

Lógico que não posso tomar essa atitude drástica no meu trabalho ou em eventuais projetos comerciais que esteja envolvido, mas ligar o f***-se nas minhas aplicações “pessoais” já é um grande passo.

Como utilizar melhor sua boo-box

Já que fui eu quem programei a maior parte do produto e conheço o sistema feito minhas MP3′s, vou publicar por aqui algumas dicas de como utilizar melhor sua boo-box para ter melhores resultados.

  1. Coloque mais de uma tag, que produto é esse que não pode ser descrito por mais de uma tag?
  2. Teste suas tags, se necessário, atualize-as, o boo-box é inteligente, mas acabou de nascer e ainda está aprendendo =)
  3. Reveja seus posts com maior visitação e coloque links boo-box neles. Eu fui nos meus posts de maior visitação e coloquei link boo-box nos locais relevantes, vai que alguém decide comprar um Palm pelo meu post!
  4. Coloque palavras-chave no esquema Amazon: modelo nomeproduto marca tipo.
  5. Por enquanto, avise seu usuário que se ele quiser o item basta clicar nele para comprar com facilidade e comodidade.
  6. Não use em conjunto com HotWords, o script HotWords anula o script boo-box, acredito que o problema é com o script deles, se fosse o nosso nós pararíamos o deles e não o contrário o.O
  7. Não esqueça de colocar seu id de afiliados amazon na chamada do JavaScript.
  8. Teste seu post em todos os “navegadores platadormas alvo”.

Wallpapr

Certa noite eu perdi o sono e resolvi brincar com JavaScript + Flickr API.

O resultado é uma aplicação que não faz nada de extraordinário, mas serviu pra eu adquirir um pouco de prática com PHP + AJAX + Flickr API.

Wallpapr
Tenha sempre um papel de parede legal no seu computador.

Atualizações

  1. [2006-10-23]Motor de busca melhorado. Antes as imagens vinham de um único grupo de papéis de parede do Flickr, agora vêm de vários grupos aleatórios.
  2. [2006-10-17] Texto “about” inserido.
  3. [2006-10-16] Funcionando em qualquer navegador com suporte à JavaScript, inclusive o Internet Explorer.
  4. [2006-10-14] A busca foi implementada, agora você pode pesquisar por wallpapers dentro de um tema.

Minha experiência com um projeto Web 2.0

Wallpapr, um buscador de imagens legais para papel de parede que eu fiz por motivos educacionais, teve uma repercussão inesperada, recebendo mais de uma centena de citações ao redor do mundo, posts em árabe, japonês, alemão, russo, italiano, inglês e até idiomas que eu desconheço. Mais de 170.000 consultas e mais de 30.000 visitas de IP’s únicos. Tudo isso em pouquíssimas horas e com receita de divulgação igual a zero.

Nessa onda repentina de fama internacional, belas mulheres, carrões e dólares queimados para acender charutos, aprendi um bocado e pude provar várias teorias pessoais. Pretendo agora passar um pouco da experiência adquirida para meus fiéis leitores.

Nova Web, Web2.0, evolução da web, chame como quiser, mas o fato é: o Wallpapr não seria possível naquela Web de 1999. Flickr API, Script.aculo.us e Getting Real não existiam, as ferramentas para o AJAX (JavaScript e XML assíncrono), já existiam, mas o conceito ainda não havia sido definido. Conteúdo gerado pelo usuário era possível, mas não era comum.

Somente esta Nova Web me permitiu juntar peças de terceiros e criar, em uma noite, uma ferramenta que levaria meses caso todas as peças fossem desenvolvidas por mim.

O início

Eu estava sem sono, deitado na cama, e decidi levantar pra brincar com AJAX e Flickr API. Sentei na frente do PC e não fazia idéia do que fazer, pensei em fazer uma ferramenta que fizesse busca de fotos de músicos, desisti ao procurar pelos meus artistas favoritos e não encontrar nada, somente artistas mainstream retornavam bons resultados, eu não quero contribuir para mais divulgação do mainstream.

Procurei por papéis de parede e achei um grupo de papéis de parede com mais de 9.000 imagens, é isso, pensei, vou fazer uma ferramenta que busque as fotos deste grupo, caso dê certo, eu adiciono outros grupos na busca mais tarde.

Getting Real

Como eu já disse, o Getting Real é o KISS (Keep It Simple, Stupid) aplicado ao desenvolvimento de software para a Web. Eu tinha uma idéia e as ferramentas para implementá-la. Sem gastar tempo com gráficos de defesa de idéia ou planilhas de prospecção de quantidade de usuários eu comecei, programando.

Eu não pretendia que a aplicação tivesse visitação superior a 10 ou 20 amigos da internet, logo, não me preocupei com compatibilidade com vários navegadores nem com acessibilidade total para navegadores de voz, afinal, que cego iria procurar por papéis de parede?

Eu simplesmente encarei meu objetivo primário: Fazer um sistema de busca de certos tipos de imagens usando a Flickr API.

Pedras no caminho

Quem já fez AJAX sabe que JavaScript não lê XML de um domínio externo, por motivos de segurança o navegador só permite leitura de XML que esteja no mesmo domínio que o script. O maior problema é que eu havia esquecido disso. Perdi horas tentando ler o XML do domínio flickr.com com meu JavaScript que estava em marcogomes.com. Quando lembrei do erro trivial resolvi fazer um túnel em PHP para requisitar o XML no Flickr e trazê-lo ao meu servidor. Algumas horas depois o túnel, que utiliza a classe phpFlickr para requisitar os XML’s no Flickr, estava pronto.

O maior problema estava resolvido, eu conseguia fazer requisições ao Flickr e receber os resultados no meu JavaScript, agora era desenvolver a lógica do sistema de busca e fazer a perfumaria da aplicação.

Não vou entrar em detalhes técnicos de baixo-nível, basta dizer que tomei muita taca pra carregar e ler o XML corretamente no JavaScript, é bem diferente de Flash, mas não é mais difícil, acho até que é mais fácil. O maior problema é a recursividade, se Flash é lento, JavaScript é muito mais, ler trocentos nós em um único ciclo é muito complexo e pode travar tudo com uma facilidade incrível.

Eu não me desanimei com estes e outros problemas, afinal, eu havia decidido não dormir pra isso: me preparar para resolver problemas comuns no desenvolvimento de uma aplicação rica que utiliza AJAX.

A interface

Com a lógica pronta, hora de dar cara à aplicação. Essa ordem é inversa à pregada pelo Getting Real, este diz que você deve começar definindo a aparência visual e o comportamento das telas antes de programar a lógica.

Como minha vontade era aprender, comecei programando, só depois partindo para o design. Eu precisava de um logo legal, um nome legal, um pouco de força de vontade gasta e surgiu o nome Wallpapr, o logo, com o Web2.0 Logo Creatr, foi fácil.

Um pouco de CSS, bom senso, dicas de amigos e cópia descarada de serviços Web2.0 me levou à interface que temos hoje, uma sátira-homenagem aos serviços mais responsa que fazem parte da minha vida. Fontes sem serifa com espaçamento menor, cores contrastantes do Flickr, amarelo 37signals na caixa de busca, bordas arredondadas do Spiffy Corners e pronto, temos um serviço bem estereotipado.

A parte mais sensível é a usabilidade, arquitetura da informação/design de interface é uma área que muito me encanta. Tentei manter a tela principal o mais simples possível, usando um linguagem e elementos de interação que podem se enquadrar na definição de interface humana, a aplicação praticamente conversa com o usuário com frases simples, porém sinceras, sem confundir o usuário com termos complexos e sem sentido pra ele.

Se o script está com um erro no navegador X, é melhor avisar ao usuário do que fingir que está tudo bem, se vez ou outra a aplicação entra em loop infinito e trava, nada mais humilde que avisar isso e pedir um pouco de paciência.

Caso o usuário não digite nada, simplesmente clique em um dos botões, a aplicação traz as imagens mais recentes de um grupo qualquer. Caso ele digite algo, a “chamada” dos botões se modifica para uma frase bastante amigável que traz a frase do usuário, não deixando dúvidas sobre o que acontecerá ao clicar em um dos botões. Caso não haja nenhum resultado para o termo escolhido, a aplicação pede desculpas pela incompetência, explicando que foi feita rapidamente e pedindo que o usuário a ajude sendo menos específico.

Na data de seu lançamento a aplicação não fazia absolutamente NADA que uma busca direta no grupo não fizesse. Mas eu não a havia feito pra ser útil pra terceiros, havia feito pra aprender, lembra? Agora ela busca em vários grupos, trazendo resultados mais completos que uma busca num único grupo, sendo uma aplicação realmente útil pra qualquer um que queira papéis de parede sobre certo tema.

Mais Getting Real

O núcleo da aplicação foi feito em uma noite, porém, ela foi tualizada nos dias posteriores.

Fiz uma to-do list para a aplicação e conforme eu ia resolvendo os problemas, ia atualizando a aplicação que estava na Web. Em certo momento eu sequer tinha uma versão de testes, fazia as alterações direto na versão de homologação, coisa bem amadora, mas eu não prometi estabilidade à ninguém.

Caso o layout não ficasse exatamente do jeito que eu queria em certo navegador, ou o script de busca trabalhasse um pouco mais lento que o esperado, eu não entrava em desespero, é melhor ter algo funcionando “não tão bem” do que retirar o serviço inteiro do ar. E no final das contas, a versão defeituosa só iria ficar no ar algumas horas, em breve eu resolveria o problema e colocaria a nova versão no ar.

Cada função JavaScript executa apenas uma ação simples, facilitando a manutenção do sistema como um todo e não engessando o fluxo dos dados. Quando eu precisei alterar o sistema de buscas para buscar não só em um, mas em vários grupos, não foi necessário alterar o script todo, apenas escrever umas novas funções e alterar o fluxo de execução da busca. Bem melhor que escrever tudo em 3 funções, como é normal vermos por aí.

No que deu?

Como já falei no início do texto, tive mais acessos do que imaginava, o que me gerou problemas de transferência. O CrisDias liberou mais banda pro meu site nos servers Vilago (que é o provedor com o melhor suporte do Universo inteiro), eu dediquei um tempinho do dia para responder às solicitações de usuários e buscar os comentários sobre o serviço na Web.

Sei que a aplicação não tem mais pra onde ir, não há muito mais o que incrementar no serviço e eu também não quero gastar muito tempo com algo que está funcionando perfeitamente, tenho medo da aplicação virar um paquiderme inutilizável.