Hoy voy a hacer un post ligerito. Ligerito como el reproductor flash de mp3 niftyPlayer.

Simplemente se trata de un reproductor de mp3, hecho con la tecnología flash, listo para integrarse en una web. Además podemos interactuar con él de forma muy sencilla via JavaScript.

Cómo usarlo

Una vez hayamos descargado los archivos necesarios, sólo hay que insertar este código en nuestro documento web:

Lo único que tenemos que editar es, en la segunda fila, las variables GET file y as. “file” es el nombre del archivo .mp3, y as valdrá 1 si queremos que empiece a reproducir automáticamente, o 0 (cero) de lo contrario.

Interacción JavaScript

Es realmente sencillo. Lo primero de todo es incluir en la cabecera del documento HTML esta línea:

Los métodos de que disponemos son los siguientes:

Play Toggle

Si el reproductor estaba en play, pasa a pause, y viceversa

O también Play y Pause por separado

Stop

Detiene la canción y se va al principio

Cargar nuevo archivo mp3

Si queremos cargar, y a continuación empezar a reproducirlo:

Asociar eventos del reproductor

Por ejemplo, asociamos una función nuestra al evento de comenzar la reproduccion (play)

También contamos con los eventos onPause y onStop

Obtener estado del reproductor

Devolverá un texto de entre “playing“, “stopped” y “paused“, dependiendo del estado del reproductor

Y eso es todo! Fácil, verdad? Qué te parece esta aplicación? La usarás? Para qué?
Te espero en los comentarios, ahí siempre hace buen clima n_n

Estreno esta sección-barra-cosa en Boozox, que se llama “Me encanta“.

Creo que resulta obvio en qué consiste.

Hoy quiero gritar al mundo, que me encanta Deezer. En esta web puedes escuchar millones de canciones, sin descargarte nada, legalmente, con muy buen diseño y en español.

Lo que más me gusta es que puedes crear listas de reproducción, o guardarte discos enteros en favoritos, además tienen varias radios de estilos musicales. Así puedo ponerlos a reproducir y dejarlo como fondo musical mientras trabajo.

Definitivamente, por mi parte Deezer merece un “Me encanta“.

Brevemente voy a introducir el uso de la extensión DOM.XML de PHP

Podemos leer un archivo XML a partir de una cadena de texto (con domxml_open_mem) o diciendo dónde está el archivo XML ( con domxml_open_file)

Como ejemplo usaremos el archivo XML que proporciona el API Google Weather (no documentada) para hacer predicciones meteorológicas en determinado lugar.

El método más importante es get_elements_by_tagname, que nos devuelve los tags que tienen ese nombre, en forma de array.

En nuestro caso, vamos a hacer una comprobación por si el documento XML nos informa de que ha habido un error, con el tag problem_cause ver ejemplo

Para obtener la descripción, tendremos que usar el método get_attribute_node que nos dice el valor del atributo que queramos, para un elemento [nombreTag atributo="valor"].

Y ahora, vamos a ir directos al ajo. Echad un vistazo a la estructura del API Google Weather, y al siguiente código, después lo explico.

[Ver resultado]

La función que se define al comienzo sirve para ahorrarnos código al extraer el atributo “data” de los nodos, porque todos los tags tienen lo importante ahí.

El resto del código creo que está bastante claro. Puedes ver una [Demo] y el [código fuente].

Si te ha gustado el post, te parece interesante, o tienes dudas escríbeme un comentario, tengo ganas de leerte!

Nota: Si no tienes esta extensión instalada en tu host, pregunta al servicio técnico para que te lo instalen, o mira esta página para hacerlo tú mismo.

En la mayoría de los casos, la intuición y la experiencia son la mejor arma para el éxito en nuestras aplicaciones. Sin embargo, tener claras unas ciertas directrices puede ayudarnos mucho durante el proceso.

