Acerca de

Esta documentación pretende ser un espacio de consulta ante acciones que estén vinculadas con la comunicación pública de la Corporación Cultural Municipal de Coyhaique. También, un repositorio de recursos disponibles para la reproducción colectiva y consistente de los elementos gráficos que componen la simbólica de la organización.

Identidad

Introducción

Proponemos entender la identidad gráfica como un sistema compuesto por distintos elementos o herramientas que interactuan en función del contexto, bajo ciertas reglas tácticas y perceptuales: el logo, la tipografía y el color.

Logo

Para el uso del logo, su legibilidad será el criterio que guiará las decisiones para una correcta aplicación. Es importante poner atención a 4 elementos:

Versión

La identidad gráfica definida consta de dos versiones. Una versión con texto en dos lineas y una segunda minimizada a una linea. Para cada disposición, existen subversiones a todo color, blanco lineal y lleno, y negro lineal y lleno.

Tamaño

El tamaño del logo está directamente relacionado al tamaño del formato en el que este se disponga. Como normal general, este no debería ser menor a 1/24 del formato total.

Contraste

El contraste determinará cual de las versiones existentes del logo, color, blanco y negro, es más conveniente utilizar. Como criterio general, la versión a todo color se usa cuando el fondo es blanco o negro. Las versiones monocromas es conveniente utilizarlas cuando el fondo tiene textura, esto es, sobre fotos, videos o ilustraciones. Cuando el color de fondo es de algunos de los colores corporativos, se recomienda también utilizar una versión monocroma.

Tipografía

La estructura tipográfica se compone de dos partes: una tipografía para los distintos títulos y subtítulos, y otra para todo los demás cuerpos de texto.

Títulajes

Cada uno de los soportes gráficos que realizamos, poseen títulos. Para todos ellos, se sugiere utilizar la tipografía JeatBrains. La tipografía fue desarrollada por la compañía Checa de desarrollo de software JetBrains, liberada bajo licencia gratuita SIL Open Font 1.1.

Cuerpos

Para todos los cuerpos de texto que no sean títulos, recomendamos utilizar Roboto. Roboto es una tipografía orientada a entornos digitales, diseñada por Google bajo licencia Apache de software libre permisivo.

Color

La paleta de colores de la identidad gráfica consta de 4 colores y 2 monocromos.

Existen distintos modos de color, esto es, maneras de definir la composición de un color. En este caso nos interesan poner atención a dos, importantes para el despliegue de la identidad gráfica en medios físicos y digitales:

1. Modo RGB: es la forma en que se componen los colores en pantalla. Cuando ocupamos colores en entornos digitales, lo hacemos en modo RGB. Corresponde a la suma de una cantidad de rojo (R), verde (G) y azul (B) que puede ir desde 0 a 255. No todos los colores que vemos en una pantalla, existen en el mundo material.

2. Modo CMYK: es la forma en que se compone el color de impresión. Cuando imprimimos algo, ya sea a través de impresión digital, offset, serigrafía u otros, definimos los colores a través del modo CMYK. Corresponde a la suma de una cantidad de cyan (C), magenta (M), amarillo (Y) y negro (K).

3. Hexadecimales: ¿has visto que un color se representa como #DE0053? eso es notación hexadecimal. Cada color RGB puede ser representado de esta manera: una almohadilla [#] seguida de seis dígitos que pueden ir de 0 a 9 y de A a F. Cada uno de los colores que componen nuestra paleta en modo RGB está también definido de esta manera.

Gestión Web

Introducción

La gestión de un sitio web se define por una serie de tareas de edición de contenido:

1. Edición de textos: Una entrada (noticia) para publicación web, anivel de textos debería contar al menos con tres elementos: título, párrafo de bajada y párrafos adicionales. La estructura podría proyectarse como una pirámide invertida, en donde la información más importante esta en el parrafo de bajada y los primero párrafos adicionales. Ordenar la información de esta manera ayuda a la edición, pudiendo cortar texto en la parte baja de las noticias, si fuese necesario, sin comprometer contenido crítico.
2. Edición de Metadatos: Cada entrada publicada, necesita de ciertos argumentos que permitan ayudar en el orden y posibilidades de configuración de contenidos en el sitio, de cara al usuario. Para esto, contamos con tres herramientas:
   1. Categorías: nos permiten organizar las noticias en secciones. Se propone utilizarlas para definir a qué ámbito artístico cultural responde la noticia a publicar.
   2. Etiquetas (tags): Nos permitirá explicitar fijar palabras claves implícitas o presentes en el contenido. Esto es útil para la relación de nuestro sitio con los motores de búsqueda de contenido en Internet.
   3. Detalles de la Noticia: Cada noticia cuenta con un módulo en donde se pueden ingresar datos relevantes para la noticia, los que de cara al usuario aparecerán diferenciados y tabulados como una lista ordenada. Es útil para definir, por ejemplo, el horario de inicio de una actividad, el precio, el lugar, u otros datos importantes de cara a una actividad programada.
