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 En los interiores el logotipo de marca será diferente al del home. del logotipo de marca Barra de navegación para interiores Comportamiento Siempre que el usuario realice un single click en cualquier categoría esta genérico de las mantendrá su estado activo. categorías Si un usuario hace hover sobre una categoría cambiará a su opacidad. Comportamiento Si el usuario hace single click sobre cualquiera de estas categorías deberá de las categorías desplegarse un menú estilo dropdown. PROGRAMAS, PELIS y DROPDOWN PROMOS 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. Ejemplo del dropdown
Comportamiento Los 3 botones ubicados al final de la barra de navegación deberán tener el de los botones siguiente comportamiento: COMUNIDAD 5, CASE (single click) FACEBOOK y { TWITTER COMUNIDAD 5: Página correspondiente (target: _blank); TWITTER y FACEBOOK: Desplegará el API correspondiente debajo de la barra de navegación. } Comportamiento de botones de Twitter y Facebook
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 Comportamiento enlaces 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); } 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 La imagen principal deberá tener título, descripción y uno o varios imagen principal 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. screenshot del componente con placeholder
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 CONTENIDO El espacio vacío será ocupado por el placeholder genérico del sitio.
Escenario 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 TWITTER 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. FACEBOOK 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.