Alejandro Arco Alejandro Arco
May 28

FancyUpload para flash player 10

ajax, open source 24 Comentarios »

Hace algunos meses publiqué un artículo sobre la extensión de Mootools FancyUpload para la subida múltiple de ficheros, tras la aparición del nuevo flash player 10 por parte de Adobe fancy upload dejó de funcionar correctamente en todos los navegadores que incluyeran el flash player 10.

De este modo y dada la demanda de todos vosotros he decidido explicar detalladamente el funcionamiento de fancyupload para flash player 10 con una demostración, ya que el error fancyupload se debe a un cambio en los métodos usados por flash player 10 en el browser.

Demo fancyupload para flash player 10

A continuación os adjunto una demo de fancyupload compatible con flash player 10:
[ Demo ] [ Descargar Ejemplo FancyUpload Flash 10 ]

Características fancyupload para flash player 10

  • Formulario alternativo y accesible en HTML.
  • En primer lugar añadiremos el código en PHP necesario para el desarrollo web de nuestra aplicación y así permitir la subida de ficheros con fancyupload.
  • Posteriormente añadiremos todos los ficheros en javascript necesarios para la ejecución de Fancy Upload como FancyUpload2.js, Fx.ProgressBar.js, Swiff.Uploader.js, mootools-1.2-core-nc.js y example_fancyupload_flash_10.js.
  • Finalmente añadiremos la hoja de estilos necesaria para estructurar la interfaz visual de fancy upload, en este caso el fichero se denomina estilos.css.

Espero que este artículo os sea de utilidad, ya que la demostración de FancyUpload para flash player 10 la he programado de forma estructurada y con comentarios para que sea de fácil compresión.

En cualquier caso, si tenéis alguna duda no dudéis en dejarme un comentario.

Ene 22

Validar flash con JavaScript y SWFObject

accesibilidad, javascript, w3c 1 Comentario »

swfobject - Validar flash con JavaScript y SWFObjectTras escribir mi anterior artículo Validar flash en XHTML y HTML sin hacer uso de javascript para maximizar la compatibilidad, os traigo un nuevo artículo para validar flash. Esta vez mediante el uso de javascript con la librería swfobject, que se ofrece bajo licencia MIT License.

De este modo, os sugiero otra forma de cumplir los estándares web de la W3C y las pautas de accesibilidad web respecto a la validación flash que tantos problemas nos ha dado a los desarrolladores web puristas de la validación web y el SEO.

Características validar flash con JavaScript y SWFObject

SWFObject es una pequeña librería en javascript que nos permite incluir contenido flash de forma práctica y sencilla, permitiendo agregar contenido alternativo en caso de que el navegador no tenga habilitado javascript o el flash player.

  • No se hace uso de la etiqueta embed y noembed.
  • No hay redundancia de información en la inicialización del contenido flash.
  • Cumple los estándares web de la W3C y las pautas de accesibilidad web.
  • Permite visualizar contenido alternativo a los usuarios que no tengan el flash player o naveguen con javascript deshabilitado.
  • El código fuente de nuestro desarollo web queda más limpio y legible.

Parámetros constructor SWFObject, validar flash, validar swf

  • SWFObject(swf, id, width, height, version);
  • swf - La ruta y el nombre de su archivo flash.
  • id - La id de su objeto flash.
  • width - El ancho de su objeto flash.
  • height - El alto de su objeto flash.
  • version - La versión requerida del flash player.

Ejemplo validar flash con JavaScript y SWFObject

Lo primero que debemos de hacer es incluir nuestra librería swfobject entre la etiqueta <head>…</head> de nuestro documento.

<!-- Flash SWFobject -->
<script src="/js/swfobject.js" type="text/javascript"></script>

Posteriormente, crearemos nuestra contenedor flash con id única donde irá insertado nuestro flash y  le agregaremos el contenido alternativo, todo ello irá ubicado entre la etiqueta <body>…</body> de nuestro documento.

<div id="reproductor">
<img src="/flash-no-disponible.jpg" alt="Flash Player no disponible" />
</div><br />

Después, llamaremos al constructor SWFObject de la librería en javascript agregada anteriormente.


