SWFFix

  • 25/08/2007
  • 12:22 pm
  • unijimpe

SWFFix es un proyecto de Geoff Stearns (Creador de SWFObject) y Bobby van der Sluis (Creador de UFO) que tiene como objetivo crear una librería Javascript para incluir contenido Flash en documentos HTML.

swffix.jpg

SWFFix combina las técnicas de SWFObject y UFO pero con código optimizado y obteniendo compatibilidad con la mayoría de los navegadores. Actualmente se encuentra en pleno desarrollo (versión 0.3) ya esta disponible para descargar y utilizarlo. SWFFix se convertirá en el estándar para incluir SWF en las páginas web.

Utilizando SWFFix
Primero hay que descargar los archivos desde http://code.google.com/p/swffix/, luego de descargar y descomprimir el archivo, encontraremos un archivo llamado swffix.js el cual contiene los métodos necesarios para incluir SWFs. Luego, al crear nuestro html, incluimos la librería en el header.

HTML:
  1. <script type="text/javascript" src="swffix.js"></script>

El siguiente paso es crear un div contenedor el donde se colocará el SWF, dentro de este div es recomendable colocar el contenido que se muestra si es que no se tiene Flash Player.

HTML:
  1. <div id="myswf">
  2.       <p>Contenido Alternativo</p>
  3. </div>

Luego, llamamos a la función SWFFix.embedSWF que se encarga de embeber el archivo SWF, esta función recibe como parámetros el archivo a incluir, el identificador donde se incluirá el SWF, ancho, alto y versión del player. Esto lo incluimos en el header de la forma:

HTML:
  1. <script type="text/javascript" src="swffix.js"></script>
  2. <script type="text/javascript">
  3. SWFFix.embedSWF("movie.swf", "myswf", "300", "120", "9.0.0");
  4. </script>

Agregando FlashVars, Parámetros y Atributos
Si si tiene la necesidad de incluir FlashVars, parámetros adicionales o atributos, se pueden incluir de la forma:

JavaScript:
  1. var flashvars = {
  2.   name1: "hello",
  3.   name2: "world",
  4.   name3: "foobar"
  5. };
  6. var params = {
  7.   menu: "false"
  8. };
  9. var attributes = {
  10.   id: "myswf",
  11.   name: "myswf"
  12. };
  13. SWFFix.embedSWF("movie.swf", "myswf", "300", "120", "9.0.0", "", flashvars, params, attributes);

Detectar la versión del Player
Otra de las características adicionales de SWFFix es que puede obtener la versiòn del player que tiene instalado el navegador, para ello empleamos la función SWFFix.getFlashPlayerVersion() de la forma:

JavaScript:
  1. var playerVersion = SWFFix.getFlashPlayerVersion();
  2. var majorVersion = playerVersion.major;

También se puede utilizar SWFFix.hasFlashPlayerVersion para verificar si una versión especifica esta instalada, con lo cual podemos ejecutar diferentes opciones según el resultado.

JavaScript:
  1. if (SWFFix.hasFlashPlayerVersion("9.0.18")) {
  2.   // has Flash
  3. }
  4. else {
  5.   // no Flash
  6. }

Como se observa es sencillo de utilizar, semejante al uso de SWFObject. SWFFix esta en pleno desarrollo y periódicamente se están lanzando las versiones mejoradas, definitivamente una buena opción para incluir archivo Flash.

Posts Relacionados

XRAY: Inspector HTML Online

  • 22/08/2007
  • 10:06 am
  • unijimpe

XRAY es un marcador (dirección guardada en los favoritos) que muestra todos los detalles del elemento web seleccionado. Entre los datos mostrados se tienen: ancho, alto, posición, detalles del estilo y el árbol del elemento html seleccionado.

xray.gif

El funcionamiento es similar a herramientas como Firebug pero con la diferencia que no es necesario ninguna instalación, es compatible con Internet Explorer 6+, Safari, Firefox, Camino y Mozilla.

Utilizar XRAY
Para utilizar XRAY es necesario guardar en nuestros favoritos una ruta que permitirá inicializar la aplicación al hacer click en ella, para ello arrastra el siguiente botón a tu barra de favoritos.

XRAY

Luego de ello, carga la pagina que deseas analizar, en seguida haz click en el botón XRAY en tu barra de favoritos, se abrirá una ventana flotante que contendrá los datos de cada elemento que se seleccione con el mouse.

xray.jpg

Como ven una sencilla pero muy potente herramienta con el cual podemos analizar rápidamente los elementos que contiene una página web. Obviamente no es tan potente como WebDeveloper o Firebug pero nos puede sacar de muchos apuros.

Posts Relacionados

Efecto Glossy con Javascript

  • 20/08/2007
  • 11:06 am
  • unijimpe

Glossy es una pequeña librería Javascript que permite agregar esquinas redondeadas además de brillos y sombras con lo cual se consigue un efecto visual muy agradable con imágenes sencillas. Es compatible con la mayoría de los navegadores entre ellos Firefox 1.5+, Opera 9+, Safari e IE6+.

glossy.jpg

Para utilizar Glossy los primero es descargar los archivos fuente en glossy.zip, luego de descomprimir los archivos, incluimos la librería glossy.js a nuestro html de la forma:

HTML:
  1. <script type="text/javascript" src="glossy.js"></script>

Luego de ello, para aplicarlo a una determinada imagen, debemos aplicar la clase glossy, luego puedes configurar los efectos a aplicar con las siguientes opciones:

  • iradiusNN: define el valor del radio, donde NN es el porcentaje de la dimensión minima, el radio puede ser desde 20 hasta 50.
  • noshadow: indica que no se debe aplicar shadow.
  • ibgcolorHHHHHH: indica el color del fondo en hexadecimales, donde HHHHHH puede variar entre 000000 y ffffff.
  • igradientHHHHHH: color del gradiente que se desea aplicar.
  • horizontal: indica la direccion del gradiente, por defecto es vertical.

Luego si deseamos que el efecto sea con un radio que sea el 50% del lado de un cuadrado, seria de la forma:

HTML:
  1. <img src="box.gif" class="glossy iradius50" />

Pero si deseamos que tenga un fondo de color verde y que no tenga sombra se tendría:

HTML:
  1. <img src="box.gif" class="glossy ibgcolor00aa00 noshadow" />

Sencillo de utilizar pero con un buen resultado visual, de seguro les servirá para decorar sus imagenes. Gracias Giancarlo por el dato.

Posts Relacionados