Caso de estudio: BBC
| Título | Caso de estudio: BBC |
|---|---|
| Tipo de Proyecto | Proyecto de Taller |
| Período | 2013-2013 |
| Asignatura | Construcción 4º DG 2013, |
| Del Curso | Construcción 4º DG 2013, |
| Carreras | Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property. |
| Alumno(s) | Paulina Buvinic |
| Profesor | Katherine Exss |
presentación
A continuación se expone el caso de estudio para el MetaSitio de BBC (http://www.bbc.co.uk/). Para ello, se deberán observar las relaciones existentes entre los distintos componentes del sitio principal en contraste con sus sitios anexos: estructura y funcionamiento.
Acerca de BBC: La British Broadcasting Corporation (Corporación Británica de Radiodifusión), más conocida como BBC, es el servicio público de comunicación del Reino Unido. Tiene su sede en la Broadcasting House en Westminster, Londres; y es la mayor agrupación de comunicaciones del mundo. Es una entidad de derecho público y autónomo. Fuera del Reino Unido opera bajo el indicativo de BBC World Service, y su labor es la de retransmitir por radio y televisión todos sus productos y más recientemente, también por internet. Aún así, éste opera independientemente.
estudio y análisis
Sitio Principal
Consideramos como sitio principal a la Homepage del sitio BBC. Debido a la cantidad de contenidos que presenta el sitio en general, el estudio se inicia identificando los elementos característicos de esta página con el fin de utilizarlos como método de comparación.
Debido a la complejidad del sitio se opta por realizar dos mapas de navegación distintos: por un lado se estudiarán los elementos de la barra de navegación, la cual forma parte del Header de la página. Junto con esto se incluyen las distintas barras de navegación que proporciona cada sub-sitio. Cabe mencionar que los colores utilizados en ambos mapas son los mismos colores que utiliza el sitios web para diferenciar las secciones. De esta manera, ya existirá un orden pre-establecido por la compañía para diferenciar las secciones.
Con el fin de ordenar visualmente los distintos contenidos que componen a la página principal del sitio, se realiza un mapa visual de ellos. Cada columna representa un estilo distinto para presentar los contenidos, es decir, a pesar de que se utiliza el mismo estilo para títulos y encabezados, se cambian los tamaños y utilización de la grilla (una, dos, cuatro columnas).
Estructura Interna
Teniendo claro un primera aproximación de lo que representa el sitio web para BBC continuamos analizando la estructura interna de la página. Es decir, identificamos la grilla que se utiliza para diagramar el sitio, de esta manera, se tomará la página principal como referente para estudiar los sub-sitios o sitios externos y lograr identificar similitudes y/o diferencias a nivel estructural.
A continuación se muestren ejemplos de distintos modos que se utiliza la grilla en una misma página.
Caso 1:1
Caso 2:1
Caso 4:1
Caso 1:1
Elementos Visuales
Se utiliza una misma tipografía para todos los contenidos dentro del Homepage. Así, para títulos y links se emplea el uso del pantone #11517f para destacar, mientras que el hover de éstos será a través del uso del underline. Por otro lado, los colores del hover utilizado en la barra de navegación dependerán de cada sección. De esta manera, los sub-sitios (conformados por las secciones) se diferenciarán, entre otras cosas, por un color predominante, por ejemplo News será rojo, Sport amarillo y Weather celeste.
Estilos Contenido
Estilo Sidebar
Estilos Tipográficos
Estilo Links
Hover Links
Estilo Slideshow
Estilo Slideshow
Hover Sección Sport
Hover Sección Weather
Despliegue Barra
.png){kind=small}
Sub-Sitios
Se considerarán las distintas secciones presentes dentro del sitio web como sub-sitios utilizando como base una misma URL. Esto se debe a que serán secciones con grandes contenidos, complejos y distintos entre ellos.
Estructura Interna
Los sub-sitios seguirán las misma estructura interna en su mayoría. Así, para estos casos, se logran identificar cuatro distintos usos que se le da a la grilla, cambiando el uso de las columnas.
Es importante destacar que, a pesar de utilizar grillas similares, existen cambios en la posición de los banners. Tomando un caso, la sección Weather utiliza una grilla igual a la de la sección News respecto a sus columnas, pero el espacio determinado para el banner cambia ya que se posiciona sobre la barra del menú de navegación.
Estilos Gráficos
Se logran identificar grupos de estilos gráficos dentro de las secciones más generales del sitio web BBC. Estos estilos gráficos no estarán predeterminados por el uso de la grilla, sino que, principalmente, por la disposición gráfica para mostrar los títulos de cada sección. De esta manera, los estilos se agrupan en cuatro grandes categorías.
- Principales: News - Sports - Weather - TV
- Secundarias: Capital - Culture - Travel - Future - Autos
- Knowledge & Learning: History - Science - Nature - Religion & Ethics - Arts & Culture
- Independientes: iPlayer (Radio) - Music - CBeebies - CBBC
Secciones Principales
Serán definidas como principales aquellas secciones que tengan mayor grado de importancia dentro de los contenidos, y las cuales están constantemente a la vista de otras secciones para poder navegar a través de ellas. Respecto a su composición visual mantienen concordancia debido al tamaño del título de la sección.
A rasgos generales, el único componente permanente dentro de las cuatro secciones será la barra de navegación principal (sitio general BBC). Aunque, cabe destacar, que los contenidos mostrados cambiarán, por ende, no todos se mantienen fijos entre los distintos sitios. Un ejemplo de esto ocurre para la barra de navegación de la sección Sport, en donde aparece por primera vez la sección Travel en vez de Capital.
Aún así, dentro de las cuatro secciones que componen las páginas principales, existirá mayor similitud entre News y Sport, mientras que el sitio para Weather y para T.V. mantendrán sus rasgos particulares debido al tipo de contenido que presentan.
Por ejemplo, para el caso de Weather se le da mayor importancia al header, el cual aumenta su ancho. Esto se debe principalmente a que es en este lugar en donde se presenta el tiempo, lo cual debe ser lo más importante de esta sección. Junto con esto, la incorporación de un mapa con las distintas temperaturas exigirá una diagramación distinta. Por otro lado, la sección T.V. se compone principalmente en enlaces externos tratados por igual en el grado de importancia, por ende, se trabajará en base a una estructura mucho más equilibrada.
Tanto la sección de noticias como deportes, debido a su alto contenido, proporcionan barras de navegación particulares (en el mapa de navegación del comienzo se puede observar todos los temas tratados por cada sección). Debido a esto, al comparar la sección superior de ambos temas se encuentran elementos visuales en común. Esto mismo ocurrirá para la parte inferior de la página, ya que en ambas secciones se proporciona la opción de cambiar el idioma y una sección de servicios.
Secciones Secundarias
Llamaremos secciones secundarias aquellas que también se consideren de fácil acceso, ya sea a través de la barra de navegación principal (en algunos casos), o a través de otras secciones como News o por medio de sitios correspondientes a este mismo grupo como los son Capital y Culture.
Dentro de la sección de contenidos secundarios, existirán elementos fijos como la barra de navegación. Cada sección utiliza un color determinado, elementos identificadores. A pesar de que se mantiene visualmente el elemento de la barra igual para todos, para la sección Travel existirá un leve cambio. A diferencia de las demás secciones, para Travel la barra de navegación es fija respecto al scroll.
Junto con esto al utilizar banner, éstos serán colocados bajo la barra de navegación, de la misma manera en que secciones principales como Sport y News lo utilizan. Cabe mencionar que este espacio no siempre es utilizado, sino dependerá del día.
En las secciones secundarios se incorporan las redes sociales, teniendo cada sección una red particular. Dentro de las redes se encuentran: Twitter, Facebook, LinkedIn y Pinterest. En el caso de LinkedIn, se re-direcciona con el perfil de la editora de la sección Capital de BBC Worldwide. De todas las secciones, únicamente la sección Future no posee ningún red social.
Pinterest Sección Autos
LinkedIn Sección Capital
Twitter Sección Travel
Facebook Sección Culture
Finalmente, el footer cambiará para las secciones secundarias, en contraste con lo que compone el footer de las secciones principales, ya que se aplica un color negro de fondo. Dentro de estos estilos podremos identificar dos tipos: aquel pie de página simple, y aquel que se incorpora contenido, informando acerca de futuras columnas.
- Footer Simple: Capital - Culture
- Footer con Contenido: Future - Autos - Travel
Secciones Knowledge
El grupo Knowledge & Learning es una sección nombrada por la misma BBC. A pesar de esto, no existe ninguna página inicial en donde se explique el contenido del grupo, sino que simplemente es un subtítulo para cada sección.
Debido a esto, es la sección que más elementos tiene en común, siguiendo un patrón claro para su diagramación y presentación de contenidos. Se mantiene el mismo encabezado, de los cuales únicamente la sección Nature incorpora una barra de navegación, estructuras iguales, conformadas por la misma cantidad de imágenes y cuerpos de textos similares.
Secciones Independientes
Nombraremos como independientes a todas aquellas secciones que no pueden ser agrupadas dentro de las categorías anteriores. Estas secciones tienden a tener una identidad visual propia, manteniéndose únicamente la barra de navegación general igual que todo el sitio, pero con cambios en las secciones que se muestran.
Radio
Music
CBBC
CBeebies
Al igual que para las Secciones Principales, el único elemento en común dentro de esta categoría será el header o barra de navegación principal. Ésta mantiene el mismo estilo que las secciones anteriores, la única diferencia es que se incorpora el botón de Sign In.
Cambios en el Idioma
Junto con las secciones, el sitio ofrece la posibilidad de cambiar el idioma de los contenidos. Ésta función solamente es proporcionada en la Homepage (de manera más predominante y extensa) y dentro de la secciones News y Sport (de menor extensión), todas ubicadas al final de la página.
Estructura Interna
Al cambiar de Idioma, el sitio re-direcciona a páginas dentro de la misma URL, en las cuales se utiliza una diagramación similar a la sección News.
Existirán cambios, como lo que ocurre para el caso del idioma Arabic, en donde se escribe de derecha a izquierda en vez del caso contrario para idiomas como el inglés, español y ruso. Debido a esto, se observa que la grilla también es reflejada verticalmente, ubicando las columnas menores hacia el lado derecho.
Sub-sitio Spanish
Sub-sitio Arabic
Sub-sitio Russian
Elementos Gráficos
Debido a que los contenidos de los sub-sitios referentes a los idiomas únicamente constan de noticias, se mantienen los elementos gráficos que proporciona la sección News; por ejemplo, el uso de color rojo para el encabezado.
Al mismo tiempo, se mantiene la extensión de la barra de navegación, manteniendo colores y estructura, siendo todas secciones en el idioma original (inglés). La única diferencia en este aspecto serán las secciones proporcionadas, ya que mientras que para los cambios de idiomas se ofrecen 7 secciones, originalmente el menú desplegable proporciona 12.
Existirá un cambio en la parte visual del footer, en el cual se utilizará un color grisáceo en vez de blanco. Junto con esto, se utiliza la misma iconografía para proporcionar otros servicios, incorporando iconos nuevos, pero se eliminará el texto en el cual se nombra el servicio.
- Español Elementos.jpg
Elementos sub-sitio Spanish
Elementos sub-sitio Arabic
Elementos sub-sitio Russian
Sitios Externos
Junto con las secciones que ofrece el sitio de BBC, existirán vínculos con sitios externos. Es decir, existirá un cambio en la URL, por lo tanto ya no serán secciones, sino que nuevos sitios.
Dentro de la misma familia BBC
Existirán sitios que, a pesar del cambio de URL, pertenecen a la misma familia BBC, por ende constantemente existen vínculos relacionados con secciones o homepage del sitio principal (bbc.co.uk). Es decir, aún se mantendrá un dominio con la cadena.
Generalmente, los sitios externos de esta categoría tienden a ser sitios construidos para otros países, ya que corresponden a la señal internacional. Por esto mismo es en la sección TV en la cual se ofrecen los links para visitarlos.
UK TV Home
CBeebies Homepage
BBC LifeStyle Homepage
BBC HD Homepage
BBC Knowledge Homepage
BBC Entertainment Homepage
Al comparar los distintos sitios se puede observar que los más ajenos a la familia serán CBeebies, el cual se dirige a un público infantil, y UKTV, canal de televisión para Australia. En ambos casos, cada sitio posee un homepage particular, el cual no sigue ninguna ley estructural ni elementos visuales comunes con la casa BBC, por ejemplo, la barra de navegación principal. El único elemento que se mantiene similar con los otros sitios externos será el footer para el caso de CBeebies, el resto posee una ley visual propia de cada identidad.
Para el resto de los casos existirá plena concordancia unos con otros. Cada sitio, ya sea LifeStyle, Knowledge, Entertainment o HD ofrecen la posibilidad de ingresar a los sitios de BBC de distintos países. Así, sus homepage serán estructuradas bajo los mismos elementos, en donde solo cambiará el skin. Para los cuatro casos se ofrecerá una barra con los países a los cuales llega la señal televisiva.
Una vez seleccionado el país a visitar, todos redireccionan al sitio oficial de BBC del caso particular, por ejemplo BBC Italy, BBC Latinamerica, etc.. Por ende, se mantendrá la misma estructura interna y composición de la página, solo existirá un cambio en el idioma y en las imágenes utilizadas para los fondos de pantalla.
LatinBBC a través de Entertainment
PolskaBBC a través de BBC HD
ItalyBBC a través de Knowledge
NordicBBC a través de LifeStyle
.jpg)
.jpg)
.jpg)
.jpg)
Cabe destacar que existirá una similitud en la barra de navegación principal (header) en comparación con la que se utiliza para el sitio principal.
.jpg){kind=small}
.jpg){kind=small}
Ajenos a la familia BBC
Al mismo tiempo existirán links que vinculan el sitio BBC con otros sitios, los cuales no poseen ninguna relación con el canal de comunicación. En este caso tomaremos los links sugeridos en la sección Weather, la cual re-direcciona a sitios web enfocados a la metereología. Estas sugerencias generalmente se encontrarán en la sección inferior de las páginas, bajo el nombre Useful Links.
Debido a que estos sitios no poseen ninguna relación con BBC, no existe ningún componente, ya sea estructural o visual, relacionado con el sitio oficial. Se utilizan grillas, estilos, y paletas diferentes.
World Meteorological Organization Homepage
Meteorological Office Homepage
conclusiones
Se entenderá por MetaSitio aquellos sitios que albergan otros sitios de la misma familia. Generalmente un metasitio será de alto contenido informativo. Éstos podrán estar compuestos por sitios externos, ya sea incorporando el mismo dominio en alguna parte de su URL (por ejemplo al ocuparse el nombre bbc antes de cada elemento: bbcentertainment.com, bbclifestyle.com), o simplemente al utilizar otro nombre (uktv.com.au). Pero también en ciertos casos, al tratarse de sitios bastante complejos, las propias secciones que ofrece serán tratados como sub-sitios, por ende se caerán dentro de la misma URL (por ejemplo: www.bbc.com/news o www.bbc.com/culture).
De esta manera, el sitio para la British Broadcasting Corporation (BBC) es considerado un metasitio el cuál se compone tanto de sitios externos como secciones que pueden ser consideradas sub-sitios. Estas secciones se estructurarán internamente a base de la misma grilla que el Homepage, pero su identidad visual cambiará levemente, específicamente en su título y barra de navegación particular.
Para las cuatro secciones el footer se compondrá con los mismo contenidos y estructura, a excepción de la sección de música, en la cual se agregan contenidos de la barra de navegación principal. Junto con esto, para tres casos de las secciones secundarias, a pesar de que el footer se mantiene igual, al emplear el mismo color de fondo con las columnas ubicadas arriba tiende a tratarse todo como una misma unidad, por ende, pareciera ser que aumenta en el grado de contenidos, ofreciendo columnas de la propia sección.
Cabe destacar que el header (barra de navegación principal) se mantiene igual dentro de su estructura, existirán leves cambios en las secciones secundarias nombradas o al incorporar el botón de Sign In en las secciones independientes. Aún así, el único cambio vendrá de la mano con las imágenes utilizadas como fondo y los colores (sea blanco, negro).
Por otro lado, para los sitios externos existirá una similitud en la barra de navegación principal, considerando los cambios de idiomas. Esto mismo ocurrirá para el footer, ya que se mantiene una estructura y elementos visuales parecidos, pero con contenidos distintos.
Así, los sitios mantendrán ciertos elementos en común dentro del footer y header (exceptuando el caso de UKTV, el cual se desliga completamente). De esta manera, al navegar dentro de los distintos sitios siempre se tiene el conocimiento que se está navegando dentro de algún elemento correspondiente a la asociación BBC. Desde ese punto de vista, si se llegase a crear una nueva sección, no sería difícil su construcción ni su ingreso al sitio. Simplemente se deberá tener en consideración a qué categoría corresponde.
A pesar de esto, al tener todo completamente estructurado se pierde la identidad visual de cada sitio. Por ejemplo para el caso de las distintas señales televisivas en los países todos son tratados de la misma manera, a no ser que sea por los cambios en los skin o imágenes de fondo. Así, a pesar de que existe libertad en los contenidos, el sentido de pertenencia cobra mayor peso que la individualidad de los sitios.
Presentación Conclusiones:
Archivo:BBC Presentación Conclusiones.pdf