Antes que nada, dos cosas básicas: papel y boli, y sobretodo paciencia. Nada sale a la primera, es muy importante el proceso de preparación, y el de prueba y error. Un replanteamiento radical a veces puede ser necesario, no creas que has perdido el tiempo, todo lo contrario.

Simplicidad

Yo diría que es el pilar fundamental del diseño. Deberemos esforzarnos al máximo por que nuestra aplicación resulte sencilla para el usuario al que va destinado.

Usaremos estructuras uniformes y con rejilla (niveles de información a la misma altura). Lo ideal es que haya un foco principal, que atraiga la atención en una primera mirada. Si uniformizamos el contenido resultaría imposible detectar lo importante, y el usuario se asusta, aburre y huye (en ese orden).

Sección de tarifas en las webs de Yoigo y la de Movistar

Usaremos una misma paleta de colores en todo el diseño. Preferiblemente un color blanco de fondo, un color principal, y otro secundario. Hay que tener siempre presente la psicología del color (rojo altera, pasión; verde relaja, naturaleza; azul calma, informa, cielo o mar; amarillo excita, alerta, no se distingue bien; naranja extraño, curioso, diferente ….)

También buscaremos simplicidad en la estructura de las secciones, haremos que sea clara, pocas secciones bien diferenciadas, substituyendo subsecciones por rutas de contenido en cada seccion.

Originalidad

Nos podemos ganar la confianza del usuario si le conseguimos sorprender. A fin de cuentas sorprender es estimular, crear reacción en la persona. Esto da fuerza y identidad a nuestra página. Mi recomendación es dejarse llevar, con mucho cuidado de no perturbar el orden lógico de las cosas.

Pueden ser guiños sutiles, alteración del lenguaje, huevos de pascua, imágenes curiosas o llamativas… imaginación al poder!

Guardar un artista como favorito, en nvivo pulsas sobre “soy fan”, y te contesta con un desenfadado “yeah”

Modelizar usuarios

Este trabajo resulta fundamental e imprescindible. Consiste en analizar todos los usuarios tipo que van a utilizar nuestra aplicación (o que pueden estar potencialmente interesados).

Tendremos que reflexionar profundamente, quién y por qué querrá usar nuestra herramienta, para tenerles preparado lo que esperan, apelando a sus necesidades. Para esto tenemos que emplear ganchos fáciles de identificar (sin mucho texto, llamativos, interesantes)

Es muy importante llamar la atención de todos y cada uno de estos modelos en nuestra portada, y en menor medida en el resto de secciones. Hay que conseguir que cada usuario siga una ruta natural, previamente establecida.

En Flickr tienen muy claro lo que ofrecen, y te lo exponen en la portada para que elijas

Diferénciate

Si haces lo mismo que otro, sobras. Deja claro a tus usuarios que tienes algo distinto que los demás, que te lo has currado, que destacas sobre el resto que se te parecen. Pero sin timar a nadie, que sea verdad!

Trata de conseguir una identidad, que se te reconozca con una palabra, un logo, una tipografía, unos colores… Si consigues que el usuario se quede con tu cara, y le gusta lo que le das, da por seguro que volverá y traerá más gente consigo.

Consejo final

Pero ante todo, disfruta haciéndolo. Porque te gusta.

Te recomiendo leer “Profesional CSS Hojas de estilo en cascada para el diseño Web. Ed. ANAYA Col.De Programadores, para Programadores“; sobretodo primeros capítulos.

Según comentan en AyudaWordpress Imaset es incompatible con WordPress 2.6.

Pero yo lo he probado y sí me ha funcionado correctamente.

De modo que si tienes algún problema en Imaset, ya sea porque has cambiado de versión o por cualquier otra causa, deja un comentario en este post para que lo solucionemos cuanto antes.

Lo que sí es cierto es que Imaset explora toda la carpeta wp-content para buscar imágenes, pero no contempla el hecho de que esta carpeta se encuentre fuera de la ruta usual (hecho que permite la nueva versión de WordPress). Esto se tendrá en cuenta para próximas versiones.

En este blog siempre hay un hueco para el gigante Google, que no está quieto ni un segundo.

