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 enmarcado 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”.
Ejemplo
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”.
Ejemplo
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.
Ejemplo
Imágenes
Funció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 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 hacer varios bloques de “Imágenes con enlace”.
A tener en cuenta…
Este componente solo puede ser usado en en la plantilla“Contenido agregadoras”.
No funciona en “Contenido final”.
Ejemplo
Tarjetas
Ejemplo
Recursos
Histórico
Listado de publicaciones
Contacto
Redes sociales
Iconos
Logotipos
Anclas
Galería de imágenes
Menú de navegaciónEjemplo
Listado de publicaciones
Función
Aportar una lista indefinida de archivos similares recurrentes en el tiempo.
Recomendaciones
●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).
Ejemplo
Contacto
Función
Facilitar el contacto y dirección de organismos y empresas.
Recomendaciones
●Para organismos internos, pertenecientes al GA se utiliza una redirección a su página de contacto de http://aragon.es .
Ejemplo
Redes sociales
Función
Facilitar las redes sociales del organismo presentado.
Recomendaciones
●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
Ejemplo
Iconos
Función
Reforzar el mensaje de forma más visual en algunos casos, como banners y redes sociales.
Recomendaciones
●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
Ejemplo
Logotipos
Función
Representar de manera ordenada múltiples logotipos de entidades y organismos.
Recomendaciones
●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:
Ejemplo
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
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
