Ir al contenido principal

Edición de blogs en Biblioguías UCM

Guía básica para la edición de blogs en LibGuides CMS

Introducción

Con el fin de normalizar la estructura de los contenidos y el diseño de nuevas guías y páginas, este manual de estilo intenta facilitar las opciones de diseño disponibles y homogeneizar criterios a la hora de crear nuevos contenidos y biblioguías. El presente manual de estilo será de aplicación general para todas las guías.

Asimismo, para facilitar la visualización en dispositivos móviles las guías creadas tendrán obligatoriamente un comportamiento responsivo, al igual que todos los elementos de contenido que estén presentes en ellas.

En lo posible, y dada la necesaria adaptación y personalización de un CMS muy diferente al Gestor Web UCM, se tratan de seguir las pautas del Manual de Estilo Web de la UCM.

Estilo visual

Colores y tipografía

Se utilizarán los colores corporativos de la Universidad Complutense.

Colores principales

Cód. Hex. Color
#fff El color de fondo de las páginas será blanco
#FAFAFA De uso como fondo de segundo titular
#ECECEC De uso como fondo de titulares o como borde de segundo titular
#EDEDED De uso normalmente de fondo de tablas y elementos resaltables
#AAA De uso como borde de fondo de titulares
#454545 Este será el color del texto por defecto. Al igual que el fondo de la barra superior de la cabecera, el de fondo de algunos titulares y el fondo del contenido del pie de página.
#990033 De uso normalmente en cabeceras de página, títulos de las cajas así como en diversos enlaces y botones

Fuentes del texto

La fuente de letra principal en Biblioguías UCM es Quattrocento Sans en todas sus variantes: regular, bold, italic y bold-italic.

Como fuente secundaria en ciertos elementos predefinidos se emplea Noto Sans en todas sus variantes: regular, bold, italic y bold-italic.

Creación de contenidos

Texto

  • No mezclar diferentes tipos de fuentes. No se deben establecer las fuentes manualmente.
  • No usar subrayados para enfatizar. Puede confundirse con un hipervínculo.
  • Utilizar texto real en lugar de texto dentro de gráficos.
  • Evitar cambiar el tamaño de fuente a menos que tengamos una buena razón. Si necesitamos encabezados dentro de un cuadro de texto, usaremos el Encabezado 3 (<h3>) y seguiremos con el Encabezado 4 (<h4>), etc., en el editor de texto enriquecido.
  • Usaremos negrita o cursiva en el editor de texto enriquecido (o las etiquetas <strong> o <em> en HTML) para indicar el énfasis. Debemos utilizar estas etiquetas con moderación.
  • Si usamos HTML, evitaremos las etiquetas de negrita <b> o de cursiva <i> antiguas, ya que denotan estilo en lugar de importancia.
  • Se debe escribir directamente en el editor de texto enriquecido; luego se usarán las funciones en el editor de texto para agregar estilo y formato. Crear el texto en otro lugar e intentar copiarlo / pegarlo en el editor de texto traerá una gran cantidad de código HTML y formato innecesarios, que también introducirán contenido inaccesible.

Encabezados

  • Utilizaremos los encabezados de texto enriquecido como indicadores para las secciones y subsecciones de la guía. Esto no sólo proporciona una organización y un formato jerárquico, sino que también facilita a los lectores de pantalla la tarea de escanear y saltar a diferentes áreas de contenido.
  • Nunca utilizaremos el Encabezado 1 ( <h1> en HTML) en el contenido de la guía, ya que sólo debe utilizarse una vez para toda la página en el nombre de guía.
  • Nunca utilizaremos el Encabezado 2 ( <h2> en HTML), reservado para los títulos de caja.
  • Se utilizará el Encabezado 3 ( <h3> en HTML) y sucesivos en las cajas de texto enriquecido.
  • Los encabezados con números más altos deben ser colocados sobre los más bajos, de lo contrario su herencia se confundirá.