Lo primero que destacaría es su reciente rastreo de archivos Flash. Esto no me acaba de gustar, como ya dije en un post hace un tiempo la tecnología flash puede resultar útil en algunos casos muy concretos (mostrar contenido audiovisual principalmente) pero en la creación de páginas web resulta inservible, y conlleva una importante lista de desventajas.

Sin embargo, el objetivo principal de Google, según dicen, es “Organizar toda la información que hay en el mundo“, y en esa definición entran también los archivos Flash.

Otra noticia interesante es que recientemente se está ofreciendo Street View (la aplicación para ver fotografías a pie de calle en Google Maps) en algunas zonas del territorio francés, y ya se ha anunciado que pronto se mostrará en España. Eso sí, únicamente en las ciudades Madrid, Sevilla, Barcelona y Valencia. Esta última, por fortuna, ciudad donde vivo. De hecho se ha visto el coche de Street View a un par de calles de donde vivo.

Por último mencionar cosas como que Google se instala en África para promocionarse y mejorar el soporte en el continente, que ha liberado un formato que utilizan internamente en substitución del estándar XML, o que ha participado en varios desfiles del orgullo Gay (de varias ciudades del mundo), con sus propias carrozas y elementos identificativos.

Si google tiene futuro es porque no deja de moverse y sorprender, es el espíritu emprendedor que le caracteriza.

Via Dirson

Para volver a la carga este verano, me gustaría comenzar presentando esta genial aplicación para todo amante de la música en directo.

Nvivo es un portal donde conocer artistas y salas, y donde estar al tanto de todos sus conciertos. Con el lema de “No vuelvas a perderte un concierto” ofrece servicios para que estés siempre informado de lo que te interesa.

Además podemos decir que pertenece al territorio 2.0, porque cuenta con una comunidad abierta, y permite a los usuarios tomar el control de toda la información (bajo supervisión de 13 editores)

Considero que este tipo de iniciativas son muy positivas para lo que los internautas concebimos como el futuro de la cultura musical, un futuro lleno de tags, donde encontramos a los artistas que nos gustan y estos conseguen la auténtica visibilidad que merecen, promocionándose y vendiendo su auténtico producto: la música en directo.

Os invito a todos y todas a que os registréis y os dejéis llevar por la magia que esconde Nvivo y su comunidad.

Descarga Imaset 2.2

La nueva versión de Imaset ya ha llegado!

Imaset 2.2 es compatible con WordPress 2.5 y además trae algunas mejoras:

• Mejor calidad en la previsualización, y más respeto a las imágenes PNG en el canal alpha
• Dos nuevos filtros
• Transferencia correcta de Marcas de agua con PNG
• Interfaz mejorada, y adaptada al nuevo look de WP

Instalación

Instalar Imaset es muy sencillo:

• Descarga el archivo imaset_2-2.zip
• Descomprime el contenido en tu ordenador
• Sube la carpeta imaset/ por ftp a tu servidor, en la carpeta wp-content/plugins/
• Activa el plugin en la sección Plugins del panel de administración WordPress
• Ya está!

Usar la herramienta

Una vez el plugin está activado, aparecerá en el panel de escritura un botón con la palabra “Imaset”. Al pulsar este botón se abrirá el panel de Imaset, mostrando tus imágenes, y los filtros disponibles divididos en categorías.

Marcas de agua

Poner marcas de agua de tu web es muy sencillo, y ahora se respeta la transparencia del PNG, así que puedes añadir efectos interesantes!

Busca entre los filtros de la categoría “Personalizar” el de “marca de agua“. Pulsa en la varita mágica y selecciona el archivo de la imágen (debe estar almacenada en el directorio llamado src/) y el lugar donde posicionarlo.

Filtros incluidos

• Sombra
• Marco
• Reflejo
• Reflejo3D
• Brillo
• Perspectiva
• Glossy
• Invertir colores
• Colorizar
• Desenfoque suave
• Desenfoque fuerte
• Desenfoque gaussiano
• Marca de Agua
• Redimensionar

