Flash | How to

Incluye tus vídeos en tu web

ByLuis November 29, 2006

si ya hace tiempo explicÃ¡bamos cÃ³mo subir un vÃdeo en formato FLV a tu web y verlo mediante un visor incluido en la pÃ¡gina web, ahora se trata de un artÃculo donde explican cÃ³mo hacer, de forma muy detallada, para casi todos los formatos de vÃdeo mÃ¡s comerciales, mostrar el vÃdeo en formato Flash (FLV).
En este caso se centran en los formatos de QuickTime, Windows Media y Abode Flash (aunque usando herramientas comerciales y no opensource como indicamos en el artÃculo anterior). Primero nos indican que debemos obtener la informaciÃ³n del vÃdeo, luego codificarla y por Ãºltimo mostrarla.
Yo me sigo quedando con la alternativa opensource, pero es indiscutible que la explicaciÃ³n que nos ofrecen es de lo mÃ¡s completa.
The Rise of Flash Video, Part 3: Tackle your own project with this step-by-step primer

Desarrollo web | Javascript

Clipping de vídeo usando HTML5 y SVG en Firefox4

ByLuis March 23, 2011March 23, 2011

La verdad es que Firefox4 está de lujo, y las demos que ofrece Mozilla son increíbles. De una de ellas he sacado cómo hacer clipping en vídeos usando HTML5 y la posibilidad de incrustar SVG (sólo funciona en Firefox4).

El método es sencillo, tengo un SVG que muestra el contorno y los botones de play y pausa, además tiene un clipPath que se usará para el estilo clip-path del vídeo:

SVG

Vídeo

Javascript

var play = document.getElementById('play');
var pause = document.getElementById('pause');
var video = document.getElementById('video');
play.addEventListener('click', function() {
    play.style.display = 'none';
    pause.style.display = 'block';
    video.play();
  }, true);  
pause.addEventListener('click', function() {
    play.style.display = 'block';
    pause.style.display = 'none';
    video.pause();
  }, true);  
video.addEventListener("ended", function() {
    play.style.display = 'block';
    pause.style.display = 'none';
    video.pause();
  }, true);

El vídeo es el mismo que el de la demo de Mozilla, he puesto el borde semi-transparente para que se vea el clipping como va.

Demo

Vía / Project London Trailer

Accesibilidad | How to | Javascript | TipografÃa

Detectar cambio de tamaño de letra en Javascript

ByLuis September 12, 2006

La verdad es que lo sencillo es lo mejor, y para cuando estÃ©s en la necesidad de detectar si se produce un cambio en el tamaÃ±o de la letra, nada mejor que el script que nos ofrece la gente de A List Apart.
Te puedes preguntar por quÃ© vas a querer detectar el cambio de tipo de letra. Si te interesa tener un sitio accesible a gente con discapacidades, pues es buena idea que pienses en ello, ya que suele ser algo que pueden hacer con frecuencia.
AdemÃ¡s de detectar ese cambio, puede ser necesario realizar alguna acciÃ³n. Por ejemplo, si usamos una imagen para un botÃ³n, si cambiamos el tamaÃ±o de la letra, la imagen no cambia, por lo que el botÃ³n quedarÃ¡ demasiado pequeÃ±o para el resto del texto, Â¿soluciÃ³n?, si hay cambio de tamaÃ±o de letra, sustituimos la imagen por un elemento input botÃ³n.
Al principio decÃa que la soluciÃ³n es sencilla, lo cual la hace aÃºn mejor. Se trata de crear una capa que contenga un espacio dentro y que estÃ© oculta. Se guarda el tamaÃ±o de la capa y cada cierto tiempo se detecta si ha habido un cambio en este tamaÃ±o, si es asÃ, se ha producido un cambio en el tamaÃ±o de la letra.
Text-Resize Detection
Demo
CÃ³digo y ejemplos

How to | Laboratorio | PHP

Laboratorio: Comparar imágenes mediante PHP

ByLuis April 18, 2006

Voy a intentar responder de una forma un poco más completa la pregunta que nos hacía David sobre la forma de comparar dos imágenes. Aunque este tema es muy intenso y en algunos casos bastante complicado, vamos a intentar simplificarlo en dos casos: imágenes de distinto tamaño y distinto contenido en la imagen.

