videos marca usuario - estaticos.marca.comestaticos.marca.com/deporte/pdf/videos_marca.pdf · 5 la...

22
1 VÍDEOS MARCA es una aplicación desarrollada en flash que permite navegar, buscar y reproducir los vídeos que MARCA.com va publicando. http://www.marca.com/videosmarca/ 1. VISUALIZACIÓN La aplicación intenta ajustarse de forma óptima a las dimensiones de pantalla del usuario de dos formas. De inicio con el tamaño más apropiado de las previsualizaciones a cargar, y después con el reajuste de los contenidos y elementos de la interfaz si la ventana se redimensiona. Ejemplos de visualización: Resolución a 1920x1200

Upload: dinhthuy

Post on 28-Oct-2018

214 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: videos marca usuario - estaticos.marca.comestaticos.marca.com/deporte/pdf/videos_marca.pdf · 5 La apariencia puede variar en función de las dimensiones de la pantalla o de la elección

1

VÍDEOS MARCA es una aplicación desarrollada en flash que permite navegar, buscar y reproducir los vídeos que MARCA.com va publicando.

http://www.marca.com/videosmarca/

1. VISUALIZACIÓN La aplicación intenta ajustarse de forma óptima a las dimensiones de pantalla del usuario de dos formas. De inicio con el tamaño más apropiado de las previsualizaciones a cargar, y después con el reajuste de los contenidos y elementos de la interfaz si la ventana se redimensiona. Ejemplos de visualización: Resolución a 1920x1200

Page 2: videos marca usuario - estaticos.marca.comestaticos.marca.com/deporte/pdf/videos_marca.pdf · 5 La apariencia puede variar en función de las dimensiones de la pantalla o de la elección

2

Resolución a 1280x800

Reducida, en una pantalla de 1280x800

Page 3: videos marca usuario - estaticos.marca.comestaticos.marca.com/deporte/pdf/videos_marca.pdf · 5 La apariencia puede variar en función de las dimensiones de la pantalla o de la elección

3

Page 4: videos marca usuario - estaticos.marca.comestaticos.marca.com/deporte/pdf/videos_marca.pdf · 5 La apariencia puede variar en función de las dimensiones de la pantalla o de la elección

4

2. MINIATURAS

Éste es el aspecto medio que la aplicación muestra al acceder a ella variando el canal o el número de los contenidos a mostrar.

Destacada se encuentra el área de previsualizaciones o miniaturas de los vídeos. Aquí figuran en orden cronológico y de relevancia los vídeos de cada canal o búsqueda realizada.

Page 5: videos marca usuario - estaticos.marca.comestaticos.marca.com/deporte/pdf/videos_marca.pdf · 5 La apariencia puede variar en función de las dimensiones de la pantalla o de la elección

5

La apariencia puede variar en función de las dimensiones de la pantalla o de la elección del usuario mediante el selector que se encuentra en la parte superior derecha de las previsualizaciones.

Con los contenidos mostrados se puede ‘avanzar o retroceder en el tiempo’ porque los vídeos se van listando desde la fecha más reciente a la más antigua. Para avanzar de página hay varios métodos.

Los más evidentes son los botones que se encuentran en la parte inferior, centrados en la pantalla.

Page 6: videos marca usuario - estaticos.marca.comestaticos.marca.com/deporte/pdf/videos_marca.pdf · 5 La apariencia puede variar en función de las dimensiones de la pantalla o de la elección

6

Estos botones tienen dos propósitos. El principal es avanzar, retroceder o volver al inicio de las miniaturas de los vídeos del canal. El segundo es dejar claro si existe (botón blanco) o no (botón atenuado) más contenido disponible. También se puede navegar por estas previsualizaciones con la rueda del ratón (o equivalente en trackpad, en Windows o Mac), o con el teclado: CURSOR ARRIBA Retrocede una página CURSOR ABAJO Avanza una página TECLA INICIO Vuelve a la primera página TECLA FIN Avanza a la última página Otra forma de moverse por las miniaturas es un indicador que se encuentra a la derecha de éstas y en el que figura el texto ‘TIMELINE’.

Al poner el cursor encima, este indicador da una idea de la fecha en la que esos vídeos fueron publicados y el porcentaje total que representan en todo el listado. Cada rombo del ‘timeline’ representa una página y la actual es la que tiene el rombo en blanco. Si se pulsa en estos rombos también puedes desplazarte a esa página. Las líneas verticales rojas hacen referencia al volumen de vídeos proporcional al rango de fechas. En el ejemplo, al hacer ‘rollover’ sobre la línea más pronunciada aparece que la mayor presencia de vídeos es relativa a la última semana (más de dos días y menos de ocho) con un 33% y se puede ver cómo comprende un número de seis páginas. Si se pulsa en esas áreas te desplaza al inicio de ese periodo.

