Posts de April, 2010

[Tiago Peczenyj] Como saber se uma musica parou de tocar em html 5

Thursday, April 29th, 2010

Anteriormente vimos como descobrir que uma musica parou de tocar em ActionScript 3. Hoje em dia temos uma quantidade interessante de browsers que suportam alguma coisa de html 5 (safari, chrome, firefox…), portanto nada mais justo que analisar também esta solução.

Vejamos como tocar o nosso jazz.mp3

<audio id="mp3" src="jazz.mp3" type="audio/mpeg" controls/>

Apenas esta tag vai gerar um pequeno player com controles customizados pelo browser. E como saber que a musica parou? Basta escutar pelo evento ended

var mp3 = document.getElementById('mp3');
 
mp3.addEventListener('ended', function(){
	alert("fim");
});

Para customizar os controles basta omitir o atributo controls na tag audio e usar os métodos play e pause, por exemplo.

Um bom exemplo pode ser encontrado aqui:
http://ajaxian.com/archives/html5-media-support-video-and-audio-tags-and-scriptability

E documentação sobre html 5 vc encontra aqui:
http://www.w3schools.com/html5/html5_reference.asp

A tag video segue a mesma idéia, mas será assunto para um próximo post.

[Tiago Peczenyj] Como saber se uma musica parou de tocar em html 5

Thursday, April 29th, 2010

Anteriormente vimos como descobrir que uma musica parou de tocar em ActionScript 3. Hoje em dia temos uma quantidade interessante de browsers que suportam alguma coisa de html 5 (safari, chrome, firefox…), portanto nada mais justo que analisar também esta solução.

Vejamos como tocar o nosso jazz.mp3

<audio id="mp3" src="jazz.mp3" type="audio/mpeg" controls/>

Apenas esta tag vai gerar um pequeno player com controles customizados pelo browser. E como saber que a musica parou? Basta escutar pelo evento ended

var mp3 = document.getElementById('mp3');
 
mp3.addEventListener('ended', function(){
	alert("fim");
});

Para customizar os controles basta omitir o atributo controls na tag audio e usar os métodos play e pause, por exemplo.

Um bom exemplo pode ser encontrado aqui:
http://ajaxian.com/archives/html5-media-support-video-and-audio-tags-and-scriptability

E documentação sobre html 5 vc encontra aqui:
http://www.w3schools.com/html5/html5_reference.asp

A tag video segue a mesma idéia, mas será assunto para um próximo post.

[Tiago Peczenyj] Como saber que uma musica acabou em actionscript

Saturday, April 24th, 2010

Para fazer um tocador de mp3, por exemplo, em actionscript 3, basta vc criar uma instância da classe Sound e invocar os métodos load e play para carregar o arquivo e toca-lo, respectivamente.

Porém como saber que a musica acabou? A classe sound possui um listener para o evento COMPLETE porém isto é para completar o donwload da musica, não o final da mesma. E ai, comofas/

Simples: o método play retorna uma instância SoundChannel que, por sua vez, possui um listener para o evento SOUND_COMPLETE, logo bastaria fazer

var snd:Sound = new Sound();
snd.load(new URLRequest("jazz.mp3"));
var channel:SoundChannel = snd.play();
channel.addEventListener(Event.SOUND_COMPLETE,
      soundCompleteHandler);
 
private function soundCompleteHandler(e:Event):void{
  /* insira aqui o que deve fazer quando a musica acabar */
}

[Tiago Peczenyj] Como saber que uma musica acabou em actionscript

Saturday, April 24th, 2010

Para fazer um tocador de mp3, por exemplo, em actionscript 3, basta vc criar uma instância da classe Sound e invocar os métodos load e play para carregar o arquivo e toca-lo, respectivamente.

Porém como saber que a musica acabou? A classe sound possui um listener para o evento COMPLETE porém isto é para completar o donwload da musica, não o final da mesma. E ai, comofas/

