Saltar al contenido principal
pdf?stylesheet=default
Blackboard Help

Recomendación de uso: Personalización de una marca

Crear una marca personalizada para su institución es una forma directa de extender su logotipo, colores e información crítica a sus usuarios. Una marca personalizada comunica la personalidad de su institución, su voz, sus compromisos y sus servicios. Las formas de personalización de su marca son muy diversas,  desde las más sencillas, hasta las más complejas.

Antes de comenzar a personalizar su marca, márquese los objetivos de la personalización y planee cómo los conseguirá.

  • Identifique el ámbito de la personalización y seleccione el método más apropiado y sencillo para conseguirlo. Por ejemplo, no es necesario crear un tema de sistema personalizado solo para añadir los colores del centro y un logotipo. En lugar de eso, pruebe a cambiar los colores y añadir un logotipo personalizando la marca predeterminada
  • Investigue un poco la identidad de la institución para asegurarse de que cumple las pautas de estilo y marca establecidas.
  • Cree una maqueta durante la fase de diseño de un página de inicio de sesión, una página de puerta de enlace y un tema de sistema personalizados.
  • Calcule bien el tiempo de desarrollo para el diseño y la prueba de las paletas y los temas personalizados.
  • Cree un plan para el control de calidad y el mantenimiento de los temas del sistema personalizados.

imagen respaldada por el textoPágina de inicio de sesión y página de puerta de enlace personalizadas

Página de inicio de sesión personalizada: una forma sencilla de comenzar a personalizar una marca es personalizar la página de inicio de sesión. La página de inicio de sesión es un único archivo que contiene su propio CSS y la mayor parte del marcado editable. Cambiar el diseño de la página de inicio de sesión no afecta al resto de la aplicación, por lo que el alcance del cambio es reducido. Para crear una página de inicio de sesión personalizada no es necesario tener experiencia con HTML ni CSS. También es necesario decidir dónde se almacenarán las imágenes asociadas.

Página de puerta de enlace: la página de puerta de enlace es la primera página web que los usuarios ven al acceder a Blackboard (a menos que se omita esta configuración).. Puede añadir un mensaje de bienvenida personalizado y una imagen o añadir módulos que contengan información crítica y oportuna. Para crear módulos personalizados no es necesario tener experiencia con HTML ni CSS. Vea Módulos para obtener más información.

Recomendaciones para el diseño de una página de portal

Las páginas de portal, como la de Mi institución, suele ser la primera pagina que ven los usuarios al entrar en Blackboard Learn. Cuidar el diseño y la disposición del contenido del módulo en esta página puede, por un lado, mejorar su marca y, por otro, mejorar la experiencia del usuario. Puede conseguirlo con dos pasos generales:

  1. Revisar todo el contenido del módulo para garantizar que no desentona con la marca recién aplicada. Durante el diseño el contenido del módulo, procure seguir las convenciones establecidas por el tema y la paleta elegidos. Pruebe a codificar el módulo en HTML para que el texto del módulo responda a los estilos de color y fuente que establecen el tema y la paleta. Algunos módulos utilizan una única imagen grande (a modo de un anuncio de encabezado en un sitio web) y así comunicar un mensaje. Las imágenes son necesarias para dar vida a la página, pero a veces el aspecto de un "anuncio de encabezado", cargado de texto del encabezado, texto de párrafo y gráficos, puede no sintonizar bien con el tema y la paleta de su marca. El uso de HTML garantiza la flexibilidad del módulo, ya que el tamaño del contenido puede cambiar con el tamaño de la ventana del navegador.
  2. Pruebe a definir una jerarquía visual para que el usuario pueda analizar fácilmente la página y encontrar contenido procesable. Por lo general, resulta más fácil decirlo que hacerlo. Como un portal incluye varios módulos con contenido diferente, con frecuencia tiene que responder a las necesidades de muchas partes diferentes. En ocasiones, cada una de estas partes quiere enfatizar su propio material. En términos generales, si se destacan igual todos los módulos, no destacará ninguno y puede dar lugar a confusión para el usuario. Pruebe a ver la página en su conjunto y organice los módulos para que el usuario pueda ver fácilmente el contenido principal.

Las demás recomendaciones relacionadas con el diseño de una página de portal no son específicas de este tipo de página, sino que seguramente incluirán máximas que ya haya tenido en consideración al diseñar el aspecto de su marca.

