Semana passada participei de um curso sobre HTML5 ministrado pela w3c Brasil. Nesse curso o Elcio Ferreira foi o instrutor, eu fiquei com uma duvida e fiz uma pergunta para ele sobre a necessidade de incluir a extensão do arquivo na tag <video> para que o mesmo funcione no firefox. Ele me mostrou uma forma utilizando PHP mas infelizmente não consegui obter o codigo.
Os servidores web, quando servem um arquivo, enviam ao navegador a informação de tipo de conteúdo. O header enviado do servidor, para um arquivo Ogg Vorbis, deve ser:
Content-type: application/ogg
Se o servidor não enviar esse header, o vídeo não vai tocar no Firefox. O Apache sabe fazer sozinho, basta que esteja configurado para isso. No Ubuntu, por exemplo, ele já vem configurado para servir ogg.
A saída de scripts PHP é servida com outro tipo de conteúdo. Geralmente “text/html”. Se você serve seu vídeo do PHP, precisa enviar um header no início do script avisando o navegador que esse conteúdo é vídeo. Você pode fazer:
<?php
header('Content-type: application/ogg');
?>
Já se você serve os vídeos como arquivos estáticos, não deve usar PHP para processá-los só para que sejam servidor com o tipo correto. O jeito certo é configurar corretamente o servidor. Se for um hosting compartilhado, eu tentaria um chamado ao suporte pedindo para que configurem isso corretamente antes de fazer com PHP. Ou estudaria mudar de hosting
On 15 de julho de 2010,
in Sem categoria,
by elcio
Durante esta semana estive no escritório do W3C Brasil, ministrando um treinamento de HTML5. Para encerrar o treinamento, o W3C organizou uma edição do Café com Browser.
Nós e o pessoal da Agência Click vamos mostrar um pouco do que já estamos fazendo com HTML5, e você pode assistir ao streaming ao vivo, cujo link será disponibilizado na hora.
On 30 de março de 2010,
in Sem categoria,
by elcio
Fiz essa versão do clássico joguinho Lights Off:
O jogo é simples, e o objetivo é apenas apagar todas as luzes. Por curiosidade, fiz também o algoritmo que resolve o jogo:
O desafio está lançado. O primeiro que colocar nos comentários a URL de uma página com um botão “solve” como o meu ganha uma entrada para o Codeshow. Importante:
Vale o primeiro comentário. Mesmo que você comente de madrugada e eu demore a moderar, ganha quem comentar primeiro.
O solucionador tem que ser escrito em Javascript. Você pode copiar minha versão do jogo e desenvolver em cima dela.
Não pode resolver na base da tentativa e erro. Tem que ser uma boa solução, que resolva qualquer estado do tabuleiro em 20 passos ou menos.
Divirtam-se!
(O pessoal da Visie, se quiser participar, pode. Só não vai ganhar nada )
Tem duas coisas que me incomodam nessa abordagem. A primeira é essa mania que muita gente tem, particularmente programadores PHP, de tratar UTF-8 como um “código alienígena” e ISO-8859-1 como normal e padrão. Alô, ISO-8859-1 é usado por parte do mundo. Não dá para escrever hebraico, mandarim, japonês, árabe ou russo com isso. ISO-8859-1 é uma das diversas tabelas de caracteres que existem mundo afora. E Unicode é a única maneira sensata de escrever um sistema que possa ser usado aqui e na China.
A segunda coisa que me incomoda é a quantidade de código. Não testei profundamente, mas tenho a impressão de que o código abaixo resolve o problema:
function utf8_decode(t){
return decodeURIComponent(escape(t))
}
On 28 de agosto de 2009,
in Sem categoria,
by elcio
Discussões sobre o melhor sistema operacional, o melhor navegador ou a melhor linguagem de programação tendem a entrar em loop infinito. Cada um dos lados parece achar o outro um completo idiota por não se convencer de suas opiniões.
Semana passada troquei algumas mensagens com o René de Paula que me fizeram pensar bastante sobre o assunto. O René provavelmente não me conhece, mas eu tenho aprendido muito com ele nos últimos anos, principalmente em seu podcast, o Roda e Avisa. E esse post não é um desabafo “estou chateadinho”. Estou citando o nome do René porque a conversa se deu no Twitter, ou seja, em público, e realmente me fez pensar.
O René recomendou esse artigo da ZDNet, analisando um estudo de segurança dos navegadores web. O artigo começa apresentando os resultados do estudo, em que o Internet Explorer ganha de lavada, e segue explicando porque, na opinião do autor, o estudo patrocinado pela Microsoft é tendencioso e irrelevante.
Respondi ao René dizendo que concordava com o artigo que ele havia indicado, que realmente o estudo era tendencioso. E usei a frase “o rei está nu.” Para mim, a crônica da roupa nova do rei é uma excelente metáfora para a situação. Ele me respondeu que havia visto meu blog e que achava que havia um “viés oculto” em tudo o que eu dizia. Em seguida twittou sobre o fato de as pessoas tratarem essas discussões como se fossem sobre times de futebol. Isso me fez pensar um bocado.
Eu gosto de, numa discussão, ouvir o outro lado. Também gosto muito de lógica. Se tem uma coisa que eu vou defender numa discussão, mais do que meu time de futebol, é o bom uso da lógica. Tento nunca ser irrazoável. Sei que todos somos tendenciosos, mas sempre tento ser mais imparcial que a média.
Talvez seja o fato de a discussão ter acontecido no Twitter, meio pouco propício, mas confesso que fiquei muito preocupado com a impressão que o René teve. Quem me conhece, sabe, trabalho com Linux, Windows ou Mac, sem rabo preso, escolhendo sempre o jeito mais simples de resolver cada problema.
Cada cabeça, uma sentença
Em primeiro lugar, não há um sistema operacional “melhor” e outro “pior”. Há um “melhor para você”. O fato de aquele seu amigo usuário de Windows não ter enxergado ainda que o Linux é o melhor sistema operacional do mundo talvez seja porque, para o perfil de uso dele, o Windows seja realmente o melhor sistema operacional.
Dificilmente eu tento convencer alguém a usar exclusivamente Linux. Sempre tento convencer as pessoas a experimentar. Se o sujeito me diz que é um heavy gamer, por exemplo, recomendo o uso de Windows. Sei, o Wine está muito evoluído e tal, mas se ele tem dinheiro para pagar as licenças e pode rodar a versão mais nova de cada jogo no ambiente em que ele foi feito para rodar, por que complicar?
Sim, não me esqueci, para certos perfis de uso, Mac OS X também é um sistema fantástico. Estou quase comprando um para minha mulher.
Existem, porém, padrões absolutos
O fato de não existir uma solução “bala de prata” e a paixão que costuma cercar essas discussões têm levado muita gente, principalmente programadores, a uma posição morna tão irrazoável quanto os extremos. É comum ouvir frases como “a melhor linguagem é aquele com a qual você sabe trabalhar” ou “a melhor ferramenta é a que resolve seu problema.”
Acredito sim que há casos de uso os mais variados. Mas, dentro de determinado caso de uso, há métricas objetivas que você pode usar para dizer o que é melhor. Falando em linguagem de programação, por exemplo, a melhor não é aquela que faz você se “sentir bem”. A não ser que programar para você seja só um hobby, a melhor é aquela que vai te permitir resolver mais rápido o problema do cliente, com a qualidade e a performance necessárias.
Dado um determinado problema do cliente, e uma determinada métrica de performance, deve ser possível apontar a melhor linguagem para essa situação.
Que problema seu software se propõe a resolver?
Se você é desenvolvedor de software, é importante entender isso. Você dificilmente vai encontrar uma oportunidade de desenvolver um produto que é o melhor para todo mundo. Não há unanimidades.
Você pode desenvolver algo que é o melhor para a maioria, pode achar uma minoria endinheirada, ou pode desenvolver algo legal para você mesmo e torcer para que haja gente parecido com você lá fora.
Mas, se você tentar ouvir todas as sugestões que receber e superar os concorrentes em absolutamente todos os perfis de uso, nunca vai terminar de desenvolver.
Mente aberta
Na Visie hoje temos 7 máquinas Windows, 6 Linux e 3 Macs. Sem contar as VMs, o ambiente de testes, e os servidores onde estão hospedadas as aplicações. Desenvolvedor, abra sua mente. Aprenda uma linguagem de programação nova, experimente outro sistema operacional, teste outra solução. Você vai aprender muito.
Aprenda Python, Ruby, Haskell ou Scala. Isso vai tornar você um melhor programador PHP, Java ou .Net. Desenvolva um projeto com uma banco de dados não relacional (estou usando MongoDB em um projeto.) Se você ama WordPress, faça alguma coisa com Joomla, e vice-versa. Tente outro framework, outro editor, outro jeito.
Sobre navegadores
No dia seguinte a essa conversa estive no escritório do W3C Brasil, assistindo ao Café com Browser com o pessoal do Internet Explorer.
Eles passaram boa parte do tempo falando sobre os recursos do navegador para o usuário final. Coisas como abas (oh!) e favoritos mais legais, webclips, processos independentes em cada aba, melhorias de performance e segurança. Tudo muito interessante mas, eu acho, apresentado para o público errado. Estávamos dentro do W3C, afinal de contas. Queríamos saber sobre as melhorias para o desenvolvedor.
Ao final, a palestra sobre melhorias para o desenvolvedor foi, para mim, parte surpreendente, parte decepcionante. Me surpreendi principalmente pela reação dos desenvolvedores no Twitter. Muita gente não conhecia as developer tools do IE8, ou os modos de compatibilidade, por exemplo. Quando foi apresentado o querySelector, muita gente twittou revoltada, porque a Microsoft estava “inventando um novo jeito proprietário de fazer as coisas”. Gente, o querySelector é uma recomendação do W3C (está em Working Draft, mas está lá.)
A parte decepcionante, expressei em minha pergunta:
Em suma, não tenho ódio da Microsoft ou de quem quer que seja. Não quero que o Internet Explorer suma do mapa. Ainda tenho projetos em ASP, VB e .Net, e sou feliz com isso. Só quero poder desenvolver uma vez só minhas aplicações. Quero não ter que cobrar do cliente pelo custo de fazê-la funcionar no Internet Explorer. Quero entregar mais rápido aplicações melhores, mais estáveis, com menos código.
On 26 de fevereiro de 2009,
in Sem categoria,
by elcio
A convite do Dulcetti, resolvi aderir à campanha “morte ao IE6″. Incluí o script do iMasters neste blog, e estou indicando quatro desenvolvedores para participar da brincadeira, convidando mais quatro cada um e assim por diante:
On 26 de dezembro de 2008,
in Sem categoria,
by elcio
Resolvi experimentar um pouco a Twitter API. É linda, do jeito que toda API deveria ser. É REST, muito fácil de entender e colocar para funcionar, e devolve dados em XML, JSON, RSS e ATOM.
Essa simplicidade permite interagir com a API usando ferramentas simples da linha de comando do Unix, como o wget e a cURL. Para nossos exemplos, vamos usar cURL. Se você usa Ubuntu, antes de começar faça:
sudo apt-get install curl
Para fazer um simples post, por exemplo, você pode digitar, em seu terminal:
curl -u seu_username:sua_senha -d status="Twittando do terminal. Aprendi com o Elcio: http://blog.elcio.com.br/brincando-com-a-api-do-twitter/" http://twitter.com/statuses/update.json
É isso mesmo, meninos e meninas, é só um post com autenticação, mais nada. RESTful, simples e elegante, deixar qualquer SOAP no chinelo. Inspirador para qualquer um que precise projetar uma API. Isso retorna dados em JSON. Se você quiser os mesmos dados em XML, ATOM ou RSS, basta mudar a extensão na url.
Agora vamos automatizar isso. Eu criei um arquivo /usr/local/bin/twitter com o seguinte conteúdo:
Naturalmente, criei o arquivo como root e dei permissão de execução para todos os usuários. Agora, no diretório de cada usuário, basta criar um arquivo .twitter com o seguinte conteúdo:
user=seu_username
password=sua_senha
Pronto, tendo feito isso, qualquer usuário que tenha o arquivo .twitter em seu home pode twittar do terminal com:
twitter "Twittando do terminal, aprendi com o Elcio: http://blog.elcio.com.br/brincando-com-a-api-do-twitter/"
Simples e indolor, agora você pode automatizar suas twittadas com shell script. Pode, por exemplo, twittar toda vez que seu servidor baleiar, ou agendar twits com cron.
Search API
A Search API também é espetacularmente simples, dê uma olhada. Fiz a UPBox usando a Twitter Search API, por exemplo, com 22 linhas de código.
Olha que legal, o Thiago vai dar presentes às pessoas que participarem de sua promoção, e para o primeiro colocado ele escolheu dar como presente um curso online de acessibilidade da Visie. Lisonjeado.
Parabéns Thiago pelo primeiro aniversário do Profissão Web.
É um site para falar sobre Javascript, Ajax, CSS, XHTML. Mas não é um site para opinião e recomendações, é um lugar para você ler sobre código, ler código, e colaborar. O site é aberto ao cadastro e colaboração dos usuários, embora todos os artigos devam ser aprovados pelos editores. Entenda a política do site.
Se você já possui um blog ou site sobre o assunto, pode publicar seus artigos em seu próprio site e apenas um link com um breve comentário no ClientSide. Só não faça isso com cada um dos seus posts, apenas com os melhores. Não é um agregador. Se fosse, eu teria feito para funcionar sozinho. É um site onde você vai ler conteúdo especial, focado no assunto, que foi selecionado por seres humanos de um jeito que as máquinas (ainda) não sabem fazer.
On 13 de novembro de 2007,
in Sem categoria,
by elcio
Momento Jabá:
Oficina de WordPress Visie: WordPress é a mais poderosa ferramenta de blogging da atualidade. É a ferramenta usada em todos os blogs aqui da Visie, e em boa parte dos blogs mais populares do Brasil e do mundo. Extremamente simples de usar, facilmente configurável e poderosamente extensível, WordPress ainda por cima é open source e completamente gratuito.
WordPress é a ferramenta por trás desse blog. A idéia da oficina nasceu numa conversa com o Juliano Spyer, no Blogcamp. Teremos um dia para quem quer aprender o básico de WordPress para, por exemplo, criar seu próprio blog, um dia para designers, falando de temas para WordPress e um dia para programadores em que vamos construir plugins e ferramentas que se integrem ao WordPress.
Quanta gente, ao pensar na idéia de migrar de WYSIWYG para edição de código, se pergunta: “mas não vai ser improdutivo se eu tiver que escrever tudo à mão?”
Nosso amigo Michael dá uma boa ajuda para quem está com essa dúvida em seu vídeo “Macros para Produtividade”.
Claro, isso é só o começo. Mas é um excelente começo. E quanta gente eu vejo por aí que não sabe o básico!
A versão mais recente do navegador Firefox, a 2.0.0.5, possui uma falha em seu gerenciador de senhas que pode permitir o acesso a elas por sites maliciosos. O problema só se manifesta se o Javascript e o gerenciador de senhas estiverem acionados – o que é o padrão. Conforme o site Linux.com, a falha pode ser explorada com truques bastante antigos como o cross-site scripting, pequeno programa em um site que manipula objetos na máquina do usuário ou em outro site.
Quem tomar tempo para ler o anúncio da falha vai entender melhor. A falha não é no Password Manager. É uma falha de script-injection e XSS (cross-site scripting). Vou explicar em detalhes: se você tem um site em que os usuários inserem conteúdo, deve tomar cuidado para que eles não insiram javascript no conteúdo. Por exemplo, se os usuários cadastram uma descrição pessoal em seus perfis, e você simplesmente imprime esta descrição, corre sérios riscos. Alguém pode escrever, em sua descrição, algo como:
Naturalmente, isso é muito perigoso! Não basta bloquear a tag script, você precisa se certificar de que o usuário não insira javascript na página de forma alguma. Por exemplo:
Ou seja, é sua obrigação se certificar de que seus usuários não podem inserir javascript em nenhuma página de seu site. Isso porque o modelo de segurança do javascript está baseado na origem do script. Scripts numa página podem acessar qualquer coisa dentro daquele domínio. Então, se você permite que seus usuários usem a técnica acima, eles podem fazer com que os usuários que acessarem o perfil/post/comentário malicioso:
Tenham suas contas canceladas. Basta que o script crie um iframe oculto, carregue a URL de cancelamento de conta nele, aguarde alguns segundos e clique no botão “Sim, eu tenho certeza”
Tenham suas senhas modificadas. De novo, no frame oculto. Carregando o formulário de mudança de senha, preenchendo e submetendo. Se não houver validação de referer, isso pode ser feito inclusive sem o iframe, usando o objeto XMLHTTPRequest (via Ajax).
Enviem mensagens para todos os usuários do site, transfira todas as suas comunidades para um determinado perfil, veja o site em cor de rosa com uma foto do Reginaldo Rossi no logo e o que mais o agressor quiser.
Tudo o que eu descrevi acima funciona em qualquer navegador. Não se trata de uma falha no navegador, mas de uma falha no site. Bom, o que o pessoal da heise descobriu é que um agressor pode criar um formulário de login falso, e se você salvou a senha daquele site o Firefox, o Safari e o Konqueror vão preencher o formulário automaticamente. E esse formulário pode ser lido pelo script do agressor. Ora, o sujeito pode virar o site de ponta cabeça, claro que também pode acessar o formulário de login! E isso só não funciona no IE porque ele não tem um password manager
Ou seja, a falha não é do Firefox, mas do site, que permite acesso irrestrito ao atacante. É um site em que você não deveria confiar, que você não deveria acessar, ou pelo menos não deveria acessar com a mesma senha do seu cartão do banco. O fato de um navegador não ter password manager não vai tornar o site mais seguro. A conclusão a que chega o pessoal da heise:
Da perspectiva dos usuários, significa que eles não deveriam confiar suas senhas ao password manager em sites que permitem aos usuários criar suas próprias páginas contendo scripts.
Grande coisa! Você não deveria confiar, de maneira nenhuma, em sites que permitem aos usuários criar suas próprias páginas contendo scripts. Não é só seu password manager que está em risco, e não importa que navegador você está usando.
Algumas das frases de busca que mais traziam gente a este site eram:
Voe Gol
voegol
voe-gol
Desde que eu escrevi o artigo VoeGol se você conseguir, choveram paraquedistas neste blog. Gente que encontrava meu artigo procurando por voe gol no Google, geralmente associando com palavras como:
passagem
viagem
avião
promoção
E mesmo gente que chegou buscando frases engraçadas, como: “eu quero ir para porto seguro de avião pela gol” (o buscador é praticamente um gênio da lâmpada!)
Pois não é que os visitantes desse artigo simplesmente desapareceram? O número de gente que chegou por essa busca diminui dez vezes no último mês. Fiz uma busca por “voe gol” e descobri porquê. Minha página era a segunda, logo depois da página da própria Gol nessa busca. Agora não é mais. Isso mostra como é importante estar acima da dobra. Aquela posição, entre o segundo e o terceiro, significa uma diferença de cliques na ordem de dez vezes.
Essa página do Submarino é a segunda colocada hoje. Pois bem, veja esse trecho da página:
Aqui você encontra: Gol, Voegol, Voe Gol, Gol Linhas Aereas, www.voegol.com.br, Linhas Aéreas Gol, Gol Passagens Aereas, Gol Passagens, Gol Linhas, Voegol com br, Gol Aerea, Site da Gol, Empresa Aerea Gol, Gol Passagens Aéreas. Pode Imaginar. Sua Viagem começa aqui!
Este texto, naturalmente, foi escrito para o buscador. Talvez eles tenham chegado à conclusão de que o único usuário que de fato lê seus textos é o Google, e resolveram escrever só para ele mesmo. Já tinha visto muitos sites assim, mas geralmente feitos por pessoas físicas ou empresas minúsculas. O fato de o Submarino estar adotando esse tipo de SEO diz alguma coisa? O que você acha?
Dashboard, Exposè, estilo Aqua, tudo já foi copiado no elegante Mac OS X. Mas a marca registrada do sistema ainda é o Dock. Há uma porção de cópias interessantes para o Dock em diversos ambientes. Mas, com javascript e CSS, eu nunca tinha visto uma razoável. Até que vi essa aqui. Veja esse Dock rodando nesse exemplo.
Muito bom. Tanto o código quanto o resultado visual.
Ah, se você tiver um tempinho para estudar o código, vai passar a odiar um pouquinho mais o Internet Explorer
No encontro lá em Porto Alegre mais de 300 pessoas. Foi muito divertido.
Amanhã é a edição do evento em Curitiba, e como nos outros, vou estar apresentando a palestra “Microformats, a web semântica com letra minúscula”. Você pode se inscrever direto no local (Estação 21 Convention Center.)
E a brincadeira continua. Se você for e tiver condições, leve uma extensão para me emprestar. Uma extensão elétrica comum, com tomada de pinos redondos, qualquer uma serve.
Vou estar no Encontro de Desenvolvedores Locaweb este ano, apresentando a palestra “Microformats, a web semântica com letra minúscula”. É na próxima quarta-feira, dia 25, em Porto Alegre, 10 de maio em Curitiba, 30 de maio no Rio de Janeiro e 12 de junho aqui em São Paulo.
Se você for e tiver condições, leve uma extensão para que possamos fazer uma brincadeira lá. Uma extensão elétrica comum, com tomada de pinos redondos, qualquer uma serve.
On 30 de março de 2007,
in Sem categoria,
by elcio
Depois de muito confabular, chegamos a uma conclusão a respeito do Desafio dos 4KB.
O vencedor é o Michael Humberto Castillo, com seu joguinho. Demoramos a decidir porque o joguinho tem uns bugs, mas foi o mais impressionante que foi enviado. Como o critério, segundo o anúncio da promoção, era a quantidade de barulho produzida pela reação emocionada do pessoal aqui, não conseguimos deixar de premiar o Humberto, apesar dos pequenos bugs. Parabéns Humberto! Aguarde nosso contato.
Parabéns também a todos os outros participantes! Foi muito divertido.
Momento Jabá: Quanta coisa você consegue fazer com apenas 4KB?
Crie uma página que faça algo impressionante com apenas 4KB de código. Pode usar HTML válido ou inválido, XML, Javascript, CSS e o que mais você quiser, desde que esteja tudo em uma única página. Nada de Flash, imagens externas, scripts externos ou Ajax. O resultado pode ser o que você quiser, desde que seja impressionante. Pode também funcionar apenas no Firefox, se você preferir. Afinal, você vai programar só por diversão.
Inclua a frase “Visie, ensinando os melhores”, publique em algum lugar e envie o link para a gente. Vamos mostrar para o pessoal da Visie e ouvir o “Uau!” da galera. A página que conseguir o maior número de decibéis na reação dos espectadores, a mais impressionante, a mais surpreendente, vai ganhar um curso online de Javascript Crossbrowser da Visie, para você ou para doar para alguém.
Para que todos possamos ver os trabalhos, deixe um comentário aqui com o link para o seu. Você tem até sexta-feira, às 11h da manhã para enviar seus impressionantes 4KB de código. Vamos começar a avaliação na sexta-feira ao meio-dia, e a hora em que vai sair o resultado depende da quantidade de participantes.
Vamos mostrar para essepessoal boboca por aí que programar é muito mais divertido que ficar escrevendo frasezinhas de efeito.