Enlaces

  • En lo posible, se preferirá la creación de enlaces mediante la opción Add Link a la inserción dentro del texto enriquecido.
  • Para los vínculos a los recursos electrónicos se empleará el tipo de enlace específico Add Database.
  • Cerciorarse de que el texto enlazado tiene sentido fuera de contexto. Evitemos usar frases como "haga clic aquí", "más", "haga clic para más detalles".
  • Debemos asegurarnos de que el enlace y los recursos de la base de datos A/Z muestren su descripción debajo del enlace. No ocultaremos la descripción detrás de un botón de forma que aparezca al pasar el ratón sobre el mismo, ya que esto interrumpe la accesibilidad.

Tablas

  • Utilizaremos las tablas principalmente para mostrar datos que encajan bien en filas y columnas. Se evitará el uso de tablas para formatear la información o estructurar el texto.
  • Añadir cabeceras de tabla para describir el contenido de las columnas de la tabla.
  • Agregaremos el título y el resumen de la tabla para que el lector de pantalla pueda obtener más información sobre la misma. Asimismo, se evitarán las filas extendidas, ya que es posible que los lectores de pantalla no las analicen correctamente.
  • Las tablas ya cuentan con estilos específicos para que funcionen correctamente en el diseño responsivo. No es necesario cambiar manualmente el ancho de la tabla o el relleno de celdas en LibGuides. Se debe anidar la tabla en una clase table-responsive empleando el editor HTML. No debemos olvidar cerrar la etiqueta tras el último código de tabla. Por ejemplo:

<div class="table-responsive">
todos los elementos de tabla van aquí
</div>

Imágenes

  • Los creadores y editores de las guías serán los responsables de que las imágenes respeten los derechos de propiedad intelectual.
  • No deben publicarse imágenes promocionales como contenido.
  • Todas las imágenes deben tener texto alternativo (etiqueta ALT) incluido.
  • Si la imagen enlaza a un recursos, debemos asegurarnos de que la etiqueta ALT describa también dicho destino.
  • Las etiquetas ALT deben ser breves y descriptivas pero no redundantes.
  • Para insertar iconos, se deberá emplear la librería de iconos Font Awesome.

Vídeos, archivos y otro contenido no HTML

  • Los creadores y editores de las guías serán los responsables de que medios y documentos respeten los derechos de propiedad intelectual.
  • Si existe la posibilidad, se agregará a los vídeos subtítulos y/o proporcionaremos transcripciones.
  • Aseguraremos la accesibilidad de contenido no HTML. Si no podemos hacerlo accesible, preferiremos utilizar HTML o, al menos, daremos una alternativa accesible.
  • Como regla general, los nombres de archivo no deben contener espacios, signos de puntuación, acentos ni eñes y deberán escribirse en minúscula. Se recomienda separar las palabras con guiones medios o bajos.
  • Salvo que el contenido sea muy extenso o venga impuesto por otras circunstancias, debe evitarse la publicación de archivos PDF. Se utilizarán, en cualquier caso, nombres claros y descriptivos, no genéricos.

Materias, etiquetas y metadatos

Es imprescindible la asignación de materias, etiquetas y metadatos.

Buenas prácticas

  • Se procurará la creación de textos breves, claros y concisos con un lenguaje no demasiado formal, comprensible y cercano para el usuario.
  • Se evitará repetir contenidos y se preferirá reutilizar contenidos y assets previamente elaborados. Cada editor será responsable de no duplicar contenidos.
  • Si se desea modificar contenidos ya existentes, es buena práctica contactar con los autores responsables de dicho contenido.
  • Los usuarios no siempre acceden en orden al contenido publicado. Por ello, es recomendable que cada bloque informativo sea comprensible por sí mismo.
  • En caso de detectar inconsistencias o enlaces rotos se comunicarán los mismos a los responsables del contenido o, en su defecto, a los administradores de Biblioguías UCM.