Page 7: videos marca usuario - estaticos.marca.comestaticos.marca.com/deporte/pdf/videos_marca.pdf · 5 La apariencia puede variar en función de las dimensiones de la pantalla o de la elección

7

3. CANALES Una de las partes importantes de la aplicación es el menú de canales al que se accede acercando el cursor a la palabra ‘Canales’ que aparece en la parte izquierda de las miniaturas de los vídeos.

Cuando el cursor está sobre el menú de canales aparecen dos tipos de opciones. El canal simple y el agrupador. El simple no tiene ningún subnivel, mientras que el agrupador contiene a su vez otros contenidos y se diferencia en que tiene a la derecha un signo ‘+’ que indica que es ampliable.

Cuando un canal se encuentra activo puede verse una correspondencia en la parte superior de las previsualizaciones, además de quedar marcado en gris claro en el propio menú.

Page 8: videos marca usuario - estaticos.marca.comestaticos.marca.com/deporte/pdf/videos_marca.pdf · 5 La apariencia puede variar en función de las dimensiones de la pantalla o de la elección

8

En el momento en el que se accede a un canal agrupador, aparecen las categorías correspondientes:

Page 9: videos marca usuario - estaticos.marca.comestaticos.marca.com/deporte/pdf/videos_marca.pdf · 5 La apariencia puede variar en función de las dimensiones de la pantalla o de la elección

9

En este ejemplo del canal de ‘BALONCESTO’, aparecen las categorías de ‘BALONCESTO’, ‘ACB’, ‘EUROLIGA’ y ‘NBA’. Si se selecciona ‘BALONCESTO’, aparecerán todos los vídeos de baloncesto, independientemente de la categoría. Sin embargo, si se selecciona ‘NBA’, por ejemplo, sólo aparecerán los vídeos de NBA, no los de otras categorías como ACB o Euroliga. Se podría decir que cada elemento de ese menú hace de filtro en función de la catalogación de los vídeos. Para volver a los contenidos del menú principal basta con pulsar en la palabra ‘CANALES’ que aparece encima de todos los canales destacado con una sombra con forma de flecha a la izquierda.

4. FILTRAR LOS VÍDEOS DE UN CANAL La aplicación de VÍDEOS MARCA también permite filtrar los vídeos por catalogaciones (etiquetas). Siempre que haya suficientes vídeos con diferentes catalogaciones dentro de un mismo canal, en la parte superior izquierda de las miniaturas, junto al indicador del canal que está activo, aparecerá un botón con el texto ‘escoger en…’.

Al accionarlo se despliega un panel con los diferentes filtros disponibles para ese canal y, al volver a pulsarlo, el panel desaparece.

Page 10: videos marca usuario - estaticos.marca.comestaticos.marca.com/deporte/pdf/videos_marca.pdf · 5 La apariencia puede variar en función de las dimensiones de la pantalla o de la elección

10

Este panel nos ofrece de forma alfabética las categorías más reseñables de los vídeos del canal activo en ese momento en función de la cantidad y la actualidad. Los temas más representados aparecerán en un tamaño mayor y en tonos cálidos, mientras que con menor tamaño y tonos fríos saldrán los asuntos menos reseñables en ese momento. De esta manera, además de tener la opción de realizar un filtro de vídeos seleccionando una categoría, esta opción permite palpar la actualidad en forma de nube.

Al seleccionar una categoría, aparecerán debajo las miniaturas de los vídeos catalogados de esa forma dentro del canal activado. Si ya hubiera alguna etiqueta seleccionada, se reemplazaría por la nueva.

Page 11: videos marca usuario - estaticos.marca.comestaticos.marca.com/deporte/pdf/videos_marca.pdf · 5 La apariencia puede variar en función de las dimensiones de la pantalla o de la elección

11

Ejemplo de ‘MARCATOONS’: Al filtrar por categoría queda junto al anterior botón (‘escoger en...’) un nuevo botón con la etiqueta seleccionada y el número de vídeos que la componen. Si se pulsa sobre este botón se restaurará el canal y desaparecerá el filtro.

Page 12: videos marca usuario - estaticos.marca.comestaticos.marca.com/deporte/pdf/videos_marca.pdf · 5 La apariencia puede variar en función de las dimensiones de la pantalla o de la elección

12

5. BUSCAR VÍDEOS En la parte superior de la aplicación de VÍDEOS MARCA hay un campo de búsqueda.

Haciendo ‘clic’ con el cursor sobre la caja de ‘introducir nueva búsqueda’ se podrá comenzar a escribir las palabras claves de nuestra búsqueda. Para poder lanzar una búsqueda son necesarios al menos de tres caracteres. Cuando se escriben las tres primeras letras, el botón ‘buscar’ (equivalente a la tecla ENTER) se activa en la parte derecha de la caja.