Simples: o método play retorna uma instância SoundChannel que, por sua vez, possui um listener para o evento SOUND_COMPLETE, logo bastaria fazer

var snd:Sound = new Sound();
snd.load(new URLRequest("jazz.mp3"));
var channel:SoundChannel = snd.play();
channel.addEventListener(Event.SOUND_COMPLETE,
      soundCompleteHandler);
 
private function soundCompleteHandler(e:Event):void{
  /* insira aqui o que deve fazer quando a musica acabar */
}

[Cristiano Casado] Youtube e as respostas para as dúvidas

Sunday, April 18th, 2010

Youtube resolveu com criatividade a questão de responder dúvidas de seus usuários, sem envolver humanos em callcenters com processos pesados e demora em atendimento. Adquiriu a solução promissora de busca social Aardvark por $50 milhões. O serviço permite a apresentação de uma questão que é respondida imediatamente por outros usuários na rede. E logo após a aquisição, já é possível ver o Aardvark sendo utilizado para suporte nas páginas de ajuda do Youtube.
Na página de ajuda é possível ver um link com a mensagem “give Aardvark a try”.

Aardvark link

Com o clique no link, é aberta a página de questões do Aardark (no meu caso eu já tinha uma conta no serviço), com o label “Questions about YouTube”.  No teste a questão “Quanto tempo é necessário para processar um vídeo” foi respondida em 10 minutos com um link para a página Video processing time”.

[Cristiano Casado] Youtube testa novo player

Sunday, April 18th, 2010

Após o desenvolvimento, o Youtube iniciou os testes de um novo player de vídeo com controles mais elegantes, modificações na barra de progresso do vídeo e no controle de volume. O novo player está mais clean e funcional.  Ocorre um “fade out” de alguns controles quando o usuário não interfere no player, evitando distração.  A barra de controle do volume neste player é horizontal.

O vídeo mostra o novo player sendo testado pelo pessoal do Youtube.

[Cristiano Casado] Fisl 2010 em julho

Wednesday, April 14th, 2010

Foram divulgadas pelos organizadores as datas para a 11ª edição do Fórum Internacional de Software Livre (FISL).

“A 11ª edição do Fórum Internacional Software Livre (fisl11) vai acontecer entre os dias 21 e 24 de julho de 2010, no Centro de Eventos da Pontifícia Universidade Católica do Rio Grande do Sul (PUC-RS).”

As datas para envio dos trabalhos, palestras, inscrições, valores e outras informações não foram ainda divulgadas.

[Victor Pantoja] Windows 95 no iPad

Tuesday, April 13th, 2010

Hackers russos instalam Windows 95 no iPad

[Cristiano Casado] Fix para problema com bateria no iPhone

Friday, April 9th, 2010

Tem um iPhone 3G ou 3GS com firmware 3.1.3 e percebeu uma redução considerável na autonomia da bateria do aparelho após a atualização do software ?

Siga o procedimento abaixo, fornecido pela própria Apple e obtido no fórum de suporte:

(1) Connnect to iTunes.
(2) Make sure your iPhone is backed up.
(3) Under the Summary tab, select Restore (to the original settings)
(4) Choose the option that treats the phone as a new device (do not backup)
(5) Manually resync all your data tab by tab.
(6) Reconnect all your e-mail accounts. (If you use Exchange, be sure you copy down your Server and Domain settings before you do the restore).

O saldo do procedimento é o carregamento da bateria após 52 horas desde a última carga.

[Guilherme Cirne] 7 Meses de Time Beta: Um Balanço

Wednesday, April 7th, 2010

Já se vão 7 meses que estou no Time Beta na Globo.com e vou aproveitar a oportunidade para fazer um balanço de como tem sido até aqui.  O que estamos fazendo de interessante, o que aprendemos, o que podemos melhorar, etc. Mas antes, um disclaimer: as opiniões aqui são minhas e não necessariamente refletem a opinião do time como um todo. No entanto, acredito que o time concorda com tudo que está escrito aqui.

