JS-909 – Uma mesa de som para fazer músicas em javascript

Cameron Adams fez um experimento divertido e o chamou de JS-909, uma mesa de som para construir batidas de músicas. Ela produz som sem utilizar flash, o javascript checa se seu browser é capaz de produzir som, coloca as musicas pra tocar e também inclue um pequeno script para visualizar as batidas em gráficos psicodélicos, no estilo windows media player.

js-909 - Uma mesa de som para fazer musicas em javascript

Como não existe um padrão nos browsers para acessar os controles de som ( para, tocar, voltar ). Ele usou a interface de javascript do quicktime para tocar os sons.

veja mais tidbitsOs sons são chamados pela tag <embed> e num determinado evento é criado o embed no dom via javascript.

Veja o exemplo rodando aqui.

Recurso de impressão amigável – Todo site deveria ter

A dias atrás escrevi uma matéria falando de material de estudo sobre padrões web em português . Lendo a apostila criada pelo e-gov, tem um tópico com esse título.

Mas o que é uma “impressão amigável”?

Impressão amigável, é definir um css só para o usuário imprimir o conteúdo.

Quando mandamos imprimir uma página, estamos interessados somente no conteúdo. A página de impressão não deve vir com menu, cabeçalho, rodapé, banner, background do site, ilustrações enormes, etc etc… e é possível retirar esses elementos na hora do impressão com um css a parte.

copyNão é dificil, no tidbits nós usamos um template pronto de wordpress (que naturalmente, veio sem um css de impressão) e pra colocar eu criar um, não demorou nem 10 minutos.

O uso de folhas de estilo para equipamentos específicos é feito através do atributo media, existem vários tipos de media, mas na prática somente 3 tipos são usados, veja a relação abaixo de medias e dispositivos:

  • all – todos os tipos de dispositivos;
  • screen – computadores;
  • print – impressoras;
  • handheld – PDAs, mobiles palmtops;

Existem duas formas de escrever um atributo media que é colocado sempre dentro do <head> é claro:

Chamada externa:

<link media=“screen” type="text/css" href="style.css" rel="stylesheet"/>
<link media=“print” type="text/css" href="print.css" rel="stylesheet" />

<!-- ou assim pra quem prefere com import !-->

<style type="text/css">
@import url("style.css") screen;
@import url("print.css") print;
</style>

Repare que chamamos um css pra tela e um pra impressão.
Quando o atributo media não é declarado o padrão é media=”all”.

ou no css:

@media screen { 
	h1 { font-size:28px; color:#ff0;}
}
@media print { 
	h1 { font-size:14px; color:#000;}
}

Basicamente é bem rápido, não é necessário mexer em muitas tags, veja o que foi necessário para implementar aqui no tidbits:

@media print { 
	div#header, div#footer, div#sidebar-wrapper, 
	p.bookmark-me, div.post-footer, 
	form#commentform, h3.comentar {
		display:none;
	}
}