Además, para que la experiencia de buscar un vídeo sea más, esta aplicación incluye una pequeña ayuda basada en las categorías de contenidos ya cargados para sugerir posibles términos de búsqueda. Muchas de las búsquedas suelen hacerse en relación a temas de actualidad. Aprovechando esta circunstancia, VÍDEOS MARCA busca coincidencias entre las catalogaciones de los vídeos existentes y el texto introducido en la búsqueda. Un par de ejemplos:

Page 13: videos marca usuario - estaticos.marca.comestaticos.marca.com/deporte/pdf/videos_marca.pdf · 5 La apariencia puede variar en función de las dimensiones de la pantalla o de la elección

13

Al comenzar a escribir ‘tou’, la aplicación localiza una posible sugerencia porque existe una catalogación en uno de los vídeos con ‘Tour de Francia 2012’.

Al comenzar a escribir ‘real’ nos localiza tres posibles coincidencias. Si alguna de las opciones sugeridas es la deseada, bastaría con moverse con el cursor arriba o abajo y darle ‘clic’ (o pulsar enter) para lanzar esa búsqueda.

Page 14: videos marca usuario - estaticos.marca.comestaticos.marca.com/deporte/pdf/videos_marca.pdf · 5 La apariencia puede variar en función de las dimensiones de la pantalla o de la elección

14

Si realizamos la búsqueda de vídeos seleccionando una de las opciones del desplegable, ésta se realizará en función de la etiqueta elegida, mientras que si no es seleccionada ninguna, la búsqueda se hará en función del texto libre escrito en la caja correspondiente. Al buscar -como en el ejemplo anterior- ‘Real Mallorca’, nos da como resultado lo siguiente:

Cuando se realiza una búsqueda, los contenidos encontrados generan una sección nueva a la que se puede acceder desde el botón de la parte superior llamado ‘BÚSQUEDAS’. Éste nos permite guardar la última búsqueda realizada, mientras que en el botón contiguo ‘CONTENIDOS’ -previamente inactivo-, estarán disponibles los contenidos por los que navegábamos antes de la búsqueda.

Para ayudar a diferenciar dónde nos encontramos en cada momento, los resultados de las búsquedas tienen detalles (textos, fechas, números) en un color azulado, mientras que si no es una búsqueda los contenidos tienen esos detalles en blanco o gris.

Page 15: videos marca usuario - estaticos.marca.comestaticos.marca.com/deporte/pdf/videos_marca.pdf · 5 La apariencia puede variar en función de las dimensiones de la pantalla o de la elección

15

En la parte superior de las miniaturas aparecerá ‘Búsqueda’ como indicador de sección, el termino de la búsqueda y el número de vídeos encontrados. Los resultados de la búsqueda funcionan como si fuera un canal más, y si el número de resultados lo requiere, la aplicación permitirá filtrarlos. Tanto cambiando de pestaña a ‘CONTENIDOS’, como a ‘VISOR’ -si estuviese activo- o seleccionando el menú de canales, se sale de los resultados de la búsqueda (aunque permanecerán accesibles en la parte superior con el botón ‘BÚSQUEDAS’).

6. ‘TU PLAYLIST’ Esta parte de la aplicación sirve como ‘almacén temporal’ para acceder a una selección personal de vídeos de forma rápida y sencilla. Se pueden conservar en el ordenador un máximo de 25 vídeos.

El área que acciona la aparición del ‘playlist’ se encuentra en la parte inferior central. Aparece cuando dejamos el puntero del ratón unos instantes en esa zona.

Page 16: videos marca usuario - estaticos.marca.comestaticos.marca.com/deporte/pdf/videos_marca.pdf · 5 La apariencia puede variar en función de las dimensiones de la pantalla o de la elección

16

¿Cómo añadir y quitar elementos de ese ‘playlist’? Muy sencillo. Al pasar el ratón por encima de las previsualizaciones de los canales o búsquedas aparece un icono con un más o un menos en función de si el vídeo está ya o no en nuestro ‘playlist’.

Page 17: videos marca usuario - estaticos.marca.comestaticos.marca.com/deporte/pdf/videos_marca.pdf · 5 La apariencia puede variar en función de las dimensiones de la pantalla o de la elección

17

Pinchando sobre el verde con un ‘+’ se añade ese vídeo al ’playlist’, mientras que si está en rojo y con un ‘-‘ es que ese vídeo ya está en el ‘playlist’ y se puede quitar haciendo ‘clic’. También pueden eliminarse los vídeos desde el mismo ‘playlist’.

Pasando con el ratón sobre la miniatura del vídeo del ‘playlist’ aparece el título del vídeo.