<script type="text/javascript">
var flash = new SWFObject('/play-audio.swf', 'stream', '100%', '20', '7');
flash.addVariable('type', 'mp3');
flash.addVariable('file', '/audio.mp3');
flash.write('div_reproductor');
</script><noscript>Flash SWFobject</noscript>

Finalmente, nuestro código HTML completo usando la librería SWFObject quedaría de la siguiente forma:


<html>
<head>
<title>Validar flash con JavaScript y SWFObject</title>
<!-- Flash SWFobject -->
<script src="/js/swfobject.js" type="text/javascript"></script>
</head>

<body>
<div id="reproductor">
<img src="/flash-no-disponible.jpg" alt="Flash Player no disponible" />
</div>
<script type="text/javascript">
var flash = new SWFObject('/play-audio.swf', 'stream', '100%', '20', '7');
flash.addVariable('type', 'mp3');
flash.addVariable('file', '/audio.mp3');
flash.write('div_reproductor');
</script><noscript>Flash SWFobject</noscript>
</body>
</html>

Como podéis observar la librería SWFObject es una herramienta muy potente y fiable en el desarrollo web de aplicaciones siempre y cuando el navegador del usuario tenga javascript habilitado.

Nov 11

Validar flash en XHTML y HTML

accesibilidad, w3c 10 Comentarios »

flash - Validar flash en XHTML y HTMLA todos los puristas de la validación web y el seo nos agrada cumplir con los estándares web de la W3C, por este motivo la inserción de contenidos flash dentro de nuestro código XHTML y HTML siempre nos había supuesto un quebradero de cabeza, ya que la etiqueta embed no se encuentra incluida dentro de los estándares web de la W3C.

Por este motivo, voy a aportar una manera de validar flash de forma accesible ya que validación flash no cumple con las pautas de accesibilidad web de prioridad 1 a menos que incluyamos una etiqueta noembed.

Características validar flash, validar swf, validar embed

  • No se hace uso de javascript.
  • No se hace uso de la etiqueta embed y noembed.
  • No hay redundancia de información en la inicialización del contenido flash.
  • Cumple los estándares web de la W3C y las pautas de accesibilidad web.
  • Se visualiza contenido alternativo en caso de que el usuario no tenga el flash player instalado.

Ejemplo validar flash, validar swf, validar embed

<object type="application/x-shockwave-flash" data="/play-audio.swf">
<param name="movie" value="/play-audio.swf" />
<param name="flashvars" value="file=/audio.mp3" />
<img src="/flash-no-disponible.jpg" alt="Flash Player no disponible" />
</object>

Espero que este nuevo artículo sobre la validación web y mas concretamente sobre la validación flash os sea de utilidad para vuestros proyectos web.

Ago 12

Fancy Upload, upload múltiple de ficheros pesados con AJAX y MooTools

ajax, open source 51 Comentarios »

fancy-upload - Fancy Upload, upload múltiple de ficheros pesados con AJAX y MooToolsFancy Upload es un conjunto de librerías que nos permiten realizar uploads múltiples de ficheros pesados con una interfaz totalmente personalizable mediante CSS y XHTML. Este conjunto de librerías hacen uso de AJAX y del Framework Mootools para JavaScript.

Algunas de las características de Fancy Upload más reseñables son: upload múltiple de ficheros, barra de progresión, subida de ficheros en pleno proceso de ejecución y cancelación de la subida de ficheros en cualquier momento.

Os muestro a la izquierda una interfaz modificada de Fancy Upload que desarrolle para un proyecto web, podemos personalizarla mediante hojas de estilo sin problemas.
[ Documentación ] [ Demo]

Requerimientos mínimos para hacer funcionar Fancy Upload

Espero que este artículo sobre el upload de ficheros múltiples os sea de utilidad, si tienen alguna duda sobre la instalación de Fancy Upload no dudeis en dejarme un comentario al respecto y la intentaré solucionar en la mayor brevedad de tiempo posible.

Fuente: Alejandro Arco

   
Publicado por Alejandro Arco.Gracias WordPress & N.Design Studio.
Artículos RSS
Comentarios RSS
Iniciar Sesión