Recuerda siempre Guardar los cambios antes de cerrar el programa Imaset.

Agradecimientos:

Me gustaría agradecer a Patricio Villa, Francesc Josep, Francisco Espinoza, y a todas las personas que usan, apoyan y se interesan por Imaset.

Feedback necesario

Para que Imaset avance y mejore, es imprescindible vuestra ayuda. Comenta qué te parece, cómo puede mejorar Imaset, si tienes problemas, etc…

Hace un tiempo que vengo recibiendo peticiones para que desarrolle una siguiente versión de Imaset, que sea compatible con el nuevo WordPress 2.5.

He de decir en mi defensa que, aúnque me encantaría desarrollar cuanto antes esta nueva versión, dispongo de poco tiempo, y lo dedico al desarrollo de varios proyectos, últimamente con cierto énfasis al proyecto de Geo.

Pero la nueva versión ya está en marcha. Un nuevo núcleo está en desarrollo, hay nuevos filtros muy interesantes, y tengo planeada una interfaz mucho más manejable. No puedo dar ninguna fecha, pero sabed que no me he olvidado de este plugin.

Así que si os interesa esta nueva versión de Imaset, no perdáis de vista este blog, y no dudéis en escribir sugerencias que las tendré todas en cuenta.

El otro día estaba en mi habitación picando teclas cuando mi compañero Alex me preguntó sobre cómo demonios se instalaba Firefox 3 (beta 5) descargado desde la web de Mozilla. Quizás sea un buen momento para hablar de como hacerlo.

Muchas empresas o incluso programadores se toman la libertad de compilar ellos mismos el código fuente de la aplicación que quieren dar a conocer para ahorrar la molestia a los usuarios (muchas veces por vagos ni nos molestamos en compilar). Suele venir en un paquete deb o rpm pero la gran mayoría de las veces lo hace como un paquete comprimido (suele ser .tar.gz). Es el caso de Mozilla con Firefox.

Podemos descargar Firefox en nuestro idioma y para nuestro Sistema Operativo. Vendrá en un paquete .tar.gz (un paquete comprimido) con lo que dentro estarán los binarios (previamente compilados). Podríamos entender que dentro de eso está el programa que queremos “instalar“.

Como ya sabéis, en Linux las cosas no se instalan… bueno, no existe una carpeta específica para instalar las cosas. No es que las podamos instalar donde queramos, que también, pero el sistema nos da esa libertad. Yo, por mi parte, recomendaría su instalación en /opt/firefox/ y aun así, si solo queremos echar un vistazo simplemente ejecutarla desde el propio fichero descomprimido (sin instalar).

Un proceso sencillo y en modo gráfico sería algo algo así:

1. Descomprimimos el fichero descargado .tar.gz (donde sea).
2. Obtendremos una carpeta llamada firefox. Su contenido o ella misma la deberemos copiar a /opt/firefox o la que hayamos decidido… (recuerda ejecutar nautilus como root: $ sudo nautilus /opt/ (en caso de gnome en Ubuntu) sino no tendrás privilegios en esa carpeta).
3. Ejecutamos Mozilla Firefox con doble clic en el fichero llamado firefox ó $ /opt/firefox/firefox ó $ ./firefox si estamos en el mismo directorio.
4. ¡A probarlo!

Resumen: Descomprimes, copias el directorio donde se quiera y… ejecutas la aplicación.

Nota: No intentes abrir Firefox 3 con otra versión de Firefox abierta pues se abrirá otra ventana de la versión que tienes ya abierta. Cierra antes cualquier proceso de la versión anterior (aplicable a cualquier Sistema Operativo).
Nota2: Mozilla Firefox comparte TODAS las preferencias, cookies, historial y bueno, todo xD. Así que posiblemente al volver a la versión 2 de Mozilla Firefox tengáis ciertas cosas modificadas. Si no sabéis solucionarlo preguntad.