Pasando el ratón por el icono con el ‘-‘ y la flecha roja, la aplicación muestra el título del vídeo y la opción de eliminarlo del ‘playlist’. Si el número de vídeos del ‘playlist’ es grande, aparecerá una franja gris que permite acceder al resto de vídeos que no aparecen entre las miniaturas visibles. Otra peculiaridad del ‘playlist’ es que cuando se entra a la aplicación con el enlace directo a un vídeo, éste se deposita al final del ‘playlist’. Importante: Si se borran los archivos temporales del navegador, también se borrarán estos vídeos de nuestro ‘playlist’ personal. Esta funcionalidad no está pensada para almacenamiento permanente si no como ayuda temporal al usuario.

Page 18: videos marca usuario - estaticos.marca.comestaticos.marca.com/deporte/pdf/videos_marca.pdf · 5 La apariencia puede variar en función de las dimensiones de la pantalla o de la elección

18

7. ‘ PLAYER’ Desde cualquier previsualización (canal, búsqueda o ‘playlist’), haciendo ‘clic’ sobre la miniatura se reproduce el vídeo en el ‘VISOR’.

En este caso, al comenzar a reproducirse el vídeo, se activa el ‘visor’ en la parte superior de la aplicación con un característico color verde. Si se vuelve al listado de ‘CONTENIDOS’ o de ‘BUSQUEDAS’, el vídeo en reproducción permanecerá en la sección ‘VISOR’ y se quedará en pausa hasta que se vuelva a él o se seleccione otro vídeo. Junto a la etiqueta ‘VISOR’ figura un icono con el estado de la reproducción. Al volver al listado de ‘CONTENIDOS’ o ‘BÚSQUEDAS’, la imagen del vídeo activo se verá señalada con un marco verde tanto en el listado como en el ‘playlist’ si estuviera en él.

Page 19: videos marca usuario - estaticos.marca.comestaticos.marca.com/deporte/pdf/videos_marca.pdf · 5 La apariencia puede variar en función de las dimensiones de la pantalla o de la elección

19

Volviendo al visor tenemos el controlador de la reproducción del vídeo.

Este controlador es muy similar al resto de ‘players’ de MARCA.com. De izquierda a derecha:

• Con el botón inicial se vuelve al comienzo del vídeo. • El botón PLAY/PAUSE reproduce, detiene o reanuda el vídeo. • El tercer botón permanece actualmente inactivo. • La barra de reproducción muestra la carga actual y el progreso del vídeo (algunos vídeos permiten

el avance aunque no estén completamente cargados arrastrando el manejador o haciendo clic en algún punto de la barra).

• Haciendo clic sobre el TIEMPO se cambia del transcurrido, al restante y al total. • VOLUMEN • MENÚ da acceso a 4 opciones: INFO, COMPÁRTELO, ENVÍALO Y PÓNTELO (*) • PANTALLA COMPLETA

Todos estos botones desaparecerán si el vídeo está en reproducción y el cursor no está sobre el controlador. Para volver a verlos basta con al mover de nuevo el ratón.

Page 20: videos marca usuario - estaticos.marca.comestaticos.marca.com/deporte/pdf/videos_marca.pdf · 5 La apariencia puede variar en función de las dimensiones de la pantalla o de la elección

20

(*) Cuatro opciones dentro del ‘MENÚ’ de cada vídeo:

1. Por defecto, el menú del cada vídeo se abre en la opción ‘INFO’ donde se muestra el titular, un pequeño texto, la fecha de creación, el autor y el enlace a la NOTICIA en MARCA.com.

Si el vídeo tiene una noticia correspondiente en MARCA.com, también podrá verse con los formatos grandes de previsualización.

Page 21: videos marca usuario - estaticos.marca.comestaticos.marca.com/deporte/pdf/videos_marca.pdf · 5 La apariencia puede variar en función de las dimensiones de la pantalla o de la elección

21

2. En ‘COMPÁRTELO’ se encuentran los accesos para compartir el vídeo en las redes sociales más populares. Estos accesos abren una ventana nueva con el enlace y la descripción -si la admite- ya preparados para publicar. Es necesario estar registrado/logueado en la red social elegida.

Existe un atajo para compartir los vídeos desde las previsualizaciones de los vídeos con el botón derecho para copiar la url y publicar en las redes más populares.

Page 22: videos marca usuario - estaticos.marca.comestaticos.marca.com/deporte/pdf/videos_marca.pdf · 5 La apariencia puede variar en función de las dimensiones de la pantalla o de la elección

22

3. La opción ‘ENVÍALO’ permite mandar el enlace al vídeo a una o varias personas separando sus

direcciones de correo electrónico por comas.

4. La opción ‘PÓNTELO’ nos permite obtener el código en html para insertar el vídeo en una página web. Sólo pueden ser compartidos los vídeos de los que somos autores o tenemos permisos en MARCA.