Nunca dejamos de descubrir nuevas cosas que podemos hacer con JavaScript, HTML5, css3, etc.
En esta oportunidad les presento riffwave, una libreria en JavaScript que genera usando el tag audio de html5 sonidos por medio de PCM (MIC en Castellano).
Aca va el ejemplo de como se usa la libreria.
var data = []; // just an array
for (var i=0; i<10000; i++) data[i] = Math.round(255 * Math.random()); // fill data with random samples
var wave = new RIFFWAVE(data); // create the wave file
var audio = new Audio(wave.dataURI); // create the HTML5 audio element
audio.play(); // some noise
Si bien es un poco exagerado, la realidad es que no hay forma de maquetar una web aplicando el método “tableless” y sin hacer uso de floats. A mi no me parece lógico que para ubicar 2 bloques en forma horizontal halla que flotarlos a la izquierda o a la derecha. Y si los quiero en el medio? Por qué no hay un “float:center”?
Mi teoría es que el uso de los floats inicialmente se pensó para que el texto rodee a las imágenes con el famoso y ya en desuso atributo “align=left|right”. Luego cuando se puso de moda el maquetado con capas no quedó otra que extender su uso. Ahora nada esta en suelo firme, casi todo esta flotando.
No les parece molesto tener que aplicar el famoso clearfix o de darle overflow a un contenedor con floats para que no queden volando en la nada?
El nuevo módulo de cajas flexibles de CSS3 permite ubicar cajas en forma horizontal o vertical y haciendo que se adapten automáticamente al espacio disponible.
Aún en working draft, este módulo es soportado hace bastante en Gecko y Webkit ya que su uso es fundamental para el desarrollo de UI en extensiones. Se planea soporte en IE9, por lo tanto Opera debería implementarlo en su próxima versión para no quedar atrás.
Hice un pequeño ejemplo para demostrar el funcionamiento básico. Si abren la consola y analizan el CSS deberían encontrarse con las siguientes nuevas propiedades:
box-flex: Es un valor flotante mayor o igual a cero que determina si el nodo es flexible. Solo tiene efecto cuando hay espacio sobrante en su contenedor. Su valor es relativo a los nodos hermanos, un valor mayor indica que abarcará mas espacio que los demás. Por default es 0. Los anchos y altos máximos son respetados.
box-orient: Indica la orientación de las cajas. Puede ser “horizontal” o “vertical”. Este valor se aplica al contenedor cuya propiedad display es “box”.
box-align: Indica la alineación de los nodos perpendicular a su orientación. Si la orientación es horizontal, indica la posición vertical y viceversa. Sus posibles valores son: start, end, center, baseline, stretch (default).
box-pack: Vendría a ser como el “text-align” y se aplica solo cuando sobra espacio, tanto para la orientación vertical y horizontal. Sus posibles valores son: start, end, center, justify.
Las siguientes propiedades no las utilicé en el ejemplo pero permiten personalizar aún más la disposición de los elementos:
box-direction y box-ordinal-group: determinan el orden en que se muestran los nodos, sin importar su orden en el código fuente.
box-lines: dependiendo de la orientación, determina si usar mas de una fila o columna.
box-flex-group: permite agrupar elementos flexibles. Su uso parece algo complejo y no le veo utilidad por el momento.
Como ven, este nuevo módulo facilita mucho el desarrollo de interfaces complejas ya que no tenemos que utilizar Javascript para redimensionar elementos dinamicamente y CSS se encarga de todo el trabajo.
En el siguiente enlace podrán ver información de compatibilidad y mas ejemplos: http://caniuse.com/
En esta ocasion les presentamos un portal de juegos totalmente escritos en html5.
Para los que no esten familiarizados con el termino html5, viene a ser asi como la evolucion y el futuro web, y segun mucho lo que desplaza a flash para siempre.
Les dejo el link, asi ustedes mismo pueden apreciar las posibilidades de html5. http://html5games.com/
Recent Comments