CANAL 5
USER STORIES
GENERALIDADES
1. Siempre que se indique que un elemento tiene opacidad esta
por defecto deberá ser del 80%.
2. Cuando se indique un efecto de transición este deberá
considerar un tiempo de 0.5 segundos.
3. Al hacer hover en un enlace este siempre se subrayará.
4. El logo de ‘Canal 5’ ubicado en la barra de navegación y footer
del HOME e INTERIORES deberá tener comportamiento de
botón y cuando el usuario haga single click deberá cargar el
contenido de HOME.
5. Todos los íconos, incluyendo los del feed de redes sociales,
bajarán su opacidad en hover.
6. Cuando el usuario haga un single click sobre cualquier enlace
deberá debe permanecer en la misma página, es decir se
empleará la función target: _self, a menos que se especifique
otro comportamiento.
7. Todo elemento de contenido tiene la función de un botón a
excepción de los stages principales que tendrán sus propios
enlaces.
8. Todo elemento de contenido deberá tener dos líneas de texto,
en las cuales deberá colocarse un título y una descripción,
respetando los siguientes casos:
Case (Texto en elemento de contenido)
1: if (título == ocupa 1ª línea)
{
descripción à va 2ª línea;
}
2: if (título == ocupa 2 líneas)
{
descripción à no se escribe;
título à ocupa 2 líneas;
}
3: if (título > ocupa 2 líneas)
{
título à ocupa dos líneas;
título à lleva elipsis.
descripción à no se escribe;
}
1. BARRA DE NAVEGACIÓN
Barra de navegación del home de Canal 5
La barra de navegación se compone del logotipo del Canal 5, menú de
navegación con 7 categorías y 3 botones.
Comportamiento del logotipo de marca
En los interiores el logotipo de marca será diferente al del home.
Barra de navegación para interiores
Comportamiento genérico de las categorías
Siempre que el usuario realice un single click en cualquier categoría esta mantendrá su estado activo.
Si un usuario hace hover sobre una categoría cambiará a su opacidad.
Comportamiento de las categorías ‘PROGRAMAS’, ‘PELIS’ y ‘PROMOS’
Si el usuario hace single click sobre cualquiera de estas categorías deberá desplegarse un menú estilo dropdown.
DROPDOWN
• El menú dropdown sólo será visible mientras el usuario mantenga el cursor dentro del menú desplegable, de lo contrario deberá ocultarse. • Dentro del dropdown aparecerá un contenido destacado con thumb,
título y descripción. El hover sobre el thumb deberá activar la opacidad del elemento.
• En el caso de ‘PROGRAMAS’ y ‘PELIS’ existe un enlace ver todos que deberá dirigir al usuario al índice correspondiente.
Comportamiento de los botones ‘COMUNIDAD 5’, ‘FACEBOOK’ y ‘TWITTER’
Los 3 botones ubicados al final de la barra de navegación deberán tener el siguiente comportamiento:
CASE (single click) {
COMUNIDAD 5: Página correspondiente (target: _blank);
TWITTER y FACEBOOK: Desplegará el API correspondiente debajo de la barra de navegación.
}
2. FOOTER
Footer
El footer se compone del logotipo de Canal 5, 4 botones, enlaces a las
7 categorías del sitio y 3 enlaces a sitios externos.
Comportamiento de los botones ‘COMUNIDAD 5’, ‘FACEBOOK’ y ‘TWITTER’
Cuando el usuario haga single click en los botones ocurrirán los siguientes casos:
CASE (single click) {
LOGOTIPO DE MARCA: Recarga de la página.
COMUNIDAD 5: Página correspondiente (target: _blank); TWITTER: Perfil de Canal 5 en Twitter (target: _blank);
FACEBOOK: Página de Facebook de Canal 5 (target: _blank); }
Comportamiento enlaces
Los enlaces del footer no se subrayarán al hacer hover, únicamente cambiarán de color.
Todos los enlaces deberán abrir en (target: _self), excepto: CASE (single click)
{
PM: Página de PM (target: _blank);
Canal de las estrellas: Sitio correspondiente (target:_blank); Foro TV: Sitio correspondiente (target:_blank);
Gala TV: Sitio correspondiente (target:_blank); }
3. STAGE HOME
Stage home
El stage home se compone de una imagen principal (contenido activo)
y 8 tabs (contenido oculto).
Comportamiento imagen principal
La imagen principal deberá tener título, descripción y uno o varios enlaces asociados.
Tendrá funcionalidad de slider: Cada nueva imagen entrará con un efecto estilo fade in de derecha a izquierda, provocando que la anterior salga con un efecto estilo fade out hacia la izquierda.
El slider cambiará automáticamente cada 7 segundos.
Comportamiento tabs
Despliegue de tabs
En la parte inferior del componente se encuentran 8 tabs o pestañas que en su estado inicial estarán colapsadas. El hover sobre cualquiera de los tabs desplegará el contenido (thumbs) de todas las pestañas y cambiará la opacidad del thumb seleccionado.
Un tab activo es aquel cuyo color es diferente al del resto de los tabs. Dicho tab permanecerá activo cuando el usuario hace single click en el thumb correspondiente provocando que la imagen principal cambie y detendrá el slider.
Los tabs permanecerán desplegados mientras el usuario mantenga el cursor sobre cualquiera de los thumbs, de lo contrario deberán colapsarse.
4. WIDGET PARRILLA
Cintilo parrilla
Compuesto de 4 espacios reservados, el primero para un título y un
enlace y los 3 restantes para los botones con los horarios de
programación.
Comportamiento de los botones
Ejemplo del estado hover de los botones
El contenido de un botón será la hora del programa y su nombre. La hora del programa se establecerá en un rango de 30 en 30 minutos.
Los botones tendrán dos estados, el natural y el hover.
Siempre y cuando el contenido de un botón haga referencia al sitio oficial de un programa un botón tendrá hover.
Se considerará en estado hover a aquellos botones en los que el usuario al pasar su cursor sobre ellos, se provoca un cambio de color en su fondo y texto.
4. CONTENIDO
Destacado 2 contenidos
Ejemplo del componente: Destacado 2 contenidos
Se compone de 3 elementos: 2 contenidos y un boxbanner.
Al hacer hover sobre cualquiera de los contenidos estos deberán presentar opacidad y el resto de su contenido deberá ser desplegado hacia arriba.
Todos los elementos de contenido tiene la función de un botón, es por ello que el usuario podrá dar click en cualquier área del mismo.
ESPACIOS SIN CONTENIDO
En caso de que sólo exista 1 contenido, el espacio vacío será ocupado por el placeholder genérico del sitio.
En caso de que no exista ningún contenido, este componente no deberá aparecer.
Mosaico principal 7
Mosaico principal 7
Se compone de 7 elementos de contenido.
Al hacer hover sobre cualquiera de los contenidos estos deberán presentar opacidad y el resto de su contenido deberá ser desplegado hacia arriba.
Todos los elementos de contenido tiene la función de un botón, es por ello que el usuario podrá dar click en cualquier área del mismo.
Si existe más contenido por parte del editor el componente tendrá la oportunidad de crecer, como se muestra en la siguiente imagen:
screenshot del componente con más contenido
ESPACIOS SIN CONTENIDOEscenario en el cual el Mosaico principal 7 tiene sólo 2 elementos de contenido
Feed de redes ‘Twitter’ y ‘Facebook’
Feed de redes sociales de ‘Twitter’ y ‘Facebook’
Se compone de un mosaico de 6 tuits.
Al hacer single click sobre el nombre del usuario deberá ir al perfil de Twitter del mismo (target: _blank).
Si en el contenido de un tuit existe un hashtag (vgr. #MiHashtag) o el nombre de usuario (vgr. @miNombreEnTwitter), estos deberán ser
enlaces con target: _blank.
Se compone de la página de Facebook del Canal 5.
Cuando un usuario haga single click sobre cualquier enlace deberá ir al perfil del Canal 5 con target: _blank.
Mostrará los últimos post realizados en la página de Facebook de Canal 5.
Si el usuario hace single click sobre el botón ‘Me Gusta’ y se encuentra autenticado en Facebook, se indicará que a este le agrada la página de Canal 5 en dicha red social. En el caso contrario aparecerá una nueva pantalla que para que este haga login.
