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.

Oct 29

Evento onclick accesible: OnClick JS

javascript 2 Comentarios »

El proyecto OnClick JS es un script realizado en javascript para poder realizar el desarrollo de aplicaciones web más accesibles y cumplir las pautas de accesibilidad web relacionadas con los manejadores de eventos dependientes del dispositivo (Prioridad 2).

Características OnClick JS

  • OnClick JS ha sido desarrollado en JavaScript.
  • El tamaño de OnClick JS es de 827 bytes (versión compactada).
  • Compatible con la etiqueta <a> de HTML para todos aquellos eventos onclick.
  • OnClick JS ejecuta cualquiera de tus funciones en javascript.
  • No hay una cantidad máxima de parámetros en la función a ejecutar.
  • No hace uso de Frameworks JS.
  • No es necesario usar manejadores de eventos redundantes:
    onclick / onkeypress.

Descargar OnClick JS

OnClick JS v1.01 (fichero comprimido en .zip - 606 bytes)

Instalación OnClick JS

Para poder unsar OnClick JS debemos añadir los ficheros necesarios entre nuestra etiqueta <head>…</head>.

<script src="/js/onclick/onclick.js" type="text/javascript"></script>

Configuración OnClick JS

Podremos agregar la función a ejecutar por OnClick JS pasándole los parámetros que esta requiera.

rel=”onclick[NombreFuncion(, Parametro1, Parametro2..ParametroN)]“

  • NombreFuncion - Nombre de la función en JavaScript que queremos ejecutar.
  • Parametro1..N - Parámetros de la función separados por comas.

Ejemplos OnClick JS

Descarga los ejemplos OnClick JS.

Recuerda que el siguiente código  debe añadirse entre la etiqueta <head>..</head>.

<script src="http://www.alejandroarco.es/wp-includes/js/onclick/onclick.js" type="text/javascript"></script>
<script type="text/javascript">
function HolaMundo() { alert('¡Hola Mundo!'); }
function Suma(n,m) { alert(n+' + '+m+' = ' + (n+m)); }
function CargarURL(url) { var m='¿Cargar Url\nmediante JavaScript?'; if(confirm(m)) { location.href=url; } }
</script>

El siguiente código debe añadirse entre la etiqueta <body>..</body>.


<h1>Ejemplos de OnClick JS</h1>
<ul>
<li><a title="Ejemplo uso Oclick JS - Hola Mundo" rel="onclick[HolaMundo]" href="#hola-mundo">Ejemplo uso Oclick JS - Hola Mundo (sin parámetros)</a></li>
<li><a title="Ejemplo uso Oclick JS - Suma 3+6" rel="onclick[Suma,3,6]" href="#suma">Ejemplo uso Oclick JS - Suma 3+6 (con parámetros)</a></li>
<li><a title="Ejemplo uso Oclick JS - Cargar URL" rel="onclick[CargarURL,'http://www.alejandroarco.es']" href="http://www.alejandroarco.es">Ejemplo uso Oclick JS - Cargar URL (accesible con JS deshabilitado)</a></li>
</ul>
<div><a title="administracion de sistemas y desarrollo de aplicaciones informaticas" href="http://www.alejandroarco.es">Alejandro Arco</a></div>

Compatibilidad OnClick JS

OnClick JS es compatible y se ha testeado con los siguientes navegadores (browsers): Internet Explorer 6+, Opera 9, Firefox 1.5+ y Safari 2+, con javascript habilitado.

Registro de cambios OnClick JS

  • OnClick JS 1.01 (29/10/2008) - Publicación inicial
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