Diseño de aplicaciones online con Macromedia Studio MX (II)
En el artículo anterior estudiamos cómo se podía crear un interface original, atractivo e innovador para un sitio web de música. En este artículo abordaremos el desarrollo de la parte de cara al usuario (front-end) de una de las secciones: la de streaming de audio online.
La sección que comentamos este número, ofrece a los visitantes la posibilidad de consultar un listado de canciones, obtener sugerencias o ver temas populares y, a partir de ahí, el visitante podrá construir una lista de reproducción que va escuchando online mediante la técnica de streaming, que desde Flash MX se encuentra disponible de forma nativa. Para ello utilizaremos Macromedia Flash MX, junto con Macromedia Fireworks MX y Macromedia Freehand 10, todos disponibles en la suite Macromedia Studio MX. Utilizaremos Flash MX para programación, Fireworks MX para la preparación de imágenes y Freehand 10 para el dibujo de todos los símbolos de la película Flash.
Diseño del interface
El interface para esta sección es complejo pues se necesita exponer gran cantidad de información simultáneamente en la ventana del navegador y hay que mantener el esquema lo más simple posible para que el manejo sea sencillo, directo, intuitivo y natural. Establecemos que debe ofrecer los siguientes elementos:
~ Un listado de los temas disponibles para la escucha, con controles para añadir los temas seleccionados a la lista de reproducción, o filtrar los temas que queremos que aparezcan por criterios.
~ Un listado de los temas programados para su reproducción; en esta lista de reproducción debería haber controles para cambiar de canción, detener o iniciar la reproducción, cambiar el orden de los temas incluidos, eliminar los que no queramos, borrar toda la lista, establecer distintos modos de reproducción como pueden ser loop o repetición y random, o reproducción aleatoria, y una opción más técnica que otra cosa: la selección de calidad entre hi-fi y lo-fi. El motivo de la elección de estos términos se debe a la facilidad del usuario para asociarlos con la finalidad real del botón, que es permitir el streaming a usuarios de baja velocidad de conexión, que no podrían escuchar un MP3 a 128 kb/s y 44 Khz en modo streaming. También se incluyen controles propios de reproducción como el control de volumen o de panorama, para regular el efecto estéreo.
~ Alguna forma de identificar la canción seleccionada y de obtener información sobre la misma.
~ Sistemas de sugerencias para orientar al usuario. Optamos por dos sistemas: ofrecer una selección de temas recomendados, y otra sección con las canciones más escuchadas por el resto de usuarios.
~ Por supuesto, un sistema de navegación intuitivo y coherente con el resto del sitio. Esta norma de la coherencia la seguirá toda la estructura, como iremos viendo.
Nos enfrentamos a la cuestión de decidir cómo organizar todo esto en un espacio tan reducido (800x600). Menos si se descuentan menús y barras de scroll del navegador). Lo primero que hacemos es distinguir lo principal de lo accesorio, y rápidamente vemos que los controles de streaming como la lista de reproducción, el listado de canciones disponibles o la información sobre el objeto seleccionado deberían estar siempre visibles, puesto que constituyen el objeto de esta página en concreto. En cambio, las secciones de orientación son de utilidad principalmente al usuario novel, por lo que sería un error de planificación otorgar la misma importancia jerárquica a esta clase de elementos que a los controles anteriormente mencionados. Por tanto decidimos dividir la página en dos zonas: una con las secciones fijas (información, lista de temas disponibles y controles, lista de reproducción y controles), y otra compuesta por un panel múltiple donde se aglutinen el resto de opciones y el usuario escoja cuál quiere ver en cada momento. Este panel irá situado en la parte superior, y el panel fijo en la parte inferior.
Consideraciones previas importantes
Como pautas para el diseño de esta parte del sitio web seguimos las ya indicadas sobre coherencia. Usaremos allá donde sea posible las mismas tipografías, junto con los mismos colores: los dos tonos sepia, el blanco, y un tercer tono sepia más oscuro para resaltar textos, pero que realmente, y como veremos, no se detecta la diferencia a simple vista.
Aunque se hayan tenido en cuenta consideraciones sobre facilidad de manejo u otras referentes a la usabilidad, ha de entenderse que se trata de un sitio web de ejemplo, no de un proyecto real, y por eso nos estamos permitiendo ciertas licencias como usar un interface 100% independiente (si exceptuamos la estética) de otro que ocupa la friolera de más de 100 KB, o utilizar componentes prehechos como el listBox frente a emplear recurrentemente algunos ya implementados en el propio site (como nuestra barra de scroll), por poner sólo un par de ejemplos. Tampoco se encuentran operativas al 100% todas las funciones, por este mismo motivo.
En este artículo nos centraremos en la parte de Flash MX, sobre todo en lo tocante a la programación de la interfaz, y trataremos también las técnicas utilizadas en Fireworks MX. No entraremos en detalles con Freehand puesto que esta herramienta fue objeto de estudio en el artículo anterior y en el presente, debemos mantener la extensión dentro de unos límites razonables. Por este mismo motivo nos vemos obligados a partir de un conocimiento medio-alto de Flash MX; resultaría imposible cubrir la presente interfaz desde nivel básico a nivel avanzado en menos de 30 o 40 páginas
La sección que comentamos este número, ofrece a los visitantes la posibilidad de consultar un listado de canciones, obtener sugerencias o ver temas populares y, a partir de ahí, el visitante podrá construir una lista de reproducción que va escuchando online mediante la técnica de streaming, que desde Flash MX se encuentra disponible de forma nativa. Para ello utilizaremos Macromedia Flash MX, junto con Macromedia Fireworks MX y Macromedia Freehand 10, todos disponibles en la suite Macromedia Studio MX. Utilizaremos Flash MX para programación, Fireworks MX para la preparación de imágenes y Freehand 10 para el dibujo de todos los símbolos de la película Flash.
Diseño del interface
El interface para esta sección es complejo pues se necesita exponer gran cantidad de información simultáneamente en la ventana del navegador y hay que mantener el esquema lo más simple posible para que el manejo sea sencillo, directo, intuitivo y natural. Establecemos que debe ofrecer los siguientes elementos:
~ Un listado de los temas disponibles para la escucha, con controles para añadir los temas seleccionados a la lista de reproducción, o filtrar los temas que queremos que aparezcan por criterios.
~ Un listado de los temas programados para su reproducción; en esta lista de reproducción debería haber controles para cambiar de canción, detener o iniciar la reproducción, cambiar el orden de los temas incluidos, eliminar los que no queramos, borrar toda la lista, establecer distintos modos de reproducción como pueden ser loop o repetición y random, o reproducción aleatoria, y una opción más técnica que otra cosa: la selección de calidad entre hi-fi y lo-fi. El motivo de la elección de estos términos se debe a la facilidad del usuario para asociarlos con la finalidad real del botón, que es permitir el streaming a usuarios de baja velocidad de conexión, que no podrían escuchar un MP3 a 128 kb/s y 44 Khz en modo streaming. También se incluyen controles propios de reproducción como el control de volumen o de panorama, para regular el efecto estéreo.
~ Alguna forma de identificar la canción seleccionada y de obtener información sobre la misma.
~ Sistemas de sugerencias para orientar al usuario. Optamos por dos sistemas: ofrecer una selección de temas recomendados, y otra sección con las canciones más escuchadas por el resto de usuarios.
~ Por supuesto, un sistema de navegación intuitivo y coherente con el resto del sitio. Esta norma de la coherencia la seguirá toda la estructura, como iremos viendo.
Nos enfrentamos a la cuestión de decidir cómo organizar todo esto en un espacio tan reducido (800x600). Menos si se descuentan menús y barras de scroll del navegador). Lo primero que hacemos es distinguir lo principal de lo accesorio, y rápidamente vemos que los controles de streaming como la lista de reproducción, el listado de canciones disponibles o la información sobre el objeto seleccionado deberían estar siempre visibles, puesto que constituyen el objeto de esta página en concreto. En cambio, las secciones de orientación son de utilidad principalmente al usuario novel, por lo que sería un error de planificación otorgar la misma importancia jerárquica a esta clase de elementos que a los controles anteriormente mencionados. Por tanto decidimos dividir la página en dos zonas: una con las secciones fijas (información, lista de temas disponibles y controles, lista de reproducción y controles), y otra compuesta por un panel múltiple donde se aglutinen el resto de opciones y el usuario escoja cuál quiere ver en cada momento. Este panel irá situado en la parte superior, y el panel fijo en la parte inferior.
Consideraciones previas importantes
Como pautas para el diseño de esta parte del sitio web seguimos las ya indicadas sobre coherencia. Usaremos allá donde sea posible las mismas tipografías, junto con los mismos colores: los dos tonos sepia, el blanco, y un tercer tono sepia más oscuro para resaltar textos, pero que realmente, y como veremos, no se detecta la diferencia a simple vista.
Aunque se hayan tenido en cuenta consideraciones sobre facilidad de manejo u otras referentes a la usabilidad, ha de entenderse que se trata de un sitio web de ejemplo, no de un proyecto real, y por eso nos estamos permitiendo ciertas licencias como usar un interface 100% independiente (si exceptuamos la estética) de otro que ocupa la friolera de más de 100 KB, o utilizar componentes prehechos como el listBox frente a emplear recurrentemente algunos ya implementados en el propio site (como nuestra barra de scroll), por poner sólo un par de ejemplos. Tampoco se encuentran operativas al 100% todas las funciones, por este mismo motivo.
En este artículo nos centraremos en la parte de Flash MX, sobre todo en lo tocante a la programación de la interfaz, y trataremos también las técnicas utilizadas en Fireworks MX. No entraremos en detalles con Freehand puesto que esta herramienta fue objeto de estudio en el artículo anterior y en el presente, debemos mantener la extensión dentro de unos límites razonables. Por este mismo motivo nos vemos obligados a partir de un conocimiento medio-alto de Flash MX; resultaría imposible cubrir la presente interfaz desde nivel básico a nivel avanzado en menos de 30 o 40 páginas
