| Table of Contents | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Introducción
El contenido de aragon.es se normaliza a través de un sistema de componentes y guías de estructura.
Los componentes se combinan para formar guías de estructura.
Los componentes se utilizan de forma normalizada en todos los tipos de página. Las guías de estructura ofrecen una base para adaptar los contenidos.
Componentes
Función
Son las piezas básicas que permiten dar forma a unidades de contenido.
Tipos
Destacado
Bloques de texto
Bloques de datos
Imágenes
Imágenes con enlace
Tarjetas
Recursos
Histórico
Listado de publicaciones
Contacto
Redes sociales
Iconos
Logotipos
Anclas
Galería de imágenes
Menú de navegación
Guías de estructura
Función
Los componentes se agrupan dando lugar a diferentes guías de estructura. Estas guías de estructura sirven como base para introducir el contenido.
Tipos
Subvenciones
Campañas
Premios
Memorias y listados
Publicaciones científicas
Servicios
Empleo público
Ofertas de empleo
Destacado
Función
Destacar contenido importante.
Recomendaciones
El destacado amarillo y gris solo pueden usarse una vez por página y deben usarse en su parte superior.
El destacado enmarcadoazul puede usarse tantas veces como sea necesario a lo largo de la página sin abusar de él.
Uso de iconos
Se permite el uso de otros iconos para otras situaciones. Los iconos tendrán 30x30px. Ver “Uso de iconos”.
Bloques de texto
Función
Describir el contenido.
Variantes
Bloque de texto con y sin imagen.
Recomendaciones
Solo habrá una imagen acompañando al texto.
Se recomienda que esta imagen se añade como imagen principal debido a su ajuste automático. Para más información ver “imágenes”.
Bloques de datos
Función
Presentar información de forma más directa, cubriendo los puntos más relevantes del contenido para el lector.
Variaciones
Bloque de datos cortos para información más concisa. Y Bloque de datos largos para ofrecer un mayor desarrollo de la información, como describir las fases de una campaña.
Recomendaciones
Para la presentación de múltiples organismos se recomienda separar sus enlaces entre barras verticales.
Imágenes
ImágenesFunción
Incluir varias imágenes que complementen el contenido de la página. Principalmente usado en campañas para presentar posters y carteles.
Recomendaciones●Mantener
Mantener altura de las imágenes a 350px e intentar que las imágenes no pesen más de 250 Kb.
Todas las imágenes tendrán siempre el mismo tamaño.
Alineación a la izquierda.
No se recomienda introducir más de 4 imágenes y en ese caso se recomienda mantener una cuadrícula.
Evitar mezclar las imágenes con el contenido.
Evitar uso de imágenes de baja calidad.
A tener en cuenta…
Las imágenes tienen que ser introducidas en el editor.
Además, para el ajuste de imágenes puedes hacerlo en https://www.iloveimg.com/
Ejemplo
Imágenes con enlace
Función
Redirigir a contenidos directamente relacionados con el contenido de la página destacándolos visualmente (pueden internos o externos)
Recomendaciones●Evitar
Evitar hacer varios bloques de “Imágenes con enlace”.
A tener en cuenta…
Este componente solo puede ser usado en en la plantilla“Contenido agregadoras”plantilla Contenido final (Agregadora).
No funciona en “Contenido final”.
Tarjetas
Tarjetas
Recursos
Recursos
Listado de publicaciones
Función
Aportar una lista indefinida de archivos similares recurrentes en el tiempo.
Recomendaciones●Evitar
Evitar el salto de línea del enlace. Se recomienda reducir la extensión del texto para facilitar su lectura.
Para la inclusión de archivos diferentes se recomienda crear diferentes históricos.
Nomenclatura
La nomenclatura utilizada es:
Nombre - Fecha - Contenidos a los que pertenece - Organismo al que pertenece (Formato Mb).
Contacto
Contacto
Función
Facilitar el contacto y dirección de organismos y empresas.
Recomendaciones●Para
Para organismos internos, pertenecientes al GA se utiliza una redirección a su página de contacto
Ejemplo
del portal.
Redes sociales
Función
Facilitar las redes sociales del organismo presentado.
Recomendaciones●El
El tamaño de los iconos será de 24x24px. Ver “uso de iconos” para más información.
Dónde encontrarlos…
Streamline: Librería Core Line https://www.streamlinehq.com/icons/streamline-mini-line
Iconos
IconosFunción
Reforzar el mensaje de forma más visual en algunos casos, como banners y redes sociales.
Recomendaciones●Utilizar
Utilizar la librería Core Line de Streamline en negro con los siguientes tamaños:
Tamaño en banners: 30x30px
Tamaño en redes sociales: 24x24px
Programa de ajuste imágenes:
Dónde encontrarlos…
Streamline: Librería Core Line https://www.streamlinehq.com/icons/streamline-mini-line
Logotipos
Logotipos
Función
Representar de manera ordenada múltiples logotipos de entidades y organismos.
Recomendaciones●Evitar
Evitar su combinación con otros componentes.
Se dispondrán en línea.
En blanco y negro.
Altura de 50 px máxima con borde blanco de 20px.
Programa de ajuste imágenes:
Anclas
Anclas
Función
Redirigir a partes del contenido de la página. Solo pueden aparecer 4. Están vinculadas a los títulos de nivel 2.
Recomendaciones
Intentar mantener los títulos entre 65 y 75 caracteres.
Página de ejemplo
Galería de imágenes / contenidos
Ejemplo
Menú de navegación
Función
Es un componente que se gestiona independientemente de las páginas. Sirve para redirigir a contenidos directamente relacionados con el contenido de la página.
Recomendaciones
●Evitar una extensión de texto superior a 75 caracteres.
Ejemplo
No hay límite de creación de elementos del menú pero recomendamos que se cuide este aspecto sobre todo para una mejor experiencia del usuario.