Si las imágenes son de distinto tamaño diremos que son distintas imágenes, no nos pararemos a ver el contenido. Si tienen el mismo tamaño, buscaremos que parte de la imagen es la que ha cambiado y la señalaremos con un rectángulo rojo.

Grafismo | How to | Javascript | Laboratorio | PHP

Laboratorio: Recorta imágenes dinámicamente con PHP y HTML

ByLuis April 11, 2006

En muchos sitios web de almacenamiento de imágenes se nos permite retocar las imágenes. Hoy vamos a explicar como recortar una imagen directamente desde una página web.

Para ello tenemos que crearnos una página web que nos permita seleccionar la zona de la imagen que queremos recortar y de un script PHP que usando la librería GD recortará la imagen y la devolverá en formato PNG.

Flash

¿Páginas totalmente en Flash?

ByLuis August 31, 2006

Supongo que esto puede ser un tanto polÃ©mico, pero aquÃ va el resumen de una entrada en la que recomienda no hacer pÃ¡ginas totalmente en Flash. Supongo que hay gustos para todo, a mÃ el Flash no me gusta especialmente, pero estÃ¡ claro que se pueden hacer cosas increibles, aunque tambiÃ©n otras horribles (de estas mejor no pongo enlace para no buscarme enemigos).

Motivos por los que no deberÃas crear un sitio totalmente en Flash:

Se ha buscado mala fama, algunos visitantes cuando ven que estÃ¡ completamente en Flash cierran el navegador. [yo a veces soy de esos]
Buenos diseÃ±adores no tienen por quÃ© ser buenos diseÃ±adores web, por lo que diseÃ±os muy atractivos pueden tener una mala navegaciÃ³n. [te quedas loco viendo la espectacularidad, pero luego te pasas un par de minutos moviendo el ratÃ³n por todas partes para saber que es un enlace]
Puede influir negativamente en el buen contenido. Muchos usuarios acceden a un sitio para buscar informaciÃ³n, y les gusta que sea de forma rÃ¡pida y sencilla, lo cual a veces no es del todo sencillo con Flash. [odio cuando no se puede seleccionar el texto para hacer un copy/paste]
Aunque una de las ventajas del Flash es necesita un plugin para visualizarse por lo cual el problema de compatibilidad de navegadores no existe, no implica que el usuario tenga la ultima versiÃ³n del plugin, y no todo el mundo se va a bajar la Ãºltima versiÃ³n para ver la pÃ¡gina. [sin embargo ese es uno de los problemas de SVG, que aÃºn usando el mismo plugin de Adobe, se visualiza de forma diferente en distintos navegadores]
Los motores de busqueda no hacen caso a los contenidos en Flash.
El que te permita hacer cosas multimedia muy elaboradas suele implicar tener que esperar bastante a que se cargue la pelÃcula flash, aÃºn cuando aparece el preloader, la espera no suele gustar.
Lo bueno del HTML es que primero carga la pÃ¡gina y luego las imÃ¡genes, por lo que puedes acceder a la informaciÃ³n mientras se cargan las imÃ¡genes. [claro que un buen diseÃ±ador puede hacer lo mismo en flash]

El texto entre corchetes son mis comentarios sobre cada punto, no es lo Ãºnico que pienso sobre el flash, tambiÃ©n creo que es a veces mejor usar flash que HTML, por ejemplo en la pÃ¡gina de un artista puede ser mÃ¡s efectivo el flash que el HTML.

Should You Make Your Website in Flash?

VÃa / dzone

Desarrollo web | Flash

OpenLaszlo: aplicaciones web en Flash

ByLuis December 21, 2006

OpenLaszlo es un entorno de desarollo opensource para crear “rich Internet applications”, consistente en tres aplicaciones: Compiler para compilar el cÃ³digo fuente en formato Flash, Runtime Framework que incluye la interfaz de usuario y componentes para ser usados y Servlet que admite otros tipos de archivos, SOAP y XML-RPC.

Con OpenLaszlo puedes crear aplicaciones mediante XMLs y Javascript, hacer un deploy desde cualquier navegador o desde una aplicaciÃ³n de servidor J2EE o servlets.

Demos

OpenLaszlo

Similar Posts