Queli Coto Desarrollador Web

Existen muchísimos tutoriales para este fin, yo voy a detallar el que de momento más me convence, y no es otro que utilizar un plugin para jquery.

Por lo que hoy toca hablar de:

Plugin jquery media - carga elementos flash dentro de una página de manera accesible

Para los que lo conozcáis no les hará falta que les diga las bondades de este fantástico plugin y para los que no, enseguida quedarán enganchados con el.

Contenidos que podemos cargar con este plugin

Video

Jquery media es un plugin, que además de cargar contenido flash en un formato swf, también nos coloca el reproductor de video según el formato, flv, mov, avi …

Ejemplos

pero no sólo sirve para eso, podemos cargar contenidos de Audio, Silverlight Demo , (pdf, html) ,

También soporta la técnica sIRF, que como bien explican en diseñorama ,

sIFR es un script que reemplaza un elemento de texto (o varios) en una página por un archivo flash que despliega el mismo texto. Esto nos permite utilizar tipografías que no estén instaladas y tener texto con suavizado (anti-aliasing).

El otro día para una página, dentro de un proyecto que pronto presentaré, necesitábamos , colocar una presentación powerpoint online, lo primero que se nos ocurrió fue usar slideshare, sitio dedicado exclusivamente a esto, pero el código que nos genera no es accesible, fue probarlo con jquery-media y voalá!! problema resuelto.

código

[CODE]

<a href=”http://static.slideshare.net/swf/ssplayer2.swf?doc=unobtrusivejquery-1210086958470711-9″ class=”media {width: 376, height: 312, autoplay: true}”>
Descripcion del power point

</a>

[/CODE]

En el href, se pondrá la url, a la presentación y ya está, claro teniendo la librería jquery y el plugin jquery-media ya cargado, evidentemente.

Aprovecho para colocar una fantástica presentación sobre jquery no obtrusivo.

Descripcion del power point

Por último, mencionar un par de plugins nuevos para jquery para usar con imágenes.

jquery magnify

jquery jflip

Bueno pues acabo de terminar una pequeña actualización,  este plugin era capaz de colocarte los iconos correspondiente al tipo de enlace, como pdf o zip y si es externo también lanza la página con un target blank, de forma totalmente accesible.

Como se puede apreciar en la imagen el principal cambio es que si nuestra página de destino tiene un favicon nos lo mostrará , gracias a un post en xyberneticos se me ocurrió esta idea.

Instalación 

• muy simple llamar en el head al js y a css, probado con la versión de jquery 1.2

Pero que pasa si no queremos tener los favicones y queremos la funcionalidad anterior que nos muestra un icono para todos los enlaces externos, pues muy fácil.

• después de cargar todas las librerías tenemos que lanzar un script y cambiar la forma de ejecución del plugin desabilitando los iconos de favicones

[script]

$(document).ready(function() {
$().ALLinksAccesibles(false);
});

[/script]

•  solo hay que ponerlo a false, por defecto está a true y nos quedará así

demo | descarga código fuente

He echo unos pequeños cambios, basándome en la versión 0.1 y la técnica de poner iconos según el enlace por css juntando las dos y ahora es multi-browser validado en ie6 o superior, firefox , opera

Modo de uso.
1) cargamos el jquery y el plugin jquery-links.js y el css en el head
[html]

2) creamos en el body unos enlaces para comprobar que funciona
[html]

Glamouralive

micorreo@micorreo.es

Este es un documento pdf

Este es un fichero comprimido

Seende

[/html]

y ya está se ha usado el jquery la versión 1.2 que ha salido estos días.

demo | descargar código fuente

También he actualizado mis tutoriales con esta entrada