3. Edición de fotos: Como regla general, las fotos seleccionadas para publicación deben ser las de mayor tamaño disponible. Esta variable determina la calidad en la visualización de las imágenes al ser escaladas (ampliadas en su tamaño) para su uso en web. También, es importante considerar las licencias de propiedad asociadas a las imágenes, prefiriendo el uso de imágenes de archivo propio o con licencias creative commons, copyleft o de dominio público.

Pautas de estilo

Imágenes

1. Cada noticia debe contar con una imagen de portada de 1280x500 pixeles.
2. Además se recomienda disponer de tres imágenes adicionales para la galería de cada noticia. Una mayor cantidad de imágenes en nuestra noticias, mejora el ranking que los motores de búsqueda hacen de nuestro sitio. El tamaño de estas imágenes adicionales es libre, siempre con el criterio de que mayores dimensiones es mejor.
3. Se recomienda finalizar el proceso de definición y edición de imágenes antes de su carga al sitio web, si bien éstas pueden ser recortadas dentro de la misma plataforma Wordpress.

Videos

1. Los videos son importantes para cada publicación, ya que aumentan el tiempo de visita de los usuarios en el sitio.
2. Se recomienda publicar videos alojados en YouTube. Cargar videos directamente en el sitio web llenará rápido el disco duro del servidor.
3. La cantidad de videos que se pueden cargar dentro de una noticia es ilimitada. Se recomienda que el número de videos sea equilibrado a la extensión del artículo, disponiendo contenido de texto adecuado y amigable para los motores de búsqueda.

Texto

1. Títulos
   1. La palabra clave principal de nuestra noticia, debería estar incluída en el título de esta.
   2. Es mejor que el título no exceda los 65 caracteres.
   3. No repetir el mismo título en noticias distintas!
2. Párrafos
   1. Para publicaciones en redes sociales, se recomienda una extensión que esté entre las 100 a 300 palabras. Las publicaciones con menos de 300 palabras son menospreciadas por los motores de búsqueda, por lo cual se recomienda intentar superar el umbral de 300 palabras. Para publicaciones web convencionales, se sugiere que la extensión del cuerpo de texto esté entre las 300 y 1000 palabras (!). Cada vez menos, pero todavía, las publicaciones que más ayudan en el posicionamiento web son las que sobrepasan las 1000 palabras.
   2. Se recomienda utilizar negritas y cursivas para resaltar palabras claves y sus sinónimos. Ayuda al ritmo de lectura.
   3. Hacer listas también mejora la lectura de nuestros contenidos por parte de los usuarios y de los motores de búsqueda. Todo lo que pueda ser mostrado como lista, se recomienda presentarlo de esta manera.
3. Publicaciones externas
   1. De la misma manera en que se pueden incrustar videos en nuestras noticias, podemos incluir tweets, posteos de facebook o instagram. Incluir voces de otras personas relevantes para el ámbito temático que estemos tratando, diversifica la estructura del discurso de nuestra publicación, y ayuda a los motores de busqueda en la semántica de nuestros artículos.

Recursos

Videotutoriales

Creación de Noticias [Entradas]

Publicación de Actividades [Agenda]

Descarga de Recursos

Logo

1. Manual de marca .pdf > descargar
2. Versión 1 [texto dos líneas]
   1. .png transparente > descargar
   2. .pdf original editable > descargar
3. Versión 2 [texto 1 línea]
   1. .png transparente > descargar
   2. .pdf original editable > descargar

Tipografías

1. Para Títulos > descargar JetBrains
2. Para Cuerpos de texto > descargar Roboto

Colores

1. Paleta .pdf > descargar
2. Paleta .css> descargar
3. Paleta .ase [Illustrator] > descargar

Templates imágenes

1. Imagen principal de noticias [1280x500px]
   1. .pdf [Illustrator] > descargar
   2. .psd [Photoshop] > descargar

Repositorio > descargar todo