Nesses 7 meses trabalhamos no Baixatudo, o site de downloads da Globo.com que já existia há algum tempo. Já no primeiro mês colocamos no ar uma nova versão, que foi sendo evoluída e refinada até chegar no que temos hoje.

Infra

Um dos pontos que acredito que estamos bem é na infraestrutura do projeto. Nosso time é 100% responsável por todas as questões de infra. Provisionamento de máquinas, instalação de SO, configuração de servidores de cache, de aplicação, de banco de dados, de busca, balanceamento de carga, monitoração, tudo é nossa responsabilidade. Por isso mesmo, praticamente toda a administração da nossa infra é automatizada. O grande benefício disso é que conseguimos mudar a arquitetura da aplicação, atualizar versões, mexer nas configurações, etc., com bastante segurança e agilidade. O assunto é bastante extenso e interessante e certamente merece um outro post detalhando melhor como funciona nossa infra.

Agile UX

Outro ponto que acredito que estamos bem é na questão de Agile UX, ou seja, como integrar UX com desenvolvimento ágil. É um assunto que pessoalmente me interessa muito e acredito que nesse time chegamos num ponto bastante positivo. Esse assunto também merece um post bem detalhado que pretendo publicar em breve. Mas basicamente, o que acontece é que tentamos garantir 2 coisas.

Uma é que o time esteja trabalhando junto na mesma funcionalidade. Enquanto o designer desenha as interfaces/fluxos/interações/variações de componentes, os outros membros do time já trabalham no seu desenvolvimento. A comunicação é rica e constante. Todo mundo dá palpite sobre UX e todo mundo desenvolve, inclusive o próprio designer que contribui com o html e css.

A outra coisa é que no final de cada iteração a gente tem uma funcionalidade tecnicamente pronta. Muitas vezes ela não está boa o suficiente para ser disponibilizada para o usuário final mas funciona do ponto de vista técnico. É em cima disso que a gente colhe feedback para refiná-la nas iterações seguintes e não em cima de telas ou outros artefatos não funcionais.

Testes A/B

Começamos a usar o Google Website Optimizer para fazer testes A/B e estamos empolgados com os resultados obtidos. O objetivo é evitar tomar decisões de UX e de produto baseadas exclusivamente em achismos. Queremos dados para ajudar nas nossas decisões. Até aqui fizemos 2 testes.

O primeiro foi para escolher o melhor texto no botão de download de um software. Inicialmente esse texto era ‘download’. Criamos uma variação com o texto ‘baixar’. O resultado foi que a segunda opção tinha uma conversão maior e por isso é ela que está no ar até hoje.

No segundo, experimentamos uma variação nos thumbs que consistia em exibir o número de downloads em cima do thumb. Uma alteração simples e que todos concordavam que deixava o produto mais bonito. Mas a conversão nesse caso era bem pior. Os usuários clicavam menos na variação que tinha os números de downloads. Por isso, essa mudança não foi implementada de forma definitiva.

Outros

Outros dois pontos que considero interessante mencionar.

O primeiro é que tentamos trabalhar num ritmo sustentado, sem pegar mais do que o time aguenta. Na única vez que trabalhamos de madrugada o resultado não foi bom. Os stakeholders não gostaram do que foi entregue e isso acabou refletindo temporariamente na motivação do time.

O outro é que tentamos manter nosso processo o mais enxuto possível. Praticamente não existem tarefas, reuniões, etc., que não agregam valor ao produto.

Resultado

O resultado disso tudo, aliado ao excelente trabalho da equipe de editores, é um aumento significativo na audiência do Baixatudo. E stakeholders satisfeitos.

A partir de agora estamos partindo para outro produto. Sabemos que ainda temos muito a evoluir, mas acredito que estamos no caminho certo. Estamos conseguindo mostrar o valor de times pequenos (4-5 pessoas no nosso caso), autônomos, ágeis.