Accesibilidad

  • Use los ratios de contraste para la accesibilidad (http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
  • Facilite la legibilidad del texto eligiendo las fuentes, los tamaños y el espacio interlineal apropiados
  • Evite el uso de imágenes en el texto
  • Evite los fondos con texturas
  • Asegúrese de que los nombres de los enlaces son significativos, en lugar de limitarse a indicar "haga clic aquí"
  • Incluya vínculos a W3C y nuestras páginas de accesibilidad [1]

Estética

  • Use colores acordes a su marca y tema
  • Fuentes legibles
  • Use gráficos de alta calidad
  • Organice los módulos de modo que llenen toda la página
  • Cree una jerarquía visual para facilitar el análisis del contenido
  • Evite diseños de página abarrotados, ruidosos y masificados
  • Actualice el contenido de la página periódicamente
  • Si es posible, aplique las técnicas de diseño con capacidad de respuesta para que el tamaño del contenido sea adecuado en diferentes visualizaciones (http://en.wikipedia.org/wiki/Responsive_web_design)

Sugerencia

  • Si se siente limitado con el diseño de módulo predeterminado de Learn, considere la posibilidad de modificar la página de portal para utilizar una sola columna ocupada por un solo módulo HTML. Puede editar el HTML personalizado del único módulo para utilizar cualquier diseño que desee, para imitar las tendencias de otras páginas de índice.

la imagen respalda al textoControles de la interfaz gráfica

Controles de la interfaz gráfica: puede cambiar fácilmente el aspecto de su marca seleccionando un conjunto de colores y opciones de diseño para su instalación de Learn. Puede:

  • Cambiar el color de un conjunto limitado de elementos de interfaz de usuario
  • Especificar una imagen de logotipo e insertar un enlace a una URL específica
  • Seleccionar los colores y las opciones de diseño de la ficha del sistema.

No necesita conocimientos de HTML ni CSS para realizar estos cambios. Puede ver sus selecciones en el panel de vista preliminar antes de aplicar los cambios al sistema. Todas las opciones de color elegidas se pueden guardar como una Paleta de colores.

la imagen respalda al temaPaleta de colores y tema del sistema

Paleta de colores: Blackboard Learn incluye más de una docena de paletas de color. Puede seleccionar una de ellas para su marca predeterminada. Puede cambiar los colores de la paleta usando la interfaz de usuario o puede descargar la paleta y realizar cambios utilizando una herramienta de edición de texto o de CSS. 

Tema del sistema  : el tema del sistema es la capa de CSS que define el aspecto de su institución. Puede seleccionar un tema de los que proporciona Blackboard Learn o diseñar el suyo propio. La forma más fácil de crear su propio tema es descargar un tema existente y utilizarlo como plantilla. Realice los cambios necesarios utilizando una herramienta de edición de texto o de CSS. 

la imagen respalda al textoPaleta de colores personalizada

Paleta de colores personalizada: amplíe la personalización de la interfaz de usuario creando su propia paleta de colores acorde con el esquema de colores, el logotipo o la marca de su institución. Blackboard Learn cuenta con varias paletas de colores que aplican diferentes colores al sistema, y lo "maquillan". Puede modificar una paleta de colores existente para que se asemeje a sus requisitos concretos.

Recomendaciones para el diseño de una paleta de colores personalizada

Al seleccionar colores para su paleta de colores personalizada, tenga presentes algunas de las siguientes recomendaciones.

  • Utilice los colores acordes a la identidad visual de su institución. Compruebe el manual de estilo de la institución para colores oficiales. Asegúrese de que las opciones de combinación de colores se traducen en un esquema de color adecuado para la interfaz de usuario.
  • Compruebe que los colores elegidos combinan bien y crean una experiencia visual armoniosa. Color Matters es un buen sitio web para aprender algunos aspectos sobre los esquemas de color monocromáticos, análogos y complementarios. Conocer la teoría del color facilita la selección de colores que combinan bien con su institución.

la imagen respalda al textoTema del sistema personalizado

Tema del sistema personalizado: puede transformar completamente la interfaz de usuario de la instalación Learn de su institución creando un tema del sistema personalizado. Este es el método de personalización más costoso y profundo, pues requiere que se revisen y editen más de 12.000 líneas de código. Es la mejor opción para armonizar la interfaz de usuario de Blackbaord Learn con la identidad visual de su centro, pero requiere pruebas constantes con cada nueva versión de Learn.

Recomendaciones para el diseño de un tema del sistema personalizado

El diseño del tema del sistema personalizado es una tarea compleja que en ningún caso debe considerarse un proyecto secundario. Necesitará una buena dosis de experiencia en CSS y DOM. Además, necesitará tener un entorno de desarrollo para desarrollar, probar y mantener el tema. 

  • Colores: analice la identidad visual de su institución. Lo más probable es que su institución tenga un manual de estilo que incluya una sección sobre los colores de la marca del centro. Asegúrese de que las opciones de combinación de colores se traducen en un esquema de color adecuado para la interfaz de usuario.
  • Armonía del color:  tener conocimientos generales sobre los esquemas de color monocromáticos, análogos y complementarios facilita la elección de colores que combinan bien entre ellos y con su institución
  • Requisitos de accesibilidad: la familiaridad es un punto muy importante para garantizar que el tema del sistema resultante tenga contraste suficiente y que sea accesible en otros aspectos (http://www.w3.org/TR/WCAG/)
  • Fuentes: debe especificar diferentes fuentes de su marca. Pruebe las fuentes para asegurarse de que se visualizan bien en otros sistemas operativos. También puede introducir fuentes personalizadas incluyéndolas en su tema y hacer referencia a ellas con una regla @font-face. Compruebe que las fuentes personalizadas son compatibles con los idiomas en los que se enseñe.
  • Iconos: puede rediseñar algunos iconos y utilizarlos en la aplicación como imágenes de fondo.

Administración de cambios para la marca personalizada

Cuando se evalúa y prueba una actualización, es fundamental que se descarguen y guarden las personalizaciones realizadas por si fuera necesario restaurarlas. Utilice la La herramienta Theme DIFF para comparar los cambios en CSS de una versión de Learn con los de otra. Con esta herramienta resulta más fácil detectar dónde se han realizado los cambios en el CSS y así evaluar cómo afectan a las personalizaciones. 

Los elementos que definen una marca (normalmente, un tema, una paleta y un logo) son distintos del contenido de la página. Recuerde auditar el contenido de las páginas "públicas", como las páginas de Portal, para garantizar que sigue las pautas visuales que establece la marca.

Marcas diferentes para la misma instalación de Learn

Si su institución dispone de la licencia de Implicación comunitaria, puede crear diferentes marcas para diferentes grupos de usuarios< en función de su rol en el sistema. Se han de crear nombres de host personalizados para permitir el uso de varias marcas en una sola instancia de Learn.