Etani

Ratio: 2 / 5

Ha sido finalizada la maquetación de nuevas funcionalidades para la demo que os ofrezco de este magnífico gestor de Mp3. En él aunque aparentemente pocos, se han introducido cambios sustanciales, sobre todo porque, he integrado las librerías de javascript overlib.js, así como la librería jquery.js, en este estupendo framework llamado CakePhp. Para ello, tenía pendiente realizar un artículo detallado del uso de esta parte frontal, que, recordar, de nuevo, puede ser personalizado al detalle, hemos decidido demostrar la flexibilidad que nos pueden dar las librerías anteriores unidas a algo de código javascript para integrar las canciones en Mp3.

Para ello, comentar que, a las listas se le ha añadido una curiosa funcionalidad que nos va a permitir arrastrar (Drag&Drop) un tema de la lista, hacia el player tanto con el ratón como con el dedo, si de una pantalla táctil (teléfono móvil, tablet, etc...) se tratara. Sin más lo primero que vamos a hacer es ir a la dirección de la demo, https://www.etani.es/mp3admin el cual nos cargará la siguiente pantalla:

Bueno, a simple vista, podemos observar varias cosas, que iremos viendo poco a poco:

Llave (icono)

Este icono será para acceder a la parte de administración de la aplicación, la cual por seguridad, se encuentra cerrada con clave, será aquí donde cargaremos los temas, y las imágenes que van a ser mostradas. La parte administrativa está explicada de forma extensa, en el artículo aquí enlazado (pinchar).

Play (icono)

Este botón central, será uno de los más importantes, ya que, será el encargado de mostrar el reproductor flash que servirá para mostrar la imagen asociada al tema y hacerlo sonar. Si pasáis el ratón por encima, veréis como crece, estos detalles son completamente personalizables. Si pincháis sobre él, podréis ver como se esconde para volver a aparecer y traernos el reproductor, cargado en este momento con una lista de reproducción de temas, aleatorios.

Reproductor

Es el mismo que hemos utilizado en el reportaje antes linkado, tiene controles para ir a la siguiente canción a la anterior, control de volumen, play, pause, barra de progresión, información del tema, tiempo de reproducción, tiempo total de tema... lo mejor es probarlo.

Información(icono)

Este icono azul va a darnos una descripción de como poder usar la función de drag & drop (arrastrar y soltar), solo tendremos que posicionar el ratón sobre el icono para que nos aparezca la ventana que debajo mostramos, la misma utiliza la librería overlib.js.

Como ya podéis leer, dichas instrucciones son las necesarias para conocer como realizar la reproducción selectiva de temas.

Listado de últimos subidos

Dicho listado, va a mostrar los, en este caso 7 últimos temas que se han subido al administrador. Es una pequeña lista que informará de los temas que se han subido en las últimas fechas. Cuando cargamos la página, veremos cómo se produce un efecto, sobre la lista, que muestra poco a poco los temas, aquí hemos aplicado la librería jquery.

Temas ordenados por nombre de archivo

Este listado mostrará una barra con varios botones. Dichos botones muestran una letra que será la inicial del nombre del tema.

Una vez hemos pinchado sobre alguna de las letras, se despliegua una lista con la imagen de los temas, una descripción de los mismos, la fecha en la cual han sido subidos, si está disponible por el administrador podremos descargarlo, ir a la web o al blog del artista. El botón clear, dejará todas las listas escondidas.

Estas listas están cargadas como no visibles, esto mejorará la opacidad que, para nuestros servidores de búsqueda, suponen las bases de datos, con ello, esta aplicación proporciona a los robots de búsqueda, la información de los temas de los cuales dispone, para que puedan encontrar vuestra web al ser referenciada en cualquier buscador.

DRAG & DROP

Por último y no menos importante, comentar que tendréis la posibilidad de seleccionar en esta lista cualquier tema de forma individual con el ratón para arrastrarlo y colocarlo sobre el botón play, cuando veáis que el botón play crece, querrá decir que ha detectado el tema que queréis reproducir, solo tendréis que dejarlo caer, (soltar el dedo del ratón) para ver como aparece la pantalla de reproducción con el tema que hemos insertado. En esta demo, deberéis hacer coincidir la descripción del tema (color rojo) en el botón.

Si queréis probar esta demo, pasaros por https://www.etani.es/mp3admin , DISFRUTARLO! y si queréis esta aplicación para vuestro blog, web, etc, deciros que es instalable en cualquier servidor mysql+php, tengáis el CMS que queráis, es compatible con wordpress (desde donde podréis enlazar los temas directamente a vuestro blog, ver el artículo de la parte administrativa), Joomla 1.x (donde está instalada la demo), drupal, etc... contacta con Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo. para más información.

(*)Nota: Los temas han sido descargados de servidores, con la autorización libre y pública de sus autores, los mismos están enlazados al servidor desde donde han sido adquiridos, si por algún motivo, esto no fuera correcto, o el uso de los mismos puede ocasionar algún tipo de infracción, por favor, contacten con Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo. para que el mismo sea retirado.

• Siguiente >